From 94200219c31c1a6939a01a8d14760a12d08412f4 Mon Sep 17 00:00:00 2001
From: drcbeatz <brynecarruthers@gmail.com>
Date: Sun, 19 Jun 2022 21:48:11 -0400
Subject: [PATCH] squash commits

---
 .editorconfig                                 |   15 +
 .eslintignore                                 |   17 +
 .eslintrc.js                                  |   14 +
 .gitattributes                                |    3 +
 .github/FUNDING.yml                           |    1 +
 .github/ISSUE_TEMPLATE.md                     |   29 +
 .github/ISSUE_TEMPLATE/bug_report.yml         |   50 +
 .github/ISSUE_TEMPLATE/config.yml             |    5 +
 .github/ISSUE_TEMPLATE/feature_request.yml    |   42 +
 .github/PULL_REQUEST_TEMPLATE.md              |    8 +
 .github/workflows/ci.yml                      |   41 +
 .github/workflows/docs.yml                    |   28 +
 .gitignore                                    |   23 +
 .mocharc.js                                   |   14 +
 CHANGELOG.md                                  | 2443 +++++
 CODE_OF_CONDUCT.md                            |    3 +
 CONTRIBUTING.md                               |  141 +
 LICENSE.md                                    |    7 +
 README.md                                     |   75 +
 check_publish_env.js                          |    4 +
 package-lock.json                             | 8381 +++++++++++++++++
 package.json                                  |  156 +
 register.js                                   |   56 +
 rollup.config.js                              |  138 +
 ...-11-26-frameworks-without-the-framework.md |   55 +
 ...17-08-07-the-easiest-way-to-get-started.md |   66 +
 .../2017-09-06-the-zen-of-just-writing-css.md |   78 +
 ...per-towards-the-ideal-web-app-framework.md |   84 +
 site/content/blog/2018-04-18-version-2.md     |  204 +
 .../blog/2018-12-26-svelte-css-in-js.md       |   29 +
 ...2018-12-27-virtual-dom-is-pure-overhead.md |  149 +
 .../2019-01-31-svelte-on-the-changelog.md     |   21 +
 .../blog/2019-04-15-setting-up-your-editor.md |   65 +
 .../2019-04-16-svelte-for-new-developers.md   |  100 +
 .../blog/2019-04-20-write-less-code.md        |  164 +
 ...19-04-22-svelte-3-rethinking-reactivity.md |   97 +
 .../blog/2020-07-17-svelte-and-typescript.md  |  141 +
 ...-10-01-whats-new-in-svelte-october-2020.md |   85 +
 ...11-01-whats-new-in-svelte-november-2020.md |   46 +
 ...020-11-05-whats-the-deal-with-sveltekit.md |  103 +
 ...12-01-whats-new-in-svelte-december-2020.md |   71 +
 ...-01-01-whats-new-in-svelte-january-2021.md |   86 +
 ...02-01-whats-new-in-svelte-february-2021.md |   86 +
 ...21-03-01-whats-new-in-svelte-march-2021.md |  104 +
 .../content/blog/2021-03-23-sveltekit-beta.md |   67 +
 ...21-04-01-whats-new-in-svelte-april-2021.md |   73 +
 ...2021-05-01-whats-new-in-svelte-may-2021.md |   76 +
 ...021-06-01-whats-new-in-svelte-june-2021.md |   65 +
 ...021-07-01-whats-new-in-svelte-july-2021.md |   65 +
 ...1-08-01-whats-new-in-svelte-august-2021.md |   71 +
 ...9-01-whats-new-in-svelte-september-2021.md |   83 +
 ...-10-01-whats-new-in-svelte-october-2021.md |   99 +
 ...11-01-whats-new-in-svelte-november-2021.md |   85 +
 ...12-01-whats-new-in-svelte-december-2021.md |   91 +
 ...-01-01-whats-new-in-svelte-january-2022.md |   77 +
 ...-01-13-accelerating-sveltes-development.md |   67 +
 ...02-01-whats-new-in-svelte-february-2022.md |  106 +
 ...22-03-01-whats-new-in-svelte-march-2022.md |   87 +
 ...22-04-01-whats-new-in-svelte-april-2022.md |  104 +
 ...2022-05-01-whats-new-in-svelte-may-2022.md |   89 +
 ...022-06-01-whats-new-in-svelte-june-2022.md |  113 +
 site/content/docs/00-introduction.md          |   11 +
 site/content/docs/01-component-format.md      |  340 +
 site/content/docs/02-template-syntax.md       | 1782 ++++
 site/content/docs/03-run-time.md              | 1203 +++
 site/content/docs/04-compile-time.md          |  367 +
 .../content/docs/05-accessibility-warnings.md |  272 +
 .../00-introduction/00-hello-world/App.svelte |    5 +
 .../00-introduction/00-hello-world/meta.json  |    3 +
 .../01-dynamic-attributes/App.svelte          |    7 +
 .../01-dynamic-attributes/meta.json           |    3 +
 .../00-introduction/02-styling/App.svelte     |    9 +
 .../00-introduction/02-styling/meta.json      |    3 +
 .../03-nested-components/App.svelte           |   14 +
 .../03-nested-components/Nested.svelte        |    1 +
 .../03-nested-components/meta.json            |    3 +
 .../00-introduction/04-html-tags/App.svelte   |    5 +
 .../00-introduction/04-html-tags/meta.json    |    3 +
 .../examples/00-introduction/meta.json        |    3 +
 .../00-reactive-assignments/App.svelte        |   11 +
 .../00-reactive-assignments/meta.json         |    3 +
 .../01-reactive-declarations/App.svelte       |   18 +
 .../01-reactive-declarations/meta.json        |    3 +
 .../02-reactive-statements/App.svelte         |   16 +
 .../02-reactive-statements/meta.json          |    3 +
 site/content/examples/01-reactivity/meta.json |    3 +
 .../02-props/00-declaring-props/App.svelte    |    5 +
 .../02-props/00-declaring-props/Nested.svelte |    5 +
 .../02-props/00-declaring-props/meta.json     |    3 +
 .../02-props/01-default-values/App.svelte     |    6 +
 .../02-props/01-default-values/Nested.svelte  |    5 +
 .../02-props/01-default-values/meta.json      |    3 +
 .../02-props/02-spread-props/App.svelte       |   12 +
 .../02-props/02-spread-props/Info.svelte      |   12 +
 .../02-props/02-spread-props/meta.json        |    3 +
 site/content/examples/02-props/meta.json      |    3 +
 .../examples/03-logic/00-if-blocks/App.svelte |   19 +
 .../examples/03-logic/00-if-blocks/meta.json  |    3 +
 .../03-logic/01-else-blocks/App.svelte        |   17 +
 .../03-logic/01-else-blocks/meta.json         |    3 +
 .../03-logic/02-else-if-blocks/App.svelte     |   11 +
 .../03-logic/02-else-if-blocks/meta.json      |    3 +
 .../03-logic/03-each-blocks/App.svelte        |   19 +
 .../03-logic/03-each-blocks/meta.json         |    3 +
 .../03-logic/04-keyed-each-blocks/App.svelte  |   35 +
 .../04-keyed-each-blocks/Thing.svelte         |   24 +
 .../03-logic/04-keyed-each-blocks/meta.json   |    3 +
 .../03-logic/05-await-blocks/App.svelte       |   30 +
 .../03-logic/05-await-blocks/meta.json        |    3 +
 site/content/examples/03-logic/meta.json      |    3 +
 .../04-events/00-dom-events/App.svelte        |   16 +
 .../04-events/00-dom-events/meta.json         |    3 +
 .../04-events/01-inline-handlers/App.svelte   |   11 +
 .../04-events/01-inline-handlers/meta.json    |    3 +
 .../04-events/02-event-modifiers/App.svelte   |    9 +
 .../04-events/02-event-modifiers/meta.json    |    3 +
 .../04-events/03-component-events/App.svelte  |    9 +
 .../03-component-events/Inner.svelte          |   15 +
 .../04-events/03-component-events/meta.json   |    3 +
 .../04-events/04-event-forwarding/App.svelte  |    9 +
 .../04-event-forwarding/Inner.svelte          |   15 +
 .../04-event-forwarding/Outer.svelte          |    5 +
 .../04-events/04-event-forwarding/meta.json   |    3 +
 .../05-dom-event-forwarding/App.svelte        |    9 +
 .../CustomButton.svelte                       |   22 +
 .../05-dom-event-forwarding/meta.json         |    3 +
 site/content/examples/04-events/meta.json     |    3 +
 .../05-bindings/00-text-inputs/App.svelte     |    6 +
 .../05-bindings/00-text-inputs/meta.json      |    3 +
 .../05-bindings/01-numeric-inputs/App.svelte  |   16 +
 .../05-bindings/01-numeric-inputs/meta.json   |    3 +
 .../05-bindings/02-checkbox-inputs/App.svelte |   18 +
 .../05-bindings/02-checkbox-inputs/meta.json  |    3 +
 .../05-bindings/03-group-inputs/App.svelte    |   52 +
 .../05-bindings/03-group-inputs/meta.json     |    3 +
 .../05-bindings/04-textarea-inputs/App.svelte |   12 +
 .../05-bindings/04-textarea-inputs/meta.json  |    3 +
 .../05-bindings/05-file-inputs/App.svelte     |   37 +
 .../05-bindings/05-file-inputs/meta.json      |    3 +
 .../05-bindings/06-select-bindings/App.svelte |   39 +
 .../05-bindings/06-select-bindings/meta.json  |    3 +
 .../07-multiple-select-bindings/App.svelte    |   53 +
 .../07-multiple-select-bindings/meta.json     |    3 +
 .../08-each-block-bindings/App.svelte         |   44 +
 .../08-each-block-bindings/meta.json          |    3 +
 .../05-bindings/09-media-elements/App.svelte  |  131 +
 .../05-bindings/09-media-elements/meta.json   |    3 +
 .../05-bindings/10-dimensions/App.svelte      |   20 +
 .../05-bindings/10-dimensions/meta.json       |    3 +
 .../05-bindings/11-bind-this/App.svelte       |   55 +
 .../05-bindings/11-bind-this/meta.json        |    3 +
 .../12-component-bindings/App.svelte          |   14 +
 .../12-component-bindings/Keypad.svelte       |   40 +
 .../12-component-bindings/meta.json           |    3 +
 site/content/examples/05-bindings/meta.json   |    3 +
 .../06-lifecycle/00-onmount/App.svelte        |   38 +
 .../06-lifecycle/00-onmount/meta.json         |    3 +
 .../06-lifecycle/01-ondestroy/App.svelte      |   11 +
 .../06-lifecycle/01-ondestroy/meta.json       |    3 +
 .../06-lifecycle/01-ondestroy/utils.js        |    9 +
 .../06-lifecycle/02-update/App.svelte         |  106 +
 .../examples/06-lifecycle/02-update/meta.json |    3 +
 .../examples/06-lifecycle/03-tick/App.svelte  |   37 +
 .../examples/06-lifecycle/03-tick/meta.json   |    3 +
 site/content/examples/06-lifecycle/meta.json  |    3 +
 .../07-stores/00-writable-stores/App.svelte   |   18 +
 .../00-writable-stores/Decrementer.svelte     |   11 +
 .../00-writable-stores/Incrementer.svelte     |   11 +
 .../00-writable-stores/Resetter.svelte        |   11 +
 .../07-stores/00-writable-stores/meta.json    |    3 +
 .../07-stores/00-writable-stores/stores.js    |    3 +
 .../01-auto-subscriptions/App.svelte          |   12 +
 .../01-auto-subscriptions/Decrementer.svelte  |   11 +
 .../01-auto-subscriptions/Incrementer.svelte  |   11 +
 .../01-auto-subscriptions/Resetter.svelte     |   11 +
 .../07-stores/01-auto-subscriptions/meta.json |    3 +
 .../07-stores/01-auto-subscriptions/stores.js |    3 +
 .../07-stores/02-readable-stores/App.svelte   |   12 +
 .../07-stores/02-readable-stores/meta.json    |    3 +
 .../07-stores/02-readable-stores/stores.js    |   11 +
 .../07-stores/03-derived-stores/App.svelte    |   17 +
 .../07-stores/03-derived-stores/meta.json     |    3 +
 .../07-stores/03-derived-stores/stores.js     |   18 +
 .../07-stores/04-custom-stores/App.svelte     |    9 +
 .../07-stores/04-custom-stores/meta.json      |    3 +
 .../07-stores/04-custom-stores/stores.js      |   14 +
 site/content/examples/07-stores/meta.json     |    3 +
 .../examples/08-motion/00-tweened/App.svelte  |   38 +
 .../examples/08-motion/00-tweened/meta.json   |    3 +
 .../examples/08-motion/01-spring/App.svelte   |   35 +
 .../examples/08-motion/01-spring/meta.json    |    3 +
 site/content/examples/08-motion/meta.json     |    3 +
 .../09-transitions/00-transition/App.svelte   |   15 +
 .../09-transitions/00-transition/meta.json    |    3 +
 .../App.svelte                                |   15 +
 .../meta.json                                 |    3 +
 .../09-transitions/02-in-and-out/App.svelte   |   15 +
 .../09-transitions/02-in-and-out/meta.json    |    3 +
 .../03-custom-css-transitions/App.svelte      |   49 +
 .../03-custom-css-transitions/meta.json       |    3 +
 .../04-custom-js-transitions/App.svelte       |   36 +
 .../04-custom-js-transitions/meta.json        |    3 +
 .../05-transition-events/App.svelte           |   25 +
 .../05-transition-events/meta.json            |    3 +
 .../06-deferred-transitions/App.svelte        |  153 +
 .../06-deferred-transitions/images.js         |  102 +
 .../06-deferred-transitions/meta.json         |    3 +
 .../content/examples/09-transitions/meta.json |    3 +
 .../10-animations/00-animate/App.svelte       |  147 +
 .../10-animations/00-animate/meta.json        |    3 +
 site/content/examples/10-animations/meta.json |    3 +
 .../examples/11-easing/00-easing/App.svelte   |  105 +
 .../11-easing/00-easing/Controls.svelte       |  187 +
 .../examples/11-easing/00-easing/Grid.svelte  |   62 +
 .../examples/11-easing/00-easing/eases.js     |   43 +
 .../examples/11-easing/00-easing/meta.json    |    3 +
 site/content/examples/11-easing/meta.json     |    3 +
 .../examples/12-svg/01-clock/App.svelte       |  104 +
 .../examples/12-svg/01-clock/meta.json        |    3 +
 .../examples/12-svg/02-bar-chart/App.svelte   |  118 +
 .../examples/12-svg/02-bar-chart/meta.json    |    3 +
 .../examples/12-svg/03-area-chart/App.svelte  |  111 +
 .../examples/12-svg/03-area-chart/data.js     |   45 +
 .../examples/12-svg/03-area-chart/meta.json   |    3 +
 .../examples/12-svg/04-scatterplot/App.svelte |   24 +
 .../12-svg/04-scatterplot/Scatterplot.svelte  |   95 +
 .../examples/12-svg/04-scatterplot/data.js    |   54 +
 .../examples/12-svg/04-scatterplot/meta.json  |    3 +
 .../12-svg/05-svg-transitions/App.svelte      |   74 +
 .../05-svg-transitions/custom-transitions.js  |   18 +
 .../12-svg/05-svg-transitions/meta.json       |    3 +
 .../12-svg/05-svg-transitions/shape.js        |    2 +
 site/content/examples/12-svg/meta.json        |    3 +
 .../examples/13-actions/00-actions/App.svelte |   32 +
 .../13-actions/00-actions/click_outside.js    |   15 +
 .../examples/13-actions/00-actions/meta.json  |    3 +
 .../App.svelte                                |   20 +
 .../longpress.js                              |   28 +
 .../01-adding-parameters-to-actions/meta.json |    3 +
 .../13-actions/03-actions-pannable/App.svelte |   51 +
 .../13-actions/03-actions-pannable/meta.json  |    3 +
 .../03-actions-pannable/pannable.js           |   47 +
 site/content/examples/13-actions/meta.json    |    3 +
 .../examples/14-classes/00-classes/App.svelte |   29 +
 .../examples/14-classes/00-classes/meta.json  |    3 +
 .../14-classes/01-class-shorthand/App.svelte  |   18 +
 .../14-classes/01-class-shorthand/meta.json   |    3 +
 site/content/examples/14-classes/meta.json    |    3 +
 .../15-composition/00-slots/App.svelte        |    8 +
 .../15-composition/00-slots/Box.svelte        |   14 +
 .../15-composition/00-slots/meta.json         |    3 +
 .../01-slot-fallbacks/App.svelte              |   10 +
 .../01-slot-fallbacks/Box.svelte              |   16 +
 .../01-slot-fallbacks/meta.json               |    3 +
 .../15-composition/02-named-slots/App.svelte  |   14 +
 .../02-named-slots/ContactCard.svelte         |   47 +
 .../15-composition/02-named-slots/meta.json   |    3 +
 .../15-composition/03-slot-props/App.svelte   |   46 +
 .../03-slot-props/Hoverable.svelte            |   15 +
 .../15-composition/03-slot-props/meta.json    |    3 +
 .../04-conditional-slots/App.svelte           |   13 +
 .../04-conditional-slots/Profile.svelte       |   24 +
 .../04-conditional-slots/meta.json            |    3 +
 .../15-composition/05-modal/App.svelte        |   29 +
 .../15-composition/05-modal/Modal.svelte      |   81 +
 .../15-composition/05-modal/meta.json         |    3 +
 .../content/examples/15-composition/meta.json |    3 +
 .../16-context/00-context-api/App.svelte      |   13 +
 .../16-context/00-context-api/Map.svelte      |   49 +
 .../00-context-api/MapMarker.svelte           |   19 +
 .../16-context/00-context-api/mapbox.js       |    8 +
 .../16-context/00-context-api/meta.json       |    3 +
 site/content/examples/16-context/meta.json    |    3 +
 .../00-svelte-self/App.svelte                 |   41 +
 .../00-svelte-self/File.svelte                |   14 +
 .../00-svelte-self/Folder.svelte              |   53 +
 .../00-svelte-self/meta.json                  |    3 +
 .../01-svelte-component/App.svelte            |   21 +
 .../01-svelte-component/BlueThing.svelte      |    7 +
 .../01-svelte-component/GreenThing.svelte     |    7 +
 .../01-svelte-component/RedThing.svelte       |    7 +
 .../01-svelte-component/meta.json             |    3 +
 .../02-svelte-element/App.svelte              |   12 +
 .../02-svelte-element/meta.json               |    3 +
 .../03-svelte-window/App.svelte               |   42 +
 .../03-svelte-window/meta.json                |    3 +
 .../04-svelte-window-bindings/App.svelte      |   88 +
 .../04-svelte-window-bindings/meta.json       |    3 +
 .../05-svelte-body/App.svelte                 |   37 +
 .../05-svelte-body/meta.json                  |    3 +
 .../06-svelte-head/App.svelte                 |    5 +
 .../06-svelte-head/meta.json                  |    3 +
 .../examples/17-special-elements/meta.json    |    3 +
 .../01-module-exports/App.svelte              |   47 +
 .../01-module-exports/AudioPlayer.svelte      |   52 +
 .../01-module-exports/meta.json               |    3 +
 .../examples/18-module-context/meta.json      |    3 +
 .../examples/19-debugging/00-debug/App.svelte |   13 +
 .../examples/19-debugging/00-debug/meta.json  |    3 +
 site/content/examples/19-debugging/meta.json  |    3 +
 .../20-7guis/01-7guis-counter/App.svelte      |    7 +
 .../20-7guis/01-7guis-counter/meta.json       |    3 +
 .../20-7guis/02-7guis-temperature/App.svelte  |   24 +
 .../20-7guis/02-7guis-temperature/meta.json   |    3 +
 .../03-7guis-flight-booker/App.svelte         |   59 +
 .../20-7guis/03-7guis-flight-booker/meta.json |    3 +
 .../20-7guis/04-7guis-timer/App.svelte        |   41 +
 .../20-7guis/04-7guis-timer/meta.json         |    3 +
 .../20-7guis/05-7guis-crud/App.svelte         |   90 +
 .../examples/20-7guis/05-7guis-crud/meta.json |    3 +
 .../20-7guis/06-7guis-circles/App.svelte      |  125 +
 .../20-7guis/06-7guis-circles/meta.json       |    3 +
 site/content/examples/20-7guis/meta.json      |    3 +
 .../01-hacker-news/App.svelte                 |   57 +
 .../01-hacker-news/Comment.svelte             |   32 +
 .../01-hacker-news/Item.svelte                |   43 +
 .../01-hacker-news/List.svelte                |   46 +
 .../01-hacker-news/Summary.svelte             |   40 +
 .../21-miscellaneous/01-hacker-news/meta.json |    3 +
 .../02-immutable-data/App.svelte              |   36 +
 .../02-immutable-data/ImmutableTodo.svelte    |   27 +
 .../02-immutable-data/MutableTodo.svelte      |   25 +
 .../02-immutable-data/flash.js                |   13 +
 .../02-immutable-data/meta.json               |    3 +
 .../examples/21-miscellaneous/meta.json       |    3 +
 .../20181225-blog-svelte-css-in-js/App.svelte |   10 +
 .../Hero.svelte                               |   15 +
 .../20181225-blog-svelte-css-in-js/meta.json  |    3 +
 .../20181225-blog-svelte-css-in-js/styles.js  |   35 +
 .../20190420-blog-write-less-code/App.svelte  |    9 +
 .../20190420-blog-write-less-code/meta.json   |    3 +
 site/content/examples/99-embeds/meta.json     |    1 +
 site/content/faq/100-im-new-to-svelte.md      |    7 +
 .../1000-how-can-i-update-my-v2-components.md |    5 +
 .../faq/110-where-can-i-get-support.md        |    9 +
 .../faq/1100-is-svelte-v2-still-available.md  |    7 +
 site/content/faq/1200-how-do-i-do-hmr.md      |    5 +
 ...200-are-there-any-third-party-resources.md |    5 +
 .../400-how-can-i-get-syntax-highlighting.md  |    5 +
 ...5-is-there-a-tool-to-automaticly-format.md |    5 +
 .../450-how-do-i-document-my-components.md    |   32 +
 .../faq/500-what-about-typescript-support.md  |   20 +
 site/content/faq/600-does-svelte-scale.md     |    5 +
 .../faq/700-is-there-a-component-library.md   |    5 +
 .../faq/800-how-do-i-test-svelte-apps.md      |   12 +
 site/content/faq/900-is-there-a-router.md     |   13 +
 .../01-basics/app-a/App.svelte                |    1 +
 .../01-introduction/01-basics/text.md         |   32 +
 .../02-adding-data/app-a/App.svelte           |    1 +
 .../02-adding-data/app-b/App.svelte           |    5 +
 .../01-introduction/02-adding-data/text.md    |   23 +
 .../03-dynamic-attributes/app-a/App.svelte    |    5 +
 .../03-dynamic-attributes/app-b/App.svelte    |    6 +
 .../03-dynamic-attributes/text.md             |   33 +
 .../04-styling/app-a/App.svelte               |    5 +
 .../04-styling/app-b/App.svelte               |    9 +
 .../01-introduction/04-styling/text.md        |   19 +
 .../05-nested-components/app-a/App.svelte     |    9 +
 .../05-nested-components/app-a/Nested.svelte  |    1 +
 .../05-nested-components/app-b/App.svelte     |   14 +
 .../05-nested-components/app-b/Nested.svelte  |    1 +
 .../05-nested-components/text.md              |   28 +
 .../06-html-tags/app-a/App.svelte             |    5 +
 .../06-html-tags/app-b/App.svelte             |    5 +
 .../01-introduction/06-html-tags/text.md      |   15 +
 .../07-making-an-app/app-a/App.svelte         |    1 +
 .../01-introduction/07-making-an-app/text.md  |   39 +
 .../tutorial/01-introduction/meta.json        |    3 +
 .../01-reactive-assignments/app-a/App.svelte  |   11 +
 .../01-reactive-assignments/app-b/App.svelte  |   11 +
 .../01-reactive-assignments/text.md           |   21 +
 .../02-reactive-declarations/app-a/App.svelte |   11 +
 .../02-reactive-declarations/app-b/App.svelte |   14 +
 .../02-reactive-declarations/text.md          |   22 +
 .../03-reactive-statements/app-a/App.svelte   |   11 +
 .../03-reactive-statements/app-b/App.svelte   |   16 +
 .../03-reactive-statements/text.md            |   27 +
 .../app-a/App.svelte                          |   15 +
 .../app-b/App.svelte                          |   15 +
 .../04-updating-arrays-and-objects/text.md    |   54 +
 site/content/tutorial/02-reactivity/meta.json |    3 +
 .../01-declaring-props/app-a/App.svelte       |    5 +
 .../01-declaring-props/app-a/Nested.svelte    |    5 +
 .../01-declaring-props/app-b/App.svelte       |    5 +
 .../01-declaring-props/app-b/Nested.svelte    |    5 +
 .../03-props/01-declaring-props/text.md       |   15 +
 .../02-default-values/app-a/App.svelte        |    5 +
 .../02-default-values/app-a/Nested.svelte     |    5 +
 .../02-default-values/app-b/App.svelte        |    6 +
 .../02-default-values/app-b/Nested.svelte     |    5 +
 .../03-props/02-default-values/text.md        |   18 +
 .../03-props/03-spread-props/app-a/App.svelte |   12 +
 .../03-spread-props/app-a/Info.svelte         |   12 +
 .../03-props/03-spread-props/app-b/App.svelte |   12 +
 .../03-spread-props/app-b/Info.svelte         |   12 +
 .../tutorial/03-props/03-spread-props/text.md |   11 +
 site/content/tutorial/03-props/meta.json      |    3 +
 .../04-logic/01-if-blocks/app-a/App.svelte    |   15 +
 .../04-logic/01-if-blocks/app-b/App.svelte    |   19 +
 .../tutorial/04-logic/01-if-blocks/text.md    |   23 +
 .../04-logic/02-else-blocks/app-a/App.svelte  |   19 +
 .../04-logic/02-else-blocks/app-b/App.svelte  |   17 +
 .../tutorial/04-logic/02-else-blocks/text.md  |   19 +
 .../03-else-if-blocks/app-a/App.svelte        |   13 +
 .../03-else-if-blocks/app-b/App.svelte        |   11 +
 .../04-logic/03-else-if-blocks/text.md        |   15 +
 .../04-logic/04-each-blocks/app-a/App.svelte  |   17 +
 .../04-logic/04-each-blocks/app-b/App.svelte  |   17 +
 .../tutorial/04-logic/04-each-blocks/text.md  |   29 +
 .../05-keyed-each-blocks/app-a/App.svelte     |   23 +
 .../05-keyed-each-blocks/app-a/Thing.svelte   |   32 +
 .../05-keyed-each-blocks/app-b/App.svelte     |   23 +
 .../05-keyed-each-blocks/app-b/Thing.svelte   |   32 +
 .../04-logic/05-keyed-each-blocks/text.md     |   21 +
 .../04-logic/06-await-blocks/app-a/App.svelte |   25 +
 .../04-logic/06-await-blocks/app-b/App.svelte |   30 +
 .../tutorial/04-logic/06-await-blocks/text.md |   25 +
 site/content/tutorial/04-logic/meta.json      |    3 +
 .../05-events/01-dom-events/app-a/App.svelte  |   16 +
 .../05-events/01-dom-events/app-b/App.svelte  |   16 +
 .../tutorial/05-events/01-dom-events/text.md  |   11 +
 .../02-inline-handlers/app-a/App.svelte       |   16 +
 .../02-inline-handlers/app-b/App.svelte       |   11 +
 .../05-events/02-inline-handlers/text.md      |   15 +
 .../03-event-modifiers/app-a/App.svelte       |    9 +
 .../03-event-modifiers/app-b/App.svelte       |    9 +
 .../05-events/03-event-modifiers/text.md      |   30 +
 .../04-component-events/app-a/App.svelte      |    9 +
 .../04-component-events/app-a/Inner.svelte    |   11 +
 .../04-component-events/app-b/App.svelte      |    9 +
 .../04-component-events/app-b/Inner.svelte    |   15 +
 .../05-events/04-component-events/text.md     |   27 +
 .../05-event-forwarding/app-a/App.svelte      |    9 +
 .../05-event-forwarding/app-a/Inner.svelte    |   15 +
 .../05-event-forwarding/app-a/Outer.svelte    |    5 +
 .../05-event-forwarding/app-b/App.svelte      |    9 +
 .../05-event-forwarding/app-b/Inner.svelte    |   15 +
 .../05-event-forwarding/app-b/Outer.svelte    |    5 +
 .../05-events/05-event-forwarding/text.md     |   34 +
 .../06-dom-event-forwarding/app-a/App.svelte  |    9 +
 .../app-a/CustomButton.svelte                 |   22 +
 .../06-dom-event-forwarding/app-b/App.svelte  |    9 +
 .../app-b/CustomButton.svelte                 |   22 +
 .../05-events/06-dom-event-forwarding/text.md |   13 +
 site/content/tutorial/05-events/meta.json     |    3 +
 .../01-text-inputs/app-a/App.svelte           |    7 +
 .../01-text-inputs/app-b/App.svelte           |    7 +
 .../06-bindings/01-text-inputs/text.md        |   15 +
 .../02-numeric-inputs/app-a/App.svelte        |   21 +
 .../02-numeric-inputs/app-b/App.svelte        |   21 +
 .../06-bindings/02-numeric-inputs/text.md     |   12 +
 .../03-checkbox-inputs/app-a/App.svelte       |   18 +
 .../03-checkbox-inputs/app-b/App.svelte       |   18 +
 .../06-bindings/03-checkbox-inputs/text.md    |    9 +
 .../04-group-inputs/app-a/App.svelte          |   54 +
 .../04-group-inputs/app-b/App.svelte          |   52 +
 .../06-bindings/04-group-inputs/text.md       |   36 +
 .../05-textarea-inputs/app-a/App.svelte       |   12 +
 .../05-textarea-inputs/app-b/App.svelte       |   12 +
 .../06-bindings/05-textarea-inputs/text.md    |   17 +
 .../06-select-bindings/app-a/App.svelte       |   43 +
 .../06-select-bindings/app-b/App.svelte       |   43 +
 .../06-bindings/06-select-bindings/text.md    |   13 +
 .../app-a/App.svelte                          |   52 +
 .../app-b/App.svelte                          |   53 +
 .../07-multiple-select-bindings/text.md       |   21 +
 .../app-a/App.svelte                          |   15 +
 .../app-b/App.svelte                          |   18 +
 .../08-contenteditable-bindings/text.md       |   12 +
 .../09-each-block-bindings/app-a/App.svelte   |   49 +
 .../09-each-block-bindings/app-b/App.svelte   |   49 +
 .../09-each-block-bindings/text.md            |   23 +
 .../10-media-elements/app-a/App.svelte        |  128 +
 .../10-media-elements/app-b/App.svelte        |  131 +
 .../06-bindings/10-media-elements/text.md     |   47 +
 .../11-dimensions/app-a/App.svelte            |   21 +
 .../11-dimensions/app-b/App.svelte            |   21 +
 .../06-bindings/11-dimensions/text.md         |   17 +
 .../06-bindings/12-bind-this/app-a/App.svelte |   52 +
 .../06-bindings/12-bind-this/app-b/App.svelte |   53 +
 .../tutorial/06-bindings/12-bind-this/text.md |   15 +
 .../13-component-bindings/app-a/App.svelte    |   14 +
 .../13-component-bindings/app-a/Keypad.svelte |   40 +
 .../13-component-bindings/app-b/App.svelte    |   14 +
 .../13-component-bindings/app-b/Keypad.svelte |   40 +
 .../06-bindings/13-component-bindings/text.md |   13 +
 .../14-component-this/app-a/App.svelte        |    5 +
 .../14-component-this/app-a/InputField.svelte |    9 +
 .../14-component-this/app-b/App.svelte        |    9 +
 .../14-component-this/app-b/InputField.svelte |    9 +
 .../06-bindings/14-component-this/text.md     |   23 +
 site/content/tutorial/06-bindings/meta.json   |    3 +
 .../07-lifecycle/01-onmount/app-a/App.svelte  |   31 +
 .../07-lifecycle/01-onmount/app-b/App.svelte  |   38 +
 .../tutorial/07-lifecycle/01-onmount/text.md  |   28 +
 .../02-ondestroy/app-a/App.svelte             |   20 +
 .../02-ondestroy/app-a/Timer.svelte           |   20 +
 .../07-lifecycle/02-ondestroy/app-a/utils.js  |    9 +
 .../02-ondestroy/app-b/App.svelte             |   20 +
 .../02-ondestroy/app-b/Timer.svelte           |   20 +
 .../07-lifecycle/02-ondestroy/app-b/utils.js  |    9 +
 .../07-lifecycle/02-ondestroy/text.md         |   45 +
 .../07-lifecycle/03-update/app-a/App.svelte   |  107 +
 .../07-lifecycle/03-update/app-b/App.svelte   |  107 +
 .../tutorial/07-lifecycle/03-update/text.md   |   24 +
 .../07-lifecycle/04-tick/app-a/App.svelte     |   35 +
 .../07-lifecycle/04-tick/app-b/App.svelte     |   37 +
 .../tutorial/07-lifecycle/04-tick/text.md     |   21 +
 site/content/tutorial/07-lifecycle/meta.json  |    3 +
 .../01-writable-stores/app-a/App.svelte       |   18 +
 .../app-a/Decrementer.svelte                  |   11 +
 .../app-a/Incrementer.svelte                  |   11 +
 .../01-writable-stores/app-a/Resetter.svelte  |   11 +
 .../01-writable-stores/app-a/stores.js        |    3 +
 .../01-writable-stores/app-b/App.svelte       |   18 +
 .../app-b/Decrementer.svelte                  |   11 +
 .../app-b/Incrementer.svelte                  |   11 +
 .../01-writable-stores/app-b/Resetter.svelte  |   11 +
 .../01-writable-stores/app-b/stores.js        |    3 +
 .../08-stores/01-writable-stores/text.md      |   27 +
 .../02-auto-subscriptions/app-a/App.svelte    |   18 +
 .../app-a/Decrementer.svelte                  |   11 +
 .../app-a/Incrementer.svelte                  |   11 +
 .../app-a/Resetter.svelte                     |   11 +
 .../02-auto-subscriptions/app-a/stores.js     |    3 +
 .../02-auto-subscriptions/app-b/App.svelte    |   12 +
 .../app-b/Decrementer.svelte                  |   11 +
 .../app-b/Incrementer.svelte                  |   11 +
 .../app-b/Resetter.svelte                     |   11 +
 .../02-auto-subscriptions/app-b/stores.js     |    3 +
 .../08-stores/02-auto-subscriptions/text.md   |   55 +
 .../03-readable-stores/app-a/App.svelte       |   12 +
 .../03-readable-stores/app-a/stores.js        |    7 +
 .../03-readable-stores/app-b/App.svelte       |   12 +
 .../03-readable-stores/app-b/stores.js        |   11 +
 .../08-stores/03-readable-stores/text.md      |   19 +
 .../04-derived-stores/app-a/App.svelte        |   17 +
 .../04-derived-stores/app-a/stores.js         |   18 +
 .../04-derived-stores/app-b/App.svelte        |   17 +
 .../04-derived-stores/app-b/stores.js         |   18 +
 .../08-stores/04-derived-stores/text.md       |   14 +
 .../05-custom-stores/app-a/App.svelte         |    9 +
 .../05-custom-stores/app-a/stores.js          |   14 +
 .../05-custom-stores/app-b/App.svelte         |    9 +
 .../05-custom-stores/app-b/stores.js          |   14 +
 .../08-stores/05-custom-stores/text.md        |   21 +
 .../06-store-bindings/app-a/App.svelte        |    6 +
 .../06-store-bindings/app-a/stores.js         |    8 +
 .../06-store-bindings/app-b/App.svelte        |   10 +
 .../06-store-bindings/app-b/stores.js         |    8 +
 .../08-stores/06-store-bindings/text.md       |   23 +
 site/content/tutorial/08-stores/meta.json     |    3 +
 .../09-motion/01-tweened/app-a/App.svelte     |   34 +
 .../09-motion/01-tweened/app-b/App.svelte     |   38 +
 .../tutorial/09-motion/01-tweened/text.md     |   40 +
 .../09-motion/02-spring/app-a/App.svelte      |   37 +
 .../09-motion/02-spring/app-b/App.svelte      |   40 +
 .../tutorial/09-motion/02-spring/text.md      |   29 +
 site/content/tutorial/09-motion/meta.json     |    3 +
 .../01-transition/app-a/App.svelte            |   14 +
 .../01-transition/app-b/App.svelte            |   15 +
 .../10-transitions/01-transition/text.md      |   20 +
 .../app-a/App.svelte                          |   15 +
 .../app-b/App.svelte                          |   15 +
 .../text.md                                   |   22 +
 .../03-in-and-out/app-a/App.svelte            |   15 +
 .../03-in-and-out/app-b/App.svelte            |   15 +
 .../10-transitions/03-in-and-out/text.md      |   19 +
 .../app-a/App.svelte                          |   38 +
 .../app-b/App.svelte                          |   49 +
 .../04-custom-css-transitions/text.md         |   72 +
 .../05-custom-js-transitions/app-a/App.svelte |   22 +
 .../05-custom-js-transitions/app-b/App.svelte |   36 +
 .../05-custom-js-transitions/text.md          |   29 +
 .../06-transition-events/app-a/App.svelte     |   19 +
 .../06-transition-events/app-b/App.svelte     |   25 +
 .../06-transition-events/text.md              |   17 +
 .../07-local-transitions/app-a/App.svelte     |   32 +
 .../07-local-transitions/app-b/App.svelte     |   32 +
 .../07-local-transitions/text.md              |   15 +
 .../08-deferred-transitions/app-a/App.svelte  |  148 +
 .../08-deferred-transitions/app-b/App.svelte  |  155 +
 .../08-deferred-transitions/text.md           |   30 +
 .../09-key-blocks/app-a/App.svelte            |   19 +
 .../09-key-blocks/app-b/App.svelte            |   21 +
 .../10-transitions/09-key-blocks/text.md      |   16 +
 .../content/tutorial/10-transitions/meta.json |    3 +
 .../11-animations/01-animate/app-a/App.svelte |  155 +
 .../11-animations/01-animate/app-b/App.svelte |  158 +
 .../tutorial/11-animations/01-animate/text.md |   37 +
 site/content/tutorial/11-animations/meta.json |    3 +
 .../12-actions/01-actions/app-a/App.svelte    |   32 +
 .../01-actions/app-a/click_outside.js         |    9 +
 .../12-actions/01-actions/app-b/App.svelte    |   32 +
 .../01-actions/app-b/click_outside.js         |   15 +
 .../tutorial/12-actions/01-actions/text.md    |   48 +
 .../app-a/App.svelte                          |   20 +
 .../app-a/longpress.js                        |   25 +
 .../app-b/App.svelte                          |   20 +
 .../app-b/longpress.js                        |   28 +
 .../02-adding-parameters-to-actions/text.md   |   46 +
 site/content/tutorial/12-actions/meta.json    |    3 +
 .../01-classes/app-a/App.svelte               |   29 +
 .../01-classes/app-b/App.svelte               |   29 +
 .../13-advanced-styling/01-classes/text.md    |   23 +
 .../02-class-shorthand/app-a/App.svelte       |   18 +
 .../02-class-shorthand/app-b/App.svelte       |   18 +
 .../02-class-shorthand/text.md                |   19 +
 .../03-inline-styles/app-a/App.svelte         |   15 +
 .../03-inline-styles/app-b/App.svelte         |   15 +
 .../03-inline-styles/text.md                  |   10 +
 .../04-style-directive/app-a/App.svelte       |   15 +
 .../04-style-directive/app-b/App.svelte       |   15 +
 .../04-style-directive/text.md                |   18 +
 .../tutorial/13-advanced-styling/meta.json    |    3 +
 .../14-composition/01-slots/app-a/App.svelte  |    7 +
 .../14-composition/01-slots/app-a/Box.svelte  |   14 +
 .../14-composition/01-slots/app-b/App.svelte  |    8 +
 .../14-composition/01-slots/app-b/Box.svelte  |   14 +
 .../tutorial/14-composition/01-slots/text.md  |   28 +
 .../02-slot-fallbacks/app-a/App.svelte        |    8 +
 .../02-slot-fallbacks/app-a/Box.svelte        |   14 +
 .../02-slot-fallbacks/app-b/App.svelte        |   10 +
 .../02-slot-fallbacks/app-b/Box.svelte        |   16 +
 .../14-composition/02-slot-fallbacks/text.md  |   24 +
 .../03-named-slots/app-a/App.svelte           |    7 +
 .../03-named-slots/app-a/ContactCard.svelte   |   53 +
 .../03-named-slots/app-b/App.svelte           |   14 +
 .../03-named-slots/app-b/ContactCard.svelte   |   53 +
 .../14-composition/03-named-slots/text.md     |   44 +
 .../04-optional-slots/app-a/App.svelte        |   57 +
 .../04-optional-slots/app-a/Comment.svelte    |   56 +
 .../04-optional-slots/app-a/Project.svelte    |   62 +
 .../04-optional-slots/app-b/App.svelte        |   57 +
 .../04-optional-slots/app-b/Comment.svelte    |   56 +
 .../04-optional-slots/app-b/Project.svelte    |   64 +
 .../14-composition/04-optional-slots/text.md  |   28 +
 .../05-slot-props/app-a/App.svelte            |   26 +
 .../05-slot-props/app-a/Hoverable.svelte      |   15 +
 .../05-slot-props/app-b/App.svelte            |   46 +
 .../05-slot-props/app-b/Hoverable.svelte      |   15 +
 .../14-composition/05-slot-props/text.md      |   47 +
 .../content/tutorial/14-composition/meta.json |    3 +
 .../01-context-api/app-a/App.svelte           |   13 +
 .../01-context-api/app-a/Map.svelte           |   48 +
 .../01-context-api/app-a/MapMarker.svelte     |   17 +
 .../15-context/01-context-api/app-a/mapbox.js |    8 +
 .../01-context-api/app-b/App.svelte           |   13 +
 .../01-context-api/app-b/Map.svelte           |   50 +
 .../01-context-api/app-b/MapMarker.svelte     |   19 +
 .../15-context/01-context-api/app-b/mapbox.js |    8 +
 .../15-context/01-context-api/text.md         |   56 +
 site/content/tutorial/15-context/meta.json    |    3 +
 .../01-svelte-self/app-a/App.svelte           |   37 +
 .../01-svelte-self/app-a/File.svelte          |   14 +
 .../01-svelte-self/app-a/Folder.svelte        |   52 +
 .../01-svelte-self/app-b/App.svelte           |   37 +
 .../01-svelte-self/app-b/File.svelte          |   14 +
 .../01-svelte-self/app-b/Folder.svelte        |   52 +
 .../01-svelte-self/text.md                    |   25 +
 .../02-svelte-component/app-a/App.svelte      |   27 +
 .../app-a/BlueThing.svelte                    |    7 +
 .../app-a/GreenThing.svelte                   |    7 +
 .../02-svelte-component/app-a/RedThing.svelte |    7 +
 .../02-svelte-component/app-b/App.svelte      |   21 +
 .../app-b/BlueThing.svelte                    |    7 +
 .../app-b/GreenThing.svelte                   |    7 +
 .../02-svelte-component/app-b/RedThing.svelte |    7 +
 .../02-svelte-component/text.md               |   23 +
 .../03-svelte-element/app-a/App.svelte        |   18 +
 .../03-svelte-element/app-b/App.svelte        |   12 +
 .../03-svelte-element/text.md                 |   23 +
 .../04-svelte-window/app-a/App.svelte         |   42 +
 .../04-svelte-window/app-b/App.svelte         |   42 +
 .../04-svelte-window/text.md                  |   13 +
 .../app-a/App.svelte                          |   88 +
 .../app-b/App.svelte                          |   88 +
 .../05-svelte-window-bindings/text.md         |   21 +
 .../06-svelte-body/app-a/App.svelte           |   34 +
 .../06-svelte-body/app-b/App.svelte           |   37 +
 .../06-svelte-body/text.md                    |   14 +
 .../07-svelte-head/app-a/App.svelte           |    5 +
 .../07-svelte-head/app-b/App.svelte           |    5 +
 .../07-svelte-head/text.md                    |   13 +
 .../08-svelte-options/app-a/App.svelte        |   30 +
 .../08-svelte-options/app-a/Todo.svelte       |   25 +
 .../08-svelte-options/app-a/flash.js          |   13 +
 .../08-svelte-options/app-b/App.svelte        |   30 +
 .../08-svelte-options/app-b/Todo.svelte       |   27 +
 .../08-svelte-options/app-b/flash.js          |   13 +
 .../08-svelte-options/text.md                 |   30 +
 .../09-svelte-fragment/app-a/App.svelte       |   10 +
 .../09-svelte-fragment/app-a/Box.svelte       |   20 +
 .../09-svelte-fragment/app-b/App.svelte       |   10 +
 .../09-svelte-fragment/app-b/Box.svelte       |   20 +
 .../09-svelte-fragment/text.md                |   35 +
 .../tutorial/16-special-elements/meta.json    |    3 +
 .../01-sharing-code/app-a/App.svelte          |   43 +
 .../01-sharing-code/app-a/AudioPlayer.svelte  |   41 +
 .../01-sharing-code/app-b/App.svelte          |   43 +
 .../01-sharing-code/app-b/AudioPlayer.svelte  |   46 +
 .../17-module-context/01-sharing-code/text.md |   24 +
 .../02-module-exports/app-a/App.svelte        |   47 +
 .../app-a/AudioPlayer.svelte                  |   54 +
 .../02-module-exports/app-b/App.svelte        |   47 +
 .../app-b/AudioPlayer.svelte                  |   60 +
 .../02-module-exports/text.md                 |   35 +
 .../tutorial/17-module-context/meta.json      |    3 +
 .../18-debugging/01-debug/app-a/App.svelte    |   13 +
 .../18-debugging/01-debug/app-b/App.svelte    |   13 +
 .../tutorial/18-debugging/01-debug/text.md    |   15 +
 site/content/tutorial/18-debugging/meta.json  |    3 +
 .../01-congratulations/app-a/App.svelte       |   50 +
 .../19-next-steps/01-congratulations/text.md  |   11 +
 site/content/tutorial/19-next-steps/meta.json |    3 +
 src/compiler/Stats.ts                         |   73 +
 src/compiler/compile/Component.ts             | 1589 ++++
 src/compiler/compile/compiler_errors.ts       |  281 +
 src/compiler/compile/compiler_warnings.ts     |  147 +
 src/compiler/compile/create_module.ts         |  217 +
 src/compiler/compile/css/Selector.ts          |  641 ++
 src/compiler/compile/css/Stylesheet.ts        |  465 +
 .../compile/css/gather_possible_values.ts     |   14 +
 src/compiler/compile/css/interfaces.ts        |    6 +
 src/compiler/compile/index.ts                 |  115 +
 src/compiler/compile/nodes/Action.ts          |   31 +
 src/compiler/compile/nodes/Animation.ts       |   46 +
 src/compiler/compile/nodes/Attribute.ts       |  117 +
 src/compiler/compile/nodes/AwaitBlock.ts      |   48 +
 src/compiler/compile/nodes/Binding.ts         |  102 +
 src/compiler/compile/nodes/Body.ts            |   26 +
 src/compiler/compile/nodes/CatchBlock.ts      |   30 +
 src/compiler/compile/nodes/Class.ts           |   21 +
 src/compiler/compile/nodes/Comment.ts         |   16 +
 src/compiler/compile/nodes/ConstTag.ts        |   72 +
 src/compiler/compile/nodes/DebugTag.ts        |   20 +
 src/compiler/compile/nodes/EachBlock.ts       |   88 +
 src/compiler/compile/nodes/Element.ts         |  909 ++
 src/compiler/compile/nodes/ElseBlock.ts       |   22 +
 src/compiler/compile/nodes/EventHandler.ts    |   64 +
 src/compiler/compile/nodes/Fragment.ts        |   22 +
 src/compiler/compile/nodes/Head.ts            |   30 +
 src/compiler/compile/nodes/IfBlock.ts         |   31 +
 src/compiler/compile/nodes/InlineComponent.ts |  167 +
 src/compiler/compile/nodes/KeyBlock.ts        |   23 +
 src/compiler/compile/nodes/Let.ts             |   51 +
 src/compiler/compile/nodes/MustacheTag.ts     |    5 +
 src/compiler/compile/nodes/Options.ts         |    5 +
 src/compiler/compile/nodes/PendingBlock.ts    |   18 +
 src/compiler/compile/nodes/RawMustacheTag.ts  |    5 +
 src/compiler/compile/nodes/Slot.ts            |   64 +
 src/compiler/compile/nodes/SlotTemplate.ts    |   73 +
 src/compiler/compile/nodes/StyleDirective.ts  |   39 +
 src/compiler/compile/nodes/Text.ts            |   63 +
 src/compiler/compile/nodes/ThenBlock.ts       |   30 +
 src/compiler/compile/nodes/Title.ts           |   35 +
 src/compiler/compile/nodes/Transition.ts      |   37 +
 src/compiler/compile/nodes/Window.ts          |   65 +
 src/compiler/compile/nodes/interfaces.ts      |   81 +
 .../compile/nodes/shared/AbstractBlock.ts     |   24 +
 src/compiler/compile/nodes/shared/Context.ts  |  195 +
 .../compile/nodes/shared/Expression.ts        |  430 +
 src/compiler/compile/nodes/shared/Node.ts     |   72 +
 src/compiler/compile/nodes/shared/Tag.ts      |   18 +
 .../compile/nodes/shared/TemplateScope.ts     |   57 +
 .../compile/nodes/shared/get_const_tags.ts    |   91 +
 .../compile/nodes/shared/is_contextual.ts     |   18 +
 .../compile/nodes/shared/map_children.ts      |   73 +
 src/compiler/compile/render_dom/Block.ts      |  502 +
 src/compiler/compile/render_dom/Renderer.ts   |  285 +
 src/compiler/compile/render_dom/index.ts      |  609 ++
 src/compiler/compile/render_dom/invalidate.ts |  144 +
 .../compile/render_dom/wrappers/AwaitBlock.ts |  300 +
 .../compile/render_dom/wrappers/Body.ts       |   25 +
 .../compile/render_dom/wrappers/DebugTag.ts   |   86 +
 .../compile/render_dom/wrappers/EachBlock.ts  |  642 ++
 .../render_dom/wrappers/Element/Attribute.ts  |  421 +
 .../render_dom/wrappers/Element/Binding.ts    |  447 +
 .../wrappers/Element/EventHandler.ts          |   73 +
 .../wrappers/Element/SpreadAttribute.ts       |    3 +
 .../wrappers/Element/StyleAttribute.ts        |  190 +
 .../wrappers/Element/fix_attribute_casing.ts  |   12 +
 .../Element/handle_select_value_binding.ts    |   16 +
 .../render_dom/wrappers/Element/index.ts      | 1217 +++
 .../compile/render_dom/wrappers/Fragment.ts   |  154 +
 .../compile/render_dom/wrappers/Head.ts       |   50 +
 .../compile/render_dom/wrappers/IfBlock.ts    |  679 ++
 .../wrappers/InlineComponent/index.ts         |  582 ++
 .../compile/render_dom/wrappers/KeyBlock.ts   |  136 +
 .../render_dom/wrappers/MustacheTag.ts        |   30 +
 .../render_dom/wrappers/RawMustacheTag.ts     |   75 +
 .../compile/render_dom/wrappers/Slot.ts       |  237 +
 .../render_dom/wrappers/SlotTemplate.ts       |   91 +
 .../compile/render_dom/wrappers/Text.ts       |   55 +
 .../compile/render_dom/wrappers/Title.ts      |  101 +
 .../compile/render_dom/wrappers/Window.ts     |  186 +
 .../compile/render_dom/wrappers/shared/Tag.ts |   59 +
 .../render_dom/wrappers/shared/Wrapper.ts     |   91 +
 .../render_dom/wrappers/shared/add_actions.ts |   59 +
 .../wrappers/shared/add_const_tags.ts         |   24 +
 .../wrappers/shared/add_event_handlers.ts     |   19 +
 .../render_dom/wrappers/shared/bind_this.ts   |   97 +
 .../shared/create_debugging_comment.ts        |   40 +
 .../wrappers/shared/get_slot_definition.ts    |  115 +
 .../render_dom/wrappers/shared/is_dynamic.ts  |   12 +
 .../render_dom/wrappers/shared/is_head.ts     |    3 +
 .../shared/mark_each_block_bindings.ts        |   34 +
 src/compiler/compile/render_ssr/Renderer.ts   |  123 +
 .../compile/render_ssr/handlers/AwaitBlock.ts |   24 +
 .../compile/render_ssr/handlers/Comment.ts    |    8 +
 .../compile/render_ssr/handlers/DebugTag.ts   |   17 +
 .../compile/render_ssr/handlers/EachBlock.ts  |   27 +
 .../compile/render_ssr/handlers/Element.ts    |  237 +
 .../compile/render_ssr/handlers/Head.ts       |   16 +
 .../compile/render_ssr/handlers/HtmlTag.ts    |    9 +
 .../compile/render_ssr/handlers/IfBlock.ts    |   21 +
 .../render_ssr/handlers/InlineComponent.ts    |  105 +
 .../compile/render_ssr/handlers/KeyBlock.ts   |    6 +
 .../compile/render_ssr/handlers/Slot.ts       |   40 +
 .../render_ssr/handlers/SlotTemplate.ts       |   46 +
 .../compile/render_ssr/handlers/Tag.ts        |   15 +
 .../compile/render_ssr/handlers/Text.ts       |   18 +
 .../compile/render_ssr/handlers/Title.ts      |   16 +
 .../handlers/shared/get_attribute_value.ts    |   35 +
 .../handlers/shared/get_const_tags.ts         |   17 +
 .../handlers/shared/get_slot_scope.ts         |   21 +
 .../utils/remove_whitespace_children.ts       |   73 +
 src/compiler/compile/render_ssr/index.ts      |  245 +
 src/compiler/compile/utils/__test__.ts        |   16 +
 src/compiler/compile/utils/add_to_set.ts      |    6 +
 .../compile/utils/check_enable_sourcemap.ts   |   10 +
 .../compile/utils/check_graph_for_cycles.ts   |   36 +
 src/compiler/compile/utils/compare_node.ts    |   19 +
 .../compile/utils/flatten_reference.ts        |   39 +
 .../compile/utils/get_name_from_filename.ts   |   27 +
 src/compiler/compile/utils/get_object.ts      |    6 +
 src/compiler/compile/utils/get_slot_data.ts   |   43 +
 src/compiler/compile/utils/hash.ts            |    9 +
 .../compile/utils/is_used_as_reference.ts     |   34 +
 .../utils/nodes_to_template_literal.ts        |   37 +
 src/compiler/compile/utils/replace_object.ts  |   14 +
 .../compile/utils/reserved_keywords.ts        |    5 +
 src/compiler/compile/utils/scope.ts           |    8 +
 .../utils/string_to_member_expression.ts      |   17 +
 src/compiler/compile/utils/stringify.ts       |   28 +
 src/compiler/config.ts                        |    1 +
 src/compiler/index.ts                         |    6 +
 src/compiler/interfaces.ts                    |  230 +
 src/compiler/parse/acorn.ts                   |   14 +
 src/compiler/parse/errors.ts                  |  208 +
 src/compiler/parse/index.ts                   |  243 +
 src/compiler/parse/read/context.ts            |   79 +
 src/compiler/parse/read/expression.ts         |   36 +
 src/compiler/parse/read/script.ts             |   52 +
 src/compiler/parse/read/style.ts              |   95 +
 src/compiler/parse/state/fragment.ts          |   16 +
 src/compiler/parse/state/mustache.ts          |  413 +
 src/compiler/parse/state/tag.ts               |  551 ++
 src/compiler/parse/state/text.ts              |   26 +
 src/compiler/parse/utils/bracket.ts           |   28 +
 src/compiler/parse/utils/entities.ts          | 2034 ++++
 src/compiler/parse/utils/html.ts              |  151 +
 src/compiler/parse/utils/node.ts              |   32 +
 src/compiler/preprocess/decode_sourcemap.ts   |   88 +
 src/compiler/preprocess/index.ts              |  235 +
 src/compiler/preprocess/replace_in_code.ts    |   75 +
 src/compiler/preprocess/types.ts              |   42 +
 src/compiler/tsconfig.json                    |   11 +
 src/compiler/utils/clone.ts                   |   33 +
 src/compiler/utils/error.ts                   |   40 +
 src/compiler/utils/extract_svelte_ignore.ts   |   34 +
 src/compiler/utils/flatten.ts                 |   14 +
 src/compiler/utils/full_char_code_at.ts       |   10 +
 src/compiler/utils/fuzzymatch.ts              |  237 +
 src/compiler/utils/get_code_frame.ts          |   31 +
 src/compiler/utils/link.ts                    |    4 +
 src/compiler/utils/list.ts                    |    6 +
 src/compiler/utils/mapped_code.ts             |  326 +
 src/compiler/utils/names.ts                   |  139 +
 src/compiler/utils/namespaces.ts              |   28 +
 src/compiler/utils/nodes_match.ts             |   32 +
 src/compiler/utils/patterns.ts                |    6 +
 src/compiler/utils/push_array.ts              |   12 +
 src/compiler/utils/trim.ts                    |    9 +
 src/runtime/action/index.ts                   |   42 +
 src/runtime/ambient.ts                        |    3 +
 src/runtime/animate/index.ts                  |   46 +
 src/runtime/easing/index.ts                   |  171 +
 src/runtime/index.ts                          |   16 +
 src/runtime/internal/Component.ts             |  263 +
 src/runtime/internal/animations.ts            |  103 +
 src/runtime/internal/await_block.ts           |   99 +
 src/runtime/internal/dev.ts                   |  271 +
 src/runtime/internal/dom.ts                   |  742 ++
 src/runtime/internal/environment.ts           |   18 +
 src/runtime/internal/globals.ts               |    7 +
 src/runtime/internal/index.ts                 |   15 +
 src/runtime/internal/keyed_each.ts            |  114 +
 src/runtime/internal/lifecycle.ts             |   87 +
 src/runtime/internal/loop.ts                  |   45 +
 src/runtime/internal/scheduler.ts             |  109 +
 src/runtime/internal/spread.ts                |   41 +
 src/runtime/internal/ssr.ts                   |  214 +
 src/runtime/internal/style_manager.ts         |  118 +
 src/runtime/internal/transitions.ts           |  387 +
 src/runtime/internal/utils.ts                 |  189 +
 src/runtime/motion/index.ts                   |    2 +
 src/runtime/motion/spring.ts                  |  149 +
 src/runtime/motion/tweened.ts                 |  143 +
 src/runtime/motion/utils.ts                   |    3 +
 src/runtime/ssr.ts                            |   15 +
 src/runtime/store/index.ts                    |  214 +
 src/runtime/transition/index.ts               |  289 +
 src/runtime/tsconfig.json                     |   15 +
 src/shared/boolean_attributes.ts              |   27 +
 src/shared/utils/names.ts                     |    5 +
 test/.eslintrc.json                           |    6 +
 test/css/index.ts                             |  159 +
 .../attribute-selector-bind/expected.css      |    1 +
 .../attribute-selector-bind/input.svelte      |   11 +
 .../expected.css                              |    1 +
 .../input.svelte                              |    7 +
 .../expected.css                              |    1 +
 .../input.svelte                              |    7 +
 .../attribute-selector-only-name/expected.css |    1 +
 .../attribute-selector-only-name/input.svelte |   11 +
 .../attribute-selector-unquoted/expected.css  |    1 +
 .../attribute-selector-unquoted/input.svelte  |    7 +
 .../expected.css                              |    1 +
 .../input.svelte                              |   13 +
 test/css/samples/basic/expected.css           |    1 +
 test/css/samples/basic/input.svelte           |    7 +
 .../css/samples/child-combinator/expected.css |    1 +
 .../css/samples/child-combinator/input.svelte |   14 +
 .../css/samples/combinator-child/expected.css |    1 +
 .../samples/combinator-child/expected.html    |    1 +
 .../css/samples/combinator-child/input.svelte |   11 +
 test/css/samples/css-vars/expected.css        |    1 +
 test/css/samples/css-vars/input.svelte        |   15 +
 test/css/samples/custom-css-hash/_config.js   |   12 +
 test/css/samples/custom-css-hash/expected.css |    1 +
 test/css/samples/custom-css-hash/input.svelte |    7 +
 .../expected.css                              |    1 +
 .../expected.html                             |    1 +
 .../input.svelte                              |   11 +
 .../directive-special-character/expected.css  |    1 +
 .../directive-special-character/expected.html |    1 +
 .../directive-special-character/input.svelte  |   11 +
 test/css/samples/dynamic-element/_config.js   |   21 +
 test/css/samples/dynamic-element/expected.css |    1 +
 .../css/samples/dynamic-element/expected.html |    1 +
 test/css/samples/dynamic-element/input.svelte |   10 +
 test/css/samples/empty-class/_config.js       |   25 +
 test/css/samples/empty-class/expected.css     |    0
 test/css/samples/empty-class/input.svelte     |    7 +
 test/css/samples/empty-rule-dev/_config.js    |    5 +
 test/css/samples/empty-rule-dev/expected.css  |    1 +
 test/css/samples/empty-rule-dev/input.svelte  |    7 +
 test/css/samples/empty-rule/expected.css      |    0
 test/css/samples/empty-rule/input.svelte      |    7 +
 .../_config.js                                |    3 +
 .../expected.css                              |    1 +
 .../expected.html                             |    4 +
 .../input.svelte                              |   41 +
 .../_config.js                                |   46 +
 .../expected.css                              |    1 +
 .../expected.html                             |    3 +
 .../input.svelte                              |   30 +
 .../_config.js                                |    3 +
 .../expected.css                              |    1 +
 .../expected.html                             |    4 +
 .../input.svelte                              |   37 +
 .../_config.js                                |   18 +
 .../expected.css                              |    1 +
 .../expected.html                             |    3 +
 .../input.svelte                              |   77 +
 .../_config.js                                |   18 +
 .../expected.css                              |    1 +
 .../expected.html                             |    3 +
 .../input.svelte                              |   24 +
 .../_config.js                                |    3 +
 .../expected.css                              |    1 +
 .../expected.html                             |   15 +
 .../input.svelte                              |  113 +
 .../expected.css                              |    1 +
 .../expected.html                             |    6 +
 .../input.svelte                              |   20 +
 .../_config.js                                |   18 +
 .../expected.css                              |    1 +
 .../expected.html                             |    3 +
 .../input.svelte                              |   31 +
 .../_config.js                                |   18 +
 .../expected.css                              |    1 +
 .../expected.html                             |    3 +
 .../input.svelte                              |   25 +
 .../general-siblings-combinator-if/_config.js |   46 +
 .../expected.css                              |    1 +
 .../expected.html                             |    3 +
 .../input.svelte                              |   31 +
 .../_config.js                                |   88 +
 .../expected.css                              |    1 +
 .../input.svelte                              |   30 +
 .../_config.js                                |   18 +
 .../expected.css                              |    1 +
 .../expected.html                             |    7 +
 .../input.svelte                              |   17 +
 .../general-siblings-combinator/_config.js    |   60 +
 .../general-siblings-combinator/expected.css  |    1 +
 .../general-siblings-combinator/expected.html |    7 +
 .../general-siblings-combinator/input.svelte  |   24 +
 .../global-compound-selector/_config.js       |   27 +
 .../global-compound-selector/expected.css     |    1 +
 .../global-compound-selector/expected.html    |    3 +
 .../global-compound-selector/input.svelte     |   21 +
 .../expected.css                              |    1 +
 .../input.svelte                              |    6 +
 .../css/samples/global-keyframes/expected.css |    1 +
 .../css/samples/global-keyframes/input.svelte |   17 +
 .../global-with-child-combinator-2/_config.js |   27 +
 .../expected.css                              |    1 +
 .../expected.html                             |    3 +
 .../input.svelte                              |   15 +
 .../global-with-child-combinator-3/_config.js |    3 +
 .../expected.css                              |    1 +
 .../expected.html                             |    3 +
 .../input.svelte                              |    9 +
 .../global-with-child-combinator/_config.js   |    3 +
 .../global-with-child-combinator/expected.css |    1 +
 .../expected.html                             |    3 +
 .../global-with-child-combinator/input.svelte |    9 +
 .../global-with-unused-descendant/_config.js  |   24 +
 .../expected.css                              |    0
 .../input.svelte                              |    5 +
 test/css/samples/global/expected.css          |    1 +
 test/css/samples/global/input.svelte          |   20 +
 test/css/samples/host/_config.js              |   27 +
 test/css/samples/host/expected.css            |    1 +
 test/css/samples/host/input.svelte            |   31 +
 .../keyframes-autoprefixed/expected.css       |    1 +
 .../keyframes-autoprefixed/input.svelte       |   34 +
 .../samples/keyframes-from-to/expected.css    |    1 +
 .../samples/keyframes-from-to/input.svelte    |   12 +
 test/css/samples/keyframes/expected.css       |    1 +
 test/css/samples/keyframes/input.svelte       |   17 +
 .../samples/local-inside-global/expected.css  |    1 +
 .../samples/local-inside-global/input.svelte  |   11 +
 .../css/samples/media-query-word/expected.css |    1 +
 .../css/samples/media-query-word/input.svelte |    9 +
 test/css/samples/media-query/expected.css     |    1 +
 test/css/samples/media-query/input.svelte     |    9 +
 test/css/samples/nested/_config.js            |    5 +
 test/css/samples/nested/expected.css          |    1 +
 test/css/samples/nested/expected.html         |    2 +
 test/css/samples/nested/input.svelte          |   20 +
 test/css/samples/not-selector/expected.css    |    1 +
 test/css/samples/not-selector/input.svelte    |    8 +
 .../expected.css                              |    1 +
 .../expected.html                             |    2 +
 .../input.svelte                              |   10 +
 .../expected.css                              |    1 +
 .../expected.html                             |    2 +
 .../input.svelte                              |   10 +
 .../_config.js                                |    5 +
 .../expected.css                              |    1 +
 .../expected.html                             |    2 +
 .../input.svelte                              |   14 +
 .../expected.css                              |    1 +
 .../expected.html                             |    2 +
 .../input.svelte                              |   10 +
 .../expected.css                              |    1 +
 .../expected.html                             |    3 +
 .../input.svelte                              |   11 +
 .../expected.css                              |    1 +
 .../expected.html                             |    2 +
 .../input.svelte                              |   10 +
 .../expected.css                              |    1 +
 .../expected.html                             |    2 +
 .../input.svelte                              |   10 +
 .../expected.css                              |    1 +
 .../expected.html                             |    2 +
 .../input.svelte                              |   10 +
 .../expected.css                              |    1 +
 .../expected.html                             |    2 +
 .../input.svelte                              |   10 +
 .../expected.css                              |    1 +
 .../expected.html                             |    2 +
 .../input.svelte                              |   12 +
 .../expected.css                              |    1 +
 .../expected.html                             |    2 +
 .../input.svelte                              |    8 +
 .../_config.js                                |    5 +
 .../expected.css                              |    1 +
 .../expected.html                             |    1 +
 .../input.svelte                              |    9 +
 .../_config.js                                |    5 +
 .../expected.css                              |    1 +
 .../expected.html                             |    1 +
 .../input.svelte                              |    9 +
 .../_config.js                                |    5 +
 .../expected.css                              |    1 +
 .../expected.html                             |    1 +
 .../input.svelte                              |    9 +
 .../_config.js                                |    5 +
 .../expected.css                              |    1 +
 .../expected.html                             |    1 +
 .../input.svelte                              |    7 +
 .../_config.js                                |    5 +
 .../expected.css                              |    1 +
 .../expected.html                             |    1 +
 .../input.svelte                              |    7 +
 .../_config.js                                |   24 +
 .../expected.css                              |    0
 .../expected.html                             |    1 +
 .../input.svelte                              |   11 +
 .../expected.css                              |    1 +
 .../expected.html                             |    4 +
 .../input.svelte                              |   16 +
 .../expected.css                              |    1 +
 .../expected.html                             |    5 +
 .../input.svelte                              |   16 +
 .../omit-scoping-attribute-global/_config.js  |    5 +
 .../expected.css                              |    1 +
 .../expected.html                             |    1 +
 .../input.svelte                              |    7 +
 .../omit-scoping-attribute-id/expected.css    |    1 +
 .../omit-scoping-attribute-id/expected.html   |    2 +
 .../omit-scoping-attribute-id/input.svelte    |    8 +
 .../expected.css                              |    1 +
 .../expected.html                             |    5 +
 .../input.svelte                              |   16 +
 .../expected.css                              |    1 +
 .../expected.html                             |    1 +
 .../input.svelte                              |   11 +
 .../expected.css                              |    1 +
 .../expected.html                             |    1 +
 .../input.svelte                              |   11 +
 .../omit-scoping-attribute/expected.css       |    1 +
 .../omit-scoping-attribute/expected.html      |    1 +
 .../omit-scoping-attribute/input.svelte       |    9 +
 .../samples/preserve-specificity/expected.css |    1 +
 .../preserve-specificity/expected.html        |   12 +
 .../samples/preserve-specificity/input.svelte |   24 +
 test/css/samples/pseudo-element/expected.css  |    1 +
 test/css/samples/pseudo-element/input.svelte  |   15 +
 test/css/samples/root/_config.js              |    1 +
 test/css/samples/root/expected.css            |    1 +
 test/css/samples/root/expected.html           |    1 +
 test/css/samples/root/input.svelte            |   13 +
 .../_config.js                                |    3 +
 .../expected.css                              |    1 +
 .../expected.html                             |    4 +
 .../input.svelte                              |   41 +
 .../siblings-combinator-await/_config.js      |   60 +
 .../siblings-combinator-await/expected.css    |    1 +
 .../siblings-combinator-await/expected.html   |    3 +
 .../siblings-combinator-await/input.svelte    |   30 +
 .../siblings-combinator-each-2/_config.js     |   18 +
 .../siblings-combinator-each-2/expected.css   |    1 +
 .../siblings-combinator-each-2/expected.html  |    4 +
 .../siblings-combinator-each-2/input.svelte   |   38 +
 .../_config.js                                |  144 +
 .../expected.css                              |    1 +
 .../expected.html                             |    3 +
 .../input.svelte                              |   74 +
 .../siblings-combinator-each-else/_config.js  |   32 +
 .../expected.css                              |    1 +
 .../expected.html                             |    3 +
 .../input.svelte                              |   24 +
 .../_config.js                                |  116 +
 .../expected.css                              |    1 +
 .../expected.html                             |   15 +
 .../input.svelte                              |  113 +
 .../siblings-combinator-each/expected.css     |    1 +
 .../siblings-combinator-each/expected.html    |    6 +
 .../siblings-combinator-each/input.svelte     |   20 +
 .../siblings-combinator-global/_config.js     |   50 +
 .../siblings-combinator-global/expected.css   |    1 +
 .../siblings-combinator-global/input.svelte   |   21 +
 .../_config.js                                |   18 +
 .../expected.css                              |    1 +
 .../expected.html                             |    3 +
 .../input.svelte                              |   31 +
 .../_config.js                                |   18 +
 .../expected.css                              |    1 +
 .../expected.html                             |    3 +
 .../input.svelte                              |   25 +
 .../samples/siblings-combinator-if/_config.js |   60 +
 .../siblings-combinator-if/expected.css       |    1 +
 .../siblings-combinator-if/expected.html      |    3 +
 .../siblings-combinator-if/input.svelte       |   31 +
 .../siblings-combinator-slot/_config.js       |   46 +
 .../siblings-combinator-slot/expected.css     |    1 +
 .../siblings-combinator-slot/input.svelte     |   24 +
 .../siblings-combinator-star/_config.js       |   18 +
 .../siblings-combinator-star/expected.css     |    1 +
 .../siblings-combinator-star/expected.html    |    7 +
 .../siblings-combinator-star/input.svelte     |   17 +
 .../_config.js                                |    3 +
 .../expected.css                              |    1 +
 .../expected.html                             |    2 +
 .../input.svelte                              |   11 +
 .../samples/siblings-combinator/_config.js    |   62 +
 .../samples/siblings-combinator/expected.css  |    1 +
 .../samples/siblings-combinator/expected.html |    5 +
 .../samples/siblings-combinator/input.svelte  |   35 +
 test/css/samples/spread/expected.css          |    1 +
 test/css/samples/spread/input.svelte          |   15 +
 .../css/samples/supports-charset/expected.css |    1 +
 .../css/samples/supports-charset/input.svelte |    3 +
 .../samples/supports-font-face/expected.css   |    1 +
 .../samples/supports-font-face/input.svelte   |    7 +
 test/css/samples/supports-import/expected.css |    1 +
 test/css/samples/supports-import/input.svelte |    8 +
 .../samples/supports-namespace/expected.css   |    1 +
 .../samples/supports-namespace/input.svelte   |   19 +
 .../samples/supports-nested-page/expected.css |    1 +
 .../samples/supports-nested-page/input.svelte |   32 +
 test/css/samples/supports-page/expected.css   |    1 +
 test/css/samples/supports-page/input.svelte   |    7 +
 test/css/samples/supports-query/expected.css  |    1 +
 test/css/samples/supports-query/input.svelte  |    9 +
 .../samples/undefined-with-scope/expected.css |    1 +
 .../undefined-with-scope/expected.html        |    1 +
 .../samples/undefined-with-scope/input.svelte |    3 +
 .../samples/universal-selector/expected.css   |    1 +
 .../samples/universal-selector/input.svelte   |    7 +
 .../expected.css                              |    1 +
 .../input.svelte                              |   11 +
 test/css/samples/unknown-at-rule/expected.css |    1 +
 test/css/samples/unknown-at-rule/input.svelte |    7 +
 .../_config.js                                |   45 +
 .../expected.css                              |    1 +
 .../input.svelte                              |   23 +
 .../unused-selector-leading/_config.js        |   51 +
 .../unused-selector-leading/expected.css      |    1 +
 .../unused-selector-leading/expected.html     |    1 +
 .../unused-selector-leading/input.svelte      |    7 +
 .../unused-selector-string-concat/_config.js  |  143 +
 .../expected.css                              |    1 +
 .../input.svelte                              |   29 +
 .../unused-selector-ternary-bailed/_config.js |    3 +
 .../expected.css                              |    1 +
 .../input.svelte                              |   18 +
 .../unused-selector-ternary-concat/_config.js |   25 +
 .../expected.css                              |    1 +
 .../input.svelte                              |   15 +
 .../unused-selector-ternary-nested/_config.js |   31 +
 .../expected.css                              |    1 +
 .../input.svelte                              |   18 +
 .../unused-selector-ternary/_config.js        |   29 +
 .../unused-selector-ternary/expected.css      |    1 +
 .../unused-selector-ternary/expected.html     |    1 +
 .../unused-selector-ternary/input.svelte      |   19 +
 test/css/samples/unused-selector/_config.js   |   25 +
 test/css/samples/unused-selector/expected.css |    1 +
 .../css/samples/unused-selector/expected.html |    1 +
 test/css/samples/unused-selector/input.svelte |   11 +
 test/css/samples/weird-selectors/expected.css |    1 +
 test/css/samples/weird-selectors/input.svelte |   12 +
 test/custom-elements/assert.js                |   54 +
 test/custom-elements/index.ts                 |  137 +
 .../samples/$$props/main.svelte               |   10 +
 test/custom-elements/samples/$$props/test.js  |   13 +
 .../samples/$$slot/main.svelte                |   31 +
 test/custom-elements/samples/$$slot/test.js   |   28 +
 .../samples/custom-method/main.svelte         |   11 +
 .../samples/custom-method/test.js             |   12 +
 .../samples/escaped-css/main.svelte           |    9 +
 .../samples/escaped-css/test.js               |   13 +
 .../samples/extended-builtin/_config.js       |   17 +
 .../samples/extended-builtin/custom-button.js |    2 +
 .../samples/extended-builtin/main.svelte      |    7 +
 .../samples/extended-builtin/test.js          |   15 +
 .../samples/html-slots/main.svelte            |   11 +
 .../samples/html-slots/test.js                |   17 +
 test/custom-elements/samples/html/main.svelte |    7 +
 test/custom-elements/samples/html/test.js     |   12 +
 .../samples/nested.skip/Counter.svelte        |    7 +
 .../samples/nested.skip/main.svelte           |   10 +
 .../samples/nested.skip/test.js               |   17 +
 .../samples/new-styled/main.svelte            |    9 +
 .../samples/new-styled/test.js                |   19 +
 test/custom-elements/samples/new/main.svelte  |    7 +
 test/custom-elements/samples/new/test.js      |   18 +
 .../no-missing-prop-warnings/_config.js       |    3 +
 .../no-missing-prop-warnings/main.svelte      |    9 +
 .../samples/no-missing-prop-warnings/test.js  |   19 +
 .../samples/no-svelte-options/_config.js      |   17 +
 .../samples/no-svelte-options/main.svelte     |    5 +
 .../samples/no-svelte-options/test.js         |   12 +
 .../samples/no-tag-warning/_config.js         |   17 +
 .../samples/no-tag-warning/main.svelte        |    7 +
 .../samples/no-tag-warning/test.js            |   12 +
 .../custom-elements/samples/no-tag/_config.js |    3 +
 .../samples/no-tag/main.svelte                |    7 +
 test/custom-elements/samples/no-tag/test.js   |   12 +
 .../samples/oncreate/main.svelte              |   14 +
 test/custom-elements/samples/oncreate/test.js |   10 +
 .../samples/ondestroy/main.svelte             |   22 +
 .../custom-elements/samples/ondestroy/test.js |   11 +
 .../custom-elements/samples/props/main.svelte |   10 +
 .../samples/props/my-widget.svelte            |   12 +
 test/custom-elements/samples/props/test.js    |   27 +
 test/helpers.ts                               |  328 +
 test/hydration/index.ts                       |  133 +
 test/hydration/samples/basic/_after.html      |    1 +
 test/hydration/samples/basic/_before.html     |    1 +
 test/hydration/samples/basic/_config.js       |   17 +
 test/hydration/samples/basic/main.svelte      |    1 +
 .../samples/binding-input/_after.html         |    2 +
 .../samples/binding-input/_before.html        |    2 +
 .../samples/binding-input/_config.js          |   29 +
 .../samples/binding-input/main.svelte         |    6 +
 .../samples/claim-text/Component.svelte       |    5 +
 .../samples/claim-text/Layout.svelte          |    2 +
 test/hydration/samples/claim-text/_after.html |    3 +
 .../hydration/samples/claim-text/_before.html |    5 +
 test/hydration/samples/claim-text/main.svelte |    8 +
 .../component-in-element/Nested.svelte        |    1 +
 .../samples/component-in-element/_after.html  |    3 +
 .../samples/component-in-element/_before.html |    3 +
 .../samples/component-in-element/_config.js   |   21 +
 .../samples/component-in-element/main.svelte  |    7 +
 .../hydration/samples/component/Nested.svelte |    1 +
 test/hydration/samples/component/_after.html  |    1 +
 test/hydration/samples/component/_before.html |    1 +
 test/hydration/samples/component/_config.js   |   17 +
 test/hydration/samples/component/main.svelte  |    5 +
 .../samples/dynamic-text-changed/_after.html  |    1 +
 .../samples/dynamic-text-changed/_before.html |    1 +
 .../samples/dynamic-text-changed/_config.js   |   21 +
 .../samples/dynamic-text-changed/main.svelte  |    5 +
 .../samples/dynamic-text-nil/_after.html      |    2 +
 .../samples/dynamic-text-nil/_before.html     |    2 +
 .../samples/dynamic-text-nil/_config.js       |   21 +
 .../samples/dynamic-text-nil/main.svelte      |    7 +
 .../samples/dynamic-text/_after.html          |    1 +
 .../samples/dynamic-text/_before.html         |    1 +
 .../hydration/samples/dynamic-text/_config.js |   21 +
 .../samples/dynamic-text/main.svelte          |    5 +
 .../samples/each-block-arg-clash/_after.html  |    5 +
 .../samples/each-block-arg-clash/_before.html |    5 +
 .../samples/each-block-arg-clash/_config.js   |   31 +
 .../samples/each-block-arg-clash/main.svelte  |    9 +
 test/hydration/samples/each-block/_after.html |    5 +
 .../hydration/samples/each-block/_before.html |    5 +
 test/hydration/samples/each-block/_config.js  |   29 +
 test/hydration/samples/each-block/main.svelte |    9 +
 test/hydration/samples/each-else/_after.html  |    4 +
 test/hydration/samples/each-else/_before.html |    4 +
 test/hydration/samples/each-else/main.svelte  |   15 +
 .../element-attribute-added/_after.html       |    1 +
 .../element-attribute-added/_before.html      |    1 +
 .../element-attribute-added/_config.js        |   19 +
 .../element-attribute-added/main.svelte       |    5 +
 .../element-attribute-changed/_after.html     |    1 +
 .../element-attribute-changed/_before.html    |    1 +
 .../element-attribute-changed/_config.js      |   19 +
 .../element-attribute-changed/main.svelte     |    1 +
 .../element-attribute-removed/_after.html     |    1 +
 .../element-attribute-removed/_before.html    |    1 +
 .../element-attribute-removed/_config.js      |   19 +
 .../element-attribute-removed/main.svelte     |    1 +
 .../element-attribute-unchanged/_after.html   |    1 +
 .../element-attribute-unchanged/_before.html  |    1 +
 .../element-attribute-unchanged/_config.js    |   15 +
 .../element-attribute-unchanged/main.svelte   |    1 +
 .../element-nested-sibling/_after.html        |    4 +
 .../element-nested-sibling/_before.html       |    4 +
 .../samples/element-nested-sibling/_config.js |   19 +
 .../element-nested-sibling/main.svelte        |    6 +
 .../samples/element-nested/_after.html        |    3 +
 .../samples/element-nested/_before.html       |    3 +
 .../samples/element-nested/_config.js         |   17 +
 .../samples/element-nested/main.svelte        |    3 +
 .../hydration/samples/element-ref/_after.html |    1 +
 .../samples/element-ref/_before.html          |    1 +
 test/hydration/samples/element-ref/_config.js |   16 +
 .../hydration/samples/element-ref/main.svelte |    7 +
 .../samples/event-handler/_after.html         |    1 +
 .../samples/event-handler/_before.html        |    1 +
 .../samples/event-handler/_config.js          |   26 +
 .../samples/event-handler/main.svelte         |    9 +
 .../samples/expression-sibling/_after.html    |    1 +
 .../samples/expression-sibling/_before.html   |    1 +
 .../samples/expression-sibling/_config.js     |   19 +
 .../samples/expression-sibling/main.svelte    |    1 +
 .../head-meta-hydrate-duplicate/_after.html   |    1 +
 .../_after_head.html                          |    4 +
 .../head-meta-hydrate-duplicate/_before.html  |    1 +
 .../_before_head.html                         |    4 +
 .../head-meta-hydrate-duplicate/_config.js    |    5 +
 .../head-meta-hydrate-duplicate/main.svelte   |    8 +
 .../samples/if-block-anchor/_after.html       |    4 +
 .../samples/if-block-anchor/_before.html      |    4 +
 .../samples/if-block-anchor/_config.js        |   26 +
 .../samples/if-block-anchor/main.svelte       |   14 +
 .../samples/if-block-false/_after.html        |    2 +
 .../samples/if-block-false/_before.html       |    2 +
 .../samples/if-block-false/_config.js         |   19 +
 .../samples/if-block-false/main.svelte        |    9 +
 .../samples/if-block-update/_after.html       |    1 +
 .../samples/if-block-update/_before.html      |    1 +
 .../samples/if-block-update/_config.js        |   24 +
 .../samples/if-block-update/main.svelte       |   14 +
 test/hydration/samples/if-block/_after.html   |    1 +
 test/hydration/samples/if-block/_before.html  |    1 +
 test/hydration/samples/if-block/_config.js    |   19 +
 test/hydration/samples/if-block/main.svelte   |    7 +
 .../raw-with-empty-line-at-top/_after.html    |    6 +
 .../raw-with-empty-line-at-top/_before.html   |    6 +
 .../raw-with-empty-line-at-top/main.svelte    |   11 +
 test/hydration/samples/raw/_after.html        |    4 +
 test/hydration/samples/raw/_before.html       |    2 +
 test/hydration/samples/raw/_config.js         |   27 +
 test/hydration/samples/raw/main.svelte        |    1 +
 .../samples/text-fallback/Nested.svelte       |    7 +
 .../samples/text-fallback/_after.html         |    4 +
 .../samples/text-fallback/_before.html        |    4 +
 .../samples/text-fallback/main.svelte         |   11 +
 .../samples/top-level-cleanup-2/_after.html   |    1 +
 .../samples/top-level-cleanup-2/_before.html  |    2 +
 .../samples/top-level-cleanup-2/_config.js    |    1 +
 .../samples/top-level-cleanup-2/main.svelte   |    1 +
 .../samples/top-level-cleanup/_after.html     |    1 +
 .../samples/top-level-cleanup/_before.html    |    1 +
 .../samples/top-level-cleanup/_config.js      |    1 +
 .../samples/top-level-cleanup/main.svelte     |    1 +
 .../samples/top-level-text/_after.html        |    1 +
 .../samples/top-level-text/_before.html       |    1 +
 .../samples/top-level-text/_config.js         |   13 +
 .../samples/top-level-text/main.svelte        |    1 +
 test/js/README.md                             |    1 +
 test/js/index.ts                              |   72 +
 .../action-custom-event-handler/expected.js   |   72 +
 .../action-custom-event-handler/input.svelte  |   13 +
 test/js/samples/action/expected.js            |   67 +
 test/js/samples/action/input.svelte           |   18 +
 test/js/samples/bind-online/expected.js       |   56 +
 test/js/samples/bind-online/input.svelte      |    5 +
 test/js/samples/bind-open/expected.js         |   69 +
 test/js/samples/bind-open/input.svelte        |    7 +
 test/js/samples/bind-width-height/expected.js |   64 +
 .../js/samples/bind-width-height/input.svelte |    8 +
 .../bindings-readonly-order/expected.js       |   85 +
 .../bindings-readonly-order/input.svelte      |    6 +
 .../capture-inject-dev-only/_config.js        |    5 +
 .../capture-inject-dev-only/expected.js       |   82 +
 .../capture-inject-dev-only/input.svelte      |    5 +
 .../samples/capture-inject-state/_config.js   |    5 +
 .../samples/capture-inject-state/expected.js  |  200 +
 .../samples/capture-inject-state/input.svelte |   23 +
 .../collapse-element-class-name/expected.js   |  114 +
 .../collapse-element-class-name/input.svelte  |   41 +
 .../expected.js                               |   63 +
 .../input.svelte                              |   27 +
 .../component-static-array/expected.js        |   55 +
 .../component-static-array/input.svelte       |    5 +
 .../component-static-immutable/_config.js     |    5 +
 .../component-static-immutable/expected.js    |   55 +
 .../component-static-immutable/input.svelte   |    7 +
 .../component-static-immutable2/_config.js    |    5 +
 .../component-static-immutable2/expected.js   |   55 +
 .../component-static-immutable2/input.svelte  |    5 +
 .../samples/component-static-var/expected.js  |  108 +
 .../samples/component-static-var/input.svelte |   13 +
 test/js/samples/component-static/expected.js  |   55 +
 test/js/samples/component-static/input.svelte |    5 +
 .../expected.js                               |   56 +
 .../input.svelte                              |    6 +
 .../expected.js                               |   34 +
 .../input.svelte                              |    7 +
 .../component-store-file-invalidate/store.js  |    3 +
 .../expected.js                               |   81 +
 .../input.svelte                              |    7 +
 .../samples/computed-collapsed-if/expected.js |   37 +
 .../computed-collapsed-if/input.svelte        |   11 +
 test/js/samples/css-media-query/expected.js   |   45 +
 test/js/samples/css-media-query/input.svelte  |    9 +
 .../css-shadow-dom-keyframes/_config.js       |    5 +
 .../css-shadow-dom-keyframes/expected.js      |   62 +
 .../css-shadow-dom-keyframes/input.svelte     |   14 +
 test/js/samples/custom-svelte-path/_config.js |    5 +
 .../js/samples/custom-svelte-path/expected.js |   64 +
 .../samples/custom-svelte-path/input.svelte   |    9 +
 test/js/samples/data-attribute/expected.js    |   64 +
 test/js/samples/data-attribute/input.svelte   |    6 +
 test/js/samples/debug-empty/_config.js        |    5 +
 test/js/samples/debug-empty/expected.js       |  127 +
 test/js/samples/debug-empty/input.svelte      |    6 +
 .../debug-foo-bar-baz-things/_config.js       |    5 +
 .../debug-foo-bar-baz-things/expected.js      |  273 +
 .../debug-foo-bar-baz-things/input.svelte     |   13 +
 test/js/samples/debug-foo/_config.js          |    5 +
 test/js/samples/debug-foo/expected.js         |  237 +
 test/js/samples/debug-foo/input.svelte        |   11 +
 test/js/samples/debug-hoisted/_config.js      |    5 +
 test/js/samples/debug-hoisted/expected.js     |   90 +
 test/js/samples/debug-hoisted/input.svelte    |    6 +
 .../samples/debug-no-dependencies/_config.js  |    5 +
 .../samples/debug-no-dependencies/expected.js |  164 +
 .../debug-no-dependencies/input.svelte        |    7 +
 test/js/samples/debug-ssr-foo/_config.js      |    6 +
 test/js/samples/debug-ssr-foo/expected.js     |   18 +
 test/js/samples/debug-ssr-foo/input.svelte    |   11 +
 .../samples/deconflict-builtins/expected.js   |  121 +
 .../samples/deconflict-builtins/input.svelte  |    7 +
 .../js/samples/deconflict-globals/expected.js |   27 +
 .../samples/deconflict-globals/input.svelte   |    9 +
 .../_config.js                                |    5 +
 .../expected.js                               |  131 +
 .../input.svelte                              |   11 +
 .../samples/dont-invalidate-this/expected.js  |   52 +
 .../samples/dont-invalidate-this/input.svelte |    6 +
 test/js/samples/dynamic-import/expected.js    |   54 +
 test/js/samples/dynamic-import/input.svelte   |    5 +
 .../each-block-array-literal/expected.js      |  127 +
 .../each-block-array-literal/input.svelte     |   11 +
 .../each-block-changed-check/expected.js      |  173 +
 .../each-block-changed-check/input.svelte     |   20 +
 .../each-block-keyed-animated/expected.js     |  146 +
 .../each-block-keyed-animated/input.svelte    |   21 +
 test/js/samples/each-block-keyed/expected.js  |  115 +
 test/js/samples/each-block-keyed/input.svelte |    7 +
 test/js/samples/empty-dom/expected.js         |   16 +
 test/js/samples/empty-dom/input.svelte        |    3 +
 .../samples/event-handler-dynamic/expected.js |  110 +
 .../event-handler-dynamic/input.svelte        |   23 +
 .../event-handler-no-passive/expected.js      |   53 +
 .../event-handler-no-passive/input.svelte     |    3 +
 test/js/samples/event-modifiers/expected.js   |   93 +
 test/js/samples/event-modifiers/input.svelte  |   16 +
 .../samples/export-from-accessors/_config.js  |    5 +
 .../samples/export-from-accessors/expected.js |   34 +
 .../export-from-accessors/input.svelte        |   11 +
 test/js/samples/export-from-cjs/_config.js    |    6 +
 test/js/samples/export-from-cjs/expected.js   |   36 +
 test/js/samples/export-from-cjs/input.svelte  |   11 +
 test/js/samples/export-from/expected.js       |   18 +
 test/js/samples/export-from/input.svelte      |   11 +
 .../js/samples/head-no-whitespace/expected.js |   47 +
 .../samples/head-no-whitespace/input.svelte   |    4 +
 test/js/samples/hoisted-const/expected.js     |   45 +
 test/js/samples/hoisted-const/input.svelte    |    6 +
 test/js/samples/hoisted-let/expected.js       |   45 +
 test/js/samples/hoisted-let/input.svelte      |    6 +
 .../samples/hydrated-void-element/_config.js  |    5 +
 .../samples/hydrated-void-element/expected.js |   65 +
 .../hydrated-void-element/input.svelte        |    2 +
 .../hydrated-void-svg-element/_config.js      |    5 +
 .../hydrated-void-svg-element/expected.js     |   58 +
 .../hydrated-void-svg-element/input.svelte    |    3 +
 test/js/samples/if-block-complex/expected.js  |   67 +
 test/js/samples/if-block-complex/input.svelte |    9 +
 .../js/samples/if-block-no-update/expected.js |  105 +
 .../samples/if-block-no-update/input.svelte   |    9 +
 test/js/samples/if-block-simple/expected.js   |   83 +
 test/js/samples/if-block-simple/input.svelte  |    7 +
 test/js/samples/import-meta/expected.js       |   53 +
 test/js/samples/import-meta/input.svelte      |    6 +
 test/js/samples/initial-context/expected.js   |   59 +
 test/js/samples/initial-context/input.svelte  |    7 +
 .../expected.js                               |   63 +
 .../input.svelte                              |    7 +
 .../inline-style-optimized-url/expected.js    |   54 +
 .../inline-style-optimized-url/input.svelte   |    5 +
 .../inline-style-optimized/expected.js        |   54 +
 .../inline-style-optimized/input.svelte       |    5 +
 .../inline-style-unoptimized/expected.js      |   73 +
 .../inline-style-unoptimized/input.svelte     |    8 +
 .../inline-style-without-updates/expected.js  |   42 +
 .../inline-style-without-updates/input.svelte |    5 +
 test/js/samples/input-files/expected.js       |   66 +
 test/js/samples/input-files/input.svelte      |    5 +
 .../input-no-initial-value/expected.js        |   90 +
 .../input-no-initial-value/input.svelte       |   13 +
 test/js/samples/input-range/expected.js       |   77 +
 test/js/samples/input-range/input.svelte      |    5 +
 test/js/samples/input-value/expected.js       |  423 +
 test/js/samples/input-value/input.svelte      |   33 +
 .../input-without-blowback-guard/expected.js  |   70 +
 .../input-without-blowback-guard/input.svelte |    5 +
 .../expected.js                               |   79 +
 .../input.svelte                              |   11 +
 .../expected.js                               |   75 +
 .../input.svelte                              |   19 +
 .../expected.js                               |   81 +
 .../input.svelte                              |   12 +
 .../expected.js                               |   79 +
 .../input.svelte                              |    9 +
 .../expected.js                               |   81 +
 .../input.svelte                              |    7 +
 test/js/samples/legacy-input-type/_config.js  |    5 +
 test/js/samples/legacy-input-type/expected.js |   40 +
 .../js/samples/legacy-input-type/input.svelte |    1 +
 test/js/samples/loop-protect/_config.js       |    6 +
 test/js/samples/loop-protect/expected.js      |  168 +
 test/js/samples/loop-protect/input.svelte     |   23 +
 test/js/samples/media-bindings/expected.js    |  234 +
 test/js/samples/media-bindings/input.svelte   |   15 +
 .../non-imported-component/expected.js        |   66 +
 .../non-imported-component/input.svelte       |    6 +
 .../samples/non-mutable-reference/expected.js |   41 +
 .../non-mutable-reference/input.svelte        |    5 +
 test/js/samples/optional-chaining/expected.js |  189 +
 .../js/samples/optional-chaining/input.svelte |   31 +
 .../reactive-class-optimized/expected.js      |  162 +
 .../reactive-class-optimized/input.svelte     |   31 +
 .../samples/reactive-class-optimized/store.js |    4 +
 .../expected.js                               |   33 +
 .../input.svelte                              |    9 +
 .../expected.js                               |   29 +
 .../input.svelte                              |    6 +
 .../samples/select-dynamic-value/expected.js  |   67 +
 .../samples/select-dynamic-value/input.svelte |    8 +
 test/js/samples/setup-method/expected.js      |   26 +
 test/js/samples/setup-method/input.svelte     |    9 +
 .../src-attribute-check-in-foreign/_config.js |    5 +
 .../expected.js                               |   70 +
 .../input.svelte                              |    9 +
 .../src-attribute-check-in-svg/_config.js     |    5 +
 .../src-attribute-check-in-svg/expected.js    |   71 +
 .../src-attribute-check-in-svg/input.svelte   |    7 +
 .../js/samples/src-attribute-check/_config.js |    5 +
 .../samples/src-attribute-check/expected.js   |   86 +
 .../samples/src-attribute-check/input.svelte  |    7 +
 .../js/samples/ssr-no-oncreate-etc/_config.js |    5 +
 .../samples/ssr-no-oncreate-etc/expected.js   |   31 +
 .../samples/ssr-no-oncreate-etc/input.svelte  |   25 +
 .../samples/ssr-preserve-comments/_config.js  |    6 +
 .../samples/ssr-preserve-comments/expected.js |   10 +
 .../ssr-preserve-comments/input.svelte        |    3 +
 test/js/samples/svg-title/expected.js         |   46 +
 test/js/samples/svg-title/input.svelte        |    3 +
 test/js/samples/title/expected.js             |   39 +
 test/js/samples/title/input.svelte            |    7 +
 test/js/samples/transition-local/expected.js  |  142 +
 test/js/samples/transition-local/input.svelte |   12 +
 .../transition-repeated-outro/expected.js     |  119 +
 .../transition-repeated-outro/input.svelte    |   11 +
 .../samples/unchanged-expression/expected.js  |   92 +
 .../samples/unchanged-expression/input.svelte |   17 +
 .../expected.js                               |   76 +
 .../input.svelte                              |   21 +
 .../use-elements-as-anchors/expected.js       |  264 +
 .../use-elements-as-anchors/input.svelte      |   35 +
 .../expected.js                               |   39 +
 .../input.svelte                              |    3 +
 test/js/samples/video-bindings/expected.js    |  127 +
 test/js/samples/video-bindings/input.svelte   |    8 +
 .../samples/window-binding-online/expected.js |   56 +
 .../window-binding-online/input.svelte        |    5 +
 .../samples/window-binding-scroll/expected.js |   95 +
 .../window-binding-scroll/input.svelte        |    7 +
 test/js/update.js                             |   13 +
 test/motion/index.ts                          |   30 +
 test/parser/index.ts                          |   51 +
 .../samples/action-duplicate/input.svelte     |    1 +
 .../samples/action-duplicate/output.json      |   34 +
 .../samples/action-with-call/input.svelte     |    1 +
 .../samples/action-with-call/output.json      |   76 +
 .../action-with-identifier/input.svelte       |    1 +
 .../action-with-identifier/output.json        |   41 +
 .../samples/action-with-literal/input.svelte  |    1 +
 .../samples/action-with-literal/output.json   |   42 +
 test/parser/samples/action/input.svelte       |    1 +
 test/parser/samples/action/output.json        |   26 +
 test/parser/samples/animation/input.svelte    |    3 +
 test/parser/samples/animation/output.json     |   79 +
 .../attribute-class-directive/input.svelte    |    1 +
 .../attribute-class-directive/output.json     |   41 +
 .../attribute-containing-solidus/input.svelte |    1 +
 .../attribute-containing-solidus/output.json  |   41 +
 .../attribute-curly-bracket/input.svelte      |    1 +
 .../attribute-curly-bracket/output.json       |   55 +
 .../attribute-dynamic-boolean/input.svelte    |    1 +
 .../attribute-dynamic-boolean/output.json     |   47 +
 .../samples/attribute-dynamic/input.svelte    |    1 +
 .../samples/attribute-dynamic/output.json     |   83 +
 .../samples/attribute-empty-error/error.json  |   10 +
 .../attribute-empty-error/input.svelte        |    1 +
 .../samples/attribute-empty/input.svelte      |    1 +
 .../samples/attribute-empty/output.json       |  108 +
 .../samples/attribute-escaped/input.svelte    |    1 +
 .../samples/attribute-escaped/output.json     |   33 +
 .../samples/attribute-multiple/input.svelte   |    1 +
 .../samples/attribute-multiple/output.json    |   48 +
 .../samples/attribute-shorthand/input.svelte  |    1 +
 .../samples/attribute-shorthand/output.json   |   37 +
 .../attribute-static-boolean/input.svelte     |    1 +
 .../attribute-static-boolean/output.json      |   25 +
 .../samples/attribute-static/input.svelte     |    1 +
 .../samples/attribute-static/output.json      |   33 +
 .../input.svelte                              |    1 +
 .../output.json                               |   25 +
 .../input.svelte                              |    7 +
 .../output.json                               |  355 +
 .../attribute-style-directive/input.svelte    |    1 +
 .../attribute-style-directive/output.json     |   47 +
 .../samples/attribute-style/input.svelte      |    1 +
 .../samples/attribute-style/output.json       |   41 +
 .../attribute-unique-binding-error/error.json |   10 +
 .../input.svelte                              |    1 +
 .../samples/attribute-unique-error/error.json |   10 +
 .../attribute-unique-error/input.svelte       |    1 +
 .../error.json                                |   10 +
 .../input.svelte                              |    1 +
 .../samples/attribute-unquoted/input.svelte   |    1 +
 .../samples/attribute-unquoted/output.json    |   33 +
 .../attribute-with-whitespace/input.svelte    |    1 +
 .../attribute-with-whitespace/output.json     |   49 +
 test/parser/samples/await-catch/input.svelte  |    5 +
 test/parser/samples/await-catch/output.json   |  174 +
 .../samples/await-then-catch/input.svelte     |    7 +
 .../samples/await-then-catch/output.json      |  231 +
 .../samples/binding-shorthand/input.svelte    |    5 +
 .../samples/binding-shorthand/output.json     |  112 +
 test/parser/samples/binding/input.svelte      |    5 +
 test/parser/samples/binding/output.json       |  122 +
 .../samples/comment-with-ignores/input.svelte |    1 +
 .../samples/comment-with-ignores/output.json  |   16 +
 test/parser/samples/comment/input.svelte      |    1 +
 test/parser/samples/comment/output.json       |   16 +
 .../samples/component-dynamic/input.svelte    |    1 +
 .../samples/component-dynamic/output.json     |   80 +
 .../convert-entities-in-element/input.svelte  |    1 +
 .../convert-entities-in-element/output.json   |   25 +
 .../samples/convert-entities/input.svelte     |    1 +
 .../samples/convert-entities/output.json      |   16 +
 test/parser/samples/css/input.svelte          |    7 +
 test/parser/samples/css/output.json           |   97 +
 .../dynamic-element-string/input.svelte       |    2 +
 .../dynamic-element-string/output.json        |   50 +
 .../dynamic-element-variable/input.svelte     |    2 +
 .../dynamic-element-variable/output.json      |   80 +
 .../samples/dynamic-import/input.svelte       |    9 +
 .../parser/samples/dynamic-import/output.json |  482 +
 .../each-block-destructured/input.svelte      |    7 +
 .../each-block-destructured/output.json       |  268 +
 .../samples/each-block-else/input.svelte      |    5 +
 .../samples/each-block-else/output.json       |   91 +
 .../samples/each-block-indexed/input.svelte   |    3 +
 .../samples/each-block-indexed/output.json    |   97 +
 .../samples/each-block-keyed/input.svelte     |    3 +
 .../samples/each-block-keyed/output.json      |  117 +
 test/parser/samples/each-block/input.svelte   |    3 +
 test/parser/samples/each-block/output.json    |   68 +
 .../input.svelte                              |    2 +
 .../output.json                               |   64 +
 .../element-with-attribute/input.svelte       |    2 +
 .../element-with-attribute/output.json        |   64 +
 .../element-with-mustache/input.svelte        |    1 +
 .../samples/element-with-mustache/output.json |   53 +
 .../samples/element-with-text/input.svelte    |    1 +
 .../samples/element-with-text/output.json     |   25 +
 test/parser/samples/elements/input.svelte     |    1 +
 test/parser/samples/elements/output.json      |   25 +
 .../error-catch-before-closing/error.json     |    6 +
 .../error-catch-before-closing/input.svelte   |    4 +
 .../error-catch-without-await/error.json      |   10 +
 .../error-catch-without-await/input.svelte    |    1 +
 .../samples/error-comment-unclosed/error.json |   10 +
 .../error-comment-unclosed/input.svelte       |    1 +
 .../error.json                                |   10 +
 .../input.svelte                              |    3 +
 test/parser/samples/error-css/error.json      |   10 +
 test/parser/samples/error-css/input.svelte    |    3 +
 .../error-else-before-closing-2/error.json    |    6 +
 .../error-else-before-closing-2/input.svelte  |    4 +
 .../error-else-before-closing-3/error.json    |    6 +
 .../error-else-before-closing-3/input.svelte  |    2 +
 .../error-else-before-closing/error.json      |    6 +
 .../error-else-before-closing/input.svelte    |    4 +
 .../error-else-if-before-closing-2/error.json |    6 +
 .../input.svelte                              |    4 +
 .../error-else-if-before-closing/error.json   |    6 +
 .../error-else-if-before-closing/input.svelte |    4 +
 .../error-else-if-without-if/error.json       |    6 +
 .../error-else-if-without-if/input.svelte     |    4 +
 .../error.json                                |   10 +
 .../input.svelte                              |    1 +
 .../error-empty-classname-binding/error.json  |   10 +
 .../input.svelte                              |    1 +
 .../error-empty-directive-name/error.json     |   10 +
 .../error-empty-directive-name/input.svelte   |    1 +
 .../error-illegal-expression/error.json       |   10 +
 .../error-illegal-expression/input.svelte     |    1 +
 .../samples/error-multiple-styles/error.json  |   10 +
 .../error-multiple-styles/input.svelte        |   13 +
 .../error-script-unclosed-eof/error.json      |   10 +
 .../error-script-unclosed-eof/input.svelte    |    3 +
 .../samples/error-script-unclosed/error.json  |   10 +
 .../error-script-unclosed/input.svelte        |    3 +
 .../samples/error-self-reference/error.json   |   10 +
 .../samples/error-self-reference/input.svelte |    1 +
 .../error-style-unclosed-eof/error.json       |   10 +
 .../error-style-unclosed-eof/input.svelte     |    3 +
 .../samples/error-style-unclosed/error.json   |   10 +
 .../samples/error-style-unclosed/input.svelte |    3 +
 .../error-svelte-selfdestructive/error.json   |   10 +
 .../error-svelte-selfdestructive/input.svelte |    3 +
 .../error-then-before-closing/error.json      |    6 +
 .../error-then-before-closing/input.svelte    |    4 +
 .../error-then-without-await/error.json       |   10 +
 .../error-then-without-await/input.svelte     |    1 +
 .../error.json                                |   10 +
 .../input.svelte                              |    1 +
 .../error.json                                |   10 +
 .../input.svelte                              |    1 +
 .../error.json                                |   10 +
 .../input.svelte                              |    1 +
 .../error.json                                |   10 +
 .../input.svelte                              |    2 +
 .../error-unexpected-end-of-input/error.json  |   10 +
 .../input.svelte                              |    1 +
 .../error.json                                |   10 +
 .../input.svelte                              |    5 +
 .../error.json                                |   10 +
 .../input.svelte                              |    3 +
 .../error-unmatched-closing-tag/error.json    |   10 +
 .../error-unmatched-closing-tag/input.svelte  |    1 +
 .../samples/error-void-closing/error.json     |   10 +
 .../samples/error-void-closing/input.svelte   |    1 +
 .../samples/error-window-children/error.json  |   10 +
 .../error-window-children/input.svelte        |    1 +
 .../samples/error-window-duplicate/error.json |   10 +
 .../error-window-duplicate/input.svelte       |    2 +
 .../error-window-inside-block/error.json      |   10 +
 .../error-window-inside-block/input.svelte    |    3 +
 .../error-window-inside-element/error.json    |   10 +
 .../error-window-inside-element/input.svelte  |    3 +
 .../parser/samples/event-handler/input.svelte |    5 +
 test/parser/samples/event-handler/output.json |  164 +
 .../parser/samples/if-block-else/input.svelte |    5 +
 test/parser/samples/if-block-else/output.json |   71 +
 .../samples/if-block-elseif/input.svelte      |    5 +
 .../samples/if-block-elseif/output.json       |  161 +
 test/parser/samples/if-block/input.svelte     |    1 +
 test/parser/samples/if-block/output.json      |   39 +
 .../implicitly-closed-li-block/input.svelte   |    7 +
 .../implicitly-closed-li-block/output.json    |  104 +
 .../samples/implicitly-closed-li/input.svelte |    5 +
 .../samples/implicitly-closed-li/output.json  |   73 +
 test/parser/samples/nbsp/input.svelte         |    1 +
 test/parser/samples/nbsp/output.json          |   25 +
 .../no-error-if-before-closing/input.svelte   |   19 +
 .../no-error-if-before-closing/output.json    |  268 +
 .../raw-mustaches-whitespace-error/error.json |   10 +
 .../input.svelte                              |    1 +
 .../parser/samples/raw-mustaches/input.svelte |    1 +
 test/parser/samples/raw-mustaches/output.json |   81 +
 test/parser/samples/refs/input.svelte         |    5 +
 test/parser/samples/refs/output.json          |  122 +
 .../samples/script-comment-only/input.svelte  |    5 +
 .../samples/script-comment-only/output.json   |   55 +
 .../input.svelte                              |    9 +
 .../output.json                               |  158 +
 .../script-comment-trailing/input.svelte      |    7 +
 .../script-comment-trailing/output.json       |  158 +
 test/parser/samples/script/input.svelte       |    5 +
 test/parser/samples/script/output.json        |  150 +
 .../samples/self-closing-element/input.svelte |    1 +
 .../samples/self-closing-element/output.json  |   17 +
 .../samples/self-reference/input.svelte       |    3 +
 .../parser/samples/self-reference/output.json |  136 +
 .../samples/slotted-element/input.svelte      |    1 +
 .../samples/slotted-element/output.json       |   42 +
 .../space-between-mustaches/input.svelte      |    1 +
 .../space-between-mustaches/output.json       |  109 +
 test/parser/samples/spread/input.svelte       |    1 +
 test/parser/samples/spread/output.json        |   39 +
 .../samples/style-inside-head/input.svelte    |    1 +
 .../samples/style-inside-head/output.json     |   33 +
 .../samples/textarea-children/input.svelte    |    3 +
 .../samples/textarea-children/output.json     |   53 +
 .../samples/textarea-end-tag/input.svelte     |   12 +
 .../samples/textarea-end-tag/output.json      |   53 +
 .../transition-intro-no-params/input.svelte   |    1 +
 .../transition-intro-no-params/output.json    |   36 +
 .../samples/transition-intro/input.svelte     |    1 +
 .../samples/transition-intro/output.json      |  104 +
 .../samples/unusual-identifier/input.svelte   |    3 +
 .../samples/unusual-identifier/output.json    |   68 +
 .../whitespace-after-script-tag/input.svelte  |   10 +
 .../whitespace-after-script-tag/output.json   |  150 +
 .../whitespace-after-style-tag/input.svelte   |   12 +
 .../whitespace-after-style-tag/output.json    |   97 +
 .../whitespace-leading-trailing/input.svelte  |    3 +
 .../whitespace-leading-trailing/output.json   |   32 +
 .../samples/whitespace-normal/input.svelte    |    1 +
 .../samples/whitespace-normal/output.json     |   78 +
 test/parser/update.ts                         |   13 +
 test/preprocess/index.ts                      |   36 +
 .../samples/attributes-with-equals/_config.js |    5 +
 .../attributes-with-equals/input.svelte       |    3 +
 .../attributes-with-equals/output.svelte      |    1 +
 test/preprocess/samples/comments/_config.js   |    8 +
 test/preprocess/samples/comments/input.svelte |   25 +
 .../preprocess/samples/comments/output.svelte |   25 +
 .../samples/dependencies/_config.js           |   15 +
 .../samples/dependencies/input.svelte         |    3 +
 .../samples/dependencies/output.svelte        |    3 +
 .../samples/empty-sourcemap/_config.js        |    7 +
 .../samples/empty-sourcemap/input.svelte      |    7 +
 .../samples/empty-sourcemap/output.svelte     |    7 +
 test/preprocess/samples/filename/_config.js   |   22 +
 test/preprocess/samples/filename/input.svelte |    3 +
 .../preprocess/samples/filename/output.svelte |    3 +
 .../samples/ignores-null/_config.js           |    5 +
 .../samples/ignores-null/input.svelte         |    3 +
 .../samples/ignores-null/output.svelte        |    3 +
 test/preprocess/samples/markup/_config.js     |    9 +
 test/preprocess/samples/markup/input.svelte   |    1 +
 test/preprocess/samples/markup/output.svelte  |    1 +
 .../samples/multiple-preprocessors/_config.js |   14 +
 .../multiple-preprocessors/input.svelte       |   11 +
 .../multiple-preprocessors/output.svelte      |   11 +
 .../samples/partial-names/_config.js          |    6 +
 .../samples/partial-names/input.svelte        |   12 +
 .../samples/partial-names/output.svelte       |    8 +
 .../samples/script-multiple/_config.js        |    9 +
 .../samples/script-multiple/input.svelte      |    9 +
 .../samples/script-multiple/output.svelte     |    9 +
 .../samples/script-self-closing/_config.js    |   12 +
 .../samples/script-self-closing/input.svelte  |    1 +
 .../samples/script-self-closing/output.svelte |    1 +
 test/preprocess/samples/script/_config.js     |    9 +
 test/preprocess/samples/script/input.svelte   |    3 +
 test/preprocess/samples/script/output.svelte  |    3 +
 .../preprocess/samples/style-async/_config.js |    9 +
 .../samples/style-async/input.svelte          |    7 +
 .../samples/style-async/output.svelte         |    7 +
 .../samples/style-attributes/_config.js       |   14 +
 .../samples/style-attributes/input.svelte     |    1 +
 .../samples/style-attributes/output.svelte    |    1 +
 .../samples/style-self-closing/_config.js     |   12 +
 .../samples/style-self-closing/input.svelte   |    3 +
 .../samples/style-self-closing/output.svelte  |    3 +
 test/preprocess/samples/style/_config.js      |    9 +
 test/preprocess/samples/style/input.svelte    |    7 +
 test/preprocess/samples/style/output.svelte   |    7 +
 test/runtime-puppeteer/assert.js              |   54 +
 test/runtime-puppeteer/index.ts               |  248 +
 .../Slider.svelte                             |   17 +
 .../_config.js                                |   41 +
 .../main.svelte                               |   23 +
 .../Slider.svelte                             |   17 +
 .../_config.js                                |   27 +
 .../main.svelte                               |   15 +
 test/runtime/index.ts                         |  322 +
 .../samples/$$rest-without-props/App.svelte   |   12 +
 .../samples/$$rest-without-props/_config.js   |   54 +
 .../samples/$$rest-without-props/main.svelte  |   25 +
 test/runtime/samples/$$rest/App.svelte        |   13 +
 test/runtime/samples/$$rest/_config.js        |   60 +
 test/runtime/samples/$$rest/main.svelte       |   25 +
 test/runtime/samples/$$slot/A.svelte          |   31 +
 test/runtime/samples/$$slot/_config.js        |   18 +
 test/runtime/samples/$$slot/main.svelte       |   23 +
 test/runtime/samples/action-body/_config.js   |   18 +
 test/runtime/samples/action-body/main.svelte  |   32 +
 .../_config.js                                |   30 +
 .../main.svelte                               |   30 +
 .../_config.js                                |   30 +
 .../main.svelte                               |   24 +
 .../_config.js                                |   15 +
 .../main.svelte                               |   19 +
 .../_config.js                                |   22 +
 .../main.svelte                               |   19 +
 .../_config.js                                |   16 +
 .../main.svelte                               |   20 +
 .../action-custom-event-handler/_config.js    |   16 +
 .../action-custom-event-handler/main.svelte   |   23 +
 .../samples/action-function/_config.js        |   22 +
 .../samples/action-function/main.svelte       |   40 +
 .../samples/action-object-deep/_config.js     |    8 +
 .../samples/action-object-deep/main.svelte    |   12 +
 test/runtime/samples/action-object/_config.js |    8 +
 .../runtime/samples/action-object/main.svelte |   10 +
 .../_config.js                                |    8 +
 .../main.svelte                               |    8 +
 .../action-ternary-template/_config.js        |   20 +
 .../action-ternary-template/main.svelte       |   19 +
 test/runtime/samples/action-this/_config.js   |   11 +
 test/runtime/samples/action-this/main.svelte  |   20 +
 test/runtime/samples/action-update/_config.js |   29 +
 .../runtime/samples/action-update/main.svelte |   44 +
 test/runtime/samples/action/_config.js        |   22 +
 test/runtime/samples/action/main.svelte       |   30 +
 .../after-render-prevents-loop/_config.js     |   20 +
 .../after-render-prevents-loop/main.svelte    |   13 +
 .../after-render-triggers-update/_config.js   |   20 +
 .../after-render-triggers-update/main.svelte  |   15 +
 test/runtime/samples/animation-css/_config.js |   57 +
 .../runtime/samples/animation-css/main.svelte |   17 +
 .../samples/animation-js-delay/_config.js     |   84 +
 .../samples/animation-js-delay/main.svelte    |   21 +
 .../samples/animation-js-easing/_config.js    |   56 +
 .../samples/animation-js-easing/easing.js     |    3 +
 .../samples/animation-js-easing/main.svelte   |   22 +
 test/runtime/samples/animation-js/_config.js  |   77 +
 test/runtime/samples/animation-js/main.svelte |   20 +
 .../apply-directives-in-order-2/_config.js    |   38 +
 .../apply-directives-in-order-2/main.svelte   |   34 +
 .../apply-directives-in-order/_config.js      |   37 +
 .../apply-directives-in-order/main.svelte     |   10 +
 .../array-literal-spread-deopt/_config.js     |    3 +
 .../array-literal-spread-deopt/main.svelte    |    7 +
 .../samples/assignment-in-init/_config.js     |    6 +
 .../samples/assignment-in-init/main.svelte    |    7 +
 .../_config.js                                |    5 +
 .../main.svelte                               |    5 +
 .../main.svelte                               |   10 +
 .../_config.js                                |    3 +
 .../main.svelte                               |    1 +
 .../attribute-boolean-false/_config.js        |    7 +
 .../attribute-boolean-false/main.svelte       |    1 +
 .../_config.js                                |   23 +
 .../main.svelte                               |    5 +
 .../samples/attribute-boolean-true/_config.js |    8 +
 .../attribute-boolean-true/main.svelte        |    1 +
 .../attribute-boolean-with-spread/_config.js  |    3 +
 .../attribute-boolean-with-spread/main.svelte |    1 +
 .../_config.js                                |   24 +
 .../main.svelte                               |    4 +
 .../_config.js                                |   19 +
 .../main.svelte                               |    4 +
 .../samples/attribute-casing/_config.js       |   23 +
 .../samples/attribute-casing/main.svelte      |    9 +
 .../_config.js                                |    3 +
 .../main.svelte                               |    1 +
 .../attribute-dynamic-multiple/_config.js     |   15 +
 .../attribute-dynamic-multiple/main.svelte    |    7 +
 .../_config.js                                |    5 +
 .../main.svelte                               |    1 +
 .../attribute-dynamic-quotemarks/_config.js   |    3 +
 .../attribute-dynamic-quotemarks/main.svelte  |    1 +
 .../attribute-dynamic-shorthand/_config.js    |    8 +
 .../attribute-dynamic-shorthand/main.svelte   |    5 +
 .../samples/attribute-dynamic-type/_config.js |   18 +
 .../attribute-dynamic-type/main.svelte        |    6 +
 .../samples/attribute-dynamic/_config.js      |   13 +
 .../samples/attribute-dynamic/main.svelte     |    5 +
 .../samples/attribute-empty-svg/_config.js    |    7 +
 .../samples/attribute-empty-svg/main.svelte   |    3 +
 .../samples/attribute-empty/_config.js        |    3 +
 .../samples/attribute-empty/main.svelte       |    1 +
 .../samples/attribute-false/_config.js        |    3 +
 .../samples/attribute-false/main.svelte       |    1 +
 .../samples/attribute-namespaced/_config.js   |   14 +
 .../samples/attribute-namespaced/main.svelte  |    7 +
 .../_config.js                                |   42 +
 .../main.svelte                               |    5 +
 .../_config.js                                |   40 +
 .../main.svelte                               |   11 +
 .../_config.js                                |   45 +
 .../main.svelte                               |    6 +
 .../_config.js                                |   45 +
 .../main.svelte                               |   12 +
 .../_config.js                                |   42 +
 .../main.svelte                               |    9 +
 .../_config.js                                |   42 +
 .../main.svelte                               |   15 +
 .../_config.js                                |   45 +
 .../main.svelte                               |   11 +
 .../_config.js                                |   45 +
 .../main.svelte                               |   17 +
 .../runtime/samples/attribute-null/_config.js |    3 +
 .../samples/attribute-null/main.svelte        |    1 +
 .../attribute-partial-number/Component.svelte |    5 +
 .../attribute-partial-number/_config.js       |    3 +
 .../attribute-partial-number/main.svelte      |    5 +
 .../attribute-prefer-expression/_config.js    |   18 +
 .../attribute-prefer-expression/main.svelte   |    6 +
 .../attribute-static-at-symbol/_config.js     |    3 +
 .../attribute-static-at-symbol/main.svelte    |    1 +
 .../attribute-static-boolean/_config.js       |    7 +
 .../attribute-static-boolean/main.svelte      |    1 +
 .../attribute-static-quotemarks/_config.js    |    8 +
 .../attribute-static-quotemarks/main.svelte   |    4 +
 .../samples/attribute-static/_config.js       |    3 +
 .../samples/attribute-static/main.svelte      |    1 +
 .../samples/attribute-undefined/_config.js    |    3 +
 .../samples/attribute-undefined/main.svelte   |    1 +
 .../_config.js                                |    3 +
 .../main.svelte                               |    1 +
 test/runtime/samples/attribute-url/_config.js |    8 +
 .../runtime/samples/attribute-url/main.svelte |    6 +
 test/runtime/samples/autofocus/_config.js     |   24 +
 test/runtime/samples/autofocus/main.svelte    |   18 +
 .../await-catch-no-expression/_config.js      |   47 +
 .../await-catch-no-expression/main.svelte     |   15 +
 .../samples/await-catch-shorthand/_config.js  |   41 +
 .../samples/await-catch-shorthand/main.svelte |    7 +
 .../await-component-oncreate/Foo.svelte       |   13 +
 .../await-component-oncreate/_config.js       |   16 +
 .../await-component-oncreate/main.svelte      |    9 +
 .../await-conservative-update/_config.js      |   16 +
 .../await-conservative-update/main.svelte     |   19 +
 .../await-conservative-update/sleep.js        |   11 +
 .../samples/await-containing-if/_config.js    |   35 +
 .../samples/await-containing-if/main.svelte   |   16 +
 .../await-in-dynamic-component/Widget.svelte  |    1 +
 .../await-in-dynamic-component/_config.js     |    5 +
 .../await-in-dynamic-component/main.svelte    |    6 +
 test/runtime/samples/await-in-each/_config.js |   31 +
 .../runtime/samples/await-in-each/main.svelte |   11 +
 .../samples/await-in-removed-if/_config.js    |   22 +
 .../samples/await-in-removed-if/main.svelte   |    8 +
 .../_config.js                                |   13 +
 .../main.svelte                               |   21 +
 .../samples/await-set-simultaneous/_config.js |   18 +
 .../await-set-simultaneous/main.svelte        |   14 +
 .../Widget.svelte                             |   15 +
 .../await-then-blowback-reactive/_config.js   |   19 +
 .../await-then-blowback-reactive/main.svelte  |   12 +
 .../await-then-catch-anchor/_config.js        |   47 +
 .../await-then-catch-anchor/main.svelte       |   13 +
 .../samples/await-then-catch-event/_config.js |   45 +
 .../await-then-catch-event/main.svelte        |   13 +
 .../samples/await-then-catch-if/_config.js    |   41 +
 .../samples/await-then-catch-if/main.svelte   |   16 +
 .../await-then-catch-in-slot/Foo.svelte       |    1 +
 .../await-then-catch-in-slot/_config.js       |   47 +
 .../await-then-catch-in-slot/main.svelte      |   15 +
 .../await-then-catch-multiple/_config.js      |   51 +
 .../await-then-catch-multiple/main.svelte     |   19 +
 .../await-then-catch-no-values/_config.js     |   39 +
 .../await-then-catch-no-values/main.svelte    |   11 +
 .../await-then-catch-non-promise/_config.js   |   17 +
 .../await-then-catch-non-promise/main.svelte  |   11 +
 .../samples/await-then-catch-order/_config.js |   27 +
 .../await-then-catch-order/main.svelte        |   15 +
 .../await-then-catch-static/_config.js        |   45 +
 .../await-then-catch-static/main.svelte       |   11 +
 .../samples/await-then-catch/_config.js       |   47 +
 .../samples/await-then-catch/main.svelte      |   11 +
 .../await-then-destruct-array/_config.js      |   61 +
 .../await-then-destruct-array/main.svelte     |   14 +
 .../await-then-destruct-default/_config.js    |   23 +
 .../await-then-destruct-default/main.svelte   |   34 +
 .../await-then-destruct-object-if/_config.js  |   29 +
 .../await-then-destruct-object-if/main.svelte |   19 +
 .../await-then-destruct-object/_config.js     |   63 +
 .../await-then-destruct-object/main.svelte    |   13 +
 .../await-then-destruct-rest/_config.js       |   21 +
 .../await-then-destruct-rest/main.svelte      |   32 +
 test/runtime/samples/await-then-if/_config.js |   25 +
 .../runtime/samples/await-then-if/main.svelte |   13 +
 .../samples/await-then-no-context/main.svelte |   12 +
 .../await-then-no-expression/_config.js       |   55 +
 .../await-then-no-expression/main.svelte      |   23 +
 .../samples/await-then-shorthand/_config.js   |   43 +
 .../samples/await-then-shorthand/main.svelte  |    9 +
 .../await-with-components/Widget.svelte       |    5 +
 .../samples/await-with-components/_config.js  |   30 +
 .../samples/await-with-components/main.svelte |   12 +
 .../await-with-update-2/Component.svelte      |    7 +
 .../samples/await-with-update-2/_config.js    |   64 +
 .../samples/await-with-update-2/main.svelte   |   16 +
 .../await-with-update-catch-scope/_config.js  |   51 +
 .../await-with-update-catch-scope/main.svelte |   13 +
 .../await-with-update/Component.svelte        |    5 +
 .../samples/await-with-update/_config.js      |   60 +
 .../samples/await-with-update/main.svelte     |   16 +
 .../samples/await-without-catch/_config.js    |   45 +
 .../samples/await-without-catch/main.svelte   |    9 +
 .../samples/before-render-chain/Item.svelte   |   12 +
 .../samples/before-render-chain/List.svelte   |   13 +
 .../samples/before-render-chain/_config.js    |   21 +
 .../samples/before-render-chain/main.svelte   |    7 +
 .../before-render-prevents-loop/_config.js    |   20 +
 .../before-render-prevents-loop/main.svelte   |   13 +
 .../_config.js                                |   39 +
 .../main.svelte                               |   11 +
 .../samples/binding-circular/_config.js       |    7 +
 .../samples/binding-circular/main.svelte      |   10 +
 .../_config.js                                |   40 +
 .../main.svelte                               |    8 +
 .../binding-contenteditable-html/_config.js   |   38 +
 .../binding-contenteditable-html/main.svelte  |    6 +
 .../_config.js                                |   34 +
 .../main.svelte                               |    8 +
 .../binding-contenteditable-text/_config.js   |   32 +
 .../binding-contenteditable-text/main.svelte  |    6 +
 .../samples/binding-details-open/_config.js   |   25 +
 .../samples/binding-details-open/main.svelte  |    9 +
 .../binding-indirect-computed/_config.js      |   34 +
 .../binding-indirect-computed/main.svelte     |   22 +
 .../binding-indirect-spread/_config.js        |   52 +
 .../binding-indirect-spread/main.svelte       |   12 +
 .../samples/binding-indirect/_config.js       |   90 +
 .../samples/binding-indirect/main.svelte      |   19 +
 .../_config.js                                |   50 +
 .../main.svelte                               |   18 +
 .../_config.js                                |   64 +
 .../main.svelte                               |   14 +
 .../_config.js                                |   91 +
 .../main.svelte                               |   18 +
 .../binding-input-checkbox-group/_config.js   |   91 +
 .../binding-input-checkbox-group/main.svelte  |   12 +
 .../_config.js                                |   42 +
 .../main.svelte                               |    8 +
 .../_config.js                                |   39 +
 .../main.svelte                               |   11 +
 .../samples/binding-input-checkbox/_config.js |   37 +
 .../binding-input-checkbox/main.svelte        |    6 +
 .../_config.js                                |   81 +
 .../main.svelte                               |   19 +
 .../binding-input-group-each-1/_config.js     |  323 +
 .../binding-input-group-each-1/main.svelte    |   15 +
 .../binding-input-group-each-2/_config.js     |   72 +
 .../binding-input-group-each-2/main.svelte    |   17 +
 .../binding-input-group-each-3/_config.js     |  321 +
 .../binding-input-group-each-3/main.svelte    |   15 +
 .../binding-input-group-each-4/_config.js     |  170 +
 .../binding-input-group-each-4/main.svelte    |   33 +
 .../binding-input-group-each-5/_config.js     |  177 +
 .../binding-input-group-each-5/main.svelte    |   24 +
 .../binding-input-group-each-6/_config.js     |   86 +
 .../binding-input-group-each-6/main.svelte    |   22 +
 .../binding-input-group-each-7/_config.js     |   53 +
 .../binding-input-group-each-7/main.svelte    |   15 +
 .../_config.js                                |   18 +
 .../main.svelte                               |    9 +
 .../samples/binding-input-number-2/_config.js |   31 +
 .../binding-input-number-2/main.svelte        |    5 +
 .../samples/binding-input-number/_config.js   |   48 +
 .../samples/binding-input-number/main.svelte  |    6 +
 .../binding-input-radio-group/_config.js      |   95 +
 .../binding-input-radio-group/main.svelte     |   12 +
 .../_config.js                                |   33 +
 .../main.svelte                               |   13 +
 .../binding-input-range-change/_config.js     |   38 +
 .../binding-input-range-change/main.svelte    |    6 +
 .../samples/binding-input-range/_config.js    |   38 +
 .../samples/binding-input-range/main.svelte   |    6 +
 .../_config.js                                |   36 +
 .../main.svelte                               |   10 +
 .../_config.js                                |  125 +
 .../main.svelte                               |   25 +
 .../binding-input-text-contextual/_config.js  |   69 +
 .../binding-input-text-contextual/main.svelte |    7 +
 .../_config.js                                |   40 +
 .../main.svelte                               |    6 +
 .../_config.js                                |   60 +
 .../main.svelte                               |    7 +
 .../_config.js                                |   44 +
 .../main.svelte                               |    7 +
 .../_config.js                                |   62 +
 .../main.svelte                               |    9 +
 .../_config.js                                |   49 +
 .../main.svelte                               |    7 +
 .../binding-input-text-deep/_config.js        |   43 +
 .../binding-input-text-deep/main.svelte       |    6 +
 .../binding-input-text-undefined/_config.js   |   30 +
 .../binding-input-text-undefined/main.svelte  |    5 +
 .../samples/binding-input-text/_config.js     |   37 +
 .../samples/binding-input-text/main.svelte    |    6 +
 .../binding-input-with-event/_config.js       |   18 +
 .../binding-input-with-event/main.svelte      |    6 +
 .../_config.js                                |   40 +
 .../main.svelte                               |   12 +
 .../binding-select-in-each-block/_config.js   |   30 +
 .../binding-select-in-each-block/main.svelte  |    9 +
 .../binding-select-in-yield/Modal.svelte      |   11 +
 .../binding-select-in-yield/_config.js        |   65 +
 .../binding-select-in-yield/main.svelte       |   16 +
 .../_config.js                                |   24 +
 .../main.svelte                               |   13 +
 .../binding-select-initial-value/_config.js   |   25 +
 .../binding-select-initial-value/main.svelte  |   13 +
 .../samples/binding-select-late-2/_config.js  |   29 +
 .../samples/binding-select-late-2/main.svelte |   12 +
 .../samples/binding-select-late-3/_config.js  |   34 +
 .../samples/binding-select-late-3/main.svelte |   12 +
 .../samples/binding-select-late/_config.js    |   30 +
 .../samples/binding-select-late/main.svelte   |   12 +
 .../binding-select-multiple/_config.js        |   67 +
 .../binding-select-multiple/main.svelte       |   11 +
 .../binding-select-optgroup/_config.js        |   49 +
 .../binding-select-optgroup/main.svelte       |   12 +
 .../binding-select-unmatched/_config.js       |   60 +
 .../binding-select-unmatched/main.svelte      |   14 +
 .../runtime/samples/binding-select/_config.js |   45 +
 .../samples/binding-select/main.svelte        |   13 +
 .../samples/binding-store-deep/_config.js     |   41 +
 .../samples/binding-store-deep/main.svelte    |    8 +
 test/runtime/samples/binding-store/_config.js |   41 +
 .../runtime/samples/binding-store/main.svelte |    8 +
 .../samples/binding-textarea/_config.js       |   37 +
 .../samples/binding-textarea/main.svelte      |    6 +
 .../samples/binding-this-and-value/_config.js |   24 +
 .../binding-this-and-value/main.svelte        |    7 +
 .../Foo.svelte                                |    1 +
 .../_config.js                                |    8 +
 .../main.svelte                               |    9 +
 .../Foo.svelte                                |    1 +
 .../_config.js                                |   12 +
 .../main.svelte                               |   11 +
 .../Foo.svelte                                |    1 +
 .../_config.js                                |   12 +
 .../main.svelte                               |   11 +
 .../Foo.svelte                                |    1 +
 .../_config.js                                |    8 +
 .../main.svelte                               |    9 +
 .../_config.js                                |   53 +
 .../main.svelte                               |   17 +
 .../Foo.svelte                                |    7 +
 .../_config.js                                |   12 +
 .../main.svelte                               |   13 +
 .../_config.js                                |   12 +
 .../main.svelte                               |   11 +
 .../samples/binding-this-each-key/_config.js  |   10 +
 .../samples/binding-this-each-key/main.svelte |   15 +
 .../binding-this-each-object-props/_config.js |   14 +
 .../main.svelte                               |   13 +
 .../_config.js                                |   14 +
 .../main.svelte                               |   13 +
 .../_config.js                                |   21 +
 .../main.svelte                               |    9 +
 .../binding-this-element-reactive/_config.js  |    5 +
 .../binding-this-element-reactive/main.svelte |    7 +
 .../_config.js                                |    8 +
 .../main.svelte                               |    9 +
 .../binding-this-no-innerhtml/_config.js      |    8 +
 .../binding-this-no-innerhtml/main.svelte     |    5 +
 .../samples/binding-this-store/_config.js     |    4 +
 .../samples/binding-this-store/main.svelte    |    6 +
 .../samples/binding-this-unset/_config.js     |   23 +
 .../samples/binding-this-unset/main.svelte    |   10 +
 .../binding-this-with-context/_config.js      |   59 +
 .../binding-this-with-context/main.svelte     |   28 +
 test/runtime/samples/binding-this/_config.js  |    8 +
 test/runtime/samples/binding-this/main.svelte |    5 +
 .../binding-using-props/TextInput.svelte      |    6 +
 .../samples/binding-using-props/_config.js    |   14 +
 .../samples/binding-using-props/main.svelte   |    7 +
 .../binding-width-height-a11y/_config.js      |    8 +
 .../binding-width-height-a11y/main.svelte     |   10 +
 .../binding-width-height-z-index/_config.js   |    7 +
 .../binding-width-height-z-index/main.svelte  |    8 +
 .../bindings-before-onmount/One.svelte        |   13 +
 .../bindings-before-onmount/Two.svelte        |    7 +
 .../bindings-before-onmount/_config.js        |    5 +
 .../bindings-before-onmount/main.svelte       |    7 +
 .../samples/bindings-coalesced/Foo.svelte     |   12 +
 .../samples/bindings-coalesced/_config.js     |   17 +
 .../samples/bindings-coalesced/main.svelte    |   12 +
 .../bindings-global-dependency/_config.js     |    4 +
 .../bindings-global-dependency/main.svelte    |    9 +
 .../samples/bitmask-overflow-2/_config.js     |    3 +
 .../samples/bitmask-overflow-2/main.svelte    |   35 +
 .../samples/bitmask-overflow-3/_config.js     |    3 +
 .../samples/bitmask-overflow-3/main.svelte    |    4 +
 .../samples/bitmask-overflow-if-2/_config.js  |   23 +
 .../samples/bitmask-overflow-if-2/main.svelte |   56 +
 .../samples/bitmask-overflow-if/_config.js    |   24 +
 .../samples/bitmask-overflow-if/main.svelte   |   62 +
 .../bitmask-overflow-slot-2/Echo.svelte       |   73 +
 .../bitmask-overflow-slot-2/_config.js        |   96 +
 .../bitmask-overflow-slot-2/main.svelte       |   30 +
 .../bitmask-overflow-slot-3/Echo.svelte       |    9 +
 .../bitmask-overflow-slot-3/_config.js        |   30 +
 .../bitmask-overflow-slot-3/main.svelte       |   11 +
 .../bitmask-overflow-slot-4/Echo.svelte       |   11 +
 .../bitmask-overflow-slot-4/_config.js        |   41 +
 .../bitmask-overflow-slot-4/main.svelte       |   12 +
 .../bitmask-overflow-slot-5/Echo.svelte       |   13 +
 .../bitmask-overflow-slot-5/_config.js        |   49 +
 .../bitmask-overflow-slot-5/main.svelte       |   13 +
 .../bitmask-overflow-slot-6/Slotted.svelte    |   15 +
 .../bitmask-overflow-slot-6/_config.js        |   32 +
 .../bitmask-overflow-slot-6/main.svelte       |   23 +
 .../samples/bitmask-overflow-slot/Echo.svelte |    5 +
 .../samples/bitmask-overflow-slot/_config.js  |  124 +
 .../samples/bitmask-overflow-slot/main.svelte |  107 +
 .../samples/bitmask-overflow/_config.js       |  122 +
 .../samples/bitmask-overflow/main.svelte      |  101 +
 test/runtime/samples/class-boolean/_config.js |    3 +
 .../runtime/samples/class-boolean/main.svelte |    1 +
 test/runtime/samples/class-helper/_config.js  |   15 +
 test/runtime/samples/class-helper/main.svelte |    9 +
 test/runtime/samples/class-in-each/_config.js |   21 +
 .../runtime/samples/class-in-each/main.svelte |    8 +
 .../class-shortcut-with-class/_config.js      |   17 +
 .../class-shortcut-with-class/main.svelte     |    8 +
 .../runtime/samples/class-shortcut/_config.js |   16 +
 .../samples/class-shortcut/main.svelte        |    7 +
 .../samples/class-with-attribute/_config.js   |    3 +
 .../samples/class-with-attribute/main.svelte  |    1 +
 .../_config.js                                |   21 +
 .../main.svelte                               |    6 +
 .../class-with-dynamic-attribute/_config.js   |   15 +
 .../class-with-dynamic-attribute/main.svelte  |    5 +
 .../class-with-spread-and-bind/_config.js     |   18 +
 .../class-with-spread-and-bind/main.svelte    |   11 +
 .../samples/class-with-spread/_config.js      |   21 +
 .../samples/class-with-spread/main.svelte     |    6 +
 .../component-binding-accessors/Nested.svelte |    5 +
 .../component-binding-accessors/_config.js    |   18 +
 .../component-binding-accessors/main.svelte   |   12 +
 .../component-binding-aliased/Widget.svelte   |    4 +
 .../component-binding-aliased/_config.js      |    5 +
 .../component-binding-aliased/main.svelte     |    8 +
 .../Nested.svelte                             |   21 +
 .../component-binding-blowback-b/_config.js   |   33 +
 .../component-binding-blowback-b/main.svelte  |   21 +
 .../Nested.svelte                             |   21 +
 .../component-binding-blowback-c/_config.js   |   33 +
 .../component-binding-blowback-c/main.svelte  |   23 +
 .../component-binding-blowback-d/One.svelte   |   18 +
 .../component-binding-blowback-d/Two.svelte   |    4 +
 .../component-binding-blowback-d/_config.js   |   23 +
 .../component-binding-blowback-d/main.svelte  |   14 +
 .../component-binding-blowback-e/One.svelte   |   18 +
 .../component-binding-blowback-e/Two.svelte   |    4 +
 .../component-binding-blowback-e/_config.js   |   23 +
 .../component-binding-blowback-e/main.svelte  |   14 +
 .../component-binding-blowback-f/One.svelte   |   18 +
 .../component-binding-blowback-f/Two.svelte   |   10 +
 .../component-binding-blowback-f/_config.js   |   31 +
 .../component-binding-blowback-f/main.svelte  |   14 +
 .../component-binding-blowback/Widget.svelte  |    1 +
 .../component-binding-blowback/_config.js     |   12 +
 .../component-binding-blowback/main.svelte    |   12 +
 .../component-binding-computed/Nested.svelte  |    8 +
 .../component-binding-computed/_config.js     |   36 +
 .../component-binding-computed/main.svelte    |   13 +
 .../Bar.svelte                                |    5 +
 .../Baz.svelte                                |    3 +
 .../Foo.svelte                                |    5 +
 .../_config.js                                |   24 +
 .../main.svelte                               |   18 +
 .../component-binding-conditional/Bar.svelte  |    5 +
 .../component-binding-conditional/Baz.svelte  |    3 +
 .../component-binding-conditional/Foo.svelte  |    5 +
 .../component-binding-conditional/_config.js  |   17 +
 .../component-binding-conditional/main.svelte |   18 +
 .../ComponentSelector.svelte                  |   10 +
 .../component-binding-deep-b/Editor.svelte    |    5 +
 .../component-binding-deep-b/_config.js       |   82 +
 .../component-binding-deep-b/main.svelte      |   37 +
 .../component-binding-deep/Widget.svelte      |    5 +
 .../samples/component-binding-deep/_config.js |   25 +
 .../component-binding-deep/main.svelte        |   11 +
 .../Widget.svelte                             |    5 +
 .../component-binding-each-nested/_config.js  |   27 +
 .../component-binding-each-nested/main.svelte |   12 +
 .../Widget.svelte                             |    5 +
 .../component-binding-each-object/_config.js  |   20 +
 .../component-binding-each-object/main.svelte |    9 +
 .../component-binding-each/Widget.svelte      |    5 +
 .../samples/component-binding-each/_config.js |   27 +
 .../component-binding-each/main.svelte        |   11 +
 .../component-binding-infinite-loop/A.svelte  |    8 +
 .../component-binding-infinite-loop/B.svelte  |   14 +
 .../component-binding-infinite-loop/C.svelte  |   19 +
 .../_config.js                                |   90 +
 .../main.svelte                               |    8 +
 .../component-binding-nested/Bar.svelte       |   10 +
 .../component-binding-nested/Baz.svelte       |    6 +
 .../component-binding-nested/Foo.svelte       |   10 +
 .../component-binding-nested/_config.js       |   61 +
 .../component-binding-nested/main.svelte      |    9 +
 .../Counter.svelte                            |    5 +
 .../component-binding-non-leaky/_config.js    |   27 +
 .../component-binding-non-leaky/main.svelte   |    8 +
 .../component-binding-onMount/Mount.svelte    |   15 +
 .../component-binding-onMount/_config.js      |   11 +
 .../component-binding-onMount/main.svelte     |   13 +
 .../Bar.svelte                                |    5 +
 .../Foo.svelte                                |    5 +
 .../_config.js                                |   31 +
 .../main.svelte                               |   15 +
 .../Bar.svelte                                |    5 +
 .../Foo.svelte                                |    5 +
 .../_config.js                                |   31 +
 .../main.svelte                               |   11 +
 .../Counter.svelte                            |    5 +
 .../_config.js                                |   27 +
 .../main.svelte                               |    8 +
 .../Bar.svelte                                |    5 +
 .../Foo.svelte                                |    5 +
 .../_config.js                                |   31 +
 .../main.svelte                               |   11 +
 .../Component.svelte                          |    6 +
 .../_config.js                                |    5 +
 .../main.svelte                               |   13 +
 .../Button.svelte                             |   11 +
 .../_config.js                                |   38 +
 .../main.svelte                               |   19 +
 .../Nested.svelte                             |    5 +
 .../_config.js                                |   27 +
 .../main.svelte                               |   10 +
 .../component-binding-store/Input.svelte      |    5 +
 .../component-binding-store/_config.js        |   66 +
 .../component-binding-store/main.svelte       |   18 +
 .../samples/component-binding/Counter.svelte  |    5 +
 .../samples/component-binding/_config.js      |   29 +
 .../samples/component-binding/main.svelte     |    8 +
 .../component-data-dynamic-late/Widget.svelte |    5 +
 .../component-data-dynamic-late/_config.js    |   10 +
 .../component-data-dynamic-late/main.svelte   |   10 +
 .../Widget.svelte                             |    5 +
 .../_config.js                                |   13 +
 .../main.svelte                               |    9 +
 .../component-data-dynamic/Widget.svelte      |   11 +
 .../samples/component-data-dynamic/_config.js |   29 +
 .../component-data-dynamic/main.svelte        |   12 +
 .../component-data-empty/Widget.svelte        |    5 +
 .../samples/component-data-empty/_config.js   |    3 +
 .../samples/component-data-empty/main.svelte  |    7 +
 .../Link.svelte                               |    5 +
 .../_config.js                                |    3 +
 .../main.svelte                               |    5 +
 .../component-data-static-boolean/Foo.svelte  |    5 +
 .../component-data-static-boolean/_config.js  |    3 +
 .../component-data-static-boolean/main.svelte |    5 +
 .../component-data-static/Widget.svelte       |    7 +
 .../samples/component-data-static/_config.js  |    8 +
 .../samples/component-data-static/main.svelte |    7 +
 .../_config.js                                |   15 +
 .../main.svelte                               |    6 +
 .../Button.svelte                             |    1 +
 .../_config.js                                |   18 +
 .../main.svelte                               |   11 +
 .../Button.svelte                             |    1 +
 .../_config.js                                |   18 +
 .../main.svelte                               |   11 +
 .../Button.svelte                             |    1 +
 .../_config.js                                |   16 +
 .../main.svelte                               |    6 +
 .../component-event-not-stale/Button.svelte   |    1 +
 .../component-event-not-stale/_config.js      |   30 +
 .../component-event-not-stale/main.svelte     |   15 +
 .../component-events-console/Widget.svelte    |    1 +
 .../component-events-console/_config.js       |   25 +
 .../component-events-console/main.svelte      |    5 +
 .../component-events-data/Widget.svelte       |    9 +
 .../samples/component-events-data/_config.js  |   24 +
 .../samples/component-events-data/main.svelte |   10 +
 .../component-events-each/Widget.svelte       |    7 +
 .../samples/component-events-each/_config.js  |   30 +
 .../samples/component-events-each/main.svelte |   18 +
 .../component-events-this/Inner.svelte        |    7 +
 .../component-events-this/Widget.svelte       |    6 +
 .../samples/component-events-this/_config.js  |   11 +
 .../samples/component-events-this/main.svelte |   16 +
 .../samples/component-events/Widget.svelte    |   11 +
 .../samples/component-events/_config.js       |   23 +
 .../samples/component-events/main.svelte      |   14 +
 .../component-if-placement/Component.svelte   |    3 +
 .../samples/component-if-placement/_config.js |   20 +
 .../component-if-placement/main.svelte        |   12 +
 .../Countdown.svelte                          |   10 +
 .../_config.js                                |    5 +
 .../main.svelte                               |    5 +
 .../component-name-deconflicted/Nested.svelte |    5 +
 .../component-name-deconflicted/_config.js    |   15 +
 .../component-name-deconflicted/main.svelte   |   11 +
 .../component-namespace/Tooltip.svelte        |    1 +
 .../samples/component-namespace/Widget.svelte |    5 +
 .../samples/component-namespace/_config.js    |    3 +
 .../samples/component-namespace/main.svelte   |    8 +
 .../samples/component-namespaced/Foo.svelte   |    5 +
 .../samples/component-namespaced/_config.js   |   16 +
 .../component-namespaced/components.svelte    |    5 +
 .../samples/component-namespaced/main.svelte  |    7 +
 .../component-nested-deep/Level1.svelte       |    8 +
 .../component-nested-deep/Level2.svelte       |    6 +
 .../component-nested-deep/Level3.svelte       |    1 +
 .../samples/component-nested-deep/_config.js  |    5 +
 .../samples/component-nested-deep/main.svelte |    7 +
 .../component-nested-deeper/Level1.svelte     |   17 +
 .../component-nested-deeper/Level2.svelte     |   14 +
 .../component-nested-deeper/Level3.svelte     |    4 +
 .../component-nested-deeper/_config.js        |    9 +
 .../component-nested-deeper/main.svelte       |    7 +
 .../samples/component-not-void/Link.svelte    |    1 +
 .../samples/component-not-void/_config.js     |    3 +
 .../samples/component-not-void/main.svelte    |    5 +
 .../samples/component-ref/Widget.svelte       |   11 +
 test/runtime/samples/component-ref/_config.js |    8 +
 .../runtime/samples/component-ref/main.svelte |    8 +
 .../component-shorthand-import/Widget.svelte  |    1 +
 .../component-shorthand-import/_config.js     |    3 +
 .../component-shorthand-import/main.svelte    |    5 +
 .../Component.svelte                          |    1 +
 .../component-slot-attribute-order/_config.js |   15 +
 .../main.svelte                               |   15 +
 .../Nested.svelte                             |    7 +
 .../_config.js                                |    2 +
 .../main.svelte                               |    7 +
 .../component-slot-chained/Inner.svelte       |    1 +
 .../component-slot-chained/Outer.svelte       |    7 +
 .../samples/component-slot-chained/_config.js |    8 +
 .../component-slot-chained/main.svelte        |    9 +
 .../Hello.svelte                              |    5 +
 .../Nested.svelte                             |    1 +
 .../_config.js                                |    7 +
 .../main.svelte                               |   10 +
 .../Hello.svelte                              |    1 +
 .../Nested.svelte                             |    1 +
 .../World.svelte                              |    1 +
 .../_config.js                                |    6 +
 .../main.svelte                               |   13 +
 .../component-slot-component-named/Bar.svelte |    1 +
 .../component-slot-component-named/Foo.svelte |    1 +
 .../Nested.svelte                             |    5 +
 .../component-slot-component-named/_config.js |    9 +
 .../main.svelte                               |   12 +
 .../Nested.svelte                             |   14 +
 .../_config.js                                |   36 +
 .../main.svelte                               |    8 +
 .../Nested.svelte                             |   11 +
 .../_config.js                                |   19 +
 .../main.svelte                               |    8 +
 .../Inner.svelte                              |    9 +
 .../Nested.svelte                             |    8 +
 .../_config.js                                |   19 +
 .../main.svelte                               |    8 +
 .../component-slot-default/Nested.svelte      |    3 +
 .../samples/component-slot-default/_config.js |    3 +
 .../component-slot-default/main.svelte        |    7 +
 .../Nested.svelte                             |    1 +
 .../_config.js                                |    3 +
 .../main.svelte                               |    8 +
 .../Nested.svelte                             |    1 +
 .../_config.js                                |    3 +
 .../main.svelte                               |    8 +
 .../Nested.svelte                             |    1 +
 .../_config.js                                |    3 +
 .../main.svelte                               |    8 +
 .../Nested.svelte                             |    1 +
 .../component-slot-duplicate-error/_config.js |    3 +
 .../main.svelte                               |    8 +
 .../component-slot-dynamic/Nested.svelte      |    7 +
 .../samples/component-slot-dynamic/_config.js |    9 +
 .../component-slot-dynamic/main.svelte        |    9 +
 .../component-slot-each-block/Nested.svelte   |    3 +
 .../component-slot-each-block/_config.js      |   24 +
 .../component-slot-each-block/main.svelte     |   11 +
 .../component-slot-empty-b/Nested.svelte      |    3 +
 .../samples/component-slot-empty-b/_config.js |    3 +
 .../component-slot-empty-b/main.svelte        |    6 +
 .../component-slot-empty/Nested.svelte        |    1 +
 .../samples/component-slot-empty/_config.js   |    3 +
 .../samples/component-slot-empty/main.svelte  |    6 +
 .../component-slot-fallback-2/Inner.svelte    |    7 +
 .../component-slot-fallback-2/Outer.svelte    |    7 +
 .../component-slot-fallback-2/_config.js      |   39 +
 .../component-slot-fallback-2/main.svelte     |   23 +
 .../component-slot-fallback-2/store.svelte    |   23 +
 .../component-slot-fallback-3/Inner.svelte    |    6 +
 .../component-slot-fallback-3/_config.js      |    6 +
 .../component-slot-fallback-3/main.svelte     |    9 +
 .../component-slot-fallback-4/Inner.svelte    |    3 +
 .../component-slot-fallback-4/_config.js      |    5 +
 .../component-slot-fallback-4/main.svelte     |    5 +
 .../component-slot-fallback-5/IconA.svelte    |    1 +
 .../component-slot-fallback-5/IconB.svelte    |    1 +
 .../component-slot-fallback-5/Inner.svelte    |   13 +
 .../component-slot-fallback-5/_config.js      |   31 +
 .../component-slot-fallback-5/main.svelte     |    5 +
 .../component-slot-fallback-6/Foo.svelte      |    1 +
 .../component-slot-fallback-6/Inner.svelte    |    9 +
 .../component-slot-fallback-6/_config.js      |   22 +
 .../component-slot-fallback-6/main.svelte     |    8 +
 .../Nested.svelte                             |    4 +
 .../component-slot-fallback-empty/_config.js  |   13 +
 .../component-slot-fallback-empty/main.svelte |   10 +
 .../component-slot-fallback/Nested.svelte     |    5 +
 .../component-slot-fallback/_config.js        |    9 +
 .../component-slot-fallback/main.svelte       |    7 +
 .../Nested.svelte                             |    3 +
 .../_config.js                                |   16 +
 .../main.svelte                               |   13 +
 .../component-slot-if-block/Nested.svelte     |    3 +
 .../component-slot-if-block/_config.js        |   16 +
 .../component-slot-if-block/main.svelte       |   13 +
 .../Nested.svelte                             |    1 +
 .../_config.js                                |   13 +
 .../main.svelte                               |   15 +
 .../component-slot-let-aliased/Nested.svelte  |    9 +
 .../component-slot-let-aliased/_config.js     |   24 +
 .../component-slot-let-aliased/main.svelte    |    9 +
 .../component-slot-let-b/Nested.svelte        |    6 +
 .../samples/component-slot-let-b/_config.js   |   18 +
 .../samples/component-slot-let-b/main.svelte  |    7 +
 .../component-slot-let-c/Nested.svelte        |    6 +
 .../samples/component-slot-let-c/_config.js   |   18 +
 .../samples/component-slot-let-c/main.svelte  |    7 +
 .../component-slot-let-d/Nested.svelte        |    7 +
 .../samples/component-slot-let-d/_config.js   |   20 +
 .../samples/component-slot-let-d/main.svelte  |    7 +
 .../Nested.svelte                             |    5 +
 .../_config.js                                |   68 +
 .../main.svelte                               |   28 +
 .../Nested.svelte                             |    9 +
 .../_config.js                                |   34 +
 .../main.svelte                               |    9 +
 .../component-slot-let-e/Nested.svelte        |    7 +
 .../samples/component-slot-let-e/_config.js   |   20 +
 .../samples/component-slot-let-e/main.svelte  |    7 +
 .../samples/component-slot-let-f/A.svelte     |    9 +
 .../samples/component-slot-let-f/B.svelte     |    5 +
 .../samples/component-slot-let-f/_config.js   |   15 +
 .../samples/component-slot-let-f/main.svelte  |    8 +
 .../samples/component-slot-let-g/A.svelte     |    5 +
 .../samples/component-slot-let-g/_config.js   |   22 +
 .../samples/component-slot-let-g/main.svelte  |   17 +
 .../Nested.svelte                             |    9 +
 .../component-slot-let-in-binding/_config.js  |   26 +
 .../component-slot-let-in-binding/main.svelte |   11 +
 .../component-slot-let-in-slot-2/Inner.svelte |    1 +
 .../component-slot-let-in-slot-2/Outer.svelte |    5 +
 .../component-slot-let-in-slot-2/_config.js   |   25 +
 .../component-slot-let-in-slot-2/main.svelte  |   11 +
 .../component-slot-let-in-slot/Inner.svelte   |    1 +
 .../component-slot-let-in-slot/Outer.svelte   |    5 +
 .../component-slot-let-in-slot/_config.js     |   12 +
 .../component-slot-let-in-slot/main.svelte    |   10 +
 .../Bar.svelte                                |    5 +
 .../Foo.svelte                                |    1 +
 .../_config.js                                |    5 +
 .../main.svelte                               |   10 +
 .../component-slot-let-named/Nested.svelte    |    9 +
 .../component-slot-let-named/_config.js       |   24 +
 .../component-slot-let-named/main.svelte      |   11 +
 .../component-slot-let-static/Nested.svelte   |    1 +
 .../component-slot-let-static/_config.js      |    3 +
 .../component-slot-let-static/main.svelte     |    7 +
 .../samples/component-slot-let/Nested.svelte  |    9 +
 .../samples/component-slot-let/_config.js     |   24 +
 .../samples/component-slot-let/main.svelte    |    9 +
 .../Nested.svelte                             |    3 +
 .../_config.js                                |    3 +
 .../main.svelte                               |    7 +
 .../component-slot-named-b/Nested.svelte      |    1 +
 .../samples/component-slot-named-b/_config.js |    7 +
 .../component-slot-named-b/main.svelte        |    9 +
 .../component-slot-named-c/Nested.svelte      |    1 +
 .../samples/component-slot-named-c/_config.js |    6 +
 .../component-slot-named-c/main.svelte        |   11 +
 .../Nested.svelte                             |   17 +
 .../_config.js                                |   25 +
 .../main.svelte                               |   17 +
 .../component-slot-named/Nested.svelte        |    5 +
 .../samples/component-slot-named/_config.js   |    9 +
 .../samples/component-slot-named/main.svelte  |   10 +
 .../Nested.svelte                             |    8 +
 .../component-slot-names-sanitized/_config.js |   12 +
 .../main.svelte                               |   12 +
 .../Inner.svelte                              |    3 +
 .../Outer.svelte                              |    3 +
 .../_config.js                                |    6 +
 .../main.svelte                               |    8 +
 .../Nested.svelte                             |    1 +
 .../component-slot-nested-error-2/_config.js  |    3 +
 .../component-slot-nested-error-2/main.svelte |   11 +
 .../Nested.svelte                             |    1 +
 .../component-slot-nested-error-3/_config.js  |    3 +
 .../component-slot-nested-error-3/main.svelte |   11 +
 .../component-slot-nested-error/Nested.svelte |    1 +
 .../component-slot-nested-error/_config.js    |    3 +
 .../component-slot-nested-error/main.svelte   |    9 +
 .../component-slot-nested-if/Display.svelte   |    2 +
 .../component-slot-nested-if/Input.svelte     |    6 +
 .../component-slot-nested-if/_config.js       |   30 +
 .../component-slot-nested-if/main.svelte      |   10 +
 .../One.svelte                                |   11 +
 .../Two.svelte                                |    1 +
 .../_config.js                                |    9 +
 .../main.svelte                               |    7 +
 .../component-slot-nested-in-slot/One.svelte  |    8 +
 .../component-slot-nested-in-slot/Two.svelte  |    4 +
 .../component-slot-nested-in-slot/_config.js  |   18 +
 .../component-slot-nested-in-slot/main.svelte |    9 +
 .../component-slot-nested/Nested.svelte       |    5 +
 .../samples/component-slot-nested/_config.js  |    6 +
 .../samples/component-slot-nested/main.svelte |    7 +
 .../component-slot-slot/Component.svelte      |    3 +
 .../component-slot-slot/Forward.svelte        |    7 +
 .../samples/component-slot-slot/_config.js    |    3 +
 .../samples/component-slot-slot/main.svelte   |    9 +
 .../component-slot-spread-props/Nested.svelte |    4 +
 .../component-slot-spread-props/_config.js    |   25 +
 .../component-slot-spread-props/main.svelte   |    8 +
 .../component-slot-spread/Nested.svelte       |    7 +
 .../samples/component-slot-spread/_config.js  |   55 +
 .../samples/component-slot-spread/main.svelte |   14 +
 .../Nested.svelte                             |    4 +
 .../_config.js                                |   19 +
 .../main.svelte                               |   11 +
 .../Nested.svelte                             |    7 +
 .../_config.js                                |    3 +
 .../main.svelte                               |    7 +
 .../component-slot-warning/Nested.svelte      |    1 +
 .../samples/component-slot-warning/_config.js |    8 +
 .../component-slot-warning/main.svelte        |    7 +
 .../component-static-at-symbol/Email.svelte   |    5 +
 .../component-static-at-symbol/_config.js     |    3 +
 .../component-static-at-symbol/main.svelte    |    5 +
 .../component-svelte-slot-2/Nested.svelte     |    1 +
 .../component-svelte-slot-2/_config.js        |    6 +
 .../component-svelte-slot-2/main.svelte       |   15 +
 .../Nested.svelte                             |    9 +
 .../_config.js                                |   24 +
 .../main.svelte                               |   11 +
 .../component-svelte-slot-let-b/Nested.svelte |    6 +
 .../component-svelte-slot-let-b/_config.js    |   18 +
 .../component-svelte-slot-let-b/main.svelte   |    9 +
 .../component-svelte-slot-let-c/Nested.svelte |    6 +
 .../component-svelte-slot-let-c/_config.js    |   18 +
 .../component-svelte-slot-let-c/main.svelte   |    9 +
 .../component-svelte-slot-let-d/Nested.svelte |    7 +
 .../component-svelte-slot-let-d/_config.js    |   20 +
 .../component-svelte-slot-let-d/main.svelte   |    9 +
 .../Nested.svelte                             |    5 +
 .../_config.js                                |   68 +
 .../main.svelte                               |   34 +
 .../Nested.svelte                             |    9 +
 .../_config.js                                |   34 +
 .../main.svelte                               |   11 +
 .../component-svelte-slot-let-e/A.svelte      |   11 +
 .../component-svelte-slot-let-e/B.svelte      |    5 +
 .../component-svelte-slot-let-e/_config.js    |   19 +
 .../component-svelte-slot-let-e/main.svelte   |   16 +
 .../component-svelte-slot-let-f/A.svelte      |    5 +
 .../component-svelte-slot-let-f/_config.js    |   22 +
 .../component-svelte-slot-let-f/main.svelte   |   17 +
 .../Nested.svelte                             |    9 +
 .../_config.js                                |   26 +
 .../main.svelte                               |   13 +
 .../Inner.svelte                              |    1 +
 .../Outer.svelte                              |    5 +
 .../_config.js                                |   12 +
 .../main.svelte                               |   16 +
 .../Nested.svelte                             |    9 +
 .../_config.js                                |   24 +
 .../main.svelte                               |   11 +
 .../Nested.svelte                             |    1 +
 .../_config.js                                |    3 +
 .../main.svelte                               |    7 +
 .../component-svelte-slot-let/Nested.svelte   |    9 +
 .../component-svelte-slot-let/_config.js      |   24 +
 .../component-svelte-slot-let/main.svelte     |    9 +
 .../component-svelte-slot-nested/Child.svelte |   15 +
 .../Nested.svelte                             |    1 +
 .../component-svelte-slot-nested/_config.js   |    6 +
 .../component-svelte-slot-nested/main.svelte  |   12 +
 .../samples/component-svelte-slot/B.svelte    |    6 +
 .../component-svelte-slot/Nested.svelte       |    2 +
 .../samples/component-svelte-slot/_config.js  |    6 +
 .../samples/component-svelte-slot/main.svelte |   13 +
 .../Widget.svelte                             |    5 +
 .../_config.js                                |   14 +
 .../main.svelte                               |    6 +
 .../Foo.svelte                                |    2 +
 .../_config.js                                |    6 +
 .../main.svelte                               |    5 +
 .../samples/component-yield-if/Widget.svelte  |    9 +
 .../samples/component-yield-if/_config.js     |   24 +
 .../samples/component-yield-if/main.svelte    |   10 +
 .../Widget.svelte                             |    1 +
 .../_config.js                                |   17 +
 .../main.svelte                               |    9 +
 .../Widget.svelte                             |    1 +
 .../component-yield-multiple-in-if/_config.js |   10 +
 .../main.svelte                               |   13 +
 .../component-yield-nested-if/Inner.svelte    |    1 +
 .../component-yield-nested-if/Outer.svelte    |    7 +
 .../component-yield-nested-if/_config.js      |   14 +
 .../component-yield-nested-if/main.svelte     |   11 +
 .../component-yield-parent/Widget.svelte      |    1 +
 .../samples/component-yield-parent/_config.js |   15 +
 .../component-yield-parent/main.svelte        |    8 +
 .../component-yield-placement/Modal.svelte    |   12 +
 .../component-yield-placement/_config.js      |   25 +
 .../component-yield-placement/main.svelte     |   13 +
 .../component-yield-static/Widget.svelte      |    1 +
 .../samples/component-yield-static/_config.js |   12 +
 .../component-yield-static/main.svelte        |    7 +
 .../samples/component-yield/_config.js        |    6 +
 .../samples/component-yield/main.svelte       |   10 +
 test/runtime/samples/component/Widget.svelte  |    1 +
 test/runtime/samples/component/_config.js     |    3 +
 test/runtime/samples/component/main.svelte    |    7 +
 .../_config.js                                |   19 +
 .../main.svelte                               |   23 +
 .../samples/const-tag-await-then/_config.js   |   19 +
 .../samples/const-tag-await-then/main.svelte  |   23 +
 .../Component.svelte                          |    2 +
 .../_config.js                                |   15 +
 .../main.svelte                               |   24 +
 .../const-tag-component/Component.svelte      |    7 +
 .../samples/const-tag-component/_config.js    |   46 +
 .../samples/const-tag-component/main.svelte   |   60 +
 .../samples/const-tag-dependencies/_config.js |   12 +
 .../const-tag-dependencies/main.svelte        |   10 +
 .../samples/const-tag-each-arrow/_config.js   |   47 +
 .../samples/const-tag-each-arrow/main.svelte  |   21 +
 .../samples/const-tag-each-const/_config.js   |   29 +
 .../samples/const-tag-each-const/main.svelte  |   26 +
 .../const-tag-each-destructure/_config.js     |   30 +
 .../const-tag-each-destructure/main.svelte    |   19 +
 .../_config.js                                |   29 +
 .../main.svelte                               |   19 +
 .../_config.js                                |   32 +
 .../main.svelte                               |   33 +
 .../_config.js                                |   29 +
 .../main.svelte                               |   25 +
 .../samples/const-tag-each-else/_config.js    |   26 +
 .../samples/const-tag-each-else/main.svelte   |   22 +
 .../const-tag-each-function/_config.js        |   29 +
 .../const-tag-each-function/main.svelte       |   26 +
 .../runtime/samples/const-tag-each/_config.js |   30 +
 .../samples/const-tag-each/main.svelte        |   19 +
 .../samples/const-tag-hoisting/_config.js     |   12 +
 .../samples/const-tag-hoisting/main.svelte    |   11 +
 .../samples/const-tag-if-else-if/_config.js   |   56 +
 .../samples/const-tag-if-else-if/main.svelte  |   24 +
 .../const-tag-if-else-outro/_config.js        |   57 +
 .../const-tag-if-else-outro/main.svelte       |   29 +
 .../samples/const-tag-if-else/_config.js      |   43 +
 .../samples/const-tag-if-else/main.svelte     |   18 +
 test/runtime/samples/const-tag-if/_config.js  |   28 +
 test/runtime/samples/const-tag-if/main.svelte |    9 +
 .../samples/const-tag-ordering/_config.js     |   12 +
 .../samples/const-tag-ordering/main.svelte    |   11 +
 .../samples/const-tag-shadow-2/_config.js     |   37 +
 .../samples/const-tag-shadow-2/main.svelte    |   15 +
 .../samples/const-tag-shadow/_config.js       |   43 +
 .../samples/const-tag-shadow/main.svelte      |   31 +
 .../constructor-pass-context/Component.svelte |    9 +
 .../constructor-pass-context/_config.js       |   32 +
 .../constructor-pass-context/main.svelte      |    0
 .../ChildComponent.svelte                     |    6 +
 .../_config.js                                |    6 +
 .../main.svelte                               |   15 +
 .../runtime/samples/context-api-b/Leaf.svelte |    8 +
 .../samples/context-api-b/Nested.svelte       |   10 +
 test/runtime/samples/context-api-b/_config.js |    6 +
 .../runtime/samples/context-api-b/main.svelte |   13 +
 .../runtime/samples/context-api-c/Leaf.svelte |    7 +
 .../samples/context-api-c/Nested.svelte       |   11 +
 test/runtime/samples/context-api-c/_config.js |    6 +
 .../runtime/samples/context-api-c/main.svelte |   12 +
 .../runtime/samples/context-api-d/Leaf.svelte |    9 +
 .../samples/context-api-d/Nested.svelte       |    8 +
 test/runtime/samples/context-api-d/_config.js |    7 +
 .../runtime/samples/context-api-d/main.svelte |    8 +
 test/runtime/samples/context-api/Tab.svelte   |   17 +
 .../samples/context-api/TabList.svelte        |    3 +
 .../samples/context-api/TabPanel.svelte       |   16 +
 test/runtime/samples/context-api/Tabs.svelte  |   52 +
 test/runtime/samples/context-api/_config.js   |   73 +
 test/runtime/samples/context-api/main.svelte  |   30 +
 .../samples/context-in-await/Child.svelte     |    6 +
 .../samples/context-in-await/_config.js       |   13 +
 .../samples/context-in-await/main.svelte      |   14 +
 .../context-setcontext-return/_config.js      |    5 +
 .../context-setcontext-return/main.svelte     |    7 +
 .../samples/contextual-callback-b/_config.js  |   12 +
 .../samples/contextual-callback-b/main.svelte |   11 +
 .../samples/contextual-callback/Widget.svelte |    7 +
 .../samples/contextual-callback/_config.js    |   12 +
 .../samples/contextual-callback/main.svelte   |    9 +
 test/runtime/samples/css-comments/_config.js  |    7 +
 test/runtime/samples/css-comments/main.svelte |   11 +
 test/runtime/samples/css-false/Widget.svelte  |    7 +
 test/runtime/samples/css-false/_config.js     |   12 +
 test/runtime/samples/css-false/main.svelte    |    6 +
 .../css-space-in-attribute/Widget.svelte      |   11 +
 .../samples/css-space-in-attribute/_config.js |   11 +
 .../css-space-in-attribute/main.svelte        |    6 +
 test/runtime/samples/css/Widget.svelte        |    7 +
 test/runtime/samples/css/_config.js           |    8 +
 test/runtime/samples/css/main.svelte          |    6 +
 test/runtime/samples/custom-method/_config.js |   27 +
 .../runtime/samples/custom-method/main.svelte |   15 +
 .../samples/deconflict-anchor/Anchor.svelte   |    1 +
 .../samples/deconflict-anchor/_config.js      |    4 +
 .../samples/deconflict-anchor/main.svelte     |    5 +
 .../deconflict-block-methods/_config.js       |    6 +
 .../deconflict-block-methods/main.svelte      |    5 +
 .../samples/deconflict-builtins-2/_config.js  |    4 +
 .../samples/deconflict-builtins-2/main.svelte |    6 +
 .../samples/deconflict-builtins/_config.js    |    7 +
 .../samples/deconflict-builtins/get.js        |    3 +
 .../samples/deconflict-builtins/main.svelte   |    7 +
 .../_config.js                                |    9 +
 .../main.svelte                               |    5 +
 .../_config.js                                |    9 +
 .../main.svelte                               |    5 +
 .../deconflict-component-refs/_config.js      |   25 +
 .../deconflict-component-refs/main.svelte     |   16 +
 .../samples/deconflict-contexts/_config.js    |    9 +
 .../samples/deconflict-contexts/main.svelte   |    9 +
 .../deconflict-contextual-action/_config.js   |   13 +
 .../deconflict-contextual-action/main.svelte  |   17 +
 .../deconflict-contextual-action/util.js      |    3 +
 .../deconflict-contextual-bind/Widget.svelte  |    3 +
 .../deconflict-contextual-bind/_config.js     |    3 +
 .../deconflict-contextual-bind/main.svelte    |    8 +
 .../runtime/samples/deconflict-ctx/_config.js |    5 +
 .../samples/deconflict-ctx/main.svelte        |    5 +
 .../deconflict-elements-indexes/_config.js    |   22 +
 .../deconflict-elements-indexes/main.svelte   |   15 +
 .../samples/deconflict-globals/_config.js     |   14 +
 .../samples/deconflict-globals/main.svelte    |   20 +
 .../samples/deconflict-non-helpers/_config.js |    7 +
 .../deconflict-non-helpers/main.svelte        |   14 +
 .../samples/deconflict-non-helpers/module.js  |    4 +
 .../samples/deconflict-self/_config.js        |    3 +
 .../samples/deconflict-self/main.svelte       |    5 +
 .../deconflict-self/nested/main.svelte        |    1 +
 .../samples/deconflict-spread-i/_config.js    |    3 +
 .../samples/deconflict-spread-i/main.svelte   |    5 +
 .../samples/deconflict-template-1/_config.js  |    3 +
 .../samples/deconflict-template-1/main.svelte |    7 +
 .../samples/deconflict-template-1/module.js   |    1 +
 .../samples/deconflict-template-2/_config.js  |    3 +
 .../samples/deconflict-template-2/main.svelte |    9 +
 .../samples/deconflict-value/Widget.svelte    |    3 +
 .../samples/deconflict-value/_config.js       |    6 +
 .../samples/deconflict-value/main.svelte      |    9 +
 .../samples/deconflict-vars/_config.js        |    3 +
 .../samples/deconflict-vars/main.svelte       |   20 +
 .../samples/default-data-function/_config.js  |    8 +
 .../samples/default-data-function/main.svelte |    5 +
 .../samples/default-data-override/_config.js  |    7 +
 .../samples/default-data-override/main.svelte |    5 +
 test/runtime/samples/default-data/_config.js  |    3 +
 test/runtime/samples/default-data/main.svelte |    5 +
 test/runtime/samples/destroy-twice/_config.js |    6 +
 .../runtime/samples/destroy-twice/main.svelte |    1 +
 .../_config.js                                |    6 +
 .../main.svelte                               |   11 +
 .../samples/destructured-props-1/A.svelte     |   24 +
 .../samples/destructured-props-1/_config.js   |    9 +
 .../samples/destructured-props-1/main.svelte  |    7 +
 .../samples/destructured-props-2/A.svelte     |   21 +
 .../samples/destructured-props-2/_config.js   |   19 +
 .../samples/destructured-props-2/main.svelte  |   30 +
 .../samples/destructured-props-3/A.svelte     |   10 +
 .../samples/destructured-props-3/_config.js   |   15 +
 .../samples/destructured-props-3/main.svelte  |   29 +
 .../destructuring-assignment-array/_config.js |   23 +
 .../main.svelte                               |   18 +
 .../destructuring-between-exports/_config.js  |    8 +
 .../destructuring-between-exports/main.svelte |    7 +
 test/runtime/samples/destructuring/_config.js |   25 +
 .../runtime/samples/destructuring/main.svelte |    9 +
 .../dev-warning-destroy-twice/_config.js      |   23 +
 .../dev-warning-destroy-twice/main.svelte     |    1 +
 .../_config.js                                |    6 +
 .../main.svelte                               |    7 +
 .../_config.js                                |    6 +
 .../main.svelte                               |    3 +
 .../samples/dev-warning-helper/_config.js     |   13 +
 .../samples/dev-warning-helper/main.svelte    |    9 +
 .../_config.js                                |    9 +
 .../main.svelte                               |    6 +
 .../Foo.svelte                                |    7 +
 .../_config.js                                |    9 +
 .../main.svelte                               |    5 +
 .../dev-warning-missing-data-each/_config.js  |   24 +
 .../dev-warning-missing-data-each/main.svelte |    7 +
 .../_config.js                                |    7 +
 .../main.svelte                               |    1 +
 .../_config.js                                |    7 +
 .../main.svelte                               |    7 +
 .../dev-warning-missing-data/_config.js       |   10 +
 .../dev-warning-missing-data/main.svelte      |    9 +
 .../dev-warning-readonly-computed/_config.js  |   18 +
 .../dev-warning-readonly-computed/main.svelte |    7 +
 .../_config.js                                |   14 +
 .../main.svelte                               |    5 +
 .../dev-warning-unknown-props-2/Foo.svelte    |    1 +
 .../dev-warning-unknown-props-2/_config.js    |    9 +
 .../dev-warning-unknown-props-2/main.svelte   |    5 +
 .../Foo.svelte                                |    7 +
 .../_config.js                                |    7 +
 .../main.svelte                               |    5 +
 .../Foo.svelte                                |    7 +
 .../_config.js                                |    7 +
 .../main.svelte                               |    5 +
 .../Foo.svelte                                |    6 +
 .../_config.js                                |    7 +
 .../main.svelte                               |    7 +
 .../dev-warning-unknown-props/Foo.svelte      |    5 +
 .../dev-warning-unknown-props/_config.js      |    9 +
 .../dev-warning-unknown-props/main.svelte     |    5 +
 .../runtime/samples/document-event/_config.js |   13 +
 .../samples/document-event/main.svelte        |    9 +
 .../Green.svelte                              |    5 +
 .../Red.svelte                                |    5 +
 .../_config.js                                |   28 +
 .../main.svelte                               |   10 +
 .../Green.svelte                              |    5 +
 .../Red.svelte                                |    5 +
 .../_config.js                                |   25 +
 .../main.svelte                               |    9 +
 .../dynamic-component-bindings/Bar.svelte     |    6 +
 .../dynamic-component-bindings/Foo.svelte     |    6 +
 .../dynamic-component-bindings/_config.js     |   31 +
 .../dynamic-component-bindings/main.svelte    |   10 +
 .../dynamic-component-destroy-null/_config.js |    9 +
 .../main.svelte                               |    7 +
 .../dynamic-component-events/Bar.svelte       |    7 +
 .../dynamic-component-events/Foo.svelte       |    7 +
 .../dynamic-component-events/_config.js       |   25 +
 .../dynamic-component-events/main.svelte      |    9 +
 .../dynamic-component-in-if/Bar.svelte        |    1 +
 .../dynamic-component-in-if/Foo.svelte        |    1 +
 .../dynamic-component-in-if/_config.js        |   13 +
 .../dynamic-component-in-if/main.svelte       |   11 +
 .../Bar.svelte                                |    5 +
 .../Foo.svelte                                |    5 +
 .../_config.js                                |   17 +
 .../main.svelte                               |   10 +
 .../_config.js                                |    5 +
 .../main.svelte                               |    7 +
 .../dynamic-component-nulled-out/Foo.svelte   |    1 +
 .../dynamic-component-nulled-out/_config.js   |   19 +
 .../dynamic-component-nulled-out/main.svelte  |    7 +
 .../samples/dynamic-component-ref/Foo.svelte  |    1 +
 .../samples/dynamic-component-ref/_config.js  |    7 +
 .../samples/dynamic-component-ref/main.svelte |    7 +
 .../samples/dynamic-component-slot/Bar.svelte |    3 +
 .../samples/dynamic-component-slot/Baz.svelte |    1 +
 .../samples/dynamic-component-slot/Foo.svelte |    3 +
 .../samples/dynamic-component-slot/_config.js |   35 +
 .../dynamic-component-slot/main.svelte        |   35 +
 .../Bar.svelte                                |    5 +
 .../Foo.svelte                                |    5 +
 .../_config.js                                |   17 +
 .../main.svelte                               |    8 +
 .../samples/dynamic-component/Bar.svelte      |    5 +
 .../samples/dynamic-component/Foo.svelte      |    5 +
 .../samples/dynamic-component/_config.js      |   17 +
 .../samples/dynamic-component/main.svelte     |    8 +
 .../dynamic-element-action-update/_config.js  |   45 +
 .../dynamic-element-action-update/main.svelte |   14 +
 .../dynamic-element-animation-2/_config.js    |  105 +
 .../dynamic-element-animation-2/main.svelte   |   26 +
 .../dynamic-element-animation/_config.js      |   62 +
 .../dynamic-element-animation/main.svelte     |   18 +
 .../_config.js                                |   15 +
 .../main.svelte                               |    5 +
 .../_config.js                                |   23 +
 .../main.svelte                               |    9 +
 .../dynamic-element-attribute/_config.js      |   17 +
 .../dynamic-element-attribute/main.svelte     |    5 +
 .../_config.js                                |    3 +
 .../main.svelte                               |    6 +
 .../dynamic-element-binding-this/_config.js   |    8 +
 .../dynamic-element-binding-this/main.svelte  |    6 +
 .../dynamic-element-change-tag/_config.js     |   17 +
 .../dynamic-element-change-tag/main.svelte    |    5 +
 .../Link.svelte                               |   13 +
 .../_config.js                                |   11 +
 .../main.svelte                               |   16 +
 .../dynamic-element-empty-tag/_config.js      |    3 +
 .../dynamic-element-empty-tag/main.svelte     |    5 +
 .../dynamic-element-event-handler1/_config.js |   21 +
 .../main.svelte                               |    6 +
 .../dynamic-element-event-handler2/_config.js |   23 +
 .../main.svelte                               |    6 +
 .../dynamic-element-expression/_config.js     |    3 +
 .../dynamic-element-expression/main.svelte    |    1 +
 .../dynamic-element-invalid-this/_config.js   |    9 +
 .../dynamic-element-invalid-this/main.svelte  |    5 +
 .../dynamic-element-null-tag/_config.js       |    3 +
 .../dynamic-element-null-tag/main.svelte      |    5 +
 .../dynamic-element-pass-props/_config.js     |   16 +
 .../dynamic-element-pass-props/main.svelte    |    6 +
 .../samples/dynamic-element-slot/Foo.svelte   |    7 +
 .../samples/dynamic-element-slot/_config.js   |   29 +
 .../samples/dynamic-element-slot/main.svelte  |   10 +
 .../samples/dynamic-element-store/_config.js  |    3 +
 .../samples/dynamic-element-store/main.svelte |    6 +
 .../samples/dynamic-element-string/_config.js |    3 +
 .../dynamic-element-string/main.svelte        |    1 +
 .../_config.js                                |   21 +
 .../main.svelte                               |    5 +
 .../dynamic-element-transition/_config.js     |   17 +
 .../dynamic-element-transition/main.svelte    |   17 +
 .../dynamic-element-undefined-tag/_config.js  |   19 +
 .../dynamic-element-undefined-tag/main.svelte |    5 +
 .../dynamic-element-variable/_config.js       |   20 +
 .../dynamic-element-variable/main.svelte      |    6 +
 .../dynamic-element-void-tag/_config.js       |   12 +
 .../dynamic-element-void-tag/main.svelte      |   12 +
 .../_config.js                                |    9 +
 .../main.svelte                               |    5 +
 .../_config.js                                |    9 +
 .../main.svelte                               |    5 +
 .../Nested.svelte                             |    1 +
 .../_config.js                                |    9 +
 .../main.svelte                               |    6 +
 .../Nested.svelte                             |    1 +
 .../_config.js                                |    6 +
 .../main.svelte                               |    6 +
 .../samples/each-block-after-let/Child.svelte |    5 +
 .../samples/each-block-after-let/_config.js   |    7 +
 .../samples/each-block-after-let/main.svelte  |   16 +
 .../each-block-array-literal/_config.js       |   19 +
 .../each-block-array-literal/main.svelte      |    7 +
 .../Child.svelte                              |    1 +
 .../each-block-component-no-props/_config.js  |   16 +
 .../each-block-component-no-props/main.svelte |   17 +
 .../Nested.svelte                             |   10 +
 .../_config.js                                |   32 +
 .../main.svelte                               |   10 +
 .../each-block-containing-if/_config.js       |   12 +
 .../each-block-containing-if/main.svelte      |   22 +
 .../_config.js                                |   30 +
 .../main.svelte                               |    7 +
 .../_config.js                                |   20 +
 .../main.svelte                               |    7 +
 .../each-block-destructured-array/_config.js  |   20 +
 .../each-block-destructured-array/main.svelte |    7 +
 .../_config.js                                |    5 +
 .../main.svelte                               |    7 +
 .../_config.js                                |   23 +
 .../main.svelte                               |    7 +
 .../_config.js                                |   26 +
 .../main.svelte                               |    8 +
 .../_config.js                                |   45 +
 .../main.svelte                               |    9 +
 .../_config.js                                |    5 +
 .../main.svelte                               |    7 +
 .../_config.js                                |   20 +
 .../main.svelte                               |    7 +
 .../each-block-destructured-object/_config.js |   20 +
 .../main.svelte                               |    7 +
 .../each-block-dynamic-else-static/_config.js |   32 +
 .../main.svelte                               |    9 +
 .../samples/each-block-else-in-if/_config.js  |   17 +
 .../samples/each-block-else-in-if/main.svelte |   14 +
 .../Widget.svelte                             |    1 +
 .../each-block-else-mount-or-intro/_config.js |    4 +
 .../main.svelte                               |   11 +
 .../each-block-else-starts-empty/_config.js   |   21 +
 .../each-block-else-starts-empty/main.svelte  |   12 +
 .../samples/each-block-else/_config.js        |   37 +
 .../samples/each-block-else/main.svelte       |   12 +
 .../each-block-empty-outro/Thing.svelte       |    5 +
 .../samples/each-block-empty-outro/_config.js |   18 +
 .../each-block-empty-outro/main.svelte        |   16 +
 .../samples/each-block-function/_config.js    |   15 +
 .../samples/each-block-function/main.svelte   |    7 +
 .../samples/each-block-in-if-block/_config.js |   13 +
 .../each-block-in-if-block/main.svelte        |   11 +
 .../samples/each-block-index-only/_config.js  |   23 +
 .../samples/each-block-index-only/main.svelte |    7 +
 .../samples/each-block-indexed/_config.js     |    6 +
 .../samples/each-block-indexed/main.svelte    |    7 +
 .../each-block-keyed-bind-group/_config.js    |   65 +
 .../each-block-keyed-bind-group/main.svelte   |   21 +
 .../each-block-keyed-changed/_config.js       |   13 +
 .../each-block-keyed-changed/main.svelte      |    8 +
 .../Component.svelte                          |    5 +
 .../_config.js                                |   21 +
 .../main.svelte                               |   17 +
 .../each-block-keyed-dyanmic-key/_config.js   |   31 +
 .../each-block-keyed-dyanmic-key/main.svelte  |    8 +
 .../each-block-keyed-dynamic-2/_config.js     |   23 +
 .../each-block-keyed-dynamic-2/main.svelte    |   20 +
 .../each-block-keyed-dynamic/_config.js       |   31 +
 .../each-block-keyed-dynamic/main.svelte      |    7 +
 .../samples/each-block-keyed-else/_config.js  |   37 +
 .../samples/each-block-keyed-else/main.svelte |   12 +
 .../samples/each-block-keyed-empty/_config.js |    7 +
 .../each-block-keyed-empty/main.svelte        |    5 +
 .../each-block-keyed-html-b/_config.js        |   14 +
 .../each-block-keyed-html-b/main.svelte       |   11 +
 .../samples/each-block-keyed-html/_config.js  |   10 +
 .../samples/each-block-keyed-html/main.svelte |    8 +
 .../samples/each-block-keyed-iife/_config.js  |    7 +
 .../samples/each-block-keyed-iife/main.svelte |    9 +
 .../_config.js                                |   18 +
 .../main.svelte                               |   16 +
 .../each-block-keyed-nested/Child.svelte      |    5 +
 .../each-block-keyed-nested/_config.js        |   16 +
 .../each-block-keyed-nested/main.svelte       |   16 +
 .../each-block-keyed-non-prop/_config.js      |   29 +
 .../each-block-keyed-non-prop/main.svelte     |    7 +
 .../_config.js                                |   25 +
 .../main.svelte                               |    7 +
 .../_config.js                                |   62 +
 .../main.svelte                               |    7 +
 .../each-block-keyed-recursive/_config.js     |   25 +
 .../each-block-keyed-recursive/main.svelte    |   12 +
 .../each-block-keyed-shift/Nested.svelte      |    5 +
 .../samples/each-block-keyed-shift/_config.js |   27 +
 .../each-block-keyed-shift/main.svelte        |    9 +
 .../each-block-keyed-siblings/_config.js      |   20 +
 .../each-block-keyed-siblings/main.svelte     |   12 +
 .../each-block-keyed-static/_config.js        |   10 +
 .../each-block-keyed-static/main.svelte       |    7 +
 .../each-block-keyed-unshift/Nested.svelte    |    5 +
 .../each-block-keyed-unshift/_config.js       |   20 +
 .../each-block-keyed-unshift/main.svelte      |    9 +
 .../samples/each-block-keyed/_config.js       |   27 +
 .../samples/each-block-keyed/main.svelte      |    7 +
 .../each-block-random-permute/_config.js      |   33 +
 .../each-block-random-permute/main.svelte     |    7 +
 .../_config.js                                |    8 +
 .../main.svelte                               |   13 +
 .../each-block-scope-shadow-bind-2/_config.js |   23 +
 .../main.svelte                               |   10 +
 .../each-block-scope-shadow-bind-3/_config.js |  105 +
 .../main.svelte                               |   14 +
 .../each-block-scope-shadow-bind-4/_config.js |   64 +
 .../main.svelte                               |   14 +
 .../each-block-scope-shadow-bind/_config.js   |   23 +
 .../each-block-scope-shadow-bind/main.svelte  |   10 +
 .../each-block-scope-shadow-self/_config.js   |   13 +
 .../each-block-scope-shadow-self/main.svelte  |   15 +
 .../each-block-scope-shadow/_config.js        |    3 +
 .../each-block-scope-shadow/main.svelte       |   10 +
 .../samples/each-block-static/_config.js      |   12 +
 .../samples/each-block-static/main.svelte     |    7 +
 .../samples/each-block-string/_config.js      |   10 +
 .../samples/each-block-string/main.svelte     |    3 +
 .../samples/each-block-text-node/_config.js   |   14 +
 .../samples/each-block-text-node/main.svelte  |    7 +
 .../each-block-unkeyed-else-2/_config.js      |   37 +
 .../each-block-unkeyed-else-2/main.svelte     |   12 +
 test/runtime/samples/each-block/_config.js    |   24 +
 test/runtime/samples/each-block/main.svelte   |    7 +
 .../each-blocks-assignment-2/_config.js       |   20 +
 .../each-blocks-assignment-2/main.svelte      |   12 +
 .../samples/each-blocks-assignment/_config.js |   97 +
 .../each-blocks-assignment/main.svelte        |   13 +
 .../samples/each-blocks-expression/_config.js |    3 +
 .../each-blocks-expression/main.svelte        |    3 +
 .../samples/each-blocks-nested-b/_config.js   |   35 +
 .../samples/each-blocks-nested-b/main.svelte  |    9 +
 .../samples/each-blocks-nested/_config.js     |   11 +
 .../samples/each-blocks-nested/main.svelte    |   10 +
 .../samples/element-invalid-name/_config.js   |    5 +
 .../samples/element-invalid-name/main.svelte  |    1 +
 .../element-source-location/Foo.svelte        |    3 +
 .../element-source-location/_config.js        |   26 +
 .../element-source-location/main.svelte       |    6 +
 test/runtime/samples/empty-dom/_config.js     |    3 +
 test/runtime/samples/empty-dom/main.svelte    |    3 +
 .../samples/empty-style-block/_config.js      |    3 +
 .../samples/empty-style-block/main.svelte     |    1 +
 .../escape-template-literals/Widget.svelte    |    5 +
 .../escape-template-literals/_config.js       |    3 +
 .../escape-template-literals/main.svelte      |    7 +
 test/runtime/samples/escaped-text/_config.js  |   29 +
 test/runtime/samples/escaped-text/main.svelte |   25 +
 .../samples/event-handler-async/_config.js    |    5 +
 .../samples/event-handler-async/main.svelte   |    1 +
 .../event-handler-console-log/_config.js      |   23 +
 .../event-handler-console-log/main.svelte     |    5 +
 .../event-handler-deconflicted/_config.js     |   11 +
 .../event-handler-deconflicted/main.svelte    |    6 +
 .../event-handler-destructured/_config.js     |   15 +
 .../event-handler-destructured/main.svelte    |   16 +
 .../event-handler-dynamic-2/_config.js        |   33 +
 .../event-handler-dynamic-2/main.svelte       |   20 +
 .../Nested.svelte                             |    7 +
 .../_config.js                                |   20 +
 .../main.svelte                               |    8 +
 .../_config.js                                |   20 +
 .../main.svelte                               |   12 +
 .../event-handler-dynamic-hash/_config.js     |   56 +
 .../event-handler-dynamic-hash/main.svelte    |   23 +
 .../event-handler-dynamic-invalid/_config.js  |   28 +
 .../event-handler-dynamic-invalid/main.svelte |   13 +
 .../_config.js                                |   16 +
 .../main.svelte                               |    7 +
 .../_config.js                                |   16 +
 .../main.svelte                               |   11 +
 .../_config.js                                |   16 +
 .../main.svelte                               |   13 +
 .../_config.js                                |   19 +
 .../main.svelte                               |   20 +
 .../event-handler-dynamic-multiple/_config.js |   14 +
 .../main.svelte                               |   11 +
 .../samples/event-handler-dynamic/_config.js  |   56 +
 .../samples/event-handler-dynamic/main.svelte |   23 +
 .../_config.js                                |   35 +
 .../main.svelte                               |   15 +
 .../event-handler-each-context/_config.js     |   21 +
 .../event-handler-each-context/main.svelte    |   11 +
 .../_config.js                                |   34 +
 .../main.svelte                               |   15 +
 .../event-handler-each-modifier/_config.js    |   42 +
 .../event-handler-each-modifier/main.svelte   |   37 +
 .../event-handler-each-this/_config.js        |   28 +
 .../event-handler-each-this/main.svelte       |   11 +
 .../samples/event-handler-each/_config.js     |   30 +
 .../samples/event-handler-each/main.svelte    |   10 +
 .../event-handler-event-methods/_config.js    |   12 +
 .../event-handler-event-methods/main.svelte   |   12 +
 .../samples/event-handler-hoisted/_config.js  |   18 +
 .../samples/event-handler-hoisted/main.svelte |   14 +
 .../_config.js                                |   11 +
 .../main.svelte                               |    5 +
 .../event-handler-modifier-once/_config.js    |   16 +
 .../event-handler-modifier-once/main.svelte   |    5 +
 .../_config.js                                |   16 +
 .../main.svelte                               |    9 +
 .../event-handler-modifier-self/_config.js    |   16 +
 .../event-handler-modifier-self/main.svelte   |   11 +
 .../_config.js                                |   19 +
 .../main.svelte                               |   16 +
 .../event-handler-modifier-trusted/_config.js |    9 +
 .../main.svelte                               |    5 +
 .../samples/event-handler-multiple/_config.js |   14 +
 .../event-handler-multiple/main.svelte        |    6 +
 .../samples/event-handler-removal/_config.js  |   20 +
 .../samples/event-handler-removal/main.svelte |    9 +
 .../samples/event-handler-sanitize/_config.js |   21 +
 .../event-handler-sanitize/main.svelte        |    9 +
 .../Widget.svelte                             |    7 +
 .../_config.js                                |   18 +
 .../main.svelte                               |    5 +
 .../Widget.svelte                             |    7 +
 .../_config.js                                |   18 +
 .../main.svelte                               |    5 +
 .../_config.js                                |   18 +
 .../main.svelte                               |    1 +
 .../event-handler-this-methods/_config.js     |   16 +
 .../event-handler-this-methods/main.svelte    |    2 +
 test/runtime/samples/event-handler/_config.js |   21 +
 .../runtime/samples/event-handler/main.svelte |    9 +
 test/runtime/samples/export-from/A.svelte     |   23 +
 test/runtime/samples/export-from/B.svelte     |    8 +
 test/runtime/samples/export-from/_config.js   |   28 +
 test/runtime/samples/export-from/main.svelte  |   21 +
 .../export-function-hoisting/_config.js       |    3 +
 .../export-function-hoisting/main.svelte      |   11 +
 .../flush-before-bindings/Nested.svelte       |   18 +
 .../flush-before-bindings/Visibility.svelte   |   13 +
 .../samples/flush-before-bindings/_config.js  |   23 +
 .../samples/flush-before-bindings/counter.js  |    3 +
 .../samples/flush-before-bindings/main.svelte |   18 +
 .../fragment-trailing-whitespace/_config.js   |   16 +
 .../fragment-trailing-whitespace/main.svelte  |   11 +
 .../function-expression-inline/_config.js     |   22 +
 .../function-expression-inline/main.svelte    |   13 +
 .../samples/function-hoisting/_config.js      |    7 +
 .../samples/function-hoisting/main.svelte     |   15 +
 .../samples/function-in-expression/_config.js |   13 +
 .../function-in-expression/main.svelte        |    5 +
 .../samples/get-after-destroy/_config.js      |   13 +
 .../samples/get-after-destroy/main.svelte     |    5 +
 .../_config.js                                |   11 +
 .../main.svelte                               |    1 +
 .../globals-accessible-directly/_config.js    |    7 +
 .../globals-accessible-directly/main.svelte   |    1 +
 .../globals-not-dereferenced/_config.js       |   12 +
 .../globals-not-dereferenced/main.svelte      |    5 +
 .../_config.js                                |   78 +
 .../main.svelte                               |   10 +
 .../globals-shadowed-by-data/_config.js       |   12 +
 .../globals-shadowed-by-data/main.svelte      |   10 +
 .../_config.js                                |    3 +
 .../main.svelte                               |    7 +
 .../globals-shadowed-by-helpers/_config.js    |   12 +
 .../globals-shadowed-by-helpers/main.svelte   |   11 +
 .../samples/hash-in-attribute/_config.js      |   26 +
 .../samples/hash-in-attribute/main.svelte     |    7 +
 .../A.svelte                                  |    5 +
 .../B.svelte                                  |    5 +
 .../_config.js                                |   15 +
 .../main.svelte                               |    8 +
 test/runtime/samples/head-if-block/_config.js |   12 +
 .../runtime/samples/head-if-block/main.svelte |    9 +
 .../samples/head-if-else-block/_config.js     |   14 +
 .../samples/head-if-else-block/main.svelte    |   11 +
 .../head-if-else-raw-dynamic/_config.js       |   19 +
 .../head-if-else-raw-dynamic/main.svelte      |   11 +
 .../samples/head-raw-dynamic/Bar.svelte       |   11 +
 .../samples/head-raw-dynamic/Foo.svelte       |    7 +
 .../samples/head-raw-dynamic/_config.js       |   26 +
 .../samples/head-raw-dynamic/main.svelte      |   12 +
 .../head-title-dynamic-simple/_config.js      |   12 +
 .../head-title-dynamic-simple/main.svelte     |    7 +
 .../samples/head-title-dynamic/_config.js     |   12 +
 .../samples/head-title-dynamic/main.svelte    |    8 +
 .../samples/head-title-empty/_config.js       |    5 +
 .../samples/head-title-empty/main.svelte      |    3 +
 .../samples/head-title-static/_config.js      |    5 +
 .../samples/head-title-static/main.svelte     |    4 +
 test/runtime/samples/hello-world/_config.js   |   15 +
 test/runtime/samples/hello-world/main.svelte  |    5 +
 .../helpers-not-call-expression/_config.js    |    3 +
 .../helpers-not-call-expression/main.svelte   |    7 +
 test/runtime/samples/helpers/_config.js       |    3 +
 test/runtime/samples/helpers/main.svelte      |   10 +
 .../html-entities-inside-elements/_config.js  |    5 +
 .../html-entities-inside-elements/main.svelte |    1 +
 test/runtime/samples/html-entities/_config.js |   14 +
 .../runtime/samples/html-entities/main.svelte |   10 +
 .../_config.js                                |    5 +
 .../main.svelte                               |    1 +
 .../Widget.svelte                             |    1 +
 .../_config.js                                |    3 +
 .../main.svelte                               |   12 +
 .../Widget.svelte                             |    1 +
 .../_config.js                                |   12 +
 .../main.svelte                               |    9 +
 .../_config.js                                |    3 +
 .../main.svelte                               |   32 +
 .../if-block-conservative-update/_config.js   |   25 +
 .../if-block-conservative-update/main.svelte  |    8 +
 .../_config.js                                |   42 +
 .../main.svelte                               |   11 +
 .../samples/if-block-else-in-each/_config.js  |    9 +
 .../samples/if-block-else-in-each/main.svelte |   11 +
 .../if-block-else-partial-outro/Foo.svelte    |    1 +
 .../if-block-else-partial-outro/_config.js    |   17 +
 .../if-block-else-partial-outro/main.svelte   |   12 +
 .../samples/if-block-else-update/_config.js   |   46 +
 .../samples/if-block-else-update/main.svelte  |   21 +
 test/runtime/samples/if-block-else/_config.js |   31 +
 .../runtime/samples/if-block-else/main.svelte |   16 +
 .../if-block-elseif-no-else/_config.js        |   19 +
 .../if-block-elseif-no-else/main.svelte       |    9 +
 .../samples/if-block-elseif-text/_config.js   |   21 +
 .../samples/if-block-elseif-text/main.svelte  |    5 +
 .../samples/if-block-elseif/_config.js        |   21 +
 .../samples/if-block-elseif/main.svelte       |   11 +
 .../samples/if-block-expression/_config.js    |    3 +
 .../samples/if-block-expression/main.svelte   |    3 +
 .../runtime/samples/if-block-first/_config.js |   12 +
 .../samples/if-block-first/main.svelte        |   10 +
 .../Widget.svelte                             |    1 +
 .../_config.js                                |   22 +
 .../main.svelte                               |   14 +
 test/runtime/samples/if-block-or/_config.js   |   15 +
 test/runtime/samples/if-block-or/main.svelte  |    8 +
 .../Foo.svelte                                |    1 +
 .../_config.js                                |   12 +
 .../main.svelte                               |   13 +
 .../Component.svelte                          |    1 +
 .../if-block-outro-nested-else/_config.js     |    6 +
 .../if-block-outro-nested-else/main.svelte    |   13 +
 .../Component.svelte                          |    1 +
 .../_config.js                                |    6 +
 .../main.svelte                               |   17 +
 .../_config.js                                |   12 +
 .../main.svelte                               |    9 +
 .../EEE.svelte                                |    1 +
 .../RRR.svelte                                |    1 +
 .../_config.js                                |    3 +
 .../main.svelte                               |   10 +
 .../if-block-static-with-else/_config.js      |    3 +
 .../if-block-static-with-else/main.svelte     |    5 +
 .../RRR.svelte                                |    1 +
 .../_config.js                                |    3 +
 .../main.svelte                               |   13 +
 .../samples/if-block-widget/Widget.svelte     |    1 +
 .../samples/if-block-widget/_config.js        |   27 +
 .../samples/if-block-widget/main.svelte       |   11 +
 test/runtime/samples/if-block/_config.js      |   14 +
 test/runtime/samples/if-block/main.svelte     |    7 +
 .../samples/if-in-keyed-each/_config.js       |   15 +
 .../samples/if-in-keyed-each/main.svelte      |   11 +
 .../_config.js                                |   28 +
 .../counter.js                                |    3 +
 .../main.svelte                               |   14 +
 .../ignore-unchanged-attribute/_config.js     |   28 +
 .../ignore-unchanged-attribute/counter.js     |    3 +
 .../ignore-unchanged-attribute/main.svelte    |   14 +
 .../samples/ignore-unchanged-raw/_config.js   |   28 +
 .../samples/ignore-unchanged-raw/counter.js   |    3 +
 .../samples/ignore-unchanged-raw/main.svelte  |   14 +
 .../samples/ignore-unchanged-tag/_config.js   |   28 +
 .../samples/ignore-unchanged-tag/counter.js   |    3 +
 .../samples/ignore-unchanged-tag/main.svelte  |   14 +
 .../samples/immutable-nested/Nested.svelte    |   18 +
 .../samples/immutable-nested/_config.js       |   36 +
 .../samples/immutable-nested/main.svelte      |    9 +
 .../samples/immutable-option/_config.js       |   11 +
 .../samples/immutable-option/main.svelte      |   10 +
 .../immutable-svelte-meta-false/_config.js    |   11 +
 .../immutable-svelte-meta-false/main.svelte   |   12 +
 .../samples/immutable-svelte-meta/_config.js  |    9 +
 .../samples/immutable-svelte-meta/main.svelte |   12 +
 .../ComponentOne.svelte                       |    1 +
 .../ComponentTwo.svelte                       |    1 +
 .../imported-renamed-components/_config.js    |    3 +
 .../imported-renamed-components/main.svelte   |    9 +
 .../samples/initial-state-assign/_config.js   |    7 +
 .../samples/initial-state-assign/main.svelte  |    7 +
 .../samples/inline-expressions/_config.js     |   12 +
 .../samples/inline-expressions/main.svelte    |    6 +
 .../_config.js                                |   13 +
 .../main.svelte                               |    5 +
 .../_config.js                                |   13 +
 .../main.svelte                               |    5 +
 .../_config.js                                |    9 +
 .../main.svelte                               |    5 +
 .../inline-style-directive-dynamic/_config.js |   10 +
 .../main.svelte                               |    5 +
 .../_config.js                                |   27 +
 .../main.svelte                               |   13 +
 .../_config.js                                |   25 +
 .../main.svelte                               |    9 +
 .../_config.js                                |    5 +
 .../main.svelte                               |   11 +
 .../_config.js                                |   43 +
 .../main.svelte                               |   11 +
 .../_config.js                                |   39 +
 .../main.svelte                               |    5 +
 .../inline-style-directive-spread/_config.js  |   14 +
 .../inline-style-directive-spread/main.svelte |    1 +
 .../_config.js                                |   18 +
 .../main.svelte                               |   11 +
 .../_config.js                                |   23 +
 .../main.svelte                               |    7 +
 .../inline-style-directive-string/_config.js  |   12 +
 .../inline-style-directive-string/main.svelte |    1 +
 .../samples/inline-style-directive/_config.js |   14 +
 .../inline-style-directive/main.svelte        |    7 +
 .../samples/inline-style-important/_config.js |   18 +
 .../inline-style-important/main.svelte        |   12 +
 .../_config.js                                |   20 +
 .../main.svelte                               |    5 +
 test/runtime/samples/inline-style/_config.js  |   12 +
 test/runtime/samples/inline-style/main.svelte |    1 +
 .../innerhtml-interpolated-literal/_config.js |    7 +
 .../main.svelte                               |    3 +
 .../innerhtml-with-comments/_config.js        |    8 +
 .../innerhtml-with-comments/main.svelte       |    5 +
 test/runtime/samples/input-list/_config.js    |    8 +
 test/runtime/samples/input-list/main.svelte   |    4 +
 .../_config.js                                |    8 +
 .../main.svelte                               |   11 +
 .../_config.js                                |   29 +
 .../main.svelte                               |   16 +
 .../_config.js                                |   17 +
 .../main.svelte                               |   14 +
 .../_config.js                                |   28 +
 .../main.svelte                               |   12 +
 .../instrumentation-script-update/_config.js  |   17 +
 .../instrumentation-script-update/main.svelte |   11 +
 .../_config.js                                |   29 +
 .../main.svelte                               |    8 +
 .../_config.js                                |   17 +
 .../main.svelte                               |   12 +
 .../_config.js                                |   28 +
 .../main.svelte                               |    8 +
 .../_config.js                                |   17 +
 .../main.svelte                               |    7 +
 .../_config.js                                |   31 +
 .../main.svelte                               |   14 +
 .../runtime/samples/internal-state/Foo.svelte |    5 +
 .../runtime/samples/internal-state/_config.js |   18 +
 .../samples/internal-state/main.svelte        |    9 +
 .../invalidation-in-if-condition/_config.js   |   17 +
 .../invalidation-in-if-condition/main.svelte  |   12 +
 test/runtime/samples/isolated-text/_config.js |    6 +
 .../runtime/samples/isolated-text/main.svelte |    5 +
 test/runtime/samples/key-block-2/_config.js   |   14 +
 test/runtime/samples/key-block-2/main.svelte  |    8 +
 test/runtime/samples/key-block-3/_config.js   |   11 +
 test/runtime/samples/key-block-3/main.svelte  |    7 +
 .../key-block-array-immutable/_config.js      |   15 +
 .../key-block-array-immutable/main.svelte     |   14 +
 .../samples/key-block-array/_config.js        |   15 +
 .../samples/key-block-array/main.svelte       |   12 +
 .../Component1.svelte                         |    1 +
 .../Component2.svelte                         |   12 +
 .../key-block-component-slot/_config.js       |   18 +
 .../key-block-component-slot/main.svelte      |   17 +
 .../samples/key-block-expression-2/_config.js |   18 +
 .../key-block-expression-2/main.svelte        |   17 +
 .../samples/key-block-expression/_config.js   |   28 +
 .../samples/key-block-expression/main.svelte  |    9 +
 .../samples/key-block-post-hydrate/_config.js |   19 +
 .../key-block-post-hydrate/main.svelte        |   23 +
 .../samples/key-block-static-if/_config.js    |   21 +
 .../samples/key-block-static-if/main.svelte   |   17 +
 .../samples/key-block-static/_config.js       |    9 +
 .../samples/key-block-static/main.svelte      |    8 +
 .../key-block-transition-local/_config.js     |   37 +
 .../key-block-transition-local/main.svelte    |   19 +
 .../samples/key-block-transition/_config.js   |   24 +
 .../samples/key-block-transition/main.svelte  |   17 +
 test/runtime/samples/key-block/_config.js     |   17 +
 test/runtime/samples/key-block/main.svelte    |   10 +
 .../samples/keyed-each-dev-unique/_config.js  |    7 +
 .../samples/keyed-each-dev-unique/main.svelte |    7 +
 .../samples/lifecycle-events/_config.js       |    8 +
 .../samples/lifecycle-events/main.svelte      |   15 +
 .../samples/lifecycle-next-tick/_config.js    |   30 +
 .../samples/lifecycle-next-tick/main.svelte   |   24 +
 .../Child.svelte                              |    1 +
 .../_config.js                                |    6 +
 .../main.svelte                               |   16 +
 .../Item.svelte                               |   29 +
 .../_config.js                                |   49 +
 .../main.svelte                               |   33 +
 .../order.js                                  |    1 +
 .../samples/lifecycle-render-order/_config.js |   17 +
 .../lifecycle-render-order/main.svelte        |   24 +
 .../samples/lifecycle-render-order/order.js   |    1 +
 .../loop-protect-async-opt-out/_config.js     |    9 +
 .../loop-protect-async-opt-out/main.svelte    |   12 +
 .../loop-protect-generator-opt-out/_config.js |    9 +
 .../main.svelte                               |   16 +
 .../loop-protect-inner-function/_config.js    |    7 +
 .../loop-protect-inner-function/main.svelte   |    7 +
 test/runtime/samples/loop-protect/_config.js  |    7 +
 test/runtime/samples/loop-protect/main.svelte |    5 +
 .../samples/mixed-let-export/_config.js       |    9 +
 .../samples/mixed-let-export/main.svelte      |    7 +
 .../samples/module-context-bind/_config.js    |    4 +
 .../samples/module-context-bind/main.svelte   |   11 +
 .../samples/module-context-export/Foo.svelte  |    7 +
 .../samples/module-context-export/_config.js  |    3 +
 .../samples/module-context-export/main.svelte |    6 +
 .../_config.js                                |    3 +
 .../main.svelte                               |    9 +
 .../runtime/samples/module-context/_config.js |    3 +
 .../samples/module-context/main.svelte        |    5 +
 .../_config.js                                |   12 +
 .../main.svelte                               |   18 +
 .../names-deconflicted-nested/_config.js      |   15 +
 .../names-deconflicted-nested/main.svelte     |   11 +
 .../samples/names-deconflicted/Widget.svelte  |    6 +
 .../samples/names-deconflicted/_config.js     |   12 +
 .../samples/names-deconflicted/main.svelte    |   13 +
 test/runtime/samples/nbsp-div/_config.js      |   17 +
 test/runtime/samples/nbsp-div/main.svelte     |    7 +
 test/runtime/samples/nbsp/_config.js          |    8 +
 test/runtime/samples/nbsp/main.svelte         |    1 +
 .../nested-transition-detach-each/_config.js  |   39 +
 .../nested-transition-detach-each/main.svelte |   22 +
 .../Folder.svelte                             |   36 +
 .../_config.js                                |   24 +
 .../main.svelte                               |    7 +
 .../Span.svelte                               |    1 +
 .../_config.js                                |   23 +
 .../main.svelte                               |   12 +
 .../samples/noscript-removal/_config.js       |   33 +
 .../samples/noscript-removal/main.svelte      |    5 +
 .../observable-auto-subscribe/Nested.svelte   |    5 +
 .../observable-auto-subscribe/_config.js      |   49 +
 .../observable-auto-subscribe/main.svelte     |   10 +
 .../ondestroy-before-cleanup/Top.svelte       |   12 +
 .../ondestroy-before-cleanup/_config.js       |   12 +
 .../ondestroy-before-cleanup/container.js     |    1 +
 .../ondestroy-before-cleanup/main.svelte      |   10 +
 test/runtime/samples/ondestroy-deep/A.svelte  |   15 +
 test/runtime/samples/ondestroy-deep/B.svelte  |   15 +
 test/runtime/samples/ondestroy-deep/C.svelte  |    8 +
 .../runtime/samples/ondestroy-deep/_config.js |   13 +
 .../samples/ondestroy-deep/destroyed.js       |    3 +
 .../samples/ondestroy-deep/main.svelte        |    9 +
 test/runtime/samples/onmount-async/_config.js |    3 +
 .../runtime/samples/onmount-async/main.svelte |    7 +
 .../ParentWidget.svelte                       |    7 +
 .../Widget.svelte                             |   13 +
 .../_config.js                                |    5 +
 .../main.svelte                               |    9 +
 .../onmount-fires-when-ready/Widget.svelte    |   13 +
 .../onmount-fires-when-ready/_config.js       |   10 +
 .../onmount-fires-when-ready/main.svelte      |   13 +
 .../onmount-get-current-component/_config.js  |    4 +
 .../onmount-get-current-component/main.svelte |   16 +
 .../onmount-sibling-order/Nested.svelte       |   13 +
 .../samples/onmount-sibling-order/_config.js  |   16 +
 .../samples/onmount-sibling-order/main.svelte |    6 +
 .../samples/onmount-sibling-order/result.js   |    1 +
 .../samples/option-without-select/_config.js  |   14 +
 .../samples/option-without-select/main.svelte |    5 +
 .../paren-wrapped-expressions/_config.js      |   16 +
 .../paren-wrapped-expressions/main.svelte     |   14 +
 test/runtime/samples/pre-tag/.editorconfig    |    2 +
 test/runtime/samples/pre-tag/_config.js       |   55 +
 test/runtime/samples/pre-tag/main.svelte      |   56 +
 test/runtime/samples/preload/_config.js       |    5 +
 test/runtime/samples/preload/main.svelte      |    7 +
 .../samples/preserve-whitespaces/_config.js   |   53 +
 .../samples/preserve-whitespaces/main.svelte  |   34 +
 .../runtime/samples/prop-accessors/_config.js |   12 +
 .../samples/prop-accessors/main.svelte        |    5 +
 test/runtime/samples/prop-const/Nested.svelte |    7 +
 test/runtime/samples/prop-const/_config.js    |   23 +
 test/runtime/samples/prop-const/main.svelte   |    8 +
 test/runtime/samples/prop-exports/_config.js  |   30 +
 test/runtime/samples/prop-exports/main.svelte |   51 +
 .../samples/prop-not-action/Nested.svelte     |    5 +
 .../samples/prop-not-action/_config.js        |    9 +
 .../samples/prop-not-action/main.svelte       |    6 +
 .../runtime/samples/prop-quoted/Nested.svelte |    1 +
 test/runtime/samples/prop-quoted/_config.js   |   12 +
 test/runtime/samples/prop-quoted/main.svelte  |    7 +
 .../samples/prop-subscribable/_config.js      |   11 +
 .../samples/prop-subscribable/main.svelte     |    7 +
 .../prop-without-semicolon-b/_config.js       |    7 +
 .../prop-without-semicolon-b/main.svelte      |    6 +
 .../samples/prop-without-semicolon/_config.js |    3 +
 .../prop-without-semicolon/main.svelte        |    5 +
 .../samples/props-reactive-b/_config.js       |   30 +
 .../samples/props-reactive-b/main.svelte      |    8 +
 .../Comp.svelte                               |    6 +
 .../_config.js                                |   30 +
 .../main.svelte                               |    8 +
 .../samples/props-reactive-slot/Comp.svelte   |    1 +
 .../samples/props-reactive-slot/_config.js    |   21 +
 .../samples/props-reactive-slot/main.svelte   |   13 +
 .../samples/props-reactive/Nested.svelte      |    9 +
 .../runtime/samples/props-reactive/_config.js |   20 +
 .../samples/props-reactive/main.svelte        |   10 +
 test/runtime/samples/props/RenderProps.svelte |    3 +
 test/runtime/samples/props/_config.js         |   17 +
 test/runtime/samples/props/main.svelte        |    9 +
 .../samples/raw-anchor-first-child/_config.js |   13 +
 .../raw-anchor-first-child/main.svelte        |    6 +
 .../raw-anchor-first-last-child/_config.js    |   13 +
 .../raw-anchor-first-last-child/main.svelte   |    5 +
 .../samples/raw-anchor-last-child/_config.js  |   12 +
 .../samples/raw-anchor-last-child/main.svelte |    6 +
 .../_config.js                                |   13 +
 .../main.svelte                               |    5 +
 .../raw-anchor-next-sibling/_config.js        |   12 +
 .../raw-anchor-next-sibling/main.svelte       |    6 +
 .../raw-anchor-previous-sibling/_config.js    |   12 +
 .../raw-anchor-previous-sibling/main.svelte   |    6 +
 .../raw-mustache-as-root/RawMustache.svelte   |    5 +
 .../samples/raw-mustache-as-root/_config.js   |   33 +
 .../samples/raw-mustache-as-root/main.svelte  |   17 +
 .../raw-mustache-before-element/_config.js    |    3 +
 .../raw-mustache-before-element/main.svelte   |    1 +
 .../raw-mustache-inside-head/_config.js       |   16 +
 .../raw-mustache-inside-head/main.svelte      |   16 +
 .../raw-mustache-inside-slot/Component.svelte |    2 +
 .../raw-mustache-inside-slot/_config.js       |   33 +
 .../raw-mustache-inside-slot/main.svelte      |   17 +
 .../raw-mustaches-preserved/_config.js        |   17 +
 .../raw-mustaches-preserved/main.svelte       |    5 +
 .../samples/raw-mustaches-td-tr/_config.js    |   18 +
 .../samples/raw-mustaches-td-tr/main.svelte   |   12 +
 test/runtime/samples/raw-mustaches/_config.js |   17 +
 .../runtime/samples/raw-mustaches/main.svelte |    5 +
 .../_config.js                                |    3 +
 .../main.svelte                               |    7 +
 .../_config.js                                |    8 +
 .../main.svelte                               |   29 +
 .../_config.js                                |   20 +
 .../main.svelte                               |    5 +
 .../store.js                                  |   18 +
 .../_config.js                                |    8 +
 .../main.svelte                               |   29 +
 .../_config.js                                |    3 +
 .../main.svelte                               |    9 +
 .../_config.js                                |    3 +
 .../main.svelte                               |    9 +
 .../_config.js                                |    3 +
 .../main.svelte                               |   14 +
 .../samples/reactive-block-break/_config.js   |    3 +
 .../samples/reactive-block-break/main.svelte  |   14 +
 .../reactive-compound-operator/_config.js     |   27 +
 .../reactive-compound-operator/main.svelte    |    8 +
 .../_config.js                                |   30 +
 .../main.svelte                               |   10 +
 .../reactive-function-inline/_config.js       |    8 +
 .../reactive-function-inline/main.svelte      |    6 +
 .../samples/reactive-function/_config.js      |   14 +
 .../samples/reactive-function/main.svelte     |   14 +
 .../reactive-import-statement-2/_config.js    |    3 +
 .../reactive-import-statement-2/data.js       |    3 +
 .../reactive-import-statement-2/main.svelte   |    8 +
 .../reactive-import-statement/_config.js      |   38 +
 .../samples/reactive-import-statement/data.js |    1 +
 .../reactive-import-statement/main.svelte     |   19 +
 .../reactive-statement-module-vars/_config.js |   18 +
 .../main.svelte                               |   15 +
 .../reactive-update-expression/_config.js     |   29 +
 .../reactive-update-expression/main.svelte    |   12 +
 .../reactive-value-assign-property/_config.js |    5 +
 .../main.svelte                               |    6 +
 .../_config.js                                |    5 +
 .../main.svelte                               |    1 +
 .../samples/reactive-value-coerce/_config.js  |   10 +
 .../samples/reactive-value-coerce/main.svelte |    7 +
 .../_config.js                                |   26 +
 .../main.svelte                               |   19 +
 .../_config.js                                |   15 +
 .../main.svelte                               |   10 +
 .../reactive-value-function-hoist/_config.js  |   15 +
 .../reactive-value-function-hoist/main.svelte |   10 +
 .../reactive-value-function/_config.js        |    9 +
 .../reactive-value-function/main.svelte       |   14 +
 .../reactive-value-mutate-const/_config.js    |   17 +
 .../reactive-value-mutate-const/main.svelte   |    9 +
 .../samples/reactive-value-mutate/_config.js  |    3 +
 .../samples/reactive-value-mutate/main.svelte |    7 +
 .../reactive-values-deconflicted/_config.js   |   10 +
 .../reactive-values-deconflicted/main.svelte  |    8 +
 .../reactive-values-exported/_config.js       |   18 +
 .../reactive-values-exported/main.svelte      |   10 +
 .../samples/reactive-values-fixed/_config.js  |   11 +
 .../samples/reactive-values-fixed/main.svelte |    6 +
 .../_config.js                                |    9 +
 .../main.svelte                               |   21 +
 .../_config.js                                |   25 +
 .../main.svelte                               |   10 +
 .../_config.js                                |   19 +
 .../main.svelte                               |    7 +
 .../reactive-values-implicit/_config.js       |   14 +
 .../reactive-values-implicit/main.svelte      |   10 +
 .../_config.js                                |   12 +
 .../main.svelte                               |   10 +
 .../_config.js                                |    5 +
 .../main.svelte                               |    3 +
 .../_config.js                                |   11 +
 .../main.svelte                               |    7 +
 .../reactive-values-non-cyclical/_config.js   |   17 +
 .../reactive-values-non-cyclical/main.svelte  |   13 +
 .../reactive-values-overwrite/_config.js      |   21 +
 .../reactive-values-overwrite/main.svelte     |    8 +
 .../reactive-values-second-order/_config.js   |    8 +
 .../reactive-values-second-order/main.svelte  |   12 +
 .../_config.js                                |   19 +
 .../main.svelte                               |    9 +
 .../_config.js                                |   15 +
 .../main.svelte                               |   15 +
 .../_config.js                                |    6 +
 .../main.svelte                               |    9 +
 .../_config.js                                |   11 +
 .../main.svelte                               |    7 +
 .../reactive-values-uninitialised/_config.js  |    3 +
 .../reactive-values-uninitialised/main.svelte |   12 +
 .../samples/reactive-values/_config.js        |   16 +
 .../samples/reactive-values/main.svelte       |   12 +
 .../renamed-instance-exports/_config.js       |   10 +
 .../renamed-instance-exports/main.svelte      |    5 +
 .../script-style-non-top-level/_config.js     |    8 +
 .../script-style-non-top-level/main.svelte    |    4 +
 .../samples/select-bind-array/_config.js      |   22 +
 .../samples/select-bind-array/main.svelte     |   10 +
 .../samples/select-bind-in-array/_config.js   |   16 +
 .../samples/select-bind-in-array/main.svelte  |   10 +
 .../samples/select-change-handler/_config.js  |   20 +
 .../samples/select-change-handler/main.svelte |   15 +
 .../samples/select-no-whitespace/_config.js   |    6 +
 .../samples/select-no-whitespace/main.svelte  |    5 +
 .../select-one-way-bind-object/_config.js     |   22 +
 .../select-one-way-bind-object/main.svelte    |    9 +
 .../samples/select-one-way-bind/_config.js    |   19 +
 .../samples/select-one-way-bind/main.svelte   |    8 +
 test/runtime/samples/select-props/_config.js  |   15 +
 test/runtime/samples/select-props/main.svelte |   15 +
 test/runtime/samples/select/_config.js        |   31 +
 test/runtime/samples/select/main.svelte       |    9 +
 .../self-reference-component/Countdown.svelte |    7 +
 .../self-reference-component/_config.js       |    3 +
 .../self-reference-component/main.svelte      |   10 +
 .../samples/self-reference-tree/_config.js    |   65 +
 .../samples/self-reference-tree/main.svelte   |   15 +
 .../runtime/samples/self-reference/_config.js |   14 +
 .../samples/self-reference/main.svelte        |    8 +
 .../samples/semicolon-hoisting/_config.js     |    3 +
 .../samples/semicolon-hoisting/main.svelte    |    6 +
 .../samples/set-after-destroy/_config.js      |   10 +
 .../samples/set-after-destroy/main.svelte     |    5 +
 .../samples/set-in-oncreate/_config.js        |    5 +
 .../samples/set-in-oncreate/main.svelte       |   11 +
 .../Widget.svelte                             |   14 +
 .../set-in-onstate-dedupes-renders/_config.js |    7 +
 .../main.svelte                               |   14 +
 .../runtime/samples/set-in-onstate/_config.js |   16 +
 .../samples/set-in-onstate/main.svelte        |   13 +
 .../samples/set-null-text-node/_config.js     |   13 +
 .../samples/set-null-text-node/main.svelte    |    5 +
 .../samples/set-prevents-loop/Foo.svelte      |    1 +
 .../samples/set-prevents-loop/_config.js      |    1 +
 .../samples/set-prevents-loop/main.svelte     |   12 +
 .../samples/set-undefined-attr/_config.js     |    5 +
 .../samples/set-undefined-attr/main.svelte    |   13 +
 .../shorthand-method-in-template/Foo.svelte   |    5 +
 .../shorthand-method-in-template/_config.js   |    3 +
 .../shorthand-method-in-template/main.svelte  |    9 +
 .../sigil-component-prop/Widget.svelte        |    5 +
 .../samples/sigil-component-prop/_config.js   |    7 +
 .../samples/sigil-component-prop/main.svelte  |    7 +
 .../sigil-expression-function-body/_config.js |    3 +
 .../main.svelte                               |    1 +
 .../runtime/samples/sigil-static-#/_config.js |    3 +
 .../samples/sigil-static-#/main.svelte        |    1 +
 .../runtime/samples/sigil-static-@/_config.js |    3 +
 .../samples/sigil-static-@/main.svelte        |    1 +
 .../samples/single-static-element/_config.js  |    3 +
 .../samples/single-static-element/main.svelte |    1 +
 .../samples/single-text-node/_config.js       |    3 +
 .../samples/single-text-node/main.svelte      |    1 +
 .../slot-if-block-update-no-anchor/_config.js |    7 +
 .../main.svelte                               |    9 +
 .../samples/slot-in-custom-element/_config.js |    7 +
 .../slot-in-custom-element/main.svelte        |    3 +
 .../samples/spread-component-2/Widget.svelte  |   13 +
 .../samples/spread-component-2/_config.js     |   76 +
 .../samples/spread-component-2/main.svelte    |   12 +
 .../Widget.svelte                             |   11 +
 .../_config.js                                |   53 +
 .../main.svelte                               |   13 +
 .../Widget.svelte                             |    9 +
 .../_config.js                                |   51 +
 .../main.svelte                               |    9 +
 .../_config.js                                |   17 +
 .../main.svelte                               |    5 +
 .../spread-component-dynamic/Foo.svelte       |    5 +
 .../spread-component-dynamic/_config.js       |   19 +
 .../spread-component-dynamic/main.svelte      |    7 +
 .../spread-component-literal/Widget.svelte    |    5 +
 .../spread-component-literal/_config.js       |    5 +
 .../spread-component-literal/main.svelte      |    7 +
 .../Widget.svelte                             |    6 +
 .../_config.js                                |   10 +
 .../main.svelte                               |   10 +
 .../Widget.svelte                             |    9 +
 .../spread-component-side-effects/_config.js  |   19 +
 .../spread-component-side-effects/main.svelte |   16 +
 .../spread-component-with-bind/Widget.svelte  |    6 +
 .../spread-component-with-bind/_config.js     |   23 +
 .../spread-component-with-bind/main.svelte    |    8 +
 .../samples/spread-component/Widget.svelte    |   11 +
 .../samples/spread-component/_config.js       |   33 +
 .../samples/spread-component/main.svelte      |    9 +
 .../spread-each-component/Nested.svelte       |    6 +
 .../samples/spread-each-component/_config.js  |   24 +
 .../samples/spread-each-component/main.svelte |    9 +
 .../samples/spread-each-element/_config.js    |   24 +
 .../samples/spread-each-element/main.svelte   |    7 +
 .../samples/spread-element-boolean/_config.js |   25 +
 .../spread-element-boolean/main.svelte        |    5 +
 .../samples/spread-element-class/_config.js   |    7 +
 .../samples/spread-element-class/main.svelte  |    5 +
 .../_config.js                                |   15 +
 .../main.svelte                               |    6 +
 .../_config.js                                |   39 +
 .../main.svelte                               |   12 +
 .../spread-element-input-select/_config.js    |   25 +
 .../spread-element-input-select/main.svelte   |    9 +
 .../_config.js                                |   12 +
 .../main.svelte                               |    5 +
 .../InputOne.svelte                           |   18 +
 .../InputTwo.svelte                           |   19 +
 .../spread-element-input-value/_config.js     |   62 +
 .../spread-element-input-value/main.svelte    |    9 +
 .../spread-element-input-value/utils.js       |    6 +
 .../samples/spread-element-input/_config.js   |    9 +
 .../samples/spread-element-input/main.svelte  |    6 +
 .../_config.js                                |   10 +
 .../main.svelte                               |    8 +
 .../spread-element-multiple/_config.js        |   31 +
 .../spread-element-multiple/main.svelte       |    7 +
 .../spread-element-readonly/_config.js        |    9 +
 .../spread-element-readonly/main.svelte       |    9 +
 .../samples/spread-element-removal/_config.js |    3 +
 .../spread-element-removal/main.svelte        |    1 +
 .../samples/spread-element-scope/_config.js   |    7 +
 .../samples/spread-element-scope/main.svelte  |   10 +
 .../Select.svelte                             |   12 +
 .../_config.js                                |   11 +
 .../main.svelte                               |   11 +
 .../runtime/samples/spread-element/_config.js |   21 +
 .../samples/spread-element/main.svelte        |    9 +
 .../samples/spread-own-props/Widget.svelte    |   11 +
 .../samples/spread-own-props/_config.js       |   31 +
 .../samples/spread-own-props/main.svelte      |    7 +
 .../samples/spread-reuse-levels/Nested.svelte |   21 +
 .../samples/spread-reuse-levels/_config.js    |   20 +
 .../samples/spread-reuse-levels/main.svelte   |    8 +
 test/runtime/samples/spring/_config.js        |    3 +
 test/runtime/samples/spring/main.svelte       |    8 +
 .../samples/state-deconflicted/_config.js     |   52 +
 .../samples/state-deconflicted/main.svelte    |   12 +
 .../_config.js                                |   11 +
 .../main.svelte                               |   34 +
 .../_config.js                                |   31 +
 .../main.svelte                               |   24 +
 .../_config.js                                |   42 +
 .../main.svelte                               |   20 +
 .../store-assignment-updates/_config.js       |   31 +
 .../store-assignment-updates/main.svelte      |   10 +
 .../_config.js                                |    3 +
 .../main.svelte                               |   31 +
 .../_config.js                                |   22 +
 .../main.svelte                               |   29 +
 .../_config.js                                |    9 +
 .../main.svelte                               |    7 +
 .../store-auto-subscribe-immediate/_config.js |    9 +
 .../main.svelte                               |    7 +
 .../store-auto-subscribe-implicit/_config.js  |   28 +
 .../store-auto-subscribe-implicit/main.svelte |    5 +
 .../store-auto-subscribe-in-each/_config.js   |   40 +
 .../store-auto-subscribe-in-each/main.svelte  |    7 +
 .../App.svelte                                |    8 +
 .../_config.js                                |   15 +
 .../main.svelte                               |   12 +
 .../_config.js                                |   28 +
 .../main.svelte                               |    8 +
 .../store-auto-subscribe-in-script/_config.js |   26 +
 .../main.svelte                               |    9 +
 .../_config.js                                |    3 +
 .../main.svelte                               |    3 +
 .../_config.js                                |    3 +
 .../main.svelte                               |    1 +
 .../store-auto-subscribe-nullish/_config.js   |   13 +
 .../store-auto-subscribe-nullish/main.svelte  |    5 +
 .../samples/store-auto-subscribe/_config.js   |   28 +
 .../samples/store-auto-subscribe/main.svelte  |    5 +
 .../samples/store-contextual/_config.js       |   76 +
 .../samples/store-contextual/main.svelte      |   10 +
 .../samples/store-dev-mode-error/_config.js   |   11 +
 .../samples/store-dev-mode-error/main.svelte  |    5 +
 .../store-each-binding-deep/_config.js        |   14 +
 .../store-each-binding-deep/main.svelte       |   11 +
 .../_config.js                                |   14 +
 .../main.svelte                               |   13 +
 .../samples/store-each-binding/_config.js     |   14 +
 .../samples/store-each-binding/main.svelte    |   13 +
 .../store-imported-module-b/_config.js        |    3 +
 .../samples/store-imported-module-b/foo.js    |    3 +
 .../store-imported-module-b/main.svelte       |    6 +
 .../samples/store-imported-module/_config.js  |    5 +
 .../samples/store-imported-module/foo.js      |    3 +
 .../samples/store-imported-module/main.svelte |    9 +
 .../runtime/samples/store-imported/_config.js |    7 +
 test/runtime/samples/store-imported/foo.js    |    3 +
 .../samples/store-imported/main.svelte        |    6 +
 .../samples/store-imports-hoisted/_config.js  |    7 +
 .../samples/store-imports-hoisted/foo.js      |    3 +
 .../samples/store-imports-hoisted/main.svelte |    7 +
 .../_config.js                                |    8 +
 .../main.svelte                               |   11 +
 .../_config.js                                |   50 +
 .../main.svelte                               |   20 +
 .../_config.js                                |   50 +
 .../main.svelte                               |   20 +
 .../_config.js                                |    9 +
 .../main.svelte                               |    6 +
 .../samples/store-resubscribe-b/_config.js    |    3 +
 .../samples/store-resubscribe-b/main.svelte   |    7 +
 .../samples/store-resubscribe-c/_config.js    |    3 +
 .../samples/store-resubscribe-c/main.svelte   |   16 +
 .../store-resubscribe-export/_config.js       |   29 +
 .../store-resubscribe-export/main.svelte      |    6 +
 .../store-resubscribe-observable/_config.js   |    3 +
 .../store-resubscribe-observable/main.svelte  |   11 +
 .../samples/store-resubscribe/_config.js      |   36 +
 .../samples/store-resubscribe/main.svelte     |    8 +
 .../store-shadow-scope-declaration/_config.js |    1 +
 .../main.svelte                               |   25 +
 .../samples/store-shadow-scope/_config.js     |    3 +
 .../samples/store-shadow-scope/main.svelte    |    9 +
 .../_config.js                                |    3 +
 .../main.svelte                               |    9 +
 .../samples/store-unreferenced/Nested.svelte  |    5 +
 .../samples/store-unreferenced/_config.js     |   15 +
 .../samples/store-unreferenced/main.svelte    |   10 +
 .../samples/store-unreferenced/store.js       |    3 +
 .../runtime/samples/svg-attributes/_config.js |   14 +
 .../samples/svg-attributes/main.svelte        |    5 +
 .../Rect.svelte                               |   10 +
 .../_config.js                                |   22 +
 .../main.svelte                               |   12 +
 .../Rect.svelte                               |   10 +
 .../_config.js                                |   22 +
 .../main.svelte                               |   12 +
 test/runtime/samples/svg-class/_config.js     |   12 +
 test/runtime/samples/svg-class/main.svelte    |    1 +
 .../samples/svg-each-block-anchor/_config.js  |   25 +
 .../samples/svg-each-block-anchor/main.svelte |   14 +
 .../svg-each-block-namespace/_config.js       |   14 +
 .../svg-each-block-namespace/main.svelte      |    9 +
 .../svg-foreignobject-namespace/_config.js    |   17 +
 .../svg-foreignobject-namespace/main.svelte   |    5 +
 test/runtime/samples/svg-html-tag/_config.js  |   35 +
 test/runtime/samples/svg-html-tag/main.svelte |   10 +
 test/runtime/samples/svg-html-tag2/_config.js |   39 +
 .../runtime/samples/svg-html-tag2/main.svelte |   12 +
 test/runtime/samples/svg-html-tag3/_config.js |   33 +
 .../runtime/samples/svg-html-tag3/main.svelte |   11 +
 test/runtime/samples/svg-multiple/_config.js  |   30 +
 test/runtime/samples/svg-multiple/main.svelte |   14 +
 .../samples/svg-no-whitespace/_config.js      |    9 +
 .../samples/svg-no-whitespace/main.svelte     |    5 +
 .../samples/svg-slot-namespace/Widget.svelte  |    3 +
 .../samples/svg-slot-namespace/_config.js     |   17 +
 .../samples/svg-slot-namespace/main.svelte    |    9 +
 test/runtime/samples/svg-spread/_config.js    |    7 +
 test/runtime/samples/svg-spread/main.svelte   |    7 +
 .../svg-tspan-preserve-space/_config.js       |    3 +
 .../svg-tspan-preserve-space/main.svelte      |    1 +
 .../runtime/samples/svg-with-style/_config.js |   13 +
 .../samples/svg-with-style/main.svelte        |   15 +
 test/runtime/samples/svg-xlink/_config.js     |   17 +
 test/runtime/samples/svg-xlink/main.svelte    |    7 +
 test/runtime/samples/svg-xmlns/_config.js     |   24 +
 test/runtime/samples/svg-xmlns/main.svelte    |   10 +
 test/runtime/samples/svg/_config.js           |   22 +
 test/runtime/samples/svg/main.svelte          |   10 +
 .../samples/target-dom-detached/App.svelte    |   11 +
 .../samples/target-dom-detached/_config.js    |   16 +
 .../samples/target-dom-detached/main.svelte   |   18 +
 test/runtime/samples/target-dom/App.svelte    |   11 +
 test/runtime/samples/target-dom/_config.js    |   16 +
 test/runtime/samples/target-dom/main.svelte   |   18 +
 .../samples/target-shadow-dom/App.svelte      |   11 +
 .../samples/target-shadow-dom/_config.js      |   13 +
 .../samples/target-shadow-dom/main.svelte     |   19 +
 test/runtime/samples/template/_config.js      |   31 +
 test/runtime/samples/template/main.svelte     |    4 +
 .../samples/textarea-children/_config.js      |   17 +
 .../samples/textarea-children/main.svelte     |    7 +
 .../samples/textarea-content/.editorconfig    |    2 +
 .../samples/textarea-content/_config.js       |   34 +
 .../samples/textarea-content/main.svelte      |   40 +
 .../runtime/samples/textarea-value/_config.js |   17 +
 .../samples/textarea-value/main.svelte        |    5 +
 .../this-in-function-expressions/_config.js   |   10 +
 .../this-in-function-expressions/main.svelte  |    2 +
 .../samples/transition-abort/_config.js       |   31 +
 .../samples/transition-abort/main.svelte      |   21 +
 .../_config.js                                |   24 +
 .../main.svelte                               |   29 +
 .../transition-css-duration/_config.js        |   13 +
 .../transition-css-duration/main.svelte       |   16 +
 .../samples/transition-css-iframe/Foo.svelte  |   16 +
 .../transition-css-iframe/Frame.svelte        |   58 +
 .../samples/transition-css-iframe/_config.js  |   18 +
 .../samples/transition-css-iframe/main.svelte |    8 +
 .../_config.js                                |   21 +
 .../main.svelte                               |   26 +
 .../transition-css-in-out-in/_config.js       |   20 +
 .../transition-css-in-out-in/main.svelte      |   25 +
 .../_config.js                                |   39 +
 .../main.svelte                               |   17 +
 .../transition-js-aborted-outro/_config.js    |   24 +
 .../transition-js-aborted-outro/main.svelte   |   16 +
 .../transition-js-args-dynamic/_config.js     |   15 +
 .../transition-js-args-dynamic/main.svelte    |   17 +
 .../samples/transition-js-args/_config.js     |   14 +
 .../samples/transition-js-args/main.svelte    |   17 +
 .../_config.js                                |  174 +
 .../main.svelte                               |   20 +
 .../transition-js-await-block/_config.js      |   34 +
 .../transition-js-await-block/main.svelte     |   20 +
 .../samples/transition-js-context/_config.js  |   11 +
 .../samples/transition-js-context/main.svelte |   17 +
 .../transition-js-deferred-b/_config.js       |   13 +
 .../transition-js-deferred-b/main.svelte      |   46 +
 .../samples/transition-js-deferred/_config.js |   13 +
 .../transition-js-deferred/main.svelte        |   46 +
 .../transition-js-delay-in-out/_config.js     |   22 +
 .../transition-js-delay-in-out/main.svelte    |   27 +
 .../samples/transition-js-delay/_config.js    |   27 +
 .../samples/transition-js-delay/main.svelte   |   17 +
 .../_config.js                                |   17 +
 .../main.svelte                               |   16 +
 .../transition-js-dynamic-component/A.svelte  |   12 +
 .../transition-js-dynamic-component/B.svelte  |   12 +
 .../_config.js                                |   34 +
 .../main.svelte                               |    8 +
 .../_config.js                                |   36 +
 .../main.svelte                               |   18 +
 .../_config.js                                |   41 +
 .../main.svelte                               |   28 +
 .../transition-js-each-block-intro/_config.js |   32 +
 .../main.svelte                               |   16 +
 .../_config.js                                |   63 +
 .../main.svelte                               |   16 +
 .../_config.js                                |   47 +
 .../main.svelte                               |   16 +
 .../_config.js                                |   28 +
 .../main.svelte                               |   16 +
 .../transition-js-each-block-outro/_config.js |   19 +
 .../main.svelte                               |   16 +
 .../_config.js                                |   54 +
 .../main.svelte                               |   27 +
 .../_config.js                                |   22 +
 .../main.svelte                               |   18 +
 .../_config.js                                |   20 +
 .../main.svelte                               |   18 +
 .../_config.js                                |   25 +
 .../main.svelte                               |   16 +
 .../_config.js                                |   57 +
 .../main.svelte                               |   29 +
 .../transition-js-each-unchanged/_config.js   |   25 +
 .../transition-js-each-unchanged/main.svelte  |   16 +
 .../transition-js-events-in-out/_config.js    |   71 +
 .../transition-js-events-in-out/main.svelte   |   59 +
 .../samples/transition-js-events/_config.js   |   70 +
 .../samples/transition-js-events/main.svelte  |   58 +
 .../transition-js-if-block-bidi/_config.js    |   28 +
 .../transition-js-if-block-bidi/main.svelte   |   17 +
 .../_config.js                                |   28 +
 .../main.svelte                               |   25 +
 .../_config.js                                |   33 +
 .../main.svelte                               |   25 +
 .../_config.js                                |   45 +
 .../main.svelte                               |   18 +
 .../_config.js                                |   44 +
 .../main.svelte                               |   25 +
 .../transition-js-if-block-intro/_config.js   |   15 +
 .../transition-js-if-block-intro/main.svelte  |   16 +
 .../_config.js                                |   19 +
 .../main.svelte                               |   17 +
 .../_config.js                                |   21 +
 .../main.svelte                               |   22 +
 .../_config.js                                |   21 +
 .../main.svelte                               |   21 +
 .../_config.js                                |   38 +
 .../main.svelte                               |   18 +
 .../_config.js                                |   17 +
 .../main.svelte                               |   21 +
 .../_config.js                                |   23 +
 .../main.svelte                               |   22 +
 .../Component.svelte                          |   18 +
 .../_config.js                                |    9 +
 .../main.svelte                               |    8 +
 .../Component.svelte                          |   18 +
 .../_config.js                                |    7 +
 .../main.svelte                               |   10 +
 .../samples/transition-js-initial/_config.js  |   11 +
 .../samples/transition-js-initial/main.svelte |   16 +
 .../_config.js                                |   13 +
 .../main.svelte                               |   12 +
 .../Widget.svelte                             |   12 +
 .../_config.js                                |    9 +
 .../main.svelte                               |    5 +
 .../_config.js                                |    9 +
 .../main.svelte                               |   12 +
 .../transition-js-local-and-global/_config.js |   67 +
 .../main.svelte                               |   20 +
 .../_config.js                                |   31 +
 .../main.svelte                               |   19 +
 .../Widget.svelte                             |   12 +
 .../_config.js                                |   24 +
 .../main.svelte                               |    9 +
 .../_config.js                                |   30 +
 .../main.svelte                               |   19 +
 .../_config.js                                |   30 +
 .../main.svelte                               |   19 +
 .../transition-js-local-nested-if/_config.js  |   40 +
 .../transition-js-local-nested-if/main.svelte |   19 +
 .../samples/transition-js-local/_config.js    |   40 +
 .../samples/transition-js-local/main.svelte   |   19 +
 .../transition-js-nested-await/_config.js     |   34 +
 .../transition-js-nested-await/main.svelte    |   19 +
 .../Widget.svelte                             |   12 +
 .../transition-js-nested-component/_config.js |   24 +
 .../main.svelte                               |    9 +
 .../_config.js                                |   26 +
 .../main.svelte                               |   19 +
 .../Widget.svelte                             |    7 +
 .../_config.js                                |   11 +
 .../main.svelte                               |   10 +
 .../_config.js                                |   25 +
 .../main.svelte                               |   19 +
 .../transition-js-nested-each/_config.js      |   25 +
 .../transition-js-nested-each/main.svelte     |   19 +
 .../transition-js-nested-if/_config.js        |   25 +
 .../transition-js-nested-if/main.svelte       |   19 +
 .../transition-js-nested-intro/Child.svelte   |   13 +
 .../transition-js-nested-intro/_config.js     |   19 +
 .../transition-js-nested-intro/main.svelte    |    8 +
 .../_config.js                                |   19 +
 .../main.svelte                               |   17 +
 .../transition-js-parameterised/_config.js    |   15 +
 .../transition-js-parameterised/main.svelte   |   16 +
 .../transition-js-slot-2/Nested.svelte        |   18 +
 .../samples/transition-js-slot-2/_config.js   |   24 +
 .../samples/transition-js-slot-2/main.svelte  |   18 +
 .../transition-js-slot-3/Nested.svelte        |   27 +
 .../samples/transition-js-slot-3/_config.js   |   23 +
 .../samples/transition-js-slot-3/main.svelte  |   16 +
 .../Nested.svelte                             |   19 +
 .../transition-js-slot-4-cancelled/_config.js |   35 +
 .../main.svelte                               |   22 +
 .../Nested.svelte                             |   19 +
 .../_config.js                                |   40 +
 .../main.svelte                               |   27 +
 .../Nested.svelte                             |   19 +
 .../Nested2.svelte                            |   19 +
 .../_config.js                                |   40 +
 .../main.svelte                               |   26 +
 .../Nested.svelte                             |   19 +
 .../_config.js                                |   40 +
 .../main.svelte                               |   27 +
 .../transition-js-slot-fallback/_config.js    |   23 +
 .../transition-js-slot-fallback/main.svelte   |   27 +
 .../samples/transition-js-slot/Nested.svelte  |    9 +
 .../samples/transition-js-slot/_config.js     |   26 +
 .../samples/transition-js-slot/main.svelte    |   18 +
 .../unchanged-expression-escape/_config.js    |    7 +
 .../unchanged-expression-escape/main.svelte   |    7 +
 .../unchanged-expression-xss/_config.js       |    3 +
 .../unchanged-expression-xss/main.svelte      |    5 +
 .../samples/whitespace-each-block/_config.js  |   12 +
 .../samples/whitespace-each-block/main.svelte |    7 +
 .../samples/whitespace-list/_config.js        |   22 +
 .../samples/whitespace-list/main.svelte       |   11 +
 .../samples/whitespace-normal/_config.js      |   12 +
 .../samples/whitespace-normal/main.svelte     |    5 +
 .../window-bind-scroll-update/_config.js      |   37 +
 .../window-bind-scroll-update/main.svelte     |    7 +
 .../_config.js                                |    3 +
 .../main.svelte                               |    7 +
 .../samples/window-binding-resize/_config.js  |   39 +
 .../samples/window-binding-resize/main.svelte |    8 +
 .../window-binding-scroll-store/_config.js    |   29 +
 .../window-binding-scroll-store/main.svelte   |   15 +
 .../samples/window-event-context/_config.js   |   22 +
 .../samples/window-event-context/main.svelte  |    7 +
 .../samples/window-event-custom/_config.js    |   15 +
 .../samples/window-event-custom/main.svelte   |   19 +
 test/runtime/samples/window-event/_config.js  |   26 +
 test/runtime/samples/window-event/main.svelte |    8 +
 test/server-side-rendering/index.ts           |  248 +
 .../samples/attribute-boolean/_expected.html  |    2 +
 .../samples/attribute-boolean/main.svelte     |    2 +
 .../samples/attribute-dynamic/_expected.html  |    1 +
 .../samples/attribute-dynamic/data.json       |    4 +
 .../samples/attribute-dynamic/main.svelte     |    6 +
 .../_expected.html                            |    5 +
 .../main.svelte                               |   10 +
 .../_expected.html                            |    5 +
 .../main.svelte                               |   10 +
 .../attribute-escaped-quotes/_expected.html   |    4 +
 .../attribute-escaped-quotes/main.svelte      |    6 +
 .../attribute-spread-with-null/_expected.html |    1 +
 .../attribute-spread-with-null/main.svelte    |    5 +
 .../samples/attribute-static/_expected.html   |    1 +
 .../samples/attribute-static/main.svelte      |    1 +
 .../bindings-empty-string/_expected.html      |    1 +
 .../samples/bindings-empty-string/main.svelte |    5 +
 .../samples/bindings-group/_expected.html     |    5 +
 .../samples/bindings-group/main.svelte        |   12 +
 .../samples/bindings-readonly/_expected.html  |    4 +
 .../samples/bindings-readonly/main.svelte     |   44 +
 .../samples/bindings-zero/_expected.html      |    2 +
 .../samples/bindings-zero/main.svelte         |    6 +
 .../samples/bindings/_expected.html           |    1 +
 .../samples/bindings/main.svelte              |    5 +
 .../samples/comment-preserve/_config.js       |    5 +
 .../samples/comment-preserve/_expected.html   |    3 +
 .../samples/comment-preserve/main.svelte      |    3 +
 .../samples/comment/_expected.html            |    2 +
 .../samples/comment/main.svelte               |    3 +
 .../component-binding-renamed/Foo.svelte      |    5 +
 .../component-binding-renamed/_expected.html  |    1 +
 .../component-binding-renamed/main.svelte     |    8 +
 .../samples/component-binding/Foo.svelte      |    5 +
 .../samples/component-binding/_expected.html  |    1 +
 .../samples/component-binding/main.svelte     |    7 +
 .../component-data-dynamic/Widget.svelte      |   11 +
 .../component-data-dynamic/_expected.html     |    4 +
 .../samples/component-data-dynamic/data.json  |    6 +
 .../component-data-dynamic/main.svelte        |   12 +
 .../component-data-empty/Widget.svelte        |    5 +
 .../component-data-empty/_expected.html       |    1 +
 .../samples/component-data-empty/main.svelte  |    7 +
 .../Widget.svelte                             |    5 +
 .../_expected.html                            |    1 +
 .../component-refs-and-attributes/main.svelte |    9 +
 .../samples/component-refs/Widget.svelte      |    1 +
 .../samples/component-refs/_expected.html     |    1 +
 .../samples/component-refs/main.svelte        |    7 +
 .../Widget.svelte                             |    1 +
 .../_expected.html                            |    1 +
 .../main.svelte                               |    7 +
 .../samples/component-yield/Widget.svelte     |    5 +
 .../samples/component-yield/_expected.html    |    3 +
 .../samples/component-yield/main.svelte       |    9 +
 .../samples/component/Widget.svelte           |    1 +
 .../samples/component/_expected.html          |    1 +
 .../samples/component/main.svelte             |    7 +
 .../samples/computed/_expected.html           |    2 +
 .../samples/computed/data.json                |    4 +
 .../samples/computed/main.svelte              |   15 +
 .../ChildComponent.svelte                     |    6 +
 .../_expected.html                            |    1 +
 .../main.svelte                               |   10 +
 .../default-data-override/_expected.html      |    1 +
 .../samples/default-data-override/data.json   |    3 +
 .../samples/default-data-override/main.svelte |    5 +
 .../samples/default-data/_expected.html       |    1 +
 .../samples/default-data/main.svelte          |    5 +
 .../samples/directives/_expected.html         |    1 +
 .../samples/directives/main.svelte            |    1 +
 .../dynamic-element-string/_expected.html     |    1 +
 .../dynamic-element-string/main.svelte        |    1 +
 .../dynamic-element-variable/_expected.html   |    2 +
 .../dynamic-element-variable/main.svelte      |    7 +
 .../dynamic-text-escaped/_expected.html       |    1 +
 .../samples/dynamic-text-escaped/data.json    |    3 +
 .../samples/dynamic-text-escaped/main.svelte  |    5 +
 .../samples/dynamic-text/_expected.html       |    1 +
 .../samples/dynamic-text/data.json            |    3 +
 .../samples/dynamic-text/main.svelte          |    5 +
 .../samples/each-block/_expected.html         |    1 +
 .../samples/each-block/data.json              |    7 +
 .../samples/each-block/main.svelte            |    7 +
 .../empty-elements-closed/_expected.html      |    2 +
 .../samples/empty-elements-closed/main.svelte |    2 +
 .../samples/entities/_expected.html           |    1 +
 .../samples/entities/data.json                |    3 +
 .../samples/entities/main.svelte              |    5 +
 .../head-meta-hydrate-duplicate/_config.js    |    5 +
 .../_expected-head.html                       |    4 +
 .../_expected.html                            |    3 +
 .../head-meta-hydrate-duplicate/main.svelte   |    8 +
 .../samples/head-multiple-title/A.svelte      |    3 +
 .../samples/head-multiple-title/B.svelte      |    3 +
 .../head-multiple-title/_expected-head.html   |    1 +
 .../head-multiple-title/_expected.html        |    0
 .../samples/head-multiple-title/data.json     |    3 +
 .../samples/head-multiple-title/main.svelte   |   10 +
 .../samples/head-title/_expected-head.html    |    1 +
 .../samples/head-title/_expected.html         |    0
 .../samples/head-title/data.json              |    3 +
 .../samples/head-title/main.svelte            |    7 +
 .../samples/helpers/_expected.html            |    1 +
 .../samples/helpers/main.svelte               |    7 +
 .../samples/if-block-false/_expected.html     |    0
 .../samples/if-block-false/data.json          |    3 +
 .../samples/if-block-false/main.svelte        |    7 +
 .../samples/if-block-true/_expected.html      |    1 +
 .../samples/if-block-true/data.json           |    3 +
 .../samples/if-block-true/main.svelte         |    7 +
 .../import-non-component/_expected.html       |    2 +
 .../samples/import-non-component/answer.js    |    1 +
 .../samples/import-non-component/main.svelte  |    7 +
 .../samples/import-non-component/problems.js  |    1 +
 .../samples/pre-tag/.editorconfig             |    2 +
 .../samples/pre-tag/_config.js                |    3 +
 .../samples/pre-tag/_expected.html            |   39 +
 .../samples/pre-tag/main.svelte               |   51 +
 .../samples/preserve-whitespaces/_config.js   |    6 +
 .../preserve-whitespaces/_expected.html       |   32 +
 .../samples/preserve-whitespaces/main.svelte  |   34 +
 .../samples/raw-mustaches/_expected.html      |    1 +
 .../samples/raw-mustaches/data.json           |    3 +
 .../samples/raw-mustaches/main.svelte         |    5 +
 .../samples/sanitize-name/[foo].svelte        |    1 +
 .../samples/sanitize-name/_expected.html      |    1 +
 .../samples/sanitize-name/main.svelte         |    5 +
 .../spread-attributes-boolean/_expected.html  |    2 +
 .../spread-attributes-boolean/main.svelte     |    2 +
 .../_expected.html                            |    5 +
 .../spread-attributes-white-space/main.svelte |   12 +
 .../samples/spread-attributes/_expected.html  |    1 +
 .../samples/spread-attributes/main.svelte     |    9 +
 .../samples/static-div/_expected.html         |    1 +
 .../samples/static-div/main.svelte            |    1 +
 .../samples/static-text/_expected.html        |    1 +
 .../samples/static-text/main.svelte           |    1 +
 .../samples/styles-nested/One.svelte          |   16 +
 .../samples/styles-nested/Two.svelte          |    7 +
 .../samples/styles-nested/_expected.css       |    2 +
 .../samples/styles-nested/_expected.html      |    8 +
 .../samples/styles-nested/main.svelte         |   13 +
 .../samples/styles/_expected.css              |    1 +
 .../samples/styles/_expected.html             |    1 +
 .../samples/styles/main.svelte                |    7 +
 .../samples/text-area-bind/_expected.html     |    1 +
 .../samples/text-area-bind/main.svelte        |    5 +
 .../samples/textarea-children/_expected.html  |    3 +
 .../samples/textarea-children/main.svelte     |    7 +
 .../samples/textarea-content/.editorconfig    |    2 +
 .../samples/textarea-content/_config.js       |    3 +
 .../samples/textarea-content/_expected.html   |   28 +
 .../samples/textarea-content/main.svelte      |   40 +
 .../samples/textarea-value/_expected.html     |    1 +
 .../samples/textarea-value/main.svelte        |    5 +
 .../samples/triple/_expected.html             |    1 +
 .../samples/triple/main.svelte                |    5 +
 test/setup.js                                 |   38 +
 test/sourcemaps/helpers.ts                    |  127 +
 test/sourcemaps/index.ts                      |  120 +
 .../samples/attached-sourcemap/_config.js     |   44 +
 .../samples/attached-sourcemap/input.svelte   |   11 +
 .../samples/attached-sourcemap/test.js        |   45 +
 test/sourcemaps/samples/basic/input.svelte    |    5 +
 test/sourcemaps/samples/basic/test.js         |   34 +
 .../binding-shorthand.skip/input.svelte       |    7 +
 .../samples/binding-shorthand.skip/test.js    |   22 +
 test/sourcemaps/samples/binding/input.svelte  |    5 +
 test/sourcemaps/samples/binding/test.js       |   34 +
 .../samples/compile-option-dev/_config.js     |   21 +
 .../samples/compile-option-dev/input.svelte   |   15 +
 .../samples/compile-option-dev/test.js        |   40 +
 test/sourcemaps/samples/css/input.svelte      |    7 +
 test/sourcemaps/samples/css/test.js           |   17 +
 .../samples/decoded-sourcemap/_config.js      |   15 +
 .../samples/decoded-sourcemap/input.svelte    |    2 +
 .../samples/decoded-sourcemap/test.js         |   19 +
 .../samples/each-block/input.svelte           |    3 +
 test/sourcemaps/samples/each-block/test.js    |   18 +
 test/sourcemaps/samples/external/_config.js   |   24 +
 test/sourcemaps/samples/external/input.svelte |    3 +
 test/sourcemaps/samples/external/test.js      |   26 +
 test/sourcemaps/samples/markup/input.svelte   |    2 +
 test/sourcemaps/samples/markup/test.js        |   34 +
 .../samples/no-sourcemap/_config.js           |    5 +
 .../samples/no-sourcemap/input.svelte         |   11 +
 test/sourcemaps/samples/no-sourcemap/test.js  |    4 +
 .../samples/only-css-sourcemap/_config.js     |    5 +
 .../samples/only-css-sourcemap/input.svelte   |   11 +
 .../samples/only-css-sourcemap/test.js        |    4 +
 .../samples/only-js-sourcemap/_config.js      |    5 +
 .../samples/only-js-sourcemap/input.svelte    |   11 +
 .../samples/only-js-sourcemap/test.js         |    4 +
 .../samples/preprocessed-markup/_config.js    |   12 +
 .../samples/preprocessed-markup/input.svelte  |    5 +
 .../samples/preprocessed-markup/test.js       |   32 +
 .../samples/preprocessed-multiple/_config.js  |   25 +
 .../preprocessed-multiple/input.svelte        |    9 +
 .../samples/preprocessed-multiple/test.js     |   32 +
 .../samples/preprocessed-no-map/_config.js    |   15 +
 .../samples/preprocessed-no-map/input.svelte  |   13 +
 .../samples/preprocessed-no-map/test.js       |   37 +
 .../samples/preprocessed-script/_config.js    |   12 +
 .../samples/preprocessed-script/input.svelte  |    9 +
 .../samples/preprocessed-script/test.js       |   32 +
 .../samples/preprocessed-styles/_config.js    |   12 +
 .../samples/preprocessed-styles/input.svelte  |   12 +
 .../samples/preprocessed-styles/test.js       |   32 +
 .../samples/script-after-comment/input.svelte |    9 +
 .../samples/script-after-comment/test.js      |   16 +
 test/sourcemaps/samples/script/input.svelte   |    9 +
 test/sourcemaps/samples/script/test.js        |   16 +
 .../samples/source-map-generator/_config.js   |   25 +
 .../samples/source-map-generator/input.svelte |   12 +
 .../samples/source-map-generator/test.js      |    1 +
 .../_config.js                                |   33 +
 .../input.svelte                              |    2 +
 .../test.js                                   |    3 +
 .../samples/sourcemap-basename/_config.js     |   33 +
 .../samples/sourcemap-basename/input.svelte   |    3 +
 .../samples/sourcemap-basename/test.js        |   15 +
 .../samples/sourcemap-concat/_config.js       |   15 +
 .../samples/sourcemap-concat/input.svelte     |    3 +
 .../samples/sourcemap-concat/test.js          |    9 +
 .../samples/sourcemap-names/_config.js        |   33 +
 .../samples/sourcemap-names/input.svelte      |   12 +
 .../samples/sourcemap-names/test.js           |   42 +
 .../samples/sourcemap-offsets/_config.js      |   18 +
 .../samples/sourcemap-offsets/input.svelte    |    9 +
 .../samples/sourcemap-offsets/test.js         |   19 +
 .../samples/sourcemap-sources/_config.js      |   60 +
 .../samples/sourcemap-sources/input.svelte    |    4 +
 .../samples/sourcemap-sources/test.js         |   29 +
 .../samples/static-no-script/input.svelte     |    1 +
 .../samples/static-no-script/test.js          |    9 +
 .../samples/two-scripts/input.svelte          |    9 +
 test/sourcemaps/samples/two-scripts/test.js   |   16 +
 test/sourcemaps/samples/typescript/_config.js |   26 +
 .../samples/typescript/input.svelte           |   18 +
 test/sourcemaps/samples/typescript/test.js    |   21 +
 test/stats/index.ts                           |   60 +
 test/stats/samples/basic/_config.js           |    6 +
 test/stats/samples/basic/input.svelte         |    0
 test/store/index.ts                           |  414 +
 test/svelte-styles-csp/index.ts               |   41 +
 test/test.ts                                  |   21 +
 test/tsconfig.json                            |   10 +
 test/utils/index.ts                           |   16 +
 test/validator/index.ts                       |  135 +
 .../samples/a11y-alt-text/input.svelte        |   11 +
 .../samples/a11y-alt-text/warnings.json       |   65 +
 .../a11y-anchor-has-content/input.svelte      |    2 +
 .../a11y-anchor-has-content/warnings.json     |   15 +
 .../a11y-anchor-in-svg-is-valid/input.svelte  |    3 +
 .../a11y-anchor-in-svg-is-valid/warnings.json |   47 +
 .../samples/a11y-anchor-is-valid/input.svelte |    8 +
 .../a11y-anchor-is-valid/warnings.json        |   92 +
 .../samples/a11y-aria-props/input.svelte      |    1 +
 .../samples/a11y-aria-props/warnings.json     |   33 +
 .../samples/a11y-aria-role/input.svelte       |    1 +
 .../samples/a11y-aria-role/warnings.json      |   17 +
 .../input.svelte                              |    2 +
 .../warnings.json                             |   33 +
 .../errors.json                               |   17 +
 .../input.svelte                              |    6 +
 .../input.svelte                              |   10 +
 .../warnings.json                             |    1 +
 .../a11y-figcaption-right-place/input.svelte  |    7 +
 .../a11y-figcaption-right-place/warnings.json |    1 +
 .../a11y-figcaption-wrong-place/input.svelte  |   19 +
 .../a11y-figcaption-wrong-place/warnings.json |   32 +
 .../a11y-heading-has-content/input.svelte     |    2 +
 .../a11y-heading-has-content/warnings.json    |   33 +
 .../samples/a11y-html-has-lang/input.svelte   |    9 +
 .../samples/a11y-html-has-lang/warnings.json  |   17 +
 .../a11y-iframe-has-title/input.svelte        |    5 +
 .../a11y-iframe-has-title/warnings.json       |   17 +
 .../a11y-img-redundant-alt/input.svelte       |    9 +
 .../a11y-img-redundant-alt/warnings.json      |   47 +
 .../a11y-in-foreign-namespace/input.svelte    |    7 +
 .../a11y-in-foreign-namespace/warnings.json   |    1 +
 .../input.svelte                              |    6 +
 .../warnings.json                             |   32 +
 .../a11y-media-has-caption/input.svelte       |    4 +
 .../a11y-media-has-caption/warnings.json      |   32 +
 .../input.svelte                              |   15 +
 .../warnings.json                             |   62 +
 .../samples/a11y-no-access-key/input.svelte   |    1 +
 .../samples/a11y-no-access-key/warnings.json  |   15 +
 .../samples/a11y-no-autofocus/input.svelte    |    1 +
 .../samples/a11y-no-autofocus/warnings.json   |   15 +
 .../a11y-no-distracting-elements/input.svelte |    2 +
 .../warnings.json                             |   33 +
 .../a11y-no-redundant-roles/input.svelte      |   44 +
 .../a11y-no-redundant-roles/warnings.json     |  632 ++
 .../a11y-not-on-components/input.svelte       |    7 +
 .../a11y-not-on-components/warnings.json      |   17 +
 .../validator/samples/a11y-scope/input.svelte |    1 +
 .../samples/a11y-scope/warnings.json          |   17 +
 .../a11y-tabindex-no-positive/input.svelte    |    8 +
 .../a11y-tabindex-no-positive/warnings.json   |   17 +
 .../samples/action-invalid/input.svelte       |    1 +
 .../samples/action-invalid/warnings.json      |   15 +
 .../samples/action-object/input.svelte        |   11 +
 .../samples/action-object/warnings.json       |   17 +
 .../samples/action-on-component/errors.json   |   15 +
 .../samples/action-on-component/input.svelte  |    7 +
 .../animation-comment-siblings/errors.json    |    1 +
 .../animation-comment-siblings/input.svelte   |    9 +
 .../samples/animation-duplicate/errors.json   |   15 +
 .../samples/animation-duplicate/input.svelte  |    8 +
 .../animation-each-with-const/errors.json     |    1 +
 .../animation-each-with-const/input.svelte    |   10 +
 .../errors.json                               |    1 +
 .../input.svelte                              |    7 +
 .../samples/animation-missing/input.svelte    |    7 +
 .../samples/animation-missing/warnings.json   |   15 +
 .../samples/animation-not-in-each/errors.json |   15 +
 .../animation-not-in-each/input.svelte        |    5 +
 .../animation-not-in-keyed-each/errors.json   |   15 +
 .../animation-not-in-keyed-each/input.svelte  |    8 +
 .../samples/animation-siblings/errors.json    |   15 +
 .../samples/animation-siblings/input.svelte   |    8 +
 .../attribute-expected-equals/errors.json     |   15 +
 .../attribute-expected-equals/input.svelte    |    5 +
 .../attribute-invalid-name-2/errors.json      |   15 +
 .../attribute-invalid-name-2/input.svelte     |    1 +
 .../attribute-invalid-name-3/errors.json      |   15 +
 .../attribute-invalid-name-3/input.svelte     |    1 +
 .../attribute-invalid-name-4/errors.json      |   15 +
 .../attribute-invalid-name-4/input.svelte     |    1 +
 .../attribute-invalid-name-5/errors.json      |   15 +
 .../attribute-invalid-name-5/input.svelte     |    1 +
 .../attribute-invalid-name/errors.json        |   15 +
 .../attribute-invalid-name/input.svelte       |    1 +
 .../await-component-is-used/input.svelte      |   13 +
 .../await-component-is-used/warnings.json     |    1 +
 .../samples/await-no-catch/input.svelte       |    9 +
 .../samples/await-no-catch/warnings.json      |    1 +
 .../await-shorthand-no-catch/input.svelte     |    7 +
 .../await-shorthand-no-catch/warnings.json    |    1 +
 .../await-shorthand-no-then/input.svelte      |    7 +
 .../await-shorthand-no-then/warnings.json     |    1 +
 .../samples/binding-await-catch/errors.json   |    9 +
 .../samples/binding-await-catch/input.svelte  |    7 +
 .../samples/binding-await-then-2/errors.json  |    9 +
 .../samples/binding-await-then-2/input.svelte |    7 +
 .../samples/binding-await-then/errors.json    |    9 +
 .../samples/binding-await-then/input.svelte   |    6 +
 .../samples/binding-const-field/errors.json   |    1 +
 .../samples/binding-const-field/input.svelte  |    7 +
 .../samples/binding-const/errors.json         |   15 +
 .../samples/binding-const/input.svelte        |    5 +
 .../binding-dimensions-svg-child/errors.json  |   15 +
 .../binding-dimensions-svg-child/input.svelte |    7 +
 .../binding-dimensions-svg/errors.json        |   15 +
 .../binding-dimensions-svg/input.svelte       |    5 +
 .../binding-dimensions-void/errors.json       |   15 +
 .../binding-dimensions-void/input.svelte      |    5 +
 .../samples/binding-input-checked/errors.json |   15 +
 .../binding-input-checked/input.svelte        |    5 +
 .../binding-input-type-boolean/errors.json    |   15 +
 .../binding-input-type-boolean/input.svelte   |    5 +
 .../binding-input-type-dynamic/errors.json    |   15 +
 .../binding-input-type-dynamic/input.svelte   |    6 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    6 +
 .../binding-invalid-on-element/errors.json    |   15 +
 .../binding-invalid-on-element/input.svelte   |    5 +
 .../binding-invalid-value-global/errors.json  |   15 +
 .../binding-invalid-value-global/input.svelte |    4 +
 .../samples/binding-invalid-value/errors.json |   15 +
 .../binding-invalid-value/input.svelte        |    2 +
 .../samples/binding-invalid/errors.json       |   15 +
 .../samples/binding-invalid/input.svelte      |    5 +
 .../validator/samples/binding-let/errors.json |   15 +
 .../samples/binding-let/input.svelte          |    7 +
 .../errors.json                               |   15 +
 .../input.svelte                              |   10 +
 .../input.svelte                              |   13 +
 .../warnings.json                             |    1 +
 .../samples/component-dynamic/input.svelte    |   18 +
 .../samples/component-dynamic/options.json    |    3 +
 .../samples/component-dynamic/warnings.json   |   47 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    6 +
 .../errors.json                               |    9 +
 .../input.svelte                              |    7 +
 .../component-name-lowercase/input.svelte     |    7 +
 .../component-name-lowercase/warnings.json    |   17 +
 .../samples/component-namespaced/input.svelte |    5 +
 .../component-namespaced/warnings.json        |    1 +
 .../errors.json                               |    8 +
 .../input.svelte                              |    2 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    1 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    7 +
 .../component-slot-dynamic/errors.json        |   15 +
 .../component-slot-dynamic/input.svelte       |    1 +
 .../errors.json                               |    8 +
 .../input.svelte                              |    2 +
 .../errors.json                               |    9 +
 .../input.svelte                              |   14 +
 .../errors.json                               |    1 +
 .../input.svelte                              |   15 +
 .../component-slotted-each-block/errors.json  |   15 +
 .../component-slotted-each-block/input.svelte |    9 +
 .../component-slotted-if-block/errors.json    |   15 +
 .../component-slotted-if-block/input.svelte   |    9 +
 .../samples/const-tag-conflict-1/errors.json  |    9 +
 .../samples/const-tag-conflict-1/input.svelte |    8 +
 .../samples/const-tag-conflict-2/errors.json  |    9 +
 .../samples/const-tag-conflict-2/input.svelte |    7 +
 .../samples/const-tag-cyclical/errors.json    |    9 +
 .../samples/const-tag-cyclical/input.svelte   |    8 +
 .../const-tag-out-of-scope/input.svelte       |   10 +
 .../const-tag-out-of-scope/warnings.json      |   17 +
 .../samples/const-tag-placement-1/errors.json |    9 +
 .../const-tag-placement-1/input.svelte        |    5 +
 .../samples/const-tag-placement-2/errors.json |    9 +
 .../const-tag-placement-2/input.svelte        |    9 +
 .../samples/const-tag-readonly-1/errors.json  |    9 +
 .../samples/const-tag-readonly-1/input.svelte |    8 +
 .../samples/const-tag-readonly-2/errors.json  |    9 +
 .../samples/const-tag-readonly-2/input.svelte |    8 +
 .../contenteditable-dynamic/errors.json       |   15 +
 .../contenteditable-dynamic/input.svelte      |    6 +
 .../contenteditable-missing/errors.json       |   15 +
 .../contenteditable-missing/input.svelte      |    4 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    5 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    8 +
 .../css-invalid-global-placement/errors.json  |   15 +
 .../css-invalid-global-placement/input.svelte |    5 +
 .../css-invalid-global-selector-2/errors.json |   17 +
 .../input.svelte                              |   18 +
 .../css-invalid-global-selector-3/errors.json |   17 +
 .../input.svelte                              |   12 +
 .../css-invalid-global-selector-4/errors.json |   17 +
 .../input.svelte                              |    9 +
 .../css-invalid-global-selector-5/errors.json |   17 +
 .../input.svelte                              |   12 +
 .../css-invalid-global-selector-6/errors.json |   17 +
 .../input.svelte                              |   12 +
 .../css-invalid-global-selector/errors.json   |   17 +
 .../css-invalid-global-selector/input.svelte  |   18 +
 .../samples/debug-invalid-args/errors.json    |   15 +
 .../samples/debug-invalid-args/input.svelte   |    4 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    3 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    3 +
 .../samples/default-export/errors.json        |   15 +
 .../samples/default-export/input.svelte       |    3 +
 .../directive-non-expression/errors.json      |   15 +
 .../directive-non-expression/input.svelte     |    1 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    1 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    3 +
 .../dollar-global-in-markup/errors.json       |   15 +
 .../dollar-global-in-markup/input.svelte      |    1 +
 .../dollar-global-in-script/errors.json       |   15 +
 .../dollar-global-in-script/input.svelte      |    3 +
 .../dynamic-element-invalid-tag/errors.json   |   17 +
 .../dynamic-element-invalid-tag/input.svelte  |    3 +
 .../dynamic-element-missing-tag/errors.json   |   15 +
 .../dynamic-element-missing-tag/input.svelte  |    3 +
 .../samples/dynamic-element-this/errors.json  |   15 +
 .../samples/dynamic-element-this/input.svelte |    3 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    7 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    3 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    3 +
 .../each-block-invalid-context/errors.json    |   15 +
 .../each-block-invalid-context/input.svelte   |    3 +
 .../each-block-multiple-children/_config.js   |    3 +
 .../each-block-multiple-children/input.svelte |   15 +
 .../warnings.json                             |    1 +
 .../samples/empty-block/input.svelte          |    9 +
 .../samples/empty-block/warnings.json         |   32 +
 .../samples/error-mode-warn/input.svelte      |    6 +
 .../samples/error-mode-warn/options.json      |    3 +
 .../samples/error-mode-warn/warnings.json     |   47 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    3 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    3 +
 .../event-modifiers-invalid/errors.json       |   15 +
 .../event-modifiers-invalid/input.svelte      |    1 +
 .../samples/event-modifiers-legacy/_config.js |    3 +
 .../event-modifiers-legacy/errors.json        |   15 +
 .../event-modifiers-legacy/input.svelte       |    1 +
 .../event-modifiers-redundant/input.svelte    |   12 +
 .../event-modifiers-redundant/warnings.json   |   32 +
 .../samples/ignore-warning/input.svelte       |    7 +
 .../samples/ignore-warning/warnings.json      |   32 +
 .../ignore-warnings-cumulative/input.svelte   |   17 +
 .../ignore-warnings-cumulative/warnings.json  |   17 +
 .../ignore-warnings-newline/input.svelte      |    8 +
 .../ignore-warnings-newline/warnings.json     |   17 +
 .../ignore-warnings-stacked/input.svelte      |    8 +
 .../ignore-warnings-stacked/warnings.json     |   17 +
 .../samples/ignore-warnings/input.svelte      |    7 +
 .../samples/ignore-warnings/warnings.json     |   17 +
 .../illegal-variable-declaration/errors.json  |   17 +
 .../illegal-variable-declaration/input.svelte |    9 +
 .../validator/samples/import-meta/errors.json |    1 +
 .../samples/import-meta/input.svelte          |    6 +
 .../invalid-empty-css-declaration/errors.json |   12 +
 .../input.svelte                              |   11 +
 .../missing-component-global/input.svelte     |    3 +
 .../missing-component-global/warnings.json    |   15 +
 .../samples/missing-component/input.svelte    |    3 +
 .../samples/missing-component/warnings.json   |   15 +
 .../input.svelte                              |    1 +
 .../warnings.json                             |   17 +
 .../input.svelte                              |    5 +
 .../warnings.json                             |    7 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    7 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    7 +
 .../namespace-invalid-unguessable/errors.json |   15 +
 .../input.svelte                              |    1 +
 .../samples/namespace-invalid/errors.json     |   15 +
 .../samples/namespace-invalid/input.svelte    |    1 +
 .../samples/namespace-non-literal/errors.json |   15 +
 .../namespace-non-literal/input.svelte        |    1 +
 .../samples/non-empty-block-dev/_config.js    |    3 +
 .../samples/non-empty-block-dev/input.svelte  |    7 +
 .../samples/non-empty-block-dev/warnings.json |    1 +
 .../reactive-declaration-cyclical/errors.json |    7 +
 .../input.svelte                              |    7 +
 .../input.svelte                              |    8 +
 .../warnings.json                             |    7 +
 .../input.svelte                              |    9 +
 .../warnings.json                             |    2 +
 .../reactive-module-variable-2/input.svelte   |    7 +
 .../reactive-module-variable-2/warnings.json  |    1 +
 .../reactive-module-variable/input.svelte     |    6 +
 .../reactive-module-variable/warnings.json    |   17 +
 .../ref-not-supported-in-css/errors.json      |   15 +
 .../ref-not-supported-in-css/input.svelte     |   11 +
 .../samples/ref-not-supported/errors.json     |   15 +
 .../samples/ref-not-supported/input.svelte    |    1 +
 .../script-invalid-context/errors.json        |   15 +
 .../script-invalid-context/input.svelte       |    3 +
 .../samples/select-multiple/input.svelte      |    7 +
 .../samples/silence-warnings-2/input.svelte   |    9 +
 .../samples/silence-warnings-2/warnings.json  |    1 +
 .../samples/silence-warnings/input.svelte     |   15 +
 .../samples/silence-warnings/warnings.json    |    1 +
 .../slot-attribute-invalid/errors.json        |   15 +
 .../slot-attribute-invalid/input.svelte       |    1 +
 .../svelte-slot-placement-2/errors.json       |    9 +
 .../svelte-slot-placement-2/input.svelte      |    7 +
 .../samples/svelte-slot-placement/errors.json |    9 +
 .../svelte-slot-placement/input.svelte        |   11 +
 .../input.svelte                              |   10 +
 .../warnings.json                             |    1 +
 .../input.svelte                              |    1 +
 .../warnings.json                             |   15 +
 .../_config.js                                |    3 +
 .../input.svelte                              |    1 +
 .../validator/samples/tag-invalid/errors.json |   15 +
 .../samples/tag-invalid/input.svelte          |    1 +
 .../samples/tag-non-string/errors.json        |   15 +
 .../samples/tag-non-string/input.svelte       |    1 +
 .../textarea-value-children/errors.json       |   15 +
 .../textarea-value-children/input.svelte      |    3 +
 .../samples/title-no-attributes/errors.json   |   15 +
 .../samples/title-no-attributes/input.svelte  |    3 +
 .../samples/title-no-children/errors.json     |   15 +
 .../samples/title-no-children/input.svelte    |    3 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    6 +
 .../transition-duplicate-in/errors.json       |   15 +
 .../transition-duplicate-in/input.svelte      |    6 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    6 +
 .../transition-duplicate-out/errors.json      |   15 +
 .../transition-duplicate-out/input.svelte     |    6 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    6 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    6 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    6 +
 .../samples/transition-missing/input.svelte   |    1 +
 .../samples/transition-missing/warnings.json  |   15 +
 .../transition-on-component/errors.json       |   15 +
 .../transition-on-component/input.svelte      |    7 +
 .../undefined-value-global/input.svelte       |    5 +
 .../undefined-value-global/warnings.json      |   15 +
 .../samples/undefined-value/input.svelte      |    6 +
 .../samples/undefined-value/warnings.json     |   15 +
 .../unreferenced-variables-each/input.svelte  |   20 +
 .../unreferenced-variables-each/warnings.json |   32 +
 .../unreferenced-variables/input.svelte       |   48 +
 .../unreferenced-variables/warnings.json      |   77 +
 .../samples/use-the-platform/input.svelte     |    2 +
 .../samples/use-the-platform/warnings.json    |   32 +
 .../errors.json                               |   15 +
 .../input.svelte                              |    1 +
 .../window-binding-invalid-value/errors.json  |   15 +
 .../window-binding-invalid-value/input.svelte |    1 +
 .../window-binding-invalid-width/errors.json  |   15 +
 .../window-binding-invalid-width/input.svelte |    1 +
 .../window-binding-invalid/errors.json        |   15 +
 .../window-binding-invalid/input.svelte       |    1 +
 .../samples/window-binding-online/errors.json |    1 +
 .../window-binding-online/input.svelte        |    5 +
 test/vars/index.ts                            |   54 +
 .../vars/samples/$$props-logicless/_config.js |   17 +
 .../samples/$$props-logicless/input.svelte    |    1 +
 test/vars/samples/$$props/_config.js          |   17 +
 test/vars/samples/$$props/input.svelte        |    3 +
 test/vars/samples/actions/_config.js          |   28 +
 test/vars/samples/actions/input.svelte        |    7 +
 test/vars/samples/animations/_config.js       |   28 +
 test/vars/samples/animations/input.svelte     |   11 +
 test/vars/samples/assumed-global/_config.js   |    5 +
 test/vars/samples/assumed-global/input.svelte |    1 +
 .../samples/component-namespaced/_config.js   |   17 +
 .../samples/component-namespaced/input.svelte |    5 +
 .../vars/samples/duplicate-globals/_config.js |    5 +
 .../samples/duplicate-globals/input.svelte    |    7 +
 .../duplicate-non-hoistable/_config.js        |   17 +
 .../duplicate-non-hoistable/input.svelte      |    9 +
 test/vars/samples/duplicate-vars/_config.js   |   28 +
 test/vars/samples/duplicate-vars/input.svelte |    9 +
 .../vars/samples/implicit-reactive/_config.js |   28 +
 .../samples/implicit-reactive/input.svelte    |    6 +
 test/vars/samples/imports/_config.js          |   39 +
 test/vars/samples/imports/input.svelte        |    5 +
 test/vars/samples/modules-vars/_config.js     |   72 +
 test/vars/samples/modules-vars/input.svelte   |   18 +
 .../mutated-vs-reassigned-bindings/_config.js |   28 +
 .../input.svelte                              |    7 +
 .../samples/mutated-vs-reassigned/_config.js  |   28 +
 .../mutated-vs-reassigned/input.svelte        |    7 +
 test/vars/samples/props/_config.js            |   50 +
 test/vars/samples/props/input.svelte          |   19 +
 .../samples/referenced-from-script/_config.js |  160 +
 .../referenced-from-script/input.svelte       |   16 +
 test/vars/samples/store-referenced/_config.js |   28 +
 .../samples/store-referenced/input.svelte     |    5 +
 .../samples/store-unreferenced/_config.js     |   28 +
 .../samples/store-unreferenced/input.svelte   |    4 +
 .../samples/template-references/_config.js    |   39 +
 .../samples/template-references/input.svelte  |    9 +
 test/vars/samples/transitions/_config.js      |   72 +
 test/vars/samples/transitions/input.svelte    |   13 +
 test/vars/samples/undeclared/_config.js       |    5 +
 test/vars/samples/undeclared/input.svelte     |    3 +
 .../vars/samples/vars-report-false/_config.js |    9 +
 .../samples/vars-report-false/input.svelte    |    5 +
 .../vars-report-full-noscript/_config.js      |   19 +
 .../vars-report-full-noscript/input.svelte    |    1 +
 .../vars-report-full-script/_config.js        |   31 +
 .../vars-report-full-script/input.svelte      |    5 +
 test/vars/samples/vars-report-full/_config.js |   19 +
 .../samples/vars-report-full/input.svelte     |    3 +
 tsconfig.json                                 |   34 +
 5098 files changed, 130383 insertions(+)
 create mode 100644 .editorconfig
 create mode 100644 .eslintignore
 create mode 100644 .eslintrc.js
 create mode 100644 .gitattributes
 create mode 100644 .github/FUNDING.yml
 create mode 100644 .github/ISSUE_TEMPLATE.md
 create mode 100644 .github/ISSUE_TEMPLATE/bug_report.yml
 create mode 100644 .github/ISSUE_TEMPLATE/config.yml
 create mode 100644 .github/ISSUE_TEMPLATE/feature_request.yml
 create mode 100644 .github/PULL_REQUEST_TEMPLATE.md
 create mode 100644 .github/workflows/ci.yml
 create mode 100644 .github/workflows/docs.yml
 create mode 100644 .gitignore
 create mode 100644 .mocharc.js
 create mode 100644 CHANGELOG.md
 create mode 100644 CODE_OF_CONDUCT.md
 create mode 100644 CONTRIBUTING.md
 create mode 100644 LICENSE.md
 create mode 100644 README.md
 create mode 100644 check_publish_env.js
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 register.js
 create mode 100644 rollup.config.js
 create mode 100644 site/content/blog/2016-11-26-frameworks-without-the-framework.md
 create mode 100644 site/content/blog/2017-08-07-the-easiest-way-to-get-started.md
 create mode 100644 site/content/blog/2017-09-06-the-zen-of-just-writing-css.md
 create mode 100644 site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md
 create mode 100644 site/content/blog/2018-04-18-version-2.md
 create mode 100644 site/content/blog/2018-12-26-svelte-css-in-js.md
 create mode 100644 site/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md
 create mode 100644 site/content/blog/2019-01-31-svelte-on-the-changelog.md
 create mode 100644 site/content/blog/2019-04-15-setting-up-your-editor.md
 create mode 100644 site/content/blog/2019-04-16-svelte-for-new-developers.md
 create mode 100644 site/content/blog/2019-04-20-write-less-code.md
 create mode 100644 site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
 create mode 100644 site/content/blog/2020-07-17-svelte-and-typescript.md
 create mode 100644 site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md
 create mode 100644 site/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md
 create mode 100644 site/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md
 create mode 100644 site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md
 create mode 100644 site/content/blog/2021-01-01-whats-new-in-svelte-january-2021.md
 create mode 100644 site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md
 create mode 100644 site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md
 create mode 100644 site/content/blog/2021-03-23-sveltekit-beta.md
 create mode 100644 site/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md
 create mode 100644 site/content/blog/2021-05-01-whats-new-in-svelte-may-2021.md
 create mode 100644 site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md
 create mode 100644 site/content/blog/2021-07-01-whats-new-in-svelte-july-2021.md
 create mode 100644 site/content/blog/2021-08-01-whats-new-in-svelte-august-2021.md
 create mode 100644 site/content/blog/2021-09-01-whats-new-in-svelte-september-2021.md
 create mode 100644 site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md
 create mode 100644 site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md
 create mode 100644 site/content/blog/2021-12-01-whats-new-in-svelte-december-2021.md
 create mode 100644 site/content/blog/2022-01-01-whats-new-in-svelte-january-2022.md
 create mode 100644 site/content/blog/2022-01-13-accelerating-sveltes-development.md
 create mode 100644 site/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md
 create mode 100644 site/content/blog/2022-03-01-whats-new-in-svelte-march-2022.md
 create mode 100644 site/content/blog/2022-04-01-whats-new-in-svelte-april-2022.md
 create mode 100644 site/content/blog/2022-05-01-whats-new-in-svelte-may-2022.md
 create mode 100644 site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md
 create mode 100644 site/content/docs/00-introduction.md
 create mode 100644 site/content/docs/01-component-format.md
 create mode 100644 site/content/docs/02-template-syntax.md
 create mode 100644 site/content/docs/03-run-time.md
 create mode 100644 site/content/docs/04-compile-time.md
 create mode 100644 site/content/docs/05-accessibility-warnings.md
 create mode 100644 site/content/examples/00-introduction/00-hello-world/App.svelte
 create mode 100644 site/content/examples/00-introduction/00-hello-world/meta.json
 create mode 100644 site/content/examples/00-introduction/01-dynamic-attributes/App.svelte
 create mode 100644 site/content/examples/00-introduction/01-dynamic-attributes/meta.json
 create mode 100644 site/content/examples/00-introduction/02-styling/App.svelte
 create mode 100644 site/content/examples/00-introduction/02-styling/meta.json
 create mode 100644 site/content/examples/00-introduction/03-nested-components/App.svelte
 create mode 100644 site/content/examples/00-introduction/03-nested-components/Nested.svelte
 create mode 100644 site/content/examples/00-introduction/03-nested-components/meta.json
 create mode 100644 site/content/examples/00-introduction/04-html-tags/App.svelte
 create mode 100644 site/content/examples/00-introduction/04-html-tags/meta.json
 create mode 100644 site/content/examples/00-introduction/meta.json
 create mode 100644 site/content/examples/01-reactivity/00-reactive-assignments/App.svelte
 create mode 100644 site/content/examples/01-reactivity/00-reactive-assignments/meta.json
 create mode 100644 site/content/examples/01-reactivity/01-reactive-declarations/App.svelte
 create mode 100644 site/content/examples/01-reactivity/01-reactive-declarations/meta.json
 create mode 100644 site/content/examples/01-reactivity/02-reactive-statements/App.svelte
 create mode 100644 site/content/examples/01-reactivity/02-reactive-statements/meta.json
 create mode 100644 site/content/examples/01-reactivity/meta.json
 create mode 100644 site/content/examples/02-props/00-declaring-props/App.svelte
 create mode 100644 site/content/examples/02-props/00-declaring-props/Nested.svelte
 create mode 100644 site/content/examples/02-props/00-declaring-props/meta.json
 create mode 100644 site/content/examples/02-props/01-default-values/App.svelte
 create mode 100644 site/content/examples/02-props/01-default-values/Nested.svelte
 create mode 100644 site/content/examples/02-props/01-default-values/meta.json
 create mode 100644 site/content/examples/02-props/02-spread-props/App.svelte
 create mode 100644 site/content/examples/02-props/02-spread-props/Info.svelte
 create mode 100644 site/content/examples/02-props/02-spread-props/meta.json
 create mode 100644 site/content/examples/02-props/meta.json
 create mode 100644 site/content/examples/03-logic/00-if-blocks/App.svelte
 create mode 100644 site/content/examples/03-logic/00-if-blocks/meta.json
 create mode 100644 site/content/examples/03-logic/01-else-blocks/App.svelte
 create mode 100644 site/content/examples/03-logic/01-else-blocks/meta.json
 create mode 100644 site/content/examples/03-logic/02-else-if-blocks/App.svelte
 create mode 100644 site/content/examples/03-logic/02-else-if-blocks/meta.json
 create mode 100644 site/content/examples/03-logic/03-each-blocks/App.svelte
 create mode 100644 site/content/examples/03-logic/03-each-blocks/meta.json
 create mode 100644 site/content/examples/03-logic/04-keyed-each-blocks/App.svelte
 create mode 100644 site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte
 create mode 100644 site/content/examples/03-logic/04-keyed-each-blocks/meta.json
 create mode 100644 site/content/examples/03-logic/05-await-blocks/App.svelte
 create mode 100644 site/content/examples/03-logic/05-await-blocks/meta.json
 create mode 100644 site/content/examples/03-logic/meta.json
 create mode 100644 site/content/examples/04-events/00-dom-events/App.svelte
 create mode 100644 site/content/examples/04-events/00-dom-events/meta.json
 create mode 100644 site/content/examples/04-events/01-inline-handlers/App.svelte
 create mode 100644 site/content/examples/04-events/01-inline-handlers/meta.json
 create mode 100644 site/content/examples/04-events/02-event-modifiers/App.svelte
 create mode 100644 site/content/examples/04-events/02-event-modifiers/meta.json
 create mode 100644 site/content/examples/04-events/03-component-events/App.svelte
 create mode 100644 site/content/examples/04-events/03-component-events/Inner.svelte
 create mode 100644 site/content/examples/04-events/03-component-events/meta.json
 create mode 100644 site/content/examples/04-events/04-event-forwarding/App.svelte
 create mode 100644 site/content/examples/04-events/04-event-forwarding/Inner.svelte
 create mode 100644 site/content/examples/04-events/04-event-forwarding/Outer.svelte
 create mode 100644 site/content/examples/04-events/04-event-forwarding/meta.json
 create mode 100644 site/content/examples/04-events/05-dom-event-forwarding/App.svelte
 create mode 100644 site/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte
 create mode 100644 site/content/examples/04-events/05-dom-event-forwarding/meta.json
 create mode 100644 site/content/examples/04-events/meta.json
 create mode 100644 site/content/examples/05-bindings/00-text-inputs/App.svelte
 create mode 100644 site/content/examples/05-bindings/00-text-inputs/meta.json
 create mode 100644 site/content/examples/05-bindings/01-numeric-inputs/App.svelte
 create mode 100644 site/content/examples/05-bindings/01-numeric-inputs/meta.json
 create mode 100644 site/content/examples/05-bindings/02-checkbox-inputs/App.svelte
 create mode 100644 site/content/examples/05-bindings/02-checkbox-inputs/meta.json
 create mode 100644 site/content/examples/05-bindings/03-group-inputs/App.svelte
 create mode 100644 site/content/examples/05-bindings/03-group-inputs/meta.json
 create mode 100644 site/content/examples/05-bindings/04-textarea-inputs/App.svelte
 create mode 100644 site/content/examples/05-bindings/04-textarea-inputs/meta.json
 create mode 100644 site/content/examples/05-bindings/05-file-inputs/App.svelte
 create mode 100644 site/content/examples/05-bindings/05-file-inputs/meta.json
 create mode 100644 site/content/examples/05-bindings/06-select-bindings/App.svelte
 create mode 100644 site/content/examples/05-bindings/06-select-bindings/meta.json
 create mode 100644 site/content/examples/05-bindings/07-multiple-select-bindings/App.svelte
 create mode 100644 site/content/examples/05-bindings/07-multiple-select-bindings/meta.json
 create mode 100644 site/content/examples/05-bindings/08-each-block-bindings/App.svelte
 create mode 100644 site/content/examples/05-bindings/08-each-block-bindings/meta.json
 create mode 100644 site/content/examples/05-bindings/09-media-elements/App.svelte
 create mode 100644 site/content/examples/05-bindings/09-media-elements/meta.json
 create mode 100644 site/content/examples/05-bindings/10-dimensions/App.svelte
 create mode 100644 site/content/examples/05-bindings/10-dimensions/meta.json
 create mode 100644 site/content/examples/05-bindings/11-bind-this/App.svelte
 create mode 100644 site/content/examples/05-bindings/11-bind-this/meta.json
 create mode 100644 site/content/examples/05-bindings/12-component-bindings/App.svelte
 create mode 100644 site/content/examples/05-bindings/12-component-bindings/Keypad.svelte
 create mode 100644 site/content/examples/05-bindings/12-component-bindings/meta.json
 create mode 100644 site/content/examples/05-bindings/meta.json
 create mode 100644 site/content/examples/06-lifecycle/00-onmount/App.svelte
 create mode 100644 site/content/examples/06-lifecycle/00-onmount/meta.json
 create mode 100644 site/content/examples/06-lifecycle/01-ondestroy/App.svelte
 create mode 100644 site/content/examples/06-lifecycle/01-ondestroy/meta.json
 create mode 100644 site/content/examples/06-lifecycle/01-ondestroy/utils.js
 create mode 100644 site/content/examples/06-lifecycle/02-update/App.svelte
 create mode 100644 site/content/examples/06-lifecycle/02-update/meta.json
 create mode 100644 site/content/examples/06-lifecycle/03-tick/App.svelte
 create mode 100644 site/content/examples/06-lifecycle/03-tick/meta.json
 create mode 100644 site/content/examples/06-lifecycle/meta.json
 create mode 100644 site/content/examples/07-stores/00-writable-stores/App.svelte
 create mode 100644 site/content/examples/07-stores/00-writable-stores/Decrementer.svelte
 create mode 100644 site/content/examples/07-stores/00-writable-stores/Incrementer.svelte
 create mode 100644 site/content/examples/07-stores/00-writable-stores/Resetter.svelte
 create mode 100644 site/content/examples/07-stores/00-writable-stores/meta.json
 create mode 100644 site/content/examples/07-stores/00-writable-stores/stores.js
 create mode 100644 site/content/examples/07-stores/01-auto-subscriptions/App.svelte
 create mode 100644 site/content/examples/07-stores/01-auto-subscriptions/Decrementer.svelte
 create mode 100644 site/content/examples/07-stores/01-auto-subscriptions/Incrementer.svelte
 create mode 100644 site/content/examples/07-stores/01-auto-subscriptions/Resetter.svelte
 create mode 100644 site/content/examples/07-stores/01-auto-subscriptions/meta.json
 create mode 100644 site/content/examples/07-stores/01-auto-subscriptions/stores.js
 create mode 100644 site/content/examples/07-stores/02-readable-stores/App.svelte
 create mode 100644 site/content/examples/07-stores/02-readable-stores/meta.json
 create mode 100644 site/content/examples/07-stores/02-readable-stores/stores.js
 create mode 100644 site/content/examples/07-stores/03-derived-stores/App.svelte
 create mode 100644 site/content/examples/07-stores/03-derived-stores/meta.json
 create mode 100644 site/content/examples/07-stores/03-derived-stores/stores.js
 create mode 100644 site/content/examples/07-stores/04-custom-stores/App.svelte
 create mode 100644 site/content/examples/07-stores/04-custom-stores/meta.json
 create mode 100644 site/content/examples/07-stores/04-custom-stores/stores.js
 create mode 100644 site/content/examples/07-stores/meta.json
 create mode 100644 site/content/examples/08-motion/00-tweened/App.svelte
 create mode 100644 site/content/examples/08-motion/00-tweened/meta.json
 create mode 100644 site/content/examples/08-motion/01-spring/App.svelte
 create mode 100644 site/content/examples/08-motion/01-spring/meta.json
 create mode 100644 site/content/examples/08-motion/meta.json
 create mode 100644 site/content/examples/09-transitions/00-transition/App.svelte
 create mode 100644 site/content/examples/09-transitions/00-transition/meta.json
 create mode 100644 site/content/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
 create mode 100644 site/content/examples/09-transitions/01-adding-parameters-to-transitions/meta.json
 create mode 100644 site/content/examples/09-transitions/02-in-and-out/App.svelte
 create mode 100644 site/content/examples/09-transitions/02-in-and-out/meta.json
 create mode 100644 site/content/examples/09-transitions/03-custom-css-transitions/App.svelte
 create mode 100644 site/content/examples/09-transitions/03-custom-css-transitions/meta.json
 create mode 100644 site/content/examples/09-transitions/04-custom-js-transitions/App.svelte
 create mode 100644 site/content/examples/09-transitions/04-custom-js-transitions/meta.json
 create mode 100644 site/content/examples/09-transitions/05-transition-events/App.svelte
 create mode 100644 site/content/examples/09-transitions/05-transition-events/meta.json
 create mode 100644 site/content/examples/09-transitions/06-deferred-transitions/App.svelte
 create mode 100644 site/content/examples/09-transitions/06-deferred-transitions/images.js
 create mode 100644 site/content/examples/09-transitions/06-deferred-transitions/meta.json
 create mode 100644 site/content/examples/09-transitions/meta.json
 create mode 100644 site/content/examples/10-animations/00-animate/App.svelte
 create mode 100644 site/content/examples/10-animations/00-animate/meta.json
 create mode 100644 site/content/examples/10-animations/meta.json
 create mode 100644 site/content/examples/11-easing/00-easing/App.svelte
 create mode 100644 site/content/examples/11-easing/00-easing/Controls.svelte
 create mode 100644 site/content/examples/11-easing/00-easing/Grid.svelte
 create mode 100644 site/content/examples/11-easing/00-easing/eases.js
 create mode 100644 site/content/examples/11-easing/00-easing/meta.json
 create mode 100644 site/content/examples/11-easing/meta.json
 create mode 100644 site/content/examples/12-svg/01-clock/App.svelte
 create mode 100644 site/content/examples/12-svg/01-clock/meta.json
 create mode 100644 site/content/examples/12-svg/02-bar-chart/App.svelte
 create mode 100644 site/content/examples/12-svg/02-bar-chart/meta.json
 create mode 100644 site/content/examples/12-svg/03-area-chart/App.svelte
 create mode 100644 site/content/examples/12-svg/03-area-chart/data.js
 create mode 100644 site/content/examples/12-svg/03-area-chart/meta.json
 create mode 100644 site/content/examples/12-svg/04-scatterplot/App.svelte
 create mode 100644 site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte
 create mode 100644 site/content/examples/12-svg/04-scatterplot/data.js
 create mode 100644 site/content/examples/12-svg/04-scatterplot/meta.json
 create mode 100644 site/content/examples/12-svg/05-svg-transitions/App.svelte
 create mode 100644 site/content/examples/12-svg/05-svg-transitions/custom-transitions.js
 create mode 100644 site/content/examples/12-svg/05-svg-transitions/meta.json
 create mode 100644 site/content/examples/12-svg/05-svg-transitions/shape.js
 create mode 100644 site/content/examples/12-svg/meta.json
 create mode 100644 site/content/examples/13-actions/00-actions/App.svelte
 create mode 100644 site/content/examples/13-actions/00-actions/click_outside.js
 create mode 100644 site/content/examples/13-actions/00-actions/meta.json
 create mode 100644 site/content/examples/13-actions/01-adding-parameters-to-actions/App.svelte
 create mode 100644 site/content/examples/13-actions/01-adding-parameters-to-actions/longpress.js
 create mode 100644 site/content/examples/13-actions/01-adding-parameters-to-actions/meta.json
 create mode 100644 site/content/examples/13-actions/03-actions-pannable/App.svelte
 create mode 100644 site/content/examples/13-actions/03-actions-pannable/meta.json
 create mode 100644 site/content/examples/13-actions/03-actions-pannable/pannable.js
 create mode 100644 site/content/examples/13-actions/meta.json
 create mode 100644 site/content/examples/14-classes/00-classes/App.svelte
 create mode 100644 site/content/examples/14-classes/00-classes/meta.json
 create mode 100644 site/content/examples/14-classes/01-class-shorthand/App.svelte
 create mode 100644 site/content/examples/14-classes/01-class-shorthand/meta.json
 create mode 100644 site/content/examples/14-classes/meta.json
 create mode 100644 site/content/examples/15-composition/00-slots/App.svelte
 create mode 100644 site/content/examples/15-composition/00-slots/Box.svelte
 create mode 100644 site/content/examples/15-composition/00-slots/meta.json
 create mode 100644 site/content/examples/15-composition/01-slot-fallbacks/App.svelte
 create mode 100644 site/content/examples/15-composition/01-slot-fallbacks/Box.svelte
 create mode 100644 site/content/examples/15-composition/01-slot-fallbacks/meta.json
 create mode 100644 site/content/examples/15-composition/02-named-slots/App.svelte
 create mode 100644 site/content/examples/15-composition/02-named-slots/ContactCard.svelte
 create mode 100644 site/content/examples/15-composition/02-named-slots/meta.json
 create mode 100644 site/content/examples/15-composition/03-slot-props/App.svelte
 create mode 100644 site/content/examples/15-composition/03-slot-props/Hoverable.svelte
 create mode 100644 site/content/examples/15-composition/03-slot-props/meta.json
 create mode 100644 site/content/examples/15-composition/04-conditional-slots/App.svelte
 create mode 100644 site/content/examples/15-composition/04-conditional-slots/Profile.svelte
 create mode 100644 site/content/examples/15-composition/04-conditional-slots/meta.json
 create mode 100644 site/content/examples/15-composition/05-modal/App.svelte
 create mode 100644 site/content/examples/15-composition/05-modal/Modal.svelte
 create mode 100644 site/content/examples/15-composition/05-modal/meta.json
 create mode 100644 site/content/examples/15-composition/meta.json
 create mode 100644 site/content/examples/16-context/00-context-api/App.svelte
 create mode 100644 site/content/examples/16-context/00-context-api/Map.svelte
 create mode 100644 site/content/examples/16-context/00-context-api/MapMarker.svelte
 create mode 100644 site/content/examples/16-context/00-context-api/mapbox.js
 create mode 100644 site/content/examples/16-context/00-context-api/meta.json
 create mode 100644 site/content/examples/16-context/meta.json
 create mode 100644 site/content/examples/17-special-elements/00-svelte-self/App.svelte
 create mode 100644 site/content/examples/17-special-elements/00-svelte-self/File.svelte
 create mode 100644 site/content/examples/17-special-elements/00-svelte-self/Folder.svelte
 create mode 100644 site/content/examples/17-special-elements/00-svelte-self/meta.json
 create mode 100644 site/content/examples/17-special-elements/01-svelte-component/App.svelte
 create mode 100644 site/content/examples/17-special-elements/01-svelte-component/BlueThing.svelte
 create mode 100644 site/content/examples/17-special-elements/01-svelte-component/GreenThing.svelte
 create mode 100644 site/content/examples/17-special-elements/01-svelte-component/RedThing.svelte
 create mode 100644 site/content/examples/17-special-elements/01-svelte-component/meta.json
 create mode 100644 site/content/examples/17-special-elements/02-svelte-element/App.svelte
 create mode 100644 site/content/examples/17-special-elements/02-svelte-element/meta.json
 create mode 100644 site/content/examples/17-special-elements/03-svelte-window/App.svelte
 create mode 100644 site/content/examples/17-special-elements/03-svelte-window/meta.json
 create mode 100644 site/content/examples/17-special-elements/04-svelte-window-bindings/App.svelte
 create mode 100644 site/content/examples/17-special-elements/04-svelte-window-bindings/meta.json
 create mode 100644 site/content/examples/17-special-elements/05-svelte-body/App.svelte
 create mode 100644 site/content/examples/17-special-elements/05-svelte-body/meta.json
 create mode 100644 site/content/examples/17-special-elements/06-svelte-head/App.svelte
 create mode 100644 site/content/examples/17-special-elements/06-svelte-head/meta.json
 create mode 100644 site/content/examples/17-special-elements/meta.json
 create mode 100644 site/content/examples/18-module-context/01-module-exports/App.svelte
 create mode 100644 site/content/examples/18-module-context/01-module-exports/AudioPlayer.svelte
 create mode 100644 site/content/examples/18-module-context/01-module-exports/meta.json
 create mode 100644 site/content/examples/18-module-context/meta.json
 create mode 100644 site/content/examples/19-debugging/00-debug/App.svelte
 create mode 100644 site/content/examples/19-debugging/00-debug/meta.json
 create mode 100644 site/content/examples/19-debugging/meta.json
 create mode 100644 site/content/examples/20-7guis/01-7guis-counter/App.svelte
 create mode 100644 site/content/examples/20-7guis/01-7guis-counter/meta.json
 create mode 100644 site/content/examples/20-7guis/02-7guis-temperature/App.svelte
 create mode 100644 site/content/examples/20-7guis/02-7guis-temperature/meta.json
 create mode 100644 site/content/examples/20-7guis/03-7guis-flight-booker/App.svelte
 create mode 100644 site/content/examples/20-7guis/03-7guis-flight-booker/meta.json
 create mode 100644 site/content/examples/20-7guis/04-7guis-timer/App.svelte
 create mode 100644 site/content/examples/20-7guis/04-7guis-timer/meta.json
 create mode 100644 site/content/examples/20-7guis/05-7guis-crud/App.svelte
 create mode 100644 site/content/examples/20-7guis/05-7guis-crud/meta.json
 create mode 100644 site/content/examples/20-7guis/06-7guis-circles/App.svelte
 create mode 100644 site/content/examples/20-7guis/06-7guis-circles/meta.json
 create mode 100644 site/content/examples/20-7guis/meta.json
 create mode 100644 site/content/examples/21-miscellaneous/01-hacker-news/App.svelte
 create mode 100644 site/content/examples/21-miscellaneous/01-hacker-news/Comment.svelte
 create mode 100644 site/content/examples/21-miscellaneous/01-hacker-news/Item.svelte
 create mode 100644 site/content/examples/21-miscellaneous/01-hacker-news/List.svelte
 create mode 100644 site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte
 create mode 100644 site/content/examples/21-miscellaneous/01-hacker-news/meta.json
 create mode 100644 site/content/examples/21-miscellaneous/02-immutable-data/App.svelte
 create mode 100644 site/content/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
 create mode 100644 site/content/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
 create mode 100644 site/content/examples/21-miscellaneous/02-immutable-data/flash.js
 create mode 100644 site/content/examples/21-miscellaneous/02-immutable-data/meta.json
 create mode 100644 site/content/examples/21-miscellaneous/meta.json
 create mode 100644 site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte
 create mode 100644 site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte
 create mode 100644 site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json
 create mode 100644 site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js
 create mode 100644 site/content/examples/99-embeds/20190420-blog-write-less-code/App.svelte
 create mode 100644 site/content/examples/99-embeds/20190420-blog-write-less-code/meta.json
 create mode 100644 site/content/examples/99-embeds/meta.json
 create mode 100644 site/content/faq/100-im-new-to-svelte.md
 create mode 100644 site/content/faq/1000-how-can-i-update-my-v2-components.md
 create mode 100644 site/content/faq/110-where-can-i-get-support.md
 create mode 100644 site/content/faq/1100-is-svelte-v2-still-available.md
 create mode 100644 site/content/faq/1200-how-do-i-do-hmr.md
 create mode 100644 site/content/faq/200-are-there-any-third-party-resources.md
 create mode 100644 site/content/faq/400-how-can-i-get-syntax-highlighting.md
 create mode 100644 site/content/faq/425-is-there-a-tool-to-automaticly-format.md
 create mode 100644 site/content/faq/450-how-do-i-document-my-components.md
 create mode 100644 site/content/faq/500-what-about-typescript-support.md
 create mode 100644 site/content/faq/600-does-svelte-scale.md
 create mode 100644 site/content/faq/700-is-there-a-component-library.md
 create mode 100644 site/content/faq/800-how-do-i-test-svelte-apps.md
 create mode 100644 site/content/faq/900-is-there-a-router.md
 create mode 100644 site/content/tutorial/01-introduction/01-basics/app-a/App.svelte
 create mode 100644 site/content/tutorial/01-introduction/01-basics/text.md
 create mode 100644 site/content/tutorial/01-introduction/02-adding-data/app-a/App.svelte
 create mode 100644 site/content/tutorial/01-introduction/02-adding-data/app-b/App.svelte
 create mode 100644 site/content/tutorial/01-introduction/02-adding-data/text.md
 create mode 100644 site/content/tutorial/01-introduction/03-dynamic-attributes/app-a/App.svelte
 create mode 100644 site/content/tutorial/01-introduction/03-dynamic-attributes/app-b/App.svelte
 create mode 100644 site/content/tutorial/01-introduction/03-dynamic-attributes/text.md
 create mode 100644 site/content/tutorial/01-introduction/04-styling/app-a/App.svelte
 create mode 100644 site/content/tutorial/01-introduction/04-styling/app-b/App.svelte
 create mode 100644 site/content/tutorial/01-introduction/04-styling/text.md
 create mode 100644 site/content/tutorial/01-introduction/05-nested-components/app-a/App.svelte
 create mode 100644 site/content/tutorial/01-introduction/05-nested-components/app-a/Nested.svelte
 create mode 100644 site/content/tutorial/01-introduction/05-nested-components/app-b/App.svelte
 create mode 100644 site/content/tutorial/01-introduction/05-nested-components/app-b/Nested.svelte
 create mode 100644 site/content/tutorial/01-introduction/05-nested-components/text.md
 create mode 100644 site/content/tutorial/01-introduction/06-html-tags/app-a/App.svelte
 create mode 100644 site/content/tutorial/01-introduction/06-html-tags/app-b/App.svelte
 create mode 100644 site/content/tutorial/01-introduction/06-html-tags/text.md
 create mode 100644 site/content/tutorial/01-introduction/07-making-an-app/app-a/App.svelte
 create mode 100644 site/content/tutorial/01-introduction/07-making-an-app/text.md
 create mode 100644 site/content/tutorial/01-introduction/meta.json
 create mode 100644 site/content/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte
 create mode 100644 site/content/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte
 create mode 100644 site/content/tutorial/02-reactivity/01-reactive-assignments/text.md
 create mode 100644 site/content/tutorial/02-reactivity/02-reactive-declarations/app-a/App.svelte
 create mode 100644 site/content/tutorial/02-reactivity/02-reactive-declarations/app-b/App.svelte
 create mode 100644 site/content/tutorial/02-reactivity/02-reactive-declarations/text.md
 create mode 100644 site/content/tutorial/02-reactivity/03-reactive-statements/app-a/App.svelte
 create mode 100644 site/content/tutorial/02-reactivity/03-reactive-statements/app-b/App.svelte
 create mode 100644 site/content/tutorial/02-reactivity/03-reactive-statements/text.md
 create mode 100644 site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/app-a/App.svelte
 create mode 100644 site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/app-b/App.svelte
 create mode 100644 site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/text.md
 create mode 100644 site/content/tutorial/02-reactivity/meta.json
 create mode 100644 site/content/tutorial/03-props/01-declaring-props/app-a/App.svelte
 create mode 100644 site/content/tutorial/03-props/01-declaring-props/app-a/Nested.svelte
 create mode 100644 site/content/tutorial/03-props/01-declaring-props/app-b/App.svelte
 create mode 100644 site/content/tutorial/03-props/01-declaring-props/app-b/Nested.svelte
 create mode 100644 site/content/tutorial/03-props/01-declaring-props/text.md
 create mode 100644 site/content/tutorial/03-props/02-default-values/app-a/App.svelte
 create mode 100644 site/content/tutorial/03-props/02-default-values/app-a/Nested.svelte
 create mode 100644 site/content/tutorial/03-props/02-default-values/app-b/App.svelte
 create mode 100644 site/content/tutorial/03-props/02-default-values/app-b/Nested.svelte
 create mode 100644 site/content/tutorial/03-props/02-default-values/text.md
 create mode 100644 site/content/tutorial/03-props/03-spread-props/app-a/App.svelte
 create mode 100644 site/content/tutorial/03-props/03-spread-props/app-a/Info.svelte
 create mode 100644 site/content/tutorial/03-props/03-spread-props/app-b/App.svelte
 create mode 100644 site/content/tutorial/03-props/03-spread-props/app-b/Info.svelte
 create mode 100644 site/content/tutorial/03-props/03-spread-props/text.md
 create mode 100644 site/content/tutorial/03-props/meta.json
 create mode 100644 site/content/tutorial/04-logic/01-if-blocks/app-a/App.svelte
 create mode 100644 site/content/tutorial/04-logic/01-if-blocks/app-b/App.svelte
 create mode 100644 site/content/tutorial/04-logic/01-if-blocks/text.md
 create mode 100644 site/content/tutorial/04-logic/02-else-blocks/app-a/App.svelte
 create mode 100644 site/content/tutorial/04-logic/02-else-blocks/app-b/App.svelte
 create mode 100644 site/content/tutorial/04-logic/02-else-blocks/text.md
 create mode 100644 site/content/tutorial/04-logic/03-else-if-blocks/app-a/App.svelte
 create mode 100644 site/content/tutorial/04-logic/03-else-if-blocks/app-b/App.svelte
 create mode 100644 site/content/tutorial/04-logic/03-else-if-blocks/text.md
 create mode 100644 site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte
 create mode 100644 site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte
 create mode 100644 site/content/tutorial/04-logic/04-each-blocks/text.md
 create mode 100644 site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte
 create mode 100644 site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte
 create mode 100644 site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte
 create mode 100644 site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte
 create mode 100644 site/content/tutorial/04-logic/05-keyed-each-blocks/text.md
 create mode 100644 site/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte
 create mode 100644 site/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte
 create mode 100644 site/content/tutorial/04-logic/06-await-blocks/text.md
 create mode 100644 site/content/tutorial/04-logic/meta.json
 create mode 100644 site/content/tutorial/05-events/01-dom-events/app-a/App.svelte
 create mode 100644 site/content/tutorial/05-events/01-dom-events/app-b/App.svelte
 create mode 100644 site/content/tutorial/05-events/01-dom-events/text.md
 create mode 100644 site/content/tutorial/05-events/02-inline-handlers/app-a/App.svelte
 create mode 100644 site/content/tutorial/05-events/02-inline-handlers/app-b/App.svelte
 create mode 100644 site/content/tutorial/05-events/02-inline-handlers/text.md
 create mode 100644 site/content/tutorial/05-events/03-event-modifiers/app-a/App.svelte
 create mode 100644 site/content/tutorial/05-events/03-event-modifiers/app-b/App.svelte
 create mode 100644 site/content/tutorial/05-events/03-event-modifiers/text.md
 create mode 100644 site/content/tutorial/05-events/04-component-events/app-a/App.svelte
 create mode 100644 site/content/tutorial/05-events/04-component-events/app-a/Inner.svelte
 create mode 100644 site/content/tutorial/05-events/04-component-events/app-b/App.svelte
 create mode 100644 site/content/tutorial/05-events/04-component-events/app-b/Inner.svelte
 create mode 100644 site/content/tutorial/05-events/04-component-events/text.md
 create mode 100644 site/content/tutorial/05-events/05-event-forwarding/app-a/App.svelte
 create mode 100644 site/content/tutorial/05-events/05-event-forwarding/app-a/Inner.svelte
 create mode 100644 site/content/tutorial/05-events/05-event-forwarding/app-a/Outer.svelte
 create mode 100644 site/content/tutorial/05-events/05-event-forwarding/app-b/App.svelte
 create mode 100644 site/content/tutorial/05-events/05-event-forwarding/app-b/Inner.svelte
 create mode 100644 site/content/tutorial/05-events/05-event-forwarding/app-b/Outer.svelte
 create mode 100644 site/content/tutorial/05-events/05-event-forwarding/text.md
 create mode 100644 site/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte
 create mode 100644 site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte
 create mode 100644 site/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte
 create mode 100644 site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
 create mode 100644 site/content/tutorial/05-events/06-dom-event-forwarding/text.md
 create mode 100644 site/content/tutorial/05-events/meta.json
 create mode 100644 site/content/tutorial/06-bindings/01-text-inputs/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/01-text-inputs/text.md
 create mode 100644 site/content/tutorial/06-bindings/02-numeric-inputs/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/02-numeric-inputs/text.md
 create mode 100644 site/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/03-checkbox-inputs/text.md
 create mode 100644 site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/04-group-inputs/text.md
 create mode 100644 site/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/05-textarea-inputs/text.md
 create mode 100644 site/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/06-select-bindings/text.md
 create mode 100644 site/content/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/07-multiple-select-bindings/text.md
 create mode 100644 site/content/tutorial/06-bindings/08-contenteditable-bindings/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/08-contenteditable-bindings/text.md
 create mode 100644 site/content/tutorial/06-bindings/09-each-block-bindings/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/09-each-block-bindings/text.md
 create mode 100644 site/content/tutorial/06-bindings/10-media-elements/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/10-media-elements/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/10-media-elements/text.md
 create mode 100644 site/content/tutorial/06-bindings/11-dimensions/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/11-dimensions/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/11-dimensions/text.md
 create mode 100644 site/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/12-bind-this/text.md
 create mode 100644 site/content/tutorial/06-bindings/13-component-bindings/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/13-component-bindings/app-a/Keypad.svelte
 create mode 100644 site/content/tutorial/06-bindings/13-component-bindings/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/13-component-bindings/app-b/Keypad.svelte
 create mode 100644 site/content/tutorial/06-bindings/13-component-bindings/text.md
 create mode 100644 site/content/tutorial/06-bindings/14-component-this/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/14-component-this/app-a/InputField.svelte
 create mode 100644 site/content/tutorial/06-bindings/14-component-this/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/14-component-this/app-b/InputField.svelte
 create mode 100644 site/content/tutorial/06-bindings/14-component-this/text.md
 create mode 100644 site/content/tutorial/06-bindings/meta.json
 create mode 100644 site/content/tutorial/07-lifecycle/01-onmount/app-a/App.svelte
 create mode 100644 site/content/tutorial/07-lifecycle/01-onmount/app-b/App.svelte
 create mode 100644 site/content/tutorial/07-lifecycle/01-onmount/text.md
 create mode 100644 site/content/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte
 create mode 100644 site/content/tutorial/07-lifecycle/02-ondestroy/app-a/Timer.svelte
 create mode 100644 site/content/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js
 create mode 100644 site/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte
 create mode 100644 site/content/tutorial/07-lifecycle/02-ondestroy/app-b/Timer.svelte
 create mode 100644 site/content/tutorial/07-lifecycle/02-ondestroy/app-b/utils.js
 create mode 100644 site/content/tutorial/07-lifecycle/02-ondestroy/text.md
 create mode 100644 site/content/tutorial/07-lifecycle/03-update/app-a/App.svelte
 create mode 100644 site/content/tutorial/07-lifecycle/03-update/app-b/App.svelte
 create mode 100644 site/content/tutorial/07-lifecycle/03-update/text.md
 create mode 100644 site/content/tutorial/07-lifecycle/04-tick/app-a/App.svelte
 create mode 100644 site/content/tutorial/07-lifecycle/04-tick/app-b/App.svelte
 create mode 100644 site/content/tutorial/07-lifecycle/04-tick/text.md
 create mode 100644 site/content/tutorial/07-lifecycle/meta.json
 create mode 100644 site/content/tutorial/08-stores/01-writable-stores/app-a/App.svelte
 create mode 100644 site/content/tutorial/08-stores/01-writable-stores/app-a/Decrementer.svelte
 create mode 100644 site/content/tutorial/08-stores/01-writable-stores/app-a/Incrementer.svelte
 create mode 100644 site/content/tutorial/08-stores/01-writable-stores/app-a/Resetter.svelte
 create mode 100644 site/content/tutorial/08-stores/01-writable-stores/app-a/stores.js
 create mode 100644 site/content/tutorial/08-stores/01-writable-stores/app-b/App.svelte
 create mode 100644 site/content/tutorial/08-stores/01-writable-stores/app-b/Decrementer.svelte
 create mode 100644 site/content/tutorial/08-stores/01-writable-stores/app-b/Incrementer.svelte
 create mode 100644 site/content/tutorial/08-stores/01-writable-stores/app-b/Resetter.svelte
 create mode 100644 site/content/tutorial/08-stores/01-writable-stores/app-b/stores.js
 create mode 100644 site/content/tutorial/08-stores/01-writable-stores/text.md
 create mode 100644 site/content/tutorial/08-stores/02-auto-subscriptions/app-a/App.svelte
 create mode 100644 site/content/tutorial/08-stores/02-auto-subscriptions/app-a/Decrementer.svelte
 create mode 100644 site/content/tutorial/08-stores/02-auto-subscriptions/app-a/Incrementer.svelte
 create mode 100644 site/content/tutorial/08-stores/02-auto-subscriptions/app-a/Resetter.svelte
 create mode 100644 site/content/tutorial/08-stores/02-auto-subscriptions/app-a/stores.js
 create mode 100644 site/content/tutorial/08-stores/02-auto-subscriptions/app-b/App.svelte
 create mode 100644 site/content/tutorial/08-stores/02-auto-subscriptions/app-b/Decrementer.svelte
 create mode 100644 site/content/tutorial/08-stores/02-auto-subscriptions/app-b/Incrementer.svelte
 create mode 100644 site/content/tutorial/08-stores/02-auto-subscriptions/app-b/Resetter.svelte
 create mode 100644 site/content/tutorial/08-stores/02-auto-subscriptions/app-b/stores.js
 create mode 100644 site/content/tutorial/08-stores/02-auto-subscriptions/text.md
 create mode 100644 site/content/tutorial/08-stores/03-readable-stores/app-a/App.svelte
 create mode 100644 site/content/tutorial/08-stores/03-readable-stores/app-a/stores.js
 create mode 100644 site/content/tutorial/08-stores/03-readable-stores/app-b/App.svelte
 create mode 100644 site/content/tutorial/08-stores/03-readable-stores/app-b/stores.js
 create mode 100644 site/content/tutorial/08-stores/03-readable-stores/text.md
 create mode 100644 site/content/tutorial/08-stores/04-derived-stores/app-a/App.svelte
 create mode 100644 site/content/tutorial/08-stores/04-derived-stores/app-a/stores.js
 create mode 100644 site/content/tutorial/08-stores/04-derived-stores/app-b/App.svelte
 create mode 100644 site/content/tutorial/08-stores/04-derived-stores/app-b/stores.js
 create mode 100644 site/content/tutorial/08-stores/04-derived-stores/text.md
 create mode 100644 site/content/tutorial/08-stores/05-custom-stores/app-a/App.svelte
 create mode 100644 site/content/tutorial/08-stores/05-custom-stores/app-a/stores.js
 create mode 100644 site/content/tutorial/08-stores/05-custom-stores/app-b/App.svelte
 create mode 100644 site/content/tutorial/08-stores/05-custom-stores/app-b/stores.js
 create mode 100644 site/content/tutorial/08-stores/05-custom-stores/text.md
 create mode 100644 site/content/tutorial/08-stores/06-store-bindings/app-a/App.svelte
 create mode 100644 site/content/tutorial/08-stores/06-store-bindings/app-a/stores.js
 create mode 100644 site/content/tutorial/08-stores/06-store-bindings/app-b/App.svelte
 create mode 100644 site/content/tutorial/08-stores/06-store-bindings/app-b/stores.js
 create mode 100644 site/content/tutorial/08-stores/06-store-bindings/text.md
 create mode 100644 site/content/tutorial/08-stores/meta.json
 create mode 100644 site/content/tutorial/09-motion/01-tweened/app-a/App.svelte
 create mode 100644 site/content/tutorial/09-motion/01-tweened/app-b/App.svelte
 create mode 100644 site/content/tutorial/09-motion/01-tweened/text.md
 create mode 100644 site/content/tutorial/09-motion/02-spring/app-a/App.svelte
 create mode 100644 site/content/tutorial/09-motion/02-spring/app-b/App.svelte
 create mode 100644 site/content/tutorial/09-motion/02-spring/text.md
 create mode 100644 site/content/tutorial/09-motion/meta.json
 create mode 100644 site/content/tutorial/10-transitions/01-transition/app-a/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/01-transition/app-b/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/01-transition/text.md
 create mode 100644 site/content/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/02-adding-parameters-to-transitions/text.md
 create mode 100644 site/content/tutorial/10-transitions/03-in-and-out/app-a/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/03-in-and-out/app-b/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/03-in-and-out/text.md
 create mode 100644 site/content/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/04-custom-css-transitions/text.md
 create mode 100644 site/content/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/05-custom-js-transitions/text.md
 create mode 100644 site/content/tutorial/10-transitions/06-transition-events/app-a/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/06-transition-events/app-b/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/06-transition-events/text.md
 create mode 100644 site/content/tutorial/10-transitions/07-local-transitions/app-a/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/07-local-transitions/app-b/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/07-local-transitions/text.md
 create mode 100644 site/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/08-deferred-transitions/text.md
 create mode 100644 site/content/tutorial/10-transitions/09-key-blocks/app-a/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/09-key-blocks/app-b/App.svelte
 create mode 100644 site/content/tutorial/10-transitions/09-key-blocks/text.md
 create mode 100644 site/content/tutorial/10-transitions/meta.json
 create mode 100644 site/content/tutorial/11-animations/01-animate/app-a/App.svelte
 create mode 100644 site/content/tutorial/11-animations/01-animate/app-b/App.svelte
 create mode 100644 site/content/tutorial/11-animations/01-animate/text.md
 create mode 100644 site/content/tutorial/11-animations/meta.json
 create mode 100644 site/content/tutorial/12-actions/01-actions/app-a/App.svelte
 create mode 100644 site/content/tutorial/12-actions/01-actions/app-a/click_outside.js
 create mode 100644 site/content/tutorial/12-actions/01-actions/app-b/App.svelte
 create mode 100644 site/content/tutorial/12-actions/01-actions/app-b/click_outside.js
 create mode 100644 site/content/tutorial/12-actions/01-actions/text.md
 create mode 100644 site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
 create mode 100644 site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/longpress.js
 create mode 100644 site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte
 create mode 100644 site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/longpress.js
 create mode 100644 site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md
 create mode 100644 site/content/tutorial/12-actions/meta.json
 create mode 100644 site/content/tutorial/13-advanced-styling/01-classes/app-a/App.svelte
 create mode 100644 site/content/tutorial/13-advanced-styling/01-classes/app-b/App.svelte
 create mode 100644 site/content/tutorial/13-advanced-styling/01-classes/text.md
 create mode 100644 site/content/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte
 create mode 100644 site/content/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte
 create mode 100644 site/content/tutorial/13-advanced-styling/02-class-shorthand/text.md
 create mode 100644 site/content/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
 create mode 100644 site/content/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
 create mode 100644 site/content/tutorial/13-advanced-styling/03-inline-styles/text.md
 create mode 100644 site/content/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte
 create mode 100644 site/content/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte
 create mode 100644 site/content/tutorial/13-advanced-styling/04-style-directive/text.md
 create mode 100644 site/content/tutorial/13-advanced-styling/meta.json
 create mode 100644 site/content/tutorial/14-composition/01-slots/app-a/App.svelte
 create mode 100644 site/content/tutorial/14-composition/01-slots/app-a/Box.svelte
 create mode 100644 site/content/tutorial/14-composition/01-slots/app-b/App.svelte
 create mode 100644 site/content/tutorial/14-composition/01-slots/app-b/Box.svelte
 create mode 100644 site/content/tutorial/14-composition/01-slots/text.md
 create mode 100644 site/content/tutorial/14-composition/02-slot-fallbacks/app-a/App.svelte
 create mode 100644 site/content/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte
 create mode 100644 site/content/tutorial/14-composition/02-slot-fallbacks/app-b/App.svelte
 create mode 100644 site/content/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte
 create mode 100644 site/content/tutorial/14-composition/02-slot-fallbacks/text.md
 create mode 100644 site/content/tutorial/14-composition/03-named-slots/app-a/App.svelte
 create mode 100644 site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte
 create mode 100644 site/content/tutorial/14-composition/03-named-slots/app-b/App.svelte
 create mode 100644 site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte
 create mode 100644 site/content/tutorial/14-composition/03-named-slots/text.md
 create mode 100755 site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte
 create mode 100755 site/content/tutorial/14-composition/04-optional-slots/app-a/Comment.svelte
 create mode 100755 site/content/tutorial/14-composition/04-optional-slots/app-a/Project.svelte
 create mode 100755 site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte
 create mode 100755 site/content/tutorial/14-composition/04-optional-slots/app-b/Comment.svelte
 create mode 100755 site/content/tutorial/14-composition/04-optional-slots/app-b/Project.svelte
 create mode 100644 site/content/tutorial/14-composition/04-optional-slots/text.md
 create mode 100644 site/content/tutorial/14-composition/05-slot-props/app-a/App.svelte
 create mode 100644 site/content/tutorial/14-composition/05-slot-props/app-a/Hoverable.svelte
 create mode 100644 site/content/tutorial/14-composition/05-slot-props/app-b/App.svelte
 create mode 100644 site/content/tutorial/14-composition/05-slot-props/app-b/Hoverable.svelte
 create mode 100644 site/content/tutorial/14-composition/05-slot-props/text.md
 create mode 100644 site/content/tutorial/14-composition/meta.json
 create mode 100644 site/content/tutorial/15-context/01-context-api/app-a/App.svelte
 create mode 100644 site/content/tutorial/15-context/01-context-api/app-a/Map.svelte
 create mode 100644 site/content/tutorial/15-context/01-context-api/app-a/MapMarker.svelte
 create mode 100644 site/content/tutorial/15-context/01-context-api/app-a/mapbox.js
 create mode 100644 site/content/tutorial/15-context/01-context-api/app-b/App.svelte
 create mode 100644 site/content/tutorial/15-context/01-context-api/app-b/Map.svelte
 create mode 100644 site/content/tutorial/15-context/01-context-api/app-b/MapMarker.svelte
 create mode 100644 site/content/tutorial/15-context/01-context-api/app-b/mapbox.js
 create mode 100644 site/content/tutorial/15-context/01-context-api/text.md
 create mode 100644 site/content/tutorial/15-context/meta.json
 create mode 100644 site/content/tutorial/16-special-elements/01-svelte-self/app-a/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte
 create mode 100644 site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
 create mode 100644 site/content/tutorial/16-special-elements/01-svelte-self/app-b/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte
 create mode 100644 site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
 create mode 100644 site/content/tutorial/16-special-elements/01-svelte-self/text.md
 create mode 100644 site/content/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte
 create mode 100644 site/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte
 create mode 100644 site/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte
 create mode 100644 site/content/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte
 create mode 100644 site/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte
 create mode 100644 site/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte
 create mode 100644 site/content/tutorial/16-special-elements/02-svelte-component/text.md
 create mode 100644 site/content/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/03-svelte-element/text.md
 create mode 100644 site/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/04-svelte-window/text.md
 create mode 100644 site/content/tutorial/16-special-elements/05-svelte-window-bindings/app-a/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/05-svelte-window-bindings/text.md
 create mode 100644 site/content/tutorial/16-special-elements/06-svelte-body/app-a/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/06-svelte-body/app-b/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/06-svelte-body/text.md
 create mode 100644 site/content/tutorial/16-special-elements/07-svelte-head/app-a/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/07-svelte-head/app-b/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/07-svelte-head/text.md
 create mode 100644 site/content/tutorial/16-special-elements/08-svelte-options/app-a/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/08-svelte-options/app-a/Todo.svelte
 create mode 100644 site/content/tutorial/16-special-elements/08-svelte-options/app-a/flash.js
 create mode 100644 site/content/tutorial/16-special-elements/08-svelte-options/app-b/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/08-svelte-options/app-b/Todo.svelte
 create mode 100644 site/content/tutorial/16-special-elements/08-svelte-options/app-b/flash.js
 create mode 100644 site/content/tutorial/16-special-elements/08-svelte-options/text.md
 create mode 100644 site/content/tutorial/16-special-elements/09-svelte-fragment/app-a/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/09-svelte-fragment/app-a/Box.svelte
 create mode 100644 site/content/tutorial/16-special-elements/09-svelte-fragment/app-b/App.svelte
 create mode 100644 site/content/tutorial/16-special-elements/09-svelte-fragment/app-b/Box.svelte
 create mode 100644 site/content/tutorial/16-special-elements/09-svelte-fragment/text.md
 create mode 100644 site/content/tutorial/16-special-elements/meta.json
 create mode 100644 site/content/tutorial/17-module-context/01-sharing-code/app-a/App.svelte
 create mode 100644 site/content/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte
 create mode 100644 site/content/tutorial/17-module-context/01-sharing-code/app-b/App.svelte
 create mode 100644 site/content/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
 create mode 100644 site/content/tutorial/17-module-context/01-sharing-code/text.md
 create mode 100644 site/content/tutorial/17-module-context/02-module-exports/app-a/App.svelte
 create mode 100644 site/content/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
 create mode 100644 site/content/tutorial/17-module-context/02-module-exports/app-b/App.svelte
 create mode 100644 site/content/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
 create mode 100644 site/content/tutorial/17-module-context/02-module-exports/text.md
 create mode 100644 site/content/tutorial/17-module-context/meta.json
 create mode 100644 site/content/tutorial/18-debugging/01-debug/app-a/App.svelte
 create mode 100644 site/content/tutorial/18-debugging/01-debug/app-b/App.svelte
 create mode 100644 site/content/tutorial/18-debugging/01-debug/text.md
 create mode 100644 site/content/tutorial/18-debugging/meta.json
 create mode 100644 site/content/tutorial/19-next-steps/01-congratulations/app-a/App.svelte
 create mode 100644 site/content/tutorial/19-next-steps/01-congratulations/text.md
 create mode 100644 site/content/tutorial/19-next-steps/meta.json
 create mode 100644 src/compiler/Stats.ts
 create mode 100644 src/compiler/compile/Component.ts
 create mode 100644 src/compiler/compile/compiler_errors.ts
 create mode 100644 src/compiler/compile/compiler_warnings.ts
 create mode 100644 src/compiler/compile/create_module.ts
 create mode 100644 src/compiler/compile/css/Selector.ts
 create mode 100644 src/compiler/compile/css/Stylesheet.ts
 create mode 100644 src/compiler/compile/css/gather_possible_values.ts
 create mode 100644 src/compiler/compile/css/interfaces.ts
 create mode 100644 src/compiler/compile/index.ts
 create mode 100644 src/compiler/compile/nodes/Action.ts
 create mode 100644 src/compiler/compile/nodes/Animation.ts
 create mode 100644 src/compiler/compile/nodes/Attribute.ts
 create mode 100644 src/compiler/compile/nodes/AwaitBlock.ts
 create mode 100644 src/compiler/compile/nodes/Binding.ts
 create mode 100644 src/compiler/compile/nodes/Body.ts
 create mode 100644 src/compiler/compile/nodes/CatchBlock.ts
 create mode 100644 src/compiler/compile/nodes/Class.ts
 create mode 100644 src/compiler/compile/nodes/Comment.ts
 create mode 100644 src/compiler/compile/nodes/ConstTag.ts
 create mode 100644 src/compiler/compile/nodes/DebugTag.ts
 create mode 100644 src/compiler/compile/nodes/EachBlock.ts
 create mode 100644 src/compiler/compile/nodes/Element.ts
 create mode 100644 src/compiler/compile/nodes/ElseBlock.ts
 create mode 100644 src/compiler/compile/nodes/EventHandler.ts
 create mode 100644 src/compiler/compile/nodes/Fragment.ts
 create mode 100644 src/compiler/compile/nodes/Head.ts
 create mode 100644 src/compiler/compile/nodes/IfBlock.ts
 create mode 100644 src/compiler/compile/nodes/InlineComponent.ts
 create mode 100644 src/compiler/compile/nodes/KeyBlock.ts
 create mode 100644 src/compiler/compile/nodes/Let.ts
 create mode 100644 src/compiler/compile/nodes/MustacheTag.ts
 create mode 100644 src/compiler/compile/nodes/Options.ts
 create mode 100644 src/compiler/compile/nodes/PendingBlock.ts
 create mode 100644 src/compiler/compile/nodes/RawMustacheTag.ts
 create mode 100644 src/compiler/compile/nodes/Slot.ts
 create mode 100644 src/compiler/compile/nodes/SlotTemplate.ts
 create mode 100644 src/compiler/compile/nodes/StyleDirective.ts
 create mode 100644 src/compiler/compile/nodes/Text.ts
 create mode 100644 src/compiler/compile/nodes/ThenBlock.ts
 create mode 100644 src/compiler/compile/nodes/Title.ts
 create mode 100644 src/compiler/compile/nodes/Transition.ts
 create mode 100644 src/compiler/compile/nodes/Window.ts
 create mode 100644 src/compiler/compile/nodes/interfaces.ts
 create mode 100644 src/compiler/compile/nodes/shared/AbstractBlock.ts
 create mode 100644 src/compiler/compile/nodes/shared/Context.ts
 create mode 100644 src/compiler/compile/nodes/shared/Expression.ts
 create mode 100644 src/compiler/compile/nodes/shared/Node.ts
 create mode 100644 src/compiler/compile/nodes/shared/Tag.ts
 create mode 100644 src/compiler/compile/nodes/shared/TemplateScope.ts
 create mode 100644 src/compiler/compile/nodes/shared/get_const_tags.ts
 create mode 100644 src/compiler/compile/nodes/shared/is_contextual.ts
 create mode 100644 src/compiler/compile/nodes/shared/map_children.ts
 create mode 100644 src/compiler/compile/render_dom/Block.ts
 create mode 100644 src/compiler/compile/render_dom/Renderer.ts
 create mode 100644 src/compiler/compile/render_dom/index.ts
 create mode 100644 src/compiler/compile/render_dom/invalidate.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/AwaitBlock.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/Body.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/DebugTag.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/EachBlock.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/Element/Binding.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/Element/SpreadAttribute.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/Element/StyleAttribute.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/Element/fix_attribute_casing.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/Element/handle_select_value_binding.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/Element/index.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/Fragment.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/Head.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/IfBlock.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/KeyBlock.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/MustacheTag.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/Slot.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/SlotTemplate.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/Text.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/Title.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/Window.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/shared/Tag.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/shared/Wrapper.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/shared/add_actions.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/shared/add_const_tags.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/shared/add_event_handlers.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/shared/bind_this.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/shared/create_debugging_comment.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/shared/get_slot_definition.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/shared/is_dynamic.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/shared/is_head.ts
 create mode 100644 src/compiler/compile/render_dom/wrappers/shared/mark_each_block_bindings.ts
 create mode 100644 src/compiler/compile/render_ssr/Renderer.ts
 create mode 100644 src/compiler/compile/render_ssr/handlers/AwaitBlock.ts
 create mode 100644 src/compiler/compile/render_ssr/handlers/Comment.ts
 create mode 100644 src/compiler/compile/render_ssr/handlers/DebugTag.ts
 create mode 100644 src/compiler/compile/render_ssr/handlers/EachBlock.ts
 create mode 100644 src/compiler/compile/render_ssr/handlers/Element.ts
 create mode 100644 src/compiler/compile/render_ssr/handlers/Head.ts
 create mode 100644 src/compiler/compile/render_ssr/handlers/HtmlTag.ts
 create mode 100644 src/compiler/compile/render_ssr/handlers/IfBlock.ts
 create mode 100644 src/compiler/compile/render_ssr/handlers/InlineComponent.ts
 create mode 100644 src/compiler/compile/render_ssr/handlers/KeyBlock.ts
 create mode 100644 src/compiler/compile/render_ssr/handlers/Slot.ts
 create mode 100644 src/compiler/compile/render_ssr/handlers/SlotTemplate.ts
 create mode 100644 src/compiler/compile/render_ssr/handlers/Tag.ts
 create mode 100644 src/compiler/compile/render_ssr/handlers/Text.ts
 create mode 100644 src/compiler/compile/render_ssr/handlers/Title.ts
 create mode 100644 src/compiler/compile/render_ssr/handlers/shared/get_attribute_value.ts
 create mode 100644 src/compiler/compile/render_ssr/handlers/shared/get_const_tags.ts
 create mode 100644 src/compiler/compile/render_ssr/handlers/shared/get_slot_scope.ts
 create mode 100644 src/compiler/compile/render_ssr/handlers/utils/remove_whitespace_children.ts
 create mode 100644 src/compiler/compile/render_ssr/index.ts
 create mode 100644 src/compiler/compile/utils/__test__.ts
 create mode 100644 src/compiler/compile/utils/add_to_set.ts
 create mode 100644 src/compiler/compile/utils/check_enable_sourcemap.ts
 create mode 100644 src/compiler/compile/utils/check_graph_for_cycles.ts
 create mode 100644 src/compiler/compile/utils/compare_node.ts
 create mode 100644 src/compiler/compile/utils/flatten_reference.ts
 create mode 100644 src/compiler/compile/utils/get_name_from_filename.ts
 create mode 100644 src/compiler/compile/utils/get_object.ts
 create mode 100644 src/compiler/compile/utils/get_slot_data.ts
 create mode 100644 src/compiler/compile/utils/hash.ts
 create mode 100644 src/compiler/compile/utils/is_used_as_reference.ts
 create mode 100644 src/compiler/compile/utils/nodes_to_template_literal.ts
 create mode 100644 src/compiler/compile/utils/replace_object.ts
 create mode 100644 src/compiler/compile/utils/reserved_keywords.ts
 create mode 100644 src/compiler/compile/utils/scope.ts
 create mode 100644 src/compiler/compile/utils/string_to_member_expression.ts
 create mode 100644 src/compiler/compile/utils/stringify.ts
 create mode 100644 src/compiler/config.ts
 create mode 100644 src/compiler/index.ts
 create mode 100644 src/compiler/interfaces.ts
 create mode 100644 src/compiler/parse/acorn.ts
 create mode 100644 src/compiler/parse/errors.ts
 create mode 100644 src/compiler/parse/index.ts
 create mode 100644 src/compiler/parse/read/context.ts
 create mode 100644 src/compiler/parse/read/expression.ts
 create mode 100644 src/compiler/parse/read/script.ts
 create mode 100644 src/compiler/parse/read/style.ts
 create mode 100644 src/compiler/parse/state/fragment.ts
 create mode 100644 src/compiler/parse/state/mustache.ts
 create mode 100644 src/compiler/parse/state/tag.ts
 create mode 100644 src/compiler/parse/state/text.ts
 create mode 100644 src/compiler/parse/utils/bracket.ts
 create mode 100644 src/compiler/parse/utils/entities.ts
 create mode 100644 src/compiler/parse/utils/html.ts
 create mode 100644 src/compiler/parse/utils/node.ts
 create mode 100644 src/compiler/preprocess/decode_sourcemap.ts
 create mode 100644 src/compiler/preprocess/index.ts
 create mode 100644 src/compiler/preprocess/replace_in_code.ts
 create mode 100644 src/compiler/preprocess/types.ts
 create mode 100644 src/compiler/tsconfig.json
 create mode 100644 src/compiler/utils/clone.ts
 create mode 100644 src/compiler/utils/error.ts
 create mode 100644 src/compiler/utils/extract_svelte_ignore.ts
 create mode 100644 src/compiler/utils/flatten.ts
 create mode 100644 src/compiler/utils/full_char_code_at.ts
 create mode 100644 src/compiler/utils/fuzzymatch.ts
 create mode 100644 src/compiler/utils/get_code_frame.ts
 create mode 100644 src/compiler/utils/link.ts
 create mode 100644 src/compiler/utils/list.ts
 create mode 100644 src/compiler/utils/mapped_code.ts
 create mode 100644 src/compiler/utils/names.ts
 create mode 100644 src/compiler/utils/namespaces.ts
 create mode 100644 src/compiler/utils/nodes_match.ts
 create mode 100644 src/compiler/utils/patterns.ts
 create mode 100644 src/compiler/utils/push_array.ts
 create mode 100644 src/compiler/utils/trim.ts
 create mode 100644 src/runtime/action/index.ts
 create mode 100644 src/runtime/ambient.ts
 create mode 100644 src/runtime/animate/index.ts
 create mode 100644 src/runtime/easing/index.ts
 create mode 100644 src/runtime/index.ts
 create mode 100644 src/runtime/internal/Component.ts
 create mode 100644 src/runtime/internal/animations.ts
 create mode 100644 src/runtime/internal/await_block.ts
 create mode 100644 src/runtime/internal/dev.ts
 create mode 100644 src/runtime/internal/dom.ts
 create mode 100644 src/runtime/internal/environment.ts
 create mode 100644 src/runtime/internal/globals.ts
 create mode 100644 src/runtime/internal/index.ts
 create mode 100644 src/runtime/internal/keyed_each.ts
 create mode 100644 src/runtime/internal/lifecycle.ts
 create mode 100644 src/runtime/internal/loop.ts
 create mode 100644 src/runtime/internal/scheduler.ts
 create mode 100644 src/runtime/internal/spread.ts
 create mode 100644 src/runtime/internal/ssr.ts
 create mode 100644 src/runtime/internal/style_manager.ts
 create mode 100644 src/runtime/internal/transitions.ts
 create mode 100644 src/runtime/internal/utils.ts
 create mode 100644 src/runtime/motion/index.ts
 create mode 100644 src/runtime/motion/spring.ts
 create mode 100644 src/runtime/motion/tweened.ts
 create mode 100644 src/runtime/motion/utils.ts
 create mode 100644 src/runtime/ssr.ts
 create mode 100644 src/runtime/store/index.ts
 create mode 100644 src/runtime/transition/index.ts
 create mode 100644 src/runtime/tsconfig.json
 create mode 100644 src/shared/boolean_attributes.ts
 create mode 100644 src/shared/utils/names.ts
 create mode 100644 test/.eslintrc.json
 create mode 100644 test/css/index.ts
 create mode 100644 test/css/samples/attribute-selector-bind/expected.css
 create mode 100644 test/css/samples/attribute-selector-bind/input.svelte
 create mode 100644 test/css/samples/attribute-selector-details-open/expected.css
 create mode 100644 test/css/samples/attribute-selector-details-open/input.svelte
 create mode 100644 test/css/samples/attribute-selector-dialog-open/expected.css
 create mode 100644 test/css/samples/attribute-selector-dialog-open/input.svelte
 create mode 100644 test/css/samples/attribute-selector-only-name/expected.css
 create mode 100644 test/css/samples/attribute-selector-only-name/input.svelte
 create mode 100644 test/css/samples/attribute-selector-unquoted/expected.css
 create mode 100644 test/css/samples/attribute-selector-unquoted/input.svelte
 create mode 100644 test/css/samples/attribute-selector-word-arbitrary-whitespace/expected.css
 create mode 100644 test/css/samples/attribute-selector-word-arbitrary-whitespace/input.svelte
 create mode 100644 test/css/samples/basic/expected.css
 create mode 100644 test/css/samples/basic/input.svelte
 create mode 100644 test/css/samples/child-combinator/expected.css
 create mode 100644 test/css/samples/child-combinator/input.svelte
 create mode 100644 test/css/samples/combinator-child/expected.css
 create mode 100644 test/css/samples/combinator-child/expected.html
 create mode 100644 test/css/samples/combinator-child/input.svelte
 create mode 100644 test/css/samples/css-vars/expected.css
 create mode 100644 test/css/samples/css-vars/input.svelte
 create mode 100644 test/css/samples/custom-css-hash/_config.js
 create mode 100644 test/css/samples/custom-css-hash/expected.css
 create mode 100644 test/css/samples/custom-css-hash/input.svelte
 create mode 100644 test/css/samples/descendant-selector-non-top-level-outer/expected.css
 create mode 100644 test/css/samples/descendant-selector-non-top-level-outer/expected.html
 create mode 100644 test/css/samples/descendant-selector-non-top-level-outer/input.svelte
 create mode 100644 test/css/samples/directive-special-character/expected.css
 create mode 100644 test/css/samples/directive-special-character/expected.html
 create mode 100644 test/css/samples/directive-special-character/input.svelte
 create mode 100644 test/css/samples/dynamic-element/_config.js
 create mode 100644 test/css/samples/dynamic-element/expected.css
 create mode 100644 test/css/samples/dynamic-element/expected.html
 create mode 100644 test/css/samples/dynamic-element/input.svelte
 create mode 100644 test/css/samples/empty-class/_config.js
 create mode 100644 test/css/samples/empty-class/expected.css
 create mode 100644 test/css/samples/empty-class/input.svelte
 create mode 100644 test/css/samples/empty-rule-dev/_config.js
 create mode 100644 test/css/samples/empty-rule-dev/expected.css
 create mode 100644 test/css/samples/empty-rule-dev/input.svelte
 create mode 100644 test/css/samples/empty-rule/expected.css
 create mode 100644 test/css/samples/empty-rule/input.svelte
 create mode 100644 test/css/samples/general-siblings-combinator-await-not-exhaustive/_config.js
 create mode 100644 test/css/samples/general-siblings-combinator-await-not-exhaustive/expected.css
 create mode 100644 test/css/samples/general-siblings-combinator-await-not-exhaustive/expected.html
 create mode 100644 test/css/samples/general-siblings-combinator-await-not-exhaustive/input.svelte
 create mode 100644 test/css/samples/general-siblings-combinator-await/_config.js
 create mode 100644 test/css/samples/general-siblings-combinator-await/expected.css
 create mode 100644 test/css/samples/general-siblings-combinator-await/expected.html
 create mode 100644 test/css/samples/general-siblings-combinator-await/input.svelte
 create mode 100644 test/css/samples/general-siblings-combinator-each-2/_config.js
 create mode 100644 test/css/samples/general-siblings-combinator-each-2/expected.css
 create mode 100644 test/css/samples/general-siblings-combinator-each-2/expected.html
 create mode 100644 test/css/samples/general-siblings-combinator-each-2/input.svelte
 create mode 100644 test/css/samples/general-siblings-combinator-each-else-nested/_config.js
 create mode 100644 test/css/samples/general-siblings-combinator-each-else-nested/expected.css
 create mode 100644 test/css/samples/general-siblings-combinator-each-else-nested/expected.html
 create mode 100644 test/css/samples/general-siblings-combinator-each-else-nested/input.svelte
 create mode 100644 test/css/samples/general-siblings-combinator-each-else/_config.js
 create mode 100644 test/css/samples/general-siblings-combinator-each-else/expected.css
 create mode 100644 test/css/samples/general-siblings-combinator-each-else/expected.html
 create mode 100644 test/css/samples/general-siblings-combinator-each-else/input.svelte
 create mode 100644 test/css/samples/general-siblings-combinator-each-nested/_config.js
 create mode 100644 test/css/samples/general-siblings-combinator-each-nested/expected.css
 create mode 100644 test/css/samples/general-siblings-combinator-each-nested/expected.html
 create mode 100644 test/css/samples/general-siblings-combinator-each-nested/input.svelte
 create mode 100644 test/css/samples/general-siblings-combinator-each/expected.css
 create mode 100644 test/css/samples/general-siblings-combinator-each/expected.html
 create mode 100644 test/css/samples/general-siblings-combinator-each/input.svelte
 create mode 100644 test/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/_config.js
 create mode 100644 test/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/expected.css
 create mode 100644 test/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/expected.html
 create mode 100644 test/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/input.svelte
 create mode 100644 test/css/samples/general-siblings-combinator-if-not-exhaustive/_config.js
 create mode 100644 test/css/samples/general-siblings-combinator-if-not-exhaustive/expected.css
 create mode 100644 test/css/samples/general-siblings-combinator-if-not-exhaustive/expected.html
 create mode 100644 test/css/samples/general-siblings-combinator-if-not-exhaustive/input.svelte
 create mode 100644 test/css/samples/general-siblings-combinator-if/_config.js
 create mode 100644 test/css/samples/general-siblings-combinator-if/expected.css
 create mode 100644 test/css/samples/general-siblings-combinator-if/expected.html
 create mode 100644 test/css/samples/general-siblings-combinator-if/input.svelte
 create mode 100644 test/css/samples/general-siblings-combinator-slot/_config.js
 create mode 100644 test/css/samples/general-siblings-combinator-slot/expected.css
 create mode 100644 test/css/samples/general-siblings-combinator-slot/input.svelte
 create mode 100644 test/css/samples/general-siblings-combinator-star/_config.js
 create mode 100644 test/css/samples/general-siblings-combinator-star/expected.css
 create mode 100644 test/css/samples/general-siblings-combinator-star/expected.html
 create mode 100644 test/css/samples/general-siblings-combinator-star/input.svelte
 create mode 100644 test/css/samples/general-siblings-combinator/_config.js
 create mode 100644 test/css/samples/general-siblings-combinator/expected.css
 create mode 100644 test/css/samples/general-siblings-combinator/expected.html
 create mode 100644 test/css/samples/general-siblings-combinator/input.svelte
 create mode 100644 test/css/samples/global-compound-selector/_config.js
 create mode 100644 test/css/samples/global-compound-selector/expected.css
 create mode 100644 test/css/samples/global-compound-selector/expected.html
 create mode 100644 test/css/samples/global-compound-selector/input.svelte
 create mode 100644 test/css/samples/global-keyframes-with-no-elements/expected.css
 create mode 100644 test/css/samples/global-keyframes-with-no-elements/input.svelte
 create mode 100644 test/css/samples/global-keyframes/expected.css
 create mode 100644 test/css/samples/global-keyframes/input.svelte
 create mode 100644 test/css/samples/global-with-child-combinator-2/_config.js
 create mode 100644 test/css/samples/global-with-child-combinator-2/expected.css
 create mode 100644 test/css/samples/global-with-child-combinator-2/expected.html
 create mode 100644 test/css/samples/global-with-child-combinator-2/input.svelte
 create mode 100644 test/css/samples/global-with-child-combinator-3/_config.js
 create mode 100644 test/css/samples/global-with-child-combinator-3/expected.css
 create mode 100644 test/css/samples/global-with-child-combinator-3/expected.html
 create mode 100644 test/css/samples/global-with-child-combinator-3/input.svelte
 create mode 100644 test/css/samples/global-with-child-combinator/_config.js
 create mode 100644 test/css/samples/global-with-child-combinator/expected.css
 create mode 100644 test/css/samples/global-with-child-combinator/expected.html
 create mode 100644 test/css/samples/global-with-child-combinator/input.svelte
 create mode 100644 test/css/samples/global-with-unused-descendant/_config.js
 create mode 100644 test/css/samples/global-with-unused-descendant/expected.css
 create mode 100644 test/css/samples/global-with-unused-descendant/input.svelte
 create mode 100644 test/css/samples/global/expected.css
 create mode 100644 test/css/samples/global/input.svelte
 create mode 100644 test/css/samples/host/_config.js
 create mode 100644 test/css/samples/host/expected.css
 create mode 100644 test/css/samples/host/input.svelte
 create mode 100644 test/css/samples/keyframes-autoprefixed/expected.css
 create mode 100644 test/css/samples/keyframes-autoprefixed/input.svelte
 create mode 100644 test/css/samples/keyframes-from-to/expected.css
 create mode 100644 test/css/samples/keyframes-from-to/input.svelte
 create mode 100644 test/css/samples/keyframes/expected.css
 create mode 100644 test/css/samples/keyframes/input.svelte
 create mode 100644 test/css/samples/local-inside-global/expected.css
 create mode 100644 test/css/samples/local-inside-global/input.svelte
 create mode 100644 test/css/samples/media-query-word/expected.css
 create mode 100644 test/css/samples/media-query-word/input.svelte
 create mode 100644 test/css/samples/media-query/expected.css
 create mode 100644 test/css/samples/media-query/input.svelte
 create mode 100644 test/css/samples/nested/_config.js
 create mode 100644 test/css/samples/nested/expected.css
 create mode 100644 test/css/samples/nested/expected.html
 create mode 100644 test/css/samples/nested/input.svelte
 create mode 100644 test/css/samples/not-selector/expected.css
 create mode 100644 test/css/samples/not-selector/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-contains/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/_config.js
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-equals/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-prefix/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-suffix/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-attribute-selector/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-class-dynamic/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-class-dynamic/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-class-dynamic/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-class-static/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-class-static/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-class-static/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant-global-inner-class/_config.js
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant-global-inner-class/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/_config.js
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant-global-inner/_config.js
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant-global-inner/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/_config.js
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant-global-outer/_config.js
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant-global-outer/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant/_config.js
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-descendant/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-global-children/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-global-children/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-global-children/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-global-descendants/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-global-descendants/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-global-descendants/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-global/_config.js
 create mode 100644 test/css/samples/omit-scoping-attribute-global/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-global/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-global/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-id/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-id/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-id/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-multiple-descendants/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-multiple-descendants/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-multiple-descendants/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-whitespace-multiple/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-whitespace-multiple/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-whitespace-multiple/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute-whitespace/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute-whitespace/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute-whitespace/input.svelte
 create mode 100644 test/css/samples/omit-scoping-attribute/expected.css
 create mode 100644 test/css/samples/omit-scoping-attribute/expected.html
 create mode 100644 test/css/samples/omit-scoping-attribute/input.svelte
 create mode 100644 test/css/samples/preserve-specificity/expected.css
 create mode 100644 test/css/samples/preserve-specificity/expected.html
 create mode 100644 test/css/samples/preserve-specificity/input.svelte
 create mode 100644 test/css/samples/pseudo-element/expected.css
 create mode 100644 test/css/samples/pseudo-element/input.svelte
 create mode 100644 test/css/samples/root/_config.js
 create mode 100644 test/css/samples/root/expected.css
 create mode 100644 test/css/samples/root/expected.html
 create mode 100644 test/css/samples/root/input.svelte
 create mode 100644 test/css/samples/siblings-combinator-await-not-exhaustive/_config.js
 create mode 100644 test/css/samples/siblings-combinator-await-not-exhaustive/expected.css
 create mode 100644 test/css/samples/siblings-combinator-await-not-exhaustive/expected.html
 create mode 100644 test/css/samples/siblings-combinator-await-not-exhaustive/input.svelte
 create mode 100644 test/css/samples/siblings-combinator-await/_config.js
 create mode 100644 test/css/samples/siblings-combinator-await/expected.css
 create mode 100644 test/css/samples/siblings-combinator-await/expected.html
 create mode 100644 test/css/samples/siblings-combinator-await/input.svelte
 create mode 100644 test/css/samples/siblings-combinator-each-2/_config.js
 create mode 100644 test/css/samples/siblings-combinator-each-2/expected.css
 create mode 100644 test/css/samples/siblings-combinator-each-2/expected.html
 create mode 100644 test/css/samples/siblings-combinator-each-2/input.svelte
 create mode 100644 test/css/samples/siblings-combinator-each-else-nested/_config.js
 create mode 100644 test/css/samples/siblings-combinator-each-else-nested/expected.css
 create mode 100644 test/css/samples/siblings-combinator-each-else-nested/expected.html
 create mode 100644 test/css/samples/siblings-combinator-each-else-nested/input.svelte
 create mode 100644 test/css/samples/siblings-combinator-each-else/_config.js
 create mode 100644 test/css/samples/siblings-combinator-each-else/expected.css
 create mode 100644 test/css/samples/siblings-combinator-each-else/expected.html
 create mode 100644 test/css/samples/siblings-combinator-each-else/input.svelte
 create mode 100644 test/css/samples/siblings-combinator-each-nested/_config.js
 create mode 100644 test/css/samples/siblings-combinator-each-nested/expected.css
 create mode 100644 test/css/samples/siblings-combinator-each-nested/expected.html
 create mode 100644 test/css/samples/siblings-combinator-each-nested/input.svelte
 create mode 100644 test/css/samples/siblings-combinator-each/expected.css
 create mode 100644 test/css/samples/siblings-combinator-each/expected.html
 create mode 100644 test/css/samples/siblings-combinator-each/input.svelte
 create mode 100644 test/css/samples/siblings-combinator-global/_config.js
 create mode 100644 test/css/samples/siblings-combinator-global/expected.css
 create mode 100644 test/css/samples/siblings-combinator-global/input.svelte
 create mode 100644 test/css/samples/siblings-combinator-if-not-exhaustive-with-each/_config.js
 create mode 100644 test/css/samples/siblings-combinator-if-not-exhaustive-with-each/expected.css
 create mode 100644 test/css/samples/siblings-combinator-if-not-exhaustive-with-each/expected.html
 create mode 100644 test/css/samples/siblings-combinator-if-not-exhaustive-with-each/input.svelte
 create mode 100644 test/css/samples/siblings-combinator-if-not-exhaustive/_config.js
 create mode 100644 test/css/samples/siblings-combinator-if-not-exhaustive/expected.css
 create mode 100644 test/css/samples/siblings-combinator-if-not-exhaustive/expected.html
 create mode 100644 test/css/samples/siblings-combinator-if-not-exhaustive/input.svelte
 create mode 100644 test/css/samples/siblings-combinator-if/_config.js
 create mode 100644 test/css/samples/siblings-combinator-if/expected.css
 create mode 100644 test/css/samples/siblings-combinator-if/expected.html
 create mode 100644 test/css/samples/siblings-combinator-if/input.svelte
 create mode 100644 test/css/samples/siblings-combinator-slot/_config.js
 create mode 100644 test/css/samples/siblings-combinator-slot/expected.css
 create mode 100644 test/css/samples/siblings-combinator-slot/input.svelte
 create mode 100644 test/css/samples/siblings-combinator-star/_config.js
 create mode 100644 test/css/samples/siblings-combinator-star/expected.css
 create mode 100644 test/css/samples/siblings-combinator-star/expected.html
 create mode 100644 test/css/samples/siblings-combinator-star/input.svelte
 create mode 100644 test/css/samples/siblings-combinator-with-spread/_config.js
 create mode 100644 test/css/samples/siblings-combinator-with-spread/expected.css
 create mode 100644 test/css/samples/siblings-combinator-with-spread/expected.html
 create mode 100644 test/css/samples/siblings-combinator-with-spread/input.svelte
 create mode 100644 test/css/samples/siblings-combinator/_config.js
 create mode 100644 test/css/samples/siblings-combinator/expected.css
 create mode 100644 test/css/samples/siblings-combinator/expected.html
 create mode 100644 test/css/samples/siblings-combinator/input.svelte
 create mode 100644 test/css/samples/spread/expected.css
 create mode 100644 test/css/samples/spread/input.svelte
 create mode 100644 test/css/samples/supports-charset/expected.css
 create mode 100644 test/css/samples/supports-charset/input.svelte
 create mode 100644 test/css/samples/supports-font-face/expected.css
 create mode 100644 test/css/samples/supports-font-face/input.svelte
 create mode 100644 test/css/samples/supports-import/expected.css
 create mode 100644 test/css/samples/supports-import/input.svelte
 create mode 100644 test/css/samples/supports-namespace/expected.css
 create mode 100644 test/css/samples/supports-namespace/input.svelte
 create mode 100644 test/css/samples/supports-nested-page/expected.css
 create mode 100644 test/css/samples/supports-nested-page/input.svelte
 create mode 100644 test/css/samples/supports-page/expected.css
 create mode 100644 test/css/samples/supports-page/input.svelte
 create mode 100644 test/css/samples/supports-query/expected.css
 create mode 100644 test/css/samples/supports-query/input.svelte
 create mode 100644 test/css/samples/undefined-with-scope/expected.css
 create mode 100644 test/css/samples/undefined-with-scope/expected.html
 create mode 100644 test/css/samples/undefined-with-scope/input.svelte
 create mode 100644 test/css/samples/universal-selector/expected.css
 create mode 100644 test/css/samples/universal-selector/input.svelte
 create mode 100644 test/css/samples/unknown-at-rule-with-following-rules/expected.css
 create mode 100644 test/css/samples/unknown-at-rule-with-following-rules/input.svelte
 create mode 100644 test/css/samples/unknown-at-rule/expected.css
 create mode 100644 test/css/samples/unknown-at-rule/input.svelte
 create mode 100644 test/css/samples/unused-selector-child-combinator/_config.js
 create mode 100644 test/css/samples/unused-selector-child-combinator/expected.css
 create mode 100644 test/css/samples/unused-selector-child-combinator/input.svelte
 create mode 100644 test/css/samples/unused-selector-leading/_config.js
 create mode 100644 test/css/samples/unused-selector-leading/expected.css
 create mode 100644 test/css/samples/unused-selector-leading/expected.html
 create mode 100644 test/css/samples/unused-selector-leading/input.svelte
 create mode 100644 test/css/samples/unused-selector-string-concat/_config.js
 create mode 100644 test/css/samples/unused-selector-string-concat/expected.css
 create mode 100644 test/css/samples/unused-selector-string-concat/input.svelte
 create mode 100644 test/css/samples/unused-selector-ternary-bailed/_config.js
 create mode 100644 test/css/samples/unused-selector-ternary-bailed/expected.css
 create mode 100644 test/css/samples/unused-selector-ternary-bailed/input.svelte
 create mode 100644 test/css/samples/unused-selector-ternary-concat/_config.js
 create mode 100644 test/css/samples/unused-selector-ternary-concat/expected.css
 create mode 100644 test/css/samples/unused-selector-ternary-concat/input.svelte
 create mode 100644 test/css/samples/unused-selector-ternary-nested/_config.js
 create mode 100644 test/css/samples/unused-selector-ternary-nested/expected.css
 create mode 100644 test/css/samples/unused-selector-ternary-nested/input.svelte
 create mode 100644 test/css/samples/unused-selector-ternary/_config.js
 create mode 100644 test/css/samples/unused-selector-ternary/expected.css
 create mode 100644 test/css/samples/unused-selector-ternary/expected.html
 create mode 100644 test/css/samples/unused-selector-ternary/input.svelte
 create mode 100644 test/css/samples/unused-selector/_config.js
 create mode 100644 test/css/samples/unused-selector/expected.css
 create mode 100644 test/css/samples/unused-selector/expected.html
 create mode 100644 test/css/samples/unused-selector/input.svelte
 create mode 100644 test/css/samples/weird-selectors/expected.css
 create mode 100644 test/css/samples/weird-selectors/input.svelte
 create mode 100644 test/custom-elements/assert.js
 create mode 100644 test/custom-elements/index.ts
 create mode 100644 test/custom-elements/samples/$$props/main.svelte
 create mode 100644 test/custom-elements/samples/$$props/test.js
 create mode 100644 test/custom-elements/samples/$$slot/main.svelte
 create mode 100644 test/custom-elements/samples/$$slot/test.js
 create mode 100644 test/custom-elements/samples/custom-method/main.svelte
 create mode 100644 test/custom-elements/samples/custom-method/test.js
 create mode 100644 test/custom-elements/samples/escaped-css/main.svelte
 create mode 100644 test/custom-elements/samples/escaped-css/test.js
 create mode 100644 test/custom-elements/samples/extended-builtin/_config.js
 create mode 100644 test/custom-elements/samples/extended-builtin/custom-button.js
 create mode 100644 test/custom-elements/samples/extended-builtin/main.svelte
 create mode 100644 test/custom-elements/samples/extended-builtin/test.js
 create mode 100644 test/custom-elements/samples/html-slots/main.svelte
 create mode 100644 test/custom-elements/samples/html-slots/test.js
 create mode 100644 test/custom-elements/samples/html/main.svelte
 create mode 100644 test/custom-elements/samples/html/test.js
 create mode 100644 test/custom-elements/samples/nested.skip/Counter.svelte
 create mode 100644 test/custom-elements/samples/nested.skip/main.svelte
 create mode 100644 test/custom-elements/samples/nested.skip/test.js
 create mode 100644 test/custom-elements/samples/new-styled/main.svelte
 create mode 100644 test/custom-elements/samples/new-styled/test.js
 create mode 100644 test/custom-elements/samples/new/main.svelte
 create mode 100644 test/custom-elements/samples/new/test.js
 create mode 100644 test/custom-elements/samples/no-missing-prop-warnings/_config.js
 create mode 100644 test/custom-elements/samples/no-missing-prop-warnings/main.svelte
 create mode 100644 test/custom-elements/samples/no-missing-prop-warnings/test.js
 create mode 100644 test/custom-elements/samples/no-svelte-options/_config.js
 create mode 100644 test/custom-elements/samples/no-svelte-options/main.svelte
 create mode 100644 test/custom-elements/samples/no-svelte-options/test.js
 create mode 100644 test/custom-elements/samples/no-tag-warning/_config.js
 create mode 100644 test/custom-elements/samples/no-tag-warning/main.svelte
 create mode 100644 test/custom-elements/samples/no-tag-warning/test.js
 create mode 100644 test/custom-elements/samples/no-tag/_config.js
 create mode 100644 test/custom-elements/samples/no-tag/main.svelte
 create mode 100644 test/custom-elements/samples/no-tag/test.js
 create mode 100644 test/custom-elements/samples/oncreate/main.svelte
 create mode 100644 test/custom-elements/samples/oncreate/test.js
 create mode 100644 test/custom-elements/samples/ondestroy/main.svelte
 create mode 100644 test/custom-elements/samples/ondestroy/test.js
 create mode 100644 test/custom-elements/samples/props/main.svelte
 create mode 100644 test/custom-elements/samples/props/my-widget.svelte
 create mode 100644 test/custom-elements/samples/props/test.js
 create mode 100644 test/helpers.ts
 create mode 100644 test/hydration/index.ts
 create mode 100644 test/hydration/samples/basic/_after.html
 create mode 100644 test/hydration/samples/basic/_before.html
 create mode 100644 test/hydration/samples/basic/_config.js
 create mode 100644 test/hydration/samples/basic/main.svelte
 create mode 100644 test/hydration/samples/binding-input/_after.html
 create mode 100644 test/hydration/samples/binding-input/_before.html
 create mode 100644 test/hydration/samples/binding-input/_config.js
 create mode 100644 test/hydration/samples/binding-input/main.svelte
 create mode 100644 test/hydration/samples/claim-text/Component.svelte
 create mode 100644 test/hydration/samples/claim-text/Layout.svelte
 create mode 100644 test/hydration/samples/claim-text/_after.html
 create mode 100644 test/hydration/samples/claim-text/_before.html
 create mode 100644 test/hydration/samples/claim-text/main.svelte
 create mode 100644 test/hydration/samples/component-in-element/Nested.svelte
 create mode 100644 test/hydration/samples/component-in-element/_after.html
 create mode 100644 test/hydration/samples/component-in-element/_before.html
 create mode 100644 test/hydration/samples/component-in-element/_config.js
 create mode 100644 test/hydration/samples/component-in-element/main.svelte
 create mode 100644 test/hydration/samples/component/Nested.svelte
 create mode 100644 test/hydration/samples/component/_after.html
 create mode 100644 test/hydration/samples/component/_before.html
 create mode 100644 test/hydration/samples/component/_config.js
 create mode 100644 test/hydration/samples/component/main.svelte
 create mode 100644 test/hydration/samples/dynamic-text-changed/_after.html
 create mode 100644 test/hydration/samples/dynamic-text-changed/_before.html
 create mode 100644 test/hydration/samples/dynamic-text-changed/_config.js
 create mode 100644 test/hydration/samples/dynamic-text-changed/main.svelte
 create mode 100644 test/hydration/samples/dynamic-text-nil/_after.html
 create mode 100644 test/hydration/samples/dynamic-text-nil/_before.html
 create mode 100644 test/hydration/samples/dynamic-text-nil/_config.js
 create mode 100644 test/hydration/samples/dynamic-text-nil/main.svelte
 create mode 100644 test/hydration/samples/dynamic-text/_after.html
 create mode 100644 test/hydration/samples/dynamic-text/_before.html
 create mode 100644 test/hydration/samples/dynamic-text/_config.js
 create mode 100644 test/hydration/samples/dynamic-text/main.svelte
 create mode 100644 test/hydration/samples/each-block-arg-clash/_after.html
 create mode 100644 test/hydration/samples/each-block-arg-clash/_before.html
 create mode 100644 test/hydration/samples/each-block-arg-clash/_config.js
 create mode 100644 test/hydration/samples/each-block-arg-clash/main.svelte
 create mode 100644 test/hydration/samples/each-block/_after.html
 create mode 100644 test/hydration/samples/each-block/_before.html
 create mode 100644 test/hydration/samples/each-block/_config.js
 create mode 100644 test/hydration/samples/each-block/main.svelte
 create mode 100644 test/hydration/samples/each-else/_after.html
 create mode 100644 test/hydration/samples/each-else/_before.html
 create mode 100644 test/hydration/samples/each-else/main.svelte
 create mode 100644 test/hydration/samples/element-attribute-added/_after.html
 create mode 100644 test/hydration/samples/element-attribute-added/_before.html
 create mode 100644 test/hydration/samples/element-attribute-added/_config.js
 create mode 100644 test/hydration/samples/element-attribute-added/main.svelte
 create mode 100644 test/hydration/samples/element-attribute-changed/_after.html
 create mode 100644 test/hydration/samples/element-attribute-changed/_before.html
 create mode 100644 test/hydration/samples/element-attribute-changed/_config.js
 create mode 100644 test/hydration/samples/element-attribute-changed/main.svelte
 create mode 100644 test/hydration/samples/element-attribute-removed/_after.html
 create mode 100644 test/hydration/samples/element-attribute-removed/_before.html
 create mode 100644 test/hydration/samples/element-attribute-removed/_config.js
 create mode 100644 test/hydration/samples/element-attribute-removed/main.svelte
 create mode 100644 test/hydration/samples/element-attribute-unchanged/_after.html
 create mode 100644 test/hydration/samples/element-attribute-unchanged/_before.html
 create mode 100644 test/hydration/samples/element-attribute-unchanged/_config.js
 create mode 100644 test/hydration/samples/element-attribute-unchanged/main.svelte
 create mode 100644 test/hydration/samples/element-nested-sibling/_after.html
 create mode 100644 test/hydration/samples/element-nested-sibling/_before.html
 create mode 100644 test/hydration/samples/element-nested-sibling/_config.js
 create mode 100644 test/hydration/samples/element-nested-sibling/main.svelte
 create mode 100644 test/hydration/samples/element-nested/_after.html
 create mode 100644 test/hydration/samples/element-nested/_before.html
 create mode 100644 test/hydration/samples/element-nested/_config.js
 create mode 100644 test/hydration/samples/element-nested/main.svelte
 create mode 100644 test/hydration/samples/element-ref/_after.html
 create mode 100644 test/hydration/samples/element-ref/_before.html
 create mode 100644 test/hydration/samples/element-ref/_config.js
 create mode 100644 test/hydration/samples/element-ref/main.svelte
 create mode 100644 test/hydration/samples/event-handler/_after.html
 create mode 100644 test/hydration/samples/event-handler/_before.html
 create mode 100644 test/hydration/samples/event-handler/_config.js
 create mode 100644 test/hydration/samples/event-handler/main.svelte
 create mode 100644 test/hydration/samples/expression-sibling/_after.html
 create mode 100644 test/hydration/samples/expression-sibling/_before.html
 create mode 100644 test/hydration/samples/expression-sibling/_config.js
 create mode 100644 test/hydration/samples/expression-sibling/main.svelte
 create mode 100644 test/hydration/samples/head-meta-hydrate-duplicate/_after.html
 create mode 100644 test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html
 create mode 100644 test/hydration/samples/head-meta-hydrate-duplicate/_before.html
 create mode 100644 test/hydration/samples/head-meta-hydrate-duplicate/_before_head.html
 create mode 100644 test/hydration/samples/head-meta-hydrate-duplicate/_config.js
 create mode 100644 test/hydration/samples/head-meta-hydrate-duplicate/main.svelte
 create mode 100644 test/hydration/samples/if-block-anchor/_after.html
 create mode 100644 test/hydration/samples/if-block-anchor/_before.html
 create mode 100644 test/hydration/samples/if-block-anchor/_config.js
 create mode 100644 test/hydration/samples/if-block-anchor/main.svelte
 create mode 100644 test/hydration/samples/if-block-false/_after.html
 create mode 100644 test/hydration/samples/if-block-false/_before.html
 create mode 100644 test/hydration/samples/if-block-false/_config.js
 create mode 100644 test/hydration/samples/if-block-false/main.svelte
 create mode 100644 test/hydration/samples/if-block-update/_after.html
 create mode 100644 test/hydration/samples/if-block-update/_before.html
 create mode 100644 test/hydration/samples/if-block-update/_config.js
 create mode 100644 test/hydration/samples/if-block-update/main.svelte
 create mode 100644 test/hydration/samples/if-block/_after.html
 create mode 100644 test/hydration/samples/if-block/_before.html
 create mode 100644 test/hydration/samples/if-block/_config.js
 create mode 100644 test/hydration/samples/if-block/main.svelte
 create mode 100644 test/hydration/samples/raw-with-empty-line-at-top/_after.html
 create mode 100644 test/hydration/samples/raw-with-empty-line-at-top/_before.html
 create mode 100644 test/hydration/samples/raw-with-empty-line-at-top/main.svelte
 create mode 100644 test/hydration/samples/raw/_after.html
 create mode 100644 test/hydration/samples/raw/_before.html
 create mode 100644 test/hydration/samples/raw/_config.js
 create mode 100644 test/hydration/samples/raw/main.svelte
 create mode 100644 test/hydration/samples/text-fallback/Nested.svelte
 create mode 100644 test/hydration/samples/text-fallback/_after.html
 create mode 100644 test/hydration/samples/text-fallback/_before.html
 create mode 100644 test/hydration/samples/text-fallback/main.svelte
 create mode 100644 test/hydration/samples/top-level-cleanup-2/_after.html
 create mode 100644 test/hydration/samples/top-level-cleanup-2/_before.html
 create mode 100644 test/hydration/samples/top-level-cleanup-2/_config.js
 create mode 100644 test/hydration/samples/top-level-cleanup-2/main.svelte
 create mode 100644 test/hydration/samples/top-level-cleanup/_after.html
 create mode 100644 test/hydration/samples/top-level-cleanup/_before.html
 create mode 100644 test/hydration/samples/top-level-cleanup/_config.js
 create mode 100644 test/hydration/samples/top-level-cleanup/main.svelte
 create mode 100644 test/hydration/samples/top-level-text/_after.html
 create mode 100644 test/hydration/samples/top-level-text/_before.html
 create mode 100644 test/hydration/samples/top-level-text/_config.js
 create mode 100644 test/hydration/samples/top-level-text/main.svelte
 create mode 100644 test/js/README.md
 create mode 100644 test/js/index.ts
 create mode 100644 test/js/samples/action-custom-event-handler/expected.js
 create mode 100644 test/js/samples/action-custom-event-handler/input.svelte
 create mode 100644 test/js/samples/action/expected.js
 create mode 100644 test/js/samples/action/input.svelte
 create mode 100644 test/js/samples/bind-online/expected.js
 create mode 100644 test/js/samples/bind-online/input.svelte
 create mode 100644 test/js/samples/bind-open/expected.js
 create mode 100644 test/js/samples/bind-open/input.svelte
 create mode 100644 test/js/samples/bind-width-height/expected.js
 create mode 100644 test/js/samples/bind-width-height/input.svelte
 create mode 100644 test/js/samples/bindings-readonly-order/expected.js
 create mode 100644 test/js/samples/bindings-readonly-order/input.svelte
 create mode 100644 test/js/samples/capture-inject-dev-only/_config.js
 create mode 100644 test/js/samples/capture-inject-dev-only/expected.js
 create mode 100644 test/js/samples/capture-inject-dev-only/input.svelte
 create mode 100644 test/js/samples/capture-inject-state/_config.js
 create mode 100644 test/js/samples/capture-inject-state/expected.js
 create mode 100644 test/js/samples/capture-inject-state/input.svelte
 create mode 100644 test/js/samples/collapse-element-class-name/expected.js
 create mode 100644 test/js/samples/collapse-element-class-name/input.svelte
 create mode 100644 test/js/samples/collapses-text-around-comments/expected.js
 create mode 100644 test/js/samples/collapses-text-around-comments/input.svelte
 create mode 100644 test/js/samples/component-static-array/expected.js
 create mode 100644 test/js/samples/component-static-array/input.svelte
 create mode 100644 test/js/samples/component-static-immutable/_config.js
 create mode 100644 test/js/samples/component-static-immutable/expected.js
 create mode 100644 test/js/samples/component-static-immutable/input.svelte
 create mode 100644 test/js/samples/component-static-immutable2/_config.js
 create mode 100644 test/js/samples/component-static-immutable2/expected.js
 create mode 100644 test/js/samples/component-static-immutable2/input.svelte
 create mode 100644 test/js/samples/component-static-var/expected.js
 create mode 100644 test/js/samples/component-static-var/input.svelte
 create mode 100644 test/js/samples/component-static/expected.js
 create mode 100644 test/js/samples/component-static/input.svelte
 create mode 100644 test/js/samples/component-store-access-invalidate/expected.js
 create mode 100644 test/js/samples/component-store-access-invalidate/input.svelte
 create mode 100644 test/js/samples/component-store-file-invalidate/expected.js
 create mode 100644 test/js/samples/component-store-file-invalidate/input.svelte
 create mode 100644 test/js/samples/component-store-file-invalidate/store.js
 create mode 100644 test/js/samples/component-store-reassign-invalidate/expected.js
 create mode 100644 test/js/samples/component-store-reassign-invalidate/input.svelte
 create mode 100644 test/js/samples/computed-collapsed-if/expected.js
 create mode 100644 test/js/samples/computed-collapsed-if/input.svelte
 create mode 100644 test/js/samples/css-media-query/expected.js
 create mode 100644 test/js/samples/css-media-query/input.svelte
 create mode 100644 test/js/samples/css-shadow-dom-keyframes/_config.js
 create mode 100644 test/js/samples/css-shadow-dom-keyframes/expected.js
 create mode 100644 test/js/samples/css-shadow-dom-keyframes/input.svelte
 create mode 100644 test/js/samples/custom-svelte-path/_config.js
 create mode 100644 test/js/samples/custom-svelte-path/expected.js
 create mode 100644 test/js/samples/custom-svelte-path/input.svelte
 create mode 100644 test/js/samples/data-attribute/expected.js
 create mode 100644 test/js/samples/data-attribute/input.svelte
 create mode 100644 test/js/samples/debug-empty/_config.js
 create mode 100644 test/js/samples/debug-empty/expected.js
 create mode 100644 test/js/samples/debug-empty/input.svelte
 create mode 100644 test/js/samples/debug-foo-bar-baz-things/_config.js
 create mode 100644 test/js/samples/debug-foo-bar-baz-things/expected.js
 create mode 100644 test/js/samples/debug-foo-bar-baz-things/input.svelte
 create mode 100644 test/js/samples/debug-foo/_config.js
 create mode 100644 test/js/samples/debug-foo/expected.js
 create mode 100644 test/js/samples/debug-foo/input.svelte
 create mode 100644 test/js/samples/debug-hoisted/_config.js
 create mode 100644 test/js/samples/debug-hoisted/expected.js
 create mode 100644 test/js/samples/debug-hoisted/input.svelte
 create mode 100644 test/js/samples/debug-no-dependencies/_config.js
 create mode 100644 test/js/samples/debug-no-dependencies/expected.js
 create mode 100644 test/js/samples/debug-no-dependencies/input.svelte
 create mode 100644 test/js/samples/debug-ssr-foo/_config.js
 create mode 100644 test/js/samples/debug-ssr-foo/expected.js
 create mode 100644 test/js/samples/debug-ssr-foo/input.svelte
 create mode 100644 test/js/samples/deconflict-builtins/expected.js
 create mode 100644 test/js/samples/deconflict-builtins/input.svelte
 create mode 100644 test/js/samples/deconflict-globals/expected.js
 create mode 100644 test/js/samples/deconflict-globals/input.svelte
 create mode 100644 test/js/samples/dev-warning-missing-data-computed/_config.js
 create mode 100644 test/js/samples/dev-warning-missing-data-computed/expected.js
 create mode 100644 test/js/samples/dev-warning-missing-data-computed/input.svelte
 create mode 100644 test/js/samples/dont-invalidate-this/expected.js
 create mode 100644 test/js/samples/dont-invalidate-this/input.svelte
 create mode 100644 test/js/samples/dynamic-import/expected.js
 create mode 100644 test/js/samples/dynamic-import/input.svelte
 create mode 100644 test/js/samples/each-block-array-literal/expected.js
 create mode 100644 test/js/samples/each-block-array-literal/input.svelte
 create mode 100644 test/js/samples/each-block-changed-check/expected.js
 create mode 100644 test/js/samples/each-block-changed-check/input.svelte
 create mode 100644 test/js/samples/each-block-keyed-animated/expected.js
 create mode 100644 test/js/samples/each-block-keyed-animated/input.svelte
 create mode 100644 test/js/samples/each-block-keyed/expected.js
 create mode 100644 test/js/samples/each-block-keyed/input.svelte
 create mode 100644 test/js/samples/empty-dom/expected.js
 create mode 100644 test/js/samples/empty-dom/input.svelte
 create mode 100644 test/js/samples/event-handler-dynamic/expected.js
 create mode 100644 test/js/samples/event-handler-dynamic/input.svelte
 create mode 100644 test/js/samples/event-handler-no-passive/expected.js
 create mode 100644 test/js/samples/event-handler-no-passive/input.svelte
 create mode 100644 test/js/samples/event-modifiers/expected.js
 create mode 100644 test/js/samples/event-modifiers/input.svelte
 create mode 100644 test/js/samples/export-from-accessors/_config.js
 create mode 100644 test/js/samples/export-from-accessors/expected.js
 create mode 100644 test/js/samples/export-from-accessors/input.svelte
 create mode 100644 test/js/samples/export-from-cjs/_config.js
 create mode 100644 test/js/samples/export-from-cjs/expected.js
 create mode 100644 test/js/samples/export-from-cjs/input.svelte
 create mode 100644 test/js/samples/export-from/expected.js
 create mode 100644 test/js/samples/export-from/input.svelte
 create mode 100644 test/js/samples/head-no-whitespace/expected.js
 create mode 100644 test/js/samples/head-no-whitespace/input.svelte
 create mode 100644 test/js/samples/hoisted-const/expected.js
 create mode 100644 test/js/samples/hoisted-const/input.svelte
 create mode 100644 test/js/samples/hoisted-let/expected.js
 create mode 100644 test/js/samples/hoisted-let/input.svelte
 create mode 100644 test/js/samples/hydrated-void-element/_config.js
 create mode 100644 test/js/samples/hydrated-void-element/expected.js
 create mode 100644 test/js/samples/hydrated-void-element/input.svelte
 create mode 100644 test/js/samples/hydrated-void-svg-element/_config.js
 create mode 100644 test/js/samples/hydrated-void-svg-element/expected.js
 create mode 100644 test/js/samples/hydrated-void-svg-element/input.svelte
 create mode 100644 test/js/samples/if-block-complex/expected.js
 create mode 100644 test/js/samples/if-block-complex/input.svelte
 create mode 100644 test/js/samples/if-block-no-update/expected.js
 create mode 100644 test/js/samples/if-block-no-update/input.svelte
 create mode 100644 test/js/samples/if-block-simple/expected.js
 create mode 100644 test/js/samples/if-block-simple/input.svelte
 create mode 100644 test/js/samples/import-meta/expected.js
 create mode 100644 test/js/samples/import-meta/input.svelte
 create mode 100644 test/js/samples/initial-context/expected.js
 create mode 100644 test/js/samples/initial-context/input.svelte
 create mode 100644 test/js/samples/inline-style-optimized-multiple/expected.js
 create mode 100644 test/js/samples/inline-style-optimized-multiple/input.svelte
 create mode 100644 test/js/samples/inline-style-optimized-url/expected.js
 create mode 100644 test/js/samples/inline-style-optimized-url/input.svelte
 create mode 100644 test/js/samples/inline-style-optimized/expected.js
 create mode 100644 test/js/samples/inline-style-optimized/input.svelte
 create mode 100644 test/js/samples/inline-style-unoptimized/expected.js
 create mode 100644 test/js/samples/inline-style-unoptimized/input.svelte
 create mode 100644 test/js/samples/inline-style-without-updates/expected.js
 create mode 100644 test/js/samples/inline-style-without-updates/input.svelte
 create mode 100644 test/js/samples/input-files/expected.js
 create mode 100644 test/js/samples/input-files/input.svelte
 create mode 100644 test/js/samples/input-no-initial-value/expected.js
 create mode 100644 test/js/samples/input-no-initial-value/input.svelte
 create mode 100644 test/js/samples/input-range/expected.js
 create mode 100644 test/js/samples/input-range/input.svelte
 create mode 100644 test/js/samples/input-value/expected.js
 create mode 100644 test/js/samples/input-value/input.svelte
 create mode 100644 test/js/samples/input-without-blowback-guard/expected.js
 create mode 100644 test/js/samples/input-without-blowback-guard/input.svelte
 create mode 100644 test/js/samples/instrumentation-script-if-no-block/expected.js
 create mode 100644 test/js/samples/instrumentation-script-if-no-block/input.svelte
 create mode 100644 test/js/samples/instrumentation-script-main-block/expected.js
 create mode 100644 test/js/samples/instrumentation-script-main-block/input.svelte
 create mode 100644 test/js/samples/instrumentation-script-x-equals-x/expected.js
 create mode 100644 test/js/samples/instrumentation-script-x-equals-x/input.svelte
 create mode 100644 test/js/samples/instrumentation-template-if-no-block/expected.js
 create mode 100644 test/js/samples/instrumentation-template-if-no-block/input.svelte
 create mode 100644 test/js/samples/instrumentation-template-x-equals-x/expected.js
 create mode 100644 test/js/samples/instrumentation-template-x-equals-x/input.svelte
 create mode 100644 test/js/samples/legacy-input-type/_config.js
 create mode 100644 test/js/samples/legacy-input-type/expected.js
 create mode 100644 test/js/samples/legacy-input-type/input.svelte
 create mode 100644 test/js/samples/loop-protect/_config.js
 create mode 100644 test/js/samples/loop-protect/expected.js
 create mode 100644 test/js/samples/loop-protect/input.svelte
 create mode 100644 test/js/samples/media-bindings/expected.js
 create mode 100644 test/js/samples/media-bindings/input.svelte
 create mode 100644 test/js/samples/non-imported-component/expected.js
 create mode 100644 test/js/samples/non-imported-component/input.svelte
 create mode 100644 test/js/samples/non-mutable-reference/expected.js
 create mode 100644 test/js/samples/non-mutable-reference/input.svelte
 create mode 100644 test/js/samples/optional-chaining/expected.js
 create mode 100644 test/js/samples/optional-chaining/input.svelte
 create mode 100644 test/js/samples/reactive-class-optimized/expected.js
 create mode 100644 test/js/samples/reactive-class-optimized/input.svelte
 create mode 100644 test/js/samples/reactive-class-optimized/store.js
 create mode 100644 test/js/samples/reactive-values-non-topologically-ordered/expected.js
 create mode 100644 test/js/samples/reactive-values-non-topologically-ordered/input.svelte
 create mode 100644 test/js/samples/reactive-values-non-writable-dependencies/expected.js
 create mode 100644 test/js/samples/reactive-values-non-writable-dependencies/input.svelte
 create mode 100644 test/js/samples/select-dynamic-value/expected.js
 create mode 100644 test/js/samples/select-dynamic-value/input.svelte
 create mode 100644 test/js/samples/setup-method/expected.js
 create mode 100644 test/js/samples/setup-method/input.svelte
 create mode 100644 test/js/samples/src-attribute-check-in-foreign/_config.js
 create mode 100644 test/js/samples/src-attribute-check-in-foreign/expected.js
 create mode 100644 test/js/samples/src-attribute-check-in-foreign/input.svelte
 create mode 100644 test/js/samples/src-attribute-check-in-svg/_config.js
 create mode 100644 test/js/samples/src-attribute-check-in-svg/expected.js
 create mode 100644 test/js/samples/src-attribute-check-in-svg/input.svelte
 create mode 100644 test/js/samples/src-attribute-check/_config.js
 create mode 100644 test/js/samples/src-attribute-check/expected.js
 create mode 100644 test/js/samples/src-attribute-check/input.svelte
 create mode 100644 test/js/samples/ssr-no-oncreate-etc/_config.js
 create mode 100644 test/js/samples/ssr-no-oncreate-etc/expected.js
 create mode 100644 test/js/samples/ssr-no-oncreate-etc/input.svelte
 create mode 100644 test/js/samples/ssr-preserve-comments/_config.js
 create mode 100644 test/js/samples/ssr-preserve-comments/expected.js
 create mode 100644 test/js/samples/ssr-preserve-comments/input.svelte
 create mode 100644 test/js/samples/svg-title/expected.js
 create mode 100644 test/js/samples/svg-title/input.svelte
 create mode 100644 test/js/samples/title/expected.js
 create mode 100644 test/js/samples/title/input.svelte
 create mode 100644 test/js/samples/transition-local/expected.js
 create mode 100644 test/js/samples/transition-local/input.svelte
 create mode 100644 test/js/samples/transition-repeated-outro/expected.js
 create mode 100644 test/js/samples/transition-repeated-outro/input.svelte
 create mode 100644 test/js/samples/unchanged-expression/expected.js
 create mode 100644 test/js/samples/unchanged-expression/input.svelte
 create mode 100644 test/js/samples/unreferenced-state-not-invalidated/expected.js
 create mode 100644 test/js/samples/unreferenced-state-not-invalidated/input.svelte
 create mode 100644 test/js/samples/use-elements-as-anchors/expected.js
 create mode 100644 test/js/samples/use-elements-as-anchors/input.svelte
 create mode 100644 test/js/samples/valid-inner-html-for-static-element/expected.js
 create mode 100644 test/js/samples/valid-inner-html-for-static-element/input.svelte
 create mode 100644 test/js/samples/video-bindings/expected.js
 create mode 100644 test/js/samples/video-bindings/input.svelte
 create mode 100644 test/js/samples/window-binding-online/expected.js
 create mode 100644 test/js/samples/window-binding-online/input.svelte
 create mode 100644 test/js/samples/window-binding-scroll/expected.js
 create mode 100644 test/js/samples/window-binding-scroll/input.svelte
 create mode 100644 test/js/update.js
 create mode 100644 test/motion/index.ts
 create mode 100644 test/parser/index.ts
 create mode 100644 test/parser/samples/action-duplicate/input.svelte
 create mode 100644 test/parser/samples/action-duplicate/output.json
 create mode 100644 test/parser/samples/action-with-call/input.svelte
 create mode 100644 test/parser/samples/action-with-call/output.json
 create mode 100644 test/parser/samples/action-with-identifier/input.svelte
 create mode 100644 test/parser/samples/action-with-identifier/output.json
 create mode 100644 test/parser/samples/action-with-literal/input.svelte
 create mode 100644 test/parser/samples/action-with-literal/output.json
 create mode 100644 test/parser/samples/action/input.svelte
 create mode 100644 test/parser/samples/action/output.json
 create mode 100644 test/parser/samples/animation/input.svelte
 create mode 100644 test/parser/samples/animation/output.json
 create mode 100644 test/parser/samples/attribute-class-directive/input.svelte
 create mode 100644 test/parser/samples/attribute-class-directive/output.json
 create mode 100644 test/parser/samples/attribute-containing-solidus/input.svelte
 create mode 100644 test/parser/samples/attribute-containing-solidus/output.json
 create mode 100644 test/parser/samples/attribute-curly-bracket/input.svelte
 create mode 100644 test/parser/samples/attribute-curly-bracket/output.json
 create mode 100644 test/parser/samples/attribute-dynamic-boolean/input.svelte
 create mode 100644 test/parser/samples/attribute-dynamic-boolean/output.json
 create mode 100644 test/parser/samples/attribute-dynamic/input.svelte
 create mode 100644 test/parser/samples/attribute-dynamic/output.json
 create mode 100644 test/parser/samples/attribute-empty-error/error.json
 create mode 100644 test/parser/samples/attribute-empty-error/input.svelte
 create mode 100644 test/parser/samples/attribute-empty/input.svelte
 create mode 100644 test/parser/samples/attribute-empty/output.json
 create mode 100644 test/parser/samples/attribute-escaped/input.svelte
 create mode 100644 test/parser/samples/attribute-escaped/output.json
 create mode 100644 test/parser/samples/attribute-multiple/input.svelte
 create mode 100644 test/parser/samples/attribute-multiple/output.json
 create mode 100644 test/parser/samples/attribute-shorthand/input.svelte
 create mode 100644 test/parser/samples/attribute-shorthand/output.json
 create mode 100644 test/parser/samples/attribute-static-boolean/input.svelte
 create mode 100644 test/parser/samples/attribute-static-boolean/output.json
 create mode 100644 test/parser/samples/attribute-static/input.svelte
 create mode 100644 test/parser/samples/attribute-static/output.json
 create mode 100644 test/parser/samples/attribute-style-directive-shorthand/input.svelte
 create mode 100644 test/parser/samples/attribute-style-directive-shorthand/output.json
 create mode 100644 test/parser/samples/attribute-style-directive-string/input.svelte
 create mode 100644 test/parser/samples/attribute-style-directive-string/output.json
 create mode 100644 test/parser/samples/attribute-style-directive/input.svelte
 create mode 100644 test/parser/samples/attribute-style-directive/output.json
 create mode 100644 test/parser/samples/attribute-style/input.svelte
 create mode 100644 test/parser/samples/attribute-style/output.json
 create mode 100644 test/parser/samples/attribute-unique-binding-error/error.json
 create mode 100644 test/parser/samples/attribute-unique-binding-error/input.svelte
 create mode 100644 test/parser/samples/attribute-unique-error/error.json
 create mode 100644 test/parser/samples/attribute-unique-error/input.svelte
 create mode 100644 test/parser/samples/attribute-unique-shorthand-error/error.json
 create mode 100644 test/parser/samples/attribute-unique-shorthand-error/input.svelte
 create mode 100644 test/parser/samples/attribute-unquoted/input.svelte
 create mode 100644 test/parser/samples/attribute-unquoted/output.json
 create mode 100644 test/parser/samples/attribute-with-whitespace/input.svelte
 create mode 100644 test/parser/samples/attribute-with-whitespace/output.json
 create mode 100644 test/parser/samples/await-catch/input.svelte
 create mode 100644 test/parser/samples/await-catch/output.json
 create mode 100644 test/parser/samples/await-then-catch/input.svelte
 create mode 100644 test/parser/samples/await-then-catch/output.json
 create mode 100644 test/parser/samples/binding-shorthand/input.svelte
 create mode 100644 test/parser/samples/binding-shorthand/output.json
 create mode 100644 test/parser/samples/binding/input.svelte
 create mode 100644 test/parser/samples/binding/output.json
 create mode 100644 test/parser/samples/comment-with-ignores/input.svelte
 create mode 100644 test/parser/samples/comment-with-ignores/output.json
 create mode 100644 test/parser/samples/comment/input.svelte
 create mode 100644 test/parser/samples/comment/output.json
 create mode 100644 test/parser/samples/component-dynamic/input.svelte
 create mode 100644 test/parser/samples/component-dynamic/output.json
 create mode 100644 test/parser/samples/convert-entities-in-element/input.svelte
 create mode 100644 test/parser/samples/convert-entities-in-element/output.json
 create mode 100644 test/parser/samples/convert-entities/input.svelte
 create mode 100644 test/parser/samples/convert-entities/output.json
 create mode 100644 test/parser/samples/css/input.svelte
 create mode 100644 test/parser/samples/css/output.json
 create mode 100644 test/parser/samples/dynamic-element-string/input.svelte
 create mode 100644 test/parser/samples/dynamic-element-string/output.json
 create mode 100644 test/parser/samples/dynamic-element-variable/input.svelte
 create mode 100644 test/parser/samples/dynamic-element-variable/output.json
 create mode 100644 test/parser/samples/dynamic-import/input.svelte
 create mode 100644 test/parser/samples/dynamic-import/output.json
 create mode 100644 test/parser/samples/each-block-destructured/input.svelte
 create mode 100644 test/parser/samples/each-block-destructured/output.json
 create mode 100644 test/parser/samples/each-block-else/input.svelte
 create mode 100644 test/parser/samples/each-block-else/output.json
 create mode 100644 test/parser/samples/each-block-indexed/input.svelte
 create mode 100644 test/parser/samples/each-block-indexed/output.json
 create mode 100644 test/parser/samples/each-block-keyed/input.svelte
 create mode 100644 test/parser/samples/each-block-keyed/output.json
 create mode 100644 test/parser/samples/each-block/input.svelte
 create mode 100644 test/parser/samples/each-block/output.json
 create mode 100644 test/parser/samples/element-with-attribute-empty-string/input.svelte
 create mode 100644 test/parser/samples/element-with-attribute-empty-string/output.json
 create mode 100644 test/parser/samples/element-with-attribute/input.svelte
 create mode 100644 test/parser/samples/element-with-attribute/output.json
 create mode 100644 test/parser/samples/element-with-mustache/input.svelte
 create mode 100644 test/parser/samples/element-with-mustache/output.json
 create mode 100644 test/parser/samples/element-with-text/input.svelte
 create mode 100644 test/parser/samples/element-with-text/output.json
 create mode 100644 test/parser/samples/elements/input.svelte
 create mode 100644 test/parser/samples/elements/output.json
 create mode 100644 test/parser/samples/error-catch-before-closing/error.json
 create mode 100644 test/parser/samples/error-catch-before-closing/input.svelte
 create mode 100644 test/parser/samples/error-catch-without-await/error.json
 create mode 100644 test/parser/samples/error-catch-without-await/input.svelte
 create mode 100644 test/parser/samples/error-comment-unclosed/error.json
 create mode 100644 test/parser/samples/error-comment-unclosed/input.svelte
 create mode 100644 test/parser/samples/error-css-global-without-selector/error.json
 create mode 100644 test/parser/samples/error-css-global-without-selector/input.svelte
 create mode 100644 test/parser/samples/error-css/error.json
 create mode 100644 test/parser/samples/error-css/input.svelte
 create mode 100644 test/parser/samples/error-else-before-closing-2/error.json
 create mode 100644 test/parser/samples/error-else-before-closing-2/input.svelte
 create mode 100644 test/parser/samples/error-else-before-closing-3/error.json
 create mode 100644 test/parser/samples/error-else-before-closing-3/input.svelte
 create mode 100644 test/parser/samples/error-else-before-closing/error.json
 create mode 100644 test/parser/samples/error-else-before-closing/input.svelte
 create mode 100644 test/parser/samples/error-else-if-before-closing-2/error.json
 create mode 100644 test/parser/samples/error-else-if-before-closing-2/input.svelte
 create mode 100644 test/parser/samples/error-else-if-before-closing/error.json
 create mode 100644 test/parser/samples/error-else-if-before-closing/input.svelte
 create mode 100644 test/parser/samples/error-else-if-without-if/error.json
 create mode 100644 test/parser/samples/error-else-if-without-if/input.svelte
 create mode 100644 test/parser/samples/error-empty-attribute-shorthand/error.json
 create mode 100644 test/parser/samples/error-empty-attribute-shorthand/input.svelte
 create mode 100644 test/parser/samples/error-empty-classname-binding/error.json
 create mode 100644 test/parser/samples/error-empty-classname-binding/input.svelte
 create mode 100644 test/parser/samples/error-empty-directive-name/error.json
 create mode 100644 test/parser/samples/error-empty-directive-name/input.svelte
 create mode 100644 test/parser/samples/error-illegal-expression/error.json
 create mode 100644 test/parser/samples/error-illegal-expression/input.svelte
 create mode 100644 test/parser/samples/error-multiple-styles/error.json
 create mode 100644 test/parser/samples/error-multiple-styles/input.svelte
 create mode 100644 test/parser/samples/error-script-unclosed-eof/error.json
 create mode 100644 test/parser/samples/error-script-unclosed-eof/input.svelte
 create mode 100644 test/parser/samples/error-script-unclosed/error.json
 create mode 100644 test/parser/samples/error-script-unclosed/input.svelte
 create mode 100644 test/parser/samples/error-self-reference/error.json
 create mode 100644 test/parser/samples/error-self-reference/input.svelte
 create mode 100644 test/parser/samples/error-style-unclosed-eof/error.json
 create mode 100644 test/parser/samples/error-style-unclosed-eof/input.svelte
 create mode 100644 test/parser/samples/error-style-unclosed/error.json
 create mode 100644 test/parser/samples/error-style-unclosed/input.svelte
 create mode 100644 test/parser/samples/error-svelte-selfdestructive/error.json
 create mode 100644 test/parser/samples/error-svelte-selfdestructive/input.svelte
 create mode 100644 test/parser/samples/error-then-before-closing/error.json
 create mode 100644 test/parser/samples/error-then-before-closing/input.svelte
 create mode 100644 test/parser/samples/error-then-without-await/error.json
 create mode 100644 test/parser/samples/error-then-without-await/input.svelte
 create mode 100644 test/parser/samples/error-unclosed-attribute-self-close-tag/error.json
 create mode 100644 test/parser/samples/error-unclosed-attribute-self-close-tag/input.svelte
 create mode 100644 test/parser/samples/error-unexpected-end-of-input-b/error.json
 create mode 100644 test/parser/samples/error-unexpected-end-of-input-b/input.svelte
 create mode 100644 test/parser/samples/error-unexpected-end-of-input-c/error.json
 create mode 100644 test/parser/samples/error-unexpected-end-of-input-c/input.svelte
 create mode 100644 test/parser/samples/error-unexpected-end-of-input-d/error.json
 create mode 100644 test/parser/samples/error-unexpected-end-of-input-d/input.svelte
 create mode 100644 test/parser/samples/error-unexpected-end-of-input/error.json
 create mode 100644 test/parser/samples/error-unexpected-end-of-input/input.svelte
 create mode 100644 test/parser/samples/error-unmatched-closing-tag-autoclose-2/error.json
 create mode 100644 test/parser/samples/error-unmatched-closing-tag-autoclose-2/input.svelte
 create mode 100644 test/parser/samples/error-unmatched-closing-tag-autoclose/error.json
 create mode 100644 test/parser/samples/error-unmatched-closing-tag-autoclose/input.svelte
 create mode 100644 test/parser/samples/error-unmatched-closing-tag/error.json
 create mode 100644 test/parser/samples/error-unmatched-closing-tag/input.svelte
 create mode 100644 test/parser/samples/error-void-closing/error.json
 create mode 100644 test/parser/samples/error-void-closing/input.svelte
 create mode 100644 test/parser/samples/error-window-children/error.json
 create mode 100644 test/parser/samples/error-window-children/input.svelte
 create mode 100644 test/parser/samples/error-window-duplicate/error.json
 create mode 100644 test/parser/samples/error-window-duplicate/input.svelte
 create mode 100644 test/parser/samples/error-window-inside-block/error.json
 create mode 100644 test/parser/samples/error-window-inside-block/input.svelte
 create mode 100644 test/parser/samples/error-window-inside-element/error.json
 create mode 100644 test/parser/samples/error-window-inside-element/input.svelte
 create mode 100644 test/parser/samples/event-handler/input.svelte
 create mode 100644 test/parser/samples/event-handler/output.json
 create mode 100644 test/parser/samples/if-block-else/input.svelte
 create mode 100644 test/parser/samples/if-block-else/output.json
 create mode 100644 test/parser/samples/if-block-elseif/input.svelte
 create mode 100644 test/parser/samples/if-block-elseif/output.json
 create mode 100644 test/parser/samples/if-block/input.svelte
 create mode 100644 test/parser/samples/if-block/output.json
 create mode 100644 test/parser/samples/implicitly-closed-li-block/input.svelte
 create mode 100644 test/parser/samples/implicitly-closed-li-block/output.json
 create mode 100644 test/parser/samples/implicitly-closed-li/input.svelte
 create mode 100644 test/parser/samples/implicitly-closed-li/output.json
 create mode 100644 test/parser/samples/nbsp/input.svelte
 create mode 100644 test/parser/samples/nbsp/output.json
 create mode 100644 test/parser/samples/no-error-if-before-closing/input.svelte
 create mode 100644 test/parser/samples/no-error-if-before-closing/output.json
 create mode 100644 test/parser/samples/raw-mustaches-whitespace-error/error.json
 create mode 100644 test/parser/samples/raw-mustaches-whitespace-error/input.svelte
 create mode 100644 test/parser/samples/raw-mustaches/input.svelte
 create mode 100644 test/parser/samples/raw-mustaches/output.json
 create mode 100644 test/parser/samples/refs/input.svelte
 create mode 100644 test/parser/samples/refs/output.json
 create mode 100644 test/parser/samples/script-comment-only/input.svelte
 create mode 100644 test/parser/samples/script-comment-only/output.json
 create mode 100644 test/parser/samples/script-comment-trailing-multiline/input.svelte
 create mode 100644 test/parser/samples/script-comment-trailing-multiline/output.json
 create mode 100644 test/parser/samples/script-comment-trailing/input.svelte
 create mode 100644 test/parser/samples/script-comment-trailing/output.json
 create mode 100644 test/parser/samples/script/input.svelte
 create mode 100644 test/parser/samples/script/output.json
 create mode 100644 test/parser/samples/self-closing-element/input.svelte
 create mode 100644 test/parser/samples/self-closing-element/output.json
 create mode 100644 test/parser/samples/self-reference/input.svelte
 create mode 100644 test/parser/samples/self-reference/output.json
 create mode 100644 test/parser/samples/slotted-element/input.svelte
 create mode 100644 test/parser/samples/slotted-element/output.json
 create mode 100644 test/parser/samples/space-between-mustaches/input.svelte
 create mode 100644 test/parser/samples/space-between-mustaches/output.json
 create mode 100644 test/parser/samples/spread/input.svelte
 create mode 100644 test/parser/samples/spread/output.json
 create mode 100644 test/parser/samples/style-inside-head/input.svelte
 create mode 100644 test/parser/samples/style-inside-head/output.json
 create mode 100644 test/parser/samples/textarea-children/input.svelte
 create mode 100644 test/parser/samples/textarea-children/output.json
 create mode 100644 test/parser/samples/textarea-end-tag/input.svelte
 create mode 100644 test/parser/samples/textarea-end-tag/output.json
 create mode 100644 test/parser/samples/transition-intro-no-params/input.svelte
 create mode 100644 test/parser/samples/transition-intro-no-params/output.json
 create mode 100644 test/parser/samples/transition-intro/input.svelte
 create mode 100644 test/parser/samples/transition-intro/output.json
 create mode 100644 test/parser/samples/unusual-identifier/input.svelte
 create mode 100644 test/parser/samples/unusual-identifier/output.json
 create mode 100644 test/parser/samples/whitespace-after-script-tag/input.svelte
 create mode 100644 test/parser/samples/whitespace-after-script-tag/output.json
 create mode 100644 test/parser/samples/whitespace-after-style-tag/input.svelte
 create mode 100644 test/parser/samples/whitespace-after-style-tag/output.json
 create mode 100644 test/parser/samples/whitespace-leading-trailing/input.svelte
 create mode 100644 test/parser/samples/whitespace-leading-trailing/output.json
 create mode 100644 test/parser/samples/whitespace-normal/input.svelte
 create mode 100644 test/parser/samples/whitespace-normal/output.json
 create mode 100644 test/parser/update.ts
 create mode 100644 test/preprocess/index.ts
 create mode 100644 test/preprocess/samples/attributes-with-equals/_config.js
 create mode 100644 test/preprocess/samples/attributes-with-equals/input.svelte
 create mode 100644 test/preprocess/samples/attributes-with-equals/output.svelte
 create mode 100644 test/preprocess/samples/comments/_config.js
 create mode 100644 test/preprocess/samples/comments/input.svelte
 create mode 100644 test/preprocess/samples/comments/output.svelte
 create mode 100644 test/preprocess/samples/dependencies/_config.js
 create mode 100644 test/preprocess/samples/dependencies/input.svelte
 create mode 100644 test/preprocess/samples/dependencies/output.svelte
 create mode 100644 test/preprocess/samples/empty-sourcemap/_config.js
 create mode 100644 test/preprocess/samples/empty-sourcemap/input.svelte
 create mode 100644 test/preprocess/samples/empty-sourcemap/output.svelte
 create mode 100644 test/preprocess/samples/filename/_config.js
 create mode 100644 test/preprocess/samples/filename/input.svelte
 create mode 100644 test/preprocess/samples/filename/output.svelte
 create mode 100644 test/preprocess/samples/ignores-null/_config.js
 create mode 100644 test/preprocess/samples/ignores-null/input.svelte
 create mode 100644 test/preprocess/samples/ignores-null/output.svelte
 create mode 100644 test/preprocess/samples/markup/_config.js
 create mode 100644 test/preprocess/samples/markup/input.svelte
 create mode 100644 test/preprocess/samples/markup/output.svelte
 create mode 100644 test/preprocess/samples/multiple-preprocessors/_config.js
 create mode 100644 test/preprocess/samples/multiple-preprocessors/input.svelte
 create mode 100644 test/preprocess/samples/multiple-preprocessors/output.svelte
 create mode 100644 test/preprocess/samples/partial-names/_config.js
 create mode 100644 test/preprocess/samples/partial-names/input.svelte
 create mode 100644 test/preprocess/samples/partial-names/output.svelte
 create mode 100644 test/preprocess/samples/script-multiple/_config.js
 create mode 100644 test/preprocess/samples/script-multiple/input.svelte
 create mode 100644 test/preprocess/samples/script-multiple/output.svelte
 create mode 100644 test/preprocess/samples/script-self-closing/_config.js
 create mode 100644 test/preprocess/samples/script-self-closing/input.svelte
 create mode 100644 test/preprocess/samples/script-self-closing/output.svelte
 create mode 100644 test/preprocess/samples/script/_config.js
 create mode 100644 test/preprocess/samples/script/input.svelte
 create mode 100644 test/preprocess/samples/script/output.svelte
 create mode 100644 test/preprocess/samples/style-async/_config.js
 create mode 100644 test/preprocess/samples/style-async/input.svelte
 create mode 100644 test/preprocess/samples/style-async/output.svelte
 create mode 100644 test/preprocess/samples/style-attributes/_config.js
 create mode 100644 test/preprocess/samples/style-attributes/input.svelte
 create mode 100644 test/preprocess/samples/style-attributes/output.svelte
 create mode 100644 test/preprocess/samples/style-self-closing/_config.js
 create mode 100644 test/preprocess/samples/style-self-closing/input.svelte
 create mode 100644 test/preprocess/samples/style-self-closing/output.svelte
 create mode 100644 test/preprocess/samples/style/_config.js
 create mode 100644 test/preprocess/samples/style/input.svelte
 create mode 100644 test/preprocess/samples/style/output.svelte
 create mode 100644 test/runtime-puppeteer/assert.js
 create mode 100644 test/runtime-puppeteer/index.ts
 create mode 100644 test/runtime-puppeteer/samples/component-css-custom-properties-dynamic/Slider.svelte
 create mode 100644 test/runtime-puppeteer/samples/component-css-custom-properties-dynamic/_config.js
 create mode 100644 test/runtime-puppeteer/samples/component-css-custom-properties-dynamic/main.svelte
 create mode 100644 test/runtime-puppeteer/samples/component-css-custom-properties/Slider.svelte
 create mode 100644 test/runtime-puppeteer/samples/component-css-custom-properties/_config.js
 create mode 100644 test/runtime-puppeteer/samples/component-css-custom-properties/main.svelte
 create mode 100644 test/runtime/index.ts
 create mode 100644 test/runtime/samples/$$rest-without-props/App.svelte
 create mode 100644 test/runtime/samples/$$rest-without-props/_config.js
 create mode 100644 test/runtime/samples/$$rest-without-props/main.svelte
 create mode 100644 test/runtime/samples/$$rest/App.svelte
 create mode 100644 test/runtime/samples/$$rest/_config.js
 create mode 100644 test/runtime/samples/$$rest/main.svelte
 create mode 100644 test/runtime/samples/$$slot/A.svelte
 create mode 100644 test/runtime/samples/$$slot/_config.js
 create mode 100644 test/runtime/samples/$$slot/main.svelte
 create mode 100644 test/runtime/samples/action-body/_config.js
 create mode 100644 test/runtime/samples/action-body/main.svelte
 create mode 100644 test/runtime/samples/action-custom-event-handler-in-each-destructured/_config.js
 create mode 100644 test/runtime/samples/action-custom-event-handler-in-each-destructured/main.svelte
 create mode 100644 test/runtime/samples/action-custom-event-handler-in-each/_config.js
 create mode 100644 test/runtime/samples/action-custom-event-handler-in-each/main.svelte
 create mode 100644 test/runtime/samples/action-custom-event-handler-node-context/_config.js
 create mode 100644 test/runtime/samples/action-custom-event-handler-node-context/main.svelte
 create mode 100644 test/runtime/samples/action-custom-event-handler-this/_config.js
 create mode 100644 test/runtime/samples/action-custom-event-handler-this/main.svelte
 create mode 100644 test/runtime/samples/action-custom-event-handler-with-context/_config.js
 create mode 100644 test/runtime/samples/action-custom-event-handler-with-context/main.svelte
 create mode 100644 test/runtime/samples/action-custom-event-handler/_config.js
 create mode 100644 test/runtime/samples/action-custom-event-handler/main.svelte
 create mode 100644 test/runtime/samples/action-function/_config.js
 create mode 100644 test/runtime/samples/action-function/main.svelte
 create mode 100644 test/runtime/samples/action-object-deep/_config.js
 create mode 100644 test/runtime/samples/action-object-deep/main.svelte
 create mode 100644 test/runtime/samples/action-object/_config.js
 create mode 100644 test/runtime/samples/action-object/main.svelte
 create mode 100644 test/runtime/samples/action-receives-element-mounted/_config.js
 create mode 100644 test/runtime/samples/action-receives-element-mounted/main.svelte
 create mode 100644 test/runtime/samples/action-ternary-template/_config.js
 create mode 100644 test/runtime/samples/action-ternary-template/main.svelte
 create mode 100644 test/runtime/samples/action-this/_config.js
 create mode 100644 test/runtime/samples/action-this/main.svelte
 create mode 100644 test/runtime/samples/action-update/_config.js
 create mode 100644 test/runtime/samples/action-update/main.svelte
 create mode 100644 test/runtime/samples/action/_config.js
 create mode 100644 test/runtime/samples/action/main.svelte
 create mode 100644 test/runtime/samples/after-render-prevents-loop/_config.js
 create mode 100644 test/runtime/samples/after-render-prevents-loop/main.svelte
 create mode 100644 test/runtime/samples/after-render-triggers-update/_config.js
 create mode 100644 test/runtime/samples/after-render-triggers-update/main.svelte
 create mode 100644 test/runtime/samples/animation-css/_config.js
 create mode 100644 test/runtime/samples/animation-css/main.svelte
 create mode 100644 test/runtime/samples/animation-js-delay/_config.js
 create mode 100644 test/runtime/samples/animation-js-delay/main.svelte
 create mode 100644 test/runtime/samples/animation-js-easing/_config.js
 create mode 100644 test/runtime/samples/animation-js-easing/easing.js
 create mode 100644 test/runtime/samples/animation-js-easing/main.svelte
 create mode 100644 test/runtime/samples/animation-js/_config.js
 create mode 100644 test/runtime/samples/animation-js/main.svelte
 create mode 100644 test/runtime/samples/apply-directives-in-order-2/_config.js
 create mode 100644 test/runtime/samples/apply-directives-in-order-2/main.svelte
 create mode 100644 test/runtime/samples/apply-directives-in-order/_config.js
 create mode 100644 test/runtime/samples/apply-directives-in-order/main.svelte
 create mode 100644 test/runtime/samples/array-literal-spread-deopt/_config.js
 create mode 100644 test/runtime/samples/array-literal-spread-deopt/main.svelte
 create mode 100644 test/runtime/samples/assignment-in-init/_config.js
 create mode 100644 test/runtime/samples/assignment-in-init/main.svelte
 create mode 100644 test/runtime/samples/assignment-to-computed-property/_config.js
 create mode 100644 test/runtime/samples/assignment-to-computed-property/main.svelte
 create mode 100644 test/runtime/samples/async-generator-object-methods/main.svelte
 create mode 100644 test/runtime/samples/attribute-boolean-case-insensitive/_config.js
 create mode 100644 test/runtime/samples/attribute-boolean-case-insensitive/main.svelte
 create mode 100644 test/runtime/samples/attribute-boolean-false/_config.js
 create mode 100644 test/runtime/samples/attribute-boolean-false/main.svelte
 create mode 100644 test/runtime/samples/attribute-boolean-indeterminate/_config.js
 create mode 100644 test/runtime/samples/attribute-boolean-indeterminate/main.svelte
 create mode 100644 test/runtime/samples/attribute-boolean-true/_config.js
 create mode 100644 test/runtime/samples/attribute-boolean-true/main.svelte
 create mode 100644 test/runtime/samples/attribute-boolean-with-spread/_config.js
 create mode 100644 test/runtime/samples/attribute-boolean-with-spread/main.svelte
 create mode 100644 test/runtime/samples/attribute-casing-foreign-namespace-compiler-option/_config.js
 create mode 100644 test/runtime/samples/attribute-casing-foreign-namespace-compiler-option/main.svelte
 create mode 100644 test/runtime/samples/attribute-casing-foreign-namespace/_config.js
 create mode 100644 test/runtime/samples/attribute-casing-foreign-namespace/main.svelte
 create mode 100644 test/runtime/samples/attribute-casing/_config.js
 create mode 100644 test/runtime/samples/attribute-casing/main.svelte
 create mode 100644 test/runtime/samples/attribute-dataset-without-value/_config.js
 create mode 100644 test/runtime/samples/attribute-dataset-without-value/main.svelte
 create mode 100644 test/runtime/samples/attribute-dynamic-multiple/_config.js
 create mode 100644 test/runtime/samples/attribute-dynamic-multiple/main.svelte
 create mode 100644 test/runtime/samples/attribute-dynamic-no-dependencies/_config.js
 create mode 100644 test/runtime/samples/attribute-dynamic-no-dependencies/main.svelte
 create mode 100644 test/runtime/samples/attribute-dynamic-quotemarks/_config.js
 create mode 100644 test/runtime/samples/attribute-dynamic-quotemarks/main.svelte
 create mode 100644 test/runtime/samples/attribute-dynamic-shorthand/_config.js
 create mode 100644 test/runtime/samples/attribute-dynamic-shorthand/main.svelte
 create mode 100644 test/runtime/samples/attribute-dynamic-type/_config.js
 create mode 100644 test/runtime/samples/attribute-dynamic-type/main.svelte
 create mode 100644 test/runtime/samples/attribute-dynamic/_config.js
 create mode 100644 test/runtime/samples/attribute-dynamic/main.svelte
 create mode 100644 test/runtime/samples/attribute-empty-svg/_config.js
 create mode 100644 test/runtime/samples/attribute-empty-svg/main.svelte
 create mode 100644 test/runtime/samples/attribute-empty/_config.js
 create mode 100644 test/runtime/samples/attribute-empty/main.svelte
 create mode 100644 test/runtime/samples/attribute-false/_config.js
 create mode 100644 test/runtime/samples/attribute-false/main.svelte
 create mode 100644 test/runtime/samples/attribute-namespaced/_config.js
 create mode 100644 test/runtime/samples/attribute-namespaced/main.svelte
 create mode 100644 test/runtime/samples/attribute-null-classname-no-style/_config.js
 create mode 100644 test/runtime/samples/attribute-null-classname-no-style/main.svelte
 create mode 100644 test/runtime/samples/attribute-null-classname-with-style/_config.js
 create mode 100644 test/runtime/samples/attribute-null-classname-with-style/main.svelte
 create mode 100644 test/runtime/samples/attribute-null-classnames-no-style/_config.js
 create mode 100644 test/runtime/samples/attribute-null-classnames-no-style/main.svelte
 create mode 100644 test/runtime/samples/attribute-null-classnames-with-style/_config.js
 create mode 100644 test/runtime/samples/attribute-null-classnames-with-style/main.svelte
 create mode 100644 test/runtime/samples/attribute-null-func-classname-no-style/_config.js
 create mode 100644 test/runtime/samples/attribute-null-func-classname-no-style/main.svelte
 create mode 100644 test/runtime/samples/attribute-null-func-classname-with-style/_config.js
 create mode 100644 test/runtime/samples/attribute-null-func-classname-with-style/main.svelte
 create mode 100644 test/runtime/samples/attribute-null-func-classnames-no-style/_config.js
 create mode 100644 test/runtime/samples/attribute-null-func-classnames-no-style/main.svelte
 create mode 100644 test/runtime/samples/attribute-null-func-classnames-with-style/_config.js
 create mode 100644 test/runtime/samples/attribute-null-func-classnames-with-style/main.svelte
 create mode 100644 test/runtime/samples/attribute-null/_config.js
 create mode 100644 test/runtime/samples/attribute-null/main.svelte
 create mode 100644 test/runtime/samples/attribute-partial-number/Component.svelte
 create mode 100644 test/runtime/samples/attribute-partial-number/_config.js
 create mode 100644 test/runtime/samples/attribute-partial-number/main.svelte
 create mode 100644 test/runtime/samples/attribute-prefer-expression/_config.js
 create mode 100644 test/runtime/samples/attribute-prefer-expression/main.svelte
 create mode 100644 test/runtime/samples/attribute-static-at-symbol/_config.js
 create mode 100644 test/runtime/samples/attribute-static-at-symbol/main.svelte
 create mode 100644 test/runtime/samples/attribute-static-boolean/_config.js
 create mode 100644 test/runtime/samples/attribute-static-boolean/main.svelte
 create mode 100644 test/runtime/samples/attribute-static-quotemarks/_config.js
 create mode 100644 test/runtime/samples/attribute-static-quotemarks/main.svelte
 create mode 100644 test/runtime/samples/attribute-static/_config.js
 create mode 100644 test/runtime/samples/attribute-static/main.svelte
 create mode 100644 test/runtime/samples/attribute-undefined/_config.js
 create mode 100644 test/runtime/samples/attribute-undefined/main.svelte
 create mode 100644 test/runtime/samples/attribute-unknown-without-value/_config.js
 create mode 100644 test/runtime/samples/attribute-unknown-without-value/main.svelte
 create mode 100644 test/runtime/samples/attribute-url/_config.js
 create mode 100644 test/runtime/samples/attribute-url/main.svelte
 create mode 100644 test/runtime/samples/autofocus/_config.js
 create mode 100644 test/runtime/samples/autofocus/main.svelte
 create mode 100644 test/runtime/samples/await-catch-no-expression/_config.js
 create mode 100644 test/runtime/samples/await-catch-no-expression/main.svelte
 create mode 100644 test/runtime/samples/await-catch-shorthand/_config.js
 create mode 100644 test/runtime/samples/await-catch-shorthand/main.svelte
 create mode 100644 test/runtime/samples/await-component-oncreate/Foo.svelte
 create mode 100644 test/runtime/samples/await-component-oncreate/_config.js
 create mode 100644 test/runtime/samples/await-component-oncreate/main.svelte
 create mode 100644 test/runtime/samples/await-conservative-update/_config.js
 create mode 100644 test/runtime/samples/await-conservative-update/main.svelte
 create mode 100644 test/runtime/samples/await-conservative-update/sleep.js
 create mode 100644 test/runtime/samples/await-containing-if/_config.js
 create mode 100644 test/runtime/samples/await-containing-if/main.svelte
 create mode 100644 test/runtime/samples/await-in-dynamic-component/Widget.svelte
 create mode 100644 test/runtime/samples/await-in-dynamic-component/_config.js
 create mode 100644 test/runtime/samples/await-in-dynamic-component/main.svelte
 create mode 100644 test/runtime/samples/await-in-each/_config.js
 create mode 100644 test/runtime/samples/await-in-each/main.svelte
 create mode 100644 test/runtime/samples/await-in-removed-if/_config.js
 create mode 100644 test/runtime/samples/await-in-removed-if/main.svelte
 create mode 100644 test/runtime/samples/await-set-simultaneous-reactive/_config.js
 create mode 100644 test/runtime/samples/await-set-simultaneous-reactive/main.svelte
 create mode 100644 test/runtime/samples/await-set-simultaneous/_config.js
 create mode 100644 test/runtime/samples/await-set-simultaneous/main.svelte
 create mode 100644 test/runtime/samples/await-then-blowback-reactive/Widget.svelte
 create mode 100644 test/runtime/samples/await-then-blowback-reactive/_config.js
 create mode 100644 test/runtime/samples/await-then-blowback-reactive/main.svelte
 create mode 100644 test/runtime/samples/await-then-catch-anchor/_config.js
 create mode 100644 test/runtime/samples/await-then-catch-anchor/main.svelte
 create mode 100644 test/runtime/samples/await-then-catch-event/_config.js
 create mode 100644 test/runtime/samples/await-then-catch-event/main.svelte
 create mode 100644 test/runtime/samples/await-then-catch-if/_config.js
 create mode 100644 test/runtime/samples/await-then-catch-if/main.svelte
 create mode 100644 test/runtime/samples/await-then-catch-in-slot/Foo.svelte
 create mode 100644 test/runtime/samples/await-then-catch-in-slot/_config.js
 create mode 100644 test/runtime/samples/await-then-catch-in-slot/main.svelte
 create mode 100644 test/runtime/samples/await-then-catch-multiple/_config.js
 create mode 100644 test/runtime/samples/await-then-catch-multiple/main.svelte
 create mode 100644 test/runtime/samples/await-then-catch-no-values/_config.js
 create mode 100644 test/runtime/samples/await-then-catch-no-values/main.svelte
 create mode 100644 test/runtime/samples/await-then-catch-non-promise/_config.js
 create mode 100644 test/runtime/samples/await-then-catch-non-promise/main.svelte
 create mode 100644 test/runtime/samples/await-then-catch-order/_config.js
 create mode 100644 test/runtime/samples/await-then-catch-order/main.svelte
 create mode 100644 test/runtime/samples/await-then-catch-static/_config.js
 create mode 100644 test/runtime/samples/await-then-catch-static/main.svelte
 create mode 100644 test/runtime/samples/await-then-catch/_config.js
 create mode 100644 test/runtime/samples/await-then-catch/main.svelte
 create mode 100644 test/runtime/samples/await-then-destruct-array/_config.js
 create mode 100644 test/runtime/samples/await-then-destruct-array/main.svelte
 create mode 100644 test/runtime/samples/await-then-destruct-default/_config.js
 create mode 100644 test/runtime/samples/await-then-destruct-default/main.svelte
 create mode 100644 test/runtime/samples/await-then-destruct-object-if/_config.js
 create mode 100644 test/runtime/samples/await-then-destruct-object-if/main.svelte
 create mode 100644 test/runtime/samples/await-then-destruct-object/_config.js
 create mode 100644 test/runtime/samples/await-then-destruct-object/main.svelte
 create mode 100644 test/runtime/samples/await-then-destruct-rest/_config.js
 create mode 100644 test/runtime/samples/await-then-destruct-rest/main.svelte
 create mode 100644 test/runtime/samples/await-then-if/_config.js
 create mode 100644 test/runtime/samples/await-then-if/main.svelte
 create mode 100644 test/runtime/samples/await-then-no-context/main.svelte
 create mode 100644 test/runtime/samples/await-then-no-expression/_config.js
 create mode 100644 test/runtime/samples/await-then-no-expression/main.svelte
 create mode 100644 test/runtime/samples/await-then-shorthand/_config.js
 create mode 100644 test/runtime/samples/await-then-shorthand/main.svelte
 create mode 100644 test/runtime/samples/await-with-components/Widget.svelte
 create mode 100644 test/runtime/samples/await-with-components/_config.js
 create mode 100644 test/runtime/samples/await-with-components/main.svelte
 create mode 100644 test/runtime/samples/await-with-update-2/Component.svelte
 create mode 100644 test/runtime/samples/await-with-update-2/_config.js
 create mode 100644 test/runtime/samples/await-with-update-2/main.svelte
 create mode 100644 test/runtime/samples/await-with-update-catch-scope/_config.js
 create mode 100644 test/runtime/samples/await-with-update-catch-scope/main.svelte
 create mode 100644 test/runtime/samples/await-with-update/Component.svelte
 create mode 100644 test/runtime/samples/await-with-update/_config.js
 create mode 100644 test/runtime/samples/await-with-update/main.svelte
 create mode 100644 test/runtime/samples/await-without-catch/_config.js
 create mode 100644 test/runtime/samples/await-without-catch/main.svelte
 create mode 100644 test/runtime/samples/before-render-chain/Item.svelte
 create mode 100644 test/runtime/samples/before-render-chain/List.svelte
 create mode 100644 test/runtime/samples/before-render-chain/_config.js
 create mode 100644 test/runtime/samples/before-render-chain/main.svelte
 create mode 100644 test/runtime/samples/before-render-prevents-loop/_config.js
 create mode 100644 test/runtime/samples/before-render-prevents-loop/main.svelte
 create mode 100644 test/runtime/samples/binding-audio-currenttime-duration-volume/_config.js
 create mode 100644 test/runtime/samples/binding-audio-currenttime-duration-volume/main.svelte
 create mode 100644 test/runtime/samples/binding-circular/_config.js
 create mode 100644 test/runtime/samples/binding-circular/main.svelte
 create mode 100644 test/runtime/samples/binding-contenteditable-html-initial/_config.js
 create mode 100644 test/runtime/samples/binding-contenteditable-html-initial/main.svelte
 create mode 100644 test/runtime/samples/binding-contenteditable-html/_config.js
 create mode 100644 test/runtime/samples/binding-contenteditable-html/main.svelte
 create mode 100644 test/runtime/samples/binding-contenteditable-text-initial/_config.js
 create mode 100644 test/runtime/samples/binding-contenteditable-text-initial/main.svelte
 create mode 100644 test/runtime/samples/binding-contenteditable-text/_config.js
 create mode 100644 test/runtime/samples/binding-contenteditable-text/main.svelte
 create mode 100644 test/runtime/samples/binding-details-open/_config.js
 create mode 100644 test/runtime/samples/binding-details-open/main.svelte
 create mode 100644 test/runtime/samples/binding-indirect-computed/_config.js
 create mode 100644 test/runtime/samples/binding-indirect-computed/main.svelte
 create mode 100644 test/runtime/samples/binding-indirect-spread/_config.js
 create mode 100644 test/runtime/samples/binding-indirect-spread/main.svelte
 create mode 100644 test/runtime/samples/binding-indirect/_config.js
 create mode 100644 test/runtime/samples/binding-indirect/main.svelte
 create mode 100644 test/runtime/samples/binding-input-checkbox-deep-contextual-b/_config.js
 create mode 100644 test/runtime/samples/binding-input-checkbox-deep-contextual-b/main.svelte
 create mode 100644 test/runtime/samples/binding-input-checkbox-deep-contextual/_config.js
 create mode 100644 test/runtime/samples/binding-input-checkbox-deep-contextual/main.svelte
 create mode 100644 test/runtime/samples/binding-input-checkbox-group-outside-each/_config.js
 create mode 100644 test/runtime/samples/binding-input-checkbox-group-outside-each/main.svelte
 create mode 100644 test/runtime/samples/binding-input-checkbox-group/_config.js
 create mode 100644 test/runtime/samples/binding-input-checkbox-group/main.svelte
 create mode 100644 test/runtime/samples/binding-input-checkbox-indeterminate/_config.js
 create mode 100644 test/runtime/samples/binding-input-checkbox-indeterminate/main.svelte
 create mode 100644 test/runtime/samples/binding-input-checkbox-with-event-in-each/_config.js
 create mode 100644 test/runtime/samples/binding-input-checkbox-with-event-in-each/main.svelte
 create mode 100644 test/runtime/samples/binding-input-checkbox/_config.js
 create mode 100644 test/runtime/samples/binding-input-checkbox/main.svelte
 create mode 100644 test/runtime/samples/binding-input-group-duplicate-value/_config.js
 create mode 100644 test/runtime/samples/binding-input-group-duplicate-value/main.svelte
 create mode 100644 test/runtime/samples/binding-input-group-each-1/_config.js
 create mode 100644 test/runtime/samples/binding-input-group-each-1/main.svelte
 create mode 100644 test/runtime/samples/binding-input-group-each-2/_config.js
 create mode 100644 test/runtime/samples/binding-input-group-each-2/main.svelte
 create mode 100644 test/runtime/samples/binding-input-group-each-3/_config.js
 create mode 100644 test/runtime/samples/binding-input-group-each-3/main.svelte
 create mode 100644 test/runtime/samples/binding-input-group-each-4/_config.js
 create mode 100644 test/runtime/samples/binding-input-group-each-4/main.svelte
 create mode 100644 test/runtime/samples/binding-input-group-each-5/_config.js
 create mode 100644 test/runtime/samples/binding-input-group-each-5/main.svelte
 create mode 100644 test/runtime/samples/binding-input-group-each-6/_config.js
 create mode 100644 test/runtime/samples/binding-input-group-each-6/main.svelte
 create mode 100644 test/runtime/samples/binding-input-group-each-7/_config.js
 create mode 100644 test/runtime/samples/binding-input-group-each-7/main.svelte
 create mode 100644 test/runtime/samples/binding-input-member-expression-update/_config.js
 create mode 100644 test/runtime/samples/binding-input-member-expression-update/main.svelte
 create mode 100644 test/runtime/samples/binding-input-number-2/_config.js
 create mode 100644 test/runtime/samples/binding-input-number-2/main.svelte
 create mode 100644 test/runtime/samples/binding-input-number/_config.js
 create mode 100644 test/runtime/samples/binding-input-number/main.svelte
 create mode 100644 test/runtime/samples/binding-input-radio-group/_config.js
 create mode 100644 test/runtime/samples/binding-input-radio-group/main.svelte
 create mode 100644 test/runtime/samples/binding-input-range-change-with-max/_config.js
 create mode 100644 test/runtime/samples/binding-input-range-change-with-max/main.svelte
 create mode 100644 test/runtime/samples/binding-input-range-change/_config.js
 create mode 100644 test/runtime/samples/binding-input-range-change/main.svelte
 create mode 100644 test/runtime/samples/binding-input-range/_config.js
 create mode 100644 test/runtime/samples/binding-input-range/main.svelte
 create mode 100644 test/runtime/samples/binding-input-text-contextual-deconflicted/_config.js
 create mode 100644 test/runtime/samples/binding-input-text-contextual-deconflicted/main.svelte
 create mode 100644 test/runtime/samples/binding-input-text-contextual-reactive/_config.js
 create mode 100644 test/runtime/samples/binding-input-text-contextual-reactive/main.svelte
 create mode 100644 test/runtime/samples/binding-input-text-contextual/_config.js
 create mode 100644 test/runtime/samples/binding-input-text-contextual/main.svelte
 create mode 100644 test/runtime/samples/binding-input-text-deconflicted/_config.js
 create mode 100644 test/runtime/samples/binding-input-text-deconflicted/main.svelte
 create mode 100644 test/runtime/samples/binding-input-text-deep-computed-dynamic/_config.js
 create mode 100644 test/runtime/samples/binding-input-text-deep-computed-dynamic/main.svelte
 create mode 100644 test/runtime/samples/binding-input-text-deep-computed/_config.js
 create mode 100644 test/runtime/samples/binding-input-text-deep-computed/main.svelte
 create mode 100644 test/runtime/samples/binding-input-text-deep-contextual-computed-dynamic/_config.js
 create mode 100644 test/runtime/samples/binding-input-text-deep-contextual-computed-dynamic/main.svelte
 create mode 100644 test/runtime/samples/binding-input-text-deep-contextual/_config.js
 create mode 100644 test/runtime/samples/binding-input-text-deep-contextual/main.svelte
 create mode 100644 test/runtime/samples/binding-input-text-deep/_config.js
 create mode 100644 test/runtime/samples/binding-input-text-deep/main.svelte
 create mode 100644 test/runtime/samples/binding-input-text-undefined/_config.js
 create mode 100644 test/runtime/samples/binding-input-text-undefined/main.svelte
 create mode 100644 test/runtime/samples/binding-input-text/_config.js
 create mode 100644 test/runtime/samples/binding-input-text/main.svelte
 create mode 100644 test/runtime/samples/binding-input-with-event/_config.js
 create mode 100644 test/runtime/samples/binding-input-with-event/main.svelte
 create mode 100644 test/runtime/samples/binding-select-implicit-option-value/_config.js
 create mode 100644 test/runtime/samples/binding-select-implicit-option-value/main.svelte
 create mode 100644 test/runtime/samples/binding-select-in-each-block/_config.js
 create mode 100644 test/runtime/samples/binding-select-in-each-block/main.svelte
 create mode 100644 test/runtime/samples/binding-select-in-yield/Modal.svelte
 create mode 100644 test/runtime/samples/binding-select-in-yield/_config.js
 create mode 100644 test/runtime/samples/binding-select-in-yield/main.svelte
 create mode 100644 test/runtime/samples/binding-select-initial-value-undefined/_config.js
 create mode 100644 test/runtime/samples/binding-select-initial-value-undefined/main.svelte
 create mode 100644 test/runtime/samples/binding-select-initial-value/_config.js
 create mode 100644 test/runtime/samples/binding-select-initial-value/main.svelte
 create mode 100644 test/runtime/samples/binding-select-late-2/_config.js
 create mode 100644 test/runtime/samples/binding-select-late-2/main.svelte
 create mode 100644 test/runtime/samples/binding-select-late-3/_config.js
 create mode 100644 test/runtime/samples/binding-select-late-3/main.svelte
 create mode 100644 test/runtime/samples/binding-select-late/_config.js
 create mode 100644 test/runtime/samples/binding-select-late/main.svelte
 create mode 100644 test/runtime/samples/binding-select-multiple/_config.js
 create mode 100644 test/runtime/samples/binding-select-multiple/main.svelte
 create mode 100644 test/runtime/samples/binding-select-optgroup/_config.js
 create mode 100644 test/runtime/samples/binding-select-optgroup/main.svelte
 create mode 100644 test/runtime/samples/binding-select-unmatched/_config.js
 create mode 100644 test/runtime/samples/binding-select-unmatched/main.svelte
 create mode 100644 test/runtime/samples/binding-select/_config.js
 create mode 100644 test/runtime/samples/binding-select/main.svelte
 create mode 100644 test/runtime/samples/binding-store-deep/_config.js
 create mode 100644 test/runtime/samples/binding-store-deep/main.svelte
 create mode 100644 test/runtime/samples/binding-store/_config.js
 create mode 100644 test/runtime/samples/binding-store/main.svelte
 create mode 100644 test/runtime/samples/binding-textarea/_config.js
 create mode 100644 test/runtime/samples/binding-textarea/main.svelte
 create mode 100644 test/runtime/samples/binding-this-and-value/_config.js
 create mode 100644 test/runtime/samples/binding-this-and-value/main.svelte
 create mode 100644 test/runtime/samples/binding-this-component-computed-key/Foo.svelte
 create mode 100644 test/runtime/samples/binding-this-component-computed-key/_config.js
 create mode 100644 test/runtime/samples/binding-this-component-computed-key/main.svelte
 create mode 100644 test/runtime/samples/binding-this-component-each-block-value/Foo.svelte
 create mode 100644 test/runtime/samples/binding-this-component-each-block-value/_config.js
 create mode 100644 test/runtime/samples/binding-this-component-each-block-value/main.svelte
 create mode 100644 test/runtime/samples/binding-this-component-each-block/Foo.svelte
 create mode 100644 test/runtime/samples/binding-this-component-each-block/_config.js
 create mode 100644 test/runtime/samples/binding-this-component-each-block/main.svelte
 create mode 100644 test/runtime/samples/binding-this-component-reactive/Foo.svelte
 create mode 100644 test/runtime/samples/binding-this-component-reactive/_config.js
 create mode 100644 test/runtime/samples/binding-this-component-reactive/main.svelte
 create mode 100644 test/runtime/samples/binding-this-each-block-property-2/_config.js
 create mode 100644 test/runtime/samples/binding-this-each-block-property-2/main.svelte
 create mode 100644 test/runtime/samples/binding-this-each-block-property-component/Foo.svelte
 create mode 100644 test/runtime/samples/binding-this-each-block-property-component/_config.js
 create mode 100644 test/runtime/samples/binding-this-each-block-property-component/main.svelte
 create mode 100644 test/runtime/samples/binding-this-each-block-property/_config.js
 create mode 100644 test/runtime/samples/binding-this-each-block-property/main.svelte
 create mode 100644 test/runtime/samples/binding-this-each-key/_config.js
 create mode 100644 test/runtime/samples/binding-this-each-key/main.svelte
 create mode 100644 test/runtime/samples/binding-this-each-object-props/_config.js
 create mode 100644 test/runtime/samples/binding-this-each-object-props/main.svelte
 create mode 100644 test/runtime/samples/binding-this-each-object-spread/_config.js
 create mode 100644 test/runtime/samples/binding-this-each-object-spread/main.svelte
 create mode 100644 test/runtime/samples/binding-this-element-reactive-b/_config.js
 create mode 100644 test/runtime/samples/binding-this-element-reactive-b/main.svelte
 create mode 100644 test/runtime/samples/binding-this-element-reactive/_config.js
 create mode 100644 test/runtime/samples/binding-this-element-reactive/main.svelte
 create mode 100644 test/runtime/samples/binding-this-member-expression-update/_config.js
 create mode 100644 test/runtime/samples/binding-this-member-expression-update/main.svelte
 create mode 100644 test/runtime/samples/binding-this-no-innerhtml/_config.js
 create mode 100644 test/runtime/samples/binding-this-no-innerhtml/main.svelte
 create mode 100644 test/runtime/samples/binding-this-store/_config.js
 create mode 100644 test/runtime/samples/binding-this-store/main.svelte
 create mode 100644 test/runtime/samples/binding-this-unset/_config.js
 create mode 100644 test/runtime/samples/binding-this-unset/main.svelte
 create mode 100644 test/runtime/samples/binding-this-with-context/_config.js
 create mode 100644 test/runtime/samples/binding-this-with-context/main.svelte
 create mode 100644 test/runtime/samples/binding-this/_config.js
 create mode 100644 test/runtime/samples/binding-this/main.svelte
 create mode 100644 test/runtime/samples/binding-using-props/TextInput.svelte
 create mode 100644 test/runtime/samples/binding-using-props/_config.js
 create mode 100644 test/runtime/samples/binding-using-props/main.svelte
 create mode 100644 test/runtime/samples/binding-width-height-a11y/_config.js
 create mode 100644 test/runtime/samples/binding-width-height-a11y/main.svelte
 create mode 100644 test/runtime/samples/binding-width-height-z-index/_config.js
 create mode 100644 test/runtime/samples/binding-width-height-z-index/main.svelte
 create mode 100644 test/runtime/samples/bindings-before-onmount/One.svelte
 create mode 100644 test/runtime/samples/bindings-before-onmount/Two.svelte
 create mode 100644 test/runtime/samples/bindings-before-onmount/_config.js
 create mode 100644 test/runtime/samples/bindings-before-onmount/main.svelte
 create mode 100644 test/runtime/samples/bindings-coalesced/Foo.svelte
 create mode 100644 test/runtime/samples/bindings-coalesced/_config.js
 create mode 100644 test/runtime/samples/bindings-coalesced/main.svelte
 create mode 100644 test/runtime/samples/bindings-global-dependency/_config.js
 create mode 100644 test/runtime/samples/bindings-global-dependency/main.svelte
 create mode 100644 test/runtime/samples/bitmask-overflow-2/_config.js
 create mode 100644 test/runtime/samples/bitmask-overflow-2/main.svelte
 create mode 100644 test/runtime/samples/bitmask-overflow-3/_config.js
 create mode 100644 test/runtime/samples/bitmask-overflow-3/main.svelte
 create mode 100644 test/runtime/samples/bitmask-overflow-if-2/_config.js
 create mode 100644 test/runtime/samples/bitmask-overflow-if-2/main.svelte
 create mode 100644 test/runtime/samples/bitmask-overflow-if/_config.js
 create mode 100644 test/runtime/samples/bitmask-overflow-if/main.svelte
 create mode 100644 test/runtime/samples/bitmask-overflow-slot-2/Echo.svelte
 create mode 100644 test/runtime/samples/bitmask-overflow-slot-2/_config.js
 create mode 100644 test/runtime/samples/bitmask-overflow-slot-2/main.svelte
 create mode 100644 test/runtime/samples/bitmask-overflow-slot-3/Echo.svelte
 create mode 100644 test/runtime/samples/bitmask-overflow-slot-3/_config.js
 create mode 100644 test/runtime/samples/bitmask-overflow-slot-3/main.svelte
 create mode 100644 test/runtime/samples/bitmask-overflow-slot-4/Echo.svelte
 create mode 100644 test/runtime/samples/bitmask-overflow-slot-4/_config.js
 create mode 100644 test/runtime/samples/bitmask-overflow-slot-4/main.svelte
 create mode 100644 test/runtime/samples/bitmask-overflow-slot-5/Echo.svelte
 create mode 100644 test/runtime/samples/bitmask-overflow-slot-5/_config.js
 create mode 100644 test/runtime/samples/bitmask-overflow-slot-5/main.svelte
 create mode 100644 test/runtime/samples/bitmask-overflow-slot-6/Slotted.svelte
 create mode 100644 test/runtime/samples/bitmask-overflow-slot-6/_config.js
 create mode 100644 test/runtime/samples/bitmask-overflow-slot-6/main.svelte
 create mode 100644 test/runtime/samples/bitmask-overflow-slot/Echo.svelte
 create mode 100644 test/runtime/samples/bitmask-overflow-slot/_config.js
 create mode 100644 test/runtime/samples/bitmask-overflow-slot/main.svelte
 create mode 100644 test/runtime/samples/bitmask-overflow/_config.js
 create mode 100644 test/runtime/samples/bitmask-overflow/main.svelte
 create mode 100644 test/runtime/samples/class-boolean/_config.js
 create mode 100644 test/runtime/samples/class-boolean/main.svelte
 create mode 100644 test/runtime/samples/class-helper/_config.js
 create mode 100644 test/runtime/samples/class-helper/main.svelte
 create mode 100644 test/runtime/samples/class-in-each/_config.js
 create mode 100644 test/runtime/samples/class-in-each/main.svelte
 create mode 100644 test/runtime/samples/class-shortcut-with-class/_config.js
 create mode 100644 test/runtime/samples/class-shortcut-with-class/main.svelte
 create mode 100644 test/runtime/samples/class-shortcut/_config.js
 create mode 100644 test/runtime/samples/class-shortcut/main.svelte
 create mode 100644 test/runtime/samples/class-with-attribute/_config.js
 create mode 100644 test/runtime/samples/class-with-attribute/main.svelte
 create mode 100644 test/runtime/samples/class-with-dynamic-attribute-and-spread/_config.js
 create mode 100644 test/runtime/samples/class-with-dynamic-attribute-and-spread/main.svelte
 create mode 100644 test/runtime/samples/class-with-dynamic-attribute/_config.js
 create mode 100644 test/runtime/samples/class-with-dynamic-attribute/main.svelte
 create mode 100644 test/runtime/samples/class-with-spread-and-bind/_config.js
 create mode 100644 test/runtime/samples/class-with-spread-and-bind/main.svelte
 create mode 100644 test/runtime/samples/class-with-spread/_config.js
 create mode 100644 test/runtime/samples/class-with-spread/main.svelte
 create mode 100644 test/runtime/samples/component-binding-accessors/Nested.svelte
 create mode 100644 test/runtime/samples/component-binding-accessors/_config.js
 create mode 100644 test/runtime/samples/component-binding-accessors/main.svelte
 create mode 100644 test/runtime/samples/component-binding-aliased/Widget.svelte
 create mode 100644 test/runtime/samples/component-binding-aliased/_config.js
 create mode 100644 test/runtime/samples/component-binding-aliased/main.svelte
 create mode 100644 test/runtime/samples/component-binding-blowback-b/Nested.svelte
 create mode 100644 test/runtime/samples/component-binding-blowback-b/_config.js
 create mode 100644 test/runtime/samples/component-binding-blowback-b/main.svelte
 create mode 100644 test/runtime/samples/component-binding-blowback-c/Nested.svelte
 create mode 100644 test/runtime/samples/component-binding-blowback-c/_config.js
 create mode 100644 test/runtime/samples/component-binding-blowback-c/main.svelte
 create mode 100644 test/runtime/samples/component-binding-blowback-d/One.svelte
 create mode 100644 test/runtime/samples/component-binding-blowback-d/Two.svelte
 create mode 100644 test/runtime/samples/component-binding-blowback-d/_config.js
 create mode 100644 test/runtime/samples/component-binding-blowback-d/main.svelte
 create mode 100644 test/runtime/samples/component-binding-blowback-e/One.svelte
 create mode 100644 test/runtime/samples/component-binding-blowback-e/Two.svelte
 create mode 100644 test/runtime/samples/component-binding-blowback-e/_config.js
 create mode 100644 test/runtime/samples/component-binding-blowback-e/main.svelte
 create mode 100644 test/runtime/samples/component-binding-blowback-f/One.svelte
 create mode 100644 test/runtime/samples/component-binding-blowback-f/Two.svelte
 create mode 100644 test/runtime/samples/component-binding-blowback-f/_config.js
 create mode 100644 test/runtime/samples/component-binding-blowback-f/main.svelte
 create mode 100644 test/runtime/samples/component-binding-blowback/Widget.svelte
 create mode 100644 test/runtime/samples/component-binding-blowback/_config.js
 create mode 100644 test/runtime/samples/component-binding-blowback/main.svelte
 create mode 100644 test/runtime/samples/component-binding-computed/Nested.svelte
 create mode 100644 test/runtime/samples/component-binding-computed/_config.js
 create mode 100644 test/runtime/samples/component-binding-computed/main.svelte
 create mode 100644 test/runtime/samples/component-binding-conditional-b/Bar.svelte
 create mode 100644 test/runtime/samples/component-binding-conditional-b/Baz.svelte
 create mode 100644 test/runtime/samples/component-binding-conditional-b/Foo.svelte
 create mode 100644 test/runtime/samples/component-binding-conditional-b/_config.js
 create mode 100644 test/runtime/samples/component-binding-conditional-b/main.svelte
 create mode 100644 test/runtime/samples/component-binding-conditional/Bar.svelte
 create mode 100644 test/runtime/samples/component-binding-conditional/Baz.svelte
 create mode 100644 test/runtime/samples/component-binding-conditional/Foo.svelte
 create mode 100644 test/runtime/samples/component-binding-conditional/_config.js
 create mode 100644 test/runtime/samples/component-binding-conditional/main.svelte
 create mode 100644 test/runtime/samples/component-binding-deep-b/ComponentSelector.svelte
 create mode 100644 test/runtime/samples/component-binding-deep-b/Editor.svelte
 create mode 100644 test/runtime/samples/component-binding-deep-b/_config.js
 create mode 100644 test/runtime/samples/component-binding-deep-b/main.svelte
 create mode 100644 test/runtime/samples/component-binding-deep/Widget.svelte
 create mode 100644 test/runtime/samples/component-binding-deep/_config.js
 create mode 100644 test/runtime/samples/component-binding-deep/main.svelte
 create mode 100644 test/runtime/samples/component-binding-each-nested/Widget.svelte
 create mode 100644 test/runtime/samples/component-binding-each-nested/_config.js
 create mode 100644 test/runtime/samples/component-binding-each-nested/main.svelte
 create mode 100644 test/runtime/samples/component-binding-each-object/Widget.svelte
 create mode 100644 test/runtime/samples/component-binding-each-object/_config.js
 create mode 100644 test/runtime/samples/component-binding-each-object/main.svelte
 create mode 100644 test/runtime/samples/component-binding-each/Widget.svelte
 create mode 100644 test/runtime/samples/component-binding-each/_config.js
 create mode 100644 test/runtime/samples/component-binding-each/main.svelte
 create mode 100644 test/runtime/samples/component-binding-infinite-loop/A.svelte
 create mode 100644 test/runtime/samples/component-binding-infinite-loop/B.svelte
 create mode 100644 test/runtime/samples/component-binding-infinite-loop/C.svelte
 create mode 100644 test/runtime/samples/component-binding-infinite-loop/_config.js
 create mode 100644 test/runtime/samples/component-binding-infinite-loop/main.svelte
 create mode 100644 test/runtime/samples/component-binding-nested/Bar.svelte
 create mode 100644 test/runtime/samples/component-binding-nested/Baz.svelte
 create mode 100644 test/runtime/samples/component-binding-nested/Foo.svelte
 create mode 100644 test/runtime/samples/component-binding-nested/_config.js
 create mode 100644 test/runtime/samples/component-binding-nested/main.svelte
 create mode 100644 test/runtime/samples/component-binding-non-leaky/Counter.svelte
 create mode 100644 test/runtime/samples/component-binding-non-leaky/_config.js
 create mode 100644 test/runtime/samples/component-binding-non-leaky/main.svelte
 create mode 100644 test/runtime/samples/component-binding-onMount/Mount.svelte
 create mode 100644 test/runtime/samples/component-binding-onMount/_config.js
 create mode 100644 test/runtime/samples/component-binding-onMount/main.svelte
 create mode 100644 test/runtime/samples/component-binding-parent-supercedes-child-b/Bar.svelte
 create mode 100644 test/runtime/samples/component-binding-parent-supercedes-child-b/Foo.svelte
 create mode 100644 test/runtime/samples/component-binding-parent-supercedes-child-b/_config.js
 create mode 100644 test/runtime/samples/component-binding-parent-supercedes-child-b/main.svelte
 create mode 100644 test/runtime/samples/component-binding-parent-supercedes-child-c/Bar.svelte
 create mode 100644 test/runtime/samples/component-binding-parent-supercedes-child-c/Foo.svelte
 create mode 100644 test/runtime/samples/component-binding-parent-supercedes-child-c/_config.js
 create mode 100644 test/runtime/samples/component-binding-parent-supercedes-child-c/main.svelte
 create mode 100644 test/runtime/samples/component-binding-parent-supercedes-child/Counter.svelte
 create mode 100644 test/runtime/samples/component-binding-parent-supercedes-child/_config.js
 create mode 100644 test/runtime/samples/component-binding-parent-supercedes-child/main.svelte
 create mode 100644 test/runtime/samples/component-binding-private-state/Bar.svelte
 create mode 100644 test/runtime/samples/component-binding-private-state/Foo.svelte
 create mode 100644 test/runtime/samples/component-binding-private-state/_config.js
 create mode 100644 test/runtime/samples/component-binding-private-state/main.svelte
 create mode 100644 test/runtime/samples/component-binding-reactive-property-no-extra-call/Component.svelte
 create mode 100644 test/runtime/samples/component-binding-reactive-property-no-extra-call/_config.js
 create mode 100644 test/runtime/samples/component-binding-reactive-property-no-extra-call/main.svelte
 create mode 100644 test/runtime/samples/component-binding-reactive-statement/Button.svelte
 create mode 100644 test/runtime/samples/component-binding-reactive-statement/_config.js
 create mode 100644 test/runtime/samples/component-binding-reactive-statement/main.svelte
 create mode 100644 test/runtime/samples/component-binding-self-destroying/Nested.svelte
 create mode 100644 test/runtime/samples/component-binding-self-destroying/_config.js
 create mode 100644 test/runtime/samples/component-binding-self-destroying/main.svelte
 create mode 100644 test/runtime/samples/component-binding-store/Input.svelte
 create mode 100644 test/runtime/samples/component-binding-store/_config.js
 create mode 100644 test/runtime/samples/component-binding-store/main.svelte
 create mode 100644 test/runtime/samples/component-binding/Counter.svelte
 create mode 100644 test/runtime/samples/component-binding/_config.js
 create mode 100644 test/runtime/samples/component-binding/main.svelte
 create mode 100644 test/runtime/samples/component-data-dynamic-late/Widget.svelte
 create mode 100644 test/runtime/samples/component-data-dynamic-late/_config.js
 create mode 100644 test/runtime/samples/component-data-dynamic-late/main.svelte
 create mode 100644 test/runtime/samples/component-data-dynamic-shorthand/Widget.svelte
 create mode 100644 test/runtime/samples/component-data-dynamic-shorthand/_config.js
 create mode 100644 test/runtime/samples/component-data-dynamic-shorthand/main.svelte
 create mode 100644 test/runtime/samples/component-data-dynamic/Widget.svelte
 create mode 100644 test/runtime/samples/component-data-dynamic/_config.js
 create mode 100644 test/runtime/samples/component-data-dynamic/main.svelte
 create mode 100644 test/runtime/samples/component-data-empty/Widget.svelte
 create mode 100644 test/runtime/samples/component-data-empty/_config.js
 create mode 100644 test/runtime/samples/component-data-empty/main.svelte
 create mode 100644 test/runtime/samples/component-data-static-boolean-regression/Link.svelte
 create mode 100644 test/runtime/samples/component-data-static-boolean-regression/_config.js
 create mode 100644 test/runtime/samples/component-data-static-boolean-regression/main.svelte
 create mode 100644 test/runtime/samples/component-data-static-boolean/Foo.svelte
 create mode 100644 test/runtime/samples/component-data-static-boolean/_config.js
 create mode 100644 test/runtime/samples/component-data-static-boolean/main.svelte
 create mode 100644 test/runtime/samples/component-data-static/Widget.svelte
 create mode 100644 test/runtime/samples/component-data-static/_config.js
 create mode 100644 test/runtime/samples/component-data-static/main.svelte
 create mode 100644 test/runtime/samples/component-event-handler-contenteditable/_config.js
 create mode 100644 test/runtime/samples/component-event-handler-contenteditable/main.svelte
 create mode 100644 test/runtime/samples/component-event-handler-dynamic/Button.svelte
 create mode 100644 test/runtime/samples/component-event-handler-dynamic/_config.js
 create mode 100644 test/runtime/samples/component-event-handler-dynamic/main.svelte
 create mode 100644 test/runtime/samples/component-event-handler-modifier-once-dynamic/Button.svelte
 create mode 100644 test/runtime/samples/component-event-handler-modifier-once-dynamic/_config.js
 create mode 100644 test/runtime/samples/component-event-handler-modifier-once-dynamic/main.svelte
 create mode 100644 test/runtime/samples/component-event-handler-modifier-once/Button.svelte
 create mode 100644 test/runtime/samples/component-event-handler-modifier-once/_config.js
 create mode 100644 test/runtime/samples/component-event-handler-modifier-once/main.svelte
 create mode 100644 test/runtime/samples/component-event-not-stale/Button.svelte
 create mode 100644 test/runtime/samples/component-event-not-stale/_config.js
 create mode 100644 test/runtime/samples/component-event-not-stale/main.svelte
 create mode 100644 test/runtime/samples/component-events-console/Widget.svelte
 create mode 100644 test/runtime/samples/component-events-console/_config.js
 create mode 100644 test/runtime/samples/component-events-console/main.svelte
 create mode 100644 test/runtime/samples/component-events-data/Widget.svelte
 create mode 100644 test/runtime/samples/component-events-data/_config.js
 create mode 100644 test/runtime/samples/component-events-data/main.svelte
 create mode 100644 test/runtime/samples/component-events-each/Widget.svelte
 create mode 100644 test/runtime/samples/component-events-each/_config.js
 create mode 100644 test/runtime/samples/component-events-each/main.svelte
 create mode 100644 test/runtime/samples/component-events-this/Inner.svelte
 create mode 100644 test/runtime/samples/component-events-this/Widget.svelte
 create mode 100644 test/runtime/samples/component-events-this/_config.js
 create mode 100644 test/runtime/samples/component-events-this/main.svelte
 create mode 100644 test/runtime/samples/component-events/Widget.svelte
 create mode 100644 test/runtime/samples/component-events/_config.js
 create mode 100644 test/runtime/samples/component-events/main.svelte
 create mode 100644 test/runtime/samples/component-if-placement/Component.svelte
 create mode 100644 test/runtime/samples/component-if-placement/_config.js
 create mode 100644 test/runtime/samples/component-if-placement/main.svelte
 create mode 100644 test/runtime/samples/component-name-deconflicted-globals/Countdown.svelte
 create mode 100644 test/runtime/samples/component-name-deconflicted-globals/_config.js
 create mode 100644 test/runtime/samples/component-name-deconflicted-globals/main.svelte
 create mode 100644 test/runtime/samples/component-name-deconflicted/Nested.svelte
 create mode 100644 test/runtime/samples/component-name-deconflicted/_config.js
 create mode 100644 test/runtime/samples/component-name-deconflicted/main.svelte
 create mode 100644 test/runtime/samples/component-namespace/Tooltip.svelte
 create mode 100644 test/runtime/samples/component-namespace/Widget.svelte
 create mode 100644 test/runtime/samples/component-namespace/_config.js
 create mode 100644 test/runtime/samples/component-namespace/main.svelte
 create mode 100644 test/runtime/samples/component-namespaced/Foo.svelte
 create mode 100644 test/runtime/samples/component-namespaced/_config.js
 create mode 100644 test/runtime/samples/component-namespaced/components.svelte
 create mode 100644 test/runtime/samples/component-namespaced/main.svelte
 create mode 100644 test/runtime/samples/component-nested-deep/Level1.svelte
 create mode 100644 test/runtime/samples/component-nested-deep/Level2.svelte
 create mode 100644 test/runtime/samples/component-nested-deep/Level3.svelte
 create mode 100644 test/runtime/samples/component-nested-deep/_config.js
 create mode 100644 test/runtime/samples/component-nested-deep/main.svelte
 create mode 100644 test/runtime/samples/component-nested-deeper/Level1.svelte
 create mode 100644 test/runtime/samples/component-nested-deeper/Level2.svelte
 create mode 100644 test/runtime/samples/component-nested-deeper/Level3.svelte
 create mode 100644 test/runtime/samples/component-nested-deeper/_config.js
 create mode 100644 test/runtime/samples/component-nested-deeper/main.svelte
 create mode 100644 test/runtime/samples/component-not-void/Link.svelte
 create mode 100644 test/runtime/samples/component-not-void/_config.js
 create mode 100644 test/runtime/samples/component-not-void/main.svelte
 create mode 100644 test/runtime/samples/component-ref/Widget.svelte
 create mode 100644 test/runtime/samples/component-ref/_config.js
 create mode 100644 test/runtime/samples/component-ref/main.svelte
 create mode 100644 test/runtime/samples/component-shorthand-import/Widget.svelte
 create mode 100644 test/runtime/samples/component-shorthand-import/_config.js
 create mode 100644 test/runtime/samples/component-shorthand-import/main.svelte
 create mode 100644 test/runtime/samples/component-slot-attribute-order/Component.svelte
 create mode 100644 test/runtime/samples/component-slot-attribute-order/_config.js
 create mode 100644 test/runtime/samples/component-slot-attribute-order/main.svelte
 create mode 100644 test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/_config.js
 create mode 100644 test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/main.svelte
 create mode 100644 test/runtime/samples/component-slot-chained/Inner.svelte
 create mode 100644 test/runtime/samples/component-slot-chained/Outer.svelte
 create mode 100644 test/runtime/samples/component-slot-chained/_config.js
 create mode 100644 test/runtime/samples/component-slot-chained/main.svelte
 create mode 100644 test/runtime/samples/component-slot-component-named-b/Hello.svelte
 create mode 100644 test/runtime/samples/component-slot-component-named-b/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-component-named-b/_config.js
 create mode 100644 test/runtime/samples/component-slot-component-named-b/main.svelte
 create mode 100644 test/runtime/samples/component-slot-component-named-c/Hello.svelte
 create mode 100644 test/runtime/samples/component-slot-component-named-c/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-component-named-c/World.svelte
 create mode 100644 test/runtime/samples/component-slot-component-named-c/_config.js
 create mode 100644 test/runtime/samples/component-slot-component-named-c/main.svelte
 create mode 100644 test/runtime/samples/component-slot-component-named/Bar.svelte
 create mode 100644 test/runtime/samples/component-slot-component-named/Foo.svelte
 create mode 100644 test/runtime/samples/component-slot-component-named/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-component-named/_config.js
 create mode 100644 test/runtime/samples/component-slot-component-named/main.svelte
 create mode 100644 test/runtime/samples/component-slot-context-props-each-nested/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-context-props-each-nested/_config.js
 create mode 100644 test/runtime/samples/component-slot-context-props-each-nested/main.svelte
 create mode 100644 test/runtime/samples/component-slot-context-props-each/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-context-props-each/_config.js
 create mode 100644 test/runtime/samples/component-slot-context-props-each/main.svelte
 create mode 100644 test/runtime/samples/component-slot-context-props-let/Inner.svelte
 create mode 100644 test/runtime/samples/component-slot-context-props-let/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-context-props-let/_config.js
 create mode 100644 test/runtime/samples/component-slot-context-props-let/main.svelte
 create mode 100644 test/runtime/samples/component-slot-default/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-default/_config.js
 create mode 100644 test/runtime/samples/component-slot-default/main.svelte
 create mode 100644 test/runtime/samples/component-slot-duplicate-error-2/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-duplicate-error-2/_config.js
 create mode 100644 test/runtime/samples/component-slot-duplicate-error-2/main.svelte
 create mode 100644 test/runtime/samples/component-slot-duplicate-error-3/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-duplicate-error-3/_config.js
 create mode 100644 test/runtime/samples/component-slot-duplicate-error-3/main.svelte
 create mode 100644 test/runtime/samples/component-slot-duplicate-error-4/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-duplicate-error-4/_config.js
 create mode 100644 test/runtime/samples/component-slot-duplicate-error-4/main.svelte
 create mode 100644 test/runtime/samples/component-slot-duplicate-error/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-duplicate-error/_config.js
 create mode 100644 test/runtime/samples/component-slot-duplicate-error/main.svelte
 create mode 100644 test/runtime/samples/component-slot-dynamic/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-dynamic/_config.js
 create mode 100644 test/runtime/samples/component-slot-dynamic/main.svelte
 create mode 100644 test/runtime/samples/component-slot-each-block/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-each-block/_config.js
 create mode 100644 test/runtime/samples/component-slot-each-block/main.svelte
 create mode 100644 test/runtime/samples/component-slot-empty-b/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-empty-b/_config.js
 create mode 100644 test/runtime/samples/component-slot-empty-b/main.svelte
 create mode 100644 test/runtime/samples/component-slot-empty/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-empty/_config.js
 create mode 100644 test/runtime/samples/component-slot-empty/main.svelte
 create mode 100644 test/runtime/samples/component-slot-fallback-2/Inner.svelte
 create mode 100644 test/runtime/samples/component-slot-fallback-2/Outer.svelte
 create mode 100644 test/runtime/samples/component-slot-fallback-2/_config.js
 create mode 100644 test/runtime/samples/component-slot-fallback-2/main.svelte
 create mode 100644 test/runtime/samples/component-slot-fallback-2/store.svelte
 create mode 100644 test/runtime/samples/component-slot-fallback-3/Inner.svelte
 create mode 100644 test/runtime/samples/component-slot-fallback-3/_config.js
 create mode 100644 test/runtime/samples/component-slot-fallback-3/main.svelte
 create mode 100644 test/runtime/samples/component-slot-fallback-4/Inner.svelte
 create mode 100644 test/runtime/samples/component-slot-fallback-4/_config.js
 create mode 100644 test/runtime/samples/component-slot-fallback-4/main.svelte
 create mode 100644 test/runtime/samples/component-slot-fallback-5/IconA.svelte
 create mode 100644 test/runtime/samples/component-slot-fallback-5/IconB.svelte
 create mode 100644 test/runtime/samples/component-slot-fallback-5/Inner.svelte
 create mode 100644 test/runtime/samples/component-slot-fallback-5/_config.js
 create mode 100644 test/runtime/samples/component-slot-fallback-5/main.svelte
 create mode 100644 test/runtime/samples/component-slot-fallback-6/Foo.svelte
 create mode 100644 test/runtime/samples/component-slot-fallback-6/Inner.svelte
 create mode 100644 test/runtime/samples/component-slot-fallback-6/_config.js
 create mode 100644 test/runtime/samples/component-slot-fallback-6/main.svelte
 create mode 100644 test/runtime/samples/component-slot-fallback-empty/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-fallback-empty/_config.js
 create mode 100644 test/runtime/samples/component-slot-fallback-empty/main.svelte
 create mode 100644 test/runtime/samples/component-slot-fallback/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-fallback/_config.js
 create mode 100644 test/runtime/samples/component-slot-fallback/main.svelte
 create mode 100644 test/runtime/samples/component-slot-if-block-before-node/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-if-block-before-node/_config.js
 create mode 100644 test/runtime/samples/component-slot-if-block-before-node/main.svelte
 create mode 100644 test/runtime/samples/component-slot-if-block/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-if-block/_config.js
 create mode 100644 test/runtime/samples/component-slot-if-block/main.svelte
 create mode 100644 test/runtime/samples/component-slot-if-else-block-before-node/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-if-else-block-before-node/_config.js
 create mode 100644 test/runtime/samples/component-slot-if-else-block-before-node/main.svelte
 create mode 100644 test/runtime/samples/component-slot-let-aliased/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-let-aliased/_config.js
 create mode 100644 test/runtime/samples/component-slot-let-aliased/main.svelte
 create mode 100644 test/runtime/samples/component-slot-let-b/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-let-b/_config.js
 create mode 100644 test/runtime/samples/component-slot-let-b/main.svelte
 create mode 100644 test/runtime/samples/component-slot-let-c/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-let-c/_config.js
 create mode 100644 test/runtime/samples/component-slot-let-c/main.svelte
 create mode 100644 test/runtime/samples/component-slot-let-d/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-let-d/_config.js
 create mode 100644 test/runtime/samples/component-slot-let-d/main.svelte
 create mode 100644 test/runtime/samples/component-slot-let-destructured-2/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-let-destructured-2/_config.js
 create mode 100644 test/runtime/samples/component-slot-let-destructured-2/main.svelte
 create mode 100644 test/runtime/samples/component-slot-let-destructured/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-let-destructured/_config.js
 create mode 100644 test/runtime/samples/component-slot-let-destructured/main.svelte
 create mode 100644 test/runtime/samples/component-slot-let-e/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-let-e/_config.js
 create mode 100644 test/runtime/samples/component-slot-let-e/main.svelte
 create mode 100644 test/runtime/samples/component-slot-let-f/A.svelte
 create mode 100644 test/runtime/samples/component-slot-let-f/B.svelte
 create mode 100644 test/runtime/samples/component-slot-let-f/_config.js
 create mode 100644 test/runtime/samples/component-slot-let-f/main.svelte
 create mode 100644 test/runtime/samples/component-slot-let-g/A.svelte
 create mode 100644 test/runtime/samples/component-slot-let-g/_config.js
 create mode 100644 test/runtime/samples/component-slot-let-g/main.svelte
 create mode 100644 test/runtime/samples/component-slot-let-in-binding/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-let-in-binding/_config.js
 create mode 100644 test/runtime/samples/component-slot-let-in-binding/main.svelte
 create mode 100644 test/runtime/samples/component-slot-let-in-slot-2/Inner.svelte
 create mode 100644 test/runtime/samples/component-slot-let-in-slot-2/Outer.svelte
 create mode 100644 test/runtime/samples/component-slot-let-in-slot-2/_config.js
 create mode 100644 test/runtime/samples/component-slot-let-in-slot-2/main.svelte
 create mode 100644 test/runtime/samples/component-slot-let-in-slot/Inner.svelte
 create mode 100644 test/runtime/samples/component-slot-let-in-slot/Outer.svelte
 create mode 100644 test/runtime/samples/component-slot-let-in-slot/_config.js
 create mode 100644 test/runtime/samples/component-slot-let-in-slot/main.svelte
 create mode 100644 test/runtime/samples/component-slot-let-missing-prop/Bar.svelte
 create mode 100644 test/runtime/samples/component-slot-let-missing-prop/Foo.svelte
 create mode 100644 test/runtime/samples/component-slot-let-missing-prop/_config.js
 create mode 100644 test/runtime/samples/component-slot-let-missing-prop/main.svelte
 create mode 100644 test/runtime/samples/component-slot-let-named/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-let-named/_config.js
 create mode 100644 test/runtime/samples/component-slot-let-named/main.svelte
 create mode 100644 test/runtime/samples/component-slot-let-static/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-let-static/_config.js
 create mode 100644 test/runtime/samples/component-slot-let-static/main.svelte
 create mode 100644 test/runtime/samples/component-slot-let/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-let/_config.js
 create mode 100644 test/runtime/samples/component-slot-let/main.svelte
 create mode 100644 test/runtime/samples/component-slot-name-with-hyphen/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-name-with-hyphen/_config.js
 create mode 100644 test/runtime/samples/component-slot-name-with-hyphen/main.svelte
 create mode 100644 test/runtime/samples/component-slot-named-b/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-named-b/_config.js
 create mode 100644 test/runtime/samples/component-slot-named-b/main.svelte
 create mode 100644 test/runtime/samples/component-slot-named-c/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-named-c/_config.js
 create mode 100644 test/runtime/samples/component-slot-named-c/main.svelte
 create mode 100644 test/runtime/samples/component-slot-named-inherits-default-lets/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-named-inherits-default-lets/_config.js
 create mode 100644 test/runtime/samples/component-slot-named-inherits-default-lets/main.svelte
 create mode 100644 test/runtime/samples/component-slot-named/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-named/_config.js
 create mode 100644 test/runtime/samples/component-slot-named/main.svelte
 create mode 100644 test/runtime/samples/component-slot-names-sanitized/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-names-sanitized/_config.js
 create mode 100644 test/runtime/samples/component-slot-names-sanitized/main.svelte
 create mode 100644 test/runtime/samples/component-slot-nested-component/Inner.svelte
 create mode 100644 test/runtime/samples/component-slot-nested-component/Outer.svelte
 create mode 100644 test/runtime/samples/component-slot-nested-component/_config.js
 create mode 100644 test/runtime/samples/component-slot-nested-component/main.svelte
 create mode 100644 test/runtime/samples/component-slot-nested-error-2/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-nested-error-2/_config.js
 create mode 100644 test/runtime/samples/component-slot-nested-error-2/main.svelte
 create mode 100644 test/runtime/samples/component-slot-nested-error-3/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-nested-error-3/_config.js
 create mode 100644 test/runtime/samples/component-slot-nested-error-3/main.svelte
 create mode 100644 test/runtime/samples/component-slot-nested-error/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-nested-error/_config.js
 create mode 100644 test/runtime/samples/component-slot-nested-error/main.svelte
 create mode 100644 test/runtime/samples/component-slot-nested-if/Display.svelte
 create mode 100644 test/runtime/samples/component-slot-nested-if/Input.svelte
 create mode 100644 test/runtime/samples/component-slot-nested-if/_config.js
 create mode 100644 test/runtime/samples/component-slot-nested-if/main.svelte
 create mode 100644 test/runtime/samples/component-slot-nested-in-element/One.svelte
 create mode 100644 test/runtime/samples/component-slot-nested-in-element/Two.svelte
 create mode 100644 test/runtime/samples/component-slot-nested-in-element/_config.js
 create mode 100644 test/runtime/samples/component-slot-nested-in-element/main.svelte
 create mode 100644 test/runtime/samples/component-slot-nested-in-slot/One.svelte
 create mode 100644 test/runtime/samples/component-slot-nested-in-slot/Two.svelte
 create mode 100644 test/runtime/samples/component-slot-nested-in-slot/_config.js
 create mode 100644 test/runtime/samples/component-slot-nested-in-slot/main.svelte
 create mode 100644 test/runtime/samples/component-slot-nested/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-nested/_config.js
 create mode 100644 test/runtime/samples/component-slot-nested/main.svelte
 create mode 100644 test/runtime/samples/component-slot-slot/Component.svelte
 create mode 100644 test/runtime/samples/component-slot-slot/Forward.svelte
 create mode 100644 test/runtime/samples/component-slot-slot/_config.js
 create mode 100644 test/runtime/samples/component-slot-slot/main.svelte
 create mode 100644 test/runtime/samples/component-slot-spread-props/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-spread-props/_config.js
 create mode 100644 test/runtime/samples/component-slot-spread-props/main.svelte
 create mode 100644 test/runtime/samples/component-slot-spread/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-spread/_config.js
 create mode 100644 test/runtime/samples/component-slot-spread/main.svelte
 create mode 100644 test/runtime/samples/component-slot-static-and-dynamic/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-static-and-dynamic/_config.js
 create mode 100644 test/runtime/samples/component-slot-static-and-dynamic/main.svelte
 create mode 100644 test/runtime/samples/component-slot-used-with-default-event/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-used-with-default-event/_config.js
 create mode 100644 test/runtime/samples/component-slot-used-with-default-event/main.svelte
 create mode 100644 test/runtime/samples/component-slot-warning/Nested.svelte
 create mode 100644 test/runtime/samples/component-slot-warning/_config.js
 create mode 100644 test/runtime/samples/component-slot-warning/main.svelte
 create mode 100644 test/runtime/samples/component-static-at-symbol/Email.svelte
 create mode 100644 test/runtime/samples/component-static-at-symbol/_config.js
 create mode 100644 test/runtime/samples/component-static-at-symbol/main.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-2/Nested.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-2/_config.js
 create mode 100644 test/runtime/samples/component-svelte-slot-2/main.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-aliased/Nested.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-aliased/_config.js
 create mode 100644 test/runtime/samples/component-svelte-slot-let-aliased/main.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-b/Nested.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-b/_config.js
 create mode 100644 test/runtime/samples/component-svelte-slot-let-b/main.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-c/Nested.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-c/_config.js
 create mode 100644 test/runtime/samples/component-svelte-slot-let-c/main.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-d/Nested.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-d/_config.js
 create mode 100644 test/runtime/samples/component-svelte-slot-let-d/main.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-destructured-2/Nested.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-destructured-2/_config.js
 create mode 100644 test/runtime/samples/component-svelte-slot-let-destructured-2/main.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-destructured/Nested.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-destructured/_config.js
 create mode 100644 test/runtime/samples/component-svelte-slot-let-destructured/main.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-e/A.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-e/B.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-e/_config.js
 create mode 100644 test/runtime/samples/component-svelte-slot-let-e/main.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-f/A.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-f/_config.js
 create mode 100644 test/runtime/samples/component-svelte-slot-let-f/main.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-in-binding/Nested.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-in-binding/_config.js
 create mode 100644 test/runtime/samples/component-svelte-slot-let-in-binding/main.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-in-slot/Inner.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-in-slot/Outer.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-in-slot/_config.js
 create mode 100644 test/runtime/samples/component-svelte-slot-let-in-slot/main.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-named/Nested.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-named/_config.js
 create mode 100644 test/runtime/samples/component-svelte-slot-let-named/main.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-static/Nested.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let-static/_config.js
 create mode 100644 test/runtime/samples/component-svelte-slot-let-static/main.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let/Nested.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-let/_config.js
 create mode 100644 test/runtime/samples/component-svelte-slot-let/main.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-nested/Child.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-nested/Nested.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot-nested/_config.js
 create mode 100644 test/runtime/samples/component-svelte-slot-nested/main.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot/B.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot/Nested.svelte
 create mode 100644 test/runtime/samples/component-svelte-slot/_config.js
 create mode 100644 test/runtime/samples/component-svelte-slot/main.svelte
 create mode 100644 test/runtime/samples/component-template-inline-mutation/Widget.svelte
 create mode 100644 test/runtime/samples/component-template-inline-mutation/_config.js
 create mode 100644 test/runtime/samples/component-template-inline-mutation/main.svelte
 create mode 100644 test/runtime/samples/component-yield-follows-element/Foo.svelte
 create mode 100644 test/runtime/samples/component-yield-follows-element/_config.js
 create mode 100644 test/runtime/samples/component-yield-follows-element/main.svelte
 create mode 100644 test/runtime/samples/component-yield-if/Widget.svelte
 create mode 100644 test/runtime/samples/component-yield-if/_config.js
 create mode 100644 test/runtime/samples/component-yield-if/main.svelte
 create mode 100644 test/runtime/samples/component-yield-multiple-in-each/Widget.svelte
 create mode 100644 test/runtime/samples/component-yield-multiple-in-each/_config.js
 create mode 100644 test/runtime/samples/component-yield-multiple-in-each/main.svelte
 create mode 100644 test/runtime/samples/component-yield-multiple-in-if/Widget.svelte
 create mode 100644 test/runtime/samples/component-yield-multiple-in-if/_config.js
 create mode 100644 test/runtime/samples/component-yield-multiple-in-if/main.svelte
 create mode 100644 test/runtime/samples/component-yield-nested-if/Inner.svelte
 create mode 100644 test/runtime/samples/component-yield-nested-if/Outer.svelte
 create mode 100644 test/runtime/samples/component-yield-nested-if/_config.js
 create mode 100644 test/runtime/samples/component-yield-nested-if/main.svelte
 create mode 100644 test/runtime/samples/component-yield-parent/Widget.svelte
 create mode 100644 test/runtime/samples/component-yield-parent/_config.js
 create mode 100644 test/runtime/samples/component-yield-parent/main.svelte
 create mode 100644 test/runtime/samples/component-yield-placement/Modal.svelte
 create mode 100644 test/runtime/samples/component-yield-placement/_config.js
 create mode 100644 test/runtime/samples/component-yield-placement/main.svelte
 create mode 100644 test/runtime/samples/component-yield-static/Widget.svelte
 create mode 100644 test/runtime/samples/component-yield-static/_config.js
 create mode 100644 test/runtime/samples/component-yield-static/main.svelte
 create mode 100644 test/runtime/samples/component-yield/_config.js
 create mode 100644 test/runtime/samples/component-yield/main.svelte
 create mode 100644 test/runtime/samples/component/Widget.svelte
 create mode 100644 test/runtime/samples/component/_config.js
 create mode 100644 test/runtime/samples/component/main.svelte
 create mode 100644 test/runtime/samples/const-tag-await-then-destructuring/_config.js
 create mode 100644 test/runtime/samples/const-tag-await-then-destructuring/main.svelte
 create mode 100644 test/runtime/samples/const-tag-await-then/_config.js
 create mode 100644 test/runtime/samples/const-tag-await-then/main.svelte
 create mode 100644 test/runtime/samples/const-tag-component-without-let/Component.svelte
 create mode 100644 test/runtime/samples/const-tag-component-without-let/_config.js
 create mode 100644 test/runtime/samples/const-tag-component-without-let/main.svelte
 create mode 100644 test/runtime/samples/const-tag-component/Component.svelte
 create mode 100644 test/runtime/samples/const-tag-component/_config.js
 create mode 100644 test/runtime/samples/const-tag-component/main.svelte
 create mode 100644 test/runtime/samples/const-tag-dependencies/_config.js
 create mode 100644 test/runtime/samples/const-tag-dependencies/main.svelte
 create mode 100644 test/runtime/samples/const-tag-each-arrow/_config.js
 create mode 100644 test/runtime/samples/const-tag-each-arrow/main.svelte
 create mode 100644 test/runtime/samples/const-tag-each-const/_config.js
 create mode 100644 test/runtime/samples/const-tag-each-const/main.svelte
 create mode 100644 test/runtime/samples/const-tag-each-destructure/_config.js
 create mode 100644 test/runtime/samples/const-tag-each-destructure/main.svelte
 create mode 100644 test/runtime/samples/const-tag-each-duplicated-variable1/_config.js
 create mode 100644 test/runtime/samples/const-tag-each-duplicated-variable1/main.svelte
 create mode 100644 test/runtime/samples/const-tag-each-duplicated-variable2/_config.js
 create mode 100644 test/runtime/samples/const-tag-each-duplicated-variable2/main.svelte
 create mode 100644 test/runtime/samples/const-tag-each-duplicated-variable3/_config.js
 create mode 100644 test/runtime/samples/const-tag-each-duplicated-variable3/main.svelte
 create mode 100644 test/runtime/samples/const-tag-each-else/_config.js
 create mode 100644 test/runtime/samples/const-tag-each-else/main.svelte
 create mode 100644 test/runtime/samples/const-tag-each-function/_config.js
 create mode 100644 test/runtime/samples/const-tag-each-function/main.svelte
 create mode 100644 test/runtime/samples/const-tag-each/_config.js
 create mode 100644 test/runtime/samples/const-tag-each/main.svelte
 create mode 100644 test/runtime/samples/const-tag-hoisting/_config.js
 create mode 100644 test/runtime/samples/const-tag-hoisting/main.svelte
 create mode 100644 test/runtime/samples/const-tag-if-else-if/_config.js
 create mode 100644 test/runtime/samples/const-tag-if-else-if/main.svelte
 create mode 100644 test/runtime/samples/const-tag-if-else-outro/_config.js
 create mode 100644 test/runtime/samples/const-tag-if-else-outro/main.svelte
 create mode 100644 test/runtime/samples/const-tag-if-else/_config.js
 create mode 100644 test/runtime/samples/const-tag-if-else/main.svelte
 create mode 100644 test/runtime/samples/const-tag-if/_config.js
 create mode 100644 test/runtime/samples/const-tag-if/main.svelte
 create mode 100644 test/runtime/samples/const-tag-ordering/_config.js
 create mode 100644 test/runtime/samples/const-tag-ordering/main.svelte
 create mode 100644 test/runtime/samples/const-tag-shadow-2/_config.js
 create mode 100644 test/runtime/samples/const-tag-shadow-2/main.svelte
 create mode 100644 test/runtime/samples/const-tag-shadow/_config.js
 create mode 100644 test/runtime/samples/const-tag-shadow/main.svelte
 create mode 100644 test/runtime/samples/constructor-pass-context/Component.svelte
 create mode 100644 test/runtime/samples/constructor-pass-context/_config.js
 create mode 100644 test/runtime/samples/constructor-pass-context/main.svelte
 create mode 100644 test/runtime/samples/constructor-prefer-passed-context/ChildComponent.svelte
 create mode 100644 test/runtime/samples/constructor-prefer-passed-context/_config.js
 create mode 100644 test/runtime/samples/constructor-prefer-passed-context/main.svelte
 create mode 100644 test/runtime/samples/context-api-b/Leaf.svelte
 create mode 100644 test/runtime/samples/context-api-b/Nested.svelte
 create mode 100644 test/runtime/samples/context-api-b/_config.js
 create mode 100644 test/runtime/samples/context-api-b/main.svelte
 create mode 100644 test/runtime/samples/context-api-c/Leaf.svelte
 create mode 100644 test/runtime/samples/context-api-c/Nested.svelte
 create mode 100644 test/runtime/samples/context-api-c/_config.js
 create mode 100644 test/runtime/samples/context-api-c/main.svelte
 create mode 100644 test/runtime/samples/context-api-d/Leaf.svelte
 create mode 100644 test/runtime/samples/context-api-d/Nested.svelte
 create mode 100644 test/runtime/samples/context-api-d/_config.js
 create mode 100644 test/runtime/samples/context-api-d/main.svelte
 create mode 100644 test/runtime/samples/context-api/Tab.svelte
 create mode 100644 test/runtime/samples/context-api/TabList.svelte
 create mode 100644 test/runtime/samples/context-api/TabPanel.svelte
 create mode 100644 test/runtime/samples/context-api/Tabs.svelte
 create mode 100644 test/runtime/samples/context-api/_config.js
 create mode 100644 test/runtime/samples/context-api/main.svelte
 create mode 100644 test/runtime/samples/context-in-await/Child.svelte
 create mode 100644 test/runtime/samples/context-in-await/_config.js
 create mode 100644 test/runtime/samples/context-in-await/main.svelte
 create mode 100644 test/runtime/samples/context-setcontext-return/_config.js
 create mode 100644 test/runtime/samples/context-setcontext-return/main.svelte
 create mode 100644 test/runtime/samples/contextual-callback-b/_config.js
 create mode 100644 test/runtime/samples/contextual-callback-b/main.svelte
 create mode 100644 test/runtime/samples/contextual-callback/Widget.svelte
 create mode 100644 test/runtime/samples/contextual-callback/_config.js
 create mode 100644 test/runtime/samples/contextual-callback/main.svelte
 create mode 100644 test/runtime/samples/css-comments/_config.js
 create mode 100644 test/runtime/samples/css-comments/main.svelte
 create mode 100644 test/runtime/samples/css-false/Widget.svelte
 create mode 100644 test/runtime/samples/css-false/_config.js
 create mode 100644 test/runtime/samples/css-false/main.svelte
 create mode 100644 test/runtime/samples/css-space-in-attribute/Widget.svelte
 create mode 100644 test/runtime/samples/css-space-in-attribute/_config.js
 create mode 100644 test/runtime/samples/css-space-in-attribute/main.svelte
 create mode 100644 test/runtime/samples/css/Widget.svelte
 create mode 100644 test/runtime/samples/css/_config.js
 create mode 100644 test/runtime/samples/css/main.svelte
 create mode 100644 test/runtime/samples/custom-method/_config.js
 create mode 100644 test/runtime/samples/custom-method/main.svelte
 create mode 100644 test/runtime/samples/deconflict-anchor/Anchor.svelte
 create mode 100644 test/runtime/samples/deconflict-anchor/_config.js
 create mode 100644 test/runtime/samples/deconflict-anchor/main.svelte
 create mode 100644 test/runtime/samples/deconflict-block-methods/_config.js
 create mode 100644 test/runtime/samples/deconflict-block-methods/main.svelte
 create mode 100644 test/runtime/samples/deconflict-builtins-2/_config.js
 create mode 100644 test/runtime/samples/deconflict-builtins-2/main.svelte
 create mode 100644 test/runtime/samples/deconflict-builtins/_config.js
 create mode 100644 test/runtime/samples/deconflict-builtins/get.js
 create mode 100644 test/runtime/samples/deconflict-builtins/main.svelte
 create mode 100644 test/runtime/samples/deconflict-component-name-with-global/_config.js
 create mode 100644 test/runtime/samples/deconflict-component-name-with-global/main.svelte
 create mode 100644 test/runtime/samples/deconflict-component-name-with-module-global/_config.js
 create mode 100644 test/runtime/samples/deconflict-component-name-with-module-global/main.svelte
 create mode 100644 test/runtime/samples/deconflict-component-refs/_config.js
 create mode 100644 test/runtime/samples/deconflict-component-refs/main.svelte
 create mode 100644 test/runtime/samples/deconflict-contexts/_config.js
 create mode 100644 test/runtime/samples/deconflict-contexts/main.svelte
 create mode 100644 test/runtime/samples/deconflict-contextual-action/_config.js
 create mode 100644 test/runtime/samples/deconflict-contextual-action/main.svelte
 create mode 100644 test/runtime/samples/deconflict-contextual-action/util.js
 create mode 100644 test/runtime/samples/deconflict-contextual-bind/Widget.svelte
 create mode 100644 test/runtime/samples/deconflict-contextual-bind/_config.js
 create mode 100644 test/runtime/samples/deconflict-contextual-bind/main.svelte
 create mode 100644 test/runtime/samples/deconflict-ctx/_config.js
 create mode 100644 test/runtime/samples/deconflict-ctx/main.svelte
 create mode 100644 test/runtime/samples/deconflict-elements-indexes/_config.js
 create mode 100644 test/runtime/samples/deconflict-elements-indexes/main.svelte
 create mode 100644 test/runtime/samples/deconflict-globals/_config.js
 create mode 100644 test/runtime/samples/deconflict-globals/main.svelte
 create mode 100644 test/runtime/samples/deconflict-non-helpers/_config.js
 create mode 100644 test/runtime/samples/deconflict-non-helpers/main.svelte
 create mode 100644 test/runtime/samples/deconflict-non-helpers/module.js
 create mode 100644 test/runtime/samples/deconflict-self/_config.js
 create mode 100644 test/runtime/samples/deconflict-self/main.svelte
 create mode 100644 test/runtime/samples/deconflict-self/nested/main.svelte
 create mode 100644 test/runtime/samples/deconflict-spread-i/_config.js
 create mode 100644 test/runtime/samples/deconflict-spread-i/main.svelte
 create mode 100644 test/runtime/samples/deconflict-template-1/_config.js
 create mode 100644 test/runtime/samples/deconflict-template-1/main.svelte
 create mode 100644 test/runtime/samples/deconflict-template-1/module.js
 create mode 100644 test/runtime/samples/deconflict-template-2/_config.js
 create mode 100644 test/runtime/samples/deconflict-template-2/main.svelte
 create mode 100644 test/runtime/samples/deconflict-value/Widget.svelte
 create mode 100644 test/runtime/samples/deconflict-value/_config.js
 create mode 100644 test/runtime/samples/deconflict-value/main.svelte
 create mode 100644 test/runtime/samples/deconflict-vars/_config.js
 create mode 100644 test/runtime/samples/deconflict-vars/main.svelte
 create mode 100644 test/runtime/samples/default-data-function/_config.js
 create mode 100644 test/runtime/samples/default-data-function/main.svelte
 create mode 100644 test/runtime/samples/default-data-override/_config.js
 create mode 100644 test/runtime/samples/default-data-override/main.svelte
 create mode 100644 test/runtime/samples/default-data/_config.js
 create mode 100644 test/runtime/samples/default-data/main.svelte
 create mode 100644 test/runtime/samples/destroy-twice/_config.js
 create mode 100644 test/runtime/samples/destroy-twice/main.svelte
 create mode 100644 test/runtime/samples/destructured-assignment-pattern-with-object-pattern/_config.js
 create mode 100644 test/runtime/samples/destructured-assignment-pattern-with-object-pattern/main.svelte
 create mode 100644 test/runtime/samples/destructured-props-1/A.svelte
 create mode 100644 test/runtime/samples/destructured-props-1/_config.js
 create mode 100644 test/runtime/samples/destructured-props-1/main.svelte
 create mode 100644 test/runtime/samples/destructured-props-2/A.svelte
 create mode 100644 test/runtime/samples/destructured-props-2/_config.js
 create mode 100644 test/runtime/samples/destructured-props-2/main.svelte
 create mode 100644 test/runtime/samples/destructured-props-3/A.svelte
 create mode 100644 test/runtime/samples/destructured-props-3/_config.js
 create mode 100644 test/runtime/samples/destructured-props-3/main.svelte
 create mode 100644 test/runtime/samples/destructuring-assignment-array/_config.js
 create mode 100644 test/runtime/samples/destructuring-assignment-array/main.svelte
 create mode 100644 test/runtime/samples/destructuring-between-exports/_config.js
 create mode 100644 test/runtime/samples/destructuring-between-exports/main.svelte
 create mode 100644 test/runtime/samples/destructuring/_config.js
 create mode 100644 test/runtime/samples/destructuring/main.svelte
 create mode 100644 test/runtime/samples/dev-warning-destroy-twice/_config.js
 create mode 100644 test/runtime/samples/dev-warning-destroy-twice/main.svelte
 create mode 100644 test/runtime/samples/dev-warning-each-block-no-sets-maps/_config.js
 create mode 100644 test/runtime/samples/dev-warning-each-block-no-sets-maps/main.svelte
 create mode 100644 test/runtime/samples/dev-warning-each-block-require-arraylike/_config.js
 create mode 100644 test/runtime/samples/dev-warning-each-block-require-arraylike/main.svelte
 create mode 100644 test/runtime/samples/dev-warning-helper/_config.js
 create mode 100644 test/runtime/samples/dev-warning-helper/main.svelte
 create mode 100644 test/runtime/samples/dev-warning-missing-data-binding/_config.js
 create mode 100644 test/runtime/samples/dev-warning-missing-data-binding/main.svelte
 create mode 100644 test/runtime/samples/dev-warning-missing-data-component/Foo.svelte
 create mode 100644 test/runtime/samples/dev-warning-missing-data-component/_config.js
 create mode 100644 test/runtime/samples/dev-warning-missing-data-component/main.svelte
 create mode 100644 test/runtime/samples/dev-warning-missing-data-each/_config.js
 create mode 100644 test/runtime/samples/dev-warning-missing-data-each/main.svelte
 create mode 100644 test/runtime/samples/dev-warning-missing-data-excludes-event/_config.js
 create mode 100644 test/runtime/samples/dev-warning-missing-data-excludes-event/main.svelte
 create mode 100644 test/runtime/samples/dev-warning-missing-data-function/_config.js
 create mode 100644 test/runtime/samples/dev-warning-missing-data-function/main.svelte
 create mode 100644 test/runtime/samples/dev-warning-missing-data/_config.js
 create mode 100644 test/runtime/samples/dev-warning-missing-data/main.svelte
 create mode 100644 test/runtime/samples/dev-warning-readonly-computed/_config.js
 create mode 100644 test/runtime/samples/dev-warning-readonly-computed/main.svelte
 create mode 100644 test/runtime/samples/dev-warning-readonly-window-binding/_config.js
 create mode 100644 test/runtime/samples/dev-warning-readonly-window-binding/main.svelte
 create mode 100644 test/runtime/samples/dev-warning-unknown-props-2/Foo.svelte
 create mode 100644 test/runtime/samples/dev-warning-unknown-props-2/_config.js
 create mode 100644 test/runtime/samples/dev-warning-unknown-props-2/main.svelte
 create mode 100644 test/runtime/samples/dev-warning-unknown-props-with-$$props/Foo.svelte
 create mode 100644 test/runtime/samples/dev-warning-unknown-props-with-$$props/_config.js
 create mode 100644 test/runtime/samples/dev-warning-unknown-props-with-$$props/main.svelte
 create mode 100644 test/runtime/samples/dev-warning-unknown-props-with-$$rest/Foo.svelte
 create mode 100644 test/runtime/samples/dev-warning-unknown-props-with-$$rest/_config.js
 create mode 100644 test/runtime/samples/dev-warning-unknown-props-with-$$rest/main.svelte
 create mode 100644 test/runtime/samples/dev-warning-unknown-props-with-$$scope/Foo.svelte
 create mode 100644 test/runtime/samples/dev-warning-unknown-props-with-$$scope/_config.js
 create mode 100644 test/runtime/samples/dev-warning-unknown-props-with-$$scope/main.svelte
 create mode 100644 test/runtime/samples/dev-warning-unknown-props/Foo.svelte
 create mode 100644 test/runtime/samples/dev-warning-unknown-props/_config.js
 create mode 100644 test/runtime/samples/dev-warning-unknown-props/main.svelte
 create mode 100644 test/runtime/samples/document-event/_config.js
 create mode 100644 test/runtime/samples/document-event/main.svelte
 create mode 100644 test/runtime/samples/dynamic-component-bindings-recreated-b/Green.svelte
 create mode 100644 test/runtime/samples/dynamic-component-bindings-recreated-b/Red.svelte
 create mode 100644 test/runtime/samples/dynamic-component-bindings-recreated-b/_config.js
 create mode 100644 test/runtime/samples/dynamic-component-bindings-recreated-b/main.svelte
 create mode 100644 test/runtime/samples/dynamic-component-bindings-recreated/Green.svelte
 create mode 100644 test/runtime/samples/dynamic-component-bindings-recreated/Red.svelte
 create mode 100644 test/runtime/samples/dynamic-component-bindings-recreated/_config.js
 create mode 100644 test/runtime/samples/dynamic-component-bindings-recreated/main.svelte
 create mode 100644 test/runtime/samples/dynamic-component-bindings/Bar.svelte
 create mode 100644 test/runtime/samples/dynamic-component-bindings/Foo.svelte
 create mode 100644 test/runtime/samples/dynamic-component-bindings/_config.js
 create mode 100644 test/runtime/samples/dynamic-component-bindings/main.svelte
 create mode 100644 test/runtime/samples/dynamic-component-destroy-null/_config.js
 create mode 100644 test/runtime/samples/dynamic-component-destroy-null/main.svelte
 create mode 100644 test/runtime/samples/dynamic-component-events/Bar.svelte
 create mode 100644 test/runtime/samples/dynamic-component-events/Foo.svelte
 create mode 100644 test/runtime/samples/dynamic-component-events/_config.js
 create mode 100644 test/runtime/samples/dynamic-component-events/main.svelte
 create mode 100644 test/runtime/samples/dynamic-component-in-if/Bar.svelte
 create mode 100644 test/runtime/samples/dynamic-component-in-if/Foo.svelte
 create mode 100644 test/runtime/samples/dynamic-component-in-if/_config.js
 create mode 100644 test/runtime/samples/dynamic-component-in-if/main.svelte
 create mode 100644 test/runtime/samples/dynamic-component-inside-element/Bar.svelte
 create mode 100644 test/runtime/samples/dynamic-component-inside-element/Foo.svelte
 create mode 100644 test/runtime/samples/dynamic-component-inside-element/_config.js
 create mode 100644 test/runtime/samples/dynamic-component-inside-element/main.svelte
 create mode 100644 test/runtime/samples/dynamic-component-nulled-out-intro/_config.js
 create mode 100644 test/runtime/samples/dynamic-component-nulled-out-intro/main.svelte
 create mode 100644 test/runtime/samples/dynamic-component-nulled-out/Foo.svelte
 create mode 100644 test/runtime/samples/dynamic-component-nulled-out/_config.js
 create mode 100644 test/runtime/samples/dynamic-component-nulled-out/main.svelte
 create mode 100644 test/runtime/samples/dynamic-component-ref/Foo.svelte
 create mode 100644 test/runtime/samples/dynamic-component-ref/_config.js
 create mode 100644 test/runtime/samples/dynamic-component-ref/main.svelte
 create mode 100644 test/runtime/samples/dynamic-component-slot/Bar.svelte
 create mode 100644 test/runtime/samples/dynamic-component-slot/Baz.svelte
 create mode 100644 test/runtime/samples/dynamic-component-slot/Foo.svelte
 create mode 100644 test/runtime/samples/dynamic-component-slot/_config.js
 create mode 100644 test/runtime/samples/dynamic-component-slot/main.svelte
 create mode 100644 test/runtime/samples/dynamic-component-update-existing-instance/Bar.svelte
 create mode 100644 test/runtime/samples/dynamic-component-update-existing-instance/Foo.svelte
 create mode 100644 test/runtime/samples/dynamic-component-update-existing-instance/_config.js
 create mode 100644 test/runtime/samples/dynamic-component-update-existing-instance/main.svelte
 create mode 100644 test/runtime/samples/dynamic-component/Bar.svelte
 create mode 100644 test/runtime/samples/dynamic-component/Foo.svelte
 create mode 100644 test/runtime/samples/dynamic-component/_config.js
 create mode 100644 test/runtime/samples/dynamic-component/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-action-update/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-action-update/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-animation-2/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-animation-2/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-animation/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-animation/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-attribute-boolean/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-attribute-boolean/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-attribute-spread/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-attribute-spread/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-attribute/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-attribute/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-binding-invalid/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-binding-invalid/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-binding-this/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-binding-this/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-change-tag/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-change-tag/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-class-directive/Link.svelte
 create mode 100644 test/runtime/samples/dynamic-element-class-directive/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-class-directive/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-empty-tag/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-empty-tag/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-event-handler1/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-event-handler1/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-event-handler2/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-event-handler2/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-expression/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-expression/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-invalid-this/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-invalid-this/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-null-tag/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-null-tag/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-pass-props/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-pass-props/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-slot/Foo.svelte
 create mode 100644 test/runtime/samples/dynamic-element-slot/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-slot/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-store/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-store/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-string/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-string/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-template-literals/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-template-literals/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-transition/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-transition/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-undefined-tag/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-undefined-tag/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-variable/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-variable/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-void-tag/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-void-tag/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-void-with-content-1/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-void-with-content-1/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-void-with-content-2/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-void-with-content-2/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-void-with-content-3/Nested.svelte
 create mode 100644 test/runtime/samples/dynamic-element-void-with-content-3/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-void-with-content-3/main.svelte
 create mode 100644 test/runtime/samples/dynamic-element-void-with-content-4/Nested.svelte
 create mode 100644 test/runtime/samples/dynamic-element-void-with-content-4/_config.js
 create mode 100644 test/runtime/samples/dynamic-element-void-with-content-4/main.svelte
 create mode 100644 test/runtime/samples/each-block-after-let/Child.svelte
 create mode 100644 test/runtime/samples/each-block-after-let/_config.js
 create mode 100644 test/runtime/samples/each-block-after-let/main.svelte
 create mode 100644 test/runtime/samples/each-block-array-literal/_config.js
 create mode 100644 test/runtime/samples/each-block-array-literal/main.svelte
 create mode 100644 test/runtime/samples/each-block-component-no-props/Child.svelte
 create mode 100644 test/runtime/samples/each-block-component-no-props/_config.js
 create mode 100644 test/runtime/samples/each-block-component-no-props/main.svelte
 create mode 100644 test/runtime/samples/each-block-containing-component-in-if/Nested.svelte
 create mode 100644 test/runtime/samples/each-block-containing-component-in-if/_config.js
 create mode 100644 test/runtime/samples/each-block-containing-component-in-if/main.svelte
 create mode 100644 test/runtime/samples/each-block-containing-if/_config.js
 create mode 100644 test/runtime/samples/each-block-containing-if/main.svelte
 create mode 100644 test/runtime/samples/each-block-deconflict-name-context/_config.js
 create mode 100644 test/runtime/samples/each-block-deconflict-name-context/main.svelte
 create mode 100644 test/runtime/samples/each-block-destructured-array-sparse/_config.js
 create mode 100644 test/runtime/samples/each-block-destructured-array-sparse/main.svelte
 create mode 100644 test/runtime/samples/each-block-destructured-array/_config.js
 create mode 100644 test/runtime/samples/each-block-destructured-array/main.svelte
 create mode 100644 test/runtime/samples/each-block-destructured-default-before-initialised/_config.js
 create mode 100644 test/runtime/samples/each-block-destructured-default-before-initialised/main.svelte
 create mode 100644 test/runtime/samples/each-block-destructured-default-binding/_config.js
 create mode 100644 test/runtime/samples/each-block-destructured-default-binding/main.svelte
 create mode 100644 test/runtime/samples/each-block-destructured-default/_config.js
 create mode 100644 test/runtime/samples/each-block-destructured-default/main.svelte
 create mode 100644 test/runtime/samples/each-block-destructured-object-binding/_config.js
 create mode 100644 test/runtime/samples/each-block-destructured-object-binding/main.svelte
 create mode 100644 test/runtime/samples/each-block-destructured-object-reserved-key/_config.js
 create mode 100644 test/runtime/samples/each-block-destructured-object-reserved-key/main.svelte
 create mode 100644 test/runtime/samples/each-block-destructured-object-rest/_config.js
 create mode 100644 test/runtime/samples/each-block-destructured-object-rest/main.svelte
 create mode 100644 test/runtime/samples/each-block-destructured-object/_config.js
 create mode 100644 test/runtime/samples/each-block-destructured-object/main.svelte
 create mode 100644 test/runtime/samples/each-block-dynamic-else-static/_config.js
 create mode 100644 test/runtime/samples/each-block-dynamic-else-static/main.svelte
 create mode 100644 test/runtime/samples/each-block-else-in-if/_config.js
 create mode 100644 test/runtime/samples/each-block-else-in-if/main.svelte
 create mode 100644 test/runtime/samples/each-block-else-mount-or-intro/Widget.svelte
 create mode 100644 test/runtime/samples/each-block-else-mount-or-intro/_config.js
 create mode 100644 test/runtime/samples/each-block-else-mount-or-intro/main.svelte
 create mode 100644 test/runtime/samples/each-block-else-starts-empty/_config.js
 create mode 100644 test/runtime/samples/each-block-else-starts-empty/main.svelte
 create mode 100644 test/runtime/samples/each-block-else/_config.js
 create mode 100644 test/runtime/samples/each-block-else/main.svelte
 create mode 100644 test/runtime/samples/each-block-empty-outro/Thing.svelte
 create mode 100644 test/runtime/samples/each-block-empty-outro/_config.js
 create mode 100644 test/runtime/samples/each-block-empty-outro/main.svelte
 create mode 100644 test/runtime/samples/each-block-function/_config.js
 create mode 100644 test/runtime/samples/each-block-function/main.svelte
 create mode 100644 test/runtime/samples/each-block-in-if-block/_config.js
 create mode 100644 test/runtime/samples/each-block-in-if-block/main.svelte
 create mode 100644 test/runtime/samples/each-block-index-only/_config.js
 create mode 100644 test/runtime/samples/each-block-index-only/main.svelte
 create mode 100644 test/runtime/samples/each-block-indexed/_config.js
 create mode 100644 test/runtime/samples/each-block-indexed/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-bind-group/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-bind-group/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-changed/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-changed/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-component-action/Component.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-component-action/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-component-action/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-dyanmic-key/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-dyanmic-key/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-dynamic-2/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-dynamic-2/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-dynamic/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-dynamic/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-else/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-else/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-empty/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-empty/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-html-b/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-html-b/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-html/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-html/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-iife/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-iife/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-index-in-event-handler/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-index-in-event-handler/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-nested/Child.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-nested/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-nested/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-non-prop/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-non-prop/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-object-identity/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-object-identity/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-random-permute/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-random-permute/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-recursive/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-recursive/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-shift/Nested.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-shift/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-shift/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-siblings/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-siblings/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-static/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-static/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-unshift/Nested.svelte
 create mode 100644 test/runtime/samples/each-block-keyed-unshift/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-unshift/main.svelte
 create mode 100644 test/runtime/samples/each-block-keyed/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed/main.svelte
 create mode 100644 test/runtime/samples/each-block-random-permute/_config.js
 create mode 100644 test/runtime/samples/each-block-random-permute/main.svelte
 create mode 100644 test/runtime/samples/each-block-recursive-with-function-condition/_config.js
 create mode 100644 test/runtime/samples/each-block-recursive-with-function-condition/main.svelte
 create mode 100644 test/runtime/samples/each-block-scope-shadow-bind-2/_config.js
 create mode 100644 test/runtime/samples/each-block-scope-shadow-bind-2/main.svelte
 create mode 100644 test/runtime/samples/each-block-scope-shadow-bind-3/_config.js
 create mode 100644 test/runtime/samples/each-block-scope-shadow-bind-3/main.svelte
 create mode 100644 test/runtime/samples/each-block-scope-shadow-bind-4/_config.js
 create mode 100644 test/runtime/samples/each-block-scope-shadow-bind-4/main.svelte
 create mode 100644 test/runtime/samples/each-block-scope-shadow-bind/_config.js
 create mode 100644 test/runtime/samples/each-block-scope-shadow-bind/main.svelte
 create mode 100644 test/runtime/samples/each-block-scope-shadow-self/_config.js
 create mode 100644 test/runtime/samples/each-block-scope-shadow-self/main.svelte
 create mode 100644 test/runtime/samples/each-block-scope-shadow/_config.js
 create mode 100644 test/runtime/samples/each-block-scope-shadow/main.svelte
 create mode 100644 test/runtime/samples/each-block-static/_config.js
 create mode 100644 test/runtime/samples/each-block-static/main.svelte
 create mode 100644 test/runtime/samples/each-block-string/_config.js
 create mode 100644 test/runtime/samples/each-block-string/main.svelte
 create mode 100644 test/runtime/samples/each-block-text-node/_config.js
 create mode 100644 test/runtime/samples/each-block-text-node/main.svelte
 create mode 100644 test/runtime/samples/each-block-unkeyed-else-2/_config.js
 create mode 100644 test/runtime/samples/each-block-unkeyed-else-2/main.svelte
 create mode 100644 test/runtime/samples/each-block/_config.js
 create mode 100644 test/runtime/samples/each-block/main.svelte
 create mode 100644 test/runtime/samples/each-blocks-assignment-2/_config.js
 create mode 100644 test/runtime/samples/each-blocks-assignment-2/main.svelte
 create mode 100644 test/runtime/samples/each-blocks-assignment/_config.js
 create mode 100644 test/runtime/samples/each-blocks-assignment/main.svelte
 create mode 100644 test/runtime/samples/each-blocks-expression/_config.js
 create mode 100644 test/runtime/samples/each-blocks-expression/main.svelte
 create mode 100644 test/runtime/samples/each-blocks-nested-b/_config.js
 create mode 100644 test/runtime/samples/each-blocks-nested-b/main.svelte
 create mode 100644 test/runtime/samples/each-blocks-nested/_config.js
 create mode 100644 test/runtime/samples/each-blocks-nested/main.svelte
 create mode 100644 test/runtime/samples/element-invalid-name/_config.js
 create mode 100644 test/runtime/samples/element-invalid-name/main.svelte
 create mode 100644 test/runtime/samples/element-source-location/Foo.svelte
 create mode 100644 test/runtime/samples/element-source-location/_config.js
 create mode 100644 test/runtime/samples/element-source-location/main.svelte
 create mode 100644 test/runtime/samples/empty-dom/_config.js
 create mode 100644 test/runtime/samples/empty-dom/main.svelte
 create mode 100644 test/runtime/samples/empty-style-block/_config.js
 create mode 100644 test/runtime/samples/empty-style-block/main.svelte
 create mode 100644 test/runtime/samples/escape-template-literals/Widget.svelte
 create mode 100644 test/runtime/samples/escape-template-literals/_config.js
 create mode 100644 test/runtime/samples/escape-template-literals/main.svelte
 create mode 100644 test/runtime/samples/escaped-text/_config.js
 create mode 100644 test/runtime/samples/escaped-text/main.svelte
 create mode 100644 test/runtime/samples/event-handler-async/_config.js
 create mode 100644 test/runtime/samples/event-handler-async/main.svelte
 create mode 100644 test/runtime/samples/event-handler-console-log/_config.js
 create mode 100644 test/runtime/samples/event-handler-console-log/main.svelte
 create mode 100644 test/runtime/samples/event-handler-deconflicted/_config.js
 create mode 100644 test/runtime/samples/event-handler-deconflicted/main.svelte
 create mode 100644 test/runtime/samples/event-handler-destructured/_config.js
 create mode 100644 test/runtime/samples/event-handler-destructured/main.svelte
 create mode 100644 test/runtime/samples/event-handler-dynamic-2/_config.js
 create mode 100644 test/runtime/samples/event-handler-dynamic-2/main.svelte
 create mode 100644 test/runtime/samples/event-handler-dynamic-bound-var/Nested.svelte
 create mode 100644 test/runtime/samples/event-handler-dynamic-bound-var/_config.js
 create mode 100644 test/runtime/samples/event-handler-dynamic-bound-var/main.svelte
 create mode 100644 test/runtime/samples/event-handler-dynamic-expression/_config.js
 create mode 100644 test/runtime/samples/event-handler-dynamic-expression/main.svelte
 create mode 100644 test/runtime/samples/event-handler-dynamic-hash/_config.js
 create mode 100644 test/runtime/samples/event-handler-dynamic-hash/main.svelte
 create mode 100644 test/runtime/samples/event-handler-dynamic-invalid/_config.js
 create mode 100644 test/runtime/samples/event-handler-dynamic-invalid/main.svelte
 create mode 100644 test/runtime/samples/event-handler-dynamic-modifier-once/_config.js
 create mode 100644 test/runtime/samples/event-handler-dynamic-modifier-once/main.svelte
 create mode 100644 test/runtime/samples/event-handler-dynamic-modifier-prevent-default/_config.js
 create mode 100644 test/runtime/samples/event-handler-dynamic-modifier-prevent-default/main.svelte
 create mode 100644 test/runtime/samples/event-handler-dynamic-modifier-self/_config.js
 create mode 100644 test/runtime/samples/event-handler-dynamic-modifier-self/main.svelte
 create mode 100644 test/runtime/samples/event-handler-dynamic-modifier-stop-propagation/_config.js
 create mode 100644 test/runtime/samples/event-handler-dynamic-modifier-stop-propagation/main.svelte
 create mode 100644 test/runtime/samples/event-handler-dynamic-multiple/_config.js
 create mode 100644 test/runtime/samples/event-handler-dynamic-multiple/main.svelte
 create mode 100644 test/runtime/samples/event-handler-dynamic/_config.js
 create mode 100644 test/runtime/samples/event-handler-dynamic/main.svelte
 create mode 100644 test/runtime/samples/event-handler-each-context-invalidation/_config.js
 create mode 100644 test/runtime/samples/event-handler-each-context-invalidation/main.svelte
 create mode 100644 test/runtime/samples/event-handler-each-context/_config.js
 create mode 100644 test/runtime/samples/event-handler-each-context/main.svelte
 create mode 100644 test/runtime/samples/event-handler-each-deconflicted/_config.js
 create mode 100644 test/runtime/samples/event-handler-each-deconflicted/main.svelte
 create mode 100644 test/runtime/samples/event-handler-each-modifier/_config.js
 create mode 100644 test/runtime/samples/event-handler-each-modifier/main.svelte
 create mode 100644 test/runtime/samples/event-handler-each-this/_config.js
 create mode 100644 test/runtime/samples/event-handler-each-this/main.svelte
 create mode 100644 test/runtime/samples/event-handler-each/_config.js
 create mode 100644 test/runtime/samples/event-handler-each/main.svelte
 create mode 100644 test/runtime/samples/event-handler-event-methods/_config.js
 create mode 100644 test/runtime/samples/event-handler-event-methods/main.svelte
 create mode 100644 test/runtime/samples/event-handler-hoisted/_config.js
 create mode 100644 test/runtime/samples/event-handler-hoisted/main.svelte
 create mode 100644 test/runtime/samples/event-handler-modifier-body-once/_config.js
 create mode 100644 test/runtime/samples/event-handler-modifier-body-once/main.svelte
 create mode 100644 test/runtime/samples/event-handler-modifier-once/_config.js
 create mode 100644 test/runtime/samples/event-handler-modifier-once/main.svelte
 create mode 100644 test/runtime/samples/event-handler-modifier-prevent-default/_config.js
 create mode 100644 test/runtime/samples/event-handler-modifier-prevent-default/main.svelte
 create mode 100644 test/runtime/samples/event-handler-modifier-self/_config.js
 create mode 100644 test/runtime/samples/event-handler-modifier-self/main.svelte
 create mode 100644 test/runtime/samples/event-handler-modifier-stop-propagation/_config.js
 create mode 100644 test/runtime/samples/event-handler-modifier-stop-propagation/main.svelte
 create mode 100644 test/runtime/samples/event-handler-modifier-trusted/_config.js
 create mode 100644 test/runtime/samples/event-handler-modifier-trusted/main.svelte
 create mode 100644 test/runtime/samples/event-handler-multiple/_config.js
 create mode 100644 test/runtime/samples/event-handler-multiple/main.svelte
 create mode 100644 test/runtime/samples/event-handler-removal/_config.js
 create mode 100644 test/runtime/samples/event-handler-removal/main.svelte
 create mode 100644 test/runtime/samples/event-handler-sanitize/_config.js
 create mode 100644 test/runtime/samples/event-handler-sanitize/main.svelte
 create mode 100644 test/runtime/samples/event-handler-shorthand-component/Widget.svelte
 create mode 100644 test/runtime/samples/event-handler-shorthand-component/_config.js
 create mode 100644 test/runtime/samples/event-handler-shorthand-component/main.svelte
 create mode 100644 test/runtime/samples/event-handler-shorthand-dynamic-component/Widget.svelte
 create mode 100644 test/runtime/samples/event-handler-shorthand-dynamic-component/_config.js
 create mode 100644 test/runtime/samples/event-handler-shorthand-dynamic-component/main.svelte
 create mode 100644 test/runtime/samples/event-handler-shorthand-sanitized/_config.js
 create mode 100644 test/runtime/samples/event-handler-shorthand-sanitized/main.svelte
 create mode 100644 test/runtime/samples/event-handler-this-methods/_config.js
 create mode 100644 test/runtime/samples/event-handler-this-methods/main.svelte
 create mode 100644 test/runtime/samples/event-handler/_config.js
 create mode 100644 test/runtime/samples/event-handler/main.svelte
 create mode 100644 test/runtime/samples/export-from/A.svelte
 create mode 100644 test/runtime/samples/export-from/B.svelte
 create mode 100644 test/runtime/samples/export-from/_config.js
 create mode 100644 test/runtime/samples/export-from/main.svelte
 create mode 100644 test/runtime/samples/export-function-hoisting/_config.js
 create mode 100644 test/runtime/samples/export-function-hoisting/main.svelte
 create mode 100644 test/runtime/samples/flush-before-bindings/Nested.svelte
 create mode 100644 test/runtime/samples/flush-before-bindings/Visibility.svelte
 create mode 100644 test/runtime/samples/flush-before-bindings/_config.js
 create mode 100644 test/runtime/samples/flush-before-bindings/counter.js
 create mode 100644 test/runtime/samples/flush-before-bindings/main.svelte
 create mode 100644 test/runtime/samples/fragment-trailing-whitespace/_config.js
 create mode 100644 test/runtime/samples/fragment-trailing-whitespace/main.svelte
 create mode 100644 test/runtime/samples/function-expression-inline/_config.js
 create mode 100644 test/runtime/samples/function-expression-inline/main.svelte
 create mode 100644 test/runtime/samples/function-hoisting/_config.js
 create mode 100644 test/runtime/samples/function-hoisting/main.svelte
 create mode 100644 test/runtime/samples/function-in-expression/_config.js
 create mode 100644 test/runtime/samples/function-in-expression/main.svelte
 create mode 100644 test/runtime/samples/get-after-destroy/_config.js
 create mode 100644 test/runtime/samples/get-after-destroy/main.svelte
 create mode 100644 test/runtime/samples/globals-accessible-directly-process/_config.js
 create mode 100644 test/runtime/samples/globals-accessible-directly-process/main.svelte
 create mode 100644 test/runtime/samples/globals-accessible-directly/_config.js
 create mode 100644 test/runtime/samples/globals-accessible-directly/main.svelte
 create mode 100644 test/runtime/samples/globals-not-dereferenced/_config.js
 create mode 100644 test/runtime/samples/globals-not-dereferenced/main.svelte
 create mode 100644 test/runtime/samples/globals-not-overwritten-by-bindings/_config.js
 create mode 100644 test/runtime/samples/globals-not-overwritten-by-bindings/main.svelte
 create mode 100644 test/runtime/samples/globals-shadowed-by-data/_config.js
 create mode 100644 test/runtime/samples/globals-shadowed-by-data/main.svelte
 create mode 100644 test/runtime/samples/globals-shadowed-by-each-binding/_config.js
 create mode 100644 test/runtime/samples/globals-shadowed-by-each-binding/main.svelte
 create mode 100644 test/runtime/samples/globals-shadowed-by-helpers/_config.js
 create mode 100644 test/runtime/samples/globals-shadowed-by-helpers/main.svelte
 create mode 100644 test/runtime/samples/hash-in-attribute/_config.js
 create mode 100644 test/runtime/samples/hash-in-attribute/main.svelte
 create mode 100644 test/runtime/samples/head-detached-in-dynamic-component/A.svelte
 create mode 100644 test/runtime/samples/head-detached-in-dynamic-component/B.svelte
 create mode 100644 test/runtime/samples/head-detached-in-dynamic-component/_config.js
 create mode 100644 test/runtime/samples/head-detached-in-dynamic-component/main.svelte
 create mode 100644 test/runtime/samples/head-if-block/_config.js
 create mode 100644 test/runtime/samples/head-if-block/main.svelte
 create mode 100644 test/runtime/samples/head-if-else-block/_config.js
 create mode 100644 test/runtime/samples/head-if-else-block/main.svelte
 create mode 100644 test/runtime/samples/head-if-else-raw-dynamic/_config.js
 create mode 100644 test/runtime/samples/head-if-else-raw-dynamic/main.svelte
 create mode 100644 test/runtime/samples/head-raw-dynamic/Bar.svelte
 create mode 100644 test/runtime/samples/head-raw-dynamic/Foo.svelte
 create mode 100644 test/runtime/samples/head-raw-dynamic/_config.js
 create mode 100644 test/runtime/samples/head-raw-dynamic/main.svelte
 create mode 100644 test/runtime/samples/head-title-dynamic-simple/_config.js
 create mode 100644 test/runtime/samples/head-title-dynamic-simple/main.svelte
 create mode 100644 test/runtime/samples/head-title-dynamic/_config.js
 create mode 100644 test/runtime/samples/head-title-dynamic/main.svelte
 create mode 100644 test/runtime/samples/head-title-empty/_config.js
 create mode 100644 test/runtime/samples/head-title-empty/main.svelte
 create mode 100644 test/runtime/samples/head-title-static/_config.js
 create mode 100644 test/runtime/samples/head-title-static/main.svelte
 create mode 100644 test/runtime/samples/hello-world/_config.js
 create mode 100644 test/runtime/samples/hello-world/main.svelte
 create mode 100644 test/runtime/samples/helpers-not-call-expression/_config.js
 create mode 100644 test/runtime/samples/helpers-not-call-expression/main.svelte
 create mode 100644 test/runtime/samples/helpers/_config.js
 create mode 100644 test/runtime/samples/helpers/main.svelte
 create mode 100644 test/runtime/samples/html-entities-inside-elements/_config.js
 create mode 100644 test/runtime/samples/html-entities-inside-elements/main.svelte
 create mode 100644 test/runtime/samples/html-entities/_config.js
 create mode 100644 test/runtime/samples/html-entities/main.svelte
 create mode 100644 test/runtime/samples/html-non-entities-inside-elements/_config.js
 create mode 100644 test/runtime/samples/html-non-entities-inside-elements/main.svelte
 create mode 100644 test/runtime/samples/if-block-component-store-function-conditionals/Widget.svelte
 create mode 100644 test/runtime/samples/if-block-component-store-function-conditionals/_config.js
 create mode 100644 test/runtime/samples/if-block-component-store-function-conditionals/main.svelte
 create mode 100644 test/runtime/samples/if-block-component-without-outro/Widget.svelte
 create mode 100644 test/runtime/samples/if-block-component-without-outro/_config.js
 create mode 100644 test/runtime/samples/if-block-component-without-outro/main.svelte
 create mode 100644 test/runtime/samples/if-block-compound-outro-no-dependencies/_config.js
 create mode 100644 test/runtime/samples/if-block-compound-outro-no-dependencies/main.svelte
 create mode 100644 test/runtime/samples/if-block-conservative-update/_config.js
 create mode 100644 test/runtime/samples/if-block-conservative-update/main.svelte
 create mode 100644 test/runtime/samples/if-block-else-conservative-update/_config.js
 create mode 100644 test/runtime/samples/if-block-else-conservative-update/main.svelte
 create mode 100644 test/runtime/samples/if-block-else-in-each/_config.js
 create mode 100644 test/runtime/samples/if-block-else-in-each/main.svelte
 create mode 100644 test/runtime/samples/if-block-else-partial-outro/Foo.svelte
 create mode 100644 test/runtime/samples/if-block-else-partial-outro/_config.js
 create mode 100644 test/runtime/samples/if-block-else-partial-outro/main.svelte
 create mode 100644 test/runtime/samples/if-block-else-update/_config.js
 create mode 100644 test/runtime/samples/if-block-else-update/main.svelte
 create mode 100644 test/runtime/samples/if-block-else/_config.js
 create mode 100644 test/runtime/samples/if-block-else/main.svelte
 create mode 100644 test/runtime/samples/if-block-elseif-no-else/_config.js
 create mode 100644 test/runtime/samples/if-block-elseif-no-else/main.svelte
 create mode 100644 test/runtime/samples/if-block-elseif-text/_config.js
 create mode 100644 test/runtime/samples/if-block-elseif-text/main.svelte
 create mode 100644 test/runtime/samples/if-block-elseif/_config.js
 create mode 100644 test/runtime/samples/if-block-elseif/main.svelte
 create mode 100644 test/runtime/samples/if-block-expression/_config.js
 create mode 100644 test/runtime/samples/if-block-expression/main.svelte
 create mode 100644 test/runtime/samples/if-block-first/_config.js
 create mode 100644 test/runtime/samples/if-block-first/main.svelte
 create mode 100644 test/runtime/samples/if-block-no-outro-else-with-outro/Widget.svelte
 create mode 100644 test/runtime/samples/if-block-no-outro-else-with-outro/_config.js
 create mode 100644 test/runtime/samples/if-block-no-outro-else-with-outro/main.svelte
 create mode 100644 test/runtime/samples/if-block-or/_config.js
 create mode 100644 test/runtime/samples/if-block-or/main.svelte
 create mode 100644 test/runtime/samples/if-block-outro-computed-function/Foo.svelte
 create mode 100644 test/runtime/samples/if-block-outro-computed-function/_config.js
 create mode 100644 test/runtime/samples/if-block-outro-computed-function/main.svelte
 create mode 100644 test/runtime/samples/if-block-outro-nested-else/Component.svelte
 create mode 100644 test/runtime/samples/if-block-outro-nested-else/_config.js
 create mode 100644 test/runtime/samples/if-block-outro-nested-else/main.svelte
 create mode 100644 test/runtime/samples/if-block-outro-unique-select-block-type/Component.svelte
 create mode 100644 test/runtime/samples/if-block-outro-unique-select-block-type/_config.js
 create mode 100644 test/runtime/samples/if-block-outro-unique-select-block-type/main.svelte
 create mode 100644 test/runtime/samples/if-block-static-with-dynamic-contents/_config.js
 create mode 100644 test/runtime/samples/if-block-static-with-dynamic-contents/main.svelte
 create mode 100644 test/runtime/samples/if-block-static-with-else-and-outros/EEE.svelte
 create mode 100644 test/runtime/samples/if-block-static-with-else-and-outros/RRR.svelte
 create mode 100644 test/runtime/samples/if-block-static-with-else-and-outros/_config.js
 create mode 100644 test/runtime/samples/if-block-static-with-else-and-outros/main.svelte
 create mode 100644 test/runtime/samples/if-block-static-with-else/_config.js
 create mode 100644 test/runtime/samples/if-block-static-with-else/main.svelte
 create mode 100644 test/runtime/samples/if-block-static-with-elseif-else-and-outros/RRR.svelte
 create mode 100644 test/runtime/samples/if-block-static-with-elseif-else-and-outros/_config.js
 create mode 100644 test/runtime/samples/if-block-static-with-elseif-else-and-outros/main.svelte
 create mode 100644 test/runtime/samples/if-block-widget/Widget.svelte
 create mode 100644 test/runtime/samples/if-block-widget/_config.js
 create mode 100644 test/runtime/samples/if-block-widget/main.svelte
 create mode 100644 test/runtime/samples/if-block/_config.js
 create mode 100644 test/runtime/samples/if-block/main.svelte
 create mode 100644 test/runtime/samples/if-in-keyed-each/_config.js
 create mode 100644 test/runtime/samples/if-in-keyed-each/main.svelte
 create mode 100644 test/runtime/samples/ignore-unchanged-attribute-compound/_config.js
 create mode 100644 test/runtime/samples/ignore-unchanged-attribute-compound/counter.js
 create mode 100644 test/runtime/samples/ignore-unchanged-attribute-compound/main.svelte
 create mode 100644 test/runtime/samples/ignore-unchanged-attribute/_config.js
 create mode 100644 test/runtime/samples/ignore-unchanged-attribute/counter.js
 create mode 100644 test/runtime/samples/ignore-unchanged-attribute/main.svelte
 create mode 100644 test/runtime/samples/ignore-unchanged-raw/_config.js
 create mode 100644 test/runtime/samples/ignore-unchanged-raw/counter.js
 create mode 100644 test/runtime/samples/ignore-unchanged-raw/main.svelte
 create mode 100644 test/runtime/samples/ignore-unchanged-tag/_config.js
 create mode 100644 test/runtime/samples/ignore-unchanged-tag/counter.js
 create mode 100644 test/runtime/samples/ignore-unchanged-tag/main.svelte
 create mode 100644 test/runtime/samples/immutable-nested/Nested.svelte
 create mode 100644 test/runtime/samples/immutable-nested/_config.js
 create mode 100644 test/runtime/samples/immutable-nested/main.svelte
 create mode 100644 test/runtime/samples/immutable-option/_config.js
 create mode 100644 test/runtime/samples/immutable-option/main.svelte
 create mode 100644 test/runtime/samples/immutable-svelte-meta-false/_config.js
 create mode 100644 test/runtime/samples/immutable-svelte-meta-false/main.svelte
 create mode 100644 test/runtime/samples/immutable-svelte-meta/_config.js
 create mode 100644 test/runtime/samples/immutable-svelte-meta/main.svelte
 create mode 100644 test/runtime/samples/imported-renamed-components/ComponentOne.svelte
 create mode 100644 test/runtime/samples/imported-renamed-components/ComponentTwo.svelte
 create mode 100644 test/runtime/samples/imported-renamed-components/_config.js
 create mode 100644 test/runtime/samples/imported-renamed-components/main.svelte
 create mode 100644 test/runtime/samples/initial-state-assign/_config.js
 create mode 100644 test/runtime/samples/initial-state-assign/main.svelte
 create mode 100644 test/runtime/samples/inline-expressions/_config.js
 create mode 100644 test/runtime/samples/inline-expressions/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-and-style-attr-merged/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-and-style-attr-merged/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-and-style-attr/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-and-style-attr/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-css-vars/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-css-vars/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-dynamic/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-dynamic/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-multiple/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-multiple/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-shorthand/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-shorthand/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-spread-and-attr-empty/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-spread-and-attr-empty/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-spread-and-attr/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-spread-and-attr/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-spread-dynamic/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-spread-dynamic/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-spread/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-spread/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-string-variable-kebab-case/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-string-variable-kebab-case/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-string-variable/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-string-variable/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive-string/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive-string/main.svelte
 create mode 100644 test/runtime/samples/inline-style-directive/_config.js
 create mode 100644 test/runtime/samples/inline-style-directive/main.svelte
 create mode 100644 test/runtime/samples/inline-style-important/_config.js
 create mode 100644 test/runtime/samples/inline-style-important/main.svelte
 create mode 100644 test/runtime/samples/inline-style-optimisation-bailout/_config.js
 create mode 100644 test/runtime/samples/inline-style-optimisation-bailout/main.svelte
 create mode 100644 test/runtime/samples/inline-style/_config.js
 create mode 100644 test/runtime/samples/inline-style/main.svelte
 create mode 100644 test/runtime/samples/innerhtml-interpolated-literal/_config.js
 create mode 100644 test/runtime/samples/innerhtml-interpolated-literal/main.svelte
 create mode 100644 test/runtime/samples/innerhtml-with-comments/_config.js
 create mode 100644 test/runtime/samples/innerhtml-with-comments/main.svelte
 create mode 100644 test/runtime/samples/input-list/_config.js
 create mode 100644 test/runtime/samples/input-list/main.svelte
 create mode 100644 test/runtime/samples/instrumentation-auto-subscription-self-assignment/_config.js
 create mode 100644 test/runtime/samples/instrumentation-auto-subscription-self-assignment/main.svelte
 create mode 100644 test/runtime/samples/instrumentation-script-destructuring/_config.js
 create mode 100644 test/runtime/samples/instrumentation-script-destructuring/main.svelte
 create mode 100644 test/runtime/samples/instrumentation-script-loop-scope/_config.js
 create mode 100644 test/runtime/samples/instrumentation-script-loop-scope/main.svelte
 create mode 100644 test/runtime/samples/instrumentation-script-multiple-assignments/_config.js
 create mode 100644 test/runtime/samples/instrumentation-script-multiple-assignments/main.svelte
 create mode 100644 test/runtime/samples/instrumentation-script-update/_config.js
 create mode 100644 test/runtime/samples/instrumentation-script-update/main.svelte
 create mode 100644 test/runtime/samples/instrumentation-template-destructuring/_config.js
 create mode 100644 test/runtime/samples/instrumentation-template-destructuring/main.svelte
 create mode 100644 test/runtime/samples/instrumentation-template-loop-scope/_config.js
 create mode 100644 test/runtime/samples/instrumentation-template-loop-scope/main.svelte
 create mode 100644 test/runtime/samples/instrumentation-template-multiple-assignments/_config.js
 create mode 100644 test/runtime/samples/instrumentation-template-multiple-assignments/main.svelte
 create mode 100644 test/runtime/samples/instrumentation-template-update/_config.js
 create mode 100644 test/runtime/samples/instrumentation-template-update/main.svelte
 create mode 100644 test/runtime/samples/instrumentation-update-expression/_config.js
 create mode 100644 test/runtime/samples/instrumentation-update-expression/main.svelte
 create mode 100644 test/runtime/samples/internal-state/Foo.svelte
 create mode 100644 test/runtime/samples/internal-state/_config.js
 create mode 100644 test/runtime/samples/internal-state/main.svelte
 create mode 100644 test/runtime/samples/invalidation-in-if-condition/_config.js
 create mode 100644 test/runtime/samples/invalidation-in-if-condition/main.svelte
 create mode 100644 test/runtime/samples/isolated-text/_config.js
 create mode 100644 test/runtime/samples/isolated-text/main.svelte
 create mode 100644 test/runtime/samples/key-block-2/_config.js
 create mode 100644 test/runtime/samples/key-block-2/main.svelte
 create mode 100644 test/runtime/samples/key-block-3/_config.js
 create mode 100644 test/runtime/samples/key-block-3/main.svelte
 create mode 100644 test/runtime/samples/key-block-array-immutable/_config.js
 create mode 100644 test/runtime/samples/key-block-array-immutable/main.svelte
 create mode 100644 test/runtime/samples/key-block-array/_config.js
 create mode 100644 test/runtime/samples/key-block-array/main.svelte
 create mode 100644 test/runtime/samples/key-block-component-slot/Component1.svelte
 create mode 100644 test/runtime/samples/key-block-component-slot/Component2.svelte
 create mode 100644 test/runtime/samples/key-block-component-slot/_config.js
 create mode 100644 test/runtime/samples/key-block-component-slot/main.svelte
 create mode 100644 test/runtime/samples/key-block-expression-2/_config.js
 create mode 100644 test/runtime/samples/key-block-expression-2/main.svelte
 create mode 100644 test/runtime/samples/key-block-expression/_config.js
 create mode 100644 test/runtime/samples/key-block-expression/main.svelte
 create mode 100644 test/runtime/samples/key-block-post-hydrate/_config.js
 create mode 100644 test/runtime/samples/key-block-post-hydrate/main.svelte
 create mode 100644 test/runtime/samples/key-block-static-if/_config.js
 create mode 100644 test/runtime/samples/key-block-static-if/main.svelte
 create mode 100644 test/runtime/samples/key-block-static/_config.js
 create mode 100644 test/runtime/samples/key-block-static/main.svelte
 create mode 100644 test/runtime/samples/key-block-transition-local/_config.js
 create mode 100644 test/runtime/samples/key-block-transition-local/main.svelte
 create mode 100644 test/runtime/samples/key-block-transition/_config.js
 create mode 100644 test/runtime/samples/key-block-transition/main.svelte
 create mode 100644 test/runtime/samples/key-block/_config.js
 create mode 100644 test/runtime/samples/key-block/main.svelte
 create mode 100644 test/runtime/samples/keyed-each-dev-unique/_config.js
 create mode 100644 test/runtime/samples/keyed-each-dev-unique/main.svelte
 create mode 100644 test/runtime/samples/lifecycle-events/_config.js
 create mode 100644 test/runtime/samples/lifecycle-events/main.svelte
 create mode 100644 test/runtime/samples/lifecycle-next-tick/_config.js
 create mode 100644 test/runtime/samples/lifecycle-next-tick/main.svelte
 create mode 100644 test/runtime/samples/lifecycle-onmount-infinite-loop/Child.svelte
 create mode 100644 test/runtime/samples/lifecycle-onmount-infinite-loop/_config.js
 create mode 100644 test/runtime/samples/lifecycle-onmount-infinite-loop/main.svelte
 create mode 100755 test/runtime/samples/lifecycle-render-order-for-children/Item.svelte
 create mode 100644 test/runtime/samples/lifecycle-render-order-for-children/_config.js
 create mode 100644 test/runtime/samples/lifecycle-render-order-for-children/main.svelte
 create mode 100644 test/runtime/samples/lifecycle-render-order-for-children/order.js
 create mode 100644 test/runtime/samples/lifecycle-render-order/_config.js
 create mode 100644 test/runtime/samples/lifecycle-render-order/main.svelte
 create mode 100644 test/runtime/samples/lifecycle-render-order/order.js
 create mode 100644 test/runtime/samples/loop-protect-async-opt-out/_config.js
 create mode 100644 test/runtime/samples/loop-protect-async-opt-out/main.svelte
 create mode 100644 test/runtime/samples/loop-protect-generator-opt-out/_config.js
 create mode 100644 test/runtime/samples/loop-protect-generator-opt-out/main.svelte
 create mode 100644 test/runtime/samples/loop-protect-inner-function/_config.js
 create mode 100644 test/runtime/samples/loop-protect-inner-function/main.svelte
 create mode 100644 test/runtime/samples/loop-protect/_config.js
 create mode 100644 test/runtime/samples/loop-protect/main.svelte
 create mode 100644 test/runtime/samples/mixed-let-export/_config.js
 create mode 100644 test/runtime/samples/mixed-let-export/main.svelte
 create mode 100644 test/runtime/samples/module-context-bind/_config.js
 create mode 100644 test/runtime/samples/module-context-bind/main.svelte
 create mode 100644 test/runtime/samples/module-context-export/Foo.svelte
 create mode 100644 test/runtime/samples/module-context-export/_config.js
 create mode 100644 test/runtime/samples/module-context-export/main.svelte
 create mode 100644 test/runtime/samples/module-context-with-instance-script/_config.js
 create mode 100644 test/runtime/samples/module-context-with-instance-script/main.svelte
 create mode 100644 test/runtime/samples/module-context/_config.js
 create mode 100644 test/runtime/samples/module-context/main.svelte
 create mode 100644 test/runtime/samples/mutation-tracking-across-sibling-scopes/_config.js
 create mode 100644 test/runtime/samples/mutation-tracking-across-sibling-scopes/main.svelte
 create mode 100644 test/runtime/samples/names-deconflicted-nested/_config.js
 create mode 100644 test/runtime/samples/names-deconflicted-nested/main.svelte
 create mode 100644 test/runtime/samples/names-deconflicted/Widget.svelte
 create mode 100644 test/runtime/samples/names-deconflicted/_config.js
 create mode 100644 test/runtime/samples/names-deconflicted/main.svelte
 create mode 100644 test/runtime/samples/nbsp-div/_config.js
 create mode 100644 test/runtime/samples/nbsp-div/main.svelte
 create mode 100644 test/runtime/samples/nbsp/_config.js
 create mode 100644 test/runtime/samples/nbsp/main.svelte
 create mode 100644 test/runtime/samples/nested-transition-detach-each/_config.js
 create mode 100644 test/runtime/samples/nested-transition-detach-each/main.svelte
 create mode 100644 test/runtime/samples/nested-transition-detach-if-false/Folder.svelte
 create mode 100644 test/runtime/samples/nested-transition-detach-if-false/_config.js
 create mode 100644 test/runtime/samples/nested-transition-detach-if-false/main.svelte
 create mode 100644 test/runtime/samples/nested-transition-if-block-not-remounted/Span.svelte
 create mode 100644 test/runtime/samples/nested-transition-if-block-not-remounted/_config.js
 create mode 100644 test/runtime/samples/nested-transition-if-block-not-remounted/main.svelte
 create mode 100644 test/runtime/samples/noscript-removal/_config.js
 create mode 100644 test/runtime/samples/noscript-removal/main.svelte
 create mode 100644 test/runtime/samples/observable-auto-subscribe/Nested.svelte
 create mode 100644 test/runtime/samples/observable-auto-subscribe/_config.js
 create mode 100644 test/runtime/samples/observable-auto-subscribe/main.svelte
 create mode 100644 test/runtime/samples/ondestroy-before-cleanup/Top.svelte
 create mode 100644 test/runtime/samples/ondestroy-before-cleanup/_config.js
 create mode 100644 test/runtime/samples/ondestroy-before-cleanup/container.js
 create mode 100644 test/runtime/samples/ondestroy-before-cleanup/main.svelte
 create mode 100644 test/runtime/samples/ondestroy-deep/A.svelte
 create mode 100644 test/runtime/samples/ondestroy-deep/B.svelte
 create mode 100644 test/runtime/samples/ondestroy-deep/C.svelte
 create mode 100644 test/runtime/samples/ondestroy-deep/_config.js
 create mode 100644 test/runtime/samples/ondestroy-deep/destroyed.js
 create mode 100644 test/runtime/samples/ondestroy-deep/main.svelte
 create mode 100644 test/runtime/samples/onmount-async/_config.js
 create mode 100644 test/runtime/samples/onmount-async/main.svelte
 create mode 100644 test/runtime/samples/onmount-fires-when-ready-nested/ParentWidget.svelte
 create mode 100644 test/runtime/samples/onmount-fires-when-ready-nested/Widget.svelte
 create mode 100644 test/runtime/samples/onmount-fires-when-ready-nested/_config.js
 create mode 100644 test/runtime/samples/onmount-fires-when-ready-nested/main.svelte
 create mode 100644 test/runtime/samples/onmount-fires-when-ready/Widget.svelte
 create mode 100644 test/runtime/samples/onmount-fires-when-ready/_config.js
 create mode 100644 test/runtime/samples/onmount-fires-when-ready/main.svelte
 create mode 100644 test/runtime/samples/onmount-get-current-component/_config.js
 create mode 100644 test/runtime/samples/onmount-get-current-component/main.svelte
 create mode 100644 test/runtime/samples/onmount-sibling-order/Nested.svelte
 create mode 100644 test/runtime/samples/onmount-sibling-order/_config.js
 create mode 100644 test/runtime/samples/onmount-sibling-order/main.svelte
 create mode 100644 test/runtime/samples/onmount-sibling-order/result.js
 create mode 100644 test/runtime/samples/option-without-select/_config.js
 create mode 100644 test/runtime/samples/option-without-select/main.svelte
 create mode 100644 test/runtime/samples/paren-wrapped-expressions/_config.js
 create mode 100644 test/runtime/samples/paren-wrapped-expressions/main.svelte
 create mode 100644 test/runtime/samples/pre-tag/.editorconfig
 create mode 100644 test/runtime/samples/pre-tag/_config.js
 create mode 100644 test/runtime/samples/pre-tag/main.svelte
 create mode 100644 test/runtime/samples/preload/_config.js
 create mode 100644 test/runtime/samples/preload/main.svelte
 create mode 100644 test/runtime/samples/preserve-whitespaces/_config.js
 create mode 100644 test/runtime/samples/preserve-whitespaces/main.svelte
 create mode 100644 test/runtime/samples/prop-accessors/_config.js
 create mode 100644 test/runtime/samples/prop-accessors/main.svelte
 create mode 100644 test/runtime/samples/prop-const/Nested.svelte
 create mode 100644 test/runtime/samples/prop-const/_config.js
 create mode 100644 test/runtime/samples/prop-const/main.svelte
 create mode 100644 test/runtime/samples/prop-exports/_config.js
 create mode 100644 test/runtime/samples/prop-exports/main.svelte
 create mode 100644 test/runtime/samples/prop-not-action/Nested.svelte
 create mode 100644 test/runtime/samples/prop-not-action/_config.js
 create mode 100644 test/runtime/samples/prop-not-action/main.svelte
 create mode 100644 test/runtime/samples/prop-quoted/Nested.svelte
 create mode 100644 test/runtime/samples/prop-quoted/_config.js
 create mode 100644 test/runtime/samples/prop-quoted/main.svelte
 create mode 100644 test/runtime/samples/prop-subscribable/_config.js
 create mode 100644 test/runtime/samples/prop-subscribable/main.svelte
 create mode 100644 test/runtime/samples/prop-without-semicolon-b/_config.js
 create mode 100644 test/runtime/samples/prop-without-semicolon-b/main.svelte
 create mode 100644 test/runtime/samples/prop-without-semicolon/_config.js
 create mode 100644 test/runtime/samples/prop-without-semicolon/main.svelte
 create mode 100644 test/runtime/samples/props-reactive-b/_config.js
 create mode 100644 test/runtime/samples/props-reactive-b/main.svelte
 create mode 100644 test/runtime/samples/props-reactive-only-with-change/Comp.svelte
 create mode 100644 test/runtime/samples/props-reactive-only-with-change/_config.js
 create mode 100644 test/runtime/samples/props-reactive-only-with-change/main.svelte
 create mode 100644 test/runtime/samples/props-reactive-slot/Comp.svelte
 create mode 100644 test/runtime/samples/props-reactive-slot/_config.js
 create mode 100644 test/runtime/samples/props-reactive-slot/main.svelte
 create mode 100644 test/runtime/samples/props-reactive/Nested.svelte
 create mode 100644 test/runtime/samples/props-reactive/_config.js
 create mode 100644 test/runtime/samples/props-reactive/main.svelte
 create mode 100644 test/runtime/samples/props/RenderProps.svelte
 create mode 100644 test/runtime/samples/props/_config.js
 create mode 100644 test/runtime/samples/props/main.svelte
 create mode 100644 test/runtime/samples/raw-anchor-first-child/_config.js
 create mode 100644 test/runtime/samples/raw-anchor-first-child/main.svelte
 create mode 100644 test/runtime/samples/raw-anchor-first-last-child/_config.js
 create mode 100644 test/runtime/samples/raw-anchor-first-last-child/main.svelte
 create mode 100644 test/runtime/samples/raw-anchor-last-child/_config.js
 create mode 100644 test/runtime/samples/raw-anchor-last-child/main.svelte
 create mode 100644 test/runtime/samples/raw-anchor-next-previous-sibling/_config.js
 create mode 100644 test/runtime/samples/raw-anchor-next-previous-sibling/main.svelte
 create mode 100644 test/runtime/samples/raw-anchor-next-sibling/_config.js
 create mode 100644 test/runtime/samples/raw-anchor-next-sibling/main.svelte
 create mode 100644 test/runtime/samples/raw-anchor-previous-sibling/_config.js
 create mode 100644 test/runtime/samples/raw-anchor-previous-sibling/main.svelte
 create mode 100644 test/runtime/samples/raw-mustache-as-root/RawMustache.svelte
 create mode 100644 test/runtime/samples/raw-mustache-as-root/_config.js
 create mode 100644 test/runtime/samples/raw-mustache-as-root/main.svelte
 create mode 100644 test/runtime/samples/raw-mustache-before-element/_config.js
 create mode 100644 test/runtime/samples/raw-mustache-before-element/main.svelte
 create mode 100644 test/runtime/samples/raw-mustache-inside-head/_config.js
 create mode 100644 test/runtime/samples/raw-mustache-inside-head/main.svelte
 create mode 100644 test/runtime/samples/raw-mustache-inside-slot/Component.svelte
 create mode 100644 test/runtime/samples/raw-mustache-inside-slot/_config.js
 create mode 100644 test/runtime/samples/raw-mustache-inside-slot/main.svelte
 create mode 100644 test/runtime/samples/raw-mustaches-preserved/_config.js
 create mode 100644 test/runtime/samples/raw-mustaches-preserved/main.svelte
 create mode 100644 test/runtime/samples/raw-mustaches-td-tr/_config.js
 create mode 100644 test/runtime/samples/raw-mustaches-td-tr/main.svelte
 create mode 100644 test/runtime/samples/raw-mustaches/_config.js
 create mode 100644 test/runtime/samples/raw-mustaches/main.svelte
 create mode 100644 test/runtime/samples/reactive-assignment-in-assignment-rhs/_config.js
 create mode 100644 test/runtime/samples/reactive-assignment-in-assignment-rhs/main.svelte
 create mode 100644 test/runtime/samples/reactive-assignment-in-complex-declaration-with-store-2/_config.js
 create mode 100644 test/runtime/samples/reactive-assignment-in-complex-declaration-with-store-2/main.svelte
 create mode 100644 test/runtime/samples/reactive-assignment-in-complex-declaration-with-store-3/_config.js
 create mode 100644 test/runtime/samples/reactive-assignment-in-complex-declaration-with-store-3/main.svelte
 create mode 100644 test/runtime/samples/reactive-assignment-in-complex-declaration-with-store-3/store.js
 create mode 100644 test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/_config.js
 create mode 100644 test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/main.svelte
 create mode 100644 test/runtime/samples/reactive-assignment-in-complex-declaration/_config.js
 create mode 100644 test/runtime/samples/reactive-assignment-in-complex-declaration/main.svelte
 create mode 100644 test/runtime/samples/reactive-assignment-in-declaration/_config.js
 create mode 100644 test/runtime/samples/reactive-assignment-in-declaration/main.svelte
 create mode 100644 test/runtime/samples/reactive-assignment-in-for-loop-head/_config.js
 create mode 100644 test/runtime/samples/reactive-assignment-in-for-loop-head/main.svelte
 create mode 100644 test/runtime/samples/reactive-block-break/_config.js
 create mode 100644 test/runtime/samples/reactive-block-break/main.svelte
 create mode 100644 test/runtime/samples/reactive-compound-operator/_config.js
 create mode 100644 test/runtime/samples/reactive-compound-operator/main.svelte
 create mode 100644 test/runtime/samples/reactive-function-called-reassigned/_config.js
 create mode 100644 test/runtime/samples/reactive-function-called-reassigned/main.svelte
 create mode 100644 test/runtime/samples/reactive-function-inline/_config.js
 create mode 100644 test/runtime/samples/reactive-function-inline/main.svelte
 create mode 100644 test/runtime/samples/reactive-function/_config.js
 create mode 100644 test/runtime/samples/reactive-function/main.svelte
 create mode 100644 test/runtime/samples/reactive-import-statement-2/_config.js
 create mode 100644 test/runtime/samples/reactive-import-statement-2/data.js
 create mode 100644 test/runtime/samples/reactive-import-statement-2/main.svelte
 create mode 100644 test/runtime/samples/reactive-import-statement/_config.js
 create mode 100644 test/runtime/samples/reactive-import-statement/data.js
 create mode 100644 test/runtime/samples/reactive-import-statement/main.svelte
 create mode 100644 test/runtime/samples/reactive-statement-module-vars/_config.js
 create mode 100644 test/runtime/samples/reactive-statement-module-vars/main.svelte
 create mode 100644 test/runtime/samples/reactive-update-expression/_config.js
 create mode 100644 test/runtime/samples/reactive-update-expression/main.svelte
 create mode 100644 test/runtime/samples/reactive-value-assign-property/_config.js
 create mode 100644 test/runtime/samples/reactive-value-assign-property/main.svelte
 create mode 100644 test/runtime/samples/reactive-value-coerce-precedence/_config.js
 create mode 100644 test/runtime/samples/reactive-value-coerce-precedence/main.svelte
 create mode 100644 test/runtime/samples/reactive-value-coerce/_config.js
 create mode 100644 test/runtime/samples/reactive-value-coerce/main.svelte
 create mode 100644 test/runtime/samples/reactive-value-dependency-not-referenced/_config.js
 create mode 100644 test/runtime/samples/reactive-value-dependency-not-referenced/main.svelte
 create mode 100644 test/runtime/samples/reactive-value-function-hoist-b/_config.js
 create mode 100644 test/runtime/samples/reactive-value-function-hoist-b/main.svelte
 create mode 100644 test/runtime/samples/reactive-value-function-hoist/_config.js
 create mode 100644 test/runtime/samples/reactive-value-function-hoist/main.svelte
 create mode 100644 test/runtime/samples/reactive-value-function/_config.js
 create mode 100644 test/runtime/samples/reactive-value-function/main.svelte
 create mode 100644 test/runtime/samples/reactive-value-mutate-const/_config.js
 create mode 100644 test/runtime/samples/reactive-value-mutate-const/main.svelte
 create mode 100644 test/runtime/samples/reactive-value-mutate/_config.js
 create mode 100644 test/runtime/samples/reactive-value-mutate/main.svelte
 create mode 100644 test/runtime/samples/reactive-values-deconflicted/_config.js
 create mode 100644 test/runtime/samples/reactive-values-deconflicted/main.svelte
 create mode 100644 test/runtime/samples/reactive-values-exported/_config.js
 create mode 100644 test/runtime/samples/reactive-values-exported/main.svelte
 create mode 100644 test/runtime/samples/reactive-values-fixed/_config.js
 create mode 100644 test/runtime/samples/reactive-values-fixed/main.svelte
 create mode 100644 test/runtime/samples/reactive-values-function-dependency/_config.js
 create mode 100644 test/runtime/samples/reactive-values-function-dependency/main.svelte
 create mode 100644 test/runtime/samples/reactive-values-implicit-destructured/_config.js
 create mode 100644 test/runtime/samples/reactive-values-implicit-destructured/main.svelte
 create mode 100644 test/runtime/samples/reactive-values-implicit-self-dependency/_config.js
 create mode 100644 test/runtime/samples/reactive-values-implicit-self-dependency/main.svelte
 create mode 100644 test/runtime/samples/reactive-values-implicit/_config.js
 create mode 100644 test/runtime/samples/reactive-values-implicit/main.svelte
 create mode 100644 test/runtime/samples/reactive-values-no-dependencies/_config.js
 create mode 100644 test/runtime/samples/reactive-values-no-dependencies/main.svelte
 create mode 100644 test/runtime/samples/reactive-values-no-implicit-member-expression/_config.js
 create mode 100644 test/runtime/samples/reactive-values-no-implicit-member-expression/main.svelte
 create mode 100644 test/runtime/samples/reactive-values-non-cyclical-declaration-order-independent/_config.js
 create mode 100644 test/runtime/samples/reactive-values-non-cyclical-declaration-order-independent/main.svelte
 create mode 100644 test/runtime/samples/reactive-values-non-cyclical/_config.js
 create mode 100644 test/runtime/samples/reactive-values-non-cyclical/main.svelte
 create mode 100644 test/runtime/samples/reactive-values-overwrite/_config.js
 create mode 100644 test/runtime/samples/reactive-values-overwrite/main.svelte
 create mode 100644 test/runtime/samples/reactive-values-second-order/_config.js
 create mode 100644 test/runtime/samples/reactive-values-second-order/main.svelte
 create mode 100644 test/runtime/samples/reactive-values-self-dependency-b/_config.js
 create mode 100644 test/runtime/samples/reactive-values-self-dependency-b/main.svelte
 create mode 100644 test/runtime/samples/reactive-values-self-dependency/_config.js
 create mode 100644 test/runtime/samples/reactive-values-self-dependency/main.svelte
 create mode 100644 test/runtime/samples/reactive-values-store-destructured-undefined/_config.js
 create mode 100644 test/runtime/samples/reactive-values-store-destructured-undefined/main.svelte
 create mode 100644 test/runtime/samples/reactive-values-subscript-assignment/_config.js
 create mode 100644 test/runtime/samples/reactive-values-subscript-assignment/main.svelte
 create mode 100644 test/runtime/samples/reactive-values-uninitialised/_config.js
 create mode 100644 test/runtime/samples/reactive-values-uninitialised/main.svelte
 create mode 100644 test/runtime/samples/reactive-values/_config.js
 create mode 100644 test/runtime/samples/reactive-values/main.svelte
 create mode 100644 test/runtime/samples/renamed-instance-exports/_config.js
 create mode 100644 test/runtime/samples/renamed-instance-exports/main.svelte
 create mode 100644 test/runtime/samples/script-style-non-top-level/_config.js
 create mode 100644 test/runtime/samples/script-style-non-top-level/main.svelte
 create mode 100644 test/runtime/samples/select-bind-array/_config.js
 create mode 100644 test/runtime/samples/select-bind-array/main.svelte
 create mode 100644 test/runtime/samples/select-bind-in-array/_config.js
 create mode 100644 test/runtime/samples/select-bind-in-array/main.svelte
 create mode 100644 test/runtime/samples/select-change-handler/_config.js
 create mode 100644 test/runtime/samples/select-change-handler/main.svelte
 create mode 100644 test/runtime/samples/select-no-whitespace/_config.js
 create mode 100644 test/runtime/samples/select-no-whitespace/main.svelte
 create mode 100644 test/runtime/samples/select-one-way-bind-object/_config.js
 create mode 100644 test/runtime/samples/select-one-way-bind-object/main.svelte
 create mode 100644 test/runtime/samples/select-one-way-bind/_config.js
 create mode 100644 test/runtime/samples/select-one-way-bind/main.svelte
 create mode 100644 test/runtime/samples/select-props/_config.js
 create mode 100644 test/runtime/samples/select-props/main.svelte
 create mode 100644 test/runtime/samples/select/_config.js
 create mode 100644 test/runtime/samples/select/main.svelte
 create mode 100644 test/runtime/samples/self-reference-component/Countdown.svelte
 create mode 100644 test/runtime/samples/self-reference-component/_config.js
 create mode 100644 test/runtime/samples/self-reference-component/main.svelte
 create mode 100644 test/runtime/samples/self-reference-tree/_config.js
 create mode 100644 test/runtime/samples/self-reference-tree/main.svelte
 create mode 100644 test/runtime/samples/self-reference/_config.js
 create mode 100644 test/runtime/samples/self-reference/main.svelte
 create mode 100644 test/runtime/samples/semicolon-hoisting/_config.js
 create mode 100644 test/runtime/samples/semicolon-hoisting/main.svelte
 create mode 100644 test/runtime/samples/set-after-destroy/_config.js
 create mode 100644 test/runtime/samples/set-after-destroy/main.svelte
 create mode 100644 test/runtime/samples/set-in-oncreate/_config.js
 create mode 100644 test/runtime/samples/set-in-oncreate/main.svelte
 create mode 100644 test/runtime/samples/set-in-onstate-dedupes-renders/Widget.svelte
 create mode 100644 test/runtime/samples/set-in-onstate-dedupes-renders/_config.js
 create mode 100644 test/runtime/samples/set-in-onstate-dedupes-renders/main.svelte
 create mode 100644 test/runtime/samples/set-in-onstate/_config.js
 create mode 100644 test/runtime/samples/set-in-onstate/main.svelte
 create mode 100644 test/runtime/samples/set-null-text-node/_config.js
 create mode 100644 test/runtime/samples/set-null-text-node/main.svelte
 create mode 100644 test/runtime/samples/set-prevents-loop/Foo.svelte
 create mode 100644 test/runtime/samples/set-prevents-loop/_config.js
 create mode 100644 test/runtime/samples/set-prevents-loop/main.svelte
 create mode 100644 test/runtime/samples/set-undefined-attr/_config.js
 create mode 100644 test/runtime/samples/set-undefined-attr/main.svelte
 create mode 100644 test/runtime/samples/shorthand-method-in-template/Foo.svelte
 create mode 100644 test/runtime/samples/shorthand-method-in-template/_config.js
 create mode 100644 test/runtime/samples/shorthand-method-in-template/main.svelte
 create mode 100644 test/runtime/samples/sigil-component-prop/Widget.svelte
 create mode 100644 test/runtime/samples/sigil-component-prop/_config.js
 create mode 100644 test/runtime/samples/sigil-component-prop/main.svelte
 create mode 100644 test/runtime/samples/sigil-expression-function-body/_config.js
 create mode 100644 test/runtime/samples/sigil-expression-function-body/main.svelte
 create mode 100644 test/runtime/samples/sigil-static-#/_config.js
 create mode 100644 test/runtime/samples/sigil-static-#/main.svelte
 create mode 100644 test/runtime/samples/sigil-static-@/_config.js
 create mode 100644 test/runtime/samples/sigil-static-@/main.svelte
 create mode 100644 test/runtime/samples/single-static-element/_config.js
 create mode 100644 test/runtime/samples/single-static-element/main.svelte
 create mode 100644 test/runtime/samples/single-text-node/_config.js
 create mode 100644 test/runtime/samples/single-text-node/main.svelte
 create mode 100644 test/runtime/samples/slot-if-block-update-no-anchor/_config.js
 create mode 100644 test/runtime/samples/slot-if-block-update-no-anchor/main.svelte
 create mode 100644 test/runtime/samples/slot-in-custom-element/_config.js
 create mode 100644 test/runtime/samples/slot-in-custom-element/main.svelte
 create mode 100644 test/runtime/samples/spread-component-2/Widget.svelte
 create mode 100644 test/runtime/samples/spread-component-2/_config.js
 create mode 100644 test/runtime/samples/spread-component-2/main.svelte
 create mode 100644 test/runtime/samples/spread-component-dynamic-non-object-multiple-dependencies/Widget.svelte
 create mode 100644 test/runtime/samples/spread-component-dynamic-non-object-multiple-dependencies/_config.js
 create mode 100644 test/runtime/samples/spread-component-dynamic-non-object-multiple-dependencies/main.svelte
 create mode 100644 test/runtime/samples/spread-component-dynamic-non-object/Widget.svelte
 create mode 100644 test/runtime/samples/spread-component-dynamic-non-object/_config.js
 create mode 100644 test/runtime/samples/spread-component-dynamic-non-object/main.svelte
 create mode 100644 test/runtime/samples/spread-component-dynamic-undefined/_config.js
 create mode 100644 test/runtime/samples/spread-component-dynamic-undefined/main.svelte
 create mode 100644 test/runtime/samples/spread-component-dynamic/Foo.svelte
 create mode 100644 test/runtime/samples/spread-component-dynamic/_config.js
 create mode 100644 test/runtime/samples/spread-component-dynamic/main.svelte
 create mode 100644 test/runtime/samples/spread-component-literal/Widget.svelte
 create mode 100644 test/runtime/samples/spread-component-literal/_config.js
 create mode 100644 test/runtime/samples/spread-component-literal/main.svelte
 create mode 100644 test/runtime/samples/spread-component-multiple-dependencies/Widget.svelte
 create mode 100644 test/runtime/samples/spread-component-multiple-dependencies/_config.js
 create mode 100644 test/runtime/samples/spread-component-multiple-dependencies/main.svelte
 create mode 100644 test/runtime/samples/spread-component-side-effects/Widget.svelte
 create mode 100644 test/runtime/samples/spread-component-side-effects/_config.js
 create mode 100644 test/runtime/samples/spread-component-side-effects/main.svelte
 create mode 100644 test/runtime/samples/spread-component-with-bind/Widget.svelte
 create mode 100644 test/runtime/samples/spread-component-with-bind/_config.js
 create mode 100644 test/runtime/samples/spread-component-with-bind/main.svelte
 create mode 100644 test/runtime/samples/spread-component/Widget.svelte
 create mode 100644 test/runtime/samples/spread-component/_config.js
 create mode 100644 test/runtime/samples/spread-component/main.svelte
 create mode 100644 test/runtime/samples/spread-each-component/Nested.svelte
 create mode 100644 test/runtime/samples/spread-each-component/_config.js
 create mode 100644 test/runtime/samples/spread-each-component/main.svelte
 create mode 100644 test/runtime/samples/spread-each-element/_config.js
 create mode 100644 test/runtime/samples/spread-each-element/main.svelte
 create mode 100644 test/runtime/samples/spread-element-boolean/_config.js
 create mode 100644 test/runtime/samples/spread-element-boolean/main.svelte
 create mode 100644 test/runtime/samples/spread-element-class/_config.js
 create mode 100644 test/runtime/samples/spread-element-class/main.svelte
 create mode 100644 test/runtime/samples/spread-element-input-bind-group-with-value-attr/_config.js
 create mode 100644 test/runtime/samples/spread-element-input-bind-group-with-value-attr/main.svelte
 create mode 100644 test/runtime/samples/spread-element-input-select-multiple/_config.js
 create mode 100644 test/runtime/samples/spread-element-input-select-multiple/main.svelte
 create mode 100644 test/runtime/samples/spread-element-input-select/_config.js
 create mode 100644 test/runtime/samples/spread-element-input-select/main.svelte
 create mode 100644 test/runtime/samples/spread-element-input-value-undefined/_config.js
 create mode 100644 test/runtime/samples/spread-element-input-value-undefined/main.svelte
 create mode 100644 test/runtime/samples/spread-element-input-value/InputOne.svelte
 create mode 100644 test/runtime/samples/spread-element-input-value/InputTwo.svelte
 create mode 100644 test/runtime/samples/spread-element-input-value/_config.js
 create mode 100644 test/runtime/samples/spread-element-input-value/main.svelte
 create mode 100644 test/runtime/samples/spread-element-input-value/utils.js
 create mode 100644 test/runtime/samples/spread-element-input/_config.js
 create mode 100644 test/runtime/samples/spread-element-input/main.svelte
 create mode 100644 test/runtime/samples/spread-element-multiple-dependencies/_config.js
 create mode 100644 test/runtime/samples/spread-element-multiple-dependencies/main.svelte
 create mode 100644 test/runtime/samples/spread-element-multiple/_config.js
 create mode 100644 test/runtime/samples/spread-element-multiple/main.svelte
 create mode 100644 test/runtime/samples/spread-element-readonly/_config.js
 create mode 100644 test/runtime/samples/spread-element-readonly/main.svelte
 create mode 100644 test/runtime/samples/spread-element-removal/_config.js
 create mode 100644 test/runtime/samples/spread-element-removal/main.svelte
 create mode 100644 test/runtime/samples/spread-element-scope/_config.js
 create mode 100644 test/runtime/samples/spread-element-scope/main.svelte
 create mode 100644 test/runtime/samples/spread-element-select-value-undefined/Select.svelte
 create mode 100644 test/runtime/samples/spread-element-select-value-undefined/_config.js
 create mode 100644 test/runtime/samples/spread-element-select-value-undefined/main.svelte
 create mode 100644 test/runtime/samples/spread-element/_config.js
 create mode 100644 test/runtime/samples/spread-element/main.svelte
 create mode 100644 test/runtime/samples/spread-own-props/Widget.svelte
 create mode 100644 test/runtime/samples/spread-own-props/_config.js
 create mode 100644 test/runtime/samples/spread-own-props/main.svelte
 create mode 100644 test/runtime/samples/spread-reuse-levels/Nested.svelte
 create mode 100644 test/runtime/samples/spread-reuse-levels/_config.js
 create mode 100644 test/runtime/samples/spread-reuse-levels/main.svelte
 create mode 100644 test/runtime/samples/spring/_config.js
 create mode 100644 test/runtime/samples/spring/main.svelte
 create mode 100644 test/runtime/samples/state-deconflicted/_config.js
 create mode 100644 test/runtime/samples/state-deconflicted/main.svelte
 create mode 100644 test/runtime/samples/store-assignment-updates-destructure/_config.js
 create mode 100644 test/runtime/samples/store-assignment-updates-destructure/main.svelte
 create mode 100644 test/runtime/samples/store-assignment-updates-property/_config.js
 create mode 100644 test/runtime/samples/store-assignment-updates-property/main.svelte
 create mode 100644 test/runtime/samples/store-assignment-updates-reactive/_config.js
 create mode 100644 test/runtime/samples/store-assignment-updates-reactive/main.svelte
 create mode 100644 test/runtime/samples/store-assignment-updates/_config.js
 create mode 100644 test/runtime/samples/store-assignment-updates/main.svelte
 create mode 100644 test/runtime/samples/store-auto-resubscribe-immediate/_config.js
 create mode 100644 test/runtime/samples/store-auto-resubscribe-immediate/main.svelte
 create mode 100644 test/runtime/samples/store-auto-subscribe-event-callback/_config.js
 create mode 100644 test/runtime/samples/store-auto-subscribe-event-callback/main.svelte
 create mode 100644 test/runtime/samples/store-auto-subscribe-immediate-multiple-vars/_config.js
 create mode 100644 test/runtime/samples/store-auto-subscribe-immediate-multiple-vars/main.svelte
 create mode 100644 test/runtime/samples/store-auto-subscribe-immediate/_config.js
 create mode 100644 test/runtime/samples/store-auto-subscribe-immediate/main.svelte
 create mode 100644 test/runtime/samples/store-auto-subscribe-implicit/_config.js
 create mode 100644 test/runtime/samples/store-auto-subscribe-implicit/main.svelte
 create mode 100644 test/runtime/samples/store-auto-subscribe-in-each/_config.js
 create mode 100644 test/runtime/samples/store-auto-subscribe-in-each/main.svelte
 create mode 100644 test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/App.svelte
 create mode 100644 test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/_config.js
 create mode 100644 test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/main.svelte
 create mode 100644 test/runtime/samples/store-auto-subscribe-in-reactive-declaration/_config.js
 create mode 100644 test/runtime/samples/store-auto-subscribe-in-reactive-declaration/main.svelte
 create mode 100644 test/runtime/samples/store-auto-subscribe-in-script/_config.js
 create mode 100644 test/runtime/samples/store-auto-subscribe-in-script/main.svelte
 create mode 100644 test/runtime/samples/store-auto-subscribe-missing-global-script/_config.js
 create mode 100644 test/runtime/samples/store-auto-subscribe-missing-global-script/main.svelte
 create mode 100644 test/runtime/samples/store-auto-subscribe-missing-global-template/_config.js
 create mode 100644 test/runtime/samples/store-auto-subscribe-missing-global-template/main.svelte
 create mode 100644 test/runtime/samples/store-auto-subscribe-nullish/_config.js
 create mode 100644 test/runtime/samples/store-auto-subscribe-nullish/main.svelte
 create mode 100644 test/runtime/samples/store-auto-subscribe/_config.js
 create mode 100644 test/runtime/samples/store-auto-subscribe/main.svelte
 create mode 100644 test/runtime/samples/store-contextual/_config.js
 create mode 100644 test/runtime/samples/store-contextual/main.svelte
 create mode 100644 test/runtime/samples/store-dev-mode-error/_config.js
 create mode 100644 test/runtime/samples/store-dev-mode-error/main.svelte
 create mode 100644 test/runtime/samples/store-each-binding-deep/_config.js
 create mode 100644 test/runtime/samples/store-each-binding-deep/main.svelte
 create mode 100644 test/runtime/samples/store-each-binding-destructuring/_config.js
 create mode 100644 test/runtime/samples/store-each-binding-destructuring/main.svelte
 create mode 100644 test/runtime/samples/store-each-binding/_config.js
 create mode 100644 test/runtime/samples/store-each-binding/main.svelte
 create mode 100644 test/runtime/samples/store-imported-module-b/_config.js
 create mode 100644 test/runtime/samples/store-imported-module-b/foo.js
 create mode 100644 test/runtime/samples/store-imported-module-b/main.svelte
 create mode 100644 test/runtime/samples/store-imported-module/_config.js
 create mode 100644 test/runtime/samples/store-imported-module/foo.js
 create mode 100644 test/runtime/samples/store-imported-module/main.svelte
 create mode 100644 test/runtime/samples/store-imported/_config.js
 create mode 100644 test/runtime/samples/store-imported/foo.js
 create mode 100644 test/runtime/samples/store-imported/main.svelte
 create mode 100644 test/runtime/samples/store-imports-hoisted/_config.js
 create mode 100644 test/runtime/samples/store-imports-hoisted/foo.js
 create mode 100644 test/runtime/samples/store-imports-hoisted/main.svelte
 create mode 100644 test/runtime/samples/store-increment-updates-reactive/_config.js
 create mode 100644 test/runtime/samples/store-increment-updates-reactive/main.svelte
 create mode 100644 test/runtime/samples/store-invalidation-while-update-1/_config.js
 create mode 100644 test/runtime/samples/store-invalidation-while-update-1/main.svelte
 create mode 100644 test/runtime/samples/store-invalidation-while-update-2/_config.js
 create mode 100644 test/runtime/samples/store-invalidation-while-update-2/main.svelte
 create mode 100644 test/runtime/samples/store-prevent-user-declarations/_config.js
 create mode 100644 test/runtime/samples/store-prevent-user-declarations/main.svelte
 create mode 100644 test/runtime/samples/store-resubscribe-b/_config.js
 create mode 100644 test/runtime/samples/store-resubscribe-b/main.svelte
 create mode 100644 test/runtime/samples/store-resubscribe-c/_config.js
 create mode 100644 test/runtime/samples/store-resubscribe-c/main.svelte
 create mode 100644 test/runtime/samples/store-resubscribe-export/_config.js
 create mode 100644 test/runtime/samples/store-resubscribe-export/main.svelte
 create mode 100644 test/runtime/samples/store-resubscribe-observable/_config.js
 create mode 100644 test/runtime/samples/store-resubscribe-observable/main.svelte
 create mode 100644 test/runtime/samples/store-resubscribe/_config.js
 create mode 100644 test/runtime/samples/store-resubscribe/main.svelte
 create mode 100644 test/runtime/samples/store-shadow-scope-declaration/_config.js
 create mode 100644 test/runtime/samples/store-shadow-scope-declaration/main.svelte
 create mode 100644 test/runtime/samples/store-shadow-scope/_config.js
 create mode 100644 test/runtime/samples/store-shadow-scope/main.svelte
 create mode 100644 test/runtime/samples/store-template-expression-scope/_config.js
 create mode 100644 test/runtime/samples/store-template-expression-scope/main.svelte
 create mode 100644 test/runtime/samples/store-unreferenced/Nested.svelte
 create mode 100644 test/runtime/samples/store-unreferenced/_config.js
 create mode 100644 test/runtime/samples/store-unreferenced/main.svelte
 create mode 100644 test/runtime/samples/store-unreferenced/store.js
 create mode 100644 test/runtime/samples/svg-attributes/_config.js
 create mode 100644 test/runtime/samples/svg-attributes/main.svelte
 create mode 100644 test/runtime/samples/svg-child-component-declared-namespace-shorthand/Rect.svelte
 create mode 100644 test/runtime/samples/svg-child-component-declared-namespace-shorthand/_config.js
 create mode 100644 test/runtime/samples/svg-child-component-declared-namespace-shorthand/main.svelte
 create mode 100644 test/runtime/samples/svg-child-component-declared-namespace/Rect.svelte
 create mode 100644 test/runtime/samples/svg-child-component-declared-namespace/_config.js
 create mode 100644 test/runtime/samples/svg-child-component-declared-namespace/main.svelte
 create mode 100644 test/runtime/samples/svg-class/_config.js
 create mode 100644 test/runtime/samples/svg-class/main.svelte
 create mode 100644 test/runtime/samples/svg-each-block-anchor/_config.js
 create mode 100644 test/runtime/samples/svg-each-block-anchor/main.svelte
 create mode 100644 test/runtime/samples/svg-each-block-namespace/_config.js
 create mode 100644 test/runtime/samples/svg-each-block-namespace/main.svelte
 create mode 100644 test/runtime/samples/svg-foreignobject-namespace/_config.js
 create mode 100644 test/runtime/samples/svg-foreignobject-namespace/main.svelte
 create mode 100644 test/runtime/samples/svg-html-tag/_config.js
 create mode 100644 test/runtime/samples/svg-html-tag/main.svelte
 create mode 100644 test/runtime/samples/svg-html-tag2/_config.js
 create mode 100644 test/runtime/samples/svg-html-tag2/main.svelte
 create mode 100644 test/runtime/samples/svg-html-tag3/_config.js
 create mode 100644 test/runtime/samples/svg-html-tag3/main.svelte
 create mode 100644 test/runtime/samples/svg-multiple/_config.js
 create mode 100644 test/runtime/samples/svg-multiple/main.svelte
 create mode 100644 test/runtime/samples/svg-no-whitespace/_config.js
 create mode 100644 test/runtime/samples/svg-no-whitespace/main.svelte
 create mode 100644 test/runtime/samples/svg-slot-namespace/Widget.svelte
 create mode 100644 test/runtime/samples/svg-slot-namespace/_config.js
 create mode 100644 test/runtime/samples/svg-slot-namespace/main.svelte
 create mode 100644 test/runtime/samples/svg-spread/_config.js
 create mode 100644 test/runtime/samples/svg-spread/main.svelte
 create mode 100644 test/runtime/samples/svg-tspan-preserve-space/_config.js
 create mode 100644 test/runtime/samples/svg-tspan-preserve-space/main.svelte
 create mode 100644 test/runtime/samples/svg-with-style/_config.js
 create mode 100644 test/runtime/samples/svg-with-style/main.svelte
 create mode 100644 test/runtime/samples/svg-xlink/_config.js
 create mode 100644 test/runtime/samples/svg-xlink/main.svelte
 create mode 100644 test/runtime/samples/svg-xmlns/_config.js
 create mode 100644 test/runtime/samples/svg-xmlns/main.svelte
 create mode 100644 test/runtime/samples/svg/_config.js
 create mode 100644 test/runtime/samples/svg/main.svelte
 create mode 100644 test/runtime/samples/target-dom-detached/App.svelte
 create mode 100644 test/runtime/samples/target-dom-detached/_config.js
 create mode 100644 test/runtime/samples/target-dom-detached/main.svelte
 create mode 100644 test/runtime/samples/target-dom/App.svelte
 create mode 100644 test/runtime/samples/target-dom/_config.js
 create mode 100644 test/runtime/samples/target-dom/main.svelte
 create mode 100644 test/runtime/samples/target-shadow-dom/App.svelte
 create mode 100644 test/runtime/samples/target-shadow-dom/_config.js
 create mode 100644 test/runtime/samples/target-shadow-dom/main.svelte
 create mode 100644 test/runtime/samples/template/_config.js
 create mode 100644 test/runtime/samples/template/main.svelte
 create mode 100644 test/runtime/samples/textarea-children/_config.js
 create mode 100644 test/runtime/samples/textarea-children/main.svelte
 create mode 100644 test/runtime/samples/textarea-content/.editorconfig
 create mode 100644 test/runtime/samples/textarea-content/_config.js
 create mode 100644 test/runtime/samples/textarea-content/main.svelte
 create mode 100644 test/runtime/samples/textarea-value/_config.js
 create mode 100644 test/runtime/samples/textarea-value/main.svelte
 create mode 100644 test/runtime/samples/this-in-function-expressions/_config.js
 create mode 100644 test/runtime/samples/this-in-function-expressions/main.svelte
 create mode 100644 test/runtime/samples/transition-abort/_config.js
 create mode 100644 test/runtime/samples/transition-abort/main.svelte
 create mode 100644 test/runtime/samples/transition-css-deferred-removal/_config.js
 create mode 100644 test/runtime/samples/transition-css-deferred-removal/main.svelte
 create mode 100644 test/runtime/samples/transition-css-duration/_config.js
 create mode 100644 test/runtime/samples/transition-css-duration/main.svelte
 create mode 100644 test/runtime/samples/transition-css-iframe/Foo.svelte
 create mode 100644 test/runtime/samples/transition-css-iframe/Frame.svelte
 create mode 100644 test/runtime/samples/transition-css-iframe/_config.js
 create mode 100644 test/runtime/samples/transition-css-iframe/main.svelte
 create mode 100644 test/runtime/samples/transition-css-in-out-in-with-param/_config.js
 create mode 100644 test/runtime/samples/transition-css-in-out-in-with-param/main.svelte
 create mode 100644 test/runtime/samples/transition-css-in-out-in/_config.js
 create mode 100644 test/runtime/samples/transition-css-in-out-in/main.svelte
 create mode 100644 test/runtime/samples/transition-js-aborted-outro-in-each/_config.js
 create mode 100644 test/runtime/samples/transition-js-aborted-outro-in-each/main.svelte
 create mode 100644 test/runtime/samples/transition-js-aborted-outro/_config.js
 create mode 100644 test/runtime/samples/transition-js-aborted-outro/main.svelte
 create mode 100644 test/runtime/samples/transition-js-args-dynamic/_config.js
 create mode 100644 test/runtime/samples/transition-js-args-dynamic/main.svelte
 create mode 100644 test/runtime/samples/transition-js-args/_config.js
 create mode 100644 test/runtime/samples/transition-js-args/main.svelte
 create mode 100644 test/runtime/samples/transition-js-await-block-outros/_config.js
 create mode 100644 test/runtime/samples/transition-js-await-block-outros/main.svelte
 create mode 100644 test/runtime/samples/transition-js-await-block/_config.js
 create mode 100644 test/runtime/samples/transition-js-await-block/main.svelte
 create mode 100644 test/runtime/samples/transition-js-context/_config.js
 create mode 100644 test/runtime/samples/transition-js-context/main.svelte
 create mode 100644 test/runtime/samples/transition-js-deferred-b/_config.js
 create mode 100644 test/runtime/samples/transition-js-deferred-b/main.svelte
 create mode 100644 test/runtime/samples/transition-js-deferred/_config.js
 create mode 100644 test/runtime/samples/transition-js-deferred/main.svelte
 create mode 100644 test/runtime/samples/transition-js-delay-in-out/_config.js
 create mode 100644 test/runtime/samples/transition-js-delay-in-out/main.svelte
 create mode 100644 test/runtime/samples/transition-js-delay/_config.js
 create mode 100644 test/runtime/samples/transition-js-delay/main.svelte
 create mode 100644 test/runtime/samples/transition-js-destroyed-before-end/_config.js
 create mode 100644 test/runtime/samples/transition-js-destroyed-before-end/main.svelte
 create mode 100644 test/runtime/samples/transition-js-dynamic-component/A.svelte
 create mode 100644 test/runtime/samples/transition-js-dynamic-component/B.svelte
 create mode 100644 test/runtime/samples/transition-js-dynamic-component/_config.js
 create mode 100644 test/runtime/samples/transition-js-dynamic-component/main.svelte
 create mode 100644 test/runtime/samples/transition-js-dynamic-if-block-bidi/_config.js
 create mode 100644 test/runtime/samples/transition-js-dynamic-if-block-bidi/main.svelte
 create mode 100644 test/runtime/samples/transition-js-each-block-intro-outro/_config.js
 create mode 100644 test/runtime/samples/transition-js-each-block-intro-outro/main.svelte
 create mode 100644 test/runtime/samples/transition-js-each-block-intro/_config.js
 create mode 100644 test/runtime/samples/transition-js-each-block-intro/main.svelte
 create mode 100644 test/runtime/samples/transition-js-each-block-keyed-intro-outro/_config.js
 create mode 100644 test/runtime/samples/transition-js-each-block-keyed-intro-outro/main.svelte
 create mode 100644 test/runtime/samples/transition-js-each-block-keyed-intro/_config.js
 create mode 100644 test/runtime/samples/transition-js-each-block-keyed-intro/main.svelte
 create mode 100644 test/runtime/samples/transition-js-each-block-keyed-outro/_config.js
 create mode 100644 test/runtime/samples/transition-js-each-block-keyed-outro/main.svelte
 create mode 100644 test/runtime/samples/transition-js-each-block-outro/_config.js
 create mode 100644 test/runtime/samples/transition-js-each-block-outro/main.svelte
 create mode 100644 test/runtime/samples/transition-js-each-else-block-intro-outro/_config.js
 create mode 100644 test/runtime/samples/transition-js-each-else-block-intro-outro/main.svelte
 create mode 100644 test/runtime/samples/transition-js-each-else-block-intro/_config.js
 create mode 100644 test/runtime/samples/transition-js-each-else-block-intro/main.svelte
 create mode 100644 test/runtime/samples/transition-js-each-else-block-outro/_config.js
 create mode 100644 test/runtime/samples/transition-js-each-else-block-outro/main.svelte
 create mode 100644 test/runtime/samples/transition-js-each-keyed-unchanged/_config.js
 create mode 100644 test/runtime/samples/transition-js-each-keyed-unchanged/main.svelte
 create mode 100644 test/runtime/samples/transition-js-each-outro-cancelled/_config.js
 create mode 100644 test/runtime/samples/transition-js-each-outro-cancelled/main.svelte
 create mode 100644 test/runtime/samples/transition-js-each-unchanged/_config.js
 create mode 100644 test/runtime/samples/transition-js-each-unchanged/main.svelte
 create mode 100644 test/runtime/samples/transition-js-events-in-out/_config.js
 create mode 100644 test/runtime/samples/transition-js-events-in-out/main.svelte
 create mode 100644 test/runtime/samples/transition-js-events/_config.js
 create mode 100644 test/runtime/samples/transition-js-events/main.svelte
 create mode 100644 test/runtime/samples/transition-js-if-block-bidi/_config.js
 create mode 100644 test/runtime/samples/transition-js-if-block-bidi/main.svelte
 create mode 100644 test/runtime/samples/transition-js-if-block-in-each-block-bidi-2/_config.js
 create mode 100644 test/runtime/samples/transition-js-if-block-in-each-block-bidi-2/main.svelte
 create mode 100644 test/runtime/samples/transition-js-if-block-in-each-block-bidi-3/_config.js
 create mode 100644 test/runtime/samples/transition-js-if-block-in-each-block-bidi-3/main.svelte
 create mode 100644 test/runtime/samples/transition-js-if-block-in-each-block-bidi/_config.js
 create mode 100644 test/runtime/samples/transition-js-if-block-in-each-block-bidi/main.svelte
 create mode 100644 test/runtime/samples/transition-js-if-block-intro-outro/_config.js
 create mode 100644 test/runtime/samples/transition-js-if-block-intro-outro/main.svelte
 create mode 100644 test/runtime/samples/transition-js-if-block-intro/_config.js
 create mode 100644 test/runtime/samples/transition-js-if-block-intro/main.svelte
 create mode 100644 test/runtime/samples/transition-js-if-block-outro-timeout/_config.js
 create mode 100644 test/runtime/samples/transition-js-if-block-outro-timeout/main.svelte
 create mode 100644 test/runtime/samples/transition-js-if-else-block-dynamic-outro/_config.js
 create mode 100644 test/runtime/samples/transition-js-if-else-block-dynamic-outro/main.svelte
 create mode 100644 test/runtime/samples/transition-js-if-else-block-intro/_config.js
 create mode 100644 test/runtime/samples/transition-js-if-else-block-intro/main.svelte
 create mode 100644 test/runtime/samples/transition-js-if-else-block-not-dynamic-outro/_config.js
 create mode 100644 test/runtime/samples/transition-js-if-else-block-not-dynamic-outro/main.svelte
 create mode 100644 test/runtime/samples/transition-js-if-else-block-outro/_config.js
 create mode 100644 test/runtime/samples/transition-js-if-else-block-outro/main.svelte
 create mode 100644 test/runtime/samples/transition-js-if-elseif-block-outro/_config.js
 create mode 100644 test/runtime/samples/transition-js-if-elseif-block-outro/main.svelte
 create mode 100644 test/runtime/samples/transition-js-if-outro-unrelated-component-binding-update/Component.svelte
 create mode 100644 test/runtime/samples/transition-js-if-outro-unrelated-component-binding-update/_config.js
 create mode 100644 test/runtime/samples/transition-js-if-outro-unrelated-component-binding-update/main.svelte
 create mode 100644 test/runtime/samples/transition-js-if-outro-unrelated-component-store-update/Component.svelte
 create mode 100644 test/runtime/samples/transition-js-if-outro-unrelated-component-store-update/_config.js
 create mode 100644 test/runtime/samples/transition-js-if-outro-unrelated-component-store-update/main.svelte
 create mode 100644 test/runtime/samples/transition-js-initial/_config.js
 create mode 100644 test/runtime/samples/transition-js-initial/main.svelte
 create mode 100644 test/runtime/samples/transition-js-intro-enabled-by-option/_config.js
 create mode 100644 test/runtime/samples/transition-js-intro-enabled-by-option/main.svelte
 create mode 100644 test/runtime/samples/transition-js-intro-skipped-by-default-nested/Widget.svelte
 create mode 100644 test/runtime/samples/transition-js-intro-skipped-by-default-nested/_config.js
 create mode 100644 test/runtime/samples/transition-js-intro-skipped-by-default-nested/main.svelte
 create mode 100644 test/runtime/samples/transition-js-intro-skipped-by-default/_config.js
 create mode 100644 test/runtime/samples/transition-js-intro-skipped-by-default/main.svelte
 create mode 100644 test/runtime/samples/transition-js-local-and-global/_config.js
 create mode 100644 test/runtime/samples/transition-js-local-and-global/main.svelte
 create mode 100644 test/runtime/samples/transition-js-local-nested-await/_config.js
 create mode 100644 test/runtime/samples/transition-js-local-nested-await/main.svelte
 create mode 100644 test/runtime/samples/transition-js-local-nested-component/Widget.svelte
 create mode 100644 test/runtime/samples/transition-js-local-nested-component/_config.js
 create mode 100644 test/runtime/samples/transition-js-local-nested-component/main.svelte
 create mode 100644 test/runtime/samples/transition-js-local-nested-each-keyed/_config.js
 create mode 100644 test/runtime/samples/transition-js-local-nested-each-keyed/main.svelte
 create mode 100644 test/runtime/samples/transition-js-local-nested-each/_config.js
 create mode 100644 test/runtime/samples/transition-js-local-nested-each/main.svelte
 create mode 100644 test/runtime/samples/transition-js-local-nested-if/_config.js
 create mode 100644 test/runtime/samples/transition-js-local-nested-if/main.svelte
 create mode 100644 test/runtime/samples/transition-js-local/_config.js
 create mode 100644 test/runtime/samples/transition-js-local/main.svelte
 create mode 100644 test/runtime/samples/transition-js-nested-await/_config.js
 create mode 100644 test/runtime/samples/transition-js-nested-await/main.svelte
 create mode 100644 test/runtime/samples/transition-js-nested-component/Widget.svelte
 create mode 100644 test/runtime/samples/transition-js-nested-component/_config.js
 create mode 100644 test/runtime/samples/transition-js-nested-component/main.svelte
 create mode 100644 test/runtime/samples/transition-js-nested-each-delete/_config.js
 create mode 100644 test/runtime/samples/transition-js-nested-each-delete/main.svelte
 create mode 100644 test/runtime/samples/transition-js-nested-each-keyed-2/Widget.svelte
 create mode 100644 test/runtime/samples/transition-js-nested-each-keyed-2/_config.js
 create mode 100644 test/runtime/samples/transition-js-nested-each-keyed-2/main.svelte
 create mode 100644 test/runtime/samples/transition-js-nested-each-keyed/_config.js
 create mode 100644 test/runtime/samples/transition-js-nested-each-keyed/main.svelte
 create mode 100644 test/runtime/samples/transition-js-nested-each/_config.js
 create mode 100644 test/runtime/samples/transition-js-nested-each/main.svelte
 create mode 100644 test/runtime/samples/transition-js-nested-if/_config.js
 create mode 100644 test/runtime/samples/transition-js-nested-if/main.svelte
 create mode 100644 test/runtime/samples/transition-js-nested-intro/Child.svelte
 create mode 100644 test/runtime/samples/transition-js-nested-intro/_config.js
 create mode 100644 test/runtime/samples/transition-js-nested-intro/main.svelte
 create mode 100644 test/runtime/samples/transition-js-parameterised-with-state/_config.js
 create mode 100644 test/runtime/samples/transition-js-parameterised-with-state/main.svelte
 create mode 100644 test/runtime/samples/transition-js-parameterised/_config.js
 create mode 100644 test/runtime/samples/transition-js-parameterised/main.svelte
 create mode 100644 test/runtime/samples/transition-js-slot-2/Nested.svelte
 create mode 100644 test/runtime/samples/transition-js-slot-2/_config.js
 create mode 100644 test/runtime/samples/transition-js-slot-2/main.svelte
 create mode 100644 test/runtime/samples/transition-js-slot-3/Nested.svelte
 create mode 100644 test/runtime/samples/transition-js-slot-3/_config.js
 create mode 100644 test/runtime/samples/transition-js-slot-3/main.svelte
 create mode 100644 test/runtime/samples/transition-js-slot-4-cancelled/Nested.svelte
 create mode 100644 test/runtime/samples/transition-js-slot-4-cancelled/_config.js
 create mode 100644 test/runtime/samples/transition-js-slot-4-cancelled/main.svelte
 create mode 100644 test/runtime/samples/transition-js-slot-5-cancelled-overflow/Nested.svelte
 create mode 100644 test/runtime/samples/transition-js-slot-5-cancelled-overflow/_config.js
 create mode 100644 test/runtime/samples/transition-js-slot-5-cancelled-overflow/main.svelte
 create mode 100644 test/runtime/samples/transition-js-slot-6-spread-cancelled/Nested.svelte
 create mode 100644 test/runtime/samples/transition-js-slot-6-spread-cancelled/Nested2.svelte
 create mode 100644 test/runtime/samples/transition-js-slot-6-spread-cancelled/_config.js
 create mode 100644 test/runtime/samples/transition-js-slot-6-spread-cancelled/main.svelte
 create mode 100644 test/runtime/samples/transition-js-slot-7-spread-cancelled-overflow/Nested.svelte
 create mode 100644 test/runtime/samples/transition-js-slot-7-spread-cancelled-overflow/_config.js
 create mode 100644 test/runtime/samples/transition-js-slot-7-spread-cancelled-overflow/main.svelte
 create mode 100644 test/runtime/samples/transition-js-slot-fallback/_config.js
 create mode 100644 test/runtime/samples/transition-js-slot-fallback/main.svelte
 create mode 100644 test/runtime/samples/transition-js-slot/Nested.svelte
 create mode 100644 test/runtime/samples/transition-js-slot/_config.js
 create mode 100644 test/runtime/samples/transition-js-slot/main.svelte
 create mode 100644 test/runtime/samples/unchanged-expression-escape/_config.js
 create mode 100644 test/runtime/samples/unchanged-expression-escape/main.svelte
 create mode 100644 test/runtime/samples/unchanged-expression-xss/_config.js
 create mode 100644 test/runtime/samples/unchanged-expression-xss/main.svelte
 create mode 100644 test/runtime/samples/whitespace-each-block/_config.js
 create mode 100644 test/runtime/samples/whitespace-each-block/main.svelte
 create mode 100644 test/runtime/samples/whitespace-list/_config.js
 create mode 100644 test/runtime/samples/whitespace-list/main.svelte
 create mode 100644 test/runtime/samples/whitespace-normal/_config.js
 create mode 100644 test/runtime/samples/whitespace-normal/main.svelte
 create mode 100644 test/runtime/samples/window-bind-scroll-update/_config.js
 create mode 100644 test/runtime/samples/window-bind-scroll-update/main.svelte
 create mode 100644 test/runtime/samples/window-binding-multiple-handlers/_config.js
 create mode 100644 test/runtime/samples/window-binding-multiple-handlers/main.svelte
 create mode 100644 test/runtime/samples/window-binding-resize/_config.js
 create mode 100644 test/runtime/samples/window-binding-resize/main.svelte
 create mode 100644 test/runtime/samples/window-binding-scroll-store/_config.js
 create mode 100644 test/runtime/samples/window-binding-scroll-store/main.svelte
 create mode 100644 test/runtime/samples/window-event-context/_config.js
 create mode 100644 test/runtime/samples/window-event-context/main.svelte
 create mode 100644 test/runtime/samples/window-event-custom/_config.js
 create mode 100644 test/runtime/samples/window-event-custom/main.svelte
 create mode 100644 test/runtime/samples/window-event/_config.js
 create mode 100644 test/runtime/samples/window-event/main.svelte
 create mode 100644 test/server-side-rendering/index.ts
 create mode 100644 test/server-side-rendering/samples/attribute-boolean/_expected.html
 create mode 100644 test/server-side-rendering/samples/attribute-boolean/main.svelte
 create mode 100644 test/server-side-rendering/samples/attribute-dynamic/_expected.html
 create mode 100644 test/server-side-rendering/samples/attribute-dynamic/data.json
 create mode 100644 test/server-side-rendering/samples/attribute-dynamic/main.svelte
 create mode 100644 test/server-side-rendering/samples/attribute-escape-quotes-spread-2/_expected.html
 create mode 100644 test/server-side-rendering/samples/attribute-escape-quotes-spread-2/main.svelte
 create mode 100644 test/server-side-rendering/samples/attribute-escaped-quotes-spread/_expected.html
 create mode 100644 test/server-side-rendering/samples/attribute-escaped-quotes-spread/main.svelte
 create mode 100644 test/server-side-rendering/samples/attribute-escaped-quotes/_expected.html
 create mode 100644 test/server-side-rendering/samples/attribute-escaped-quotes/main.svelte
 create mode 100644 test/server-side-rendering/samples/attribute-spread-with-null/_expected.html
 create mode 100644 test/server-side-rendering/samples/attribute-spread-with-null/main.svelte
 create mode 100644 test/server-side-rendering/samples/attribute-static/_expected.html
 create mode 100644 test/server-side-rendering/samples/attribute-static/main.svelte
 create mode 100644 test/server-side-rendering/samples/bindings-empty-string/_expected.html
 create mode 100644 test/server-side-rendering/samples/bindings-empty-string/main.svelte
 create mode 100644 test/server-side-rendering/samples/bindings-group/_expected.html
 create mode 100644 test/server-side-rendering/samples/bindings-group/main.svelte
 create mode 100644 test/server-side-rendering/samples/bindings-readonly/_expected.html
 create mode 100644 test/server-side-rendering/samples/bindings-readonly/main.svelte
 create mode 100644 test/server-side-rendering/samples/bindings-zero/_expected.html
 create mode 100644 test/server-side-rendering/samples/bindings-zero/main.svelte
 create mode 100644 test/server-side-rendering/samples/bindings/_expected.html
 create mode 100644 test/server-side-rendering/samples/bindings/main.svelte
 create mode 100644 test/server-side-rendering/samples/comment-preserve/_config.js
 create mode 100644 test/server-side-rendering/samples/comment-preserve/_expected.html
 create mode 100644 test/server-side-rendering/samples/comment-preserve/main.svelte
 create mode 100644 test/server-side-rendering/samples/comment/_expected.html
 create mode 100644 test/server-side-rendering/samples/comment/main.svelte
 create mode 100644 test/server-side-rendering/samples/component-binding-renamed/Foo.svelte
 create mode 100644 test/server-side-rendering/samples/component-binding-renamed/_expected.html
 create mode 100644 test/server-side-rendering/samples/component-binding-renamed/main.svelte
 create mode 100644 test/server-side-rendering/samples/component-binding/Foo.svelte
 create mode 100644 test/server-side-rendering/samples/component-binding/_expected.html
 create mode 100644 test/server-side-rendering/samples/component-binding/main.svelte
 create mode 100644 test/server-side-rendering/samples/component-data-dynamic/Widget.svelte
 create mode 100644 test/server-side-rendering/samples/component-data-dynamic/_expected.html
 create mode 100644 test/server-side-rendering/samples/component-data-dynamic/data.json
 create mode 100644 test/server-side-rendering/samples/component-data-dynamic/main.svelte
 create mode 100644 test/server-side-rendering/samples/component-data-empty/Widget.svelte
 create mode 100644 test/server-side-rendering/samples/component-data-empty/_expected.html
 create mode 100644 test/server-side-rendering/samples/component-data-empty/main.svelte
 create mode 100644 test/server-side-rendering/samples/component-refs-and-attributes/Widget.svelte
 create mode 100644 test/server-side-rendering/samples/component-refs-and-attributes/_expected.html
 create mode 100644 test/server-side-rendering/samples/component-refs-and-attributes/main.svelte
 create mode 100644 test/server-side-rendering/samples/component-refs/Widget.svelte
 create mode 100644 test/server-side-rendering/samples/component-refs/_expected.html
 create mode 100644 test/server-side-rendering/samples/component-refs/main.svelte
 create mode 100644 test/server-side-rendering/samples/component-with-different-extension/Widget.svelte
 create mode 100644 test/server-side-rendering/samples/component-with-different-extension/_expected.html
 create mode 100644 test/server-side-rendering/samples/component-with-different-extension/main.svelte
 create mode 100644 test/server-side-rendering/samples/component-yield/Widget.svelte
 create mode 100644 test/server-side-rendering/samples/component-yield/_expected.html
 create mode 100644 test/server-side-rendering/samples/component-yield/main.svelte
 create mode 100644 test/server-side-rendering/samples/component/Widget.svelte
 create mode 100644 test/server-side-rendering/samples/component/_expected.html
 create mode 100644 test/server-side-rendering/samples/component/main.svelte
 create mode 100644 test/server-side-rendering/samples/computed/_expected.html
 create mode 100644 test/server-side-rendering/samples/computed/data.json
 create mode 100644 test/server-side-rendering/samples/computed/main.svelte
 create mode 100644 test/server-side-rendering/samples/constructor-prefer-passed-context/ChildComponent.svelte
 create mode 100644 test/server-side-rendering/samples/constructor-prefer-passed-context/_expected.html
 create mode 100644 test/server-side-rendering/samples/constructor-prefer-passed-context/main.svelte
 create mode 100644 test/server-side-rendering/samples/default-data-override/_expected.html
 create mode 100644 test/server-side-rendering/samples/default-data-override/data.json
 create mode 100644 test/server-side-rendering/samples/default-data-override/main.svelte
 create mode 100644 test/server-side-rendering/samples/default-data/_expected.html
 create mode 100644 test/server-side-rendering/samples/default-data/main.svelte
 create mode 100644 test/server-side-rendering/samples/directives/_expected.html
 create mode 100644 test/server-side-rendering/samples/directives/main.svelte
 create mode 100644 test/server-side-rendering/samples/dynamic-element-string/_expected.html
 create mode 100644 test/server-side-rendering/samples/dynamic-element-string/main.svelte
 create mode 100644 test/server-side-rendering/samples/dynamic-element-variable/_expected.html
 create mode 100644 test/server-side-rendering/samples/dynamic-element-variable/main.svelte
 create mode 100644 test/server-side-rendering/samples/dynamic-text-escaped/_expected.html
 create mode 100644 test/server-side-rendering/samples/dynamic-text-escaped/data.json
 create mode 100644 test/server-side-rendering/samples/dynamic-text-escaped/main.svelte
 create mode 100644 test/server-side-rendering/samples/dynamic-text/_expected.html
 create mode 100644 test/server-side-rendering/samples/dynamic-text/data.json
 create mode 100644 test/server-side-rendering/samples/dynamic-text/main.svelte
 create mode 100644 test/server-side-rendering/samples/each-block/_expected.html
 create mode 100644 test/server-side-rendering/samples/each-block/data.json
 create mode 100644 test/server-side-rendering/samples/each-block/main.svelte
 create mode 100644 test/server-side-rendering/samples/empty-elements-closed/_expected.html
 create mode 100644 test/server-side-rendering/samples/empty-elements-closed/main.svelte
 create mode 100644 test/server-side-rendering/samples/entities/_expected.html
 create mode 100644 test/server-side-rendering/samples/entities/data.json
 create mode 100644 test/server-side-rendering/samples/entities/main.svelte
 create mode 100644 test/server-side-rendering/samples/head-meta-hydrate-duplicate/_config.js
 create mode 100644 test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected-head.html
 create mode 100644 test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected.html
 create mode 100644 test/server-side-rendering/samples/head-meta-hydrate-duplicate/main.svelte
 create mode 100644 test/server-side-rendering/samples/head-multiple-title/A.svelte
 create mode 100644 test/server-side-rendering/samples/head-multiple-title/B.svelte
 create mode 100644 test/server-side-rendering/samples/head-multiple-title/_expected-head.html
 create mode 100644 test/server-side-rendering/samples/head-multiple-title/_expected.html
 create mode 100644 test/server-side-rendering/samples/head-multiple-title/data.json
 create mode 100644 test/server-side-rendering/samples/head-multiple-title/main.svelte
 create mode 100644 test/server-side-rendering/samples/head-title/_expected-head.html
 create mode 100644 test/server-side-rendering/samples/head-title/_expected.html
 create mode 100644 test/server-side-rendering/samples/head-title/data.json
 create mode 100644 test/server-side-rendering/samples/head-title/main.svelte
 create mode 100644 test/server-side-rendering/samples/helpers/_expected.html
 create mode 100644 test/server-side-rendering/samples/helpers/main.svelte
 create mode 100644 test/server-side-rendering/samples/if-block-false/_expected.html
 create mode 100644 test/server-side-rendering/samples/if-block-false/data.json
 create mode 100644 test/server-side-rendering/samples/if-block-false/main.svelte
 create mode 100644 test/server-side-rendering/samples/if-block-true/_expected.html
 create mode 100644 test/server-side-rendering/samples/if-block-true/data.json
 create mode 100644 test/server-side-rendering/samples/if-block-true/main.svelte
 create mode 100644 test/server-side-rendering/samples/import-non-component/_expected.html
 create mode 100644 test/server-side-rendering/samples/import-non-component/answer.js
 create mode 100644 test/server-side-rendering/samples/import-non-component/main.svelte
 create mode 100644 test/server-side-rendering/samples/import-non-component/problems.js
 create mode 100644 test/server-side-rendering/samples/pre-tag/.editorconfig
 create mode 100644 test/server-side-rendering/samples/pre-tag/_config.js
 create mode 100644 test/server-side-rendering/samples/pre-tag/_expected.html
 create mode 100644 test/server-side-rendering/samples/pre-tag/main.svelte
 create mode 100644 test/server-side-rendering/samples/preserve-whitespaces/_config.js
 create mode 100644 test/server-side-rendering/samples/preserve-whitespaces/_expected.html
 create mode 100644 test/server-side-rendering/samples/preserve-whitespaces/main.svelte
 create mode 100644 test/server-side-rendering/samples/raw-mustaches/_expected.html
 create mode 100644 test/server-side-rendering/samples/raw-mustaches/data.json
 create mode 100644 test/server-side-rendering/samples/raw-mustaches/main.svelte
 create mode 100644 test/server-side-rendering/samples/sanitize-name/[foo].svelte
 create mode 100644 test/server-side-rendering/samples/sanitize-name/_expected.html
 create mode 100644 test/server-side-rendering/samples/sanitize-name/main.svelte
 create mode 100644 test/server-side-rendering/samples/spread-attributes-boolean/_expected.html
 create mode 100644 test/server-side-rendering/samples/spread-attributes-boolean/main.svelte
 create mode 100644 test/server-side-rendering/samples/spread-attributes-white-space/_expected.html
 create mode 100644 test/server-side-rendering/samples/spread-attributes-white-space/main.svelte
 create mode 100644 test/server-side-rendering/samples/spread-attributes/_expected.html
 create mode 100644 test/server-side-rendering/samples/spread-attributes/main.svelte
 create mode 100644 test/server-side-rendering/samples/static-div/_expected.html
 create mode 100644 test/server-side-rendering/samples/static-div/main.svelte
 create mode 100644 test/server-side-rendering/samples/static-text/_expected.html
 create mode 100644 test/server-side-rendering/samples/static-text/main.svelte
 create mode 100644 test/server-side-rendering/samples/styles-nested/One.svelte
 create mode 100644 test/server-side-rendering/samples/styles-nested/Two.svelte
 create mode 100644 test/server-side-rendering/samples/styles-nested/_expected.css
 create mode 100644 test/server-side-rendering/samples/styles-nested/_expected.html
 create mode 100644 test/server-side-rendering/samples/styles-nested/main.svelte
 create mode 100644 test/server-side-rendering/samples/styles/_expected.css
 create mode 100644 test/server-side-rendering/samples/styles/_expected.html
 create mode 100644 test/server-side-rendering/samples/styles/main.svelte
 create mode 100644 test/server-side-rendering/samples/text-area-bind/_expected.html
 create mode 100644 test/server-side-rendering/samples/text-area-bind/main.svelte
 create mode 100644 test/server-side-rendering/samples/textarea-children/_expected.html
 create mode 100644 test/server-side-rendering/samples/textarea-children/main.svelte
 create mode 100644 test/server-side-rendering/samples/textarea-content/.editorconfig
 create mode 100644 test/server-side-rendering/samples/textarea-content/_config.js
 create mode 100644 test/server-side-rendering/samples/textarea-content/_expected.html
 create mode 100644 test/server-side-rendering/samples/textarea-content/main.svelte
 create mode 100644 test/server-side-rendering/samples/textarea-value/_expected.html
 create mode 100644 test/server-side-rendering/samples/textarea-value/main.svelte
 create mode 100644 test/server-side-rendering/samples/triple/_expected.html
 create mode 100644 test/server-side-rendering/samples/triple/main.svelte
 create mode 100644 test/setup.js
 create mode 100644 test/sourcemaps/helpers.ts
 create mode 100644 test/sourcemaps/index.ts
 create mode 100644 test/sourcemaps/samples/attached-sourcemap/_config.js
 create mode 100644 test/sourcemaps/samples/attached-sourcemap/input.svelte
 create mode 100644 test/sourcemaps/samples/attached-sourcemap/test.js
 create mode 100644 test/sourcemaps/samples/basic/input.svelte
 create mode 100644 test/sourcemaps/samples/basic/test.js
 create mode 100644 test/sourcemaps/samples/binding-shorthand.skip/input.svelte
 create mode 100644 test/sourcemaps/samples/binding-shorthand.skip/test.js
 create mode 100644 test/sourcemaps/samples/binding/input.svelte
 create mode 100644 test/sourcemaps/samples/binding/test.js
 create mode 100644 test/sourcemaps/samples/compile-option-dev/_config.js
 create mode 100644 test/sourcemaps/samples/compile-option-dev/input.svelte
 create mode 100644 test/sourcemaps/samples/compile-option-dev/test.js
 create mode 100644 test/sourcemaps/samples/css/input.svelte
 create mode 100644 test/sourcemaps/samples/css/test.js
 create mode 100644 test/sourcemaps/samples/decoded-sourcemap/_config.js
 create mode 100644 test/sourcemaps/samples/decoded-sourcemap/input.svelte
 create mode 100644 test/sourcemaps/samples/decoded-sourcemap/test.js
 create mode 100644 test/sourcemaps/samples/each-block/input.svelte
 create mode 100644 test/sourcemaps/samples/each-block/test.js
 create mode 100644 test/sourcemaps/samples/external/_config.js
 create mode 100644 test/sourcemaps/samples/external/input.svelte
 create mode 100644 test/sourcemaps/samples/external/test.js
 create mode 100644 test/sourcemaps/samples/markup/input.svelte
 create mode 100644 test/sourcemaps/samples/markup/test.js
 create mode 100644 test/sourcemaps/samples/no-sourcemap/_config.js
 create mode 100644 test/sourcemaps/samples/no-sourcemap/input.svelte
 create mode 100644 test/sourcemaps/samples/no-sourcemap/test.js
 create mode 100644 test/sourcemaps/samples/only-css-sourcemap/_config.js
 create mode 100644 test/sourcemaps/samples/only-css-sourcemap/input.svelte
 create mode 100644 test/sourcemaps/samples/only-css-sourcemap/test.js
 create mode 100644 test/sourcemaps/samples/only-js-sourcemap/_config.js
 create mode 100644 test/sourcemaps/samples/only-js-sourcemap/input.svelte
 create mode 100644 test/sourcemaps/samples/only-js-sourcemap/test.js
 create mode 100644 test/sourcemaps/samples/preprocessed-markup/_config.js
 create mode 100644 test/sourcemaps/samples/preprocessed-markup/input.svelte
 create mode 100644 test/sourcemaps/samples/preprocessed-markup/test.js
 create mode 100644 test/sourcemaps/samples/preprocessed-multiple/_config.js
 create mode 100644 test/sourcemaps/samples/preprocessed-multiple/input.svelte
 create mode 100644 test/sourcemaps/samples/preprocessed-multiple/test.js
 create mode 100644 test/sourcemaps/samples/preprocessed-no-map/_config.js
 create mode 100644 test/sourcemaps/samples/preprocessed-no-map/input.svelte
 create mode 100644 test/sourcemaps/samples/preprocessed-no-map/test.js
 create mode 100644 test/sourcemaps/samples/preprocessed-script/_config.js
 create mode 100644 test/sourcemaps/samples/preprocessed-script/input.svelte
 create mode 100644 test/sourcemaps/samples/preprocessed-script/test.js
 create mode 100644 test/sourcemaps/samples/preprocessed-styles/_config.js
 create mode 100644 test/sourcemaps/samples/preprocessed-styles/input.svelte
 create mode 100644 test/sourcemaps/samples/preprocessed-styles/test.js
 create mode 100644 test/sourcemaps/samples/script-after-comment/input.svelte
 create mode 100644 test/sourcemaps/samples/script-after-comment/test.js
 create mode 100644 test/sourcemaps/samples/script/input.svelte
 create mode 100644 test/sourcemaps/samples/script/test.js
 create mode 100644 test/sourcemaps/samples/source-map-generator/_config.js
 create mode 100644 test/sourcemaps/samples/source-map-generator/input.svelte
 create mode 100644 test/sourcemaps/samples/source-map-generator/test.js
 create mode 100644 test/sourcemaps/samples/sourcemap-basename-without-outputname/_config.js
 create mode 100644 test/sourcemaps/samples/sourcemap-basename-without-outputname/input.svelte
 create mode 100644 test/sourcemaps/samples/sourcemap-basename-without-outputname/test.js
 create mode 100644 test/sourcemaps/samples/sourcemap-basename/_config.js
 create mode 100644 test/sourcemaps/samples/sourcemap-basename/input.svelte
 create mode 100644 test/sourcemaps/samples/sourcemap-basename/test.js
 create mode 100644 test/sourcemaps/samples/sourcemap-concat/_config.js
 create mode 100644 test/sourcemaps/samples/sourcemap-concat/input.svelte
 create mode 100644 test/sourcemaps/samples/sourcemap-concat/test.js
 create mode 100644 test/sourcemaps/samples/sourcemap-names/_config.js
 create mode 100644 test/sourcemaps/samples/sourcemap-names/input.svelte
 create mode 100644 test/sourcemaps/samples/sourcemap-names/test.js
 create mode 100644 test/sourcemaps/samples/sourcemap-offsets/_config.js
 create mode 100644 test/sourcemaps/samples/sourcemap-offsets/input.svelte
 create mode 100644 test/sourcemaps/samples/sourcemap-offsets/test.js
 create mode 100644 test/sourcemaps/samples/sourcemap-sources/_config.js
 create mode 100644 test/sourcemaps/samples/sourcemap-sources/input.svelte
 create mode 100644 test/sourcemaps/samples/sourcemap-sources/test.js
 create mode 100644 test/sourcemaps/samples/static-no-script/input.svelte
 create mode 100644 test/sourcemaps/samples/static-no-script/test.js
 create mode 100644 test/sourcemaps/samples/two-scripts/input.svelte
 create mode 100644 test/sourcemaps/samples/two-scripts/test.js
 create mode 100644 test/sourcemaps/samples/typescript/_config.js
 create mode 100644 test/sourcemaps/samples/typescript/input.svelte
 create mode 100644 test/sourcemaps/samples/typescript/test.js
 create mode 100644 test/stats/index.ts
 create mode 100644 test/stats/samples/basic/_config.js
 create mode 100644 test/stats/samples/basic/input.svelte
 create mode 100644 test/store/index.ts
 create mode 100644 test/svelte-styles-csp/index.ts
 create mode 100644 test/test.ts
 create mode 100644 test/tsconfig.json
 create mode 100644 test/utils/index.ts
 create mode 100644 test/validator/index.ts
 create mode 100644 test/validator/samples/a11y-alt-text/input.svelte
 create mode 100644 test/validator/samples/a11y-alt-text/warnings.json
 create mode 100644 test/validator/samples/a11y-anchor-has-content/input.svelte
 create mode 100644 test/validator/samples/a11y-anchor-has-content/warnings.json
 create mode 100644 test/validator/samples/a11y-anchor-in-svg-is-valid/input.svelte
 create mode 100644 test/validator/samples/a11y-anchor-in-svg-is-valid/warnings.json
 create mode 100644 test/validator/samples/a11y-anchor-is-valid/input.svelte
 create mode 100644 test/validator/samples/a11y-anchor-is-valid/warnings.json
 create mode 100644 test/validator/samples/a11y-aria-props/input.svelte
 create mode 100644 test/validator/samples/a11y-aria-props/warnings.json
 create mode 100644 test/validator/samples/a11y-aria-role/input.svelte
 create mode 100644 test/validator/samples/a11y-aria-role/warnings.json
 create mode 100644 test/validator/samples/a11y-aria-unsupported-element/input.svelte
 create mode 100644 test/validator/samples/a11y-aria-unsupported-element/warnings.json
 create mode 100644 test/validator/samples/a11y-contenteditable-element-without-child/errors.json
 create mode 100644 test/validator/samples/a11y-contenteditable-element-without-child/input.svelte
 create mode 100644 test/validator/samples/a11y-figcaption-in-non-element-block/input.svelte
 create mode 100644 test/validator/samples/a11y-figcaption-in-non-element-block/warnings.json
 create mode 100644 test/validator/samples/a11y-figcaption-right-place/input.svelte
 create mode 100644 test/validator/samples/a11y-figcaption-right-place/warnings.json
 create mode 100644 test/validator/samples/a11y-figcaption-wrong-place/input.svelte
 create mode 100644 test/validator/samples/a11y-figcaption-wrong-place/warnings.json
 create mode 100644 test/validator/samples/a11y-heading-has-content/input.svelte
 create mode 100644 test/validator/samples/a11y-heading-has-content/warnings.json
 create mode 100644 test/validator/samples/a11y-html-has-lang/input.svelte
 create mode 100644 test/validator/samples/a11y-html-has-lang/warnings.json
 create mode 100644 test/validator/samples/a11y-iframe-has-title/input.svelte
 create mode 100644 test/validator/samples/a11y-iframe-has-title/warnings.json
 create mode 100644 test/validator/samples/a11y-img-redundant-alt/input.svelte
 create mode 100644 test/validator/samples/a11y-img-redundant-alt/warnings.json
 create mode 100644 test/validator/samples/a11y-in-foreign-namespace/input.svelte
 create mode 100644 test/validator/samples/a11y-in-foreign-namespace/warnings.json
 create mode 100644 test/validator/samples/a11y-label-has-associated-control/input.svelte
 create mode 100644 test/validator/samples/a11y-label-has-associated-control/warnings.json
 create mode 100644 test/validator/samples/a11y-media-has-caption/input.svelte
 create mode 100644 test/validator/samples/a11y-media-has-caption/warnings.json
 create mode 100644 test/validator/samples/a11y-mouse-events-have-key-events/input.svelte
 create mode 100644 test/validator/samples/a11y-mouse-events-have-key-events/warnings.json
 create mode 100644 test/validator/samples/a11y-no-access-key/input.svelte
 create mode 100644 test/validator/samples/a11y-no-access-key/warnings.json
 create mode 100644 test/validator/samples/a11y-no-autofocus/input.svelte
 create mode 100644 test/validator/samples/a11y-no-autofocus/warnings.json
 create mode 100644 test/validator/samples/a11y-no-distracting-elements/input.svelte
 create mode 100644 test/validator/samples/a11y-no-distracting-elements/warnings.json
 create mode 100644 test/validator/samples/a11y-no-redundant-roles/input.svelte
 create mode 100644 test/validator/samples/a11y-no-redundant-roles/warnings.json
 create mode 100644 test/validator/samples/a11y-not-on-components/input.svelte
 create mode 100644 test/validator/samples/a11y-not-on-components/warnings.json
 create mode 100644 test/validator/samples/a11y-scope/input.svelte
 create mode 100644 test/validator/samples/a11y-scope/warnings.json
 create mode 100644 test/validator/samples/a11y-tabindex-no-positive/input.svelte
 create mode 100644 test/validator/samples/a11y-tabindex-no-positive/warnings.json
 create mode 100644 test/validator/samples/action-invalid/input.svelte
 create mode 100644 test/validator/samples/action-invalid/warnings.json
 create mode 100644 test/validator/samples/action-object/input.svelte
 create mode 100644 test/validator/samples/action-object/warnings.json
 create mode 100644 test/validator/samples/action-on-component/errors.json
 create mode 100644 test/validator/samples/action-on-component/input.svelte
 create mode 100644 test/validator/samples/animation-comment-siblings/errors.json
 create mode 100644 test/validator/samples/animation-comment-siblings/input.svelte
 create mode 100644 test/validator/samples/animation-duplicate/errors.json
 create mode 100644 test/validator/samples/animation-duplicate/input.svelte
 create mode 100644 test/validator/samples/animation-each-with-const/errors.json
 create mode 100644 test/validator/samples/animation-each-with-const/input.svelte
 create mode 100644 test/validator/samples/animation-each-with-whitespace/errors.json
 create mode 100644 test/validator/samples/animation-each-with-whitespace/input.svelte
 create mode 100644 test/validator/samples/animation-missing/input.svelte
 create mode 100644 test/validator/samples/animation-missing/warnings.json
 create mode 100644 test/validator/samples/animation-not-in-each/errors.json
 create mode 100644 test/validator/samples/animation-not-in-each/input.svelte
 create mode 100644 test/validator/samples/animation-not-in-keyed-each/errors.json
 create mode 100644 test/validator/samples/animation-not-in-keyed-each/input.svelte
 create mode 100644 test/validator/samples/animation-siblings/errors.json
 create mode 100644 test/validator/samples/animation-siblings/input.svelte
 create mode 100644 test/validator/samples/attribute-expected-equals/errors.json
 create mode 100644 test/validator/samples/attribute-expected-equals/input.svelte
 create mode 100644 test/validator/samples/attribute-invalid-name-2/errors.json
 create mode 100644 test/validator/samples/attribute-invalid-name-2/input.svelte
 create mode 100644 test/validator/samples/attribute-invalid-name-3/errors.json
 create mode 100644 test/validator/samples/attribute-invalid-name-3/input.svelte
 create mode 100644 test/validator/samples/attribute-invalid-name-4/errors.json
 create mode 100644 test/validator/samples/attribute-invalid-name-4/input.svelte
 create mode 100644 test/validator/samples/attribute-invalid-name-5/errors.json
 create mode 100644 test/validator/samples/attribute-invalid-name-5/input.svelte
 create mode 100644 test/validator/samples/attribute-invalid-name/errors.json
 create mode 100644 test/validator/samples/attribute-invalid-name/input.svelte
 create mode 100644 test/validator/samples/await-component-is-used/input.svelte
 create mode 100644 test/validator/samples/await-component-is-used/warnings.json
 create mode 100644 test/validator/samples/await-no-catch/input.svelte
 create mode 100644 test/validator/samples/await-no-catch/warnings.json
 create mode 100644 test/validator/samples/await-shorthand-no-catch/input.svelte
 create mode 100644 test/validator/samples/await-shorthand-no-catch/warnings.json
 create mode 100644 test/validator/samples/await-shorthand-no-then/input.svelte
 create mode 100644 test/validator/samples/await-shorthand-no-then/warnings.json
 create mode 100644 test/validator/samples/binding-await-catch/errors.json
 create mode 100644 test/validator/samples/binding-await-catch/input.svelte
 create mode 100644 test/validator/samples/binding-await-then-2/errors.json
 create mode 100644 test/validator/samples/binding-await-then-2/input.svelte
 create mode 100644 test/validator/samples/binding-await-then/errors.json
 create mode 100644 test/validator/samples/binding-await-then/input.svelte
 create mode 100644 test/validator/samples/binding-const-field/errors.json
 create mode 100644 test/validator/samples/binding-const-field/input.svelte
 create mode 100644 test/validator/samples/binding-const/errors.json
 create mode 100644 test/validator/samples/binding-const/input.svelte
 create mode 100644 test/validator/samples/binding-dimensions-svg-child/errors.json
 create mode 100644 test/validator/samples/binding-dimensions-svg-child/input.svelte
 create mode 100644 test/validator/samples/binding-dimensions-svg/errors.json
 create mode 100644 test/validator/samples/binding-dimensions-svg/input.svelte
 create mode 100644 test/validator/samples/binding-dimensions-void/errors.json
 create mode 100644 test/validator/samples/binding-dimensions-void/input.svelte
 create mode 100644 test/validator/samples/binding-input-checked/errors.json
 create mode 100644 test/validator/samples/binding-input-checked/input.svelte
 create mode 100644 test/validator/samples/binding-input-type-boolean/errors.json
 create mode 100644 test/validator/samples/binding-input-type-boolean/input.svelte
 create mode 100644 test/validator/samples/binding-input-type-dynamic/errors.json
 create mode 100644 test/validator/samples/binding-input-type-dynamic/input.svelte
 create mode 100644 test/validator/samples/binding-invalid-foreign-namespace/errors.json
 create mode 100644 test/validator/samples/binding-invalid-foreign-namespace/input.svelte
 create mode 100644 test/validator/samples/binding-invalid-on-element/errors.json
 create mode 100644 test/validator/samples/binding-invalid-on-element/input.svelte
 create mode 100644 test/validator/samples/binding-invalid-value-global/errors.json
 create mode 100644 test/validator/samples/binding-invalid-value-global/input.svelte
 create mode 100644 test/validator/samples/binding-invalid-value/errors.json
 create mode 100644 test/validator/samples/binding-invalid-value/input.svelte
 create mode 100644 test/validator/samples/binding-invalid/errors.json
 create mode 100644 test/validator/samples/binding-invalid/input.svelte
 create mode 100644 test/validator/samples/binding-let/errors.json
 create mode 100644 test/validator/samples/binding-let/input.svelte
 create mode 100644 test/validator/samples/binding-select-multiple-dynamic/errors.json
 create mode 100644 test/validator/samples/binding-select-multiple-dynamic/input.svelte
 create mode 100644 test/validator/samples/catch-declares-error-variable/input.svelte
 create mode 100644 test/validator/samples/catch-declares-error-variable/warnings.json
 create mode 100644 test/validator/samples/component-dynamic/input.svelte
 create mode 100644 test/validator/samples/component-dynamic/options.json
 create mode 100644 test/validator/samples/component-dynamic/warnings.json
 create mode 100644 test/validator/samples/component-event-modifiers-invalid/errors.json
 create mode 100644 test/validator/samples/component-event-modifiers-invalid/input.svelte
 create mode 100644 test/validator/samples/component-invalid-style-directive/errors.json
 create mode 100644 test/validator/samples/component-invalid-style-directive/input.svelte
 create mode 100644 test/validator/samples/component-name-lowercase/input.svelte
 create mode 100644 test/validator/samples/component-name-lowercase/warnings.json
 create mode 100644 test/validator/samples/component-namespaced/input.svelte
 create mode 100644 test/validator/samples/component-namespaced/warnings.json
 create mode 100644 test/validator/samples/component-slot-default-duplicate.skip/errors.json
 create mode 100644 test/validator/samples/component-slot-default-duplicate.skip/input.svelte
 create mode 100644 test/validator/samples/component-slot-default-reserved/errors.json
 create mode 100644 test/validator/samples/component-slot-default-reserved/input.svelte
 create mode 100644 test/validator/samples/component-slot-dynamic-attribute/errors.json
 create mode 100644 test/validator/samples/component-slot-dynamic-attribute/input.svelte
 create mode 100644 test/validator/samples/component-slot-dynamic/errors.json
 create mode 100644 test/validator/samples/component-slot-dynamic/input.svelte
 create mode 100644 test/validator/samples/component-slot-named-duplicate.skip/errors.json
 create mode 100644 test/validator/samples/component-slot-named-duplicate.skip/input.svelte
 create mode 100644 test/validator/samples/component-slotted-custom-element-2/errors.json
 create mode 100644 test/validator/samples/component-slotted-custom-element-2/input.svelte
 create mode 100644 test/validator/samples/component-slotted-custom-element/errors.json
 create mode 100644 test/validator/samples/component-slotted-custom-element/input.svelte
 create mode 100644 test/validator/samples/component-slotted-each-block/errors.json
 create mode 100644 test/validator/samples/component-slotted-each-block/input.svelte
 create mode 100644 test/validator/samples/component-slotted-if-block/errors.json
 create mode 100644 test/validator/samples/component-slotted-if-block/input.svelte
 create mode 100644 test/validator/samples/const-tag-conflict-1/errors.json
 create mode 100644 test/validator/samples/const-tag-conflict-1/input.svelte
 create mode 100644 test/validator/samples/const-tag-conflict-2/errors.json
 create mode 100644 test/validator/samples/const-tag-conflict-2/input.svelte
 create mode 100644 test/validator/samples/const-tag-cyclical/errors.json
 create mode 100644 test/validator/samples/const-tag-cyclical/input.svelte
 create mode 100644 test/validator/samples/const-tag-out-of-scope/input.svelte
 create mode 100644 test/validator/samples/const-tag-out-of-scope/warnings.json
 create mode 100644 test/validator/samples/const-tag-placement-1/errors.json
 create mode 100644 test/validator/samples/const-tag-placement-1/input.svelte
 create mode 100644 test/validator/samples/const-tag-placement-2/errors.json
 create mode 100644 test/validator/samples/const-tag-placement-2/input.svelte
 create mode 100644 test/validator/samples/const-tag-readonly-1/errors.json
 create mode 100644 test/validator/samples/const-tag-readonly-1/input.svelte
 create mode 100644 test/validator/samples/const-tag-readonly-2/errors.json
 create mode 100644 test/validator/samples/const-tag-readonly-2/input.svelte
 create mode 100644 test/validator/samples/contenteditable-dynamic/errors.json
 create mode 100644 test/validator/samples/contenteditable-dynamic/input.svelte
 create mode 100644 test/validator/samples/contenteditable-missing/errors.json
 create mode 100644 test/validator/samples/contenteditable-missing/input.svelte
 create mode 100644 test/validator/samples/css-invalid-global-placement-2/errors.json
 create mode 100644 test/validator/samples/css-invalid-global-placement-2/input.svelte
 create mode 100644 test/validator/samples/css-invalid-global-placement-3/errors.json
 create mode 100644 test/validator/samples/css-invalid-global-placement-3/input.svelte
 create mode 100644 test/validator/samples/css-invalid-global-placement/errors.json
 create mode 100644 test/validator/samples/css-invalid-global-placement/input.svelte
 create mode 100644 test/validator/samples/css-invalid-global-selector-2/errors.json
 create mode 100644 test/validator/samples/css-invalid-global-selector-2/input.svelte
 create mode 100644 test/validator/samples/css-invalid-global-selector-3/errors.json
 create mode 100644 test/validator/samples/css-invalid-global-selector-3/input.svelte
 create mode 100644 test/validator/samples/css-invalid-global-selector-4/errors.json
 create mode 100644 test/validator/samples/css-invalid-global-selector-4/input.svelte
 create mode 100644 test/validator/samples/css-invalid-global-selector-5/errors.json
 create mode 100644 test/validator/samples/css-invalid-global-selector-5/input.svelte
 create mode 100644 test/validator/samples/css-invalid-global-selector-6/errors.json
 create mode 100644 test/validator/samples/css-invalid-global-selector-6/input.svelte
 create mode 100644 test/validator/samples/css-invalid-global-selector/errors.json
 create mode 100644 test/validator/samples/css-invalid-global-selector/input.svelte
 create mode 100644 test/validator/samples/debug-invalid-args/errors.json
 create mode 100644 test/validator/samples/debug-invalid-args/input.svelte
 create mode 100644 test/validator/samples/default-export-anonymous-class/errors.json
 create mode 100644 test/validator/samples/default-export-anonymous-class/input.svelte
 create mode 100644 test/validator/samples/default-export-anonymous-function/errors.json
 create mode 100644 test/validator/samples/default-export-anonymous-function/input.svelte
 create mode 100644 test/validator/samples/default-export/errors.json
 create mode 100644 test/validator/samples/default-export/input.svelte
 create mode 100644 test/validator/samples/directive-non-expression/errors.json
 create mode 100644 test/validator/samples/directive-non-expression/input.svelte
 create mode 100644 test/validator/samples/dollar-dollar-global-in-markup/errors.json
 create mode 100644 test/validator/samples/dollar-dollar-global-in-markup/input.svelte
 create mode 100644 test/validator/samples/dollar-dollar-global-in-script/errors.json
 create mode 100644 test/validator/samples/dollar-dollar-global-in-script/input.svelte
 create mode 100644 test/validator/samples/dollar-global-in-markup/errors.json
 create mode 100644 test/validator/samples/dollar-global-in-markup/input.svelte
 create mode 100644 test/validator/samples/dollar-global-in-script/errors.json
 create mode 100644 test/validator/samples/dollar-global-in-script/input.svelte
 create mode 100644 test/validator/samples/dynamic-element-invalid-tag/errors.json
 create mode 100644 test/validator/samples/dynamic-element-invalid-tag/input.svelte
 create mode 100644 test/validator/samples/dynamic-element-missing-tag/errors.json
 create mode 100644 test/validator/samples/dynamic-element-missing-tag/input.svelte
 create mode 100644 test/validator/samples/dynamic-element-this/errors.json
 create mode 100644 test/validator/samples/dynamic-element-this/input.svelte
 create mode 100644 test/validator/samples/each-block-destructured-object-rest-comma-after/errors.json
 create mode 100644 test/validator/samples/each-block-destructured-object-rest-comma-after/input.svelte
 create mode 100644 test/validator/samples/each-block-invalid-context-destructured-object/errors.json
 create mode 100644 test/validator/samples/each-block-invalid-context-destructured-object/input.svelte
 create mode 100644 test/validator/samples/each-block-invalid-context-destructured/errors.json
 create mode 100644 test/validator/samples/each-block-invalid-context-destructured/input.svelte
 create mode 100644 test/validator/samples/each-block-invalid-context/errors.json
 create mode 100644 test/validator/samples/each-block-invalid-context/input.svelte
 create mode 100644 test/validator/samples/each-block-multiple-children/_config.js
 create mode 100644 test/validator/samples/each-block-multiple-children/input.svelte
 create mode 100644 test/validator/samples/each-block-multiple-children/warnings.json
 create mode 100644 test/validator/samples/empty-block/input.svelte
 create mode 100644 test/validator/samples/empty-block/warnings.json
 create mode 100644 test/validator/samples/error-mode-warn/input.svelte
 create mode 100644 test/validator/samples/error-mode-warn/options.json
 create mode 100644 test/validator/samples/error-mode-warn/warnings.json
 create mode 100644 test/validator/samples/event-modifiers-invalid-nonpassive/errors.json
 create mode 100644 test/validator/samples/event-modifiers-invalid-nonpassive/input.svelte
 create mode 100644 test/validator/samples/event-modifiers-invalid-passive/errors.json
 create mode 100644 test/validator/samples/event-modifiers-invalid-passive/input.svelte
 create mode 100644 test/validator/samples/event-modifiers-invalid/errors.json
 create mode 100644 test/validator/samples/event-modifiers-invalid/input.svelte
 create mode 100644 test/validator/samples/event-modifiers-legacy/_config.js
 create mode 100644 test/validator/samples/event-modifiers-legacy/errors.json
 create mode 100644 test/validator/samples/event-modifiers-legacy/input.svelte
 create mode 100644 test/validator/samples/event-modifiers-redundant/input.svelte
 create mode 100644 test/validator/samples/event-modifiers-redundant/warnings.json
 create mode 100644 test/validator/samples/ignore-warning/input.svelte
 create mode 100644 test/validator/samples/ignore-warning/warnings.json
 create mode 100644 test/validator/samples/ignore-warnings-cumulative/input.svelte
 create mode 100644 test/validator/samples/ignore-warnings-cumulative/warnings.json
 create mode 100644 test/validator/samples/ignore-warnings-newline/input.svelte
 create mode 100644 test/validator/samples/ignore-warnings-newline/warnings.json
 create mode 100644 test/validator/samples/ignore-warnings-stacked/input.svelte
 create mode 100644 test/validator/samples/ignore-warnings-stacked/warnings.json
 create mode 100644 test/validator/samples/ignore-warnings/input.svelte
 create mode 100644 test/validator/samples/ignore-warnings/warnings.json
 create mode 100644 test/validator/samples/illegal-variable-declaration/errors.json
 create mode 100644 test/validator/samples/illegal-variable-declaration/input.svelte
 create mode 100644 test/validator/samples/import-meta/errors.json
 create mode 100644 test/validator/samples/import-meta/input.svelte
 create mode 100644 test/validator/samples/invalid-empty-css-declaration/errors.json
 create mode 100644 test/validator/samples/invalid-empty-css-declaration/input.svelte
 create mode 100644 test/validator/samples/missing-component-global/input.svelte
 create mode 100644 test/validator/samples/missing-component-global/warnings.json
 create mode 100644 test/validator/samples/missing-component/input.svelte
 create mode 100644 test/validator/samples/missing-component/warnings.json
 create mode 100644 test/validator/samples/missing-custom-element-compile-options/input.svelte
 create mode 100644 test/validator/samples/missing-custom-element-compile-options/warnings.json
 create mode 100644 test/validator/samples/module-script-reactive-declaration/input.svelte
 create mode 100644 test/validator/samples/module-script-reactive-declaration/warnings.json
 create mode 100644 test/validator/samples/multiple-script-default-context/errors.json
 create mode 100644 test/validator/samples/multiple-script-default-context/input.svelte
 create mode 100644 test/validator/samples/multiple-script-module-context/errors.json
 create mode 100644 test/validator/samples/multiple-script-module-context/input.svelte
 create mode 100644 test/validator/samples/namespace-invalid-unguessable/errors.json
 create mode 100644 test/validator/samples/namespace-invalid-unguessable/input.svelte
 create mode 100644 test/validator/samples/namespace-invalid/errors.json
 create mode 100644 test/validator/samples/namespace-invalid/input.svelte
 create mode 100644 test/validator/samples/namespace-non-literal/errors.json
 create mode 100644 test/validator/samples/namespace-non-literal/input.svelte
 create mode 100644 test/validator/samples/non-empty-block-dev/_config.js
 create mode 100644 test/validator/samples/non-empty-block-dev/input.svelte
 create mode 100644 test/validator/samples/non-empty-block-dev/warnings.json
 create mode 100644 test/validator/samples/reactive-declaration-cyclical/errors.json
 create mode 100644 test/validator/samples/reactive-declaration-cyclical/input.svelte
 create mode 100644 test/validator/samples/reactive-declaration-non-top-level/input.svelte
 create mode 100644 test/validator/samples/reactive-declaration-non-top-level/warnings.json
 create mode 100644 test/validator/samples/reactive-module-const-variable/input.svelte
 create mode 100644 test/validator/samples/reactive-module-const-variable/warnings.json
 create mode 100644 test/validator/samples/reactive-module-variable-2/input.svelte
 create mode 100644 test/validator/samples/reactive-module-variable-2/warnings.json
 create mode 100644 test/validator/samples/reactive-module-variable/input.svelte
 create mode 100644 test/validator/samples/reactive-module-variable/warnings.json
 create mode 100644 test/validator/samples/ref-not-supported-in-css/errors.json
 create mode 100644 test/validator/samples/ref-not-supported-in-css/input.svelte
 create mode 100644 test/validator/samples/ref-not-supported/errors.json
 create mode 100644 test/validator/samples/ref-not-supported/input.svelte
 create mode 100644 test/validator/samples/script-invalid-context/errors.json
 create mode 100644 test/validator/samples/script-invalid-context/input.svelte
 create mode 100644 test/validator/samples/select-multiple/input.svelte
 create mode 100644 test/validator/samples/silence-warnings-2/input.svelte
 create mode 100644 test/validator/samples/silence-warnings-2/warnings.json
 create mode 100644 test/validator/samples/silence-warnings/input.svelte
 create mode 100644 test/validator/samples/silence-warnings/warnings.json
 create mode 100644 test/validator/samples/slot-attribute-invalid/errors.json
 create mode 100644 test/validator/samples/slot-attribute-invalid/input.svelte
 create mode 100644 test/validator/samples/svelte-slot-placement-2/errors.json
 create mode 100644 test/validator/samples/svelte-slot-placement-2/input.svelte
 create mode 100644 test/validator/samples/svelte-slot-placement/errors.json
 create mode 100644 test/validator/samples/svelte-slot-placement/input.svelte
 create mode 100644 test/validator/samples/svg-child-component-declared-namespace/input.svelte
 create mode 100644 test/validator/samples/svg-child-component-declared-namespace/warnings.json
 create mode 100644 test/validator/samples/tag-custom-element-options-missing/input.svelte
 create mode 100644 test/validator/samples/tag-custom-element-options-missing/warnings.json
 create mode 100644 test/validator/samples/tag-custom-element-options-true/_config.js
 create mode 100644 test/validator/samples/tag-custom-element-options-true/input.svelte
 create mode 100644 test/validator/samples/tag-invalid/errors.json
 create mode 100644 test/validator/samples/tag-invalid/input.svelte
 create mode 100644 test/validator/samples/tag-non-string/errors.json
 create mode 100644 test/validator/samples/tag-non-string/input.svelte
 create mode 100644 test/validator/samples/textarea-value-children/errors.json
 create mode 100644 test/validator/samples/textarea-value-children/input.svelte
 create mode 100644 test/validator/samples/title-no-attributes/errors.json
 create mode 100644 test/validator/samples/title-no-attributes/input.svelte
 create mode 100644 test/validator/samples/title-no-children/errors.json
 create mode 100644 test/validator/samples/title-no-children/input.svelte
 create mode 100644 test/validator/samples/transition-duplicate-in-transition/errors.json
 create mode 100644 test/validator/samples/transition-duplicate-in-transition/input.svelte
 create mode 100644 test/validator/samples/transition-duplicate-in/errors.json
 create mode 100644 test/validator/samples/transition-duplicate-in/input.svelte
 create mode 100644 test/validator/samples/transition-duplicate-out-transition/errors.json
 create mode 100644 test/validator/samples/transition-duplicate-out-transition/input.svelte
 create mode 100644 test/validator/samples/transition-duplicate-out/errors.json
 create mode 100644 test/validator/samples/transition-duplicate-out/input.svelte
 create mode 100644 test/validator/samples/transition-duplicate-transition-in/errors.json
 create mode 100644 test/validator/samples/transition-duplicate-transition-in/input.svelte
 create mode 100644 test/validator/samples/transition-duplicate-transition-out/errors.json
 create mode 100644 test/validator/samples/transition-duplicate-transition-out/input.svelte
 create mode 100644 test/validator/samples/transition-duplicate-transition/errors.json
 create mode 100644 test/validator/samples/transition-duplicate-transition/input.svelte
 create mode 100644 test/validator/samples/transition-missing/input.svelte
 create mode 100644 test/validator/samples/transition-missing/warnings.json
 create mode 100644 test/validator/samples/transition-on-component/errors.json
 create mode 100644 test/validator/samples/transition-on-component/input.svelte
 create mode 100644 test/validator/samples/undefined-value-global/input.svelte
 create mode 100644 test/validator/samples/undefined-value-global/warnings.json
 create mode 100644 test/validator/samples/undefined-value/input.svelte
 create mode 100644 test/validator/samples/undefined-value/warnings.json
 create mode 100644 test/validator/samples/unreferenced-variables-each/input.svelte
 create mode 100644 test/validator/samples/unreferenced-variables-each/warnings.json
 create mode 100644 test/validator/samples/unreferenced-variables/input.svelte
 create mode 100644 test/validator/samples/unreferenced-variables/warnings.json
 create mode 100644 test/validator/samples/use-the-platform/input.svelte
 create mode 100644 test/validator/samples/use-the-platform/warnings.json
 create mode 100644 test/validator/samples/window-binding-invalid-innerwidth/errors.json
 create mode 100644 test/validator/samples/window-binding-invalid-innerwidth/input.svelte
 create mode 100644 test/validator/samples/window-binding-invalid-value/errors.json
 create mode 100644 test/validator/samples/window-binding-invalid-value/input.svelte
 create mode 100644 test/validator/samples/window-binding-invalid-width/errors.json
 create mode 100644 test/validator/samples/window-binding-invalid-width/input.svelte
 create mode 100644 test/validator/samples/window-binding-invalid/errors.json
 create mode 100644 test/validator/samples/window-binding-invalid/input.svelte
 create mode 100644 test/validator/samples/window-binding-online/errors.json
 create mode 100644 test/validator/samples/window-binding-online/input.svelte
 create mode 100644 test/vars/index.ts
 create mode 100644 test/vars/samples/$$props-logicless/_config.js
 create mode 100644 test/vars/samples/$$props-logicless/input.svelte
 create mode 100644 test/vars/samples/$$props/_config.js
 create mode 100644 test/vars/samples/$$props/input.svelte
 create mode 100644 test/vars/samples/actions/_config.js
 create mode 100644 test/vars/samples/actions/input.svelte
 create mode 100644 test/vars/samples/animations/_config.js
 create mode 100644 test/vars/samples/animations/input.svelte
 create mode 100644 test/vars/samples/assumed-global/_config.js
 create mode 100644 test/vars/samples/assumed-global/input.svelte
 create mode 100644 test/vars/samples/component-namespaced/_config.js
 create mode 100644 test/vars/samples/component-namespaced/input.svelte
 create mode 100644 test/vars/samples/duplicate-globals/_config.js
 create mode 100644 test/vars/samples/duplicate-globals/input.svelte
 create mode 100644 test/vars/samples/duplicate-non-hoistable/_config.js
 create mode 100644 test/vars/samples/duplicate-non-hoistable/input.svelte
 create mode 100644 test/vars/samples/duplicate-vars/_config.js
 create mode 100644 test/vars/samples/duplicate-vars/input.svelte
 create mode 100644 test/vars/samples/implicit-reactive/_config.js
 create mode 100644 test/vars/samples/implicit-reactive/input.svelte
 create mode 100644 test/vars/samples/imports/_config.js
 create mode 100644 test/vars/samples/imports/input.svelte
 create mode 100644 test/vars/samples/modules-vars/_config.js
 create mode 100644 test/vars/samples/modules-vars/input.svelte
 create mode 100644 test/vars/samples/mutated-vs-reassigned-bindings/_config.js
 create mode 100644 test/vars/samples/mutated-vs-reassigned-bindings/input.svelte
 create mode 100644 test/vars/samples/mutated-vs-reassigned/_config.js
 create mode 100644 test/vars/samples/mutated-vs-reassigned/input.svelte
 create mode 100644 test/vars/samples/props/_config.js
 create mode 100644 test/vars/samples/props/input.svelte
 create mode 100644 test/vars/samples/referenced-from-script/_config.js
 create mode 100644 test/vars/samples/referenced-from-script/input.svelte
 create mode 100644 test/vars/samples/store-referenced/_config.js
 create mode 100644 test/vars/samples/store-referenced/input.svelte
 create mode 100644 test/vars/samples/store-unreferenced/_config.js
 create mode 100644 test/vars/samples/store-unreferenced/input.svelte
 create mode 100644 test/vars/samples/template-references/_config.js
 create mode 100644 test/vars/samples/template-references/input.svelte
 create mode 100644 test/vars/samples/transitions/_config.js
 create mode 100644 test/vars/samples/transitions/input.svelte
 create mode 100644 test/vars/samples/undeclared/_config.js
 create mode 100644 test/vars/samples/undeclared/input.svelte
 create mode 100644 test/vars/samples/vars-report-false/_config.js
 create mode 100644 test/vars/samples/vars-report-false/input.svelte
 create mode 100644 test/vars/samples/vars-report-full-noscript/_config.js
 create mode 100644 test/vars/samples/vars-report-full-noscript/input.svelte
 create mode 100644 test/vars/samples/vars-report-full-script/_config.js
 create mode 100644 test/vars/samples/vars-report-full-script/input.svelte
 create mode 100644 test/vars/samples/vars-report-full/_config.js
 create mode 100644 test/vars/samples/vars-report-full/input.svelte
 create mode 100644 tsconfig.json

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000000..90846de5ee
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,15 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = tab
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+
+[test/**/expected.css]
+insert_final_newline = false
+
+[{package.json,.travis.yml,.eslintrc.json}]
+indent_style = space
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000000..d123c10530
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,17 @@
+**/_actual.js
+**/expected.js
+_output
+test/*/samples/*/output.js
+
+# automatically generated
+internal_exports.ts
+
+# output files
+animate/*.js
+esing/*.js
+internal/*.js
+motion/*.js
+store/*.js
+transition/*.js
+index.js
+compiler.js
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000000..a093de610b
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,14 @@
+module.exports = {
+	root: true,
+	extends: '@sveltejs',
+	settings: {
+		'import/core-modules': [
+			'svelte',
+			'svelte/internal',
+			'svelte/store',
+			'svelte/easing',
+			'estree'
+		],
+		'svelte3/compiler': require('./compiler')
+	}
+};
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000000..a299a4435a
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,3 @@
+/site/** -linguist-detectable
+/test/**/samples/** -linguist-detectable
+/**/*.svelte linguist-detectable
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 0000000000..d632634540
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1 @@
+open_collective: svelte
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
new file mode 100644
index 0000000000..7daff3f1ab
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE.md
@@ -0,0 +1,29 @@
+------
+Before filing an issue we'd appreciate it if you could take a moment to ensure
+there isn't already an open issue or pull-request.
+-----
+
+If there's an existing issue, please add a :+1: reaction to the description of
+the issue. One way we prioritize issues is by the number of :+1: reactions on
+their descriptions. Please DO NOT add `+1` or :+1: comments.
+
+### Feature requests and proposals
+
+We're excited to hear how we can make Svelte better. Please add as much detail
+as you can on your use case. To propose an implementation of a large feature or
+change, please create an [RFC](https://github.com/sveltejs/rfcs).
+
+### Bugs
+
+If you're filing an issue about a bug please include as much information
+as you can including the following.
+
+- Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10)
+- Your operating system: (e.x. OS X 10, Windows XP, etc)
+- Svelte version (Please check you can reproduce the issue with the latest release!)
+- Whether your project uses Webpack or Rollup
+
+- *Repeatable steps to reproduce the issue*
+
+Thanks for being part of Svelte!
+-------
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
new file mode 100644
index 0000000000..38a971864b
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -0,0 +1,50 @@
+name: "\U0001F41E Bug report"
+description: Report an issue with Svelte
+labels: ["triage: bug"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report!
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!
+      placeholder: Bug description
+    validations:
+      required: true
+  - type: textarea
+    id: reproduction
+    attributes:
+      label: Reproduction
+      description: Please provide a link to a repo or REPL that can reproduce the problem you ran into. If a report is vague (e.g. just a generic error message) and has no reproduction, it will receive a "need reproduction" label. If no reproduction is provided within a reasonable time-frame, the issue will be closed.
+      placeholder: Reproduction
+    validations:
+      required: true
+  - type: textarea
+    id: logs
+    attributes:
+      label: Logs
+      description: "Please include browser console and server logs around the time this bug occurred. Optional if provided reproduction. Please try not to insert an image but copy paste the log text."
+      render: shell
+  - type: textarea
+    id: system-info
+    attributes:
+      label: System Info
+      description: Output of `npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers`
+      render: shell
+      placeholder: System, Binaries, Browsers
+    validations:
+      required: true
+  - type: dropdown
+    id: severity
+    attributes:
+      label: Severity
+      description: Select the severity of this issue
+      options:
+        - annoyance
+        - blocking an upgrade
+        - blocking all usage of svelte
+    validations:
+      required: true
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 0000000000..ee3e5a41b9
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Discord Chat
+    url: https://svelte.dev/chat
+    about: Ask questions and discuss with other Svelte users in real time.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
new file mode 100644
index 0000000000..2174f851a0
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -0,0 +1,42 @@
+name: "Feature Request"
+description: Request a new Svelte feature
+labels: [enhancement]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to request this feature! If your feature request is complex or substantial enough to warrant in-depth discussion, maintainers may close the issue and ask you to open an [RFC](https://github.com/sveltejs/rfcs).
+  - type: textarea
+    id: problem
+    attributes:
+      label: Describe the problem
+      description: Please provide a clear and concise description the problem this feature would solve. The more information you can provide here, the better.
+      placeholder: I'm always frustrated when...
+    validations:
+      required: true
+  - type: textarea
+    id: solution
+    attributes:
+      label: Describe the proposed solution
+      description: Please provide a clear and concise description of what you would like to happen.
+      placeholder: I would like to see...
+    validations:
+      required: true
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Alternatives considered
+      description: "Please provide a clear and concise description of any alternative solutions or features you've considered."
+    validations:
+      required: true
+  - type: dropdown
+    id: importance
+    attributes:
+      label: Importance
+      description: How important is this feature to you?
+      options:
+        - nice to have
+        - would make my life easier
+        - i cannot use svelte without it
+    validations:
+      required: true
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000000..7de5a35e13
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,8 @@
+### Before submitting the PR, please make sure you do the following
+- [ ] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
+- [ ] Prefix your PR title with `[feat]`, `[fix]`, `[chore]`, or `[docs]`.
+- [ ] This message body should clearly illustrate what problems it solves.
+- [ ] Ideally, include a test that fails without this PR but passes with it.
+
+### Tests
+-  [ ] Run the tests with `npm test` and lint the project with `npm run lint`
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000000..bbfde04f67
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,41 @@
+name: CI
+on: [push, pull_request]
+jobs:
+  Tests:
+    runs-on: ${{ matrix.os }}
+    timeout-minutes: 15
+    strategy:
+      matrix:
+        node-version: [8, 10, 12, 14, 16]
+        os: [ubuntu-latest, windows-latest, macOS-latest]
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: npm
+      - run: npm install
+      - run: npm test
+        env:
+          CI: true
+  Lint:
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v2
+        with:
+          cache: npm
+      - run: 'npm i && npm run lint'
+  Unit:
+    runs-on: ${{ matrix.os }}
+    timeout-minutes: 10
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest, macOS-latest]
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v2
+        with:
+          cache: npm
+      - run: 'npm i && npm run test:unit'
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
new file mode 100644
index 0000000000..ea6e0f5a60
--- /dev/null
+++ b/.github/workflows/docs.yml
@@ -0,0 +1,28 @@
+name: Docs
+
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - site/content/**
+
+jobs:
+  release:
+    name: Deploy docs
+    runs-on: ubuntu-latest
+    steps:
+      - name: my-app-install token
+        id: github-app
+        uses: getsentry/action-github-app-token@v1
+        with:
+          app_id: ${{ secrets.GH_APP_ID }}
+          private_key: ${{ secrets.GH_APP_PRIVATE_KEY }}
+
+      - name: run deploy docs workflow
+        uses: 'sveltejs/action-deploy-docs/dispatch@main'
+        with:
+          repo: 'svelte'
+          branch: 'master'
+          docs_path: 'site/content'
+          token: ${{ steps.github-app.outputs.token }}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000..478a6f5ceb
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,23 @@
+.idea
+.DS_Store
+.vscode
+node_modules
+*.map
+/src/compiler/compile/internal_exports.ts
+/compiler.d.ts
+/compiler.*js
+/index.*js
+/ssr.*js
+/action
+/internal
+/store
+/easing
+/motion
+/transition
+/animate
+/scratch/
+/test/*/samples/_
+/yarn-error.log
+_actual*.*
+_output
+/types
diff --git a/.mocharc.js b/.mocharc.js
new file mode 100644
index 0000000000..e55f26099e
--- /dev/null
+++ b/.mocharc.js
@@ -0,0 +1,14 @@
+module.exports = {
+	file: [
+		'test/test.ts'
+	],
+	require: [
+		'sucrase/register'
+	]
+};
+
+// add coverage options when running 'npx c8 mocha'
+if (process.env.NODE_V8_COVERAGE) {
+	module.exports.fullTrace = true;
+	module.exports.require.push('source-map-support/register');
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000000..9dca374b76
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,2443 @@
+# Svelte changelog
+
+## Unreleased
+
+* Faster SSR ([#5701](https://github.com/sveltejs/svelte/pull/5701))
+* Fix `class:` directive updates with `<svelte:element>` ([#7521](https://github.com/sveltejs/svelte/issues/7521), [#7571](https://github.com/sveltejs/svelte/issues/7571))
+
+## 3.48.0
+
+* Allow creating cancelable custom events with `createEventDispatcher` ([#4623](https://github.com/sveltejs/svelte/issues/4623))
+* Support `{@const}` tag in `{#if}` blocks [#7241](https://github.com/sveltejs/svelte/issues/7241)
+* Return the context object in `setContext` [#7427](https://github.com/sveltejs/svelte/issues/7427)
+* Allow comments inside `{#each}` blocks when using `animate:` ([#3999](https://github.com/sveltejs/svelte/issues/3999))
+* Fix `|local` transitions in `{#key}` blocks ([#5950](https://github.com/sveltejs/svelte/issues/5950))
+* Support svg namespace for `{@html}` ([#7002](https://github.com/sveltejs/svelte/issues/7002), [#7450](https://github.com/sveltejs/svelte/issues/7450))
+* Fix `{@const}` tag not working inside a component when there's no `let:` [#7189](https://github.com/sveltejs/svelte/issues/7189)
+* Remove extraneous leading newline inside `<pre>` and `<textarea>` ([#7264](https://github.com/sveltejs/svelte/issues/7264))
+* Fix erroneous setting of `textContent` for `<template>` elements ([#7297](https://github.com/sveltejs/svelte/pull/7297))
+* Fix value of `let:` bindings not updating in certain cases ([#7440](https://github.com/sveltejs/svelte/issues/7440))
+* Fix handling of void tags in `<svelte:element>` ([#7449](https://github.com/sveltejs/svelte/issues/7449))
+* Fix handling of boolean attributes in `<svelte:element>` ([#7478](https://github.com/sveltejs/svelte/issues/7478))
+* Add special style scoping handling of `[open]` selectors on `<dialog>` elements ([#7495](https://github.com/sveltejs/svelte/issues/7494))
+
+## 3.47.0
+
+* Add support for dynamic elements through `<svelte:element>` ([#2324](https://github.com/sveltejs/svelte/issues/2324))
+* Miscellaneous variable context fixes in `{@const}` ([#7222](https://github.com/sveltejs/svelte/pull/7222))
+* Fix `{#key}` block not being reactive when the key variable is not otherwise used ([#7408](https://github.com/sveltejs/svelte/issues/7408))
+* Add `Symbol` as a known global ([#7418](https://github.com/sveltejs/svelte/issues/7418))
+
+## 3.46.6
+
+* Actually include action TypeScript interface in published package ([#7407](https://github.com/sveltejs/svelte/pull/7407))
+
+## 3.46.5
+
+* Add TypeScript interfaces for typing actions ([#6538](https://github.com/sveltejs/svelte/issues/6538))
+* Do not generate `unused-export-let` warning inside `<script context="module">` blocks ([#7055](https://github.com/sveltejs/svelte/issues/7055))
+* Do not collapse whitespace-only CSS vars ([#7152](https://github.com/sveltejs/svelte/issues/7152))
+* Add `aria-description` to the list of allowed ARIA attributes ([#7301](https://github.com/sveltejs/svelte/issues/7301))
+* Fix attribute escaping during SSR ([#7327](https://github.com/sveltejs/svelte/issues/7327))
+* Prevent `.innerHTML` optimization from being used when `style:` directive is present ([#7386](https://github.com/sveltejs/svelte/issues/7386))
+
+## 3.46.4
+
+* Avoid `maximum call stack size exceeded` errors on large components ([#4694](https://github.com/sveltejs/svelte/issues/4694))
+* Preserve leading space with `preserveWhitespace: true` ([#4731](https://github.com/sveltejs/svelte/issues/4731))
+* Preserve leading space in `<pre>` tags ([#6437](https://github.com/sveltejs/svelte/issues/6437))
+* Improve error message when trying to use `style:` directives on inline components ([#7177](https://github.com/sveltejs/svelte/issues/7177))
+* Add `FormData` as a known global ([#7199](https://github.com/sveltejs/svelte/pull/7199))
+* Mark `css`/`instance`/`module` AST properties as optional in types ([#7204](https://github.com/sveltejs/svelte/pull/7204))
+
+## 3.46.3
+
+* Ignore whitespace in `{#each}` blocks when containing elements with `animate:` ([#5477](https://github.com/sveltejs/svelte/pull/5477))
+* Throw compiler error when variable in `context="instance"` collides with import in `context="module"` ([#7090](https://github.com/sveltejs/svelte/issues/7090))
+* Fix compiler crash when `{@const}` contains arrow functions ([#7134](https://github.com/sveltejs/svelte/issues/7134))
+
+## 3.46.2
+
+* Export `FlipParams` interface from `svelte/animate` ([#7103](https://github.com/sveltejs/svelte/issues/7103))
+* Fix `style:` directive reactivity inside `{#each}` block ([#7136](https://github.com/sveltejs/svelte/issues/7136))
+
+## 3.46.1
+
+* Handle `style:kebab-case` directives ([#7122](https://github.com/sveltejs/svelte/issues/7122))
+* Improve AST produced for `style:` directives ([#7127](https://github.com/sveltejs/svelte/pull/7127))
+
+## 3.46.0
+
+* Implement `{@const}` tag ([RFC #33](https://github.com/sveltejs/rfcs/pull/33), [#6413](https://github.com/sveltejs/svelte/pull/6413))
+* Implement `style:` directive ([RFC #42](https://github.com/sveltejs/rfcs/pull/42), [#5923](https://github.com/sveltejs/svelte/pull/5923))
+* Fix style manager conflicts when using multiple Svelte instances ([#7026](https://github.com/sveltejs/svelte/issues/7026))
+* Fix hydration when using `{@html}` ([#7115](https://github.com/sveltejs/svelte/issues/7115))
+
+## 3.45.0
+
+* Fix non-boolean attribute rendering in SSR to render truthy values as-is ([#6121](https://github.com/sveltejs/svelte/issues/6121))
+* Fix binding to a member expression also invalidating the member property ([#6921](https://github.com/sveltejs/svelte/issues/6921))
+* Fix default values in `{#each}`/etc. destructurings not being considered references for the purposes of compiler warnings ([#6964](https://github.com/sveltejs/svelte/issues/6964))
+* Fix `{:else if}` value incorrectly being cached ([#7043](https://github.com/sveltejs/svelte/pull/7043))
+* Add `a11y-no-redundant-roles` warning ([#7067](https://github.com/sveltejs/svelte/pull/7067))
+* Fix code generation error with arrow functions whose bodies are object destructuring assignments ([#7087](https://github.com/sveltejs/svelte/issues/7087))
+
+## 3.44.3
+
+* Fix `bind:this` binding inside `onMount` for manually instantiated component ([#6760](https://github.com/sveltejs/svelte/issues/6760))
+* Prevent cursor jumps with one-way binding for other `type="text"`-like `<input>`s ([#6941](https://github.com/sveltejs/svelte/pull/6941))
+* Exclude `async` loops from `loopGuardTimeout` ([#6945](https://github.com/sveltejs/svelte/issues/6945))
+
+## 3.44.2
+
+* Fix overly restrictive preprocessor types ([#6904](https://github.com/sveltejs/svelte/pull/6904))
+* More specific typing for crossfade function - returns a tuple, not an array ([#6926](https://github.com/sveltejs/svelte/issues/6926))
+* Add `URLSearchParams` as a known global ([#6938](https://github.com/sveltejs/svelte/pull/6938))
+* Add `types` field to `exports` map ([#6939](https://github.com/sveltejs/svelte/issues/6939))
+
+## 3.44.1
+
+* Fix code generation when a multi-line `return` statement contains comments ([code-red#36](https://github.com/Rich-Harris/code-red/issues/36))
+* Fix code generation when `for`/`if`/`while` statements have empty bodies ([#6884](https://github.com/sveltejs/svelte/issues/6884))
+
+## 3.44.0
+
+* Add `enableSourcemap` compiler option ([#6835](https://github.com/sveltejs/svelte/pull/6835))
+
+## 3.43.2
+
+* Fix regression where user-specified `import`s were not rewritten according to the `sveltePath` option ([#6834](https://github.com/sveltejs/svelte/issues/6834))
+
+## 3.43.1
+
+* Prevent a rejecting promise used in `{#await}` during SSR from appearing as an unhandled rejection ([#6789](https://github.com/sveltejs/svelte/issues/6789))
+
+## 3.43.0
+
+* Use export map to expose no-op versions of lifecycle functions for SSR ([#6743](https://github.com/sveltejs/svelte/pull/6743))
+* Prefer `context` passed to component constructor, even when running synchronously in another component ([#6753](https://github.com/sveltejs/svelte/issues/6753))
+* Handle preprocessors that return empty sourcemaps ([#6757](https://github.com/sveltejs/svelte/pull/6757))
+
+## 3.42.6
+
+* Hide private preprocess typings ([#6622](https://github.com/sveltejs/svelte/issues/6622))
+* Fix reactive function in `{:else if}` expression not being properly re-run ([#6727](https://github.com/sveltejs/svelte/pull/6727))
+
+## 3.42.5
+
+* In `draw` transition, account for `stroke-linecap` in determining length ([#4540](https://github.com/sveltejs/svelte/issues/4540))
+* Fix regression with destructuring assignments with default values ([#6699](https://github.com/sveltejs/svelte/issues/6699))
+
+## 3.42.4
+
+* Only apply optimized `src` attribute handling when in an `html` namespace ([#6575](https://github.com/sveltejs/svelte/issues/6575))
+* Fix styles for transitions and animations being attached to the wrong `document` in `<iframe>`s ([#6637](https://github.com/sveltejs/svelte/issues/6637))
+* Fix `<select>` with a `{...spread}` attribute that didn't provide a `value` key getting its value improperly unset ([#6675](https://github.com/sveltejs/svelte/issues/6675))
+
+## 3.42.3
+
+* Add `BigInt` as a known global ([#6671](https://github.com/sveltejs/svelte/pull/6671))
+* Fix regression where `onDestroy` in `svelte/ssr` was improperly a no-op ([#6676](https://github.com/sveltejs/svelte/issues/6676))
+
+## 3.42.2
+
+* Collapse whitespace in `class` and `style` attributes ([#6004](https://github.com/sveltejs/svelte/issues/6004))
+* Deselect all `<option>`s in a `<select>` where the bound `value` doesn't match any of them ([#6126](https://github.com/sveltejs/svelte/issues/6126))
+* In hydrated components, only rely on helpers for creating the types of elements present in the component ([#6555](https://github.com/sveltejs/svelte/issues/6555))
+* Add `HTMLElement` and `SVGElement` as known globals ([#6643](https://github.com/sveltejs/svelte/issues/6643))
+* Account for scaling in `flip` animations ([#6657](https://github.com/sveltejs/svelte/issues/6657))
+
+## 3.42.1
+
+* Fix regression with reordering keyed `{#each}` blocks when compiling with hydration enabled ([#6561](https://github.com/sveltejs/svelte/issues/6561))
+
+## 3.42.0
+
+* Allow `use:actions` to be used on `<svelte:body>` ([#3163](https://github.com/sveltejs/svelte/issues/3163))
+* Improve parser errors for certain invalid components ([#6259](https://github.com/sveltejs/svelte/issues/6259), [#6288](https://github.com/sveltejs/svelte/issues/6288))
+* Fix paths in generator JS sourcemaps to be relative ([#6598](https://github.com/sveltejs/svelte/pull/6598))
+* Fix overzealous warnings about `context="module"` variables not being reactive ([#6606](https://github.com/sveltejs/svelte/issues/6606))
+
+## 3.41.0
+
+* Support `export { ... } from` syntax in components ([#2214](https://github.com/sveltejs/svelte/issues/2214))
+* Support `export let { ... } =` syntax in components ([#5612](https://github.com/sveltejs/svelte/issues/5612))
+* Support `{#await ... then/catch}` without a variable for the resolved/rejected value ([#6270](https://github.com/sveltejs/svelte/issues/6270))
+
+## 3.40.3
+
+* Fix `<slot>` data when a transition is cancelled before completing ([#5394](https://github.com/sveltejs/svelte/issues/5394))
+* Fix destructuring into variables beginning with `$` so that they result in store updates ([#5653](https://github.com/sveltejs/svelte/issues/5653))
+* Fix `in:` transition configuration not properly updating when it's changed after its initial creation ([#6505](https://github.com/sveltejs/svelte/issues/6505))
+* Fix applying `:global()` for `>` selector combinator ([#6550](https://github.com/sveltejs/svelte/issues/6550))
+* Fix mounting component at detached DOM node ([#6567](https://github.com/sveltejs/svelte/issues/6567))
+
+## 3.40.2
+
+* Fix dynamic `autofocus={...}` attribute handling ([#4995](https://github.com/sveltejs/svelte/issues/4995))
+* Add filename to combined source map if needed ([#6089](https://github.com/sveltejs/svelte/pull/6089))
+* In AST, parse empty attribute values as an empty string ([#6286](https://github.com/sveltejs/svelte/issues/6286))
+* Fix tracking whether transition has started ([#6399](https://github.com/sveltejs/svelte/pull/6399))
+* Fix incorrect scoping of `:global()` selectors ([#6550](https://github.com/sveltejs/svelte/issues/6550))
+
+## 3.40.1
+
+* Fix store reactivity regression when using reactive statements ([#6557](https://github.com/sveltejs/svelte/issues/6557))
+
+## 3.40.0
+
+* Support rendering a component in a shadow DOM ([#5869](https://github.com/sveltejs/svelte/issues/5869))
+* Fix `:root` selector being erroneously scoped to component ([#4767](https://github.com/sveltejs/svelte/issues/4767))
+* Fix `.end` in AST for expressions inside attributes ([#6258](https://github.com/sveltejs/svelte/issues/6258))
+* Fix one-way `<select>` binding when it has a spread attribute ([#6433](https://github.com/sveltejs/svelte/issues/6433))
+* Various hydration improvements and fixes ([#6449](https://github.com/sveltejs/svelte/pull/6449))
+* Use smaller versions of internal helpers when compiling without hydration support ([#6462](https://github.com/sveltejs/svelte/issues/6462))
+* Fix two-way binding of values when updating through synchronous component accessors ([#6502](https://github.com/sveltejs/svelte/issues/6502))
+
+## 3.39.0
+
+* Support `bind:group` in SSR ([#4621](https://github.com/sveltejs/svelte/pull/4621))
+* Add a11y warning `a11y-mouse-events-have-key-events` which checks that `mouseover`/`mouseout` are accompanied by `focus`/`blur` event handlers ([#5938](https://github.com/sveltejs/svelte/pull/5938))
+* Make it possible to silence more warnings ([#5954](https://github.com/sveltejs/svelte/issues/5954))
+* Add `|trusted` event modifier ([#6137](https://github.com/sveltejs/svelte/issues/6137))
+* Add `varsReport` compiler option to include all variables reference in the component in the `variables` report ([#6192](https://github.com/sveltejs/svelte/pull/6192))
+* Add `errorMode` compiler option to try to continue compiling when an error is detected ([#6194](https://github.com/sveltejs/svelte/pull/6194))
+* Expose `svelte/ssr` which exports lifecycle methods as no-ops ([#6416](https://github.com/sveltejs/svelte/pull/6416))
+* Add `getAllContexts` ([#6447](https://github.com/sveltejs/svelte/issues/6447))
+* Throw proper error for `export default function() {}` and `export default class {}` rather than crashing the compiler ([#3275](https://github.com/sveltejs/svelte/issues/3275))
+* Fix SSR rendering of falsy `input` values ([#4551](https://github.com/sveltejs/svelte/issues/4551))
+* Fix `preserveComments` in SSR mode ([#4730](https://github.com/sveltejs/svelte/issues/4730))
+* Do not warn if `context="module"` variables are not the only dependencies in reactive statements ([#5954](https://github.com/sveltejs/svelte/issues/5954))
+* Stop checking `a11y-media-has-caption` a11y warning on `<audio>` elements ([#6054](https://github.com/sveltejs/svelte/issues/6054))
+* Fix erroneous "unknown prop" warning when using slot on a component ([#6065](https://github.com/sveltejs/svelte/pull/6065))
+* Add sourcemaps to all HTML elements ([#6092](https://github.com/sveltejs/svelte/issues/6092))
+* Relax `derived` function signature ([#6178](https://github.com/sveltejs/svelte/issues/6178))
+* Throw compiler error when passing empty directive names ([#6299](https://github.com/sveltejs/svelte/issues/6299))
+* Fix compiler error when using `:where()` inside `:global()` ([#6434](https://github.com/sveltejs/svelte/issues/6434))
+* Fix ordering of elements in keyed `{#each}` ([#6444](https://github.com/sveltejs/svelte/issues/6444))
+* Remove deprecated a11y warning `a11y-no-onchange warning` ([#6457](https://github.com/sveltejs/svelte/issues/6457))
+* Fix `:global()` with pseudo element not being seen as global ([#6468](https://github.com/sveltejs/svelte/issues/6468))
+* Allow `:global()` to contain multiple selectors when it is not part of a larger selector ([#6477](https://github.com/sveltejs/svelte/issues/6477))
+* Make `<script>` and `<style>` end tag parsing more robust ([#6511](https://github.com/sveltejs/svelte/pull/6511))
+
+## 3.38.3
+
+* Speed up hydration by reducing amount of element reorderings ([#4308](https://github.com/sveltejs/svelte/issues/4308))
+* Fix escaping attribute values when using a spread in SSR ([#5756](https://github.com/sveltejs/svelte/issues/5756))
+* Throw compiler error when `:global()` contains multiple selectors ([#5907](https://github.com/sveltejs/svelte/issues/5907))
+* Give explicit error rather than crashing when an attribute shorthand `{}` is empty ([#6086](https://github.com/sveltejs/svelte/issues/6086))
+* Make `<textarea>` end tag parsing more robust ([#6276](https://github.com/sveltejs/svelte/issues/6276))
+* Fix `:global(...):some-pseudoclass` selectors not being seen as global ([#6306](https://github.com/sveltejs/svelte/issues/6306))
+* Fix type signatures of `writable` and `readable` so it's possible to call them without arguments ([#6291](https://github.com/sveltejs/svelte/issues/6291), [#6345](https://github.com/sveltejs/svelte/issues/6345))
+* Preserve `this` in bubbled events ([#6310](https://github.com/sveltejs/svelte/issues/6310))
+* Fix slot props not updating when transition is aborted ([#6386](https://github.com/sveltejs/svelte/issues/6386))
+* Fix generic props relationship in `SvelteComponentTyped` ([#6400](https://github.com/sveltejs/svelte/pull/6400))
+
+## 3.38.2
+
+* Revert hydration optimisation for the time being ([#6279](https://github.com/sveltejs/svelte/issues/6279))
+
+## 3.38.1
+
+* Fix hydration regression ([#6274](https://github.com/sveltejs/svelte/issues/6274))
+
+## 3.38.0
+
+* Avoid recreating DOM elements during hydration ([#1067](https://github.com/sveltejs/svelte/issues/1067))
+* Support passing CSS custom properties to component ([#5628](https://github.com/sveltejs/svelte/issues/5628))
+* Support `:global()` as part of compound CSS selectors ([#6222](https://github.com/sveltejs/svelte/issues/6222))
+* Fix updating `<slot>` contents when there's an aborted transition ([#3542](https://github.com/sveltejs/svelte/issues/3542))
+* Fix setting boolean attributes on custom elements ([#5951](https://github.com/sveltejs/svelte/issues/5951))
+* Add missing function overload for `derived` to allow explicitly setting an initial value for non-async derived stores ([#6172](https://github.com/sveltejs/svelte/pull/6172))
+* Fix dynamic `href` values erroneously triggering a11y warnings ([#5990](https://github.com/sveltejs/svelte/issues/5990))
+* Fix scope leak when updating an `{#await}` block ([#6173](https://github.com/sveltejs/svelte/issues/6173))
+* Pass full markup source to `script`/`style` preprocessors ([#6169](https://github.com/sveltejs/svelte/pull/6169))
+* Fix `crossfade` types to mark `fallback` as optional ([#6201](https://github.com/sveltejs/svelte/pull/6201))
+* Add missing "context" typing to `SvelteComponent` constructor options ([#6236](https://github.com/sveltejs/svelte/pull/6236))
+* Don't automatically switch to `svg` namespace when in `foreign` namespace ([#6257](https://github.com/sveltejs/svelte/issues/6257))
+
+## 3.37.0
+
+* Allow root-level context to be passed to the component constructor ([#6032](https://github.com/sveltejs/svelte/pull/6032))
+
+## 3.36.0
+
+* Add `this: void` typing to store functions ([#6094](https://github.com/sveltejs/svelte/pull/6094))
+* Export `Spring`, `Tweened` and `EasingFunction` interfaces ([#6070](https://github.com/sveltejs/svelte/issues/6070), [#6056](https://github.com/sveltejs/svelte/pull/6056))
+* Export interfaces for transition parameters ([#5207](https://github.com/sveltejs/svelte/issues/5207))
+* Export store's useful TypeScript definitions ([#5864](https://github.com/sveltejs/svelte/issues/5864))
+* Fix previous breaking change to `svelte/preprocess` types location ([#6100](https://github.com/sveltejs/svelte/pull/6100))
+* Fix missing slotted elements in AST ([#6066](https://github.com/sveltejs/svelte/issues/6066))
+
+## 3.35.0
+
+* Implement slotted components and `<svelte:fragment slot="...">` ([#1037](https://github.com/sveltejs/svelte/issues/1037), [#2079](https://github.com/sveltejs/svelte/issues/2079))
+* Fix reactivity bug where `slot="..."` is specified after attributes that should be reactive ([#5626](https://github.com/sveltejs/svelte/issues/5626))
+
+## 3.34.0
+
+* Add a `cssHash` option for controlling the classname used for CSS scoping ([#570](https://github.com/sveltejs/svelte/issues/570))
+
+## 3.33.0
+
+* In custom elements, call `onMount` functions when connecting and clean up when disconnecting ([#1152](https://github.com/sveltejs/svelte/issues/1152), [#2227](https://github.com/sveltejs/svelte/issues/2227), [#4522](https://github.com/sveltejs/svelte/pull/4522))
+* Allow destructured defaults to refer to other variables ([#5066](https://github.com/sveltejs/svelte/issues/5066))
+* Do not emit `contextual-store` warnings for function parameters or declared variables ([#6008](https://github.com/sveltejs/svelte/pull/6008))
+
+## 3.32.3
+
+* Fix removal of lone `:host` selectors ([#5982](https://github.com/sveltejs/svelte/issues/5982))
+
+## 3.32.2
+
+* Fix unnecessary additional invalidation with `<Component bind:prop={obj.foo}/>` ([#3075](https://github.com/sveltejs/svelte/issues/3075), [#4447](https://github.com/sveltejs/svelte/issues/4447), [#5555](https://github.com/sveltejs/svelte/issues/5555))
+* Fix scoping of selectors with `:global()` and `~` sibling combinators ([#5499](https://github.com/sveltejs/svelte/issues/5499))
+* Fix removal of `:host` selectors as unused when compiling to a custom element ([#5946](https://github.com/sveltejs/svelte/issues/5946))
+
+## 3.32.1
+
+* Warn when using `module` variables reactively, and close weird reactivity loophole ([#5847](https://github.com/sveltejs/svelte/pull/5847))
+* Throw a parser error for `class:` directives with an empty class name ([#5858](https://github.com/sveltejs/svelte/issues/5858))
+* Fix extraneous store subscription in SSR mode ([#5883](https://github.com/sveltejs/svelte/issues/5883))
+* Don't emit update code for `class:` directives whose expression is not dynamic ([#5919](https://github.com/sveltejs/svelte/issues/5919))
+* Fix type inference for derived stores ([#5935](https://github.com/sveltejs/svelte/pull/5935))
+* Make parameters of built-in animations and transitions optional ([#5936](https://github.com/sveltejs/svelte/pull/5936))
+* Make `SvelteComponentDev` typings more forgiving ([#5937](https://github.com/sveltejs/svelte/pull/5937))
+* Fix `foreign` elements incorrectly disallowing `bind:this` ([#5942](https://github.com/sveltejs/svelte/pull/5942))
+
+## 3.32.0
+
+* Allow multiple instances of the same action on an element ([#5516](https://github.com/sveltejs/svelte/issues/5516))
+* Support `foreign` namespace, which disables certain HTML5-specific behaviour and checks ([#5652](https://github.com/sveltejs/svelte/pull/5652))
+* Support inline comment sourcemaps in code from preprocessors ([#5854](https://github.com/sveltejs/svelte/pull/5854))
+
+## 3.31.2
+
+* Rework SSR store handling to subscribe and unsubscribe as in DOM mode ([#3375](https://github.com/sveltejs/svelte/issues/3375), [#3582](https://github.com/sveltejs/svelte/issues/3582), [#3636](https://github.com/sveltejs/svelte/issues/3636))
+* Fix error when removing elements that are already transitioning out ([#5789](https://github.com/sveltejs/svelte/issues/5789), [#5808](https://github.com/sveltejs/svelte/issues/5808))
+* Fix duplicate content race condition with `{#await}` blocks and out transitions ([#5815](https://github.com/sveltejs/svelte/issues/5815))
+* Deconflict variable names used for contextual actions ([#5834](https://github.com/sveltejs/svelte/issues/5834))
+
+## 3.31.1
+
+* Fix scrolling of element with resize listener by making the `<iframe>` have `z-index: -1` ([#5448](https://github.com/sveltejs/svelte/issues/5448))
+* Fix location of automatically declared reactive variables ([#5749](https://github.com/sveltejs/svelte/issues/5749))
+* Warn when using `className` or `htmlFor` attributes ([#5777](https://github.com/sveltejs/svelte/issues/5777))
+* Fix checkbox `bind:group` in keyed `{#each}` where the array can be reordered ([#5779](https://github.com/sveltejs/svelte/issues/5779))
+* Fix checkbox `bind:group` in nested `{#each}` contexts ([#5811](https://github.com/sveltejs/svelte/issues/5811))
+* Add graphics roles as known ARIA roles ([#5822](https://github.com/sveltejs/svelte/pull/5822))
+* Fix local transitions if a parent has a cancelled outro transition ([#5829](https://github.com/sveltejs/svelte/issues/5829))
+* Support `use:obj.some.deep.function` as actions ([#5844](https://github.com/sveltejs/svelte/issues/5844))
+
+## 3.31.0
+
+* Use a separate `SvelteComponentTyped` interface for typed components ([#5738](https://github.com/sveltejs/svelte/pull/5738))
+
+## 3.30.1
+
+* Support consuming decoded sourcemaps as created by the `source-map` library's `SourceMapGenerator` ([#5722](https://github.com/sveltejs/svelte/issues/5722))
+* Actually export `hasContext` ([#5726](https://github.com/sveltejs/svelte/issues/5726))
+
+## 3.30.0
+
+* Add a typed `SvelteComponent` interface ([#5431](https://github.com/sveltejs/svelte/pull/5431))
+* Support spread into `<slot>` props ([#5456](https://github.com/sveltejs/svelte/issues/5456))
+* Fix setting reactive dependencies which don't appear in the template to `undefined` ([#5538](https://github.com/sveltejs/svelte/issues/5538))
+* Support preprocessor sourcemaps during compilation ([#5584](https://github.com/sveltejs/svelte/pull/5584))
+* Fix ordering of elements when using `{#if}` inside `{#key}` ([#5680](https://github.com/sveltejs/svelte/issues/5680))
+* Add `hasContext` lifecycle function ([#5690](https://github.com/sveltejs/svelte/pull/5690))
+* Fix missing `walk` types in `svelte/compiler` ([#5696](https://github.com/sveltejs/svelte/pull/5696))
+
+## 3.29.7
+
+* Include `./register` in exports map ([#5670](https://github.com/sveltejs/svelte/issues/5670))
+
+## 3.29.6
+
+* Include `./package.json` in export map ([#5659](https://github.com/sveltejs/svelte/issues/5659))
+
+## 3.29.5
+
+* Fix `$$props` and `$$restProps` when compiling to a custom element ([#5482](https://github.com/sveltejs/svelte/issues/5482))
+* Include an export map in `package.json` ([#5556](https://github.com/sveltejs/svelte/issues/5556))
+* Fix function calls in `<slot>` props that use contextual values ([#5565](https://github.com/sveltejs/svelte/issues/5565))
+* Fix handling aborted transitions in `{:else}` blocks ([#5573](https://github.com/sveltejs/svelte/issues/5573))
+* Add `Element` and `Node` to known globals ([#5586](https://github.com/sveltejs/svelte/issues/5586))
+* Fix `$$slots` when compiling to custom elements ([#5594](https://github.com/sveltejs/svelte/issues/5594))
+* Fix internal `import`s so that we're exposing a valid ES module ([#5617](https://github.com/sveltejs/svelte/issues/5617))
+
+## 3.29.4
+
+* Fix code generation error with `??` alongside logical operators ([#5558](https://github.com/sveltejs/svelte/issues/5558))
+
+## 3.29.3
+
+* Hopefully actually republish with proper UMD build for use in the REPL
+
+## 3.29.2
+
+* Republish with proper UMD build for use in the REPL
+
+## 3.29.1
+
+* Fix compiler hanging on `<slot slot="...">` ([#5475](https://github.com/sveltejs/svelte/issues/5475))
+* Fix types on `get` function in `svelte/store` ([#5483](https://github.com/sveltejs/svelte/pull/5483))
+* Add missing `end` field on ASTs for non-top-level `<style>` elements ([#5487](https://github.com/sveltejs/svelte/pull/5487))
+* Fix `{#if}` inside `{#await}` with destructuring ([#5508](https://github.com/sveltejs/svelte/issues/5508))
+* Fix types on lifecycle hooks ([#5529](https://github.com/sveltejs/svelte/pull/5529))
+
+## 3.29.0
+
+* Support `<slot slot="...">` ([#2079](https://github.com/sveltejs/svelte/issues/2079))
+* Fix unmounting components with a bidirectional transition with a delay ([#4954](https://github.com/sveltejs/svelte/issues/4954))
+* Add types to `get` function in `svelte/store` ([#5269](https://github.com/sveltejs/svelte/pull/5269))
+* Add a warning when a component looks like it's trying to use another component without beginning with a capital letter ([#5302](https://github.com/sveltejs/svelte/pull/5302))
+* Add `EventSource` to known globals ([#5463](https://github.com/sveltejs/svelte/issues/5463))
+* Fix compiler exception with `~`/`+` combinators and `{...spread}` attributes ([#5465](https://github.com/sveltejs/svelte/issues/5465))
+
+## 3.28.0
+
+* Add `{#key}` block for keying arbitrary content on an expression ([#1469](https://github.com/sveltejs/svelte/issues/1469))
+
+## 3.27.0
+
+* Add `|nonpassive` event modifier, explicitly passing `passive: false` ([#2068](https://github.com/sveltejs/svelte/issues/2068))
+* Scope CSS selectors with `~` and `+` combinators ([#3104](https://github.com/sveltejs/svelte/issues/3104))
+* Fix keyed `{#each}` not reacting to key changing ([#5444](https://github.com/sveltejs/svelte/issues/5444))
+* Fix destructuring into store values ([#5449](https://github.com/sveltejs/svelte/issues/5449))
+* Fix erroneous `missing-declaration` warning with `use:obj.method` ([#5451](https://github.com/sveltejs/svelte/issues/5451))
+
+## 3.26.0
+
+* Support `use:obj.method` as actions ([#3935](https://github.com/sveltejs/svelte/issues/3935))
+* Support `_` as numeric separator ([#5407](https://github.com/sveltejs/svelte/issues/5407))
+* Fix assignments to properties on store values ([#5412](https://github.com/sveltejs/svelte/issues/5412))
+* Add special style scoping handling of `[open]` selectors on `<details>` elements ([#5421](https://github.com/sveltejs/svelte/issues/5421))
+* Support `import.meta` in template expressions ([#5422](https://github.com/sveltejs/svelte/issues/5422))
+
+## 3.25.1
+
+* Fix specificity of certain styles involving a child selector ([#4795](https://github.com/sveltejs/svelte/issues/4795))
+* Fix transitions that are parameterised with stores ([#5244](https://github.com/sveltejs/svelte/issues/5244))
+* Fix scoping of styles involving child selector and `*` ([#5370](https://github.com/sveltejs/svelte/issues/5370))
+* Fix destructuring which reassigns stores ([#5388](https://github.com/sveltejs/svelte/issues/5388))
+* Fix `{#await}`s with no `{:catch}` getting stuck unresolved if the promise rejects ([#5401](https://github.com/sveltejs/svelte/issues/5401))
+
+## 3.25.0
+
+* Use `null` rather than `undefined` for coerced bound value of `<input type="number">` ([#1701](https://github.com/sveltejs/svelte/issues/1701))
+* Expose object of which slots have received content in `$$slots` ([#2106](https://github.com/sveltejs/svelte/issues/2106))
+* Correctly disallow using lifecycle hooks after synchronous component initialisation ([#4259](https://github.com/sveltejs/svelte/issues/4259), [#4899](https://github.com/sveltejs/svelte/issues/4899))
+* Re-throw an unhandled rejection when an `{#await}` block with no `{:catch}` gets a rejection ([#5129](https://github.com/sveltejs/svelte/issues/5129))
+* Add types to `createEventDispatcher` ([#5211](https://github.com/sveltejs/svelte/issues/5211))
+* In SSR mode, do not automatically declare variables for reactive assignments to member expressions ([#5247](https://github.com/sveltejs/svelte/issues/5247))
+* Include selector in message of `unused-css-selector` warning ([#5252](https://github.com/sveltejs/svelte/issues/5252))
+* Fix using `<Namespaced.Component/>`s in child `{#await}`/`{#each}` contexts ([#5255](https://github.com/sveltejs/svelte/issues/5255))
+* Fix using `<svelte:component>` in `{:catch}` ([#5259](https://github.com/sveltejs/svelte/issues/5259))
+* Fix setting one-way bound `<input>` `value` to `undefined` when it has spread attributes ([#5270](https://github.com/sveltejs/svelte/issues/5270))
+* Fix deep two-way bindings inside an `{#each}` involving a store ([#5286](https://github.com/sveltejs/svelte/issues/5286))
+* Use valid XHTML for elements that are optimised and inserted with `.innerHTML` ([#5315](https://github.com/sveltejs/svelte/issues/5315))
+* Fix reactivity of `$$props` in slot fallback content ([#5367](https://github.com/sveltejs/svelte/issues/5367))
+
+## 3.24.1
+
+* Prevent duplicate invalidation with certain two-way component bindings ([#3180](https://github.com/sveltejs/svelte/issues/3180), [#5117](https://github.com/sveltejs/svelte/issues/5117), [#5144](https://github.com/sveltejs/svelte/issues/5144))
+* Fix reactivity when passing `$$props` to a `<slot>` ([#3364](https://github.com/sveltejs/svelte/issues/3364))
+* Fix transitions on `{#each}` `{:else}` ([#4970](https://github.com/sveltejs/svelte/issues/4970))
+* Fix unneeded invalidation of `$$props` and `$$restProps` ([#4993](https://github.com/sveltejs/svelte/issues/4993), [#5118](https://github.com/sveltejs/svelte/issues/5118))
+* Provide better compiler error message when mismatched tags are due to autoclosing of tags ([#5049](https://github.com/sveltejs/svelte/issues/5049))
+* Add `a11y-label-has-associated-control` warning ([#5074](https://github.com/sveltejs/svelte/pull/5074))
+* Add `a11y-media-has-caption` warning ([#5075](https://github.com/sveltejs/svelte/pull/5075))
+* Fix `bind:group` when using contextual reference ([#5174](https://github.com/sveltejs/svelte/issues/5174))
+
+## 3.24.0
+
+* Support nullish coalescing (`??`) and optional chaining (`?.`) operators ([#1972](https://github.com/sveltejs/svelte/issues/1972))
+* Support `import.meta` ([#4379](https://github.com/sveltejs/svelte/issues/4379))
+* Fix only setting `<input>` values when they're changed when there are spread attributes ([#4418](https://github.com/sveltejs/svelte/issues/4418))
+* Fix placement of `{@html}` when used at the root of a slot, at the root of a component, or in `<svelte:head>` ([#5012](https://github.com/sveltejs/svelte/issues/5012), [#5071](https://github.com/sveltejs/svelte/pull/5071))
+* Fix certain handling of two-way bound `contenteditable` elements ([#5018](https://github.com/sveltejs/svelte/issues/5018))
+* Fix handling of `import`ed value that is used as a store and is also mutated ([#5019](https://github.com/sveltejs/svelte/issues/5019))
+* Do not display `a11y-missing-content` warning on elements with `contenteditable` bindings ([#5020](https://github.com/sveltejs/svelte/issues/5020))
+* Fix handling of `this` in inline function expressions in the template ([#5033](https://github.com/sveltejs/svelte/issues/5033))
+* Fix collapsing HTML with static content ([#5040](https://github.com/sveltejs/svelte/issues/5040))
+* Prevent use of `$store` at compile time when top-level `store` has been shadowed ([#5048](https://github.com/sveltejs/svelte/issues/5048))
+* Update `<select>` with one-way `value` binding when the available `<option>`s change ([#5051](https://github.com/sveltejs/svelte/issues/5051))
+* Fix published `tweened` types so the `.set()` and `.update()` options are optional ([#5062](https://github.com/sveltejs/svelte/issues/5062))
+* Fix contextual `bind:this` inside `{#each}` block ([#5067](https://github.com/sveltejs/svelte/issues/5067))
+* Preprocess self-closing `<script>` and `<style>` tags ([#5080](https://github.com/sveltejs/svelte/issues/5080))
+* Fix types for animation- and transition-related param objects so each param is optional ([#5083](https://github.com/sveltejs/svelte/pull/5083))
+
+## 3.23.2
+
+* Fix `bind:group` inside `{#each}` ([#3243](https://github.com/sveltejs/svelte/issues/3243))
+* Don't crash when using an arrow function as a statement ([#4617](https://github.com/sveltejs/svelte/issues/4617))
+* Deconflict `bind:this` variable ([#4636](https://github.com/sveltejs/svelte/issues/4636))
+
+## 3.23.1
+
+* Fix checkbox `bind:group` when multiple options have the same value ([#4397](https://github.com/sveltejs/svelte/issues/4397))
+* Fix `bind:this` to the value of an `{#each}` block ([#4517](https://github.com/sveltejs/svelte/issues/4517))
+* Fix reactivity when assigning to contextual `{#each}` variable ([#4574](https://github.com/sveltejs/svelte/issues/4574), [#4744](https://github.com/sveltejs/svelte/issues/4744))
+* Fix binding to contextual `{#each}` values that shadow outer names ([#4757](https://github.com/sveltejs/svelte/issues/4757))
+* Work around EdgeHTML DOM issue when removing attributes during hydration ([#4911](https://github.com/sveltejs/svelte/pull/4911))
+* Throw CSS parser error when `:global()` does not contain a selector ([#4930](https://github.com/sveltejs/svelte/issues/4930))
+
+## 3.23.0
+
+* Update `<select>` with `bind:value` when the available `<option>`s change ([#1764](https://github.com/sveltejs/svelte/issues/1764))
+* Add `muted` binding for media elements ([#2998](https://github.com/sveltejs/svelte/issues/2998))
+* Fix inconsistencies when setting a two-way bound `<input>` to `undefined` ([#3569](https://github.com/sveltejs/svelte/issues/3569))
+* Fix setting `<select multiple>` when there are spread attributes ([#4392](https://github.com/sveltejs/svelte/issues/4392))
+* Fix let-less `<slot>` with context overflow ([#4624](https://github.com/sveltejs/svelte/issues/4624))
+* Fix resize listening on certain older browsers ([#4752](https://github.com/sveltejs/svelte/issues/4752))
+* Add `a11y-no-onchange` warning ([#4788](https://github.com/sveltejs/svelte/pull/4788))
+* Fix `use:` actions being recreated when a keyed `{#each}` is reordered ([#4693](https://github.com/sveltejs/svelte/issues/4693))
+* Fix `{@html}` when using tags that can only appear inside certain tags ([#4852](https://github.com/sveltejs/svelte/issues/4852))
+* Fix reactivity when binding directly to `{#each}` context ([#4879](https://github.com/sveltejs/svelte/issues/4879))
+
+## 3.22.3
+
+* Support default values and trailing commas in destructuring `{#await}` ([#4560](https://github.com/sveltejs/svelte/issues/4560), [#4810](https://github.com/sveltejs/svelte/issues/4810))
+* Fix handling of `tweened` store when set using `duration: 0` ([#4799](https://github.com/sveltejs/svelte/issues/4799), [#4846](https://github.com/sveltejs/svelte/issues/4846))
+* Fix setting `value` attribute with `bind:group` and attribute spread ([#4803](https://github.com/sveltejs/svelte/issues/4803))
+* Fix issue with compound `{#if}` block involving static condition, dynamic condition, and inline component ([#4840](https://github.com/sveltejs/svelte/issues/4840))
+* Update a11y warnings per ARIA 1.2 working draft ([#4844](https://github.com/sveltejs/svelte/issues/4844))
+
+## 3.22.2
+
+* Fix compiler exception with `a11y-img-redundant-alt` and value-less `alt` attribute ([#4777](https://github.com/sveltejs/svelte/issues/4777))
+
+## 3.22.1
+
+* Fix compiler exception with `a11y-img-redundant-alt` and dynamic `alt` attribute ([#4770](https://github.com/sveltejs/svelte/issues/4770))
+
+## 3.22.0
+
+* Fix misaligned line numbers in source maps ([#3906](https://github.com/sveltejs/svelte/issues/3906))
+* Make setting a `tweened` store using `duration: 0` instantly update the value ([#4399](https://github.com/sveltejs/svelte/issues/4399))
+* Fix reactivity with imported values that are then mutated ([#4555](https://github.com/sveltejs/svelte/issues/4555))
+* Fix contextual dynamic `bind:this` inside `{#each}` block ([#4686](https://github.com/sveltejs/svelte/issues/4686))
+* Do not display a11y warning about missing `href` for `<a>` with `name` or `id` ([#4697](https://github.com/sveltejs/svelte/issues/4697))
+* Disable infinite loop guard inside generators ([#4698](https://github.com/sveltejs/svelte/issues/4698))
+* Display `a11y-invalid-attribute` warning for `href="javascript:..."` ([#4733](https://github.com/sveltejs/svelte/pull/4733))
+* Implement `a11y-img-redundant-alt` warning ([#4750](https://github.com/sveltejs/svelte/pull/4750))
+* Fix variable name conflict with component called `<Anchor>` ([#4768](https://github.com/sveltejs/svelte/issues/4768))
+
+## 3.21.0
+
+* Support dimension bindings in cross-origin environments ([#2147](https://github.com/sveltejs/svelte/issues/2147))
+* Fix several related outro bugs ([#3202](https://github.com/sveltejs/svelte/issues/3202), [#3410](https://github.com/sveltejs/svelte/issues/3410), [#3685](https://github.com/sveltejs/svelte/issues/3685), [#4620](https://github.com/sveltejs/svelte/issues/4620), [#4630](https://github.com/sveltejs/svelte/issues/4630))
+* Try using `globalThis` rather than `globals` for the benefit of non-Node servers and web workers ([#3561](https://github.com/sveltejs/svelte/issues/3561), [#4545](https://github.com/sveltejs/svelte/issues/4545))
+* Support `{#await ... catch ...}` syntax shorthand ([#3623](https://github.com/sveltejs/svelte/issues/3623))
+* Fix attaching of JS debugging comments to HTML comments ([#4565](https://github.com/sveltejs/svelte/issues/4565))
+* Fix `<svelte:component/>` within `<slot/>` ([#4597](https://github.com/sveltejs/svelte/issues/4597))
+* Fix bug with updating simple `{#if}` blocks ([#4629](https://github.com/sveltejs/svelte/issues/4629))
+* Fix issues with `<input type="number">` updates ([#4631](https://github.com/sveltejs/svelte/issues/4631), [#4687](https://github.com/sveltejs/svelte/issues/4687))
+* Prevent illegal attribute names ([#4648](https://github.com/sveltejs/svelte/issues/4648))
+* Fix `{#if}` block directly within `<slot/>` ([#4703](https://github.com/sveltejs/svelte/issues/4703))
+
+## 3.20.1
+
+* Fix compiler regression with slots ([#4562](https://github.com/sveltejs/svelte/issues/4562))
+
+## 3.20.0
+
+* Allow destructuring in `{#await}` blocks ([#1851](https://github.com/sveltejs/svelte/issues/1851))
+* Allow `<svelte:self>` to be used in a slot ([#2798](https://github.com/sveltejs/svelte/issues/2798))
+* Expose object of unknown props in `$$restProps` ([#2930](https://github.com/sveltejs/svelte/issues/2930))
+* Prevent passing named slots other than from the top level within a component ([#3385](https://github.com/sveltejs/svelte/issues/3385))
+* Allow transitions and animations to work within iframes ([#3624](https://github.com/sveltejs/svelte/issues/3624))
+* Fix initialising slot fallbacks when unnecessary ([#3763](https://github.com/sveltejs/svelte/issues/3763))
+* Disallow binding directly to `const` variables ([#4479](https://github.com/sveltejs/svelte/issues/4479))
+* Fix re-attaching event handlers on keyed `{#each}` blocks ([#4491](https://github.com/sveltejs/svelte/issues/4491))
+* Fix updating keyed `{#each}` blocks with `{:else}` ([#4536](https://github.com/sveltejs/svelte/issues/4536), [#4549](https://github.com/sveltejs/svelte/issues/4549))
+* Fix hydration of top-level content ([#4542](https://github.com/sveltejs/svelte/issues/4542))
+
+## 3.19.2
+
+* In `dev` mode, display a runtime warning when a component is passed an unexpected slot ([#1020](https://github.com/sveltejs/svelte/issues/1020), [#1447](https://github.com/sveltejs/svelte/issues/1447))
+* In `vars` array, correctly indicate whether `module` variables are `mutated` or `reassigned` ([#3215](https://github.com/sveltejs/svelte/issues/3215))
+* Fix spread props not updating in certain situations ([#3521](https://github.com/sveltejs/svelte/issues/3521), [#4480](https://github.com/sveltejs/svelte/issues/4480))
+* Use the fallback content for slots if they are passed only whitespace ([#4092](https://github.com/sveltejs/svelte/issues/4092))
+* Fix bitmask overflow for `{#if}` blocks ([#4263](https://github.com/sveltejs/svelte/issues/4263))
+* In `dev` mode, check for unknown props even if the component has no writable props ([#4323](https://github.com/sveltejs/svelte/issues/4323))
+* Exclude global variables from `$capture_state` ([#4463](https://github.com/sveltejs/svelte/issues/4463))
+* Fix bitmask overflow for slots ([#4481](https://github.com/sveltejs/svelte/issues/4481))
+
+## 3.19.1
+
+* Do not treat modifications to `$$props` as updates to a store called `$props` ([#4368](https://github.com/sveltejs/svelte/issues/4368))
+* Deconflict `value` parameter name used in contextual bindings ([#4445](https://github.com/sveltejs/svelte/issues/4445))
+* Fix dev mode validation of `{#each}` blocks using strings ([#4450](https://github.com/sveltejs/svelte/issues/4450))
+
+## 3.19.0
+
+* Fix indirect bindings involving elements with spreads ([#3680](https://github.com/sveltejs/svelte/issues/3680))
+* `$capture_state`/`$inject_state` now act on the component's entire state, rather than its props ([#3822](https://github.com/sveltejs/svelte/pull/3822))
+* Warn when using `<Foo/>` and `Foo` is dynamic ([#4331](https://github.com/sveltejs/svelte/issues/4331))
+* Display compilation warnings in `svelte/register` in dev mode ([#4364](https://github.com/sveltejs/svelte/issues/4364))
+* Fix unneeded updating of keyed each blocks ([#4373](https://github.com/sveltejs/svelte/issues/4373))
+* Throw runtime error in dev mode for non-array-like values in `{#each}` blocks ([#4408](https://github.com/sveltejs/svelte/issues/4408))
+
+## 3.18.2
+
+* Fix binding to module-level variables ([#4086](https://github.com/sveltejs/svelte/issues/4086))
+* Improve parsing error messages when there is a pending unclosed tag ([#4131](https://github.com/sveltejs/svelte/issues/4131))
+* Disallow attribute/prop names from matching two-way-bound names or `{shorthand}` attribute/prop names ([#4325](https://github.com/sveltejs/svelte/issues/4325))
+* Improve performance of `flush()` by not using `.shift()` ([#4356](https://github.com/sveltejs/svelte/pull/4356))
+* Permit reserved keywords as destructuring keys in `{#each}` ([#4372](https://github.com/sveltejs/svelte/issues/4372))
+* Disallow reserved keywords in `{expressions}` ([#4372](https://github.com/sveltejs/svelte/issues/4372))
+* Fix code generation error with precedence of arrow functions ([#4384](https://github.com/sveltejs/svelte/issues/4384))
+* Fix event handlers that are dynamic via reactive declarations or stores ([#4388](https://github.com/sveltejs/svelte/issues/4388))
+* Fix invalidation in expressions like `++foo.bar` ([#4393](https://github.com/sveltejs/svelte/issues/4393))
+
+## 3.18.1
+
+* Fix code generation error with adjacent inline and block comments ([#4312](https://github.com/sveltejs/svelte/issues/4312))
+* Fix detection of unused CSS selectors that begin with a `:global()` but contain a scoped portion ([#4314](https://github.com/sveltejs/svelte/issues/4314))
+
+## 3.18.0
+
+* Fix infinite loop when instantiating another component during `onMount` ([#3218](https://github.com/sveltejs/svelte/issues/3218))
+* Make autosubscribing to a nullish store a no-op ([#2181](https://github.com/sveltejs/svelte/issues/2181))
+
+## 3.17.3
+
+* Fix updating a `<slot>` inside an `{#if}` or other block ([#4292](https://github.com/sveltejs/svelte/issues/4292))
+* Fix using RxJS observables in `derived` stores ([#4298](https://github.com/sveltejs/svelte/issues/4298))
+* Add dev mode check to disallow duplicate keys in a keyed `{#each}` ([#4301](https://github.com/sveltejs/svelte/issues/4301))
+* Fix hydration of `<title>` when starting from SSR-generated code with `hydratable: true` ([#4310](https://github.com/sveltejs/svelte/issues/4310))
+
+## 3.17.2
+
+* Fix removing attributes during hydration ([#1733](https://github.com/sveltejs/svelte/issues/1733))
+* Disallow two-way binding to a variable declared by an `{#await}` block ([#4012](https://github.com/sveltejs/svelte/issues/4012))
+* Allow access to `let:` variables in sibling attributes on slot root ([#4173](https://github.com/sveltejs/svelte/issues/4173))
+* Fix `~=` and class selector matching against values separated by any whitespace characters ([#4242](https://github.com/sveltejs/svelte/issues/4242))
+* Fix code generation for `await`ed expressions that need parentheses ([#4267](https://github.com/sveltejs/svelte/issues/4267))
+* Preserve JavaScript comments from the original component source where possible ([#4268](https://github.com/sveltejs/svelte/issues/4268))
+* Add some more known globals ([#4276](https://github.com/sveltejs/svelte/pull/4276))
+* Correctly apply event modifiers to `<svelte:body>` events ([#4278](https://github.com/sveltejs/svelte/issues/4278))
+
+## 3.17.1
+
+* Only attach SSR mode markers to a component's `<head>` elements when compiling with `hydratable: true` ([#4258](https://github.com/sveltejs/svelte/issues/4258))
+
+## 3.17.0
+
+* Remove old `<head>` elements during hydration so they aren't duplicated ([#1607](https://github.com/sveltejs/svelte/issues/1607))
+* Prevent text input cursor jumping in Safari with one-way binding ([#3449](https://github.com/sveltejs/svelte/issues/3449))
+* Expose compiler version in dev events ([#4047](https://github.com/sveltejs/svelte/issues/4047))
+* Don't run actions before their element is in the document ([#4166](https://github.com/sveltejs/svelte/issues/4166))
+* Fix reactive assignments with destructuring and stores where the destructured value should be undefined ([#4170](https://github.com/sveltejs/svelte/issues/4170))
+* Fix hydrating `{:else}` in `{#each}` ([#4202](https://github.com/sveltejs/svelte/issues/4202))
+* Do not automatically declare variables in reactive declarations when assigning to a member expression ([#4212](https://github.com/sveltejs/svelte/issues/4212))
+* Fix stringifying of attributes in SSR mode when there are spread attributes ([#4240](https://github.com/sveltejs/svelte/issues/4240))
+* Only render one `<title>` in SSR mode when multiple components provide one ([#4250](https://github.com/sveltejs/svelte/pull/4250))
+
+## 3.16.7
+
+* Also apply actions in the order they're given along with other directives ([#2446](https://github.com/sveltejs/svelte/issues/2446), [#4156](https://github.com/sveltejs/svelte/pull/4156))
+* Check whether a dynamic event handler is a function before calling it ([#4090](https://github.com/sveltejs/svelte/issues/4090))
+* Correctly mark event handlers as dynamic when they involve an expression used in a `bind:` elsewhere ([#4155](https://github.com/sveltejs/svelte/pull/4155))
+
+## 3.16.6
+
+* Fix CSS specificity bug when encapsulating styles ([#1277](https://github.com/sveltejs/svelte/issues/1277))
+* Apply directives in the order they're given ([#2446](https://github.com/sveltejs/svelte/issues/2446))
+* Fix destructuring in `let:` directives ([#2751](https://github.com/sveltejs/svelte/issues/2751))
+* Preserve whitespace around `<tspan>`s in `<svg>`s ([#3998](https://github.com/sveltejs/svelte/issues/3998))
+
+## 3.16.5
+
+* Better fix for cascading invalidations and fix some regressions ([#4098](https://github.com/sveltejs/svelte/issues/4098), [#4114](https://github.com/sveltejs/svelte/issues/4114), [#4120](https://github.com/sveltejs/svelte/issues/4120))
+
+## 3.16.4
+
+* Fix slots with props not propagating through to inner slots ([#4061](https://github.com/sveltejs/svelte/issues/4061))
+* Fix noting autosubscribed stores as `referenced` in `vars` for tooling ([#4081](https://github.com/sveltejs/svelte/issues/4081))
+* Fix cascading invalidations in certain situations ([#4094](https://github.com/sveltejs/svelte/issues/4094))
+
+## 3.16.3
+
+* Fix bitmask overflow when using slotted components ([#4077](https://github.com/sveltejs/svelte/issues/4077))
+* Remove unnecessary `$$invalidate` calls from init block ([#4018](https://github.com/sveltejs/svelte/issues/4018))
+
+## 3.16.2
+
+* Handle slot updates when parent component has a bitmask overflow  ([#4078](https://github.com/sveltejs/svelte/pull/4078))
+
+## 3.16.1
+
+* Fix unused export warning for props used as stores ([#4021](https://github.com/sveltejs/svelte/issues/4021))
+* Fix `{:then}` without resolved value containing `{#each}` ([#4022](https://github.com/sveltejs/svelte/issues/4022))
+* Fix incorrect code generated with `loopGuardTimeout` ([#4034](https://github.com/sveltejs/svelte/issues/4034))
+* Fix handling of bitmask overflow and globals ([#4037](https://github.com/sveltejs/svelte/issues/4037))
+* Fix `{:then}` containing `{#if}` ([#4044](https://github.com/sveltejs/svelte/issues/4044))
+* Fix bare `import`s in `format: 'cjs'` output mode ([#4055](https://github.com/sveltejs/svelte/issues/4050))
+* Warn when using a known global as a component name ([#4070](https://github.com/sveltejs/svelte/issues/4070))
+
+## 3.16.0
+
+* Use bitmasks to track changes ([#3945](https://github.com/sveltejs/svelte/pull/3945))
+* Fix heisenbug with component styles ([#3977](https://github.com/sveltejs/svelte/issues/3977))
+* Do not warn about missing expected props for `export function foo() {}` ([#3954](https://github.com/sveltejs/svelte/issues/3954))
+* Fix `context="module"` exports with the same name as an instance variable ([#3983](https://github.com/sveltejs/svelte/issues/3983))
+* Fix binding to contextual values from `{#each}` blocks referring to global variables ([#3992](https://github.com/sveltejs/svelte/issues/3992))
+* Use `requestAnimationFrame` callback argument for smoother transitions ([#4014](https://github.com/sveltejs/svelte/pull/4014))
+* Fix `listen_dev` argument order ([#4016](https://github.com/sveltejs/svelte/pull/4016))
+
+## 3.15.0
+
+* Hide commented sections from preprocessors ([#3894](https://github.com/sveltejs/svelte/pull/3894))
+* Add `seeking` and `ended` bindings to media elements ([#3650](https://github.com/sveltejs/svelte/pull/3650))
+* Add `videoWidth` and `videoHeight` bindings to video elements ([#3927](https://github.com/sveltejs/svelte/pull/3927))
+* Fix for dynamic event handlers ([#3934](https://github.com/sveltejs/svelte/pull/3934))
+* Handle scale transforms when using the `flip` animation ([#3555](https://github.com/sveltejs/svelte/issues/3555))
+* Fix some code generation bugs ([#3929](https://github.com/sveltejs/svelte/issues/3929), [#3939](https://github.com/sveltejs/svelte/issues/3939))
+* Add `aria-hidden="true"` to objects generated when adding resize-listeners, to improve accessibility ([#3948](https://github.com/sveltejs/svelte/issues/3948))
+
+## 3.14.1
+
+* Deconflict block method names with other variables ([#3900](https://github.com/sveltejs/svelte/issues/3900))
+* Fix entity encoding issue in text nodes with constant expressions ([#3911](https://github.com/sveltejs/svelte/issues/3911))
+* Make code for unknown prop warnings compatible with older js engines ([#3914](https://github.com/sveltejs/svelte/issues/3914))
+
+## 3.14.0
+
+* Add `loopGuardTimeout` option that augments `for`/`while` loops to prevent infinite loops, primarily for use in the REPL ([#3887](https://github.com/sveltejs/svelte/pull/3887))
+* Keep component bindings in sync when changed in reactive statements ([#3382](https://github.com/sveltejs/svelte/issues/3382))
+* Update attributes before bindings ([#3857](https://github.com/sveltejs/svelte/issues/3857))
+* Prevent variable naming conflict ([#3899](https://github.com/sveltejs/svelte/issues/3899))
+
+
+## 3.13.0
+
+* New structured code generation, which eliminates a number of edge cases and obscure bugs ([#3539](https://github.com/sveltejs/svelte/pull/3539))
+
+Also:
+
+* Fix `{#each}` context not shadowing outer scope when using `bind:` ([#1565](https://github.com/sveltejs/svelte/issues/1565))
+* Fix edge cases in matching selectors against elements ([#1710](https://github.com/sveltejs/svelte/issues/1710))
+* Fix several bugs related to interaction of `{...spread}` attributes with other features ([#2721](https://github.com/sveltejs/svelte/issues/2721), [#2916](https://github.com/sveltejs/svelte/issues/2916), [#3421](https://github.com/sveltejs/svelte/issues/3421), [#3681](https://github.com/sveltejs/svelte/issues/3681), [#3764](https://github.com/sveltejs/svelte/issues/3764), [#3790](https://github.com/sveltejs/svelte/issues/3790))
+* Allow exiting a reactive block early with `break $` ([#2828](https://github.com/sveltejs/svelte/issues/2828))
+* Fix binding to props that have been renamed with `export { ... as ... }` ([#3508](https://github.com/sveltejs/svelte/issues/3508))
+* Fix application of style scoping class in cases of ambiguity ([#3544](https://github.com/sveltejs/svelte/issues/3544))
+* Check attributes have changed before setting them to avoid image flicker ([#3579](https://github.com/sveltejs/svelte/pull/3579))
+* Fix generating malformed code for `{@debug}` tags with no dependencies ([#3588](https://github.com/sveltejs/svelte/issues/3588))
+* Fix generated code in specific case involving compound ifs and child components ([#3595](https://github.com/sveltejs/svelte/issues/3595))
+* Fix `bind:this` binding to a store ([#3591](https://github.com/sveltejs/svelte/issues/3591))
+* Use safer `HTMLElement` check before extending class ([#3608](https://github.com/sveltejs/svelte/issues/3608))
+* Add `location` as a known global ([#3619](https://github.com/sveltejs/svelte/pull/3619))
+* Support `{#await}` with `{:catch}` but no `{:then}` ([#3623](https://github.com/sveltejs/svelte/issues/3623))
+* Clean up dead code emitted for `<slot/>`s ([#3631](https://github.com/sveltejs/svelte/issues/3631))
+* Fix tracking of dependencies of compound assignments in reactive statements ([#3634](https://github.com/sveltejs/svelte/issues/3634))
+* Flush changes in newly attached block when using `{#await}` ([#3660](https://github.com/sveltejs/svelte/issues/3660))
+* Throw exception immediately when calling `createEventDispatcher()` after component instantiation ([#3667](https://github.com/sveltejs/svelte/pull/3667))
+* Fix globals shadowing contextual template scope ([#3674](https://github.com/sveltejs/svelte/issues/3674))
+* Fix `<svelte:window>` bindings to stores ([#3832](https://github.com/sveltejs/svelte/issues/3832))
+* Deconflict generated var names with builtins ([#3724](https://github.com/sveltejs/svelte/issues/3724))
+* Allow spring/tweened values to be initially undefined ([#3761](https://github.com/sveltejs/svelte/issues/3761))
+* Warn if using `<svelte:options tag="...">` without `customElement: true` option ([#3782](https://github.com/sveltejs/svelte/pull/3782))
+* Add `Event` to list of known globals ([#3810](https://github.com/sveltejs/svelte/pull/3810))
+* Throw helpful error on empty CSS declaration ([#3801](https://github.com/sveltejs/svelte/issues/3801))
+* Support `easing` param on `fade` transition ([#3823](https://github.com/sveltejs/svelte/pull/3823))
+* Generate valid names from filenames with unicode characters ([#3845](https://github.com/sveltejs/svelte/issues/3845))
+* Don't generate any code for markup-less components ([#2200](https://github.com/sveltejs/svelte/issues/2200))
+* Deconflict with internal name `block` ([#3854](https://github.com/sveltejs/svelte/issues/3854))
+* Set attributes before bindings, to prevent erroneous assignments to `input.files` ([#3828](https://github.com/sveltejs/svelte/issues/3828))
+* Smarter unused CSS detection ([#3825](https://github.com/sveltejs/svelte/pull/3825))
+* Allow dynamic event handlers ([#3040](https://github.com/sveltejs/svelte/issues/3040))
+* Prevent erroneous `"undefined"` class name ([#3876](https://github.com/sveltejs/svelte/pull/3876))
+* Prevent resetting of `src` attribute unless changed ([#3579](https://github.com/sveltejs/svelte/pull/3579))
+* Prevent hydration of void element 'children' ([#3882](https://github.com/sveltejs/svelte/issues/3882))
+* Hoist globals even if mentioned in `<script>` block ([#3745](https://github.com/sveltejs/svelte/pull/3745))
+
+
+## 3.12.1
+
+* Escape `@` symbols in props, again ([#3545](https://github.com/sveltejs/svelte/issues/3545))
+
+## 3.12.0
+
+* Fire events on `document` in development to facilitate dev tooling ([#3005](https://github.com/sveltejs/svelte/pull/3005))
+* Remove old props when the keys in spread props are removed ([#2282](https://github.com/sveltejs/svelte/issues/2282))
+
+## 3.11.0
+
+* `$capture_state` and `$inject_state` HMR hooks in dev mode ([#3148](https://github.com/sveltejs/svelte/pull/3148))
+* Allow unclosed tags inside if/each/etc blocks ([#2807](https://github.com/sveltejs/svelte/issues/2807))
+* Invalidate unreferenced store values inside `<script>` ([#3537](https://github.com/sveltejs/svelte/issues/3537))
+* Print `null` text when hydrating ([#3379](https://github.com/sveltejs/svelte/pull/3379))
+
+## 3.10.1
+
+* Preserve reactivity inside if block heads etc ([#3512](https://github.com/sveltejs/svelte/issues/3512))
+* Fix store bindings inside each blocks ([#3455](https://github.com/sveltejs/svelte/issues/3455))
+* Generate correct code for if-else blocks with static conditions ([#3505](https://github.com/sveltejs/svelte/issues/3505))
+* Avoid generating unnecessary component update code ([#3526](https://github.com/sveltejs/svelte/issues/3526))
+* Make `bind:currentTime` more reliable ([#3524](https://github.com/sveltejs/svelte/issues/3524))
+* Prevent errors when setting spread props on SVG elements ([#3522](https://github.com/sveltejs/svelte/issues/3522))
+
+## 3.10.0
+
+* Add `blur` transition ([#3477](https://github.com/sveltejs/svelte/pull/3477))
+* Prevent `<input type="number">` edge case with spread props ([#3426](https://github.com/sveltejs/svelte/issues/3426))
+* Robustify cyclical dependency detection, improve errors ([#3459](https://github.com/sveltejs/svelte/issues/3459))
+
+## 3.9.2
+
+* Fix handling of additional @-rules in style blocks ([#2995](https://github.com/sveltejs/svelte/pull/2995))
+* Fix if blocks with complex but static conditions ([#3447](https://github.com/sveltejs/svelte/issues/3447))
+
+## 3.9.1
+
+* Only update style properties if necessary ([#3433](https://github.com/sveltejs/svelte/issues/3433))
+* Only update if/await blocks if necessary ([#2355](https://github.com/sveltejs/svelte/issues/2355))
+* Set context correctly inside await blocks ([#2443](https://github.com/sveltejs/svelte/issues/2443))
+* Handle `!important` inline styles ([#1834](https://github.com/sveltejs/svelte/issues/1834))
+* Make index references reactive in event handlers inside keyed each blocks ([#2569](https://github.com/sveltejs/svelte/issues/2569))
+
+## 3.9.0
+
+* Support `is` attribute on elements, with a warning ([#3182](https://github.com/sveltejs/svelte/issues/3182))
+* Handle missing slot prop ([#3322](https://github.com/sveltejs/svelte/issues/3322))
+* Don't set undefined/null input values, unless previous value exists ([#1233](https://github.com/sveltejs/svelte/issues/1233))
+* Fix style attribute optimisation bailout ([#1830](https://github.com/sveltejs/svelte/issues/1830))
+
+## 3.8.1
+
+* Set SVG namespace for slotted elements ([#3321](https://github.com/sveltejs/svelte/issues/3321))
+
+## 3.8.0
+
+* Add `self` event modifier ([#3372](https://github.com/sveltejs/svelte/issues/3372))
+* Generate valid code when spreading literal ([#3185](https://github.com/sveltejs/svelte/issues/3185))
+* Coerce tag values to string before checking equality ([#2290](https://github.com/sveltejs/svelte/issues/2290))
+
+## 3.7.1
+
+* Assume `let` variables are dynamic for slots ([#3354](https://github.com/sveltejs/svelte/issues/3354))
+* Allow transition functions to return nothing ([#2246](https://github.com/sveltejs/svelte/pull/2246))
+
+## 3.7.0
+
+* Disable warnings via `svelte-ignore` comments ([#3351](https://github.com/sveltejs/svelte/pull/3351))
+* Throw if `$` or `$$...` is referenced as global ([#3272](https://github.com/sveltejs/svelte/issues/3272))
+* Remount HTML tags correctly ([#3329](https://github.com/sveltejs/svelte/pull/3329))
+* Treat data attributes like other attributes ([#3337](https://github.com/sveltejs/svelte/issues/3337))
+
+## 3.6.11
+
+* Handle reassigned RxJS observables ([#3304](https://github.com/sveltejs/svelte/issues/3304))
+* Remove commas from HTMLified attributes with multiple chunks ([#3341](https://github.com/sveltejs/svelte/issues/3341))
+* Prevent `class` on element with scoped styles from rendering as `undefined` ([#3283](https://github.com/sveltejs/svelte/issues/3283))
+* Allow references to index in key expression ([#3274](https://github.com/sveltejs/svelte/issues/3274))
+* Mark attribute selectors as used if corresponding binding exists ([#3281](https://github.com/sveltejs/svelte/issues/3281))
+* Preserve `async`/`*` when hoisting functions ([#3179](https://github.com/sveltejs/svelte/issues/3179))
+* Make `raf` a noop on server ([#3324](https://github.com/sveltejs/svelte/issues/3324))
+* Prevent erroneous a11y warning for image input with alt attribute ([#3331](https://github.com/sveltejs/svelte/issues/3331))
+* Add several well-known globals ([#3316](https://github.com/sveltejs/svelte/pull/3316))
+
+## 3.6.10
+
+* Use `change` event for file inputs ([#3226](https://github.com/sveltejs/svelte/issues/3226))
+* Always fire reactive declarations with `$$props` ([#3286](https://github.com/sveltejs/svelte/issues/3286))
+* More conservative spread prop updates ([#3289](https://github.com/sveltejs/svelte/issues/3289))
+* Quote props if necessary in SSR mode ([#3312](https://github.com/sveltejs/svelte/issues/3312))
+
+## 3.6.9
+
+* Always update derived stores with a derived input whose value does not change ([#3191](https://github.com/sveltejs/svelte/issues/3191))
+
+## 3.6.8
+
+* Preserve global keyframes that don't match local elements ([#3228](https://github.com/sveltejs/svelte/issues/3228))
+* Fix spread/`class:` combination ([#3242](https://github.com/sveltejs/svelte/pull/3242))
+* Never scope `:root` selector ([#3250](https://github.com/sveltejs/svelte/pull/3250))
+* Prevent trailing commas in function arguments ([#3255](https://github.com/sveltejs/svelte/pull/3260))
+
+## 3.6.7
+
+* Prevent corruption of outro callbacks with nested keyed each blocks ([#3209](https://github.com/sveltejs/svelte/pull/3209))
+* Prevent cursor jumping in bound input in Safari ([#3199](https://github.com/sveltejs/svelte/issues/3199))
+* Make resize listener object unfocusable ([#3206](https://github.com/sveltejs/svelte/issues/3206))
+
+## 3.6.6
+
+* Prevent dynamic components being detached twice ([#3113](https://github.com/sveltejs/svelte/issues/3113), [#2086](https://github.com/sveltejs/svelte/issues/2086))
+
+## 3.6.5
+
+* Handle RxJS-style observables with `get` ([#3153](https://github.com/sveltejs/svelte/issues/3153))
+* Pass `let` values to bindings ([#3140](https://github.com/sveltejs/svelte/issues/3140))
+* Escape `@` symbols in props ([#3173](https://github.com/sveltejs/svelte/issues/3173))
+* Scale crossfaded elements ([#3175](https://github.com/sveltejs/svelte/pull/3175))
+
+## 3.6.4
+
+* Run `onMount` functions in correct order, and before initial `afterUpdate` functions ([#2281](https://github.com/sveltejs/svelte/issues/2281))
+* Fix code transformation for shorthand methods ([#2906](https://github.com/sveltejs/svelte/issues/2906))
+* Fix assignments in inline functions ([#3038](https://github.com/sveltejs/svelte/issues/3038))
+
+## 3.6.3
+
+* Fix await block mounting inside removed if block ([#1496](https://github.com/sveltejs/svelte/issues/1496))
+* Update when element references are removed ([#2034](https://github.com/sveltejs/svelte/issues/2034))
+* Don't attempt to serialize non-string values in server-rendered bindings ([#2135](https://github.com/sveltejs/svelte/issues/2135))
+* Recognise dependencies in function expressions ([#2693](https://github.com/sveltejs/svelte/issues/2693))
+* Scope pseudo-class selectors without class/type ([#1705](https://github.com/sveltejs/svelte/issues/1705))
+* Allow nested at-rules ([#3135](https://github.com/sveltejs/svelte/issues/3135))
+* Allow attributes to contain `=` characters ([#3149](https://github.com/sveltejs/svelte/pull/3149))
+
+## 3.6.2
+
+* Fix placement of each-else block ([#2917](https://github.com/sveltejs/svelte/issues/2917))
+* Make context accessible to `bind:this` ([#2806](https://github.com/sveltejs/svelte/issues/2806))
+* Pass hoisted values to slots ([#2586](https://github.com/sveltejs/svelte/issues/2586))
+
+## 3.6.1
+
+* Fix escaping of `@` in dev mode debug filename ([#3114](https://github.com/sveltejs/svelte/pull/3114))
+
+## 3.6.0
+
+* Add `innerHTML` and `textContent` bindings for `contenteditable` elements ([#2996](https://github.com/sveltejs/svelte/pull/2996))
+* Fix destructuring assignments where targets are member expressions ([#3092](https://github.com/sveltejs/svelte/issues/3092))
+* Deconflict with used globals ([#2963](https://github.com/sveltejs/svelte/pull/2963))
+* Always run `onDestroy` functions, not just for detaching components ([#3058](https://github.com/sveltejs/svelte/issues/3058))
+* Fix scope analysis around catch clauses ([#3064](https://github.com/sveltejs/svelte/issues/3064))
+* Add error constructors to known globals ([#3064](https://github.com/sveltejs/svelte/issues/3064))
+* Always bail out of hoisting on encountering local state in function definition ([#3044](https://github.com/sveltejs/svelte/issues/3044))
+* Fix incorrect merging of top-level text nodes ([#3027](https://github.com/sveltejs/svelte/issues/3027))
+* Handle removal of components in each blocks without props ([#3035](https://github.com/sveltejs/svelte/issues/3035))
+* Only call subscriber once when resubscribing to a store ([#3022](https://github.com/sveltejs/svelte/issues/3022))
+* Check for existence of dynamic component before introing ([#3054](https://github.com/sveltejs/svelte/issues/3054))
+* Sanitize names of bubbled event handlers ([#2923](https://github.com/sveltejs/svelte/issues/2923))
+
+
+## 3.5.4
+
+* Preserve whitespace at the boundaries of `{#each}` blocks ([#713](https://github.com/sveltejs/svelte/issues/713))
+* Fix dynamic `bind:this` on components ([#2333](https://github.com/sveltejs/svelte/issues/2333))
+* Fix binding to values in a component when it uses `$$props` ([#2725](https://github.com/sveltejs/svelte/issues/2725))
+* Fix parsing ambiguous HTML entities ([#3071](https://github.com/sveltejs/svelte/pull/3071))
+
+## 3.5.3
+
+* Don't double-destroy keyed each blocks with outros ([#3055](https://github.com/sveltejs/svelte/issues/3055))
+
+## 3.5.2
+
+* Prevent duplicated outros causing errors ([#3001](https://github.com/sveltejs/svelte/issues/3001))
+* Fix automatic name generation ([#2843](https://github.com/sveltejs/svelte/issues/2843))
+* Fix .d.ts stubs ([#3009](https://github.com/sveltejs/svelte/pull/3009))
+* Don't strip non-breaking spaces ([#3014](https://github.com/sveltejs/svelte/issues/3014))
+* Fix `requestAnimationFrame` context ([#2933](https://github.com/sveltejs/svelte/issues/2933))
+* Allow space before attribute value ([#3026](https://github.com/sveltejs/svelte/issues/3026))
+* Remove null/undefined attributes ([#1434](https://github.com/sveltejs/svelte/issues/1434))
+* Fix whitespace in static markup ([#3030](https://github.com/sveltejs/svelte/pull/3030))
+
+## 3.5.1
+
+* Accommodate webpack idiosyncracies
+
+## 3.5.0
+
+* Update package folder structure ([#2887](https://github.com/sveltejs/svelte/pull/2887))
+* Support `once` modifier on component events ([#2654](https://github.com/sveltejs/svelte/issues/2654))
+* Allow empty `<title>` tags ([#2980](https://github.com/sveltejs/svelte/issues/2980))
+* Render textarea binding values inside element ([#2975](https://github.com/sveltejs/svelte/pull/2975))
+* Fix delayed animation glitch ([#2871](https://github.com/sveltejs/svelte/issues/2871))
+* Solve diamond dependencies problem with stores ([#2660](https://github.com/sveltejs/svelte/issues/2660))
+* Fix missing outros inside each blocks ([#2689](https://github.com/sveltejs/svelte/issues/2689))
+* Support animations without transitions ([#2908](https://github.com/sveltejs/svelte/issues/2908))
+* Add missing transition events ([#2912](https://github.com/sveltejs/svelte/pull/2912))
+
+
+## 3.4.4
+
+* Publish type declaration files ([#2874](https://github.com/sveltejs/svelte/issues/2874))
+* Don't trigger updates for unreferenced values ([#2865](https://github.com/sveltejs/svelte/pull/2865))
+* Omit readonly bindings from SSR output ([#2339](https://github.com/sveltejs/svelte/issues/2339))
+* Prevent outdated animation CSS ([#2871](https://github.com/sveltejs/svelte/issues/2871))
+* Repair dynamic `{@html ...}` in head ([#2880](https://github.com/sveltejs/svelte/pull/2880))
+* Don't create unknown prop warnings for internal props, or if component has `$$props` ([#2881](https://github.com/sveltejs/svelte/pull/2881))
+
+
+## 3.4.3
+
+* Add type declaration files for everything ([#2842](https://github.com/sveltejs/svelte/pull/2842))
+* Prevent `svelte/store` being bundled ([#2786](https://github.com/sveltejs/svelte/issues/2786))
+* Warn on unknown props in dev mode ([#2840](https://github.com/sveltejs/svelte/pull/2840))
+* Treat `requestAnimationFrame` as a no-op on the server ([#2856](https://github.com/sveltejs/svelte/pull/2856))
+* Add `raw` property to AST's `Text` nodes ([#2714](https://github.com/sveltejs/svelte/issues/2714))
+* Add `<details bind:open>` ([#2854](https://github.com/sveltejs/svelte/issues/2854))
+
+## 3.4.2
+
+* Use empty string for empty data attributes ([#2804](https://github.com/sveltejs/svelte/pull/2804))
+* Support `customElement: true` with no `<svelte:options>` ([#2821](https://github.com/sveltejs/svelte/issues/2821))
+* Add docstrings to `svelte/store` ([#2795](https://github.com/sveltejs/svelte/pull/2795))
+
+## 3.4.1
+
+* Handle non-falsy non-function return values from derivers ([#2780](https://github.com/sveltejs/svelte/issues/2780))
+* Allow `spring` to work server-side ([#2773](https://github.com/sveltejs/svelte/issues/2773))
+
+## 3.4.0
+
+* Allow custom element to be defined without a `tag` ([#2417](https://github.com/sveltejs/svelte/issues/2417))
+* Fix parsing of quote marks inside attribute values ([#2715](https://github.com/sveltejs/svelte/pull/2754))
+* Convert `svelte/store` to TypeScript ([#2733](https://github.com/sveltejs/svelte/pull/2733))
+* Allow `debug` tags to include hoisted values ([#2764](https://github.com/sveltejs/svelte/issues/2764))
+* Parse error if attribute name is missing `=` ([#1513](https://github.com/sveltejs/svelte/pull/2770))
+* Allow reactive declarations to depend on mutated `const` values ([#2728](https://github.com/sveltejs/svelte/issues/2728))
+
+## 3.3.0
+
+* Allow multiple event listeners on a single node ([#2688](https://github.com/sveltejs/svelte/issues/2688))
+* Allow derivers to return a cleanup function ([#2553](https://github.com/sveltejs/svelte/issues/2553))
+* Support namespaced components (`<Foo.Bar/>`) ([#2743](https://github.com/sveltejs/svelte/pull/2743))
+
+## 3.2.2
+
+* Add `window` and `document` to expected globals ([#2722](https://github.com/sveltejs/svelte/pull/2722))
+* Prevent hoisting of functions that depend on reactive state ([#2703](https://github.com/sveltejs/svelte/pull/2703))
+* Generate correct code when slot has no changes ([#2697](https://github.com/sveltejs/svelte/issues/2697))
+* Prevent `Object.prototype`-related bugs ([#2696](https://github.com/sveltejs/svelte/pull/2696))
+
+## 3.2.1
+
+* Use same comparison logic for `derived` as for other stores ([#2644](https://github.com/sveltejs/svelte/issues/2644))
+* Invalidate dependencies of reactive declarations ([#2444](https://github.com/sveltejs/svelte/issues/2444))
+* Fix instrumentation of auto-subscription self-assignments ([#2681](https://github.com/sveltejs/svelte/issues/2681))
+* Warn on non-top-level or module-context statements labeled with `$:` ([#2176](https://github.com/sveltejs/svelte/issues/2176))
+
+## 3.2.0
+
+* Improve `spring` animations, and add `hard`/`soft` options ([#2627](https://github.com/sveltejs/svelte/pull/2627))
+* Expose `parse` and `walk` functions ([#2661](https://github.com/sveltejs/svelte/issues/2661), [#2534](https://github.com/sveltejs/svelte/pull/2534))
+* Support array/object rest in `each` block destructuring patterns ([#2647](https://github.com/sveltejs/svelte/issues/2647), [#2658](https://github.com/sveltejs/svelte/pull/2658))
+* Use `setAttribute` to change `form` property on form elements ([#1742](https://github.com/sveltejs/svelte/issues/1742))
+* Fix a11y warning when `<figcaption>` is non-direct descendant of `<figure>` ([#2582](https://github.com/sveltejs/svelte/issues/2582))
+* Squelch erroneous 'empty block' warnings ([#1716](https://github.com/sveltejs/svelte/issues/1716))
+* Fix IE9/10 error with `insertBefore` ([#2573](https://github.com/sveltejs/svelte/issues/2573))
+* Prevent `$$scope` from being spread onto an element ([#2520](https://github.com/sveltejs/svelte/issues/2520))
+* Resubscribe to stores that are assigned to in `<script>` ([#2435](https://github.com/sveltejs/svelte/issues/2435))
+* Allow reactive declarations to depend on `const` variables ([#2285](https://github.com/sveltejs/svelte/issues/2285))
+* Trigger store changes on UpdateExpression ([#2625](https://github.com/sveltejs/svelte/issues/2625))
+* Squelch missing prop warning if variable is initialised ([#2635](https://github.com/sveltejs/svelte/issues/2635))
+* Add `alert`, `confirm` and `prompt` to known globals ([#2648](https://github.com/sveltejs/svelte/issues/2648))
+
+
+## 3.1.0
+
+* Allow store subscribe functions to return an object with an `unsubscribe` method, providing native RxJS support ([#2549](https://github.com/sveltejs/svelte/issues/2549))
+
+## 3.0.1
+
+* Prevent text input cursor jumping in Safari ([#2506](https://github.com/sveltejs/svelte/issues/2506))
+* Allow assignments to member expressions ([#2510](https://github.com/sveltejs/svelte/issues/2510))
+* Prevent mutually dependent functions causing an infinite during hoisting ([#2542](https://github.com/sveltejs/svelte/issues/2542))
+* Reuse scheduler promise instead of creating new one each time ([#2555](https://github.com/sveltejs/svelte/pull/2555))
+* Various site/docs fixes
+
+## 3.0.0
+
+* Everything
+
+## 2.15.4
+
+* IE `classList` fix ([#1868](https://github.com/sveltejs/svelte/pull/1868))
+
+## 2.15.3
+
+* Don't mutate AST
+
+## 2.15.2
+
+* Expose `stats.props` ([#1837](https://github.com/sveltejs/svelte/issues/1837))
+
+## 2.15.1
+
+* Don't throw missing store error when store is declared in component ([#1828](https://github.com/sveltejs/svelte/issues/1828))
+
+## 2.15.0
+
+* Event modifiers ([#1088](https://github.com/sveltejs/svelte/issues/1088))
+* Wheel and touch events are passive by default ([#1088](https://github.com/sveltejs/svelte/issues/1088))
+* Add `<svelte:document>` tag ([#1484](https://github.com/sveltejs/svelte/issues/1484))
+* Include binding values in server-rendered HTML ([#1205](https://github.com/sveltejs/svelte/issues/1205))
+* Remove attributes when value is undefined/null ([#1434](https://github.com/sveltejs/svelte/issues/1434))
+* Initialise window scroll from component data ([#938](https://github.com/sveltejs/svelte/issues/938))
+* Remove references to unused properties in generated code ([#1187](https://github.com/sveltejs/svelte/issues/1187))
+* Add TypeScript definitions for store ([#1207](https://github.com/sveltejs/svelte/issues/1207))
+* Better error for missing store ([#1807](https://github.com/sveltejs/svelte/issues/1807))
+
+## 2.14.3
+
+* Account for directive dependencies ([#1793](https://github.com/sveltejs/svelte/issues/1793))
+* Detach each block iterations in each blocks with no update method ([#1795](https://github.com/sveltejs/svelte/issues/1795))
+
+## 2.14.2
+
+* Fix issue with nested `{#if}` blocks ([#1780](https://github.com/sveltejs/svelte/issues/1780))
+
+## 2.14.1
+
+* Fix block insertion order regression ([#1778](https://github.com/sveltejs/svelte/issues/1778))
+* Fix blocks inside `<svelte:head>` ([#1774](https://github.com/sveltejs/svelte/issues/1774))
+* Better attribute parsing ([#1772](https://github.com/sveltejs/svelte/issues/1772))
+* Fix parse errors inside directives ([#1788](https://github.com/sveltejs/svelte/issues/1788))
+
+
+## 2.14.0
+
+* Refactor internals ([#1678](https://github.com/sveltejs/svelte/issues/1678))
+* Deprecate `onerror` option ([#1745](https://github.com/sveltejs/svelte/issues/1745))
+* Handle edge cases where `destroy` is called before `mount` ([#1653](https://github.com/sveltejs/svelte/pull/1653))
+* Make `scroll` binding more efficient ([#1579](https://github.com/sveltejs/svelte/pull/1770))
+* Make 'readonly property' store error more informative ([#1761](https://github.com/sveltejs/svelte/pull/1761))
+
+## 2.13.5
+
+* Fix missing dependencies in shorthand class directives ([#1739](https://github.com/sveltejs/svelte/issues/1739))
+
+## 2.13.4
+
+* Support dynamic `import()` in template expressions
+
+## 2.13.3
+
+* Fix bug with keyed each blocks and nested components ([#1706](https://github.com/sveltejs/svelte/issues/1706))
+
+## 2.13.2
+
+* Coalesce simultaneous store/component updates ([#1520](https://github.com/sveltejs/svelte/issues/1520))
+* Fix nested transitions preventing each block item removal ([#1617](https://github.com/sveltejs/svelte/issues/1617))
+* Add `class` directive shorthand and encapsulate styles ([#1695](https://github.com/sveltejs/svelte/pull/1695))
+* Prevent erroneous updates of bound inputs ([#1699](https://github.com/sveltejs/svelte/issues/1699))
+
+## 2.13.1
+
+* Coerce second argument to `toggleClass` ([#1685](https://github.com/sveltejs/svelte/issues/1685))
+
+## 2.13.0
+
+* Add `class` directive ([#890](https://github.com/sveltejs/svelte/issues/890))
+* Remove sourcemaps from npm package ([#1690](https://github.com/sveltejs/svelte/pull/1690))
+
+## 2.12.1
+
+* Allow actions to take any expression ([#1676](https://github.com/sveltejs/svelte/issues/1676))
+* Run transitions in component context ([#1675](https://github.com/sveltejs/svelte/issues/1675))
+* Correctly set select value on mount ([#1666](https://github.com/sveltejs/svelte/issues/1666))
+* Support `{@debug}` in SSR ([#1659](https://github.com/sveltejs/svelte/issues/1659))
+* Don't treat `&nbsp;` as empty whitespace ([#1658](https://github.com/sveltejs/svelte/issues/1658))
+* Fix outros for if blocks with no else ([#1688](https://github.com/sveltejs/svelte/pull/1688))
+* Set `style.cssText` in spread attributes ([#1684](https://github.com/sveltejs/svelte/pull/1684))
+
+
+## 2.12.0
+
+* Initialise actions on mount rather than hydrate ([#1653](https://github.com/sveltejs/svelte/pull/1653))
+* Allow non-existent components to be destroyed ([#1677](https://github.com/sveltejs/svelte/pull/1677))
+* Pass AMD ID from CLI correctly ([#1672](https://github.com/sveltejs/svelte/pull/1672))
+* Minor AST tweaks ([#1673](https://github.com/sveltejs/svelte/pull/1673), [#1674](https://github.com/sveltejs/svelte/pull/1674))
+* Reduce code duplication in component initialisation ([#1670](https://github.com/sveltejs/svelte/pull/1670))
+
+
+## 2.11.0
+
+* Add `--shared` CLI option ([#1649](https://github.com/sveltejs/svelte/pull/1649))
+* Run first `onstate` *before* fragment is rendered ([#1522](https://github.com/sveltejs/svelte/issues/1522))
+* Exclude current computed prop from state object ([#1544](https://github.com/sveltejs/svelte/issues/1544))
+
+
+## 2.10.1
+
+* Add sourcemaps to `{@debug}` tags ([#1647](https://github.com/sveltejs/svelte/pull/1647))
+
+## 2.10.0
+
+* Add a `{@debug}` tag, for inspecting values in templates in dev mode ([#1635](https://github.com/sveltejs/svelte/issues/1635))
+* Fix dimension bindings in iOS ([#1642](https://github.com/sveltejs/svelte/pull/1642))
+
+## 2.9.11
+
+* Pass props to custom elements rather than setting attributes, where appropriate ([#875](https://github.com/sveltejs/svelte/issues/875))
+* Handle whitespace in lists consistently between SSR and DOM renderers ([#1637](https://github.com/sveltejs/svelte/pull/1637))
+* Improve error for invalid `ref` names ([#1613](https://github.com/sveltejs/svelte/issues/1613))
+
+## 2.9.10
+
+* Handle `null` consistently in tags ([#1598](https://github.com/sveltejs/svelte/issues/1598))
+* Support object rest in computed properties ([#1540](https://github.com/sveltejs/svelte/issues/1540))
+* Always update dynamic components when expression changes ([#1621](https://github.com/sveltejs/svelte/issues/1621))
+* Encapsulate local styles inside global styles ([#1618](https://github.com/sveltejs/svelte/issues/1618))
+
+## 2.9.9
+
+* Fix attribute name regex ([#1623](https://github.com/sveltejs/svelte/pull/1623))
+
+## 2.9.8
+
+* Sanitize spread attributes in SSR — fixes vulnerability CVE-2018-6341 ([#1623](https://github.com/sveltejs/svelte/pull/1623))
+
+## 2.9.7
+
+* Allow `<input type=file bind:files>` ([#1608](https://github.com/sveltejs/svelte/issues/1608))
+* Ensure child window exists before removing listener in `addResizeHandler` ([#1600](https://github.com/sveltejs/svelte/issues/1600))
+* Handle transitions in `else` block ([#1589](https://github.com/sveltejs/svelte/issues/1589))
+
+## 2.9.6
+
+* Provide more useful error if SSR component attempts to render non-SSR component ([#1605](https://github.com/sveltejs/svelte/issues/1605))
+
+## 2.9.5
+
+* Null out refs to dynamic components ([#1596](https://github.com/sveltejs/svelte/issues/1596))
+
+## 2.9.4
+
+* Make identifier optional for `then` and `catch` blocks ([#1507](https://github.com/sveltejs/svelte/issues/1507))
+* Group outros correctly ([#1575](https://github.com/sveltejs/svelte/issues/1575))
+
+## 2.9.3
+
+* Fix bug when an each block contains transitions but its else branch does not ([#1559](https://github.com/sveltejs/svelte/issues/1559))
+* If an event handler throws an exception, don't block all future calls to that handler ([#1573](https://github.com/sveltejs/svelte/issues/1573))
+
+## 2.9.2
+
+* Fix conflict when using multiple if-else blocks, some of which use outros and some of which do not ([#1580](https://github.com/sveltejs/svelte/issues/1580))
+* Fix some cases where `.innerHTML` was being used to create child elements when it shouldn't ([#1581](https://github.com/sveltejs/svelte/issues/1581))
+
+## 2.9.1
+
+* Use `template.content` instead of `template` where appropriate ([#1571](https://github.com/sveltejs/svelte/issues/1571))
+
+## 2.9.0
+
+* Play outro transitions on `<svelte:component>` if `nestedTransitions` is true ([#1568](https://github.com/sveltejs/svelte/issues/1568))
+* Allow illegal identifiers to be component prop names, for e.g. spreading `data-foo` props ([#887](https://github.com/sveltejs/svelte/issues/887))
+* Abort transition when node is detached ([#1561](https://github.com/sveltejs/svelte/issues/1561))
+* Only include `transitionManager` when necessary ([#1514](https://github.com/sveltejs/svelte/issues/1514))
+
+## 2.8.1
+
+* Fix prefixed animation name replacement ([#1556](https://github.com/sveltejs/svelte/pull/1556))
+
+## 2.8.0
+
+* Correctly set store on nested components (to parent store, not root store) ([#1538](https://github.com/sveltejs/svelte/issues/1538))
+
+## 2.7.2
+
+* Prevent unnecessary remounts ([#1527](https://github.com/sveltejs/svelte/issues/1527))
+* Allow `refs.*` as callee ([#1526](https://github.com/sveltejs/svelte/pull/1526))
+* Handle empty lists when outroing ([#1532](https://github.com/sveltejs/svelte/issues/1532))
+
+## 2.7.1
+
+* Fix spread props with multiple dependencies ([#1515](https://github.com/sveltejs/svelte/issues/1515))
+
+## 2.7.0
+
+* Add `__svelte_meta` object to elements in dev mode, containing source info ([#1499](https://github.com/sveltejs/svelte/issues/1499))
+* Fix `bind:online` in dev mode ([#1502](https://github.com/sveltejs/svelte/issues/1502))
+* Update v1 warnings/errors ([#1508](https://github.com/sveltejs/svelte/pull/1508))
+* Transform prefixed keyframes ([#1504](https://github.com/sveltejs/svelte/issues/1504))
+
+## 2.6.6
+
+* Fix nested transition bug ([#1497](https://github.com/sveltejs/svelte/issues/1497))
+
+## 2.6.5
+
+* Handle cases where only some `if` block branches have outros ([#1492](https://github.com/sveltejs/svelte/issues/1492))
+
+## 2.6.4
+
+* Web worker support ([#1487](https://github.com/sveltejs/svelte/issues/1487))
+* Update dynamic component bindings when component changes ([#1489](https://github.com/sveltejs/svelte/issues/1489))
+
+## 2.6.3
+
+* Nested transitions respect `skipIntroByDefault` ([#1460](https://github.com/sveltejs/svelte/issues/1460))
+* Always create outro for top-level block ([#1470](https://github.com/sveltejs/svelte/issues/1470))
+
+## 2.6.2
+
+* Fix spread+bindings on dynamic components ([#1433](https://github.com/sveltejs/svelte/issues/1433))
+* Abort in-progress animations, if a new one starts ([#1458](https://github.com/sveltejs/svelte/issues/1458))
+* Allow animations to be parameterised ([#1462](https://github.com/sveltejs/svelte/issues/1462))
+
+## 2.6.1
+
+* Absolutely position outroing animated nodes ([#1457](https://github.com/sveltejs/svelte/pull/1457))
+
+## 2.6.0
+
+* Add `animate` directive ([#1454](https://github.com/sveltejs/svelte/pull/1454))
+* Add `skipIntroByDefault` compiler option and `intro: true` init option ([#1448](https://github.com/sveltejs/svelte/pull/1448))
+* Add `nestedTransitions` compiler option ([#1451](https://github.com/sveltejs/svelte/pull/1451))
+* Component outros, if `nestedTransitions` is true ([#1211](https://github.com/sveltejs/svelte/issues/1211))
+* Allow transition functions to return a function, for inter-transition coordination ([#1453](https://github.com/sveltejs/svelte/pull/1453))
+* Pass `1 - t` as second argument to transition functions ([#1452](https://github.com/sveltejs/svelte/pull/1452))
+
+## 2.5.1
+
+* Add new ARIA attributes ([#1436](https://github.com/sveltejs/svelte/pull/1436))
+* Add `Promise` to whitelisted globals ([#1441](https://github.com/sveltejs/svelte/issues/1441))
+* Allow spaces around reserved keyword attributes ([#1445](https://github.com/sveltejs/svelte/issues/1445))
+
+## 2.5.0
+
+* Support transitions in `await` blocks ([#956](https://github.com/sveltejs/svelte/issues/956))
+* Abort outros if block is recreated ([#1425](https://github.com/sveltejs/svelte/issues/1425))
+* Wait until transitions have completed before removing styles ([#648](https://github.com/sveltejs/svelte/issues/648))
+* Support event shorthand on dynamic components ([#1427](https://github.com/sveltejs/svelte/pull/1427))
+* Various codegen improvements ([#1419](https://github.com/sveltejs/svelte/pull/1419), [#1421](https://github.com/sveltejs/svelte/pull/1421), [#1422](https://github.com/sveltejs/svelte/pull/1422), [#1424](https://github.com/sveltejs/svelte/pull/1424))
+* Correctly handle `await` blocks with no dynamic content ([#1417](https://github.com/sveltejs/svelte/issues/1417))
+* Allow spread props on elements with static attribute tests ([#1429](https://github.com/sveltejs/svelte/pull/1429))
+
+
+## 2.4.4
+
+* Declare missing variable in Store ([#1415](https://github.com/sveltejs/svelte/issues/1415))
+* ALways declare spread levels ([#1413](https://github.com/sveltejs/svelte/issues/1413))
+
+## 2.4.3
+
+* `ref` directives prevent HTMLified content ([#1407](https://github.com/sveltejs/svelte/issues/1407))
+* Store computed properties update components immediately upon declaration ([#1327](https://github.com/sveltejs/svelte/issues/1327))
+
+## 2.4.2
+
+* Evaluate `each` key in child scope ([#1397](https://github.com/sveltejs/svelte/issues/1397))
+* Prevent false negatives and positives when detecting cyclical computed store properties ([#1399](https://github.com/sveltejs/svelte/issues/1399))
+* Only update dynamic component props ([#1394](https://github.com/sveltejs/svelte/issues/1394))
+
+## 2.4.1
+
+* Fix DOM event context ([#1390](https://github.com/sveltejs/svelte/issues/1390))
+
+## 2.4.0
+
+* Integrate CLI ([#1360](https://github.com/sveltejs/svelte/issues/1360))
+* Allow arbitrary destructuring for each block items, with binding ([#1385](https://github.com/sveltejs/svelte/pull/1385))
+* Each block keys can use arbitrary expressions ([#703](https://github.com/sveltejs/svelte/issues/703))
+* `bind:offsetWidth`, `bind:offsetHeight`, `bind:clientWidth` and `bind:clientHeight` ([#984](https://github.com/sveltejs/svelte/issues/984))
+* Leaner generated code for `each` blocks ([#1287](https://github.com/sveltejs/svelte/issues/1287))
+
+
+## 2.3.0
+
+* Allow computed properties to have entire state object as dependency ([#1303](https://github.com/sveltejs/svelte/issues/1303))
+* Fix `stats` when `options.generate` is `false` ([#1368](https://github.com/sveltejs/svelte/issues/1368))
+* Assign custom methods to custom elements ([#1369](https://github.com/sveltejs/svelte/issues/1369))
+* Fix `this` value in custom event handlers ([#1297](https://github.com/sveltejs/svelte/issues/1297))
+* Re-evaluate `each` values lazily ([#1286](https://github.com/sveltejs/svelte/issues/1286))
+* Preserve outer context in `await` blocks ([#1251](https://github.com/sveltejs/svelte/issues/1251))
+
+## 2.2.0
+
+* Internal refactoring ([#1367](https://github.com/sveltejs/svelte/pull/1367))
+
+## 2.1.1
+
+* Report initial `changed` based on state, not expected props ([#1356](https://github.com/sveltejs/svelte/issues/1356))
+* Set state to empty object, not null, on destroy ([#1354](https://github.com/sveltejs/svelte/issues/1354))
+* Prevent stale state in component event handlers ([#1353](https://github.com/sveltejs/svelte/issues/1353))
+
+## 2.1.0
+
+* Allow shorthand imports ([#1038](https://github.com/sveltejs/svelte/issues/1038))
+* Update spread props inside each blocks ([#1337](https://github.com/sveltejs/svelte/issues/1337))
+
+## 2.0.0
+
+*See [the blog post](https://svelte.dev/blog/version-2) for information on how to upgrade your apps*
+
+* New template syntax ([#1318](https://github.com/sveltejs/svelte/issues/1318))
+* Emit ES2015 code, not ES5 ([#1348](https://github.com/sveltejs/svelte/pull/1348))
+* Add `onstate` and `onupdate` hooks, remove `component.observe` method ([#1197](https://github.com/sveltejs/svelte/issues/1197))
+* Use destructuring syntax for computed properties ([#1069](https://github.com/sveltejs/svelte/issues/1069)
+* Change signature of `svelte.compile` ([#1298](https://github.com/sveltejs/svelte/pull/1298))
+* Remove `validate` and `Stylesheet` from public API ([#1348](https://github.com/sveltejs/svelte/pull/1348))
+* Don't typecast numeric attributes ([#657](https://github.com/sveltejs/svelte/issues/657))
+* Always compile with `Store` support, and cascading disabled ([#1348](https://github.com/sveltejs/svelte/pull/1348))
+* Remove unused `hash` property from AST ([#1348](https://github.com/sveltejs/svelte/pull/1348))
+* Rename `loc` property to `start` in warnings and errors ([#1348](https://github.com/sveltejs/svelte/pull/1348))
+
+## 1.64.1
+
+* Fix computed properties in SSR renderer ([#1349](https://github.com/sveltejs/svelte/issues/1349))
+
+## 1.64.0
+
+* Deprecate passing a string argument to `component.get` ([#1347](https://github.com/sveltejs/svelte/pull/1347))
+
+## 1.63.1
+
+* Allow `observe` method to be overwritten
+
+## 1.63.0
+
+* Add `onstate` and `onupdate` lifecycle hooks and deprecate `component.observe` ([#1197](https://github.com/sveltejs/svelte/issues/1197))
+* Add `on` and `fire` to `Store`, deprecate `onchange` and `observe` ([#1344](https://github.com/sveltejs/svelte/pull/1344))
+* Require computed properties to have destructured argument in v2 mode ([#1069](https://github.com/sveltejs/svelte/issues/1069))
+
+## 1.62.0
+
+* Add a `code` field to errors and warnings ([#474](https://github.com/sveltejs/svelte/issues/474))
+* When using v2 syntax, do not use interpolation in non-root `<style>` tags ([#1339](https://github.com/sveltejs/svelte/issues/1339))
+
+## 1.61.0
+
+* Support v2 syntax with `parser: 'v2'` option ([#1318](https://github.com/sveltejs/svelte/issues/1318))
+
+## 1.60.3
+
+* Fix validation of `multiple` attributes on bound `<select>` elements ([#1331](https://github.com/sveltejs/svelte/issues/1331))
+
+## 1.60.2
+
+* Fix order of insertions for keyed each blocks with siblings ([#1306](https://github.com/sveltejs/svelte/issues/1306))
+* Bail out of CSS DCE if element has spread attribute ([#1300](https://github.com/sveltejs/svelte/issues/1300))
+* Allow `console` etc in component events ([#1278](https://github.com/sveltejs/svelte/issues/1278))
+* Deconflict against inherited contexts ([#1275](https://github.com/sveltejs/svelte/issues/1275))
+* Make CSS DCE case insensitive ([#1269](https://github.com/sveltejs/svelte/issues/1269))
+* Error on dynamic `multiple` attribute for bound select ([#1270](https://github.com/sveltejs/svelte/issues/1270))
+* Allow custom events on `<:Window>` ([#1268](https://github.com/sveltejs/svelte/issues/1268))
+
+## 1.60.1
+
+* Fix spread updates on dynamic components ([#1307](https://github.com/sveltejs/svelte/issues/1307))
+
+## 1.60.0
+
+* Spread properties ([#195](https://github.com/sveltejs/svelte/issues/195))
+* `svelte.compile` returns an object with `{ js, css, ast }` properties, where `js` and `css` are `{ code, map }` objects ([#1298](https://github.com/sveltejs/svelte/pull/1298))
+* Fixed broken compile errors when using Rollup ([#1296](https://github.com/sveltejs/svelte/pull/1296))
+
+## 1.59.0
+
+* Deprecate `teardown` in custom event handlers ([#531](https://github.com/sveltejs/svelte/issues/531))
+* Allow static content in keyed `each` block ([#1291](https://github.com/sveltejs/svelte/issues/1291))
+* Allow empty content in keyed `each` block ([#1295](https://github.com/sveltejs/svelte/issues/1295))
+* Only delete applicable transitions ([#1290](https://github.com/sveltejs/svelte/issues/1290))
+
+## 1.58.5
+
+* Allow backtick string literals for `svg`, `tag`, and `props` properties ([#1284](https://github.com/sveltejs/svelte/issues/1284))
+* Fix removal of transition styles under Firefox ([#1288](https://github.com/sveltejs/svelte/pull/1288))
+
+## 1.58.4
+
+* Fix initial state regression ([#1283](https://github.com/sveltejs/svelte/pull/1283))
+
+## 1.58.3
+
+* Actions run in the context of the component ([#1279](https://github.com/sveltejs/svelte/pull/1279))
+* Set refs when mounting dynamic components ([#1280](https://github.com/sveltejs/svelte/pull/1280))
+
+## 1.58.2
+
+* (1.58.1 failed to publish)
+
+## 1.58.1
+
+* Actions ([#1247](https://github.com/sveltejs/svelte/pull/1247))
+* Support `preserveComments` option in SSR mode ([#1265](https://github.com/sveltejs/svelte/issues/1265))
+* Fix performance regression ([#1274](https://github.com/sveltejs/svelte/pull/1274))
+
+## 1.58.0
+
+* Fast row swapping ([#588](https://github.com/sveltejs/svelte/issues/588))
+* Better error messages for invalid directives ([#1242](https://github.com/sveltejs/svelte/pull/1242))
+* Fix local context variable bugs ([#1240](https://github.com/sveltejs/svelte/pull/1243), [#1254](https://github.com/sveltejs/svelte/pull/1254))
+* Skip missing property warnings for computed/global properties in dev mode ([#1246](https://github.com/sveltejs/svelte/pull/1246))
+* Add end position to warnings ([#1250](https://github.com/sveltejs/svelte/pull/1250))
+
+## 1.57.4
+
+* Deconflict context names ([#1229](https://github.com/sveltejs/svelte/issues/1229))
+* Use `setAttribute` to set input types ([#1209](https://github.com/sveltejs/svelte/issues/1209))
+* Scale transition duration correctly ([#1221](https://github.com/sveltejs/svelte/issues/1221))
+
+## 1.57.3
+
+* Fix scoped CSS on static child elements ([#1223](https://github.com/sveltejs/svelte/issues/1223))
+
+## 1.57.2
+
+* Fix scoped CSS on SVG elements ([#1224](https://github.com/sveltejs/svelte/issues/1224))
+
+## 1.57.1
+
+* Add each_value to contextProps ([#1206](https://github.com/sveltejs/svelte/issues/1206))
+
+## 1.57.0
+
+* Use classes (not attributes) for style encapsulation, and base36-encode hashes ([#1118](https://github.com/sveltejs/svelte/issues/1118))
+
+## 1.56.4
+
+* Allow `component` and `state` to be context names ([#1213](https://github.com/sveltejs/svelte/issues/1213))
+* Don't remove `@supports` rules when `cascade: false` ([#1215](https://github.com/sveltejs/svelte/issues/1215))
+
+## 1.56.3
+
+* Top-level transitions work inside nested components ([#1188](https://github.com/sveltejs/svelte/issues/1188))
+* Always use internal `_mount` method ([#1201](https://github.com/sveltejs/svelte/issues/1201))
+
+## 1.56.2
+
+* Null out `key` for children of keyed each blocks ([#1202](https://github.com/sveltejs/svelte/issues/1202))
+
+## 1.56.1
+
+* Fix if-in-each bug ([#1195](https://github.com/sveltejs/svelte/issues/1195))
+* Cross-browser `scrollX`/`scrollY` support ([#1175](https://github.com/sveltejs/svelte/issues/1175))
+
+## 1.56.0
+
+* Internal refactor ([#1122](https://github.com/sveltejs/svelte/issues/1122))
+* Use correct context for component events ([#1184](https://github.com/sveltejs/svelte/issues/1184))
+* Allow observing `$foo` in dev mode ([#1181](https://github.com/sveltejs/svelte/issues/1181))
+* Handle dynamic data in default slot ([#1144](https://github.com/sveltejs/svelte/issues/1144))
+
+## 1.55.1
+
+* Fix cancellation of store `onchange` handlers ([#1177](https://github.com/sveltejs/svelte/issues/1177))
+* Write `["default"]` instead of `.default` in legacy mode ([#1166](https://github.com/sveltejs/svelte/issues/1166))
+* Upgrade Acorn ([#1182](https://github.com/sveltejs/svelte/pull/1182))
+* Don't warn about capitalisation if `options.name` begins with non-alphabetical character ([#1179](https://github.com/sveltejs/svelte/pull/1179))
+
+## 1.55.0
+
+* Add `immutable` compiler option for Svelte and runtime option for `Store` ([#1146](https://github.com/sveltejs/svelte/issues/1146))
+* Fix component store bindings ([#1100](https://github.com/sveltejs/svelte/issues/1100))
+* Fire `oncreate` when custom element is attached ([#1117](https://github.com/sveltejs/svelte/issues/1117))
+* Downgrade empty blocks to a warning ([#1156](https://github.com/sveltejs/svelte/pull/1156))
+* Error on unclosed comment ([#1156](https://github.com/sveltejs/svelte/pull/1156))
+
+## 1.54.2
+
+* Prevent `await` blocks using stale state ([#1131](https://github.com/sveltejs/svelte/issues/1131))
+* Prevent erroneous missing data warnings for custom elements ([#1065](https://github.com/sveltejs/svelte/issues/1065))
+* Remove empty selectors in prod mode ([#1138](https://github.com/sveltejs/svelte/issues/1138))
+* Escape attribute values in SSR mode ([#1155](https://github.com/sveltejs/svelte/pull/1155))
+* Remove `<noscript>` elements in DOM mode ([#1108](https://github.com/sveltejs/svelte/issues/1108))
+* Allow hydration of non-root `<script>`/`<style>` tags ([#1163](https://github.com/sveltejs/svelte/pull/1163))
+* Allow interpolation in non-root `<style>` tags ([#1163](https://github.com/sveltejs/svelte/pull/1163))
+
+## 1.54.1
+
+* Hoist destructured references ([#1139](https://github.com/sveltejs/svelte/issues/1139))
+* Add `bind:volume` for media elements ([#1143](https://github.com/sveltejs/svelte/issues/1143))
+
+## 1.54.0
+
+* Run `oncreate` hooks depth-first, top-to-bottom ([#1135](https://github.com/sveltejs/svelte/issues/1135))
+* Render boolean attributes correctly in SSR mode ([#1109](https://github.com/sveltejs/svelte/issues/1109))
+* Add `feed` aria role to expected roles when doing a11y checks ([#1124](https://github.com/sveltejs/svelte/pull/1124))
+* More complete fix for case sensitive attributes ([#1062](https://github.com/sveltejs/svelte/issues/1062))
+* Handle CLRF line endings in await block comments ([#1132](https://github.com/sveltejs/svelte/issues/1132))
+
+## 1.53.0
+
+* Base scoping selectors on `<style>` contents alone ([#1091](https://github.com/sveltejs/svelte/issues/1091))
+
+## 1.52.0
+
+* Deconflict referenced globals ([#1079](https://github.com/sveltejs/svelte/issues/1079))
+* Validate contents of `await` blocks ([#1061](https://github.com/sveltejs/svelte/issues/1061))
+* Fire `oncreate` for components in `await` blocks ([#1061](https://github.com/sveltejs/svelte/issues/1061))
+* Automatically fix attribute casing ([#1062](https://github.com/sveltejs/svelte/issues/1062))
+* Fix escaping in `<script>` and `<style>` ([#1082](https://github.com/sveltejs/svelte/issues/1082))
+* Error if invalid characters are used in computed properties, and allow any valid identifier in props ([#1083](https://github.com/sveltejs/svelte/issues/1083))
+* Don't run a11y tests on components ([#1110](https://github.com/sveltejs/svelte/issues/1110))
+* Respect `store` option in SSR mode ([#1107](https://github.com/sveltejs/svelte/issues/1107))
+
+## 1.51.1
+
+* Only escape <, > and & characters ([#1082](https://github.com/sveltejs/svelte/issues/1082))
+
+## 1.51.0
+
+* Lock `scroll` bindings ([#1071](https://github.com/sveltejs/svelte/issues/1071))
+* Escape HTML entities when compiling to static HTML ([#1066](https://github.com/sveltejs/svelte/issues/1066))
+* Apply a11y warnings to SVG `<a>` attributes with `xlink:href` ([#1008](https://github.com/sveltejs/svelte/issues/1008))
+
+## 1.50.1
+
+* Prevent main fragment being created twice in custom elements ([#1064](https://github.com/sveltejs/svelte/pull/1064))
+
+## 1.50.0
+
+* Detect unused/misplaced components ([#1039](https://github.com/sveltejs/svelte/issues/1039))
+* Warn on unused event definitions/transitions ([#1051](https://github.com/sveltejs/svelte/issues/1051))
+* Remove whitespace inside `<:Head>` ([#1026](https://github.com/sveltejs/svelte/issues/1026))
+* Optimise `<title>` ([#1027](https://github.com/sveltejs/svelte/issues/1027))
+* Add `bind: false` option to disable two-way binding ([#54](https://github.com/sveltejs/svelte/issues/54))
+
+## 1.49.3
+
+* Return `html` from SSR compiler `render().toString()` methods ([#1044](https://github.com/sveltejs/svelte/issues/1044))
+* Correctly reinitialise dynamic components ([#1040](https://github.com/sveltejs/svelte/issues/1040))
+* Allow `<option>` outside `<select>` ([#1022](https://github.com/sveltejs/svelte/issues/1022))
+* Fix data references in await-block event handlers ([#1032](https://github.com/sveltejs/svelte/issues/1032))
+
+## 1.49.2
+
+* Add `store.umd.js` ([#967](https://github.com/sveltejs/svelte/issues/967))
+* Warn on use of `this` inside computed properties ([#1033](https://github.com/sveltejs/svelte/pull/1033))
+
+## 1.49.1
+
+* Pass `store` to children in SSR mode ([#1029](https://github.com/sveltejs/svelte/pull/1029))
+
+## 1.49.0
+
+* Support `store` as a component property ([#1028](https://github.com/sveltejs/svelte/pull/1028))
+
+## 1.48.0
+
+* Added `<:Head>` component for injecting contents into document head ([#1013](https://github.com/sveltejs/svelte/issues/1013)))
+* SSR `render(...)` method now returns a `{ html, css: { code, map }, head }` object ([#1013](https://github.com/sveltejs/svelte/issues/1013))
+* SSR `renderCss(...)` method is deprecated ([#1013](https://github.com/sveltejs/svelte/issues/1013))
+* Add a `preload` function to components ([#1015](https://github.com/sveltejs/svelte/issues/1015))
+* Expose `this.root` on nested components ([#1023](https://github.com/sveltejs/svelte/pull/1023))
+
+## 1.47.2
+
+* Deconflict computed properties against arguments to `_recompute` ([#1012](https://github.com/sveltejs/svelte/issues/1012))
+* Allow `await` blocks in slots ([#1018](https://github.com/sveltejs/svelte/issues/1018))
+* Allow components without slots to have whitespace as only child ([#1007](https://github.com/sveltejs/svelte/issues/1007))
+* Correctly set `toString` on `CompileError` ([#1016](https://github.com/sveltejs/svelte/pull/1016))
+
+## 1.47.1
+
+* Sanitize filenames in SSR mode ([#1005](https://github.com/sveltejs/svelte/issues/1005))
+
+## 1.47.0
+
+* Support dynamic `import(...)` inside `<script>` tags ([#1003](https://github.com/sveltejs/svelte/issues/1003))
+
+## 1.46.1
+
+* `await...then` shorthand ([#957](https://github.com/sveltejs/svelte/issues/957))
+* Allow dynamic components inside elements ([#993](https://github.com/sveltejs/svelte/issues/993))
+* Don't use `dataset` on SVG nodes ([#982](https://github.com/sveltejs/svelte/issues/982))
+* Fix erroneous `<figcaption>` a11y warning ([#991](https://github.com/sveltejs/svelte/issues/991))
+* Handle empty classes when pruning unused selectors ([#978](https://github.com/sveltejs/svelte/issues/978))
+* Better trimming of SSR'd output ([#976](https://github.com/sveltejs/svelte/issues/976))
+* Don't add `event` to `expectedProperties` ([#972](https://github.com/sveltejs/svelte/issues/972))
+* Emit error on bad `set` arguments in dev mode ([#990](https://github.com/sveltejs/svelte/issues/990))
+
+## 1.46.0
+
+* Pass `filename` through to preprocessors ([#983](https://github.com/sveltejs/svelte/issues/983))
+
+## 1.45.0
+
+* Dynamic components ([#971](https://github.com/sveltejs/svelte/pull/971))
+
+## 1.44.2
+
+* Fix `await` blocks with siblings ([#974](https://github.com/sveltejs/svelte/issues/974))
+* Fix `await` blocks inside `if` blocks ([#975](https://github.com/sveltejs/svelte/issues/975))
+
+## 1.44.1
+
+* Fix bidirectional transitions that reference state ([#962](https://github.com/sveltejs/svelte/issues/962))
+
+## 1.44.0
+
+* Add `svelte.preprocess` ([#181](https://github.com/sveltejs/svelte/issues/181), [#876](https://github.com/sveltejs/svelte/issues/876))
+* Add `{{#await ...}}` blocks ([#654](https://github.com/sveltejs/svelte/issues/654))
+
+## 1.43.1
+
+* Fix parameterised transitions ([#962](https://github.com/sveltejs/svelte/issues/962))
+* Prevent boolean attributes breaking estree-walker expectations ([#961](https://github.com/sveltejs/svelte/issues/961))
+* Throw error on cyclical store computations ([#964](https://github.com/sveltejs/svelte/pull/964))
+
+## 1.43.0
+
+* Export `Store` class to manage global state ([#930](https://github.com/sveltejs/svelte/issues/930))
+* Recognise `aria-current` ([#953](https://github.com/sveltejs/svelte/pull/953))
+* Support SSR register options including `extensions` ([#939](https://github.com/sveltejs/svelte/issues/939))
+* Friendlier error for illegal contexts ([#934](https://github.com/sveltejs/svelte/issues/934))
+* Remove whitespace around `<:Window>` components ([#943](https://github.com/sveltejs/svelte/issues/943))
+
+## 1.42.1
+
+* Correctly append items inside a slotted `each` block ([#932](https://github.com/sveltejs/svelte/pull/932))
+* Fix `<:Window bind:online/>` ([#936](https://github.com/sveltejs/svelte/issues/936))
+* Attach globals to state upon initialisation ([#908](https://github.com/sveltejs/svelte/issues/908))
+
+## 1.42.0
+
+* Implement `indeterminate` binding for checkbox inputs ([#910](https://github.com/sveltejs/svelte/issues/910))
+* Use `<option>` children as `value` attribute if none exists ([#928](https://github.com/sveltejs/svelte/issues/928))
+* Allow quoted property names in default export and sub-properties ([#914](https://github.com/sveltejs/svelte/issues/914))
+* Various improvements to generated code for bindings
+
+## 1.41.4
+
+* Handle self-destructive bindings ([#917](https://github.com/sveltejs/svelte/issues/917))
+* Prevent `innerHTML` with `<option>` elements ([#915](https://github.com/sveltejs/svelte/issues/915))
+* Use `dataset` unless `legacy` is true ([#858](https://github.com/sveltejs/svelte/issues/858))
+* Add `prepare` script to facilitate installing from git ([#923](https://github.com/sveltejs/svelte/pull/923))
+
+## 1.41.3
+
+* Prevent argument name clashes ([#911](https://github.com/sveltejs/svelte/issues/911))
+* Fix UMD factory arguments ([#918](https://github.com/sveltejs/svelte/pull/918))
+* Don't attempt to set computed values ([#893](https://github.com/sveltejs/svelte/issues/893))
+* Fix TypeScript build error ([#919](https://github.com/sveltejs/svelte/issues/919))
+
+## 1.41.2
+
+* Handle attribute selectors with no value ([#905](https://github.com/sveltejs/svelte/issues/905))
+* Retain `async` keyword when extracting functions ([#904](https://github.com/sveltejs/svelte/issues/904))
+* Shallow clone `data` on initialisation ([#891](https://github.com/sveltejs/svelte/pull/891))
+
+## 1.41.1
+
+* Fix updates of destructured each blocks ([#897](https://github.com/sveltejs/svelte/pull/897))
+* Don't warn on `options.*` event handler callee ([#900](https://github.com/sveltejs/svelte/pull/900))
+
+## 1.41.0
+
+* `onwarn` and `onerror` receive default handlers as second arguments ([#883](https://github.com/sveltejs/svelte/pull/883))
+* Recognise `muted` as boolean property on `<audio>` elements ([#886](https://github.com/sveltejs/svelte/pull/886))
+* Array destructuring for `each` block contexts ([#889](https://github.com/sveltejs/svelte/pull/889))
+
+## 1.40.2
+
+* Ignore `@apply` and similar in CSS ([#871](https://github.com/sveltejs/svelte/issues/871))
+* Properly escape CSS in custom elements ([#872](https://github.com/sveltejs/svelte/issues/872))
+
+## 1.40.1
+
+* Always use explicit closing tags with `innerHTML` ([#866](https://github.com/sveltejs/svelte/issues/866))
+* Escape text in `textContent` and `innerHTML` expressions ([#868](https://github.com/sveltejs/svelte/issues/868))
+
+## 1.40.0
+
+* Short fragment method names ([#863](https://github.com/sveltejs/svelte/pull/863))
+* Extract declarations out of default export ([#756](https://github.com/sveltejs/svelte/issues/756))
+
+## 1.39.4
+
+* Extract shared init logic ([#855](https://github.com/sveltejs/svelte/pull/855))
+* Allow `console.*` calls in event handlers ([#782](https://github.com/sveltejs/svelte/issues/782))
+* Marker comments in output ([#823](https://github.com/sveltejs/svelte/issues/823))
+* Use `textContent` and `innerHTML` where appropriate ([#23](https://github.com/sveltejs/svelte/issues/23))
+* Various improvements to generated code
+
+## 1.39.3
+
+* Allow `slot='...'` inside custom elements ([#827](https://github.com/sveltejs/svelte/issues/827))
+* Disallow `slot='...'` inside if/each blocks ([#849](https://github.com/sveltejs/svelte/issues/849))
+* Use correct parent node for slotted if blocks ([#850](https://github.com/sveltejs/svelte/issues/850))
+
+## 1.39.2
+
+* Escape CSS in shadow DOM ([#840](https://github.com/sveltejs/svelte/issues/840))
+* Fix missing anchor bug inside SVG elements ([#843](https://github.com/sveltejs/svelte/issues/843))
+
+## 1.39.1
+
+* Always use anchors for slotted content ([#822](https://github.com/sveltejs/svelte/issues/822))
+* Prevent ES6 in helpers ([#838](https://github.com/sveltejs/svelte/issues/838))
+* Correctly determine whether to use `timeRangesToArray` ([#837](https://github.com/sveltejs/svelte/pull/837))
+
+## 1.39.0
+
+* Always attach fragment to shadow root ([#821](https://github.com/sveltejs/svelte/issues/821))
+* Add `buffered`, `seekable`, `played` bindings to media elements ([#819](https://github.com/sveltejs/svelte/pull/819))
+* Quote `class` properties in legacy mode ([#830](https://github.com/sveltejs/svelte/issues/830))
+* Warn on missing `lang` attribute on `<html>` ([#828](https://github.com/sveltejs/svelte/pull/828))
+
+## 1.38.0
+
+* Compile-time a11y warnings ([#815](https://github.com/sveltejs/svelte/pull/815))
+* Remove redundant input blowback guards ([#645](https://github.com/sveltejs/svelte/issues/645))
+* Use component name in debugging messages ([#781](https://github.com/sveltejs/svelte/issues/781))
+
+## 1.37.0
+
+* Experimental support for compiling to custom elements ([#797](https://github.com/sveltejs/svelte/issues/797))
+
+## 1.36.0
+
+* Optimize `style` attributes where possible ([#455](https://github.com/sveltejs/svelte/issues/455))
+
+## 1.35.0
+
+* `set` and `get` continue to work until `destroy` is complete ([#788](https://github.com/sveltejs/svelte/issues/788))
+* Observers of unchanged bound values don't fire incorrectly ([#804](https://github.com/sveltejs/svelte/issues/804))
+* Nested components with slotted content render correctly in SSR mode ([#801](https://github.com/sveltejs/svelte/issues/801))
+* More efficient rendering of raw and slotted content ([#637](https://github.com/sveltejs/svelte/issues/637))
+* Handle unquoted attributes in attribute selectors ([#798](https://github.com/sveltejs/svelte/issues/798))
+
+## 1.34.0
+
+* Support nested `<slot>` elements ([#790](https://github.com/sveltejs/svelte/issues/790))
+* Attach `options` to instance ([#550](https://github.com/sveltejs/svelte/issues/550), [#777](https://github.com/sveltejs/svelte/issues/777))
+* Error if transitions are applied to component ([#791](https://github.com/sveltejs/svelte/issues/791))
+* Handle CSS variables in `<style>` tag ([#757](https://github.com/sveltejs/svelte/issues/757))
+
+## 1.33.0
+
+* Replace `{{yield}}` with `<slot>` — adds fallback content named slots, and `options.slots` ([#763](https://github.com/sveltejs/svelte/issues/763))
+
+## 1.32.0
+
+* Allow `anchor` initialisation option, alongside `target` ([#784](https://github.com/sveltejs/svelte/issues/784))
+* Remove leading CSS selectors safely ([#783](https://github.com/sveltejs/svelte/issues/783))
+
+## 1.31.0
+
+* Add `legacy` compile option, which adds IE9 compatibility ([#773](https://github.com/sveltejs/svelte/issues/773))
+
+## 1.30.0
+
+* Update all component bindings simultaneously ([#760](https://github.com/sveltejs/svelte/issues/760))
+* Fix `@keyframes` atrules with `from` and `to` selectors ([#774](https://github.com/sveltejs/svelte/issues/774))
+
+## 1.29.3
+
+* Only recompute tag and attribute values if they could have changed ([#768](https://github.com/sveltejs/svelte/issues/768))
+* Fix CSS scoping with multiple levels of descendant selectors ([#767](https://github.com/sveltejs/svelte/issues/767))
+
+## 1.29.2
+
+* Preserve space before non-parenthesized media query expression ([#759](https://github.com/sveltejs/svelte/issues/759))
+* Call `create()` on new iterations of static each blocks ([#762](https://github.com/sveltejs/svelte/issues/762))
+* Use `change` events as well as `input` events to bind range inputs ([#740](https://github.com/sveltejs/svelte/issues/740))
+
+## 1.29.1
+
+* Replace `set` and `destroy` with `noop` when component is destroyed ([#744](https://github.com/sveltejs/svelte/issues/744))
+
+## 1.29.0
+
+* Add static `setup` method ([#578](https://github.com/sveltejs/svelte/issues/578))
+* Hoist if block selectors ([#751](https://github.com/sveltejs/svelte/pull/751))
+* More sigil escaping fixes ([#750](https://github.com/sveltejs/svelte/pull/750))
+
+## 1.28.1
+
+* Fix unescaping of special words in SSR mode ([#741](https://github.com/sveltejs/svelte/issues/741))
+
+## 1.28.0
+
+* Support `ref:foo` as a CSS selector ([#693](https://github.com/sveltejs/svelte/issues/693))
+* Prevent magic-string bugs by only minifying CSS combinators if `cascade: false` ([#743](https://github.com/sveltejs/svelte/issues/743))
+* Don't throw an error if component is destroyed twice ([#643](https://github.com/sveltejs/svelte/issues/643))
+
+## 1.27.0
+
+* Minify CSS and remove unused styles ([#697](https://github.com/sveltejs/svelte/issues/697))
+* Optimize ternary expressions when excluding unused CSS ([#696](https://github.com/sveltejs/svelte/issues/696))
+* Clear refs after `ondestroy` callbacks fire ([#706](https://github.com/sveltejs/svelte/issues/706))
+* Prevent certain forms of component binding blowback ([#721](https://github.com/sveltejs/svelte/issues/721))
+* Use helper to encapsulate styles ([#375](https://github.com/sveltejs/svelte/issues/375))
+* Event propagation shorthand — `on:foo` equals `on:foo='fire("foo", event)` ([#638](https://github.com/sveltejs/svelte/issues/638))
+* Allow `refs.*` in event handlers, and validate them ([#686](https://github.com/sveltejs/svelte/issues/686))
+
+## 1.26.2
+
+* Unescape `#` characters ([#722](https://github.com/sveltejs/svelte/issues/722))
+
+## 1.26.1
+
+* Fix select binding regression  ([#724](https://github.com/sveltejs/svelte/issues/724))
+
+## 1.26.0
+
+* Enforce correct order of operations when initialising ([#708](https://github.com/sveltejs/svelte/issues/708) and [#714](https://github.com/sveltejs/svelte/issues/714))
+* Ensure data is up-to-date when re-rendering yield block ([#711](https://github.com/sveltejs/svelte/issues/711))
+* Fix unescaping of strings, preserve at-rules in CSS ([#712](https://github.com/sveltejs/svelte/issues/712))
+* Preserve whitespace at end of each blocks ([#713](https://github.com/sveltejs/svelte/issues/713))
+
+## 1.25.1
+
+* Better CSS sourcemaps ([#716](https://github.com/sveltejs/svelte/pull/716))
+
+## 1.25.0
+
+* Fix hoisted event handlers ([#699](https://github.com/sveltejs/svelte/issues/699))
+* Fire `intro.start` and `outro.start` events ([#702](https://github.com/sveltejs/svelte/issues/702))
+* Preserve order of components in keyed each blocks ([#700](https://github.com/sveltejs/svelte/issues/700))
+* Add `cssMap` property to compiler output ([#698](https://github.com/sveltejs/svelte/pull/698/))
+
+## 1.24.0
+
+* Deconflict names with imports in SSR compiler ([#655](https://github.com/sveltejs/svelte/issues/655))
+* Improved transition performance ([#670](https://github.com/sveltejs/svelte/pull/670))
+* Run transitions on initial render ([#651](https://github.com/sveltejs/svelte/issues/651))
+* Add dev mode warning if `hydrate` is true but `hydratable` was false ([#664](https://github.com/sveltejs/svelte/issues/664))
+* Manipulate sourcemap to make missing loop values obvious ([#683](https://github.com/sveltejs/svelte/pull/683))
+* Only add CSS scoping attributes where necessary ([#679](https://github.com/sveltejs/svelte/issues/679))
+* Warn on unused CSS selectors ([#678](https://github.com/sveltejs/svelte/issues/678))
+* Fix `<select>` binding in loop ([#685](https://github.com/sveltejs/svelte/issues/685))
+* Prevent bindings from calling `oncreate` functions prematurely ([#694](https://github.com/sveltejs/svelte/pull/694))
+* Simpler codegen ([#673](https://github.com/sveltejs/svelte/pull/673))
+
+## 1.23.4
+
+* Don't recreate if blocks incorrectly ([#669](https://github.com/sveltejs/svelte/pull/669))
+
+## 1.23.3
+
+* Pass parameters to `get_block` ([#667](https://github.com/sveltejs/svelte/issues/667))
+
+## 1.23.2
+
+* Fix if blocks being recreated on update ([#665](https://github.com/sveltejs/svelte/issues/665))
+
+## 1.23.1
+
+* Fix each-else blocks that are empty on initial render ([#662](https://github.com/sveltejs/svelte/issues/662))
+
+## 1.23.0
+
+* Hydration ([#649](https://github.com/sveltejs/svelte/pull/649))
+* Correctly transform CSS selectors with pseudo-elements ([#658](https://github.com/sveltejs/svelte/issues/658))
+
+## 1.22.5
+
+* Fix nested component unmounting bug ([#643](https://github.com/sveltejs/svelte/issues/643))
+
+## 1.22.4
+
+* Include `ast` in `svelte.compile` return value ([#632](https://github.com/sveltejs/svelte/issues/632))
+* Set initial value of `<select>` binding, if unspecified ([#639](https://github.com/sveltejs/svelte/issues/639))
+* Mark indirect dependencies of `<select>` bindings (i.e. the dependencies of their `<option>` values) ([#639](https://github.com/sveltejs/svelte/issues/639))
+
+## 1.22.3
+
+* Fix nested component unmounting bug ([#625](https://github.com/sveltejs/svelte/issues/625))
+* Allow components to have computed member expression bindings ([#624](https://github.com/sveltejs/svelte/issues/624))
+* Handle empty `<style>` tags ([#634](https://github.com/sveltejs/svelte/issues/634))
+* Warn on missing component ([#623](https://github.com/sveltejs/svelte/issues/623))
+* Allow dynamic `type` attribute for unbound inputs ([#620](https://github.com/sveltejs/svelte/issues/620))
+* Rename `addEventListener` and `removeEventListener` directives ([#621](https://github.com/sveltejs/svelte/issues/621))
+
+## 1.22.2
+
+* Escape template strings correctly in SSR output ([#616](https://github.com/sveltejs/svelte/issues/616))
+* Prevent magic-string deprecation warning ([#617](https://github.com/sveltejs/svelte/pull/617))
+
+## 1.22.1
+
+* Sanitise event handler names ([#612](https://github.com/sveltejs/svelte/issues/612))
+
+## 1.22.0
+
+* Symmetry between `mount` and `unmount`. This is potentially a breaking change if your components import other components that were precompiled with an earlier version of Svelte ([#592](https://github.com/sveltejs/svelte/issues/592))
+* Add `cascade` option, which prevents styles affecting child components if `false`, unless selectors are wrapped in `:global(...)` and keyframe declaration IDs are prefixed with `-global-`. This will become the default behaviour in v2 ([#583](https://github.com/sveltejs/svelte/issues/583))
+* Support binding to computed member expressions ([#602](https://github.com/sveltejs/svelte/issues/602))
+* Coerce empty string in `number`/`range` inputs to `undefined`, not `0` ([#584](https://github.com/sveltejs/svelte/issues/584))
+* Fix insert location of DOM elements in each/if/nested component edge cases ([#610](https://github.com/sveltejs/svelte/issues/610))
+
+## 1.21.0
+
+* Always use `helpers` if referenced, not just for call expressions ([#575](https://github.com/sveltejs/svelte/issues/575))
+* Fix parsing of `<textarea>` children ([#599](https://github.com/sveltejs/svelte/pull/599))
+* Treat `<textarea>` value attributes and children as equivalent, and fail validation if both are present ([#599](https://github.com/sveltejs/svelte/pull/599))
+* Fix `<textarea>` SSR ([#599](https://github.com/sveltejs/svelte/pull/599))
+* Apply CSS transition styles immediately if transition has delay ([#574](https://github.com/sveltejs/svelte/issues/574))
+* Ensure `transitionManager` is treeshakeable ([#593](https://github.com/sveltejs/svelte/issues/593))
+* Fix for environments where `node.style.animation` is undefined ([#587](https://github.com/sveltejs/svelte/issues/587))
+* Fix order of operations when dealing with `<select>` elements ([#590](https://github.com/sveltejs/svelte/issues/590))
+* Downgrade 'invalid callee' to a warning ([#579](https://github.com/sveltejs/svelte/issues/579))
+* Convert to TypeScript ([#573](https://github.com/sveltejs/svelte/pull/573))
+
+## 1.20.2
+
+* Fix destruction of compound if-blocks with outros ([#572](https://github.com/sveltejs/svelte/pull/572))
+
+## 1.20.1
+
+* Fix insertion order of `if` blocks and their anchors ([#569](https://github.com/sveltejs/svelte/issues/569))
+
+## 1.20.0
+
+* Faster, better updates of keyed each blocks ([#373](https://github.com/sveltejs/svelte/issues/373), [#543](https://github.com/sveltejs/svelte/issues/543))
+* Use element IDs to robustly track dynamically injected `<style>` tags ([#554](https://github.com/sveltejs/svelte/issues/554))
+* Abort outros before corresponding intros ([#546](https://github.com/sveltejs/svelte/issues/546))
+* Generate less code for `if` blocks with `else` blocks ([#540](https://github.com/sveltejs/svelte/issues/540))
+* Ensure `{{yield}}` block content is injected into the right place ([#561](https://github.com/sveltejs/svelte/issues/561))
+* Simpler, more readable codegen code ([#559](https://github.com/sveltejs/svelte/pull/559))
+* Validate transition directives ([#564](https://github.com/sveltejs/svelte/issues/564))
+* Apply delays to bidirectional transitions ([#562](https://github.com/sveltejs/svelte/issues/562))
+* Handle all valid HTML entities ([#565](https://github.com/sveltejs/svelte/pull/565))
+* Fix outros on compound `if` blocks ([#565](https://github.com/sveltejs/svelte/pull/565))
+* Validation for `<:Window>` tags ([#565](https://github.com/sveltejs/svelte/pull/565))
+* Increased test coverage ([#565](https://github.com/sveltejs/svelte/pull/565))
+
+## 1.19.1
+
+* Export `generateKeyframes`, so that CSS transitions work
+
+## 1.19.0
+
+* Experimental support for transitions ([#7](https://github.com/sveltejs/svelte/issues/7))
+* Use `querySelector(':checked')` instead of `selectedOptions` ([#539](https://github.com/sveltejs/svelte/issues/539))
+* Stringify helpers before bundling them, to avoid renaming errors ([#538](https://github.com/sveltejs/svelte/issues/538))
+
+## 1.18.2
+
+* Parenthesize if-block conditions ([#532](https://github.com/sveltejs/svelte/issues/532))
+* Fix parsing of parenthesized expressions ([#534](https://github.com/sveltejs/svelte/issues/534))
+* Fix error on `bind:checked` that doesn't belong to a checkbox input ([#529](https://github.com/sveltejs/svelte/pull/529))
+
+## 1.18.1
+
+* Allow `destroy()` in event handlers ([#523](https://github.com/sveltejs/svelte/issues/523))
+* Fix bug with `{{yield}}` blocks following elements ([#524](https://github.com/sveltejs/svelte/issues/524))
+
+## 1.18.0
+
+* Visit `<select>` attributes after children, to ensure options are in the right state ([#521](https://github.com/sveltejs/svelte/pull/521))
+* Use sibling elements as anchors rather than creating comment nodes wherever possible ([#3](https://github.com/sveltejs/svelte/issues/3))
+
+## 1.17.2
+
+* Replace bad characters when creating variable names based on element names ([#516](https://github.com/sveltejs/svelte/issues/516))
+
+## 1.17.1
+
+* Fixes for static each-else and yield blocks ([#509](https://github.com/sveltejs/svelte/issues/509)), ([#514](https://github.com/sveltejs/svelte/issues/514))
+* Code generation tweaks ([#504](https://github.com/sveltejs/svelte/issues/504)), ([#507](https://github.com/sveltejs/svelte/issues/507))
+
+## 1.17.0
+
+* Add `currentTime`, `duration` and `paused` bindings for media elements ([#406](https://github.com/sveltejs/svelte/issues/406))
+* Don't treat helpers as dependencies ([#492](https://github.com/sveltejs/svelte/issues/492))
+* Allow `<:Window>` event handlers to access component state ([#497](https://github.com/sveltejs/svelte/pull/497))
+* Allow two-way binding to properties named 'component' ([#495](https://github.com/sveltejs/svelte/issues/495))
+* Group checkbox bindings correctly, to avoid erroneously unchecking siblings ([#498](https://github.com/sveltejs/svelte/issues/498))
+* Validate two-way bindings ([#494](https://github.com/sveltejs/svelte/pull/494))
+* Allow dynamic each-block to have static else-block ([#501](https://github.com/sveltejs/svelte/pull/501))
+* Initialise `<select>` value correctly ([#502](https://github.com/sveltejs/svelte/pull/502))
+
+## 1.16.0
+
+* Better code generation ([#489](https://github.com/sveltejs/svelte/pull/489)), ([#490](https://github.com/sveltejs/svelte/pull/490)), ([#491](https://github.com/sveltejs/svelte/pull/491))
+* Prevent binding blowback on initial render ([#488](https://github.com/sveltejs/svelte/pull/488))
+
+## 1.15.1
+
+* Clone data before merging it with state ([#479](https://github.com/sveltejs/svelte/issues/479))
+* Apply binding event handlers before user event handlers ([#486](https://github.com/sveltejs/svelte/issues/486))
+
+## 1.15.0
+
+* Dev mode — downgrade 'missing data' to a warning, and ignore whitelisted globals ([#475](https://github.com/sveltejs/svelte/issues/475))
+* Fix `<select>` value binding when options are updated late ([#476](https://github.com/sveltejs/svelte/issues/476))
+* Throw at compile time if event handler references invalid callee ([#473](https://github.com/sveltejs/svelte/pull/473))
+* Check for helper function purity ([#473](https://github.com/sveltejs/svelte/pull/473))
+* Validate `namespace` option ([#473](https://github.com/sveltejs/svelte/pull/473))
+
+## 1.14.1
+
+* Replace bad characters when creating variable names based on attributes ([#470](https://github.com/sveltejs/svelte/issues/470))
+
+## 1.14.0
+
+* Better guard against naming conflicts ([#465](https://github.com/sveltejs/svelte/issues/465))
+* Better error if getters and setters are used with `methods` ([#425](https://github.com/sveltejs/svelte/issues/425))
+* Don't create whitespace nodes inside elements that can't use them ([#189](https://github.com/sveltejs/svelte/issues/189))
+* Collapse consecutive `if` statements with the same condition ([#450](https://github.com/sveltejs/svelte/issues/450))
+* Window `scroll` bindings are bidirectional ([#404](https://github.com/sveltejs/svelte/issues/404))
+* Add `bind:online` to window ([#404](https://github.com/sveltejs/svelte/issues/404))
+* In dev mode, throw if read-only properties are set ([#404](https://github.com/sveltejs/svelte/issues/404))
+* Prevent conflicts with component name ([#464](https://github.com/sveltejs/svelte/pull/464))
+* Ensure event handler names are deconflicted ([#466](https://github.com/sveltejs/svelte/issues/466))
+
+## 1.13.7
+
+* Fix observers — `defer: true` now triggers callback after DOM is updated ([#441](https://github.com/sveltejs/svelte/issues/441))
+* Handle empty `computed` property ([#452](https://github.com/sveltejs/svelte/issues/452))
+* Correctly bind one-way `<select>` value attributes with objects ([#423](https://github.com/sveltejs/svelte/issues/423))
+* Hoist event handlers inside each blocks, where possible ([#456](https://github.com/sveltejs/svelte/pull/456))
+* Don't bind event handler callbacks ([#433](https://github.com/sveltejs/svelte/issues/433))
+* Internal refactoring and neater code generation ([#453](https://github.com/sveltejs/svelte/pull/453))
+
+## 1.13.6
+
+* Use `assign` helper instead of `Object.assign` for better performance and legacy compatibility ([#431](https://github.com/sveltejs/svelte/issues/431))
+* Improved code generation ([#419](https://github.com/sveltejs/svelte/issues/419)), ([#440](https://github.com/sveltejs/svelte/issues/440)), ([#442](https://github.com/sveltejs/svelte/issues/442))
+
+## 1.13.5
+
+* Read `range` and `number` input values as numbers ([#436](https://github.com/sveltejs/svelte/issues/436))
+* Better error for `bind:value='{{foo}}'` ([#437](https://github.com/sveltejs/svelte/issues/437))
+
+## 1.13.4
+
+* Prevent unclosed `<script>` tag causing infinite loop ([#435](https://github.com/sveltejs/svelte/pull/435))
+
+## 1.13.3
+
+* Correctly handle `{{true}}`, `{{false}}` and `{{null}}` ([#424](https://github.com/sveltejs/svelte/issues/424))
+* Update `<select>` value attributes correctly ([#423](https://github.com/sveltejs/svelte/issues/423))
+* Bind custom event handler callbacks ([#428](https://github.com/sveltejs/svelte/issues/428))
+* Disallow `import root` ([#430](https://github.com/sveltejs/svelte/pull/430))
+* Prevent component bindings mutating the wrong object ([#432](https://github.com/sveltejs/svelte/pull/432))
+
+## 1.13.2
+
+* Fix deep component bindings ([#420](https://github.com/sveltejs/svelte/issues/420))
+* Include `css` property in compiler output ([#409](https://github.com/sveltejs/svelte/issues/409))
+* Treat functions as mutable objects when recomputing ([#413](https://github.com/sveltejs/svelte/issues/413)
+* Include magic-string in bundle ([#410](https://github.com/sveltejs/svelte/issues/410))
+* Disable unneeded Bublé transformations for slimmer output ([#411](https://github.com/sveltejs/svelte/pull/411))
+
+## 1.13.1
+
+* Prevent infinite loops with pathological component bindings ([#398](https://github.com/sveltejs/svelte/issues/398))
+* More robust deconflicting ([#401](https://github.com/sveltejs/svelte/pull/401))
+
+## 1.13.0
+
+* Add `<:Window>` meta tag with event listeners, and a handful of bindings ([#371](https://github.com/sveltejs/svelte/issues/371))
+* Don't uncheck radios incorrectly ([#399](https://github.com/sveltejs/svelte/issues/399))
+
+## 1.12.1
+
+* Deconflict non-helper functions (`addCss` etc) ([#388](https://github.com/sveltejs/svelte/issues/388))
+* Allow reserved words in tags, e.g. `{{class}}` ([#383](https://github.com/sveltejs/svelte/issues/383))
+
+## 1.12.0
+
+* Shorthand attributes — `<Widget :foo/>` is equivalent to `<Widget foo='{{foo}}'/>` ([#384](https://github.com/sveltejs/svelte/pull/384))
+* Support `bind:group` for radio and checkbox inputs ([#311](https://github.com/sveltejs/svelte/issues/311), [#312](https://github.com/sveltejs/svelte/issues/312))
+* Better sourcemap support for two-way bindings
+
+## 1.11.4
+
+* Dev mode warning for bad `component.observe` arguments ([#369](https://github.com/sveltejs/svelte/issues/369))
+* Translate `component.on('teardown', ...)` to `component.on('destroy', ...)` and add dev warning ([#365](https://github.com/sveltejs/svelte/issues/365))
+* Use shared prototype to save bytes ([#378](https://github.com/sveltejs/svelte/pull/378))
+
+## 1.11.3
+
+* Undo CSS behaviour change in 1.11.2 ([#372](https://github.com/sveltejs/svelte/issues/372))
+* Pin version of css-tree ([#370](https://github.com/sveltejs/svelte/pull/370))
+
+## 1.11.2
+
+* Add component CSS to each document a component is rendered to ([#331](https://github.com/sveltejs/svelte/issues/331))
+
+## 1.11.1
+
+* Fix two-way binding for components inside `each` blocks ([#356](https://github.com/sveltejs/svelte/issues/356))
+
+## 1.11.0
+
+* Add `format: 'eval'` and `svelte.create`, to create components directly from source code ([#345](https://github.com/sveltejs/svelte/issues/345))
+* Node 4 compatibility ([#109](https://github.com/sveltejs/svelte/issues/109))
+
+## 1.10.3
+
+* Prevent `'</script>'` string occurrence breaking pages ([#349](https://github.com/sveltejs/svelte/pull/349))
+* Allow reference to whitelisted globals without properties ([#333](https://github.com/sveltejs/svelte/pull/333))
+* Don't remove `&nbsp;` incorrectly ([#348](https://github.com/sveltejs/svelte/issues/348))
+* `let` -> `var` in `addCss` block ([#351](https://github.com/sveltejs/svelte/pull/351))
+
+## 1.10.2
+
+* Accept any case for doctype declarations ([#336](https://github.com/sveltejs/svelte/issues/336))
+* Allow non-top-level `<script>` and `<style>` tags to pass through without processing ([#335](https://github.com/sveltejs/svelte/issues/335))
+
+## 1.10.1
+
+* typecheck argument in _set when in dev mode ([#342](https://github.com/sveltejs/svelte/issues/342))
+* Prevent duplicate helpers in non-shared mode ([#337](https://github.com/sveltejs/svelte/issues/337))
+
+## 1.10.0
+
+* Component self-references with `<:Self/>` ([#51](https://github.com/sveltejs/svelte/issues/51))
+* Two-way binding with `<select multiple>` ([#313](https://github.com/sveltejs/svelte/issues/313))
+
+## 1.9.1
+
+* Better error for malformed event handlers ([#220](https://github.com/sveltejs/svelte/issues/220))
+* Allow function expressions in tags ([#269](https://github.com/sveltejs/svelte/issues/269))
+
+## 1.9.0
+
+* Add development warnings ([#13](https://github.com/sveltejs/svelte/issues/13)), ([#320](https://github.com/sveltejs/svelte/pull/320)), ([#177](https://github.com/sveltejs/svelte/issues/177)), ([#249](https://github.com/sveltejs/svelte/issues/249))
+* Better error if parser encounters an unmatched closing tag ([#321](https://github.com/sveltejs/svelte/issues/321))
+
+## 1.8.1
+
+* Allow implicitly closed elements ([#318](https://github.com/sveltejs/svelte/pull/318))
+* More informative error messages for unclosed elements/blocks ([#258](https://github.com/sveltejs/svelte/issues/258))
+* Deprecate `onrender` and `onteardown` in favour of `oncreate` and `ondestroy` ([#40](https://github.com/sveltejs/svelte/issues/40))
+
+## 1.8.0
+
+* Prevent duplicate imports ([#308](https://github.com/sveltejs/svelte/issues/308))
+* Use `input` events (not `change`) for all input elements other than `checkbox` and `radio`, and textareas ([#309](https://github.com/sveltejs/svelte/pull/309))
+* Encapsulate keyframe declarations ([#245](https://github.com/sveltejs/svelte/issues/245))
+
+## 1.7.1
+
+* Deconflict imports and shared helpers ([#222](https://github.com/sveltejs/svelte/issues/222))
+* Deconflict each-block contexts and reserved words ([#222](https://github.com/sveltejs/svelte/issues/222))
+* Allow shorthand properties in expressions ([#296](https://github.com/sveltejs/svelte/issues/296))
+
+## 1.7.0
+
+* Include CSS AST in `svelte.parse` output ([#302](https://github.com/sveltejs/svelte/pull/302))
+* Better handling of CSS parse errors ([#302](https://github.com/sveltejs/svelte/pull/302))
+* Initialise `<select>` elements with two-way binding correctly ([#301](https://github.com/sveltejs/svelte/issues/301))
+* Allow local context in component event handlers inside `each` blocks ([#290](https://github.com/sveltejs/svelte/issues/290))
+* Fix two-way binding for components inside `each` blocks ([#290](https://github.com/sveltejs/svelte/issues/290))
+
+## 1.6.11
+
+* Initialise dynamic `<option>` value correctly ([#291](https://github.com/sveltejs/svelte/issues/291))
+
+## 1.6.10
+
+* Ensure `sources` and `sourcesContent` are populated in sourcemaps, even if none of the original code is used ([#295](https://github.com/sveltejs/svelte/pull/295))
+* Add `outputFilename` option to populate `file` and `sources` sourcemap properties correctly ([#295](https://github.com/sveltejs/svelte/pull/295))
+
+## 1.6.9
+
+* Don't trigger bindings for torn-down components ([#277](https://github.com/sveltejs/svelte/issues/277))
+* SSR: Handle two-way bindings ([#275](https://github.com/sveltejs/svelte/issues/275))
+* Improve performance by checking data has changed before updates ([#279](https://github.com/sveltejs/svelte/pull/279))
+* Parse CSS with css-tree to prevent transformation errors with unconventional styles ([#288](https://github.com/sveltejs/svelte/issues/288))
+
+## 1.6.8
+
+* Always trigger `onrender`, including when change initiator is a nested component ([#263](https://github.com/sveltejs/svelte/issues/263))
+* Handle default function parameters in computations ([#274](https://github.com/sveltejs/svelte/issues/274))
+
+## 1.6.7
+
+* SSR: Fix apostrophes ([#267](https://github.com/sveltejs/svelte/issues/267))
+* Add `xmlns` attributes to SVGs ([#262](https://github.com/sveltejs/svelte/pull/262))
+
+## 1.6.6
+
+* Omit text from comment anchors ([#247](https://github.com/sveltejs/svelte/issues/247))
+* Handle `xlink` attributes ([#264](https://github.com/sveltejs/svelte/issues/264))
+
+## 1.6.5
+
+* Handle `<!doctype>` declarations ([#255](https://github.com/sveltejs/svelte/pull/255))
+
+## 1.6.4
+
+* Fix updates of yields inside each blocks ([20e1b05](https://github.com/sveltejs/svelte/commit/20e1b05c45dc9fcddfe2e7c5c9fc3109f0d45fa9))
+* SSR: Handle attributes with values that begin with a number ([#248](https://github.com/sveltejs/svelte/issues/248))
+* Handle multiline comments in CSS ([#252](https://github.com/sveltejs/svelte/issues/252))
+
+## 1.6.3
+
+* Fix `{{yield}}` bugs for components inside `if` and `each` blocks ([#230](https://github.com/sveltejs/svelte/issues/230), [#231](https://github.com/sveltejs/svelte/issues/231))
+* Set attributes on `<svg>` elements correctly ([#233](https://github.com/sveltejs/svelte/issues/233))
+* Add `svelte.VERSION` property to compiler
+
+## 1.6.2
+
+* Use helpers for `addEventListener`, `removeEventListener`, `setAttribute` ([#227](https://github.com/sveltejs/svelte/pull/227))
+* Escape `sharedPath` ([#229](https://github.com/sveltejs/svelte/pull/229))
+* Handle attributes with values that begin with a number ([#234](https://github.com/sveltejs/svelte/issues/234))
+* Update dependencies
+
+## 1.6.1
+
+* SSR: Handle component directives at arbitrary positions ([#221](https://github.com/sveltejs/svelte/issues/221))
+* Provide useful feedback on invalid void closing tag ([#224](https://github.com/sveltejs/svelte/issues/224))
+
+## 1.6.0
+
+* Replace `standalone: false` with `shared: true`, or `shared: 'custom/path/to/shared.js'` ([#218](https://github.com/sveltejs/svelte/issues/218))
+* Include `shared.js` in package
+
+## 1.5.0
+
+* Implement `standalone: false` ([#9](https://github.com/sveltejs/svelte/issues/9))
+* SSR: Handle component directives ([216](https://github.com/sveltejs/svelte/issues/216))
+
+## 1.4.0
+
+* Keyed `each` blocks ([#81](https://github.com/sveltejs/svelte/issues/81))
+
+## 1.3.1
+
+* Remove file extensions from AMD dependencies ([#144](https://github.com/sveltejs/svelte/issues/144))
+* Throw if `options.name` is illegal ([#102](https://github.com/sveltejs/svelte/issues/102))
+
+## 1.3.0
+
+* SSR compiler: Support `format` option ([#196](https://github.com/sveltejs/svelte/issues/196))
+* SSR compiler: Don't self-close 'normal' elements ([#200](https://github.com/sveltejs/svelte/issues/200))
+* Remove leading spaces from scoped CSS ([#140](https://github.com/sveltejs/svelte/issues/140))
+* Internal refactoring
+
+## 1.2.5
+
+* Allow whitelisted globals in templates ([#185](https://github.com/sveltejs/svelte/issues/185))
+* Intercept parse errors with `options.onerror`
+
+## 1.2.4
+
+* SSR compiler: Implement `{{{triples}}}` ([#197](https://github.com/sveltejs/svelte/issues/197))
+* SSR compiler: Escape HTML in tags ([#197](https://github.com/sveltejs/svelte/issues/197))
+
+## 1.2.3
+
+* Add support for `namespace` declaration for SVG (etc) components ([#147](https://github.com/sveltejs/svelte/issues/147))
+* Throw error if methods or lifecycle hooks are arrow functions that use `this` or `arguments` ([#179](https://github.com/sveltejs/svelte/issues/179))
+* Use `setAttribute()` for `list` attributes, to preserve link to `<datalist>` ([#178](https://github.com/sveltejs/svelte/issues/178))
+* Throw error if default export is not an object literal ([#190](https://github.com/sveltejs/svelte/pull/190))
+* Internal refactoring
+
+## 1.2.2
+
+* Omit directives in server-side rendering ([#163](https://github.com/sveltejs/svelte/issues/167))
+* Handle comments in SSR ([#165](https://github.com/sveltejs/svelte/issues/165))
+* Support calling methods of `event`/`this` in event handlers ([#162](https://github.com/sveltejs/svelte/issues/162))
+* Remove `mount` from public API ([#150](https://github.com/sveltejs/svelte/issues/150))
+
+## 1.2.1
+
+* Server-side rendering is available as a compiler option (`generate: 'ssr'`) ([#159](https://github.com/sveltejs/svelte/pull/159))
+* Allow call expressions where function is not in `helpers` ([#163](https://github.com/sveltejs/svelte/issues/163))
+
+## 1.2.0
+
+* Server-side rendering of HTML ([#148](https://github.com/sveltejs/svelte/pull/148)) and CSS ([#154](https://github.com/sveltejs/svelte/pull/154))
+
+## 1.1.3
+
+* Handle `xmlns` attributes correctly ([#142](https://github.com/sveltejs/svelte/issues/142))
+* Error on duplicate `<style>`/`<script>` tags rather than failing silently ([#142](https://github.com/sveltejs/svelte/issues/142))
+* Don't create whitespace text nodes inside SVG elements ([#142](https://github.com/sveltejs/svelte/issues/142))
+* Require void elements to be lowercase, to eliminate confusion with components ([#137](https://github.com/sveltejs/svelte/issues/137))
+
+## 1.1.2
+
+* Deconflict variable names ([#88](https://github.com/sveltejs/svelte/issues/88), [#126](https://github.com/sveltejs/svelte/issues/126))
+
+## 1.1.1
+
+* Support multiple SVG elements in a component ([#130](https://github.com/sveltejs/svelte/issues/130))
+
+## 1.1.0
+
+* Separate fragment creation from `mount` ([#91](https://github.com/sveltejs/svelte/pull/91))
+* Trigger `onrender` hook at correct time for nested components ([#103](https://github.com/sveltejs/svelte/pull/103))
+* Fix keypath dynamic attributes in components ([#46](https://github.com/sveltejs/svelte/issues/46))
+* Implement `{{yield}}` ([#112](https://github.com/sveltejs/svelte/pull/112))
+* Optimise teardown ([#99](https://github.com/sveltejs/svelte/issues/99))
+* Require computed properties to have at least one dependency ([#115](https://github.com/sveltejs/svelte/pull/115))
+* Support `{{#each ...}}...{{else}}...{{/each}}` ([#90](https://github.com/sveltejs/svelte/issues/90))
+* Triple mustaches ([#35](https://github.com/sveltejs/svelte/issues/35))
+
+## 1.0.7
+
+* Correctly escape HTML entities ([#85](https://github.com/sveltejs/svelte/issues/85))
+
+## 1.0.6
+
+* Generate useful sourcemaps ([#60](https://github.com/sveltejs/svelte/issues/60))
+
+## 1.0.5
+
+* Ensure compiler only generates ES5 code ([#75](https://github.com/sveltejs/svelte/issues/75))
+* `get()` without arguments returns entire state object ([#73](https://github.com/sveltejs/svelte/issues/73))
+
+## 1.0.4
+
+* Handle empty attributes in elements and components ([#63](https://github.com/sveltejs/svelte/issues/63))
+* Detach top-level text nodes inside departing each blocks ([#62](https://github.com/sveltejs/svelte/issues/62))
+
+## 1.0.3
+
+* Better generated code for `if` blocks, especially with `else`/`elseif` chains ([#28](https://github.com/sveltejs/svelte/pull/28))
+* Trim unnecessary whitespace from `else`/`elseif` blocks ([#49](https://github.com/sveltejs/svelte/pull/49))
+* Handle trailing comments in script tags ([#64](https://github.com/sveltejs/svelte/issues/64))
+
+## 1.0.2
+
+Set `style.cssText` rather than `style` ([#44](https://github.com/sveltejs/svelte/issues/44))
+
+## 1.0.1
+
+* Preserve SVG namespace inside each blocks
+* Always use `setAttribute` with SVG elements
+
+## 1.0.0
+
+* Generate AMD, CJS, IIFE and UMD builds
+* Correctly insert text nodes before anchors ([#31](https://github.com/sveltejs/svelte/pull/31))
+
+## 0.3.0
+
+* Fix bug where departing element would unset `ref` incorrectly ([#24](https://github.com/sveltejs/svelte/issues/24))
+* Basic template validation ([#6](https://github.com/sveltejs/svelte/issues/6))
+* Fire `onrender` hooks once component is in DOM ([#18](https://github.com/sveltejs/svelte/issues/18))
+* Only detach nodes when necessary to do so ([#26](https://github.com/sveltejs/svelte/issues/26))
+
+## 0.2.2
+
+* On second thoughts, don't transpile build. Was only really for Uglify's benefit, which is daft
+
+## 0.2.1
+
+* Transpile build
+
+## 0.2.0
+
+* Only generate UMD build, for now
+* Include dependencies in the build, treat as `devDependencies`
+* Faster initial render
+* Parent data overrides child defaults
+* Remove top-level text nodes on teardown
+* Handle `readUntil` errors in parser
+* Basic `<select>` binding
+* Handle missing data
+* Prevent infinite set/observe loops
+* Add `bind:foo` shorthand
+* `else` and `elseif` blocks
+* Hoist imports
+
+## 0.1.1
+
+* Support unquoted attributes
+* Handle entities in attributes
+* Inline nested components
+* `fire` and `on` methods
+
+## 0.1.0
+
+* Breaking change – Svelte compiler now generates constructor functions rather than factories ([#2](https://github.com/sveltejs/svelte/issues/2))
+* SVG support
+
+## 0.0.2
+
+* First release capable of building TodoMVC
+
+## 0.0.1
+
+* Just squatting on the package name
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
new file mode 100644
index 0000000000..65d86fe76a
--- /dev/null
+++ b/CODE_OF_CONDUCT.md
@@ -0,0 +1,3 @@
+This repository is governed by the Svelte Code of Conduct.
+
+https://github.com/sveltejs/community/blob/main/CODE_OF_CONDUCT.md
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000000..c7989caeea
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,141 @@
+# Contributing to Svelte
+
+Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.
+
+The [Open Source Guides](https://opensource.guide/) website has a collection of resources for individuals, communities, and companies. These resources help people who want to learn how to run and contribute to open source projects. Contributors and people new to open source alike will find the following guides especially useful:
+
+* [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/)
+* [Building Welcoming Communities](https://opensource.guide/building-community/)
+
+## Get involved
+
+There are many ways to contribute to Svelte, and many of them do not involve writing any code. Here's a few ideas to get started:
+
+- Simply start using Svelte. Go through the [Getting Started](https://svelte.dev/blog/the-easiest-way-to-get-started) guide. Does everything work as expected? If not, we're always looking for improvements. Let us know by [opening an issue](#reporting-new-issues).
+- Look through the [open issues](https://github.com/sveltejs/svelte/issues). A good starting point would be issues tagged [good first issue](https://github.com/sveltejs/svelte/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22). Provide workarounds, ask for clarification, or suggest labels. Help [triage issues](#triaging-issues-and-pull-requests).
+- If you find an issue you would like to fix, [open a pull request](#your-first-pull-request).
+- Read through our [tutorials](https://svelte.dev/tutorial/basics). If you find anything that is confusing or can be improved, you can make edits by clicking "Edit this chapter" at the bottom left of the tutorial page.
+- Take a look at the [features requested](https://github.com/sveltejs/svelte/labels/feature%20request) by others in the community and consider opening a pull request if you see something you want to work on.
+
+Contributions are very welcome. If you think you need help planning your contribution, please ping us on Discord at [svelte.dev/chat](https://svelte.dev/chat) and let us know you are looking for a bit of help.
+
+### Triaging issues and pull requests
+
+One great way you can contribute to the project without writing any code is to help triage issues and pull requests as they come in.
+
+- Ask for more information if you believe the issue does not provide all the details required to solve it.
+- Suggest [labels](https://github.com/sveltejs/svelte/labels) that can help categorize issues.
+- Flag issues that are stale or that should be closed.
+- Ask for test plans and review code.
+
+## Bugs
+
+We use [GitHub issues](https://github.com/sveltejs/svelte/issues) for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you are certain this is a new unreported bug, you can submit a [bug report](#reporting-new-issues).
+
+If you have questions about using Svelte, contact us on Discord at [svelte.dev/chat](https://svelte.dev/chat), and we will do our best to answer your questions.
+
+If you see anything you'd like to be implemented, create a [feature request issue](https://github.com/sveltejs/svelte/issues/new?template=feature_request.md)
+
+## Reporting new issues
+
+When [opening a new issue](https://github.com/sveltejs/svelte/issues/new/choose), always make sure to fill out the issue template. **This step is very important!** Not doing so may result in your issue not being managed in a timely fashion. Don't take this personally if this happens, and feel free to open a new issue once you've gathered all the information required by the template.
+
+- **One issue, one bug:** Please report a single bug per issue.
+- **Provide reproduction steps:** List all the steps necessary to reproduce the issue. The person reading your bug report should be able to follow these steps to reproduce your issue with minimal effort. If possible, use the [REPL](https://svelte.dev/repl) to create your reproduction.
+
+## RFCs
+
+If you'd like to propose an implementation for a large new feature or change then please [create an RFC](https://github.com/sveltejs/rfcs) to discuss it up front.
+
+## Installation
+
+1. Ensure you have [npm](https://www.npmjs.com/get-npm) installed.
+1. After cloning the repository, run `npm install` in the root of the repository.
+1. To start a development server, run `npm run dev`.
+
+## Pull requests
+
+### Your first pull request
+
+So you have decided to contribute code back to upstream by opening a pull request. You've invested a good chunk of time, and we appreciate it. We will do our best to work with you and get the PR looked at.
+
+Working on your first Pull Request? You can learn how from this free video series:
+
+[**How to Contribute to an Open Source Project on GitHub**](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
+
+### Proposing a change
+
+If you would like to request a new feature or enhancement but are not yet thinking about opening a pull request, you can also file an issue with [feature template](https://github.com/sveltejs/svelte/issues/new?template=feature_request.md).
+
+If you're only fixing a bug, it's fine to submit a pull request right away, but we still recommend that you file an issue detailing what you're fixing. This is helpful in case we don't accept that specific fix but want to keep track of the issue.
+
+### Sending a pull request
+
+Small pull requests are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.
+
+Please make sure the following is done when submitting a pull request:
+
+1. Fork [the repository](https://github.com/sveltejs/svelte) and create your branch from `master`.
+1. Describe your **test plan** in your pull request description. Make sure to test your changes.
+1. Make sure your code lints (`npm run lint`).
+1. Make sure your tests pass (`npm run test`).
+
+All pull requests should be opened against the `master` branch.
+
+#### Test plan
+
+A good test plan has the exact commands you ran and their output, provides screenshots or videos if the pull request changes UI.
+
+- If you've changed APIs, update the documentation.
+
+#### Writing tests
+
+All tests are located in `/test` folder.
+
+Test samples are kept in `/test/xxx/samples` folder.
+
+#### Running tests
+
+1. To run test, run `npm run test`.
+1. To run test for a specific feature, you can use the `-g` (aka `--grep`) option. For example, to only run test involving transitions, run `npm run test -- -g transition`.
+
+##### Running solo test
+
+1. To run only one test, rename the test sample folder to end with `.solo`. For example, to run the `test/js/samples/action` only, rename it to `test/js/samples/action.solo`.
+1. To run only one test suite, rename the test suite folder to end with `.solo`. For example, to run the `test/js` test suite only, rename it to `test/js.solo`.
+1. Remember to rename the test folder back. The CI will fail if there's a solo test.
+
+##### Updating `.expected` files
+
+1. Tests suites like `css`, `js`, `server-side-rendering` asserts that the generated output has to match the content in the `.expected` file. For example, in the `js` test suites, the generated js code is compared against the content in `expected.js`.
+1. To update the content of the `.expected` file, run the test with `--update` flag. (`npm run test --update`)
+
+#### Breaking changes
+
+When adding a new breaking change, follow this template in your pull request:
+
+```md
+### New breaking change here
+
+- **Who does this affect**:
+- **How to migrate**:
+- **Why make this breaking change**:
+- **Severity (number of people affected x effort)**:
+```
+
+### What happens next?
+
+The core Svelte team will be monitoring for pull requests. Do help us by making your pull request easy to review by following the guidelines above.
+
+## Style guide
+
+[Eslint](https://eslint.org) will catch most styling issues that may exist in your code. You can check the status of your code styling by simply running `npm run lint`.
+
+### Code conventions
+
+- `snake_case` for internal variable names and methods.
+- `camelCase` for public variable names and methods.
+
+## License
+
+By contributing to Svelte, you agree that your contributions will be licensed under its [MIT license](https://github.com/sveltejs/svelte/blob/master/LICENSE).
diff --git a/LICENSE.md b/LICENSE.md
new file mode 100644
index 0000000000..cd8f94f4ca
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,7 @@
+Copyright (c) 2016-22 [these people](https://github.com/sveltejs/svelte/graphs/contributors)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000000..fa66ac6cc9
--- /dev/null
+++ b/README.md
@@ -0,0 +1,75 @@
+[![Cybernetically enhanced web apps: Svelte](https://sveltejs.github.io/assets/banner.png)](https://svelte.dev)
+
+
+[![npm version](https://img.shields.io/npm/v/svelte.svg)](https://www.npmjs.com/package/svelte) [![license](https://img.shields.io/npm/l/svelte.svg)](LICENSE.md) [![Chat](https://img.shields.io/discord/457912077277855764?label=chat&logo=discord)](https://svelte.dev/chat)
+
+
+## What is Svelte?
+
+Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.
+
+Learn more at the [Svelte website](https://svelte.dev), or stop by the [Discord chatroom](https://svelte.dev/chat).
+
+
+## Supporting Svelte
+
+Svelte is an MIT-licensed open source project with its ongoing development made possible entirely by fantastic volunteers. If you'd like to support their efforts, please consider:
+
+- [Becoming a backer on Open Collective](https://opencollective.com/svelte).
+
+Funds donated via Open Collective will be used for compensating expenses related to Svelte's development such as hosting costs. If sufficient donations are received, funds may also be used to support Svelte's development more directly.
+
+
+## Development
+
+Pull requests are encouraged and always welcome. [Pick an issue](https://github.com/sveltejs/svelte/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) and help us out!
+
+To install and work on Svelte locally:
+
+```bash
+git clone https://github.com/sveltejs/svelte.git
+cd svelte
+npm install
+```
+
+> Do not use Yarn to install the dependencies, as the specific package versions in `package-lock.json` are used to build and test Svelte.
+
+To build the compiler and all the other modules included in the package:
+
+```bash
+npm run build
+```
+
+To watch for changes and continually rebuild the package (this is useful if you're using [npm link](https://docs.npmjs.com/cli/link.html) to test out changes in a project locally):
+
+```bash
+npm run dev
+```
+
+The compiler is written in [TypeScript](https://www.typescriptlang.org/), but don't let that put you off — it's basically just JavaScript with type annotations. You'll pick it up in no time. If you're using an editor other than [Visual Studio Code](https://code.visualstudio.com/), you may need to install a plugin in order to get syntax highlighting and code hints, etc.
+
+
+### Running Tests
+
+```bash
+npm run test
+```
+
+To filter tests, use `-g` (aka `--grep`). For example, to only run tests involving transitions:
+
+```bash
+npm run test -- -g transition
+```
+
+
+## svelte.dev
+
+The source code for https://svelte.dev, including all the documentation, lives in the [site](site) directory. The site is built with [SvelteKit](https://kit.svelte.dev).
+
+### Is svelte.dev down?
+
+Probably not, but it's possible. If you can't seem to access any `.dev` sites, check out [this SuperUser question and answer](https://superuser.com/q/1413402).
+
+## License
+
+[MIT](LICENSE.md)
diff --git a/check_publish_env.js b/check_publish_env.js
new file mode 100644
index 0000000000..ce6f066cff
--- /dev/null
+++ b/check_publish_env.js
@@ -0,0 +1,4 @@
+if (!process.env.PUBLISH) {
+	console.error('npm publish must be run with the PUBLISH environment variable set');
+	process.exit(1);
+}
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000000..3e84c9b8c6
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,8381 @@
+{
+  "name": "svelte",
+  "version": "3.48.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "svelte",
+      "version": "3.48.0",
+      "license": "MIT",
+      "devDependencies": {
+        "@ampproject/remapping": "^0.3.0",
+        "@rollup/plugin-commonjs": "^11.0.0",
+        "@rollup/plugin-json": "^4.0.1",
+        "@rollup/plugin-node-resolve": "^6.0.0",
+        "@rollup/plugin-replace": "^2.3.0",
+        "@rollup/plugin-sucrase": "^3.1.0",
+        "@rollup/plugin-typescript": "^2.0.1",
+        "@rollup/plugin-virtual": "^2.0.0",
+        "@sveltejs/eslint-config": "github:sveltejs/eslint-config#v5.8.0",
+        "@types/mocha": "^7.0.0",
+        "@types/node": "^8.10.53",
+        "@typescript-eslint/eslint-plugin": "^5.22.0",
+        "@typescript-eslint/parser": "^5.22.0",
+        "acorn": "^8.4.1",
+        "agadoo": "^1.1.0",
+        "code-red": "^0.2.5",
+        "css-tree": "^1.1.2",
+        "eslint": "^8.0.0",
+        "eslint-plugin-import": "^2.26.0",
+        "eslint-plugin-svelte3": "^4.0.0",
+        "estree-walker": "^3.0.0",
+        "is-reference": "^3.0.0",
+        "jsdom": "^15.2.1",
+        "kleur": "^3.0.3",
+        "locate-character": "^2.0.5",
+        "magic-string": "^0.25.3",
+        "mocha": "^7.0.0",
+        "periscopic": "^3.0.4",
+        "puppeteer": "^2.0.0",
+        "rollup": "^1.27.14",
+        "source-map": "^0.7.3",
+        "source-map-support": "^0.5.13",
+        "sourcemap-codec": "^1.4.8",
+        "tiny-glob": "^0.2.6",
+        "tslib": "^2.0.3",
+        "typescript": "^3.7.5"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-0.3.0.tgz",
+      "integrity": "sha512-dqmASpaTCavldZqwdEpokgG4yOXmEiEGPP3ATTsBbdXXSKf6kx8jt2fPcKhodABdZlYe82OehR2oFK1y9gwZxw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "1.0.0",
+        "sourcemap-codec": "1.4.8"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.2.tgz",
+      "integrity": "sha512-lTVWHs7O2hjBFZunXTZYnYqtB9GakA1lnxIf+gKq2nY5gxkkNi/lQvveW6t8gFdOHTg6nG50Xs95PrLqVpcaLg==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.3.1",
+        "globals": "^13.9.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.0.4",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "node_modules/@eslint/eslintrc/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.9.5",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
+      "integrity": "sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==",
+      "dev": true,
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^1.2.1",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+      "dev": true
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-1.0.0.tgz",
+      "integrity": "sha512-9oLAnygRMi8Q5QkYEU4XWK04B+nuoXoxjRvRxgjuChkLZFBja0YPSgdZ7dZtwhncLBcQe/I/E+fLuk5qxcYVJA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@rollup/plugin-commonjs": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-11.0.0.tgz",
+      "integrity": "sha512-jnm//T5ZWOZ6zmJ61fReSCBOif+Ax8dHVoVggA+d2NA7T4qCWgQ3KYr+zN2faGEYLpe1wa03IzvhR+sqVLxUWg==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^3.0.0",
+        "estree-walker": "^0.6.1",
+        "is-reference": "^1.1.2",
+        "magic-string": "^0.25.2",
+        "resolve": "^1.11.0"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
+    "node_modules/@rollup/plugin-commonjs/node_modules/estree-walker": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+      "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+      "dev": true
+    },
+    "node_modules/@rollup/plugin-commonjs/node_modules/is-reference": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
+      "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@rollup/plugin-json": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.0.1.tgz",
+      "integrity": "sha512-soxllkhOGgchswBAAaTe7X9G80U2tjjHvXv0sBrriLJcC/89PkP59iTrKPOfbz3SjX088mKDmMhAscuyLz8ZSg==",
+      "dev": true,
+      "dependencies": {
+        "rollup-pluginutils": "^2.5.0"
+      }
+    },
+    "node_modules/@rollup/plugin-node-resolve": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-6.0.0.tgz",
+      "integrity": "sha512-GqWz1CfXOsqpeVMcoM315+O7zMxpRsmhWyhJoxLFHVSp9S64/u02i7len/FnbTNbmgYs+sZyilasijH8UiuboQ==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^3.0.0",
+        "@types/resolve": "0.0.8",
+        "builtin-modules": "^3.1.0",
+        "is-module": "^1.0.0",
+        "resolve": "^1.11.1"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
+    "node_modules/@rollup/plugin-replace": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-2.3.0.tgz",
+      "integrity": "sha512-rzWAMqXAHC1w3eKpK6LxRqiF4f3qVFaa1sGii6Bp3rluKcwHNOpPt+hWRCmAH6SDEPtbPiLFf0pfNQyHs6Btlg==",
+      "dev": true,
+      "dependencies": {
+        "magic-string": "^0.25.2",
+        "rollup-pluginutils": "^2.6.0"
+      }
+    },
+    "node_modules/@rollup/plugin-sucrase": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-sucrase/-/plugin-sucrase-3.1.0.tgz",
+      "integrity": "sha512-PZ70LDNgIj8rL+3pKwKwTBOQ2c9JofXeLbWz+2V4/nCt4LqwYTNqxJJf1riTJsVARVzJdA0woIzUzjKZvL8TfA==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^3.0.1",
+        "sucrase": "^3.10.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@rollup/plugin-typescript": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-2.0.1.tgz",
+      "integrity": "sha512-UA/bN/DlHN19xdOllXmp7G7pM2ac9dQMg0q2T1rg4Bogzb7oHXj2WGafpiNpEm54PivcJdzGRJvRnI6zCISW3w==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^3.0.0",
+        "resolve": "^1.12.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@rollup/plugin-virtual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-virtual/-/plugin-virtual-2.0.0.tgz",
+      "integrity": "sha512-yUyQjcflsN1DGcUHj3I0NYL6Y6xrna6qjdaGjM93LjFLq8NFowhR0655ICeV9bNDbk+LI4pz7Q6xqeDdj1RdlA==",
+      "dev": true
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.0.1.tgz",
+      "integrity": "sha512-PmNurkecagFimv7ZdKCVOfQuqKDPkrcpLFxRBcQ00LYr4HAjJwhCFxBiY2Xoletll2htTIiXBg6g0Yg21h2M3w==",
+      "dev": true,
+      "dependencies": {
+        "estree-walker": "^0.6.1"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
+    "node_modules/@rollup/pluginutils/node_modules/estree-walker": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+      "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+      "dev": true
+    },
+    "node_modules/@sveltejs/eslint-config": {
+      "resolved": "git+ssh://git@github.com/sveltejs/eslint-config.git#31fd4faeea88990069502460b023698b1c9c2d13",
+      "dev": true
+    },
+    "node_modules/@types/estree": {
+      "version": "0.0.50",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz",
+      "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
+      "dev": true
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
+      "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
+      "dev": true
+    },
+    "node_modules/@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
+      "dev": true
+    },
+    "node_modules/@types/mime-types": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.1.tgz",
+      "integrity": "sha512-vXOTGVSLR2jMw440moWTC7H19iUyLtP3Z1YTj7cSsubOICinjMxFeb/V57v9QdyyPGbbWolUFSSmSiRSn94tFw==",
+      "dev": true
+    },
+    "node_modules/@types/mocha": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-7.0.2.tgz",
+      "integrity": "sha512-ZvO2tAcjmMi8V/5Z3JsyofMe3hasRcaw88cto5etSVMwVQfeivGAlEYmaQgceUSVYFofVjT+ioHsATjdWcFt1w==",
+      "dev": true
+    },
+    "node_modules/@types/node": {
+      "version": "8.10.53",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-8.10.53.tgz",
+      "integrity": "sha512-aOmXdv1a1/vYUn1OT1CED8ftbkmmYbKhKGSyMDeJiidLvKRKvZUQOdXwG/wcNY7T1Qb0XTlVdiYjIq00U7pLrQ==",
+      "dev": true
+    },
+    "node_modules/@types/resolve": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
+      "integrity": "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.22.0.tgz",
+      "integrity": "sha512-YCiy5PUzpAeOPGQ7VSGDEY2NeYUV1B0swde2e0HzokRsHBYjSdF6DZ51OuRZxVPHx0032lXGLvOMls91D8FXlg==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "5.22.0",
+        "@typescript-eslint/type-utils": "5.22.0",
+        "@typescript-eslint/utils": "5.22.0",
+        "debug": "^4.3.2",
+        "functional-red-black-tree": "^1.0.1",
+        "ignore": "^5.1.8",
+        "regexpp": "^3.2.0",
+        "semver": "^7.3.5",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^5.0.0",
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": {
+      "version": "7.3.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+      "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.22.0.tgz",
+      "integrity": "sha512-piwC4krUpRDqPaPbFaycN70KCP87+PC5WZmrWs+DlVOxxmF+zI6b6hETv7Quy4s9wbkV16ikMeZgXsvzwI3icQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "5.22.0",
+        "@typescript-eslint/types": "5.22.0",
+        "@typescript-eslint/typescript-estree": "5.22.0",
+        "debug": "^4.3.2"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.22.0.tgz",
+      "integrity": "sha512-yA9G5NJgV5esANJCO0oF15MkBO20mIskbZ8ijfmlKIvQKg0ynVKfHZ15/nhAJN5m8Jn3X5qkwriQCiUntC9AbA==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.22.0",
+        "@typescript-eslint/visitor-keys": "5.22.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.22.0.tgz",
+      "integrity": "sha512-iqfLZIsZhK2OEJ4cQ01xOq3NaCuG5FQRKyHicA3xhZxMgaxQazLUHbH/B2k9y5i7l3+o+B5ND9Mf1AWETeMISA==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/utils": "5.22.0",
+        "debug": "^4.3.2",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.22.0.tgz",
+      "integrity": "sha512-T7owcXW4l0v7NTijmjGWwWf/1JqdlWiBzPqzAWhobxft0SiEvMJB56QXmeCQjrPuM8zEfGUKyPQr/L8+cFUBLw==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.22.0.tgz",
+      "integrity": "sha512-EyBEQxvNjg80yinGE2xdhpDYm41so/1kOItl0qrjIiJ1kX/L/L8WWGmJg8ni6eG3DwqmOzDqOhe6763bF92nOw==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.22.0",
+        "@typescript-eslint/visitor-keys": "5.22.0",
+        "debug": "^4.3.2",
+        "globby": "^11.0.4",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.5",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+      "version": "7.3.7",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.22.0.tgz",
+      "integrity": "sha512-HodsGb037iobrWSUMS7QH6Hl1kppikjA1ELiJlNSTYf/UdMEwzgj0WIp+lBNb6WZ3zTwb0tEz51j0Wee3iJ3wQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "@typescript-eslint/scope-manager": "5.22.0",
+        "@typescript-eslint/types": "5.22.0",
+        "@typescript-eslint/typescript-estree": "5.22.0",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.22.0.tgz",
+      "integrity": "sha512-DbgTqn2Dv5RFWluG88tn0pP6Ex0ROF+dpDO1TNNZdRtLjUr6bdznjA6f/qNqJLjd2PgguAES2Zgxh/JzwzETDg==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.22.0",
+        "eslint-visitor-keys": "^3.0.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+      "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/abab": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.0.tgz",
+      "integrity": "sha512-sY5AXXVZv4Y1VACTtR11UJCPHHudgY5i26Qj5TypE6DKlIApbwb5uqhXcJ5UUGbvZNRh7EeIoW+LrJumBsKp7w==",
+      "dev": true
+    },
+    "node_modules/acorn": {
+      "version": "8.7.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
+      "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-globals": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-4.3.3.tgz",
+      "integrity": "sha512-vkR40VwS2SYO98AIeFvzWWh+xyc2qi9s7OoXSFEGIP/rOJKzjnhykaZJNnHdoq4BL2gGxI5EZOU16z896EYnOQ==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^6.0.1",
+        "acorn-walk": "^6.0.1"
+      }
+    },
+    "node_modules/acorn-globals/node_modules/acorn": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
+      "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/acorn-walk": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.2.0.tgz",
+      "integrity": "sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/agadoo": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/agadoo/-/agadoo-1.1.0.tgz",
+      "integrity": "sha512-MiTXQ3As5jARRXa0eZF+ObtzsseQurCXOc1RB19NOGDsimEvoT8DB8iQiC0zAGTfsF/nBhzEle+eV9UpXyWnbw==",
+      "dev": true,
+      "dependencies": {
+        "rollup": "^1",
+        "rollup-plugin-virtual": "^1.0.1"
+      },
+      "bin": {
+        "agadoo": "agadoo"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz",
+      "integrity": "sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
+      "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha1-q8av7tzqUugJzcA3au0845Y10X8=",
+      "dev": true
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/array-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
+      "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=",
+      "dev": true
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz",
+      "integrity": "sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5",
+        "get-intrinsic": "^1.1.1",
+        "is-string": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
+      "integrity": "sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/asn1": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
+      "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
+      "dev": true,
+      "dependencies": {
+        "safer-buffer": "~2.1.0"
+      }
+    },
+    "node_modules/assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/async-limiter": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
+      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
+      "dev": true
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
+      "dev": true
+    },
+    "node_modules/aws-sign2": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/aws4": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
+      "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
+      "dev": true
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
+    },
+    "node_modules/bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
+      "dev": true,
+      "dependencies": {
+        "tweetnacl": "^0.14.3"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browser-process-hrtime": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-0.1.3.tgz",
+      "integrity": "sha512-bRFnI4NnjO6cnyLmOV/7PVoDEMJChlcfN0z4s1YMBY989/SvlfMI1lgCnkFUs53e9gQF+w7qu7XdllSTiSl8Aw==",
+      "dev": true
+    },
+    "node_modules/browser-stdout": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz",
+      "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==",
+      "dev": true
+    },
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
+      "dev": true
+    },
+    "node_modules/builtin-modules": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz",
+      "integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
+      "dev": true
+    },
+    "node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chalk/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.3.0.tgz",
+      "integrity": "sha512-dGmKLDdT3Gdl7fBUe8XK+gAtGmzy5Fn0XkkWQuYxGIgWVPPse2CxFA5mtrlD0TOHaHjEUqkWNyP1XdHoJES/4A==",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "~3.1.1",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.0",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.2.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.1.1"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^3.1.0",
+        "strip-ansi": "^5.2.0",
+        "wrap-ansi": "^5.1.0"
+      }
+    },
+    "node_modules/code-red": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/code-red/-/code-red-0.2.5.tgz",
+      "integrity": "sha512-x+uQyJLNS1v0+74eXqM7FMPoM1fU/fN3tdexGWtCuVjCfxADt1TuuEGIGlFyCC2vhgINDctDb/rgSn8/ZDfJsQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^0.0.50",
+        "acorn": "^8.0.5",
+        "estree-walker": "^3.0.0",
+        "is-reference": "^3.0.0",
+        "periscopic": "^3.0.4",
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "node_modules/concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "dev": true,
+      "engines": [
+        "node >= 0.8"
+      ],
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+      "dev": true
+    },
+    "node_modules/css-tree": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.2.tgz",
+      "integrity": "sha512-wCoWush5Aeo48GLhfHPbmvZs59Z+M7k5+B1xDnXbdWNcEF423DoFdqSWE0PM5aNk5nI5cp1q7ms36zGApY/sKQ==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-tree/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/cssom": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
+      "integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==",
+      "dev": true
+    },
+    "node_modules/cssstyle": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
+      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+      "dev": true,
+      "dependencies": {
+        "cssom": "~0.3.6"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cssstyle/node_modules/cssom": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
+      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
+      "dev": true
+    },
+    "node_modules/dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
+      "dev": true,
+      "dependencies": {
+        "assert-plus": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/data-urls": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-1.1.0.tgz",
+      "integrity": "sha512-YTWYI9se1P55u58gL5GkQHW4P6VJBJ5iBT+B5a7i2Tjadhv52paJG0qHX4A0OR6/t52odI64KP2YvFpkDOi3eQ==",
+      "dev": true,
+      "dependencies": {
+        "abab": "^2.0.0",
+        "whatwg-mimetype": "^2.2.0",
+        "whatwg-url": "^7.0.0"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+      "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
+      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
+      "dev": true
+    },
+    "node_modules/define-properties": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
+      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
+      "dev": true,
+      "dependencies": {
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/diff": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
+      "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/domexception": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz",
+      "integrity": "sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==",
+      "dev": true,
+      "dependencies": {
+        "webidl-conversions": "^4.0.2"
+      }
+    },
+    "node_modules/ecc-jsbn": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
+      "dev": true,
+      "dependencies": {
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
+      "dev": true
+    },
+    "node_modules/es-abstract": {
+      "version": "1.19.5",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.5.tgz",
+      "integrity": "sha512-Aa2G2+Rd3b6kxEUKTF4TaW67czBLyAv3z7VOhYRU50YBx+bbsYZ9xQP4lMNazePuFlybXI0V4MruPos7qUo5fA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "es-to-primitive": "^1.2.1",
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.1.1",
+        "get-symbol-description": "^1.0.0",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.3",
+        "is-callable": "^1.2.4",
+        "is-negative-zero": "^2.0.2",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "is-string": "^1.0.7",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.12.0",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.2",
+        "string.prototype.trimend": "^1.0.4",
+        "string.prototype.trimstart": "^1.0.4",
+        "unbox-primitive": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-abstract/node_modules/object.assign": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "define-properties": "^1.1.3",
+        "has-symbols": "^1.0.1",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
+      "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
+      "dev": true,
+      "dependencies": {
+        "has": "^1.0.3"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
+      "dependencies": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/escodegen": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.11.1.tgz",
+      "integrity": "sha512-JwiqFD9KdGVVpeuRa68yU3zZnBEOcPs0nKW7wZzXky8Z7tffdYUHbe11bPCV5jYlK6DVdKLWLm0f5I/QlL0Kmw==",
+      "dev": true,
+      "dependencies": {
+        "esprima": "^3.1.3",
+        "estraverse": "^4.2.0",
+        "esutils": "^2.0.2",
+        "optionator": "^0.8.1"
+      },
+      "bin": {
+        "escodegen": "bin/escodegen.js",
+        "esgenerate": "bin/esgenerate.js"
+      },
+      "engines": {
+        "node": ">=4.0"
+      },
+      "optionalDependencies": {
+        "source-map": "~0.6.1"
+      }
+    },
+    "node_modules/escodegen/node_modules/esprima": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
+      "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=",
+      "dev": true,
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/escodegen/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.14.0.tgz",
+      "integrity": "sha512-3/CE4aJX7LNEiE3i6FeodHmI/38GZtWCsAtsymScmzYapx8q1nVVb+eLcLSzATmCPXw5pT4TqVs1E0OmxAd9tw==",
+      "dev": true,
+      "dependencies": {
+        "@eslint/eslintrc": "^1.2.2",
+        "@humanwhocodes/config-array": "^0.9.2",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.1.1",
+        "eslint-utils": "^3.0.0",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.3.1",
+        "esquery": "^1.4.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "functional-red-black-tree": "^1.0.1",
+        "glob-parent": "^6.0.1",
+        "globals": "^13.6.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.0.4",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.1",
+        "regexpp": "^3.2.0",
+        "strip-ansi": "^6.0.1",
+        "strip-json-comments": "^3.1.0",
+        "text-table": "^0.2.0",
+        "v8-compile-cache": "^2.0.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
+      "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^3.2.7",
+        "resolve": "^1.20.0"
+      }
+    },
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-module-utils": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz",
+      "integrity": "sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^3.2.7",
+        "find-up": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/find-up": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+      "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/locate-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+      "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^2.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/p-limit": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+      "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+      "dev": true,
+      "dependencies": {
+        "p-try": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/p-locate": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+      "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/p-try": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+      "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/eslint-plugin-import": {
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
+      "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
+      "dev": true,
+      "dependencies": {
+        "array-includes": "^3.1.4",
+        "array.prototype.flat": "^1.2.5",
+        "debug": "^2.6.9",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-module-utils": "^2.7.3",
+        "has": "^1.0.3",
+        "is-core-module": "^2.8.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.values": "^1.1.5",
+        "resolve": "^1.22.0",
+        "tsconfig-paths": "^3.14.1"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+      "dev": true
+    },
+    "node_modules/eslint-plugin-svelte3": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-svelte3/-/eslint-plugin-svelte3-4.0.0.tgz",
+      "integrity": "sha512-OIx9lgaNzD02+MDFNLw0GEUbuovNcglg+wnd/UY0fbZmlQSz7GlQiQ1f+yX0XvC07XPcDOnFcichqI3xCwp71g==",
+      "dev": true,
+      "peerDependencies": {
+        "eslint": ">=8.0.0",
+        "svelte": "^3.2.0"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/eslint-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+      "dev": true,
+      "dependencies": {
+        "eslint-visitor-keys": "^2.0.0"
+      },
+      "engines": {
+        "node": "^10.0.0 || ^12.0.0 || >= 14.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      },
+      "peerDependencies": {
+        "eslint": ">=5"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/eslint/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "node_modules/eslint/node_modules/chalk": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+      "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/eslint/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/eslint/node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/eslint/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/eslint-scope": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
+      "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/eslint/node_modules/eslint-visitor-keys": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+      "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/eslint/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/eslint/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/eslint/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/eslint/node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/eslint/node_modules/optionator": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "dev": true,
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/eslint/node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint/node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/eslint/node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint/node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint/node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/eslint/node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/espree": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.1.tgz",
+      "integrity": "sha512-bvdyLmJMfwkV3NCRl5ZhJf22zBFo1y8bYh3VYb+bfzqNB4Je68P2sSuXyuFquzWLebHpNd2/d5uv7yoP9ISnGQ==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.7.0",
+        "acorn-jsx": "^5.3.1",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/espree/node_modules/eslint-visitor-keys": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+      "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true,
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
+      "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esquery/node_modules/estraverse": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+      "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esrecurse/node_modules/estraverse": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+      "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.2.0.tgz",
+      "integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.0.tgz",
+      "integrity": "sha512-s6ceX0NFiU/vKPiKvFdR83U1Zffu7upwZsGwpoqfg5rbbq1l50WQ5hCeIvM6E6oD4shUHCYMsiFPns4Jk0YfMQ==",
+      "dev": true
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true
+    },
+    "node_modules/extract-zip": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.7.0.tgz",
+      "integrity": "sha512-xoh5G1W/PB0/27lXgMQyIhP5DSY/LhoCsOyZgb+6iMmRtCwVBo55uKaMoEYrDCKQhWvqEip5ZPKAc6eFNyf/MA==",
+      "dev": true,
+      "dependencies": {
+        "concat-stream": "^1.6.2",
+        "debug": "^2.6.9",
+        "mkdirp": "^0.5.4",
+        "yauzl": "^2.10.0"
+      },
+      "bin": {
+        "extract-zip": "cli.js"
+      }
+    },
+    "node_modules/extract-zip/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/extract-zip/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+      "dev": true
+    },
+    "node_modules/extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
+      "dev": true,
+      "engines": [
+        "node >=0.6.0"
+      ]
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "node_modules/fast-glob": {
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
+      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
+      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
+      "dev": true
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
+      "dev": true
+    },
+    "node_modules/fastq": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
+      "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
+      "dev": true,
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
+      "dev": true,
+      "dependencies": {
+        "pend": "~1.2.0"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "dependencies": {
+        "flat-cache": "^3.0.4"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/flat": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-4.1.1.tgz",
+      "integrity": "sha512-FmTtBsHskrU6FJ2VxCnsDb84wu9zhmO3cUX2kGFb5tuwhfXxGciiT0oRY+cck35QmG+NmGh5eLz6lLCpWTqwpA==",
+      "dev": true,
+      "dependencies": {
+        "is-buffer": "~2.0.3"
+      },
+      "bin": {
+        "flat": "cli.js"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "dev": true,
+      "dependencies": {
+        "flatted": "^3.1.0",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^10.12.0 || >=12.0.0"
+      }
+    },
+    "node_modules/flat-cache/node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.2.tgz",
+      "integrity": "sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==",
+      "dev": true
+    },
+    "node_modules/forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+      "dev": true,
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.6",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 0.12"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "node_modules/fsevents": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
+      "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
+      "deprecated": "\"Please update to latest v2.3 or v2.2\"",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
+    "node_modules/functional-red-black-tree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
+      "dev": true
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
+      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
+      "dev": true,
+      "dependencies": {
+        "assert-plus": "^1.0.0"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/globals": {
+      "version": "13.13.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.13.0.tgz",
+      "integrity": "sha512-EQ7Q18AJlPwp3vUDL4mKA0KXrXyNIQyWon6T6XQiBQF0XHvRsiCSrWmmeATpUzdJN2HhWZU6Pdl0a9zdep5p6A==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalyzer": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.4.tgz",
+      "integrity": "sha512-LeguVWaxgHN0MNbWC6YljNMzHkrCny9fzjmEUdnF1kQ7wATFD1RHFRqA1qxaX2tgxGENlcxjOflopBwj3YZiXA==",
+      "dev": true
+    },
+    "node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
+      "dev": true
+    },
+    "node_modules/growl": {
+      "version": "1.10.5",
+      "resolved": "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz",
+      "integrity": "sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.x"
+      }
+    },
+    "node_modules/har-schema": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/har-validator": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
+      "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^6.5.5",
+        "har-schema": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/has-bigints": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz",
+      "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true,
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz",
+      "integrity": "sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==",
+      "dev": true,
+      "dependencies": {
+        "whatwg-encoding": "^1.0.1"
+      }
+    },
+    "node_modules/http-signature": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+      "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
+      "dev": true,
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "jsprim": "^1.2.2",
+        "sshpk": "^1.7.0"
+      },
+      "engines": {
+        "node": ">=0.8",
+        "npm": ">=1.3.7"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz",
+      "integrity": "sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==",
+      "dev": true,
+      "dependencies": {
+        "agent-base": "5",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
+      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "node_modules/internal-slot": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
+      "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.1.0",
+        "has": "^1.0.3",
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ip-regex": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-2.1.0.tgz",
+      "integrity": "sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
+      "dependencies": {
+        "has-bigints": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
+      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-buffer": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+      "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
+      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
+      "integrity": "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==",
+      "dev": true,
+      "dependencies": {
+        "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz",
+      "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
+      "dev": true
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
+      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.6.tgz",
+      "integrity": "sha512-bEVOqiRcvo3zO1+G2lVMy+gkkEm9Yh7cDMRusKKu5ZJKPUYSJwICTKZrNKHA2EbSP0Tu0+6B/emsYNHZyn6K8g==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-reference": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.0.tgz",
+      "integrity": "sha512-Eo1W3wUoHWoCoVM4GVl/a+K0IgiqE5aIo4kJABFyMum1ZORlPkC+UC357sSQUL5w5QCE5kCC9upl75b7+7CY/Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
+      "dev": true
+    },
+    "node_modules/is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+      "dev": true
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "dev": true
+    },
+    "node_modules/isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
+      "dev": true
+    },
+    "node_modules/js-yaml": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
+      "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
+      "dev": true
+    },
+    "node_modules/jsdom": {
+      "version": "15.2.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-15.2.1.tgz",
+      "integrity": "sha512-fAl1W0/7T2G5vURSyxBzrJ1LSdQn6Tr5UX/xD4PXDx/PDgwygedfW6El/KIj3xJ7FU61TTYnc/l/B7P49Eqt6g==",
+      "dev": true,
+      "dependencies": {
+        "abab": "^2.0.0",
+        "acorn": "^7.1.0",
+        "acorn-globals": "^4.3.2",
+        "array-equal": "^1.0.0",
+        "cssom": "^0.4.1",
+        "cssstyle": "^2.0.0",
+        "data-urls": "^1.1.0",
+        "domexception": "^1.0.1",
+        "escodegen": "^1.11.1",
+        "html-encoding-sniffer": "^1.0.2",
+        "nwsapi": "^2.2.0",
+        "parse5": "5.1.0",
+        "pn": "^1.1.0",
+        "request": "^2.88.0",
+        "request-promise-native": "^1.0.7",
+        "saxes": "^3.1.9",
+        "symbol-tree": "^3.2.2",
+        "tough-cookie": "^3.0.1",
+        "w3c-hr-time": "^1.0.1",
+        "w3c-xmlserializer": "^1.1.2",
+        "webidl-conversions": "^4.0.2",
+        "whatwg-encoding": "^1.0.5",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^7.0.0",
+        "ws": "^7.0.0",
+        "xml-name-validator": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jsdom/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/json-schema": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+      "dev": true
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
+      "dev": true
+    },
+    "node_modules/json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
+      "dev": true
+    },
+    "node_modules/json5": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/jsprim": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
+      "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
+      "dev": true,
+      "dependencies": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.4.0",
+        "verror": "1.10.0"
+      },
+      "engines": {
+        "node": ">=0.6.0"
+      }
+    },
+    "node_modules/kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
+      "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
+      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
+      "dev": true
+    },
+    "node_modules/locate-character": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-2.0.5.tgz",
+      "integrity": "sha512-n2GmejDXtOPBAZdIiEFy5dJ5N38xBCXLNOtw2WpB9kGh6pnrEuKlwYI+Tkpofc4wDtVXHtoAOJaMRlYG/oYaxg==",
+      "dev": true
+    },
+    "node_modules/locate-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "dev": true,
+      "dependencies": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "node_modules/lodash.sortby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
+      "dev": true
+    },
+    "node_modules/log-symbols": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-3.0.0.tgz",
+      "integrity": "sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.3.tgz",
+      "integrity": "sha512-6QK0OpF/phMz0Q2AxILkX2mFhi7m+WMwTRg0LQKq/WBB0cDP4rYH3Wp4/d3OTXlrPLVJT/RFqj8tFeAR4nk8AA==",
+      "dev": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.4"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "dev": true
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
+      "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==",
+      "dev": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.50.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.50.0.tgz",
+      "integrity": "sha512-9tMZCDlYHqeERXEHO9f/hKfNXhre5dK2eE/krIvUjZbS2KPcqGDfNShIWS1uW9XOTKQKqK6qbeOci18rbfW77A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.33",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.33.tgz",
+      "integrity": "sha512-plLElXp7pRDd0bNZHw+nMd52vRYjLwQjygaNg7ddJ2uJtTlmnTCjWuPKxVu6//AdaRuME84SvLW91sIkBqGT0g==",
+      "dev": true,
+      "dependencies": {
+        "mime-db": "1.50.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
+      "dev": true
+    },
+    "node_modules/mkdirp": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/mocha": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/mocha/-/mocha-7.2.0.tgz",
+      "integrity": "sha512-O9CIypScywTVpNaRrCAgoUnJgozpIofjKUYmJhiCIJMiuYnLI6otcb1/kpW9/n/tJODHGZ7i8aLQoDVsMtOKQQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-colors": "3.2.3",
+        "browser-stdout": "1.3.1",
+        "chokidar": "3.3.0",
+        "debug": "3.2.6",
+        "diff": "3.5.0",
+        "escape-string-regexp": "1.0.5",
+        "find-up": "3.0.0",
+        "glob": "7.1.3",
+        "growl": "1.10.5",
+        "he": "1.2.0",
+        "js-yaml": "3.13.1",
+        "log-symbols": "3.0.0",
+        "minimatch": "3.0.4",
+        "mkdirp": "0.5.5",
+        "ms": "2.1.1",
+        "node-environment-flags": "1.0.6",
+        "object.assign": "4.1.0",
+        "strip-json-comments": "2.0.1",
+        "supports-color": "6.0.0",
+        "which": "1.3.1",
+        "wide-align": "1.1.3",
+        "yargs": "13.3.2",
+        "yargs-parser": "13.1.2",
+        "yargs-unparser": "1.6.0"
+      },
+      "bin": {
+        "_mocha": "bin/_mocha",
+        "mocha": "bin/mocha"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mochajs"
+      }
+    },
+    "node_modules/mocha/node_modules/ansi-colors": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.3.tgz",
+      "integrity": "sha512-LEHHyuhlPY3TmuUYMh2oz89lTShfvgbmzaBcxve9t/9Wuy7Dwf4yoAKcND7KFT1HAQfqZ12qtc+DUrBMeKF9nw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mocha/node_modules/debug": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+      "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+      "deprecated": "Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/mocha/node_modules/glob": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+      "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/mocha/node_modules/ms": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
+      "dev": true
+    },
+    "node_modules/mocha/node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/mocha/node_modules/supports-color": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.0.0.tgz",
+      "integrity": "sha512-on9Kwidc1IUQo+bQdhi8+Tijpo0e1SS6RoGo2guUwn5vdaxw8RXOF9Vb2ws+ihWOmh4JnCJOvaziZWP1VABaLg==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mocha/node_modules/yargs-parser": {
+      "version": "13.1.2",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+      "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+      "dev": true,
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
+      "dev": true
+    },
+    "node_modules/node-environment-flags": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/node-environment-flags/-/node-environment-flags-1.0.6.tgz",
+      "integrity": "sha512-5Evy2epuL+6TM0lCQGpFIj6KwiEsGh1SrHUhTbNX+sLbBtjidPZFAnVK9y5yU1+h//RitLbRHTIMyxQPtxMdHw==",
+      "dev": true,
+      "dependencies": {
+        "object.getownpropertydescriptors": "^2.0.3",
+        "semver": "^5.7.0"
+      }
+    },
+    "node_modules/node-modules-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz",
+      "integrity": "sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nwsapi": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
+      "integrity": "sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==",
+      "dev": true
+    },
+    "node_modules/oauth-sign": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
+      "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
+      "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
+      "dev": true,
+      "dependencies": {
+        "define-properties": "^1.1.2",
+        "function-bind": "^1.1.1",
+        "has-symbols": "^1.0.0",
+        "object-keys": "^1.0.11"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.getownpropertydescriptors": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.2.tgz",
+      "integrity": "sha512-WtxeKSzfBjlzL+F9b7M7hewDzMwy+C8NRssHd1YrNlzHzIDrXcXiNOMrezdAEM4UXixgV+vvnyBeN7Rygl2ttQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz",
+      "integrity": "sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
+      "integrity": "sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=",
+      "dev": true,
+      "dependencies": {
+        "deep-is": "~0.1.3",
+        "fast-levenshtein": "~2.0.4",
+        "levn": "~0.3.0",
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2",
+        "wordwrap": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.0.tgz",
+      "integrity": "sha512-pZbTJpoUsCzV48Mc9Nh51VbwO0X9cuPFE8gYwx9BTCt9SF8/b7Zljd2fVgOxhIF/HDTKgpVzs+GPhyKfjLLFRQ==",
+      "dev": true,
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+      "dev": true,
+      "dependencies": {
+        "p-limit": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
+      "integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==",
+      "dev": true
+    },
+    "node_modules/path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
+      "dev": true
+    },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
+      "dev": true
+    },
+    "node_modules/periscopic": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.0.4.tgz",
+      "integrity": "sha512-SFx68DxCv0Iyo6APZuw/AKewkkThGwssmU0QWtTlvov3VAtPX+QJ4CadwSaz8nrT5jPIuxdvJWB4PnD2KNDxQg==",
+      "dev": true,
+      "dependencies": {
+        "estree-walker": "^3.0.0",
+        "is-reference": "^3.0.0"
+      }
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz",
+      "integrity": "sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==",
+      "dev": true,
+      "dependencies": {
+        "node-modules-regexp": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/pn": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz",
+      "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
+      "dev": true
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
+      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "dev": true
+    },
+    "node_modules/progress": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "dev": true
+    },
+    "node_modules/psl": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.3.0.tgz",
+      "integrity": "sha512-avHdspHO+9rQTLbv1RO+MPYeP/SzsCoxofjVnHanETfQhTJrmB0HlDoW+EiN/R+C0BZ+gERab9NY0lPN2TxNag==",
+      "dev": true
+    },
+    "node_modules/punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/puppeteer": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-2.1.1.tgz",
+      "integrity": "sha512-LWzaDVQkk1EPiuYeTOj+CZRIjda4k2s5w4MK4xoH2+kgWV/SDlkYHmxatDdtYrciHUKSXTsGgPgPP8ILVdBsxg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "@types/mime-types": "^2.1.0",
+        "debug": "^4.1.0",
+        "extract-zip": "^1.6.6",
+        "https-proxy-agent": "^4.0.0",
+        "mime": "^2.0.3",
+        "mime-types": "^2.1.25",
+        "progress": "^2.0.1",
+        "proxy-from-env": "^1.0.0",
+        "rimraf": "^2.6.1",
+        "ws": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=8.16.0"
+      }
+    },
+    "node_modules/puppeteer/node_modules/ws": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
+      "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
+      "dev": true,
+      "dependencies": {
+        "async-limiter": "~1.0.0"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dev": true,
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.2.0.tgz",
+      "integrity": "sha512-crk4Qu3pmXwgxdSgGhgA/eXiJAPQiX4GMOZZMXnqKxHX7TaoL+3gQVo/WeuAiogr07DpnfjIMpXXa+PAIvwPGQ==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/regexpp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
+      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      }
+    },
+    "node_modules/request": {
+      "version": "2.88.0",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
+      "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
+      "dev": true,
+      "dependencies": {
+        "aws-sign2": "~0.7.0",
+        "aws4": "^1.8.0",
+        "caseless": "~0.12.0",
+        "combined-stream": "~1.0.6",
+        "extend": "~3.0.2",
+        "forever-agent": "~0.6.1",
+        "form-data": "~2.3.2",
+        "har-validator": "~5.1.0",
+        "http-signature": "~1.2.0",
+        "is-typedarray": "~1.0.0",
+        "isstream": "~0.1.2",
+        "json-stringify-safe": "~5.0.1",
+        "mime-types": "~2.1.19",
+        "oauth-sign": "~0.9.0",
+        "performance-now": "^2.1.0",
+        "qs": "~6.5.2",
+        "safe-buffer": "^5.1.2",
+        "tough-cookie": "~2.4.3",
+        "tunnel-agent": "^0.6.0",
+        "uuid": "^3.3.2"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/request-promise-core": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.2.tgz",
+      "integrity": "sha512-UHYyq1MO8GsefGEt7EprS8UrXsm1TxEvFUX1IMTuSLU2Rh7fTIdFtl8xD7JiEYiWU2dl+NYAjCTksTehQUxPag==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.17.11"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/request-promise-native": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/request-promise-native/-/request-promise-native-1.0.7.tgz",
+      "integrity": "sha512-rIMnbBdgNViL37nZ1b3L/VfPOpSi0TqVDQPAvO6U14lMzOLrt5nilxCQqtDKhZeDiW0/hkCXGoQjhgJd/tCh6w==",
+      "dev": true,
+      "dependencies": {
+        "request-promise-core": "1.1.2",
+        "stealthy-require": "^1.1.1",
+        "tough-cookie": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/request-promise-native/node_modules/tough-cookie": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+      "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+      "dev": true,
+      "dependencies": {
+        "psl": "^1.1.28",
+        "punycode": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/request/node_modules/punycode": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
+      "dev": true
+    },
+    "node_modules/request/node_modules/tough-cookie": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
+      "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==",
+      "dev": true,
+      "dependencies": {
+        "psl": "^1.1.24",
+        "punycode": "^1.4.1"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "dev": true
+    },
+    "node_modules/resolve": {
+      "version": "1.22.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
+      "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.8.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+      "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "1.27.14",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.27.14.tgz",
+      "integrity": "sha512-DuDjEyn8Y79ALYXMt+nH/EI58L5pEw5HU9K38xXdRnxQhvzUTI/nxAawhkAHUQeudANQ//8iyrhVRHJBuR6DSQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "*",
+        "@types/node": "*",
+        "acorn": "^7.1.0"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      }
+    },
+    "node_modules/rollup-plugin-virtual": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-virtual/-/rollup-plugin-virtual-1.0.1.tgz",
+      "integrity": "sha512-HCTBpV8MwP5lNzZrHD2moVxHIToHU1EkzkKGVj6Z0DcgUfxrxrZmeQirQeLz2yhnkJqRjwiVywK9CS8jDYakrw==",
+      "dev": true
+    },
+    "node_modules/rollup-pluginutils": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+      "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+      "dev": true,
+      "dependencies": {
+        "estree-walker": "^0.6.1"
+      }
+    },
+    "node_modules/rollup-pluginutils/node_modules/estree-walker": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+      "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+      "dev": true
+    },
+    "node_modules/rollup/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
+    },
+    "node_modules/saxes": {
+      "version": "3.1.11",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-3.1.11.tgz",
+      "integrity": "sha512-Ydydq3zC+WYDJK1+gRxRapLIED9PWeSuuS41wqyoRmzvhhh9nc+QQrVMKJYzJFULazeGhzSV0QleN2wD3boh2g==",
+      "dev": true,
+      "dependencies": {
+        "xmlchars": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
+      "dev": true
+    },
+    "node_modules/side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.13",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
+      "integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==",
+      "dev": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
+    },
+    "node_modules/sshpk": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
+      "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",
+      "dev": true,
+      "dependencies": {
+        "asn1": "~0.2.3",
+        "assert-plus": "^1.0.0",
+        "bcrypt-pbkdf": "^1.0.0",
+        "dashdash": "^1.12.0",
+        "ecc-jsbn": "~0.1.1",
+        "getpass": "^0.1.1",
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.0.2",
+        "tweetnacl": "~0.14.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stealthy-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
+      "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^7.0.1",
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
+      "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
+      "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.16.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.16.0.tgz",
+      "integrity": "sha512-ovVuswxV5TayCPXfTk8bgBgk6uNRvsinIkEpq0J6zS1xXCx5N/LLGcbsKdRhqn/ToZylMX6+yXaR1LSn1I42Pg==",
+      "dev": true,
+      "dependencies": {
+        "commander": "^4.0.0",
+        "glob": "7.1.6",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/svelte": {
+      "version": "3.43.0",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.43.0.tgz",
+      "integrity": "sha512-T2pMPHrxXp+SM8pLLUXLQgkdo+JhTls7aqj9cD7z8wT2ccP+OrCAmtQS7h6pvMjitaZhXFNnCK582NxDpy8HSw==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
+      "dev": true
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha1-GhkY1ALY/D+Y+/I02wvMjMEOlyY=",
+      "dev": true,
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tiny-glob": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.6.tgz",
+      "integrity": "sha512-A7ewMqPu1B5PWwC3m7KVgAu96Ch5LA0w4SnEN/LbDREj/gAD0nPWboRbn8YoP9ISZXqeNAlMvKSKoEuhcfK3Pw==",
+      "dev": true,
+      "dependencies": {
+        "globalyzer": "^0.1.0",
+        "globrex": "^0.1.1"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/tough-cookie": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-3.0.1.tgz",
+      "integrity": "sha512-yQyJ0u4pZsv9D4clxO69OEjLWYw+jbgspjTue4lTQZLfV0c5l1VmK2y1JK8E9ahdpltPOaAThPcp5nKPUgSnsg==",
+      "dev": true,
+      "dependencies": {
+        "ip-regex": "^2.1.0",
+        "psl": "^1.1.28",
+        "punycode": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
+      "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
+    },
+    "node_modules/tsconfig-paths": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
+      "integrity": "sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.1",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+      "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==",
+      "dev": true
+    },
+    "node_modules/tsutils": {
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^1.8.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      },
+      "peerDependencies": {
+        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
+      }
+    },
+    "node_modules/tsutils/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
+    },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
+      "dev": true
+    },
+    "node_modules/type-check": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
+      "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
+      "dev": true,
+      "dependencies": {
+        "prelude-ls": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
+      "dev": true
+    },
+    "node_modules/typescript": {
+      "version": "3.7.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.5.tgz",
+      "integrity": "sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
+      "integrity": "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "has-bigints": "^1.0.1",
+        "has-symbols": "^1.0.2",
+        "which-boxed-primitive": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
+      "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
+    "node_modules/uuid": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
+      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
+      "dev": true,
+      "bin": {
+        "uuid": "bin/uuid"
+      }
+    },
+    "node_modules/v8-compile-cache": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz",
+      "integrity": "sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q==",
+      "dev": true
+    },
+    "node_modules/verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
+      "dev": true,
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      }
+    },
+    "node_modules/w3c-hr-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz",
+      "integrity": "sha1-gqwr/2PZUOqeMYmlimViX+3xkEU=",
+      "dev": true,
+      "dependencies": {
+        "browser-process-hrtime": "^0.1.2"
+      }
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-1.1.2.tgz",
+      "integrity": "sha512-p10l/ayESzrBMYWRID6xbuCKh2Fp77+sA0doRuGn4tTIMrrZVeqfpKjXHY+oDh3K4nLdPgNwMTVP6Vp4pvqbNg==",
+      "dev": true,
+      "dependencies": {
+        "domexception": "^1.0.1",
+        "webidl-conversions": "^4.0.2",
+        "xml-name-validator": "^3.0.0"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
+      "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
+      "dev": true
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
+      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
+      "dev": true,
+      "dependencies": {
+        "iconv-lite": "0.4.24"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
+      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==",
+      "dev": true
+    },
+    "node_modules/whatwg-url": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.0.0.tgz",
+      "integrity": "sha512-37GeVSIJ3kn1JgKyjiYNmSLP1yzbpb29jdmwBSgkD9h40/hyrR/OifpVUndji3tmwGgD8qpw7iQu3RSbCrBpsQ==",
+      "dev": true,
+      "dependencies": {
+        "lodash.sortby": "^4.7.0",
+        "tr46": "^1.0.1",
+        "webidl-conversions": "^4.0.2"
+      }
+    },
+    "node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
+      "dependencies": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
+      "dev": true
+    },
+    "node_modules/wide-align": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^1.0.2 || 2"
+      }
+    },
+    "node_modules/wide-align/node_modules/ansi-regex": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
+      "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/wide-align/node_modules/string-width": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+      "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+      "dev": true,
+      "dependencies": {
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/wide-align/node_modules/strip-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+      "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wordwrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=",
+      "dev": true
+    },
+    "node_modules/wrap-ansi": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+      "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.0",
+        "string-width": "^3.0.0",
+        "strip-ansi": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    },
+    "node_modules/ws": {
+      "version": "7.4.6",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
+      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.3.0"
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
+      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
+      "dev": true
+    },
+    "node_modules/xmlchars": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.1.1.tgz",
+      "integrity": "sha512-7hew1RPJ1iIuje/Y01bGD/mXokXxegAgVS+e+E0wSi2ILHQkYAH1+JXARwTjZSM4Z4Z+c73aKspEcqj+zPPL/w==",
+      "dev": true
+    },
+    "node_modules/y18n": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz",
+      "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==",
+      "dev": true
+    },
+    "node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
+    "node_modules/yargs": {
+      "version": "13.3.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+      "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^5.0.0",
+        "find-up": "^3.0.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^3.0.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^13.1.2"
+      }
+    },
+    "node_modules/yargs-unparser": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-1.6.0.tgz",
+      "integrity": "sha512-W9tKgmSn0DpSatfri0nx52Joq5hVXgeLiqR/5G0sZNDoLZFOr/xjBUDcShCOGNsBnEMNo1KAMBkTej1Hm62HTw==",
+      "dev": true,
+      "dependencies": {
+        "flat": "^4.1.0",
+        "lodash": "^4.17.15",
+        "yargs": "^13.3.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/yargs/node_modules/yargs-parser": {
+      "version": "13.1.2",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+      "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+      "dev": true,
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
+    },
+    "node_modules/yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=",
+      "dev": true,
+      "dependencies": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    }
+  },
+  "dependencies": {
+    "@ampproject/remapping": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-0.3.0.tgz",
+      "integrity": "sha512-dqmASpaTCavldZqwdEpokgG4yOXmEiEGPP3ATTsBbdXXSKf6kx8jt2fPcKhodABdZlYe82OehR2oFK1y9gwZxw==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/resolve-uri": "1.0.0",
+        "sourcemap-codec": "1.4.8"
+      }
+    },
+    "@eslint/eslintrc": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.2.tgz",
+      "integrity": "sha512-lTVWHs7O2hjBFZunXTZYnYqtB9GakA1lnxIf+gKq2nY5gxkkNi/lQvveW6t8gFdOHTg6nG50Xs95PrLqVpcaLg==",
+      "dev": true,
+      "requires": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.3.1",
+        "globals": "^13.9.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.0.4",
+        "strip-json-comments": "^3.1.1"
+      },
+      "dependencies": {
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+          "dev": true
+        },
+        "js-yaml": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+          "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+          "dev": true,
+          "requires": {
+            "argparse": "^2.0.1"
+          }
+        }
+      }
+    },
+    "@humanwhocodes/config-array": {
+      "version": "0.9.5",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
+      "integrity": "sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==",
+      "dev": true,
+      "requires": {
+        "@humanwhocodes/object-schema": "^1.2.1",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.4"
+      }
+    },
+    "@humanwhocodes/object-schema": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+      "dev": true
+    },
+    "@jridgewell/resolve-uri": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-1.0.0.tgz",
+      "integrity": "sha512-9oLAnygRMi8Q5QkYEU4XWK04B+nuoXoxjRvRxgjuChkLZFBja0YPSgdZ7dZtwhncLBcQe/I/E+fLuk5qxcYVJA==",
+      "dev": true
+    },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true
+    },
+    "@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      }
+    },
+    "@rollup/plugin-commonjs": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-11.0.0.tgz",
+      "integrity": "sha512-jnm//T5ZWOZ6zmJ61fReSCBOif+Ax8dHVoVggA+d2NA7T4qCWgQ3KYr+zN2faGEYLpe1wa03IzvhR+sqVLxUWg==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.0.0",
+        "estree-walker": "^0.6.1",
+        "is-reference": "^1.1.2",
+        "magic-string": "^0.25.2",
+        "resolve": "^1.11.0"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+          "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+          "dev": true
+        },
+        "is-reference": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
+          "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
+          "dev": true,
+          "requires": {
+            "@types/estree": "*"
+          }
+        }
+      }
+    },
+    "@rollup/plugin-json": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.0.1.tgz",
+      "integrity": "sha512-soxllkhOGgchswBAAaTe7X9G80U2tjjHvXv0sBrriLJcC/89PkP59iTrKPOfbz3SjX088mKDmMhAscuyLz8ZSg==",
+      "dev": true,
+      "requires": {
+        "rollup-pluginutils": "^2.5.0"
+      }
+    },
+    "@rollup/plugin-node-resolve": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-6.0.0.tgz",
+      "integrity": "sha512-GqWz1CfXOsqpeVMcoM315+O7zMxpRsmhWyhJoxLFHVSp9S64/u02i7len/FnbTNbmgYs+sZyilasijH8UiuboQ==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.0.0",
+        "@types/resolve": "0.0.8",
+        "builtin-modules": "^3.1.0",
+        "is-module": "^1.0.0",
+        "resolve": "^1.11.1"
+      }
+    },
+    "@rollup/plugin-replace": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-2.3.0.tgz",
+      "integrity": "sha512-rzWAMqXAHC1w3eKpK6LxRqiF4f3qVFaa1sGii6Bp3rluKcwHNOpPt+hWRCmAH6SDEPtbPiLFf0pfNQyHs6Btlg==",
+      "dev": true,
+      "requires": {
+        "magic-string": "^0.25.2",
+        "rollup-pluginutils": "^2.6.0"
+      }
+    },
+    "@rollup/plugin-sucrase": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-sucrase/-/plugin-sucrase-3.1.0.tgz",
+      "integrity": "sha512-PZ70LDNgIj8rL+3pKwKwTBOQ2c9JofXeLbWz+2V4/nCt4LqwYTNqxJJf1riTJsVARVzJdA0woIzUzjKZvL8TfA==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.0.1",
+        "sucrase": "^3.10.1"
+      }
+    },
+    "@rollup/plugin-typescript": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-2.0.1.tgz",
+      "integrity": "sha512-UA/bN/DlHN19xdOllXmp7G7pM2ac9dQMg0q2T1rg4Bogzb7oHXj2WGafpiNpEm54PivcJdzGRJvRnI6zCISW3w==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.0.0",
+        "resolve": "^1.12.2"
+      }
+    },
+    "@rollup/plugin-virtual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-virtual/-/plugin-virtual-2.0.0.tgz",
+      "integrity": "sha512-yUyQjcflsN1DGcUHj3I0NYL6Y6xrna6qjdaGjM93LjFLq8NFowhR0655ICeV9bNDbk+LI4pz7Q6xqeDdj1RdlA==",
+      "dev": true
+    },
+    "@rollup/pluginutils": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.0.1.tgz",
+      "integrity": "sha512-PmNurkecagFimv7ZdKCVOfQuqKDPkrcpLFxRBcQ00LYr4HAjJwhCFxBiY2Xoletll2htTIiXBg6g0Yg21h2M3w==",
+      "dev": true,
+      "requires": {
+        "estree-walker": "^0.6.1"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+          "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+          "dev": true
+        }
+      }
+    },
+    "@sveltejs/eslint-config": {
+      "version": "git+ssh://git@github.com/sveltejs/eslint-config.git#31fd4faeea88990069502460b023698b1c9c2d13",
+      "dev": true,
+      "from": "@sveltejs/eslint-config@github:sveltejs/eslint-config#v5.8.0"
+    },
+    "@types/estree": {
+      "version": "0.0.50",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.50.tgz",
+      "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
+      "dev": true
+    },
+    "@types/json-schema": {
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
+      "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
+      "dev": true
+    },
+    "@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
+      "dev": true
+    },
+    "@types/mime-types": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.1.tgz",
+      "integrity": "sha512-vXOTGVSLR2jMw440moWTC7H19iUyLtP3Z1YTj7cSsubOICinjMxFeb/V57v9QdyyPGbbWolUFSSmSiRSn94tFw==",
+      "dev": true
+    },
+    "@types/mocha": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-7.0.2.tgz",
+      "integrity": "sha512-ZvO2tAcjmMi8V/5Z3JsyofMe3hasRcaw88cto5etSVMwVQfeivGAlEYmaQgceUSVYFofVjT+ioHsATjdWcFt1w==",
+      "dev": true
+    },
+    "@types/node": {
+      "version": "8.10.53",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-8.10.53.tgz",
+      "integrity": "sha512-aOmXdv1a1/vYUn1OT1CED8ftbkmmYbKhKGSyMDeJiidLvKRKvZUQOdXwG/wcNY7T1Qb0XTlVdiYjIq00U7pLrQ==",
+      "dev": true
+    },
+    "@types/resolve": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
+      "integrity": "sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@typescript-eslint/eslint-plugin": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.22.0.tgz",
+      "integrity": "sha512-YCiy5PUzpAeOPGQ7VSGDEY2NeYUV1B0swde2e0HzokRsHBYjSdF6DZ51OuRZxVPHx0032lXGLvOMls91D8FXlg==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/scope-manager": "5.22.0",
+        "@typescript-eslint/type-utils": "5.22.0",
+        "@typescript-eslint/utils": "5.22.0",
+        "debug": "^4.3.2",
+        "functional-red-black-tree": "^1.0.1",
+        "ignore": "^5.1.8",
+        "regexpp": "^3.2.0",
+        "semver": "^7.3.5",
+        "tsutils": "^3.21.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
+    "@typescript-eslint/parser": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.22.0.tgz",
+      "integrity": "sha512-piwC4krUpRDqPaPbFaycN70KCP87+PC5WZmrWs+DlVOxxmF+zI6b6hETv7Quy4s9wbkV16ikMeZgXsvzwI3icQ==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/scope-manager": "5.22.0",
+        "@typescript-eslint/types": "5.22.0",
+        "@typescript-eslint/typescript-estree": "5.22.0",
+        "debug": "^4.3.2"
+      }
+    },
+    "@typescript-eslint/scope-manager": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.22.0.tgz",
+      "integrity": "sha512-yA9G5NJgV5esANJCO0oF15MkBO20mIskbZ8ijfmlKIvQKg0ynVKfHZ15/nhAJN5m8Jn3X5qkwriQCiUntC9AbA==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "5.22.0",
+        "@typescript-eslint/visitor-keys": "5.22.0"
+      }
+    },
+    "@typescript-eslint/type-utils": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.22.0.tgz",
+      "integrity": "sha512-iqfLZIsZhK2OEJ4cQ01xOq3NaCuG5FQRKyHicA3xhZxMgaxQazLUHbH/B2k9y5i7l3+o+B5ND9Mf1AWETeMISA==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/utils": "5.22.0",
+        "debug": "^4.3.2",
+        "tsutils": "^3.21.0"
+      }
+    },
+    "@typescript-eslint/types": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.22.0.tgz",
+      "integrity": "sha512-T7owcXW4l0v7NTijmjGWwWf/1JqdlWiBzPqzAWhobxft0SiEvMJB56QXmeCQjrPuM8zEfGUKyPQr/L8+cFUBLw==",
+      "dev": true
+    },
+    "@typescript-eslint/typescript-estree": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.22.0.tgz",
+      "integrity": "sha512-EyBEQxvNjg80yinGE2xdhpDYm41so/1kOItl0qrjIiJ1kX/L/L8WWGmJg8ni6eG3DwqmOzDqOhe6763bF92nOw==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "5.22.0",
+        "@typescript-eslint/visitor-keys": "5.22.0",
+        "debug": "^4.3.2",
+        "globby": "^11.0.4",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.5",
+        "tsutils": "^3.21.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.3.7",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+          "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
+    "@typescript-eslint/utils": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.22.0.tgz",
+      "integrity": "sha512-HodsGb037iobrWSUMS7QH6Hl1kppikjA1ELiJlNSTYf/UdMEwzgj0WIp+lBNb6WZ3zTwb0tEz51j0Wee3iJ3wQ==",
+      "dev": true,
+      "requires": {
+        "@types/json-schema": "^7.0.9",
+        "@typescript-eslint/scope-manager": "5.22.0",
+        "@typescript-eslint/types": "5.22.0",
+        "@typescript-eslint/typescript-estree": "5.22.0",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^3.0.0"
+      }
+    },
+    "@typescript-eslint/visitor-keys": {
+      "version": "5.22.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.22.0.tgz",
+      "integrity": "sha512-DbgTqn2Dv5RFWluG88tn0pP6Ex0ROF+dpDO1TNNZdRtLjUr6bdznjA6f/qNqJLjd2PgguAES2Zgxh/JzwzETDg==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "5.22.0",
+        "eslint-visitor-keys": "^3.0.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+          "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+          "dev": true
+        }
+      }
+    },
+    "abab": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.0.tgz",
+      "integrity": "sha512-sY5AXXVZv4Y1VACTtR11UJCPHHudgY5i26Qj5TypE6DKlIApbwb5uqhXcJ5UUGbvZNRh7EeIoW+LrJumBsKp7w==",
+      "dev": true
+    },
+    "acorn": {
+      "version": "8.7.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
+      "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+      "dev": true
+    },
+    "acorn-globals": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-4.3.3.tgz",
+      "integrity": "sha512-vkR40VwS2SYO98AIeFvzWWh+xyc2qi9s7OoXSFEGIP/rOJKzjnhykaZJNnHdoq4BL2gGxI5EZOU16z896EYnOQ==",
+      "dev": true,
+      "requires": {
+        "acorn": "^6.0.1",
+        "acorn-walk": "^6.0.1"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "6.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
+          "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
+          "dev": true
+        }
+      }
+    },
+    "acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "acorn-walk": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.2.0.tgz",
+      "integrity": "sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==",
+      "dev": true
+    },
+    "agadoo": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/agadoo/-/agadoo-1.1.0.tgz",
+      "integrity": "sha512-MiTXQ3As5jARRXa0eZF+ObtzsseQurCXOc1RB19NOGDsimEvoT8DB8iQiC0zAGTfsF/nBhzEle+eV9UpXyWnbw==",
+      "dev": true,
+      "requires": {
+        "rollup": "^1",
+        "rollup-plugin-virtual": "^1.0.1"
+      }
+    },
+    "agent-base": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz",
+      "integrity": "sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==",
+      "dev": true
+    },
+    "ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "requires": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      }
+    },
+    "ansi-regex": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
+      "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
+    "any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha1-q8av7tzqUugJzcA3au0845Y10X8=",
+      "dev": true
+    },
+    "anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "requires": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "array-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
+      "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=",
+      "dev": true
+    },
+    "array-includes": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz",
+      "integrity": "sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5",
+        "get-intrinsic": "^1.1.1",
+        "is-string": "^1.0.7"
+      }
+    },
+    "array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "dev": true
+    },
+    "array.prototype.flat": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz",
+      "integrity": "sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
+      }
+    },
+    "asn1": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
+      "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
+      "dev": true,
+      "requires": {
+        "safer-buffer": "~2.1.0"
+      }
+    },
+    "assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+      "dev": true
+    },
+    "async-limiter": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
+      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
+      "dev": true
+    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
+      "dev": true
+    },
+    "aws-sign2": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
+      "dev": true
+    },
+    "aws4": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
+      "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==",
+      "dev": true
+    },
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
+    },
+    "bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
+      "dev": true,
+      "requires": {
+        "tweetnacl": "^0.14.3"
+      }
+    },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "browser-process-hrtime": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-0.1.3.tgz",
+      "integrity": "sha512-bRFnI4NnjO6cnyLmOV/7PVoDEMJChlcfN0z4s1YMBY989/SvlfMI1lgCnkFUs53e9gQF+w7qu7XdllSTiSl8Aw==",
+      "dev": true
+    },
+    "browser-stdout": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz",
+      "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==",
+      "dev": true
+    },
+    "buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
+      "dev": true
+    },
+    "buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
+      "dev": true
+    },
+    "builtin-modules": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz",
+      "integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==",
+      "dev": true
+    },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
+    "callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true
+    },
+    "camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "dev": true
+    },
+    "caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
+      "dev": true
+    },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "chokidar": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.3.0.tgz",
+      "integrity": "sha512-dGmKLDdT3Gdl7fBUe8XK+gAtGmzy5Fn0XkkWQuYxGIgWVPPse2CxFA5mtrlD0TOHaHjEUqkWNyP1XdHoJES/4A==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.1",
+        "braces": "~3.0.2",
+        "fsevents": "~2.1.1",
+        "glob-parent": "~5.1.0",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.2.0"
+      }
+    },
+    "cliui": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+      "dev": true,
+      "requires": {
+        "string-width": "^3.1.0",
+        "strip-ansi": "^5.2.0",
+        "wrap-ansi": "^5.1.0"
+      }
+    },
+    "code-red": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/code-red/-/code-red-0.2.5.tgz",
+      "integrity": "sha512-x+uQyJLNS1v0+74eXqM7FMPoM1fU/fN3tdexGWtCuVjCfxADt1TuuEGIGlFyCC2vhgINDctDb/rgSn8/ZDfJsQ==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "^0.0.50",
+        "acorn": "^8.0.5",
+        "estree-walker": "^3.0.0",
+        "is-reference": "^3.0.0",
+        "periscopic": "^3.0.4",
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
+    "commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "dev": true,
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+      "dev": true
+    },
+    "css-tree": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.2.tgz",
+      "integrity": "sha512-wCoWush5Aeo48GLhfHPbmvZs59Z+M7k5+B1xDnXbdWNcEF423DoFdqSWE0PM5aNk5nI5cp1q7ms36zGApY/sKQ==",
+      "dev": true,
+      "requires": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "cssom": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
+      "integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==",
+      "dev": true
+    },
+    "cssstyle": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
+      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+      "dev": true,
+      "requires": {
+        "cssom": "~0.3.6"
+      },
+      "dependencies": {
+        "cssom": {
+          "version": "0.3.8",
+          "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
+          "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
+          "dev": true
+        }
+      }
+    },
+    "dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "^1.0.0"
+      }
+    },
+    "data-urls": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-1.1.0.tgz",
+      "integrity": "sha512-YTWYI9se1P55u58gL5GkQHW4P6VJBJ5iBT+B5a7i2Tjadhv52paJG0qHX4A0OR6/t52odI64KP2YvFpkDOi3eQ==",
+      "dev": true,
+      "requires": {
+        "abab": "^2.0.0",
+        "whatwg-mimetype": "^2.2.0",
+        "whatwg-url": "^7.0.0"
+      }
+    },
+    "debug": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+      "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+      "dev": true,
+      "requires": {
+        "ms": "2.1.2"
+      }
+    },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "dev": true
+    },
+    "deep-is": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
+      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
+      "dev": true
+    },
+    "define-properties": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
+      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
+      "dev": true,
+      "requires": {
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      }
+    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
+      "dev": true
+    },
+    "diff": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
+      "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
+      "dev": true
+    },
+    "dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "requires": {
+        "path-type": "^4.0.0"
+      }
+    },
+    "doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "requires": {
+        "esutils": "^2.0.2"
+      }
+    },
+    "domexception": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz",
+      "integrity": "sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==",
+      "dev": true,
+      "requires": {
+        "webidl-conversions": "^4.0.2"
+      }
+    },
+    "ecc-jsbn": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
+      "dev": true,
+      "requires": {
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
+    "emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
+      "dev": true
+    },
+    "es-abstract": {
+      "version": "1.19.5",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.5.tgz",
+      "integrity": "sha512-Aa2G2+Rd3b6kxEUKTF4TaW67czBLyAv3z7VOhYRU50YBx+bbsYZ9xQP4lMNazePuFlybXI0V4MruPos7qUo5fA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "es-to-primitive": "^1.2.1",
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.1.1",
+        "get-symbol-description": "^1.0.0",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.3",
+        "is-callable": "^1.2.4",
+        "is-negative-zero": "^2.0.2",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "is-string": "^1.0.7",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.12.0",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.2",
+        "string.prototype.trimend": "^1.0.4",
+        "string.prototype.trimstart": "^1.0.4",
+        "unbox-primitive": "^1.0.1"
+      },
+      "dependencies": {
+        "object.assign": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+          "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+          "dev": true,
+          "requires": {
+            "call-bind": "^1.0.0",
+            "define-properties": "^1.1.3",
+            "has-symbols": "^1.0.1",
+            "object-keys": "^1.1.1"
+          }
+        }
+      }
+    },
+    "es-shim-unscopables": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
+      "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
+      "requires": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      }
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
+    },
+    "escodegen": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.11.1.tgz",
+      "integrity": "sha512-JwiqFD9KdGVVpeuRa68yU3zZnBEOcPs0nKW7wZzXky8Z7tffdYUHbe11bPCV5jYlK6DVdKLWLm0f5I/QlL0Kmw==",
+      "dev": true,
+      "requires": {
+        "esprima": "^3.1.3",
+        "estraverse": "^4.2.0",
+        "esutils": "^2.0.2",
+        "optionator": "^0.8.1",
+        "source-map": "~0.6.1"
+      },
+      "dependencies": {
+        "esprima": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
+          "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "eslint": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.14.0.tgz",
+      "integrity": "sha512-3/CE4aJX7LNEiE3i6FeodHmI/38GZtWCsAtsymScmzYapx8q1nVVb+eLcLSzATmCPXw5pT4TqVs1E0OmxAd9tw==",
+      "dev": true,
+      "requires": {
+        "@eslint/eslintrc": "^1.2.2",
+        "@humanwhocodes/config-array": "^0.9.2",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.1.1",
+        "eslint-utils": "^3.0.0",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.3.1",
+        "esquery": "^1.4.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "functional-red-black-tree": "^1.0.1",
+        "glob-parent": "^6.0.1",
+        "globals": "^13.6.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.0.4",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.1",
+        "regexpp": "^3.2.0",
+        "strip-ansi": "^6.0.1",
+        "strip-json-comments": "^3.1.0",
+        "text-table": "^0.2.0",
+        "v8-compile-cache": "^2.0.3"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "cross-spawn": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.1.0",
+            "shebang-command": "^2.0.0",
+            "which": "^2.0.1"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+          "dev": true
+        },
+        "eslint-scope": {
+          "version": "7.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
+          "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^5.2.0"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+          "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+          "dev": true
+        },
+        "estraverse": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+          "dev": true
+        },
+        "glob-parent": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+          "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.3"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "js-yaml": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+          "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+          "dev": true,
+          "requires": {
+            "argparse": "^2.0.1"
+          }
+        },
+        "levn": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+          "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+          "dev": true,
+          "requires": {
+            "prelude-ls": "^1.2.1",
+            "type-check": "~0.4.0"
+          }
+        },
+        "optionator": {
+          "version": "0.9.1",
+          "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+          "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+          "dev": true,
+          "requires": {
+            "deep-is": "^0.1.3",
+            "fast-levenshtein": "^2.0.6",
+            "levn": "^0.4.1",
+            "prelude-ls": "^1.2.1",
+            "type-check": "^0.4.0",
+            "word-wrap": "^1.2.3"
+          }
+        },
+        "path-key": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+          "dev": true
+        },
+        "prelude-ls": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+          "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+          "dev": true
+        },
+        "shebang-command": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+          "dev": true,
+          "requires": {
+            "shebang-regex": "^3.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "type-check": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+          "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+          "dev": true,
+          "requires": {
+            "prelude-ls": "^1.2.1"
+          }
+        },
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
+    "eslint-import-resolver-node": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz",
+      "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==",
+      "dev": true,
+      "requires": {
+        "debug": "^3.2.7",
+        "resolve": "^1.20.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
+    "eslint-module-utils": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz",
+      "integrity": "sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==",
+      "dev": true,
+      "requires": {
+        "debug": "^3.2.7",
+        "find-up": "^2.1.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "find-up": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+          "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
+          "dev": true,
+          "requires": {
+            "locate-path": "^2.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+          "dev": true,
+          "requires": {
+            "p-locate": "^2.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+          "dev": true,
+          "requires": {
+            "p-try": "^1.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+          "dev": true,
+          "requires": {
+            "p-limit": "^1.1.0"
+          }
+        },
+        "p-try": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
+          "dev": true
+        }
+      }
+    },
+    "eslint-plugin-import": {
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz",
+      "integrity": "sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==",
+      "dev": true,
+      "requires": {
+        "array-includes": "^3.1.4",
+        "array.prototype.flat": "^1.2.5",
+        "debug": "^2.6.9",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-module-utils": "^2.7.3",
+        "has": "^1.0.3",
+        "is-core-module": "^2.8.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.values": "^1.1.5",
+        "resolve": "^1.22.0",
+        "tsconfig-paths": "^3.14.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "doctrine": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2"
+          }
+        },
+        "minimatch": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+          "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "eslint-plugin-svelte3": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-svelte3/-/eslint-plugin-svelte3-4.0.0.tgz",
+      "integrity": "sha512-OIx9lgaNzD02+MDFNLw0GEUbuovNcglg+wnd/UY0fbZmlQSz7GlQiQ1f+yX0XvC07XPcDOnFcichqI3xCwp71g==",
+      "dev": true,
+      "requires": {}
+    },
+    "eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "requires": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      }
+    },
+    "eslint-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+      "dev": true,
+      "requires": {
+        "eslint-visitor-keys": "^2.0.0"
+      }
+    },
+    "eslint-visitor-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
+      "dev": true
+    },
+    "espree": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.1.tgz",
+      "integrity": "sha512-bvdyLmJMfwkV3NCRl5ZhJf22zBFo1y8bYh3VYb+bfzqNB4Je68P2sSuXyuFquzWLebHpNd2/d5uv7yoP9ISnGQ==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.7.0",
+        "acorn-jsx": "^5.3.1",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+          "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+          "dev": true
+        }
+      }
+    },
+    "esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true
+    },
+    "esquery": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
+      "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.1.0"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+          "dev": true
+        }
+      }
+    },
+    "esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "requires": {
+        "estraverse": "^5.2.0"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+          "dev": true
+        }
+      }
+    },
+    "estraverse": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.2.0.tgz",
+      "integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=",
+      "dev": true
+    },
+    "estree-walker": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.0.tgz",
+      "integrity": "sha512-s6ceX0NFiU/vKPiKvFdR83U1Zffu7upwZsGwpoqfg5rbbq1l50WQ5hCeIvM6E6oD4shUHCYMsiFPns4Jk0YfMQ==",
+      "dev": true
+    },
+    "esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true
+    },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true
+    },
+    "extract-zip": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.7.0.tgz",
+      "integrity": "sha512-xoh5G1W/PB0/27lXgMQyIhP5DSY/LhoCsOyZgb+6iMmRtCwVBo55uKaMoEYrDCKQhWvqEip5ZPKAc6eFNyf/MA==",
+      "dev": true,
+      "requires": {
+        "concat-stream": "^1.6.2",
+        "debug": "^2.6.9",
+        "mkdirp": "^0.5.4",
+        "yauzl": "^2.10.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
+      "dev": true
+    },
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "fast-glob": {
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
+      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      }
+    },
+    "fast-json-stable-stringify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
+      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
+      "dev": true
+    },
+    "fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
+      "dev": true
+    },
+    "fastq": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
+      "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
+      "dev": true,
+      "requires": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
+      "dev": true,
+      "requires": {
+        "pend": "~1.2.0"
+      }
+    },
+    "file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "requires": {
+        "flat-cache": "^3.0.4"
+      }
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "find-up": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+      "dev": true,
+      "requires": {
+        "locate-path": "^3.0.0"
+      }
+    },
+    "flat": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-4.1.1.tgz",
+      "integrity": "sha512-FmTtBsHskrU6FJ2VxCnsDb84wu9zhmO3cUX2kGFb5tuwhfXxGciiT0oRY+cck35QmG+NmGh5eLz6lLCpWTqwpA==",
+      "dev": true,
+      "requires": {
+        "is-buffer": "~2.0.3"
+      }
+    },
+    "flat-cache": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "dev": true,
+      "requires": {
+        "flatted": "^3.1.0",
+        "rimraf": "^3.0.2"
+      },
+      "dependencies": {
+        "rimraf": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
+    "flatted": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.2.tgz",
+      "integrity": "sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==",
+      "dev": true
+    },
+    "forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
+      "dev": true
+    },
+    "form-data": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+      "dev": true,
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.6",
+        "mime-types": "^2.1.12"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "fsevents": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
+      "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
+      "dev": true,
+      "optional": true
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
+    "functional-red-black-tree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
+      "dev": true
+    },
+    "get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true
+    },
+    "get-intrinsic": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      }
+    },
+    "get-symbol-description": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
+      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.1"
+      }
+    },
+    "getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "^1.0.0"
+      }
+    },
+    "glob": {
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
+    "globals": {
+      "version": "13.13.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.13.0.tgz",
+      "integrity": "sha512-EQ7Q18AJlPwp3vUDL4mKA0KXrXyNIQyWon6T6XQiBQF0XHvRsiCSrWmmeATpUzdJN2HhWZU6Pdl0a9zdep5p6A==",
+      "dev": true,
+      "requires": {
+        "type-fest": "^0.20.2"
+      }
+    },
+    "globalyzer": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.4.tgz",
+      "integrity": "sha512-LeguVWaxgHN0MNbWC6YljNMzHkrCny9fzjmEUdnF1kQ7wATFD1RHFRqA1qxaX2tgxGENlcxjOflopBwj3YZiXA==",
+      "dev": true
+    },
+    "globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dev": true,
+      "requires": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      }
+    },
+    "globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
+      "dev": true
+    },
+    "growl": {
+      "version": "1.10.5",
+      "resolved": "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz",
+      "integrity": "sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==",
+      "dev": true
+    },
+    "har-schema": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
+      "dev": true
+    },
+    "har-validator": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
+      "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
+      "dev": true,
+      "requires": {
+        "ajv": "^6.5.5",
+        "har-schema": "^2.0.0"
+      }
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "has-bigints": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz",
+      "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==",
+      "dev": true
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true
+    },
+    "has-property-descriptors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.1.1"
+      }
+    },
+    "has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true
+    },
+    "has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
+    "he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true
+    },
+    "html-encoding-sniffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz",
+      "integrity": "sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==",
+      "dev": true,
+      "requires": {
+        "whatwg-encoding": "^1.0.1"
+      }
+    },
+    "http-signature": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+      "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "^1.0.0",
+        "jsprim": "^1.2.2",
+        "sshpk": "^1.7.0"
+      }
+    },
+    "https-proxy-agent": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz",
+      "integrity": "sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==",
+      "dev": true,
+      "requires": {
+        "agent-base": "5",
+        "debug": "4"
+      }
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "ignore": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
+      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "dev": true
+    },
+    "import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "requires": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      }
+    },
+    "imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
+      "dev": true
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "internal-slot": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
+      "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.1.0",
+        "has": "^1.0.3",
+        "side-channel": "^1.0.4"
+      }
+    },
+    "ip-regex": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-2.1.0.tgz",
+      "integrity": "sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=",
+      "dev": true
+    },
+    "is-bigint": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
+      "requires": {
+        "has-bigints": "^1.0.1"
+      }
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-boolean-object": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
+      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-buffer": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+      "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
+      "dev": true
+    },
+    "is-callable": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
+      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
+      "dev": true
+    },
+    "is-core-module": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
+      "integrity": "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "is-date-object": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz",
+      "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
+      "dev": true
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
+    },
+    "is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+      "dev": true
+    },
+    "is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
+      "dev": true
+    },
+    "is-negative-zero": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
+      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "dev": true
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
+    },
+    "is-number-object": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.6.tgz",
+      "integrity": "sha512-bEVOqiRcvo3zO1+G2lVMy+gkkEm9Yh7cDMRusKKu5ZJKPUYSJwICTKZrNKHA2EbSP0Tu0+6B/emsYNHZyn6K8g==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-reference": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.0.tgz",
+      "integrity": "sha512-Eo1W3wUoHWoCoVM4GVl/a+K0IgiqE5aIo4kJABFyMum1ZORlPkC+UC357sSQUL5w5QCE5kCC9upl75b7+7CY/Q==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "*"
+      }
+    },
+    "is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-shared-array-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2"
+      }
+    },
+    "is-string": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-symbol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
+      "dev": true
+    },
+    "is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2"
+      }
+    },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+      "dev": true
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "dev": true
+    },
+    "isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
+      "dev": true
+    },
+    "js-yaml": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
+      "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+      "dev": true,
+      "requires": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      }
+    },
+    "jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
+      "dev": true
+    },
+    "jsdom": {
+      "version": "15.2.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-15.2.1.tgz",
+      "integrity": "sha512-fAl1W0/7T2G5vURSyxBzrJ1LSdQn6Tr5UX/xD4PXDx/PDgwygedfW6El/KIj3xJ7FU61TTYnc/l/B7P49Eqt6g==",
+      "dev": true,
+      "requires": {
+        "abab": "^2.0.0",
+        "acorn": "^7.1.0",
+        "acorn-globals": "^4.3.2",
+        "array-equal": "^1.0.0",
+        "cssom": "^0.4.1",
+        "cssstyle": "^2.0.0",
+        "data-urls": "^1.1.0",
+        "domexception": "^1.0.1",
+        "escodegen": "^1.11.1",
+        "html-encoding-sniffer": "^1.0.2",
+        "nwsapi": "^2.2.0",
+        "parse5": "5.1.0",
+        "pn": "^1.1.0",
+        "request": "^2.88.0",
+        "request-promise-native": "^1.0.7",
+        "saxes": "^3.1.9",
+        "symbol-tree": "^3.2.2",
+        "tough-cookie": "^3.0.1",
+        "w3c-hr-time": "^1.0.1",
+        "w3c-xmlserializer": "^1.1.2",
+        "webidl-conversions": "^4.0.2",
+        "whatwg-encoding": "^1.0.5",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^7.0.0",
+        "ws": "^7.0.0",
+        "xml-name-validator": "^3.0.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+          "dev": true
+        }
+      }
+    },
+    "json-schema": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+      "dev": true
+    },
+    "json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
+      "dev": true
+    },
+    "json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
+      "dev": true
+    },
+    "json5": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.0"
+      }
+    },
+    "jsprim": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
+      "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
+      "dev": true,
+      "requires": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.4.0",
+        "verror": "1.10.0"
+      }
+    },
+    "kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "dev": true
+    },
+    "levn": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
+      "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2"
+      }
+    },
+    "lines-and-columns": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
+      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
+      "dev": true
+    },
+    "locate-character": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-2.0.5.tgz",
+      "integrity": "sha512-n2GmejDXtOPBAZdIiEFy5dJ5N38xBCXLNOtw2WpB9kGh6pnrEuKlwYI+Tkpofc4wDtVXHtoAOJaMRlYG/oYaxg==",
+      "dev": true
+    },
+    "locate-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "dev": true,
+      "requires": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      }
+    },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "lodash.sortby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
+      "dev": true
+    },
+    "log-symbols": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-3.0.0.tgz",
+      "integrity": "sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.2"
+      }
+    },
+    "lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "requires": {
+        "yallist": "^4.0.0"
+      }
+    },
+    "magic-string": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.3.tgz",
+      "integrity": "sha512-6QK0OpF/phMz0Q2AxILkX2mFhi7m+WMwTRg0LQKq/WBB0cDP4rYH3Wp4/d3OTXlrPLVJT/RFqj8tFeAR4nk8AA==",
+      "dev": true,
+      "requires": {
+        "sourcemap-codec": "^1.4.4"
+      }
+    },
+    "mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "dev": true
+    },
+    "merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true
+    },
+    "micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
+      "requires": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      }
+    },
+    "mime": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
+      "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==",
+      "dev": true
+    },
+    "mime-db": {
+      "version": "1.50.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.50.0.tgz",
+      "integrity": "sha512-9tMZCDlYHqeERXEHO9f/hKfNXhre5dK2eE/krIvUjZbS2KPcqGDfNShIWS1uW9XOTKQKqK6qbeOci18rbfW77A==",
+      "dev": true
+    },
+    "mime-types": {
+      "version": "2.1.33",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.33.tgz",
+      "integrity": "sha512-plLElXp7pRDd0bNZHw+nMd52vRYjLwQjygaNg7ddJ2uJtTlmnTCjWuPKxVu6//AdaRuME84SvLW91sIkBqGT0g==",
+      "dev": true,
+      "requires": {
+        "mime-db": "1.50.0"
+      }
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
+      "dev": true
+    },
+    "mkdirp": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
+    "mocha": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/mocha/-/mocha-7.2.0.tgz",
+      "integrity": "sha512-O9CIypScywTVpNaRrCAgoUnJgozpIofjKUYmJhiCIJMiuYnLI6otcb1/kpW9/n/tJODHGZ7i8aLQoDVsMtOKQQ==",
+      "dev": true,
+      "requires": {
+        "ansi-colors": "3.2.3",
+        "browser-stdout": "1.3.1",
+        "chokidar": "3.3.0",
+        "debug": "3.2.6",
+        "diff": "3.5.0",
+        "escape-string-regexp": "1.0.5",
+        "find-up": "3.0.0",
+        "glob": "7.1.3",
+        "growl": "1.10.5",
+        "he": "1.2.0",
+        "js-yaml": "3.13.1",
+        "log-symbols": "3.0.0",
+        "minimatch": "3.0.4",
+        "mkdirp": "0.5.5",
+        "ms": "2.1.1",
+        "node-environment-flags": "1.0.6",
+        "object.assign": "4.1.0",
+        "strip-json-comments": "2.0.1",
+        "supports-color": "6.0.0",
+        "which": "1.3.1",
+        "wide-align": "1.1.3",
+        "yargs": "13.3.2",
+        "yargs-parser": "13.1.2",
+        "yargs-unparser": "1.6.0"
+      },
+      "dependencies": {
+        "ansi-colors": {
+          "version": "3.2.3",
+          "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.3.tgz",
+          "integrity": "sha512-LEHHyuhlPY3TmuUYMh2oz89lTShfvgbmzaBcxve9t/9Wuy7Dwf4yoAKcND7KFT1HAQfqZ12qtc+DUrBMeKF9nw==",
+          "dev": true
+        },
+        "debug": {
+          "version": "3.2.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "glob": {
+          "version": "7.1.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz",
+          "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
+          "dev": true
+        },
+        "strip-json-comments": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.0.0.tgz",
+          "integrity": "sha512-on9Kwidc1IUQo+bQdhi8+Tijpo0e1SS6RoGo2guUwn5vdaxw8RXOF9Vb2ws+ihWOmh4JnCJOvaziZWP1VABaLg==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        },
+        "yargs-parser": {
+          "version": "13.1.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
+    "ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "requires": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
+      "dev": true
+    },
+    "node-environment-flags": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/node-environment-flags/-/node-environment-flags-1.0.6.tgz",
+      "integrity": "sha512-5Evy2epuL+6TM0lCQGpFIj6KwiEsGh1SrHUhTbNX+sLbBtjidPZFAnVK9y5yU1+h//RitLbRHTIMyxQPtxMdHw==",
+      "dev": true,
+      "requires": {
+        "object.getownpropertydescriptors": "^2.0.3",
+        "semver": "^5.7.0"
+      }
+    },
+    "node-modules-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz",
+      "integrity": "sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=",
+      "dev": true
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
+    },
+    "nwsapi": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
+      "integrity": "sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==",
+      "dev": true
+    },
+    "oauth-sign": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+      "dev": true
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
+    },
+    "object-inspect": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz",
+      "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==",
+      "dev": true
+    },
+    "object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true
+    },
+    "object.assign": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
+      "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.2",
+        "function-bind": "^1.1.1",
+        "has-symbols": "^1.0.0",
+        "object-keys": "^1.0.11"
+      }
+    },
+    "object.getownpropertydescriptors": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.2.tgz",
+      "integrity": "sha512-WtxeKSzfBjlzL+F9b7M7hewDzMwy+C8NRssHd1YrNlzHzIDrXcXiNOMrezdAEM4UXixgV+vvnyBeN7Rygl2ttQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.18.0-next.2"
+      }
+    },
+    "object.values": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz",
+      "integrity": "sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      }
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "optionator": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
+      "integrity": "sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=",
+      "dev": true,
+      "requires": {
+        "deep-is": "~0.1.3",
+        "fast-levenshtein": "~2.0.4",
+        "levn": "~0.3.0",
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2",
+        "wordwrap": "~1.0.0"
+      }
+    },
+    "p-limit": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.0.tgz",
+      "integrity": "sha512-pZbTJpoUsCzV48Mc9Nh51VbwO0X9cuPFE8gYwx9BTCt9SF8/b7Zljd2fVgOxhIF/HDTKgpVzs+GPhyKfjLLFRQ==",
+      "dev": true,
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+      "dev": true,
+      "requires": {
+        "p-limit": "^2.0.0"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true
+    },
+    "parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "requires": {
+        "callsites": "^3.0.0"
+      }
+    },
+    "parse5": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
+      "integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==",
+      "dev": true
+    },
+    "path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+      "dev": true
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true
+    },
+    "pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
+      "dev": true
+    },
+    "performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
+      "dev": true
+    },
+    "periscopic": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.0.4.tgz",
+      "integrity": "sha512-SFx68DxCv0Iyo6APZuw/AKewkkThGwssmU0QWtTlvov3VAtPX+QJ4CadwSaz8nrT5jPIuxdvJWB4PnD2KNDxQg==",
+      "dev": true,
+      "requires": {
+        "estree-walker": "^3.0.0",
+        "is-reference": "^3.0.0"
+      }
+    },
+    "picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true
+    },
+    "pirates": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz",
+      "integrity": "sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==",
+      "dev": true,
+      "requires": {
+        "node-modules-regexp": "^1.0.0"
+      }
+    },
+    "pn": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz",
+      "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
+      "dev": true
+    },
+    "prelude-ls": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
+      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
+      "dev": true
+    },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "dev": true
+    },
+    "progress": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
+      "dev": true
+    },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "dev": true
+    },
+    "psl": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.3.0.tgz",
+      "integrity": "sha512-avHdspHO+9rQTLbv1RO+MPYeP/SzsCoxofjVnHanETfQhTJrmB0HlDoW+EiN/R+C0BZ+gERab9NY0lPN2TxNag==",
+      "dev": true
+    },
+    "punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "dev": true
+    },
+    "puppeteer": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-2.1.1.tgz",
+      "integrity": "sha512-LWzaDVQkk1EPiuYeTOj+CZRIjda4k2s5w4MK4xoH2+kgWV/SDlkYHmxatDdtYrciHUKSXTsGgPgPP8ILVdBsxg==",
+      "dev": true,
+      "requires": {
+        "@types/mime-types": "^2.1.0",
+        "debug": "^4.1.0",
+        "extract-zip": "^1.6.6",
+        "https-proxy-agent": "^4.0.0",
+        "mime": "^2.0.3",
+        "mime-types": "^2.1.25",
+        "progress": "^2.0.1",
+        "proxy-from-env": "^1.0.0",
+        "rimraf": "^2.6.1",
+        "ws": "^6.1.0"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "6.2.2",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
+          "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
+          "dev": true,
+          "requires": {
+            "async-limiter": "~1.0.0"
+          }
+        }
+      }
+    },
+    "qs": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+      "dev": true
+    },
+    "queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true
+    },
+    "readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "dev": true,
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "readdirp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.2.0.tgz",
+      "integrity": "sha512-crk4Qu3pmXwgxdSgGhgA/eXiJAPQiX4GMOZZMXnqKxHX7TaoL+3gQVo/WeuAiogr07DpnfjIMpXXa+PAIvwPGQ==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.0.4"
+      }
+    },
+    "regexpp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
+      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
+      "dev": true
+    },
+    "request": {
+      "version": "2.88.0",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
+      "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
+      "dev": true,
+      "requires": {
+        "aws-sign2": "~0.7.0",
+        "aws4": "^1.8.0",
+        "caseless": "~0.12.0",
+        "combined-stream": "~1.0.6",
+        "extend": "~3.0.2",
+        "forever-agent": "~0.6.1",
+        "form-data": "~2.3.2",
+        "har-validator": "~5.1.0",
+        "http-signature": "~1.2.0",
+        "is-typedarray": "~1.0.0",
+        "isstream": "~0.1.2",
+        "json-stringify-safe": "~5.0.1",
+        "mime-types": "~2.1.19",
+        "oauth-sign": "~0.9.0",
+        "performance-now": "^2.1.0",
+        "qs": "~6.5.2",
+        "safe-buffer": "^5.1.2",
+        "tough-cookie": "~2.4.3",
+        "tunnel-agent": "^0.6.0",
+        "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
+          "dev": true
+        },
+        "tough-cookie": {
+          "version": "2.4.3",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
+          "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==",
+          "dev": true,
+          "requires": {
+            "psl": "^1.1.24",
+            "punycode": "^1.4.1"
+          }
+        }
+      }
+    },
+    "request-promise-core": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.2.tgz",
+      "integrity": "sha512-UHYyq1MO8GsefGEt7EprS8UrXsm1TxEvFUX1IMTuSLU2Rh7fTIdFtl8xD7JiEYiWU2dl+NYAjCTksTehQUxPag==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.11"
+      }
+    },
+    "request-promise-native": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/request-promise-native/-/request-promise-native-1.0.7.tgz",
+      "integrity": "sha512-rIMnbBdgNViL37nZ1b3L/VfPOpSi0TqVDQPAvO6U14lMzOLrt5nilxCQqtDKhZeDiW0/hkCXGoQjhgJd/tCh6w==",
+      "dev": true,
+      "requires": {
+        "request-promise-core": "1.1.2",
+        "stealthy-require": "^1.1.1",
+        "tough-cookie": "^2.3.3"
+      },
+      "dependencies": {
+        "tough-cookie": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+          "dev": true,
+          "requires": {
+            "psl": "^1.1.28",
+            "punycode": "^2.1.1"
+          }
+        }
+      }
+    },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
+      "dev": true
+    },
+    "require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "dev": true
+    },
+    "resolve": {
+      "version": "1.22.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
+      "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
+      "dev": true,
+      "requires": {
+        "is-core-module": "^2.8.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      }
+    },
+    "resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true
+    },
+    "reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true
+    },
+    "rimraf": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+      "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
+    "rollup": {
+      "version": "1.27.14",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.27.14.tgz",
+      "integrity": "sha512-DuDjEyn8Y79ALYXMt+nH/EI58L5pEw5HU9K38xXdRnxQhvzUTI/nxAawhkAHUQeudANQ//8iyrhVRHJBuR6DSQ==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "*",
+        "@types/node": "*",
+        "acorn": "^7.1.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+          "dev": true
+        }
+      }
+    },
+    "rollup-plugin-virtual": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-virtual/-/rollup-plugin-virtual-1.0.1.tgz",
+      "integrity": "sha512-HCTBpV8MwP5lNzZrHD2moVxHIToHU1EkzkKGVj6Z0DcgUfxrxrZmeQirQeLz2yhnkJqRjwiVywK9CS8jDYakrw==",
+      "dev": true
+    },
+    "rollup-pluginutils": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+      "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+      "dev": true,
+      "requires": {
+        "estree-walker": "^0.6.1"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+          "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+          "dev": true
+        }
+      }
+    },
+    "run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "requires": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
+    },
+    "saxes": {
+      "version": "3.1.11",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-3.1.11.tgz",
+      "integrity": "sha512-Ydydq3zC+WYDJK1+gRxRapLIED9PWeSuuS41wqyoRmzvhhh9nc+QQrVMKJYzJFULazeGhzSV0QleN2wD3boh2g==",
+      "dev": true,
+      "requires": {
+        "xmlchars": "^2.1.1"
+      }
+    },
+    "semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true
+    },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
+      "dev": true
+    },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
+    "slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true
+    },
+    "source-map": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "dev": true
+    },
+    "source-map-support": {
+      "version": "0.5.13",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
+      "integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==",
+      "dev": true,
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true
+    },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
+    },
+    "sshpk": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
+      "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",
+      "dev": true,
+      "requires": {
+        "asn1": "~0.2.3",
+        "assert-plus": "^1.0.0",
+        "bcrypt-pbkdf": "^1.0.0",
+        "dashdash": "^1.12.0",
+        "ecc-jsbn": "~0.1.1",
+        "getpass": "^0.1.1",
+        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.0.2",
+        "tweetnacl": "~0.14.0"
+      }
+    },
+    "stealthy-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
+      "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=",
+      "dev": true
+    },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "string-width": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+      "dev": true,
+      "requires": {
+        "emoji-regex": "^7.0.1",
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^5.1.0"
+      }
+    },
+    "string.prototype.trimend": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
+      "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      }
+    },
+    "string.prototype.trimstart": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
+      "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3"
+      }
+    },
+    "strip-ansi": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^4.1.0"
+      }
+    },
+    "strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+      "dev": true
+    },
+    "strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true
+    },
+    "sucrase": {
+      "version": "3.16.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.16.0.tgz",
+      "integrity": "sha512-ovVuswxV5TayCPXfTk8bgBgk6uNRvsinIkEpq0J6zS1xXCx5N/LLGcbsKdRhqn/ToZylMX6+yXaR1LSn1I42Pg==",
+      "dev": true,
+      "requires": {
+        "commander": "^4.0.0",
+        "glob": "7.1.6",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.1.6",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+          "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        }
+      }
+    },
+    "supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true
+    },
+    "svelte": {
+      "version": "3.43.0",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.43.0.tgz",
+      "integrity": "sha512-T2pMPHrxXp+SM8pLLUXLQgkdo+JhTls7aqj9cD7z8wT2ccP+OrCAmtQS7h6pvMjitaZhXFNnCK582NxDpy8HSw==",
+      "dev": true,
+      "peer": true
+    },
+    "symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true
+    },
+    "text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
+      "dev": true
+    },
+    "thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "requires": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha1-GhkY1ALY/D+Y+/I02wvMjMEOlyY=",
+      "dev": true,
+      "requires": {
+        "thenify": ">= 3.1.0 < 4"
+      }
+    },
+    "tiny-glob": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.6.tgz",
+      "integrity": "sha512-A7ewMqPu1B5PWwC3m7KVgAu96Ch5LA0w4SnEN/LbDREj/gAD0nPWboRbn8YoP9ISZXqeNAlMvKSKoEuhcfK3Pw==",
+      "dev": true,
+      "requires": {
+        "globalyzer": "^0.1.0",
+        "globrex": "^0.1.1"
+      }
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
+    "tough-cookie": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-3.0.1.tgz",
+      "integrity": "sha512-yQyJ0u4pZsv9D4clxO69OEjLWYw+jbgspjTue4lTQZLfV0c5l1VmK2y1JK8E9ahdpltPOaAThPcp5nKPUgSnsg==",
+      "dev": true,
+      "requires": {
+        "ip-regex": "^2.1.0",
+        "psl": "^1.1.28",
+        "punycode": "^2.1.1"
+      }
+    },
+    "tr46": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
+      "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=",
+      "dev": true,
+      "requires": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
+    },
+    "tsconfig-paths": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
+      "integrity": "sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==",
+      "dev": true,
+      "requires": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.1",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
+    "tslib": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+      "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==",
+      "dev": true
+    },
+    "tsutils": {
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
+      "dev": true,
+      "requires": {
+        "tslib": "^1.8.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        }
+      }
+    },
+    "tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
+      "dev": true
+    },
+    "type-check": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
+      "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "~1.1.2"
+      }
+    },
+    "type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true
+    },
+    "typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
+      "dev": true
+    },
+    "typescript": {
+      "version": "3.7.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.5.tgz",
+      "integrity": "sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==",
+      "dev": true
+    },
+    "unbox-primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
+      "integrity": "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has-bigints": "^1.0.1",
+        "has-symbols": "^1.0.2",
+        "which-boxed-primitive": "^1.0.2"
+      }
+    },
+    "uri-js": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
+      "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
+      "dev": true,
+      "requires": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
+    "uuid": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
+      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
+      "dev": true
+    },
+    "v8-compile-cache": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz",
+      "integrity": "sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q==",
+      "dev": true
+    },
+    "verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      }
+    },
+    "w3c-hr-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz",
+      "integrity": "sha1-gqwr/2PZUOqeMYmlimViX+3xkEU=",
+      "dev": true,
+      "requires": {
+        "browser-process-hrtime": "^0.1.2"
+      }
+    },
+    "w3c-xmlserializer": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-1.1.2.tgz",
+      "integrity": "sha512-p10l/ayESzrBMYWRID6xbuCKh2Fp77+sA0doRuGn4tTIMrrZVeqfpKjXHY+oDh3K4nLdPgNwMTVP6Vp4pvqbNg==",
+      "dev": true,
+      "requires": {
+        "domexception": "^1.0.1",
+        "webidl-conversions": "^4.0.2",
+        "xml-name-validator": "^3.0.0"
+      }
+    },
+    "webidl-conversions": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
+      "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
+      "dev": true
+    },
+    "whatwg-encoding": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
+      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
+      "dev": true,
+      "requires": {
+        "iconv-lite": "0.4.24"
+      }
+    },
+    "whatwg-mimetype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
+      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==",
+      "dev": true
+    },
+    "whatwg-url": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.0.0.tgz",
+      "integrity": "sha512-37GeVSIJ3kn1JgKyjiYNmSLP1yzbpb29jdmwBSgkD9h40/hyrR/OifpVUndji3tmwGgD8qpw7iQu3RSbCrBpsQ==",
+      "dev": true,
+      "requires": {
+        "lodash.sortby": "^4.7.0",
+        "tr46": "^1.0.1",
+        "webidl-conversions": "^4.0.2"
+      }
+    },
+    "which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
+    "which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
+      "requires": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      }
+    },
+    "which-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
+      "dev": true
+    },
+    "wide-align": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
+      "dev": true,
+      "requires": {
+        "string-width": "^1.0.2 || 2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz",
+          "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "dev": true,
+          "requires": {
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
+      }
+    },
+    "word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "dev": true
+    },
+    "wordwrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=",
+      "dev": true
+    },
+    "wrap-ansi": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+      "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.0",
+        "string-width": "^3.0.0",
+        "strip-ansi": "^5.0.0"
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    },
+    "ws": {
+      "version": "7.4.6",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
+      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
+      "dev": true
+    },
+    "xml-name-validator": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
+      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
+      "dev": true
+    },
+    "xmlchars": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.1.1.tgz",
+      "integrity": "sha512-7hew1RPJ1iIuje/Y01bGD/mXokXxegAgVS+e+E0wSi2ILHQkYAH1+JXARwTjZSM4Z4Z+c73aKspEcqj+zPPL/w==",
+      "dev": true
+    },
+    "y18n": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz",
+      "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==",
+      "dev": true
+    },
+    "yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
+    "yargs": {
+      "version": "13.3.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+      "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+      "dev": true,
+      "requires": {
+        "cliui": "^5.0.0",
+        "find-up": "^3.0.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^3.0.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^13.1.2"
+      },
+      "dependencies": {
+        "yargs-parser": {
+          "version": "13.1.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
+    "yargs-unparser": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-1.6.0.tgz",
+      "integrity": "sha512-W9tKgmSn0DpSatfri0nx52Joq5hVXgeLiqR/5G0sZNDoLZFOr/xjBUDcShCOGNsBnEMNo1KAMBkTej1Hm62HTw==",
+      "dev": true,
+      "requires": {
+        "flat": "^4.1.0",
+        "lodash": "^4.17.15",
+        "yargs": "^13.3.0"
+      }
+    },
+    "yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=",
+      "dev": true,
+      "requires": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000000..edcfac4b77
--- /dev/null
+++ b/package.json
@@ -0,0 +1,156 @@
+{
+  "name": "svelte",
+  "version": "3.48.0",
+  "description": "Cybernetically enhanced web apps",
+  "module": "index.mjs",
+  "main": "index",
+  "files": [
+    "types",
+    "compiler.*",
+    "register.js",
+    "index.*",
+    "ssr.*",
+    "internal",
+    "store",
+    "animate",
+    "transition",
+    "easing",
+    "motion",
+    "action",
+    "README.md"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./types/runtime/index.d.ts",
+      "browser": {
+        "import": "./index.mjs",
+        "require": "./index.js"
+      },
+      "node": {
+        "import": "./ssr.mjs",
+        "require": "./ssr.js"
+      },
+      "import": "./index.mjs",
+      "require": "./index.js"
+    },
+    "./compiler": {
+      "types": "./types/compiler/index.d.ts",
+      "import": "./compiler.mjs",
+      "require": "./compiler.js"
+    },
+    "./action": {
+      "types": "./types/runtime/action/index.d.ts"
+    },
+    "./animate": {
+      "types": "./types/runtime/animate/index.d.ts",
+      "import": "./animate/index.mjs",
+      "require": "./animate/index.js"
+    },
+    "./easing": {
+      "types": "./types/runtime/easing/index.d.ts",
+      "import": "./easing/index.mjs",
+      "require": "./easing/index.js"
+    },
+    "./internal": {
+      "types": "./types/runtime/internal/index.d.ts",
+      "import": "./internal/index.mjs",
+      "require": "./internal/index.js"
+    },
+    "./motion": {
+      "types": "./types/runtime/motion/index.d.ts",
+      "import": "./motion/index.mjs",
+      "require": "./motion/index.js"
+    },
+    "./register": {
+      "require": "./register.js"
+    },
+    "./store": {
+      "types": "./types/runtime/store/index.d.ts",
+      "import": "./store/index.mjs",
+      "require": "./store/index.js"
+    },
+    "./transition": {
+      "types": "./types/runtime/transition/index.d.ts",
+      "import": "./transition/index.mjs",
+      "require": "./transition/index.js"
+    },
+    "./ssr": {
+      "types": "./types/runtime/index.d.ts",
+      "import": "./ssr.mjs",
+      "require": "./ssr.js"
+    }
+  },
+  "engines": {
+    "node": ">= 8"
+  },
+  "types": "types/runtime/index.d.ts",
+  "scripts": {
+    "test": "mocha --exit",
+    "test:unit": "mocha --require sucrase/register --recursive src/**/__test__.ts --exit",
+    "quicktest": "mocha",
+    "build": "rollup -c && npm run tsd",
+    "prepare": "npm run build",
+    "dev": "rollup -cw",
+    "pretest": "npm run build",
+    "posttest": "agadoo internal/index.mjs",
+    "prepublishOnly": "node check_publish_env.js && npm run lint && npm test",
+    "tsd": "tsc -p src/compiler --emitDeclarationOnly && tsc -p src/runtime --emitDeclarationOnly",
+    "lint": "eslint \"{src,test}/**/*.{ts,js}\""
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sveltejs/svelte.git"
+  },
+  "keywords": [
+    "UI",
+    "framework",
+    "templates",
+    "templating"
+  ],
+  "author": "Rich Harris",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/sveltejs/svelte/issues"
+  },
+  "homepage": "https://svelte.dev",
+  "devDependencies": {
+    "@ampproject/remapping": "^0.3.0",
+    "@rollup/plugin-commonjs": "^11.0.0",
+    "@rollup/plugin-json": "^4.0.1",
+    "@rollup/plugin-node-resolve": "^6.0.0",
+    "@rollup/plugin-replace": "^2.3.0",
+    "@rollup/plugin-sucrase": "^3.1.0",
+    "@rollup/plugin-typescript": "^2.0.1",
+    "@rollup/plugin-virtual": "^2.0.0",
+    "@sveltejs/eslint-config": "github:sveltejs/eslint-config#v5.8.0",
+    "@types/mocha": "^7.0.0",
+    "@types/node": "^8.10.53",
+    "@typescript-eslint/eslint-plugin": "^5.22.0",
+    "@typescript-eslint/parser": "^5.22.0",
+    "acorn": "^8.4.1",
+    "agadoo": "^1.1.0",
+    "code-red": "^0.2.5",
+    "css-tree": "^1.1.2",
+    "eslint": "^8.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "estree-walker": "^3.0.0",
+    "is-reference": "^3.0.0",
+    "jsdom": "^15.2.1",
+    "kleur": "^3.0.3",
+    "locate-character": "^2.0.5",
+    "magic-string": "^0.25.3",
+    "mocha": "^7.0.0",
+    "periscopic": "^3.0.4",
+    "puppeteer": "^2.0.0",
+    "rollup": "^1.27.14",
+    "source-map": "^0.7.3",
+    "source-map-support": "^0.5.13",
+    "sourcemap-codec": "^1.4.8",
+    "tiny-glob": "^0.2.6",
+    "tslib": "^2.0.3",
+    "typescript": "^3.7.5"
+  }
+
+}
diff --git a/register.js b/register.js
new file mode 100644
index 0000000000..25f8aa4309
--- /dev/null
+++ b/register.js
@@ -0,0 +1,56 @@
+const fs = require('fs');
+const path = require('path');
+const { compile } = require('./compiler.js');
+
+const extensions = ['.svelte', '.html'];
+let compileOptions = {};
+
+function capitalise(name) {
+	return name[0].toUpperCase() + name.slice(1);
+}
+
+function register(options = {}) {
+	if (options.extensions) {
+		extensions.forEach(deregisterExtension);
+		options.extensions.forEach(registerExtension);
+	}
+
+	compileOptions = Object.assign({}, options);
+	delete compileOptions.extensions;
+}
+
+function deregisterExtension(extension) {
+	delete require.extensions[extension];
+}
+
+function registerExtension(extension) {
+	require.extensions[extension] = function(module, filename) {
+		const name = path.parse(filename).name
+			.replace(/^\d/, '_$&')
+			.replace(/[^a-zA-Z0-9_$]/g, '');
+
+		const options = Object.assign({}, compileOptions, {
+			filename,
+			name: capitalise(name),
+			generate: 'ssr',
+			format: 'cjs'
+		});
+
+		const { js, warnings } = compile(fs.readFileSync(filename, 'utf-8'), options);
+		
+		if (options.dev) {
+			warnings.forEach(warning => {
+				console.warn(`\nSvelte Warning in ${warning.filename}:`);
+				console.warn(warning.message);
+				console.warn(warning.frame);
+			})
+		}
+
+		return module._compile(js.code, filename);
+	};
+}
+
+registerExtension('.svelte');
+registerExtension('.html');
+
+module.exports = register;
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 0000000000..b60423c35c
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,138 @@
+import fs from 'fs';
+import replace from '@rollup/plugin-replace';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import sucrase from '@rollup/plugin-sucrase';
+import typescript from '@rollup/plugin-typescript';
+import pkg from './package.json';
+
+const is_publish = !!process.env.PUBLISH;
+
+const ts_plugin = is_publish
+	? typescript({
+		include: 'src/**',
+		typescript: require('typescript')
+	})
+	: sucrase({
+		transforms: ['typescript']
+	});
+
+const external = id => id.startsWith('svelte/');
+
+fs.writeFileSync(`./compiler.d.ts`, `export { compile, parse, preprocess, walk, VERSION } from './types/compiler/index';`);
+
+export default [
+	/* runtime */
+	{
+		input: `src/runtime/index.ts`,
+		output: [
+			{
+				file: `index.mjs`,
+				format: 'esm',
+				paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}/index.mjs`
+			},
+			{
+				file: `index.js`,
+				format: 'cjs',
+				paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}/index.js`
+			}
+		],
+		external,
+		plugins: [ts_plugin]
+	},
+
+	{
+		input: `src/runtime/ssr.ts`,
+		output: [
+			{
+				file: `ssr.mjs`,
+				format: 'esm',
+				paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}/index.mjs`
+			},
+			{
+				file: `ssr.js`,
+				format: 'cjs',
+				paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '.')}/index.js`
+			}
+		],
+		external,
+		plugins: [ts_plugin]
+	},
+
+	...fs.readdirSync('src/runtime')
+		.filter(dir => fs.statSync(`src/runtime/${dir}`).isDirectory())
+		.map(dir => ({
+			input: `src/runtime/${dir}/index.ts`,
+			output: [
+				{
+					file: `${dir}/index.mjs`,
+					format: 'esm',
+					paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '..')}/index.mjs`
+				},
+				{
+					file: `${dir}/index.js`,
+					format: 'cjs',
+					paths: id => id.startsWith('svelte/') && `${id.replace('svelte', '..')}/index.js`
+				}
+			],
+			external,
+			plugins: [
+				replace({
+					__VERSION__: pkg.version
+				}),
+				ts_plugin,
+				{
+					writeBundle(bundle) {
+						if (dir === 'internal') {
+							const mod = bundle['index.mjs'];
+							if (mod) {
+								fs.writeFileSync('src/compiler/compile/internal_exports.ts', `// This file is automatically generated\nexport default new Set(${JSON.stringify(mod.exports)});`);
+							}
+						}
+
+						fs.writeFileSync(`${dir}/package.json`, JSON.stringify({
+							main: './index',
+							module: './index.mjs',
+							types: './index.d.ts'
+						}, null, '  '));
+
+						fs.writeFileSync(`${dir}/index.d.ts`, `export * from '../types/runtime/${dir}/index';`);
+					}
+				}
+			]
+		})),
+
+	/* compiler.js */
+	{
+		input: 'src/compiler/index.ts',
+		plugins: [
+			replace({
+				__VERSION__: pkg.version
+			}),
+			resolve(),
+			commonjs({
+				include: ['node_modules/**']
+			}),
+			json(),
+			ts_plugin
+		],
+		output: [
+			{
+				file: 'compiler.js',
+				format: is_publish ? 'umd' : 'cjs',
+				name: 'svelte',
+				sourcemap: true,
+			},
+			{
+				file: 'compiler.mjs',
+				format: 'esm',
+				name: 'svelte',
+				sourcemap: true,
+			}
+		],
+		external: is_publish
+			? []
+			: id => id === 'acorn' || id === 'magic-string' || id.startsWith('css-tree')
+	}
+];
diff --git a/site/content/blog/2016-11-26-frameworks-without-the-framework.md b/site/content/blog/2016-11-26-frameworks-without-the-framework.md
new file mode 100644
index 0000000000..b29525dec3
--- /dev/null
+++ b/site/content/blog/2016-11-26-frameworks-without-the-framework.md
@@ -0,0 +1,55 @@
+---
+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.
+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](https://v2.svelte.dev/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](https://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](https://v2.svelte.dev/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.
diff --git a/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md b/site/content/blog/2017-08-07-the-easiest-way-to-get-started.md
new file mode 100644
index 0000000000..fe4a14eaeb
--- /dev/null
+++ b/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.
+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](/repl) (Read-Eval-Print Loop) is the easiest way to begin. This is an interactive environment that allows you to modify code and instantly see the result. 
+
+You can choose from a list of [examples](/examples/), click the [REPL](/repl) link, and then tweak them until they do what you want.
+
+<aside><p>You'll need to have <a href="https://nodejs.org/">Node.js</a> installed, and know how to use the terminal</p></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:8080](http://localhost:8080) 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, you can instantly create a new project like so:
+
+```bash
+npx degit sveltejs/template my-svelte-project
+cd my-svelte-project
+# to use TypeScript run:
+# node scripts/setupTypeScript.js
+
+npm install
+npm run dev
+```
+
+This will create a new project in the `my-svelte-project` directory, install its dependencies, and start a server on http://localhost:8080.
+
+You can find more information about using TypeScript [here](/blog/svelte-and-typescript).
+
+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
+npx 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 [Vercel](https://vercel.com) 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) (Update from 2019: with Svelte 3 the CLI was deprecated and we now use [sirv-cli](https://www.npmjs.com/package/sirv-cli) in our template. Feel free to use whatever tool you like!) or the [API](https://github.com/sveltejs/svelte/tree/v2#api) directly. If you make a project template using one of these tools, please share it with the [Svelte Discord chatroom](chat), or via [@sveltejs](https://twitter.com/sveltejs) on Twitter!
diff --git a/site/content/blog/2017-09-06-the-zen-of-just-writing-css.md b/site/content/blog/2017-09-06-the-zen-of-just-writing-css.md
new file mode 100644
index 0000000000..2bf3a2e8a5
--- /dev/null
+++ b/site/content/blog/2017-09-06-the-zen-of-just-writing-css.md
@@ -0,0 +1,78 @@
+---
+title: The zen of Just Writing CSS
+description: I would say this is the future, but we're already doing it.
+author: Rich Harris
+authorURL: https://twitter.com/Rich_Harris
+---
+
+It's fashionable to dislike CSS. There are lots of reasons why that's the case, but it boils down to this: CSS is *unpredictable*. If you've never had the experience of tweaking a style rule and accidentally breaking some layout that you thought was completely unrelated — usually when you're trying to ship — then you're either new at this or you're a much better programmer than the rest of us.
+
+So the JavaScript community rolled up its sleeves and got to work. Over the last couple of years, there's been a Cambrian explosion of libraries aimed at making CSS behave, collectively referred to as *CSS-in-JS*.
+
+What you might not realise is that **the biggest problems with CSS can be solved without CSS-in-JS**. Without those problems, writing CSS isn't just tolerable — it's enjoyable. And you don't have to find solutions to the additional problems that CSS-in-JS introduces.
+
+This article isn't in any way intended as criticism of the hard work the CSS-in-JS community has done. It's one of the most active corners of the JS ecosystem, and new ideas are springing up every week. Instead, my purpose is to illustrate why an alternative approach — based on Single File Components with real CSS — is so damn delightful.
+
+
+## The biggest problem with CSS
+
+Everything in CSS is global. Because of that, styles intended for one bit of markup often end up affecting another. Because of *that*, developers often resort to wild namespacing conventions (not 'rules', since they're very difficult to enforce) that mostly just increase your risk of RSI.
+
+It gets worse when you're working on a team. No-one dares touch styles authored by someone else, because it's often unclear what they're doing, what markup they apply to, and what disasters will unfold if you remove them.
+
+The consequence of all this is the **append-only stylesheet**. There's no way of knowing which code can safely be removed, so it's common to undo some existing style with another, more specific style — even on relatively small projects.
+
+
+## Single File Components change all that
+
+The idea behind SFCs is simple: you write your components in an HTML file that (optionally) contains a `<style>` and `<script>` attribute describing the component's styles and behaviour. Svelte, Ractive, Vue and Polymer all follow this basic pattern.
+
+<aside>
+	<p><a href="/blog/frameworks-without-the-framework">Read the introductory blog post</a> if you're new to Svelte. Or <a href="https://twitter.com/padolsey/status/899717303234908160">read</a> <a href="https://twitter.com/sveltejs/status/901818357644701696">the</a> <a href="https://twitter.com/sveltejs/status/901818106309476352">testimonials</a>.</p>
+</aside>
+
+(For the rest of this article we'll be using Svelte, obviously. But if the idea of using a template language makes you shudder — your fears are misplaced, but that's a topic for another day — then just use Vue which lets you use JSX in your SFCs.)
+
+Several wonderful things happen as a result:
+
+* Your styles are *scoped to the component*. No more leakage, no more unpredictable cascade. And no more sesquipedalian classnames designed to prevent conflicts.
+* You don't need to go spelunking through your folder structure to find the rules that are breaking your stuff.
+* The compiler (in Svelte's case) can **identify and remove unused styles**. No more append-only stylesheets!
+
+Let's see what that looks like in practice.
+
+<figure>
+	<video controls poster='https://svelte-technology-assets.surge.sh/just-write-css.jpg'>
+		<source type='video/mp4' src='https://svelte-technology-assets.surge.sh/just-write-css.mp4'>
+	</video>
+
+	<figcaption>
+		Is this what they mean by 'use the platform'?
+	</figcaption>
+</figure>
+
+Every code editor already knows about CSS, so there's a good chance that you'll get autocomplete, linting, syntax highlighting and so on — all without additional JS-fatigue-inducing tools.
+
+And because it's real CSS, rather than some camelCased quotes-everywhere impostor, we can take advantage of the 'tweak in devtools, paste back into our source code' workflow, which I personally couldn't live without. Notice that we get CSS sourcemaps out of the box, so you can instantly pinpoint the lines in question. It's hard to overstate the importance of this: when you're in WYSIWYG mode, you're not thinking in terms of your component tree, so having a robust way to figure out *where these damn styles came from* is essential. Doubly so if someone else originally wrote the component. (I promise you, this is the single biggest productivity boost to your CSS workflow. If you're writing styles without sourcemaps, you are almost certainly wasting a lot of time. I know I was.)
+
+Svelte transforms your selectors (using an attribute that's also applied to affected elements, though the exact mechanism is unimportant and subject to change) to achieve the scoping. It warns on and removes any unused rules, then it minifies the result and lets you write it out to a `.css` file. There's also an experimental new option to compile to web components, using shadow DOM to encapsulate the styles, if that's your jam.
+
+This is all possible because your CSS is parsed (with [css-tree](https://github.com/csstree/csstree)) and statically analysed in the context of your markup. Static analysis opens the doors to all kinds of exciting future possibilities — smarter optimisations, a11y hints — that are much harder if your styles are computed dynamically at runtime. We're just getting started.
+
+
+## But we can add tools to do [x]!
+
+If your reaction to the video was 'fine, but if we use TypeScript and write plugins for each editor then we can get all the autocomplete and syntax highlighting stuff' — in other words, if you believe that in order to achieve parity with CSS it makes sense to build, document, promote and maintain a fleet of ancillary projects — then, well, you and I may never see eye to eye!
+
+
+## We don't have all the answers — yet
+
+Having said all that, CSS-in-JS does point to answers to some lingering questions:
+
+* How can we install styles from npm?
+* How can we reuse constants that are defined in a single place?
+* How can we compose declarations?
+
+Personally, I haven't found these issues to outweigh the benefits of the approach outlined above. You may well have a different set of priorities, and they may be reason enough for you to abandon CSS.
+
+But at the end of the day, you have to know CSS anyway. Love it or loathe it, you must at least *learn* it. As custodians of the web, we have a choice: create abstractions that steepen the web dev learning curve yet further, or work together to fix the bad parts of CSS. I know which I choose.
diff --git a/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md b/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md
new file mode 100644
index 0000000000..42ed7012b9
--- /dev/null
+++ b/site/content/blog/2017-12-31-sapper-towards-the-ideal-web-app-framework.md
@@ -0,0 +1,84 @@
+---
+title: "Sapper: Towards the ideal web app framework"
+description: Taking the next-plus-one step
+author: Rich Harris
+authorURL: https://twitter.com/Rich_Harris
+---
+
+> Quickstart for the impatient: [the Sapper docs](https://sapper.svelte.dev), and the [starter template](https://github.com/sveltejs/sapper-template)
+
+If you had to list the characteristics of the perfect Node.js web application framework, you'd probably come up with something like this:
+
+1. It should do server-side rendering, for fast initial loads and no caveats around SEO
+2. As a corollary, your app's codebase should be universal — write once for server *and* client
+3. The client-side app should *hydrate* the server-rendered HTML, attaching event listeners (and so on) to existing elements rather than re-rendering them
+4. Navigating to subsequent pages should be instantaneous
+5. Offline, and other Progressive Web App characteristics, must be supported out of the box
+6. Only the JavaScript and CSS required for the first page should load initially. That means the framework should do automatic code-splitting at the route level, and support dynamic `import(...)` for more granular manual control
+7. No compromise on performance
+8. First-rate developer experience, with hot module reloading and all the trimmings
+9. The resulting codebase should be easy to grok and maintain
+10. It should be possible to understand and customise every aspect of the system — no webpack configs locked up in the framework, and as little hidden 'plumbing' as possible
+11. Learning the entire framework in under an hour should be easy, and not just for experienced developers
+
+[Next.js](https://github.com/zeit/next.js) is close to this ideal. If you haven't encountered it yet, I strongly recommend going through the tutorials at [learnnextjs.com](https://learnnextjs.com). Next introduced a brilliant idea: all the pages of your app are files in a `your-project/pages` directory, and each of those files is just a React component.
+
+Everything else flows from that breakthrough design decision. Finding the code responsible for a given page is easy, because you can just look at the filesystem rather than playing 'guess the component name'. Project structure bikeshedding is a thing of the past. And the combination of SSR (server-side rendering) and code-splitting — something the React Router team [gave up on](https://reacttraining.com/react-router/web/guides/code-splitting), declaring 'Godspeed those who attempt the server-rendered, code-split apps' — is trivial.
+
+But it's not perfect. As churlish as it might be to list the flaws in something *so, so good*, there are some:
+
+* Next uses something called 'route masking' to create nice URLs (e.g. `/blog/hello-world` instead of `/post?slug=hello-world`). This undermines the guarantee about directory structure corresponding to app structure, and forces you to maintain configuration that translates between the two forms
+* All your routes are assumed to be universal 'pages'. But it's very common to need routes that only render on the server, such as a 301 redirect or an [API endpoint](/blog/sapper-towards-the-ideal-web-app-framework.json) that serves the data for your pages, and Next doesn't have a great solution for this. You can add logic to your `server.js` file to handle these cases, but it feels at odds with the declarative approach taken for pages
+* To use the client-side router, links can't be standard `<a>` tags. Instead, you have to use framework-specific `<Link>` components, which is impossible in the markdown content for a blog post such as this one, for example
+
+The real problem, though, is that all that goodness comes for a price. The simplest possible Next app — a single 'hello world' page that renders some static text — involves 66kb of gzipped JavaScript. Unzipped, it's 204kb, which is a non-trivial amount of code for a mobile device to parse at a time when performance is a critical factor determining whether or not your users will stick around. And that's the *baseline*.
+
+We can do better!
+
+
+## The compiler-as-framework paradigm shift
+
+[Svelte introduced a radical idea](/blog/frameworks-without-the-framework): what if your UI framework wasn't a framework at all, but a compiler that turned your components into standalone JavaScript modules? Instead of using a library like React or Vue, which knows nothing about your app and must therefore be a one-size-fits-all solution, we can ship highly-optimised vanilla JavaScript. Just the code your app needs, and without the memory and performance overhead of solutions based on a virtual DOM.
+
+The JavaScript world is [moving towards this model](https://tomdale.net/2017/09/compilers-are-the-new-frameworks/). [Stencil](https://stenciljs.com), a Svelte-inspired framework from the Ionic team, compiles to web components. [Glimmer](https://glimmerjs.com) *doesn't* compile to standalone JavaScript (the pros and cons of which deserve a separate blog post), but the team is doing some fascinating research around compiling templates to bytecode. (React is [getting in on the action](https://twitter.com/trueadm/status/944908776896978946), though their current research focuses on optimising your JSX app code, which is arguably more similar to the ahead-of-time optimisations that Angular, Ractive and Vue have been doing for a few years.)
+
+What happens if we use the new model as a starting point?
+
+
+## Introducing Sapper
+
+<aside><p>The <a href="https://sapper.svelte.dev/docs#Why_the_name">name comes from</a> the term for combat engineers, and is also short for Svelte app maker</p></aside>
+
+[Sapper](https://sapper.svelte.dev) is the answer to that question. **Sapper is a Next.js-style framework that aims to meet the eleven criteria at the top of this article while dramatically reducing the amount of code that gets sent to the browser.** It's implemented as Express-compatible middleware, meaning it's easy to understand and customise.
+
+The same 'hello world' app that took 204kb with React and Next weighs just 7kb with Sapper. That number is likely to fall further in the future as we explore the space of optimisation possibilities, such as not shipping any JavaScript *at all* for pages that aren't interactive, beyond the tiny Sapper runtime that handles client-side routing.
+
+What about a more 'real world' example? Conveniently, the [RealWorld](https://github.com/gothinkster/realworld) project, which challenges frameworks to develop an implementation of a Medium clone, gives us a way to find out. The [Sapper implementation](https://github.com/sveltejs/realworld) takes 39.6kb (11.8kb zipped) to render an interactive homepage.
+
+<aside><p>Code-splitting isn't free — if the reference implementation used code-splitting, it would be larger still</p></aside>
+
+The entire app costs 132.7kb (39.9kb zipped), which is significantly smaller than the reference React/Redux implementation at 327kb (85.7kb), but even if it was as large it would *feel* faster because of code-splitting. And that's a crucial point. We're told we need to code-split our apps, but if your app uses a traditional framework like React or Vue then there's a hard lower bound on the size of your initial code-split chunk — the framework itself, which is likely to be a significant portion of your total app size. With the Svelte approach, that's no longer the case.
+
+But size is only part of the story. Svelte apps are also extremely performant and memory-efficient, and the framework includes powerful features that you would sacrifice if you chose a 'minimal' or 'simple' UI library.
+
+
+## Trade-offs
+
+The biggest drawback for many developers evaluating Sapper would be 'but I like React, and I already know how to use it', which is fair.
+
+If you're in that camp, I'd invite you to at least try alternative frameworks. You might be pleasantly surprised! The [Sapper RealWorld](https://github.com/sveltejs/realworld) implementation totals 1,201 lines of source code, compared to 2,377 for the reference implementation, because you're able to express concepts very concisely using Svelte's template syntax (which [takes all of five minutes to master](https://v2.svelte.dev/guide#template-syntax)). You get [scoped CSS](/blog/the-zen-of-just-writing-css), with unused style removal and minification built-in, and you can use preprocessors like LESS if you want. You no longer need to use Babel. SSR is ridiculously fast, because it's just string concatenation. And we recently introduced [svelte/store](https://v2.svelte.dev/guide#state-management), a tiny global store that synchronises state across your component hierarchy with zero boilerplate. The worst that can happen is that you'll end up feeling vindicated!
+
+But there are trade-offs nonetheless. Some people have a pathological aversion to any form of 'template language', and maybe that applies to you. JSX proponents will clobber you with the 'it's just JavaScript' mantra, and therein lies React's greatest strength, which is that it is infinitely flexible. That flexibility comes with its own set of trade-offs, but we're not here to discuss those.
+
+And then there's *ecosystem*. The universe around React in particular — the devtools, editor integrations, ancillary libraries, tutorials, StackOverflow answers, hell, even job opportunities — is unrivalled. While it's true that citing 'ecosystem' as the main reason to choose a tool is a sign that you're stuck on a local maximum, apt to be marooned by the rising waters of progress, it's still a major point in favour of incumbents.
+
+
+## Roadmap
+
+We're not at version 1.0.0 yet, and a few things may change before we get there. Once we do (soon!), there are a lot of exciting possibilities.
+
+I believe the next frontier of web performance is 'whole-app optimisation'. Currently, Svelte's compiler operates at the component level, but a compiler that understood the boundaries *between* those components could generate even more efficient code. The React team's [Prepack research](https://twitter.com/trueadm/status/944908776896978946) is predicated on a similar idea, and the Glimmer team is doing some interesting work in this space. Svelte and Sapper are well positioned to take advantage of these ideas.
+
+Speaking of Glimmer, the idea of compiling components to bytecode is one that we'll probably steal in 2018. A framework like Sapper could conceivably determine which compilation mode to use based on the characteristics of your app. It could even serve JavaScript for the initial route for the fastest possible startup time, then lazily serve a bytecode interpreter for subsequent routes, resulting in the optimal combination of startup size and total app size.
+
+Mostly, though, we want the direction of Sapper to be determined by its users. If you're the kind of developer who enjoys life on the bleeding edge and would like to help shape the future of how we build web apps, please join us on [GitHub](https://github.com/sveltejs/svelte) and [Discord](chat).
diff --git a/site/content/blog/2018-04-18-version-2.md b/site/content/blog/2018-04-18-version-2.md
new file mode 100644
index 0000000000..cbfe98b282
--- /dev/null
+++ b/site/content/blog/2018-04-18-version-2.md
@@ -0,0 +1,204 @@
+---
+title: Svelte v2 is out!
+description: Here's what you need to know
+author: Rich Harris
+authorURL: https://twitter.com/Rich_Harris
+---
+
+<aside>Our motto is 'move slowly and break things'. No, wait, that came out wrong...</aside>
+
+Almost a year after we first started talking about version 2 on the Svelte issue tracker, it's finally time to make some breaking changes. This blog post will explain what changed, why it changed, and what you need to do to bring your apps up to date.
+
+
+## tl;dr
+
+Each of these items is described in more depth below. If you get stuck, ask for help in our friendly [Discord chatroom](chat).
+
+- Install Svelte v2 from npm
+- Upgrade your templates with [svelte-upgrade](https://github.com/sveltejs/svelte-upgrade)
+- Remove calls to `component.observe`, or add the `observe` method from [svelte-extras](https://github.com/sveltejs/svelte-extras)
+- Rewrite calls to `component.get('foo')` as `component.get().foo`
+- Return `destroy` from your custom event handlers, rather than `teardown`
+- Make sure you're not passing numeric string props to components
+
+
+## New template syntax
+
+The most visible change: we've made some improvements to the template syntax.
+
+A common piece of feedback we heard was 'ewww, Mustache' or 'ewww, Handlebars'. A lot of people who used string-based templating systems in a previous era of web development *really* dislike them. Because Svelte adopted the `{{curlies}}` from those languages, a lot of people assumed that we somehow shared the limitations of those tools, such as weird scoping rules or an inability to use arbitrary JavaScript expressions.
+
+<aside>If you need to show an actual `{` character, it's as easy as `&amp;#123;`</aside>
+
+Beyond that, JSX proved that double curlies are unnecessary. So we've made our templates more... svelte, by adopting single curlies. The result feels much lighter to look at and is more pleasant to type:
+
+```html
+<h1>Hello {name}!</h1>
+```
+
+There are a few other updates. But you don't need to make them manually — just run [svelte-upgrade](https://github.com/sveltejs/svelte-upgrade) on your codebase:
+
+```bash
+npx svelte-upgrade v2 src
+```
+
+This assumes any `.html` files in `src` are Svelte components. You can specify whichever directory you like, or target a different directory — for example, you'd do `npx svelte-upgrade v2 routes` to update a [Sapper](https://sapper.svelte.technology) app.
+
+To see the full set of changes, consult the [svelte-upgrade README](https://github.com/sveltejs/svelte-upgrade#svelte-v2-syntax-changes).
+
+
+## Computed properties
+
+Another thing that people often found confusing about Svelte is the way computed properties work. To recap, if you had a component with this...
+
+```js
+export default {
+	computed: {
+		d: (a, b, c) => a = b + c
+	}
+};
+```
+
+...then Svelte would first look at the function arguments to see which values `d` depended on, and then it would write code that updated `d` whenever those values changed, by injecting them into the function. That's cool, because it allows you to derive complex values from your component's inputs without worrying about when they need to recomputed, but it's also... *weird*. JavaScript doesn't work that way!
+
+In v2, we use [destructuring](http://www.jstips.co/en/javascript/use-destructuring-in-function-parameters/) instead:
+
+```js
+export default {
+	computed: {
+		d: ({ a, b, c }) => a = b + c
+	}
+};
+```
+
+The Svelte compiler can still see which values `d` depends on, but it's no longer injecting values — it just passes the component state object into each computed property.
+
+Again, you don't need to make this change manually — just run svelte-upgrade on your components, as shown above.
+
+
+## Sorry, IE11. It's not you, it's... well actually, yeah. It's you
+
+Svelte v1 was careful to only emit ES5 code, so that you wouldn't be forced to faff around with transpilers in order to use it. But it's 2018 now, and almost all browsers support modern JavaScript. By ditching the ES5 constraint, we can generate leaner code.
+
+If you need to support IE11 and friends, you will need to use a transpiler like [Babel](https://babeljs.io/repl) or [Bublé](https://buble.surge.sh/).
+
+
+## New lifecycle hooks
+
+In addition to `oncreate` and `ondestroy`, Svelte v2 adds two more [lifecycle hooks](https://v2.svelte.dev/guide#lifecycle-hooks) for responding to state changes:
+
+```js
+export default {
+	onstate({ changed, current, previous }) {
+		// this fires before oncreate, and
+		// whenever state changes
+	},
+
+	onupdate({ changed, current, previous }) {
+		// this fires after oncreate, and
+		// whenever the DOM has been updated
+		// following a state change
+	}
+};
+```
+
+You can also listen to those events programmatically:
+
+```js
+component.on('state', ({ changed, current, previous }) => {
+	// ...
+});
+```
+
+
+## component.observe
+
+With the new lifecycle hooks, we no longer need the `component.observe(...)` method:
+
+```js
+// before
+export default {
+	oncreate() {
+		this.observe('foo', foo => {
+			console.log(`foo is now ${foo}`);
+		});
+	}
+};
+
+// after
+export default {
+	onstate({ changed, current }) {
+		if (changed.foo) {
+			console.log(`foo is now ${current.foo}`);
+		}
+	}
+};
+```
+
+This shrinks the amount of code Svelte needs to generate, and gives you more flexibility. For example, it's now very easy to take action when any one of *several* properties have changed, such as redrawing a canvas without debouncing several observers.
+
+However, if you prefer to use `component.observe(...)`, then you can install it from [svelte-extras](https://github.com/sveltejs/svelte-extras):
+
+```js
+import { observe } from 'svelte-extras';
+
+export default {
+	methods: {
+		observe
+	}
+};
+```
+
+
+## component.get
+
+This method no longer takes an optional `key` argument — instead, it always returns the entire state object:
+
+```js
+// before
+const foo = this.get('foo');
+const bar = this.get('bar');
+
+// after
+const { foo, bar } = this.get();
+```
+
+This change might seem annoying initially, but it's the right move: among other things, it's likely to play better with type systems as we explore that space more fully in future.
+
+
+## event_handler.destroy
+
+If your app has [custom event handlers](https://v2.svelte.dev/guide#custom-event-handlers), they must return an object with a `destroy` method, *not* a `teardown` method (this aligns event handlers with the component API).
+
+
+## No more type coercion
+
+Previously, numeric values passed to components were treated as numbers:
+
+```html
+<Counter start='1'/>
+```
+
+That causes unexpected behaviour, and has been changed: if you need to pass a literal number, do so as an expression:
+
+```html
+<Counter start={1}/>
+```
+
+
+## Compiler changes
+
+In most cases you'll never need to deal with the compiler directly, so this shouldn't require any action on your part. It's worth noting anyway: the compiler API has changed. Instead of an object with a mish-mash of properties, the compiler now returns `js`, `css`, `ast` and `stats`:
+
+```js
+const { js, css, ast, stats } = svelte.compile(source, options);
+```
+
+`js` and `css` are both `{ code, map }` objects, where `code` is a string and `map` is a sourcemap. The `ast` is an abstract syntax tree of your component, and the `stats` object contains metadata about the component, and information about the compilation.
+
+Before, there was a `svelte.validate` method which checked your component was valid. That's been removed — if you want to check a component without actually compiling it, just pass the `generate: false` option.
+
+
+## My app is broken! Help!
+
+Hopefully this covers everything, and the update should be easier for you than it was for us. But if you find bugs, or discover things that aren't mentioned here, swing by [Discord chatroom](chat) or raise an issue on the [tracker](https://github.com/sveltejs/svelte/issues).
diff --git a/site/content/blog/2018-12-26-svelte-css-in-js.md b/site/content/blog/2018-12-26-svelte-css-in-js.md
new file mode 100644
index 0000000000..f77eb83206
--- /dev/null
+++ b/site/content/blog/2018-12-26-svelte-css-in-js.md
@@ -0,0 +1,29 @@
+---
+title: Using CSS-in-JS with Svelte
+description: You don't need to, but you can
+author: Rich Harris
+authorURL: https://twitter.com/Rich_Harris
+---
+
+CSS is a core part of any web app. By extension, a UI framework that doesn't have a built-in way to add styles to your components is unfinished.
+
+That's why Svelte allows you to add CSS in a component's `<style>` tag. Co-locating your CSS with your markup means we can [solve the biggest problems developers face when writing CSS](/blog/the-zen-of-just-writing-css) without introducing new ones, all while providing a rather nice development experience.
+
+But Svelte's style handling does have some limitations. It's too difficult to share styles between components, or apply app-level optimisations. These are areas we plan to address in future versions, but in the meantime if you need those things you can use any framework-agnostic CSS-in-JS library.
+
+
+## For example
+
+Here, we're using [Emotion](https://emotion.sh) to generate scoped class names that can be used across multiple components:
+
+<div class="max">
+	<iframe
+		title="Aphrodite example"
+		src="/repl/embed?example=blog-svelte-css-in-js"
+		scrolling="no"
+	></iframe>
+</div>
+
+It's important to note that most CSS-in-JS libraries have a runtime library, and many don't support statically extracting styles out into a separate <code>.css</code> file at build time (which is essential for the best performance). You should therefore only use CSS-in-JS if it's necessary for your application!
+
+Note that you can mix-and-match — you can still use Svelte's built-in CSS handling alongside a CSS-in-JS library.
diff --git a/site/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md b/site/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md
new file mode 100644
index 0000000000..199ae2aa66
--- /dev/null
+++ b/site/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md
@@ -0,0 +1,149 @@
+---
+title: Virtual DOM is pure overhead
+description: Let's retire the 'virtual DOM is fast' myth once and for all
+author: Rich Harris
+authorURL: https://twitter.com/Rich_Harris
+---
+
+If you've used JavaScript frameworks in the last few years, you've probably heard the phrase 'the virtual DOM is fast', often said to mean that it's faster than the *real* DOM. It's a surprisingly resilient meme — for example people have asked how Svelte can be fast when it doesn't use a virtual DOM.
+
+It's time to take a closer look.
+
+
+## What is the virtual DOM?
+
+In many frameworks, you build an app by creating `render()` functions, like this simple [React](https://reactjs.org/) component:
+
+```js
+function HelloMessage(props) {
+	return (
+		<div className="greeting">
+			Hello {props.name}
+		</div>
+	);
+}
+```
+
+You can do the same thing without JSX...
+
+```js
+function HelloMessage(props) {
+	return React.createElement(
+		'div',
+		{ className: 'greeting' },
+		'Hello ',
+		props.name
+	);
+}
+```
+
+...but the result is the same — an object representing how the page should now look. That object is the virtual DOM. Every time your app's state updates (for example when the `name` prop changes), you create a new one. The framework's job is to *reconcile* the new one against the old one, to figure out what changes are necessary and apply them to the real DOM.
+
+
+## How did the meme start?
+
+Misunderstood claims about virtual DOM performance date back to the launch of React. In [Rethinking Best Practices](https://www.youtube.com/watch?v=x7cQ3mrcKaY), a seminal 2013 talk by former React core team member Pete Hunt, we learned the following:
+
+> This is actually extremely fast, primarily because most DOM operations tend to be slow. There's been a lot of performance work on the DOM, but most DOM operations tend to drop frames.
+
+<figure>
+	<img alt="Pete Hunt at JSConfEU 2013" src="/media/rethinking-best-practices.jpg">
+	<figcaption>Screenshot from <a href="https://www.youtube.com/watch?v=x7cQ3mrcKaY">Rethinking Best Practices</a> at JSConfEU 2013</figcaption>
+</figure>
+
+But hang on a minute! The virtual DOM operations are *in addition to* the eventual operations on the real DOM. The only way it could be faster is if we were comparing it to a less efficient framework (there were plenty to go around back in 2013!), or arguing against a straw man — that the alternative is to do something no-one actually does:
+
+```js
+onEveryStateChange(() => {
+	document.body.innerHTML = renderMyApp();
+});
+```
+
+Pete clarifies soon after...
+
+> React is not magic. Just like you can drop into assembler with C and beat the C compiler, you can drop into raw DOM operations and DOM API calls and beat React if you wanted to. However, using C or Java or JavaScript is an order of magnitude performance improvement because you don't have to worry...about the specifics of the platform. With React you can build applications without even thinking about performance and the default state is fast.
+
+...but that's not the part that stuck.
+
+
+
+## So... is the virtual DOM *slow*?
+
+Not exactly. It's more like 'the virtual DOM is usually fast enough', but with certain caveats.
+
+The original promise of React was that you could re-render your entire app on every single state change without worrying about performance. In practice, I don't think that's turned out to be accurate. If it was, there'd be no need for optimisations like `shouldComponentUpdate` (which is a way of telling React when it can safely skip a component).
+
+Even with `shouldComponentUpdate`, updating your entire app's virtual DOM in one go is a lot of work. A while back, the React team introduced something called React Fiber which allows the update to be broken into smaller chunks. This means (among other things) that updates don't block the main thread for long periods of time, though it doesn't reduce the total amount of work or the time an update takes.
+
+
+## Where does the overhead come from?
+
+Most obviously, [diffing isn't free](https://twitter.com/pcwalton/status/1015694528857047040). You can't apply changes to the real DOM without first comparing the new virtual DOM with the previous snapshot. To take the earlier `HelloMessage` example, suppose the `name` prop changed from 'world' to 'everybody'.
+
+1. Both snapshots contain a single element. In both cases it's a `<div>`, which means we can keep the same DOM node
+2. We enumerate all the attributes on the old `<div>` and the new one to see if any need to be changed, added or removed. In both cases we have a single attribute — a `className` with a value of `"greeting"`
+3. Descending into the element, we see that the text has changed, so we'll need to update the real DOM
+
+Of these three steps, only the third has value in this case, since — as is the case in the vast majority of updates — the basic structure of the app is unchanged. It would be much more efficient if we could skip straight to step 3:
+
+```js
+if (changed.name) {
+	text.data = name;
+}
+```
+
+(This is almost exactly the update code that Svelte generates. Unlike traditional UI frameworks, Svelte is a compiler that knows at *build time* how things could change in your app, rather than waiting to do the work at *run time*.)
+
+
+## It's not just the diffing though
+
+The diffing algorithms used by React and other virtual DOM frameworks are fast. Arguably, the greater overhead is in the components themselves. You wouldn't write code like this...
+
+```js
+function StrawManComponent(props) {
+	const value = expensivelyCalculateValue(props.foo);
+
+	return (
+		<p>the value is {value}</p>
+	);
+}
+```
+
+...because you'd be carelessly recalculating `value` on every update, regardless of whether `props.foo` had changed. But it's extremely common to do unnecessary computation and allocation in ways that seem much more benign:
+
+```js
+function MoreRealisticComponent(props) {
+	const [selected, setSelected] = useState(null);
+
+	return (
+		<div>
+			<p>Selected {selected ? selected.name : 'nothing'}</p>
+
+			<ul>
+				{props.items.map(item =>
+					<li>
+						<button onClick={() => setSelected(item)}>
+							{item.name}
+						</button>
+					</li>
+				)}
+			</ul>
+		</div>
+	);
+}
+```
+
+Here, we're generating a new array of virtual `<li>` elements — each with their own inline event handler — on every state change, regardless of whether `props.items` has changed. Unless you're unhealthily obsessed with performance, you're not going to optimise that. There's no point. It's plenty fast enough. But you know what would be even faster? *Not doing that.*
+
+<aside><p><a href="https://reactjs.org/docs/hooks-intro.html">React Hooks</a> doubles down on defaulting to doing unnecessary work, with <a href="https://twitter.com/thekitze/status/1078582382201131008">predictable results</a>.</p></aside>
+
+The danger of defaulting to doing unnecessary work, even if that work is trivial, is that your app will eventually succumb to 'death by a thousand cuts' with no clear bottleneck to aim at once it's time to optimise.
+
+Svelte is explicitly designed to prevent you from ending up in that situation.
+
+
+## Why do frameworks use the virtual DOM then?
+
+It's important to understand that virtual DOM *isn't a feature*. It's a means to an end, the end being declarative, state-driven UI development. Virtual DOM is valuable because it allows you to build apps without thinking about state transitions, with performance that is *generally good enough*. That means less buggy code, and more time spent on creative tasks instead of tedious ones.
+
+But it turns out that we can achieve a similar programming model without using virtual DOM — and that's where Svelte comes in.
diff --git a/site/content/blog/2019-01-31-svelte-on-the-changelog.md b/site/content/blog/2019-01-31-svelte-on-the-changelog.md
new file mode 100644
index 0000000000..0b8e1894e4
--- /dev/null
+++ b/site/content/blog/2019-01-31-svelte-on-the-changelog.md
@@ -0,0 +1,21 @@
+---
+title: Svelte on The Changelog
+description: Listen to the interview here
+author: Rich Harris
+authorURL: https://twitter.com/Rich_Harris
+---
+
+Earlier this month, I had the privilege of appearing on [The Changelog](https://changelog.com/podcast), a podcast about software development. We had a fun (for me) and wide-ranging conversation:
+
+* life as a coder inside a newsroom
+* the big compilers-as-frameworks trend
+* scalability
+* the [Great Divide](https://css-tricks.com/the-great-divide/)
+
+...and, most importantly, Svelte 3.
+
+Unless you hang out in our [Discord server](chat) or follow [@sveltejs](https://twitter.com/sveltejs) on Twitter, you might not know that Svelte 3 is just around the corner, and it's going to be a huge release. We've rethought the developer experience from the ground up, and while it *will* be a nuisance if you need to upgrade a Svelte 2 app (more on that soon) we think you're going to love it.
+
+On the podcast [Adam](https://twitter.com/adamstac), [Jerod](https://twitter.com/jerodsanto) and I talk about some of the changes and why we're making them. You can listen here or on the [podcast page](https://changelog.com/podcast/332).
+
+<audio data-theme="night" style="width: 100%" data-src="https://changelog.com/podcast/332/embed" src="https://cdn.changelog.com/uploads/podcast/332/the-changelog-332.mp3" preload="none" class="changelog-episode" controls></audio><p><a href="https://changelog.com/podcast/332">The Changelog 332: A UI framework without the framework</a> – Listen on <a href="https://changelog.com/">Changelog.com</a></p><script async src="//cdn.changelog.com/embed.js"></script>
diff --git a/site/content/blog/2019-04-15-setting-up-your-editor.md b/site/content/blog/2019-04-15-setting-up-your-editor.md
new file mode 100644
index 0000000000..65d0234645
--- /dev/null
+++ b/site/content/blog/2019-04-15-setting-up-your-editor.md
@@ -0,0 +1,65 @@
+---
+title: Setting up your editor
+description: Instructions for configuring linting and syntax highlighting
+author: Rich Harris
+authorURL: https://twitter.com/Rich_Harris
+draft: true
+---
+
+*__Coming soon__*
+
+This post will walk you through setting up your editor so that it recognises Svelte files:
+
+* eslint-plugin-svelte3
+* svelte-vscode
+* associating .svelte files with HTML in VSCode, Sublime, etc.
+
+## Atom
+
+To treat `*.svelte` files as HTML, open *__Edit → Config...__* and add the following lines to your `core` section:
+
+```cson
+"*":
+  core:
+    …
+    customFileTypes:
+	    "text.html.basic": [
+        "svelte"
+      ]
+```
+
+## Vim/Neovim
+
+You can use the [coc-svelte extension](https://github.com/coc-extensions/coc-svelte) which utilises the official language-server.
+
+As an alternative you can treat all `*.svelte` files as HTML. Add the following line to your `init.vim`:
+
+```
+au! BufNewFile,BufRead *.svelte set ft=html
+```
+
+To temporarily turn on HTML syntax highlighting for the current buffer, use:
+
+```
+:set ft=html
+```
+
+To set the filetype for a single file, use a [modeline](https://vim.fandom.com/wiki/Modeline_magic):
+
+```
+<!-- vim: set ft=html :-->
+```
+
+## Visual Studio Code
+
+We recommend using the official [Svelte for VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## JetBrains WebStorm
+
+The [Svelte Framework Integration](https://plugins.jetbrains.com/plugin/12375-svelte/) can be used to add support for Svelte to WebStorm, or other Jetbrains IDEs. Consult the [WebStorm plugin installation guide](https://www.jetbrains.com/help/webstorm/managing-plugins.html) on the JetBrains website for more details.
+
+## Sublime Text 3
+
+Open any `.svelte` file.
+
+Go to *__View → Syntax → Open all with current extension as... → HTML__*.
diff --git a/site/content/blog/2019-04-16-svelte-for-new-developers.md b/site/content/blog/2019-04-16-svelte-for-new-developers.md
new file mode 100644
index 0000000000..0a01474bbd
--- /dev/null
+++ b/site/content/blog/2019-04-16-svelte-for-new-developers.md
@@ -0,0 +1,100 @@
+---
+title: Svelte for new developers
+description: Never used Node.js or the command line? No problem
+author: Rich Harris
+authorURL: https://twitter.com/Rich_Harris
+---
+
+This short guide is designed to help you — someone who has looked at the [tutorial](/tutorial) and wants to start creating Svelte apps, but doesn't have a ton of experience using JavaScript build tooling — get up and running.
+
+If there are things that don't make sense, or that we're glossing over, feel free to [raise an issue](https://github.com/sveltejs/svelte/issues) or [suggest edits to this page](https://github.com/sveltejs/svelte/blob/master/site/content/blog/2019-04-16-svelte-for-new-developers.md) that will help us help more people.
+
+If you get stuck at any point following this guide, the best place to ask for help is in the [chatroom](https://svelte.dev/chat).
+
+
+## First things first
+
+You'll be using the *command line*, also known as the terminal. On Windows, you can access it by running **Command Prompt** from the Start menu; on a Mac, hit `Cmd` and `Space` together to bring up **Spotlight**, then start typing `Terminal.app`. On most Linux systems, `Ctrl-Alt-T` brings up the command line.
+
+The command line is a way to interact with your computer (or another computer! but that's a topic for another time) with more power and control than the GUI (graphical user interface) that most people use day-to-day.
+
+Once on the command line, you can navigate the filesystem using `ls` (`dir` on Windows) to list the contents of your current directory, and `cd` to change the current directory. For example, if you had a `Development` directory of your projects inside your home directory, you would type
+
+```bash
+cd Development
+```
+
+to go to it. From there, you could create a new project directory with the `mkdir` command:
+
+```bash
+mkdir svelte-projects
+cd svelte-projects
+```
+
+A full introduction to the command line is out of the scope of this guide, but here are a few more useful commands:
+
+* `cd ..` — navigates to the parent of the current directory
+* `cat my-file.txt` — on Mac/Linux (`type my-file.txt` on Windows), lists the contents of `my-file.txt`
+* `open .` (or `start .` on Windows) — opens the current directory in Finder or File Explorer
+
+
+## Installing Node.js
+
+[Node](https://nodejs.org/en/) is a way to run JavaScript on the command line. It's used by many tools, including Svelte. If you don't yet have it installed, the easiest way is to download the latest version straight from the [website](https://nodejs.org/en/).
+
+Once installed, you'll have access to three new commands:
+
+* `node my-file.js` — runs the JavaScript in `my-file.js`
+* `npm [subcommand]` — [npm](https://www.npmjs.com/) is a way to install 'packages' that your application depends on, such as the [svelte](https://www.npmjs.com/package/svelte) package
+* `npx [subcommand]` — a convenient way to run programs available on npm without permanently installing them
+
+
+## Installing a text editor
+
+To write code, you need a good editor. The most popular choice is [Visual Studio Code](https://code.visualstudio.com/) or VSCode, and justifiably so — it's well-designed and fully-featured, and has a wealth of extensions ([including one for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), which provides syntax highlighting and diagnostic messages when you're writing components).
+
+
+## Creating a project
+
+We're going to use the [Svelte + Vite](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-svelte) template. You don't have to use a project template, but it means you have to do a lot less setup work.
+
+On the command line, navigate to where you want to create a new project, then type the following lines (you can paste the whole lot, but you'll develop better muscle memory if you get into the habit of writing each line out one at a time then running it):
+
+```bash
+npm init vite my-svelte-project -- --template svelte
+cd my-svelte-project
+npm install
+```
+
+> You can replace `--template svelte` with `--template svelte-ts`, if you prefer TypeScript.
+
+This creates a new directory, `my-svelte-project`, adds files from the [create-vite/template-svelte](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-svelte) template, and installs a number of packages from npm. Open the directory in your text editor and take a look around. The app's 'source code' lives in the `src` directory, while the files your app can load are in `public`.
+
+In the `package.json` file, there is a section called `"scripts"`. These scripts define shortcuts for working with your application — `dev`, `build` and `preview`. To launch your app in development mode, type the following:
+
+```bash
+npm run dev
+```
+
+Running the `dev` script starts a program called [Vite](https://vitejs.dev/). Vite's job is to take your application's source files, pass them to other programs (including Svelte, in our case) and convert them into the code that will actually run when you open the application in a browser.
+
+Speaking of which, open a browser and navigate to http://localhost:3000. This is your application running on a local *web server* (hence 'localhost') on port 3000.
+
+Try changing `src/App.svelte` and saving it. The application will update with your changes.
+
+
+## Building your app
+
+In the last step, we were running the app in 'development mode'. In dev mode, Svelte adds extra code that helps with debugging, and Vite skips the final step where your app's JavaScript is compressed.
+
+When you share your app with the world, you want to build it in 'production mode', so that it's as small and efficient as possible for end users. To do that, use the `build` command:
+
+```bash
+npm run build
+```
+
+Your `dist` directory now contains an optimised version of your app. You can run it like so:
+
+```bash
+npm run preview
+```
diff --git a/site/content/blog/2019-04-20-write-less-code.md b/site/content/blog/2019-04-20-write-less-code.md
new file mode 100644
index 0000000000..97e020af90
--- /dev/null
+++ b/site/content/blog/2019-04-20-write-less-code.md
@@ -0,0 +1,164 @@
+---
+title: Write less code
+description: The most important metric you're not paying attention to
+author: Rich Harris
+authorURL: https://twitter.com/Rich_Harris
+---
+
+All code is buggy. It stands to reason, therefore, that the more code you have to write the buggier your apps will be.
+
+Writing more code also takes more time, leaving less time for other things like optimisation, nice-to-have features, or being outdoors instead of hunched over a laptop.
+
+In fact it's widely acknowledged that [project development time](https://blog.codinghorror.com/diseconomies-of-scale-and-lines-of-code/) and [bug count](https://www.mayerdan.com/ruby/2012/11/11/bugs-per-line-of-code-ratio) grow *quadratically*, not linearly, with the size of a codebase. That tracks with our intuitions: a ten-line pull request will get a level of scrutiny rarely applied to a 100-line one. And once a given module becomes too big to fit on a single screen, the cognitive effort required to understand it increases significantly. We compensate by refactoring and adding comments — activities that almost always result in *more* code. It's a vicious cycle.
+
+Yet while we obsess — rightly! — over performance numbers, bundle size and anything else we can measure, we rarely pay attention to the amount of code we're writing.
+
+
+## Readability is important
+
+I'm certainly not claiming that we should use clever tricks to scrunch our code into the most compact form possible at the expense of readability. Nor am I claiming that reducing *lines* of code is necessarily a worthwhile goal, since it encourages turning readable code like this...
+
+```js
+for (let i = 0; i <= 100; i += 1) {
+	if (i % 2 === 0) {
+		console.log(`${i} is even`);
+	}
+}
+```
+
+...into something much harder to parse:
+
+```js
+for (let i = 0; i <= 100; i += 1) if (i % 2 === 0) console.log(`${i} is even`);
+```
+
+Instead, I'm claiming that we should favour languages and patterns that allow us to naturally write less code.
+
+
+## Yes, I'm talking about Svelte
+
+Reducing the amount of code you have to write is an explicit goal of Svelte. To illustrate, let's look at a very simple component implemented in React, Vue and Svelte. First, the Svelte version:
+
+<div class="max">
+	<iframe
+		title="Simple component example"
+		src="/repl/embed?example=blog-write-less-code"
+		scrolling="no"
+	></iframe>
+</div>
+
+How would we build this in React? It would probably look something like this:
+
+```js
+import React, { useState } from 'react';
+
+export default () => {
+	const [a, setA] = useState(1);
+	const [b, setB] = useState(2);
+
+	function handleChangeA(event) {
+		setA(+event.target.value);
+	}
+
+	function handleChangeB(event) {
+		setB(+event.target.value);
+	}
+
+	return (
+		<div>
+			<input type="number" value={a} onChange={handleChangeA}/>
+			<input type="number" value={b} onChange={handleChangeB}/>
+
+			<p>{a} + {b} = {a + b}</p>
+		</div>
+	);
+};
+```
+
+Here's an equivalent component in Vue:
+
+```html
+<template>
+	<div>
+		<input type="number" v-model.number="a">
+		<input type="number" v-model.number="b">
+
+		<p>{{a}} + {{b}} = {{a + b}}</p>
+	</div>
+</template>
+
+<script>
+	export default {
+		data: function() {
+			return {
+				a: 1,
+				b: 2
+			};
+		}
+	};
+</script>
+```
+
+<aside>
+	<p>I'm counting by copying the source code to the clipboard and running `pbpaste | wc -c` in my terminal</p>
+</aside>
+
+In other words, it takes 442 characters in React, and 263 characters in Vue, to achieve something that takes 145 characters in Svelte. The React version is literally three times larger!
+
+It's unusual for the difference to be *quite* so obvious — in my experience, a React component is typically around 40% larger than its Svelte equivalent. Let's look at the features of Svelte's design that enable you to express ideas more concisely:
+
+
+### Top-level elements
+
+In Svelte, a component can have as many top-level elements as you like. In React and Vue, a component must have a single top-level element — in React's case, trying to return two top-level elements from a component function would result in syntactically invalid code. (You can use a fragment — `<>` — instead of a `<div>`, but it's the same basic idea, and still results in an extra level of indentation).
+
+In Vue, your markup must be wrapped in a `<template>` element, which I'd argue is redundant.
+
+
+### Bindings
+
+In React, we have to respond to input events ourselves:
+
+```js
+function handleChangeA(event) {
+	setA(+event.target.value);
+}
+```
+
+This isn't just boring plumbing that takes up extra space on the screen, it's also extra surface area for bugs. Conceptually, the value of the input is bound to the value of `a` and vice versa, but that relationship isn't cleanly expressed — instead we have two tightly-coupled but physically separate chunks of code (the event handler and the `value={a}` prop). Not only that, but we have to remember to coerce the string value with the `+` operator, otherwise `2 + 2` will equal `22` instead of `4`.
+
+Like Svelte, Vue does have a way of expressing the binding — the `v-model` attribute, though again we have to be careful to use `v-model.number` even though it's a numeric input.
+
+
+### State
+
+In Svelte, you update local component state with an assignment operator:
+
+```js
+let count = 0;
+
+function increment() {
+	count += 1;
+}
+```
+
+In React, we use the `useState` hook:
+
+```js
+const [count, setCount] = useState(0);
+
+function increment() {
+	setCount(count + 1);
+}
+```
+
+This is much *noisier* — it expresses the exact same concept but with over 60% more characters. As you're reading the code, you have to do that much more work to understand the author's intent.
+
+In Vue, meanwhile, we have a default export with a `data` function that returns an object literal with properties corresponding to our local state. Things like helper functions and child components can't simply be imported and used in the template, but must instead be 'registered' by attaching them to the correct part of the default export.
+
+
+## Death to boilerplate
+
+These are just some of the ways that Svelte helps you build user interfaces with a minimum of fuss. There are plenty of others — for example, [reactive declarations](/tutorial/reactive-declarations) essentially do the work of React's `useMemo`, `useCallback` and `useEffect` without the boilerplate (or indeed the garbage collection overhead of creating inline functions and arrays on each state change).
+
+How? By choosing a different set of constraints. Because [Svelte is a compiler](/blog/frameworks-without-the-framework), we're not bound to the peculiarities of JavaScript: we can *design* a component authoring experience, rather than having to fit it around the semantics of the language. Paradoxically, this results in *more* idiomatic code — for example using variables naturally rather than via proxies or hooks — while delivering significantly more performant apps.
diff --git a/site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md b/site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
new file mode 100644
index 0000000000..672fe1b777
--- /dev/null
+++ b/site/content/blog/2019-04-22-svelte-3-rethinking-reactivity.md
@@ -0,0 +1,97 @@
+---
+title: "Svelte 3: Rethinking reactivity"
+description: It's finally here
+author: Rich Harris
+authorURL: https://twitter.com/Rich_Harris
+---
+
+After several months of being just days away, we are over the moon to announce the stable release of Svelte 3. This is a huge release representing hundreds of hours of work by many people in the Svelte community, including invaluable feedback from beta testers who have helped shape the design every step of the way.
+
+We think you're going to love it.
+
+
+## What is Svelte?
+
+Svelte is a component framework — like React or Vue — but with an important difference. Traditional frameworks allow you to write *declarative* state-driven code, but there's a penalty: the browser must do extra work to convert those declarative structures into DOM operations, using techniques like [virtual DOM diffing](/blog/virtual-dom-is-pure-overhead) that eat into your frame budget and tax the garbage collector.
+
+Instead, Svelte runs at *build time*, converting your components into highly efficient *imperative* code that surgically updates the DOM. As a result, you're able to write ambitious applications with excellent performance characteristics.
+
+The first version of Svelte was all about [testing a hypothesis](/blog/frameworks-without-the-framework) — that a purpose-built compiler could generate rock-solid code that delivered a great user experience. The second was a small upgrade that tidied things up a bit.
+
+Version 3 is a significant overhaul. Our focus for the last five or six months has been on delivering an outstanding *developer* experience. It's now possible to write components with [significantly less boilerplate](/blog/write-less-code) than you'll find elsewhere. Try the brand new [tutorial](/tutorial) and see what we mean — if you're familiar with other frameworks we think you'll be pleasantly surprised.
+
+To make that possible we first needed to rethink the concept at the heart of modern UI frameworks: reactivity.
+
+<div class="max">
+<figure style="max-width: 960px; margin: 0 auto">
+<div style="height: 0; padding: 0 0 57.1% 0; position: relative; margin: 0 auto;">
+	<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/AdNJ3fydeao" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+<figcaption>'Rethinking Reactivity' from <a href="https://www.israel.yglfconf.com/">You Gotta Love Frontend Code Camp</a></figcaption>
+</figure>
+</div>
+
+
+## Moving reactivity into the language
+
+In old Svelte, you would tell the computer that some state had changed by calling the `this.set` method:
+
+```js
+const { count } = this.get();
+this.set({
+	count: count + 1
+});
+```
+
+That would cause the component to *react*. Speaking of which, `this.set` is almost identical to the `this.setState` method used in classical (pre-hooks) React:
+
+```js
+const { count } = this.state;
+this.setState({
+	count: count + 1
+});
+```
+
+There are some important technical differences (as I explain in the video above, React is not reactive) but conceptually it's the same thing.
+
+<aside>
+	<p>In fact, Svelte 3 is basically <a href="https://twitter.com/threepointone/status/1057179801109311488">Sunil's fault</a>.</p>
+</aside>
+
+That all changed with the advent of [hooks](https://reactjs.org/docs/hooks-intro.html), which handle state in a very different fashion. Many frameworks started experimenting with their own implementations of hooks, but we quickly concluded it wasn't a direction we wanted to go in. Hooks have some intriguing properties, but they also involve some unnatural code and create unnecessary work for the garbage collector. For a framework that's used in [embedded devices](https://mobile.twitter.com/sveltejs/status/1088500539640418304) as well as animation-heavy interactives, that's no good.
+
+So we took a step back and asked ourselves what kind of API would work for us... and realised that the best API is no API at all. We can just *use the language*. Updating some `count` value — and all the things that depend on it — should be as simple as this:
+
+```js
+count += 1;
+```
+
+Since we're a compiler, we can do that by instrumenting assignments behind the scenes:
+
+```js
+count += 1; $$invalidate('count', count);
+```
+
+Importantly, we can do all this without the overhead and complexity of using proxies or accessors. It's just a variable.
+
+
+## New look
+
+Your components aren't the only thing that's getting a facelift. Svelte itself has a completely new look and feel, thanks to the amazing design work of [Achim Vedam](https://vedam.de/) who created our new logo and website, which has moved from [svelte.technology](https://svelte.technology) to [svelte.dev](https://svelte.dev).
+
+We've also changed our tagline, from 'The magical disappearing UI framework' to 'Cybernetically enhanced web apps'. Svelte has many aspects — outstanding performance, small bundles, accessibility, built-in style encapsulation, declarative transitions, ease of use, the fact that it's a compiler, etc — that focusing on any one of them feels like an injustice to the others. 'Cybernetically enhanced' is designed to instead evoke Svelte's overarching philosophy that our tools should work as intelligent extensions of ourselves — hopefully with a retro, William Gibson-esque twist.
+
+
+## Upgrading from version 2
+
+If you're an existing Svelte 2 user, I'm afraid there is going to be some manual upgrading involved. In the coming days we'll release a migration guide and an updated version of [svelte-upgrade](https://github.com/sveltejs/svelte-upgrade) which will do the best it can to automate the process, but this *is* a significant change and not everything can be handled automatically.
+
+We don't take this lightly: hopefully once you've experienced Svelte 3 you'll understand why we felt it was necessary to break with the past.
+
+
+## Still to come
+
+As grueling as this release has been, we're nowhere near finished. We have a ton of ideas for generating smarter, more compact code, and a long feature wish-list. [Sapper](https://sapper.svelte.dev), our Next.js-style app framework, is still in the middle of being updated to use Svelte 3. The [Svelte Native](https://svelte-native.technology/) community project, which allows you to write Android and iOS apps in Svelte, is making solid progress but deserves more complete support from core. We don't yet have the bounty of editor extensions, syntax highlighters, component kits, devtools and so on that other frameworks have, and we should fix that. We *really* want to add first-class TypeScript support.
+
+But in the meantime we think Svelte 3 is the best way to build web apps yet. Take an hour to go through the [tutorial](/tutorial) and we hope to convince you of the same. Either way, we'd love to see you in our [Discord chatroom](https://svelte.dev/chat) and on [GitHub](https://github.com/sveltejs/svelte) — everyone is welcome, especially you.
diff --git a/site/content/blog/2020-07-17-svelte-and-typescript.md b/site/content/blog/2020-07-17-svelte-and-typescript.md
new file mode 100644
index 0000000000..aaedd6da96
--- /dev/null
+++ b/site/content/blog/2020-07-17-svelte-and-typescript.md
@@ -0,0 +1,141 @@
+---
+title: Svelte <3 TypeScript
+description: Typernetically enhanced web apps
+author: Orta Therox
+authorURL: https://twitter.com/orta
+---
+
+It's been by far the most requested feature for a while, and it's finally here: Svelte officially supports TypeScript.
+
+We think it'll give you a much nicer development experience — one that also scales beautifully to larger Svelte code bases — regardless of whether you use TypeScript or JavaScript.
+
+<figure>
+	<img alt="Screenshot of TypeScript in Svelte" src="/media/svelte-ts.png">
+	<figcaption>Image of TypeScript + Svelte in VS Code (theme is <a href="https://marketplace.visualstudio.com/items?itemName=karyfoundation.theme-karyfoundation-themes">Kary Pro</a>.)</figcaption>
+</figure>
+
+
+## Try it now
+
+You can start a new Svelte TypeScript project using the [normal template](https://github.com/sveltejs/template) and by running `node scripts/setupTypeScript.js` before you do anything else:
+
+```bash
+npx degit sveltejs/template svelte-typescript-app
+cd svelte-typescript-app
+node scripts/setupTypeScript.js
+```
+
+If you're a VS Code user, make sure you're using the (new) [official extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), which replaces the popular extension by James Birtles.
+Later in this blog post, we'll detail the individual steps involved in using TypeScript in an existing Svelte project.
+
+## What does it mean to support TypeScript in Svelte?
+
+TypeScript support in Svelte has been possible for a long time, but you had to mix a lot of disparate tools together and each project ran independently. Today, nearly all of these tools live under the Svelte organization and are maintained by a set of people who take responsibility over the whole pipeline and have common goals.
+
+A week before COVID was declared a pandemic, [I pitched a consolidation](https://github.com/sveltejs/svelte/issues/4518) of the best Svelte tools and ideas from similar dev-ecosystems and provided a set of steps to get first class TypeScript support. Since then, many people have pitched in and written the code to get us there.
+
+When we say that Svelte now supports TypeScript, we mean a few different things:
+
+* You can use TypeScript inside your `<script>` blocks — just add the `lang="ts"` attribute
+* Components with TypeScript can be type-checked with the `svelte-check` command
+* You get autocompletion hints and type-checking as you're writing components, even in expressions inside markup
+* TypeScript files understand the Svelte component API — no more red squiggles when you import a `.svelte` file into a `.ts` module
+
+### How does it work?
+
+To understand the two main parts of TypeScript support, we'll compare it to the technique TypeScript uses to provide dev tools. There is a compiler `tsc` which you run on the command-line to convert `*.ts` to `*.js`, then there is a `TSServer` which is a node API that responds to requests from text editors. The `TSServer` is what provides all the JavaScript and TypeScript realtime introspection for editors while coding, and it has most of the compiler's code inside it.
+
+For Svelte, we have the Svelte compiler, and now we have the [`svelte-language-server`](https://github.com/sveltejs/language-tools/tree/master/packages/language-server#svelte-language-server) which responds to text editor calls via the [Language Server Protocol standard](https://microsoft.github.io//language-server-protocol/overviews/lsp/overview/). First class TypeScript support means that _both_ of these two systems do a good job of handling TypeScript code.
+
+The Svelte compiler support for TypeScript is handled by [Christian Kaisermann](https://github.com/kaisermann)'s [`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess#svelte-preprocess) which is now an official Svelte project.
+
+For the editor level, we took inspiration from [Pine's](https://github.com/octref) work in the [Vue](https://vuejs.org) ecosystem via [Vetur](https://github.com/vuejs/vetur). Vetur provides an [LSP](https://github.com/vuejs/vetur/blob/master/server), a VS Code extension and a [CLI](https://github.com/vuejs/vetur/blob/master/vti). Svelte now also has an [LSP](https://github.com/sveltejs/language-tools/blob/master/packages/language-server), a [VS Code extension](https://github.com/sveltejs/language-tools/blob/master/packages/svelte-vscode) and a [CLI](https://github.com/sveltejs/language-tools/blob/master/packages/svelte-check).
+
+
+### `*.svelte` Introspection
+
+For the official Svelte VS Code extension, we built off the foundations which [James Birtles](https://github.com/UnwrittenFun) has created in [`UnwrittenFun/svelte-vscode`](https://github.com/UnwrittenFun/svelte-vscode) and [`UnwrittenFun/svelte-language-server`](https://github.com/UnwrittenFun/svelte-language-server/).
+
+[Simon Holthausen](https://github.com/dummdidumm) and [Lyu, Wei-Da](https://github.com/jasonlyu123) have done great work improving the JavaScript and TypeScript introspection, including integrating [@halfnelson](https://github.com/halfnelson)'s [svelte2tsx](https://github.com/sveltejs/language-tools/tree/master/packages/svelte2tsx#svelte2tsx) which powers understanding the props on components in your codebase.
+
+
+## Adding TypeScript to an existing project
+
+Before getting started, add the dependencies:
+
+```bash
+npm install --save-dev @tsconfig/svelte typescript svelte-preprocess svelte-check
+```
+
+### 1. Compiling TypeScript
+
+You first need to set up [`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess#svelte-preprocess), which passes the contents of your `<script lang="ts">` blocks through the TypeScript compiler.
+
+In a Rollup project, that would look like this — note that we also need to install `@rollup/plugin-typescript` so that Rollup can handle `.ts` files:
+
+```diff
++ import autoPreprocess from 'svelte-preprocess';
++ import typescript from '@rollup/plugin-typescript';
+
+export default {
+  ...,
+  plugins: [
+    svelte({
++       preprocess: autoPreprocess()
+    }),
++   typescript({ sourceMap: !production })
+  ]
+}
+```
+
+[Full instructions for other environments here](https://github.com/sveltejs/svelte-preprocess#usage).
+
+To configure TypeScript, you will need to create a `tsconfig.json` in the root of your project:
+
+```json
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "include": ["src/**/*", "src/node_modules"],
+  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
+}
+```
+
+Your `include`/`exclude` may differ per project — these are defaults that should work across most Svelte projects.
+
+### 2. Editor Support
+
+Any editor [using an LSP](https://langserver.org/#implementations-client) can be supported. The [VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) extension has been our primary focus, but there is work in progress [on Atom](https://github.com/sveltejs/language-tools/pull/160), and Vim via [coc-svelte](https://github.com/coc-extensions/coc-svelte) has been updated with the latest LSP.
+
+These editor extensions will improve your coding experience even if you only use JavaScript. The editor won't offer errors, but it will offer inference and refactoring tools. You can [add `// @ts-check`](https://www.staging-typescript.org/docs/handbook/intro-to-js-ts.html) to the top of a `<script>` tag using JavaScript to get better error messages with no infra changes.
+
+To switch a `<script>` to use TypeScript, use `<script lang="ts">` and that should be it. Hopefully you won't be seeing an ocean of red squiggles.
+
+### 3. CI Checks
+
+Having red squiggles is great, well, kinda. On the long run though, you want to be able to verify that there are no errors in your code. To verify your project is error free, you can use the CLI tool [`svelte-check`](https://www.npmjs.com/package/svelte-check). It acts like an editor asking for errors against all of your `.svelte` files.
+
+You can add the dependency to your project and then add it to CI.
+
+```bash
+❯ npx svelte-check
+
+Loading svelte-check in workspace: /Users/ortatherox/dev/svelte/example-app
+Getting Svelte diagnostics...
+====================================
+
+/Users/ortatherox/dev/svelte/example-app/src/App.svelte:3:2
+Error: Type '123' is not assignable to type 'string'. (ts)
+
+====================================
+svelte-check found 1 error
+error Command failed with exit code 1.
+```
+
+## What about TypeScript in Sapper projects?
+
+TypeScript support was added to Sapper in 0.28, so if you're using an older version be sure to [upgrade](https://sapper.svelte.dev/migrating#0_27_to_0_28).
+
+## How can I contribute?
+
+We're so glad you asked. The work is happening in the [sveltejs/language-tools](https://github.com/sveltejs/language-tools) repo and in the [#language-tools](https://discord.gg/enV6v8K) channel in the Svelte Discord. If you'd like to report issues, submit fixes, or help out with extensions for new editors and so on, that's where you can find us. See you there!
diff --git a/site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md b/site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md
new file mode 100644
index 0000000000..ba2ee80caf
--- /dev/null
+++ b/site/content/blog/2020-10-01-whats-new-in-svelte-october-2020.md
@@ -0,0 +1,85 @@
+---
+title: "What's new in Svelte: October 2020"
+description: New object methods, in-depth learning resources and tons of integration examples!
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+Welcome to the first edition of our "What's new in Svelte" series! We'll try to make this a monthly blog post in which you'll find out about new features, bug fixes, and a showcase of Svelte projects from around the community.
+
+## New features
+1. `use:obj.method` allows functions defined within objects to be used within actions ([Example](https://svelte.dev/repl/c305722adb4a4545b27b198ea8ff9bde?version=3.27.0), **3.26.0**, warning removed in **3.27.0**)
+2. `_` is now supported as a "numerical separator", similar to a `.` or `,` ([Example](https://svelte.dev/repl/844c39e91d1248649fe54af839fab570?version=3.26.0), **3.26.0**)
+3. `import.meta` now works in template expressions ([Example](https://svelte.dev/repl/9630de41957a4c80a4fce264360a6bc7?version=3.26.0), **3.26.0**)
+4. CSS Selectors with `~` and `+` combinators are now supported ([Example](https://svelte.dev/repl/91ad9257d2d1430185a504a18cc60172?version=3.29.0), **3.27.0**, with a compiler fix in **3.29.0**)
+5. The `{#key}` block is now available to key arbitrary content on an expression. Whever the expression changes, the contents inside the `{#key}` block will be destroyed and recreated. For an in-depth explanation and to find out how it's implemented, check out the [new blog post](https://lihautan.com/contributing-to-svelte-implement-key-block/) of Svelte Team member Tan Li Hau. ([More info](https://github.com/sveltejs/svelte/issues/1469), **3.29.0**)
+6. Slots can now be forwarded through child components! This used to only be possible by adding extra wrapper `<div>`s ([More info](https://github.com/sveltejs/svelte/issues/2079), **3.29.0**)
+7. When using TypeScript, you can now type the `createEventDispatcher` method:
+```html
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+
+    const dispatch = createEventDispatcher<{
+        /**
+         * you can also add docs
+         */
+        checked: boolean; // Will translate to `CustomEvent<boolean>`
+        hello: string;
+    }>();
+
+    // ...
+</script>
+```
+This will make sure that you can invoke dispatch only with the specified event names and its types. The Svelte for VS Code extension was also updated to deal with this new feature. It will provide strong typings for these events as well as autocompletion and hover information.
+
+**New from Sapper!**
+Sapper 0.28.9 just came out. The highlights from it include much better support for CSP nonces, asset preload support for exported pages, and error details are now available in the `$page` store on error pages.
+
+In addition, Sapper's CSS handling has been rewritten over the course of recent releases in order to fix existing CSS handling bugs, refactor the CSS handling to occur entirely within a Rollup plugin, and remove the need internally to register CSS in the routing system. Congrats and thank you to the folks working on Sapper for all their solid work!
+
+
+## Impactful bug fixes
+- CSS compilation will no longer remove rules for the `open` attribute on `<details>` elements ([Example](https://svelte.dev/repl/ab4c0c177d1f4fab92f46eb8539cea9a?version=3.26.0), **3.26.0**)
+- `prettier-plugin-svelte` will do a better job now at dealing with whitespaces, especially around inline elements. It will also preserve formatting inside `<pre>` tags and will no longer format languages which are not supported by Prettier, like SASS, Pug or Stylus.
+
+
+## Coming up
+- [Svelte Summit](https://sveltesummit.com/), Svelte's second global online conference, is taking place on October 18! Sign up for free to get reminders and talk updates!
+
+For all the features and bugfixes see the CHANGELOG for [Svelte](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) and [Sapper](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md).
+
+
+---
+
+## Svelte Showcase
+- [This CustomMenu example](https://svelte.dev/repl/3a33725c3adb4f57b46b597f9dade0c1?version=3.25.0) demos how to replace the OS right-click menu
+- [Github Tetris](https://svelte.dev/repl/cc1eaa7c66964fedb5e70e3ecbbaa0e1?version=3.25.1) lets you play a Tetris-like game in a git commit history
+- [Who are my representatives?](https://whoaremyrepresentatives.us/) is a website built with Svelte to help US residents get more info on their congressional representatives
+- [Pick Palette](https://github.com/bluwy/pick-palette) is a color palette manager made with Svelte!
+
+### In-depth learning:
+- [Svelte 3 Up and Running](https://www.amazon.com/dp/B08D6T6BKS/ref=cm_sw_r_tw_dp_x_OQMtFb3GPQCB2) is a new book about building production-ready static web apps with Svelte 3
+- [Sapper Tutorial (Crash Course)](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gdr4Qhx83gBBcID-KMe-PQ) walks through the ins-and-outs of Sapper, the Svelte-powered application framework
+- [Svelte Society Day France](https://france.sveltesociety.dev/) happened September 27th featuring a wide variety of topics all in French! You can find the full recording [here](https://www.youtube.com/watch?v=aS1TQ155JK4).
+
+### Plug-and-play components:
+- [svelte-zoom](https://github.com/vaheqelyan/svelte-zoom) brings "nearly native" pan-and-zoom to images on desktop and mobile
+- [svelte-materialify](https://github.com/TheComputerM/svelte-materialify) is a Material component library for Svelte with over 50 components
+- [svelte-undoable](https://github.com/macfja/svelte-undoable) makes it easy to introduce undo and redo functionality using `bind:`
+- [This Tilt component](https://svelte.dev/repl/7b23ad9d2693424482cd411b0378b55b?version=3.24.1) implements a common UX pattern where the hovered element tilts to follow the mouse
+
+### Lots of examples of how use JS tech came out this month:
+  - [Sapper with PostCSS and Tailwind](https://codechips.me/sapper-with-postcss-and-tailwind/)
+  - [PrismJS (Code block syntax highlighting)](https://github.com/phptuts/Svelte-PrismJS)
+  - [Filepond (Drag-and-drop file upload)](https://github.com/pqina/svelte-filepond)
+  - [Ionic (UI Components)](https://github.com/Tommertom/svelte-ionic-app)
+  - [Pell (WYSIWYG Editor)](https://github.com/Demonicious/svelte-pell/)
+  - [Leaflet (Mapping)](https://github.com/anoram/leaflet-svelte)
+
+**Reminder**: There's a [Svelte integrations repo](https://github.com/sveltejs/integrations) that demonstrates ways to incorporate Svelte into your stack (and vice versa). If you've got questions on how to use a particular piece of tech with Svelte, you may find your answer there... and if you've gotten something to work with Svelte, consider contributing!
+
+For more amazing Svelte projects, check out the [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs)… and be sure to post your own!
+
+## See you next month!
+
+By the way, Svelte now has an [OpenCollective](https://opencollective.com/svelte)! All contributions and all expenses are published in our transparent public ledger. Learn who is donating, how much, where that money is going, submit expenses, get reimbursed and more!
diff --git a/site/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md b/site/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md
new file mode 100644
index 0000000000..99de2dd332
--- /dev/null
+++ b/site/content/blog/2020-11-01-whats-new-in-svelte-november-2020.md
@@ -0,0 +1,46 @@
+---
+title: "What's new in Svelte: November 2020"
+description: Slot forwarding fixes, SvelteKit for faster local development, and more from Svelte Summit
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+Welcome back to the "What's new in Svelte" series! This month, we're covering new features & bug fixes, last month's Svelte Summit and some stand-out sites and libraries...
+
+## New features & impactful bug fixes
+
+1. Destructuring Promises now works as expected by using the `{#await}` syntax
+ (**3.29.3**, [Example](https://svelte.dev/repl/3fd4e2cecfa14d629961478f1dac2445?version=3.29.3))
+2. Slot forwarding (released in 3.29.0) should no longer hang during compilation (**3.29.3**, [Example](https://svelte.dev/repl/29959e70103f4868a6525c0734934936?version=3.29.3))
+3. Better typings for the `get` function in `svelte/store` and on lifecycle hooks (**3.29.1**)
+
+**What's going on in Sapper?**
+
+Sapper got some new types in its `preload` function, which will make typing easier if you are using TypeScript. See the [Sapper docs](https://sapper.svelte.dev/docs#Typing_the_function) on how to use them. There also were fixes to `preload` links in exported sites. Route layouts got a few fixes too - including ensuring CSS is applied to nested route layouts. You can also better organize your files now that extensions with multiple dots are supported. (**0.28.10**)
+
+
+For all the features and bugfixes see the CHANGELOGs for [Svelte](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) and [Sapper](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md).
+
+
+## [Svelte Summit](https://sveltesummit.com/) was Svelte-tacular!
+- Rich Harris demoed the possible future of Svelte development in a talk titled "Futuristic Web Development". The not-yet-public project is called SvelteKit (name may change) and will bring a first-class developer experience and more flexibility for build outputs. If you want to get the full sneak-peek, [check out the video](https://www.youtube.com/watch?v=qSfdtmcZ4d0).
+- 17 speakers made the best of the conference's virtual format... From floating heads to seamless demos, Svelte developers from every skill level will find something of interest in this year's [YouTube playlist](https://www.youtube.com/playlist?list=PL8bMgX1kyZThM1sbYCoWdTcpiYysJsSeu)
+
+---
+
+## Community Showcase
+- [Svelte Lab](https://sveltelab.app/) showcases a variety of components, visualizations and interactions that can be achieved in Svelte. You can click into any component to see its source or edit it, using the site's built-in REPL
+- [svelte-electron-boilerplate](https://github.com/hjalmar/svelte-electron-boilerplate) is a fast way to get up and running with a Svelte app built in the desktop javascript framework, Electron
+- [React Hooks in Svelte](https://github.com/joshnuss/react-hooks-in-svelte) showcases examples of common React Hooks ported to Svelte.
+- [gurlic](https://gurlic.com/) is a social network and internet experiment that is super snappy thanks to Svelte
+- [Interference 2020](https://interference2020.org/) visualizes reported foreign interference in the 2020 U.S. elections. You can learn more about how it was built in [YYY's talk at Svelte Summit]()
+- [jitsi-svelte](https://github.com/relm-us/jitsi-svelte) lets you easily create your own custom Jitsi client by providing out-of-the-box components built with Svelte
+- [Ellx](https://ellx.io/) is part spreadsheet, part notebook and part IDE. It's super smooth thanks to Svelte 😎
+- [This New Zealand news site](https://www.nzherald.co.nz/nz/election-2020-latest-results-party-vote-electorate-vote-and-full-data/5CFVO4ENKNQDE3SICRRNPU5GZM/) breaks down the results of the 2020 Parliamentary elections using Svelte
+- [Budibase](https://github.com/Budibase/budibase) is a no-code app builder, powered by Svelte
+- [Svelt-yjs](https://github.com/relm-us/svelt-yjs) combines the collaborative, local-first technology of Yjs with the power of Svelte to enable multiple users across the internet to stay in sync.
+- [tabler-icons-svelte](https://github.com/benflap/tabler-icons-svelte) is a Svelte wrapper for over 850 free MIT-licensed high-quality SVG icons for you to use in your web projects.
+
+## See you next month!
+
+Got an idea for something to add to the Showcase? Want to get involved more with Svelte? We're always looking for maintainers, contributors and fanatics... Check out the [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs) to get involved!
diff --git a/site/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md b/site/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md
new file mode 100644
index 0000000000..26cfe979a0
--- /dev/null
+++ b/site/content/blog/2020-11-05-whats-the-deal-with-sveltekit.md
@@ -0,0 +1,103 @@
+---
+title: What's the deal with SvelteKit?
+description: We're rethinking how to build Svelte apps. Here's what you need to know
+author: Rich Harris
+authorURL: https://twitter.com/rich_harris
+---
+
+<aside><p>If you <em>didn't</em> attend Svelte Summit, you can catch up on the <a href="https://www.youtube.com/c/SvelteSociety/videos">Svelte Society YouTube page</a></p></aside>
+
+If you attended [Svelte Summit](https://sveltesummit.com/) last month you may have seen my talk, Futuristic Web Development, in which I finally tackled one of the most frequently asked questions about Svelte: when will Sapper reach version 1.0?
+
+The answer: never.
+
+This was slightly tongue-in-cheek — as the talk explains, it's really more of a rewrite of Sapper coupled with a rebrand — but it raised a lot of new questions from the community, and it's time we offered a bit more clarity on what you can expect from Sapper's successor, SvelteKit.
+
+<div class="max">
+<figure style="max-width: 960px; margin: 0 auto">
+<div style="height: 0; padding: 0 0 57.1% 0; position: relative; margin: 0 auto;">
+	<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0;" src="https://www.youtube-nocookie.com/embed/qSfdtmcZ4d0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+<figcaption>'Futuristic Web Development' from <a href="https://sveltesummit.com/">Svelte Summit</a></figcaption>
+</figure>
+</div>
+
+
+## What's Sapper?
+
+[Sapper](https://sapper.svelte.dev) is an *app framework* (or 'metaframework') built on top of Svelte (which is a *component* framework). Its job is to make it easy to build Svelte apps with all the modern best practices like server-side rendering (SSR) and code-splitting, and to provide a project structure that makes development productive and fun. It uses *filesystem-based routing* (as popularised by [Next](https://nextjs.org/) and adopted by many other frameworks, albeit with some enhancements) — your project's file structure mirrors the structure of the app itself.
+
+While the Svelte homepage and documentation encourages you to [degit](https://github.com/Rich-Harris/degit) the [sveltejs/template](https://github.com/sveltejs/template) repo to start building an app, Sapper has long been our recommended way to build apps; this very blog post is (at the time of writing!) rendered with Sapper.
+
+
+## Why are we migrating to something new?
+
+Firstly, the distinction between [sveltejs/template](https://github.com/sveltejs/template) and [sveltejs/sapper-template](https://github.com/sveltejs/sapper-template) is confusing, particularly to newcomers to Svelte. Having a single recommended way to start building apps with Svelte will bring enormous benefits: we simplify onboarding, reduce the maintenance and support burden, and can potentially begin to explore the new possibilities that are unlocked by having a predictable project structure. (This last part is deliberately vague because it will take time to fully understand what those possibilities are.)
+
+Aside from all that, we've been tempted by the thought of rewriting Sapper for a while. This is partly because the codebase has become a little unkempt over the years ([Sapper started in 2017](/blog/sapper-towards-the-ideal-web-app-framework)), but mostly because the web has changed a lot recently, and it's time to rethink some of our foundational assumptions.
+
+
+## How is this new thing different?
+
+The first of those foundational assumptions is that you need to use a module bundler like [webpack](https://webpack.js.org/) or [Rollup](https://rollupjs.org/) to build apps. These tools trace the dependency graph of your application, analysing and transforming code along the way (turning Svelte components to JS modules, for example), in order to create bundles of code that can run anywhere. As the original creator of Rollup, I can attest that it is a surprisingly complex problem with fiendish edge cases.
+
+You certainly needed a bundler several years ago, because browsers didn't natively support the `import` keyword, but it's much less true today. Right now, we're seeing the rise of the *unbundled development* workflow, which is radically simpler: instead of eagerly bundling your app, a dev server can serve modules (converted to JavaScript, if necessary) *on-demand*, meaning startup is essentially instantaneous however large your app becomes.
+
+[Snowpack](https://www.snowpack.dev/) is at the vanguard of this movement, and it's what powers SvelteKit. It's astonishingly fast, and has a beautiful development experience (hot module reloading, error overlays and so on), and we've been working closely with the Snowpack team on features like SSR. The hot module reloading is particularly revelatory if you're used to using Sapper with Rollup (which has never had first-class HMR support owing to its architecture, which prioritises the most efficient output).
+
+That's not to say we're abandoning bundlers altogether. It's still essential to optimise your app for production, and SvelteKit uses Rollup to make your apps as fast and lean as they possibly can be (which includes things like extracting styles into static `.css` files).
+
+The other foundational assumption is that a server-rendered app needs, well, a server. Sapper effectively has two modes — `sapper build`, which creates a standalone app that has to run on a Node server, and `sapper export` which bakes your app out as a collection of static files suitable for hosting on services like GitHub Pages.
+
+Static files can go pretty much anywhere, but running a Node server (and monitoring/scaling it etc) is less straightforward. Nowadays we're witnessing a shift towards *serverless platforms*, in which you as the app author don't need to think about the server your code is running on, with all the attendant complexity. You can get Sapper apps running on serverless platforms, thanks to things like [vercel-sapper](https://github.com/thgh/vercel-sapper), but it's certainly not what you'd call idiomatic.
+
+<aside><p>It'll still be possible to create both Node apps and fully pre-rendered (aka exported) sites</a></p></aside>
+
+SvelteKit fully embraces the serverless paradigm, and will launch with support for all the major serverless providers, with an 'adapter' API for targeting any platforms that we don't officially cater to. In addition, we'll be able to do partial pre-rendering, which means that static pages can be generated at build time but dynamic ones get rendered on-demand.
+
+
+## When can I start using it?
+
+If you're feeling brave, you can start right now:
+
+```bash
+npm init svelte@next
+```
+
+This will scaffold a new project and install the `@sveltejs/kit` CLI, which provides the tools for developing and building an app.
+
+We don't recommend it though! There are no docs, and we won't be able to offer any form of support. It's also likely to break often.
+
+The work is being done in a private monorepo while we're still in exploration mode. Our plan is to get a public beta ready and announce it here once we've closed a few issues — the repo itself will remain private at that time, but we'll create a place to collect feedback from the YOLO crowd. After that, we'll work towards a 1.0 release which will involve opening the repo up.
+
+I'm not going to make any firm promises about timings, because I don't like to break promises. But I *think* we're talking about weeks rather than months.
+
+
+## What if I don't want to use SvelteKit?
+
+You won't have to — it will always be possible to use Svelte as a standalone package or via a bundler integration like [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte). We think it's essential that you can bend Svelte to fit your workflow, however esoteric, and use third-party app frameworks like [Elder.js](https://github.com/Elderjs/elderjs), [Routify](https://routify.dev/), [Plenti](https://plenti.co/), [Crown](https://crownframework.com/), [JungleJS](https://www.junglejs.org/) and others.
+
+
+## TypeScript?
+
+Don't worry, we won't launch without full TypeScript support.
+
+
+## How can I migrate my existing Sapper apps?
+
+For the most part, it should be relatively straightforward to migrate a Sapper codebase.
+
+There are some unavoidable changes (being able to run on serverless platforms means we need to replace custom `server.js` files and `(req, res) => {...}` functions with more portable equivalents), and we're taking the opportunity to fix a few design flaws, but on the whole a SvelteKit app will feel very familiar to Sapper users.
+
+Detailed migration guides will accompany the 1.0 launch.
+
+
+## How can I contribute?
+
+Keep your eyes peeled for announcements about when we'll launch the public beta and open up the repo. (Also, blog post TODO but I would be remiss if I didn't mention that we now have an [OpenCollective](https://opencollective.com/svelte) where you can contribute financially to the project if it's been valuable to you. Many, many thanks to those of you who already have.)
+
+
+## Where can I learn more?
+
+Follow [@sveltejs](https://twitter.com/sveltejs) and [@SvelteSociety](https://twitter.com/SvelteSociety) on Twitter, and visit [svelte.dev/chat](https://svelte.dev/chat). You should also subscribe to [Svelte Radio](https://www.svelteradio.com/), where Kevin and his co-hosts will grill me about this project on an upcoming episode (and between now and next week when we record it, [reply to this Twitter thread](https://twitter.com/Rich_Harris/status/1323376048571121665) with your additional questions).
\ No newline at end of file
diff --git a/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md b/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md
new file mode 100644
index 0000000000..b8b1a9d13a
--- /dev/null
+++ b/site/content/blog/2020-12-01-whats-new-in-svelte-december-2020.md
@@ -0,0 +1,71 @@
+---
+title: "What's new in Svelte: December 2020"
+description: Better tooling, export maps and improvements to slots and context
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+It's the last "What's new in Svelte" of the year and there's lots to celebrate! This month's coverage includes updates from `rollup-plugin-svelte`, `Sapper` and `SvelteKit` and a bunch of showcases from the Svelte community!
+
+## New features & impactful bug fixes
+
+1. `$$props`, `$$restProps`, and `$$slots` are all now supported in custom web components (**3.29.5**, [Example](https://svelte.dev/repl/ad8e6f39cd20403dacd1be84d71e498d?version=3.29.5)) and  `slot` components now support spread props: `<slot {...foo} />` (**3.30.0**)
+2. A new `hasContext` lifecycle function makes it easy to check whether a `key` has been set in the context of a parent component (**3.30.0** & **3.30.1**, [Docs](https://svelte.dev/docs#run-time-svelte-hascontext))
+3. There is now a new `SvelteComponentTyped` class which makes it easier to add strongly typed components that extend base Svelte components. Component library and framework authors rejoice! An example: `export class YourComponent extends SvelteComponentTyped<{aProp: boolean}, {click: MouseEvent}, {default: {aSlot: string}}> {}` (**3.31.0**, [RFC](https://github.com/sveltejs/rfcs/pull/37))
+4. Transitions within `{:else}` blocks should now complete successfully (**3.29.5**, [Example](https://svelte.dev/repl/49cef205e5da459594ef2eafcbd41593?version=3.29.5))
+5. Svelte now includes an export map, which explicitly states which files can be imported from its npm package (**3.29.5** with some fixes in **3.29.6**, **3.29.7** and **3.30.0**)
+6. `rollup-plugin-svelte` had a new [7.0.0 release](https://github.com/sveltejs/rollup-plugin-svelte/blob/master/CHANGELOG.md). The biggest change is that the `css` option was removed. Users who were using that option should add another plugin like `rollup-plugin-css-only` as demonstrated [in the template](https://github.com/sveltejs/template/blob/5b1135c286f7a649daa99825a077586655051649/rollup.config.js#L48)
+
+
+## What's going on in Sapper?
+Lots of new TypeScript definition improvements to make editing Sapper apps even easier! CSS for dynamic imports also should now work in `client.js` files. (Unreleased)
+
+## What's the deal with SvelteKit?
+We're glad you asked! If you didn't catch Rich's blog post from early last month, [you can find it here](https://svelte.dev/blog/whats-the-deal-with-sveltekit)!
+
+For all the features and bugfixes see the CHANGELOGs for [Svelte](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) and [Sapper](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md).
+
+---
+
+## Community Showcase
+
+**Apps & Sites**
+- [narration.studio](https://narration.studio/) (Chrome Only) is an automatic in-browser audio recording & editing platform for voice over narration.
+- [Vippet](https://vippet.netlify.app/) is a video recording and editing tool for the browser.
+- [Pattern Monster](https://pattern.monster/) is a simple online pattern generator to create repeatable SVG patterns.
+- [Plant-based diets](https://planetbaseddiets.panda.org/) is a website from the World Wildlife Foundation (WWF) built with Svelte.
+- [johnells.se](https://www.johnells.se/) is a Swedish fashion e-commerce site, built with [Crown](https://crownframework.com/) - a Svelte-powered framework.
+- [sentence-length](https://sentence-length.netlify.app/) is a learning and analysis tool to show how some authors play with different lengths, while others stick with one.
+- [svelte-presenter](https://github.com/stephane-vanraes/svelte-presenter) lets you quickly make good looking presentations using Svelte and mdsvex.
+
+**Demos**
+- [u/loopcake got SSR working in Java Spring Boot](https://www.reddit.com/r/sveltejs/comments/jkh5up/svelte_ssr_but_its_java_spring_boot_and_its_native/) for all the Java shops out there looking to render Svelte server-side.
+- [svelte-liquid-swipe](https://github.com/tncrazvan/svelte-liquid-swipe) shows off a fancy interaction pattern using svg paths.
+- [Crossfade Link Animation](https://svelte.dev/repl/7f68e148caf04b2787bb6f296208f870?version=3.29.7) demonstrates how to animate between navigation links using a crossfade (made by Blu, from the Discord community)
+- [Clip-Path Transitions](https://svelte.dev/repl/b5ad281ae8024b629b545c70c9e8764d?version=3.29.7) showcases how to use clip paths and custom transitions to create magical in-and-out transitions (made by Faber, from the Discord community)
+
+**Learning Resources**
+- [lihautan](https://www.youtube.com/channel/UCbmC3HP3FaAFdcZkui8YoMQ/featured) has been making easy-to-follow videos to share his in-depth knowledge of Svelte.
+- [Lessons From Building a Static Site Generator](https://nicholasreese.com/lessons-from-building-a-static-site-generator/) shares the backstory and thinking behind Elder.js - and the design decision made along the way.
+- [Svelte Tutorial and Projects Course ](https://www.udemy.com/course/svelte-tutorial-and-projects-course/) is a udemy course by John Smilga where students learn Svelte.js by building interesting projects.
+- [Building Pastebin on IPFS - with FastAPI, Svelte, and IPFS](https://amalshaji.wtf/building-pastebin-on-ipfs-with-fastapi-svelte-and-ipfs) explains how to make a distributed pastebin-like application.
+
+
+**Components, Libraries & Tools**
+- [svelte-crossword](https://russellgoldenberg.github.io/svelte-crossword/) is a customizable crossword puzzle component for Svelte.
+- [svelte-cloudinary](https://github.com/cupcakearmy/svelte-cloudinary) makes it easy to integrate Cloudinary with Svelte (including Typescript and SSR support)
+- [Svelte Nova](https://extensions.panic.com/extensions/sb.lao/sb.lao.svelte-nova/) extends the new Nova editor to support Svelte
+- [saos](https://github.com/shiryel/saos) is a small svelte component to animate your elements on scroll.
+- [Svelte-nStore](https://github.com/lacikawiz/svelte-nStore) is a general purpose store replacement that fulfills the Svelte store contract and adds getter and calculation features.
+- [svelte-slimscroll](https://github.com/MelihAltintas/svelte-slimscroll) is a Svelte Action that transforms any div into a scrollable area with a nice scrollbar.
+- [svelte-typewriter](https://github.com/henriquehbr/svelte-typewriter) is a simple and reusable typewriter effect for your Svelte applications
+- [svelte-store-router](https://github.com/zyxd/svelte-store-router) is a store-based router for Svelte that suggests that routing is just another global state and History API changes are just an optional side-effects of this state.
+- [Routify](https://routify.dev/blog/routify-2-released) just released version 2 of its Svelte router.
+- [svelte-error-boundary](https://www.npmjs.com/package/@crownframework/svelte-error-boundary) provides a simple error boundary component for Svelte that can be can be used with both DOM and SSR targets.
+- [svelte2dts](https://www.npmjs.com/package/svelte2dts) generates d.ts files from svelte files, creating truly shareable and well typed components.
+
+## See you next month!
+
+Got an idea for something to add to the Showcase? Want to get involved more with Svelte? We're always looking for maintainers, contributors and fanatics... Check out the [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs) to get involved!
+
+That's all for the year, folks! See you in January 😎
diff --git a/site/content/blog/2021-01-01-whats-new-in-svelte-january-2021.md b/site/content/blog/2021-01-01-whats-new-in-svelte-january-2021.md
new file mode 100644
index 0000000000..ba82146cd5
--- /dev/null
+++ b/site/content/blog/2021-01-01-whats-new-in-svelte-january-2021.md
@@ -0,0 +1,86 @@
+---
+title: "What's new in Svelte: January 2021"
+description: A Svelte-packed showcase to kick-off the new year!
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+Happy new year from Svelte! In the last month we made progress on Sapper's upcoming release, fine-tuned our `SvelteComponent` typings, and have seen some amazing apps, sites, and libraries coming out in the showcase.
+
+## What's changed in Svelte?
+
+A new minor release replaces the `SvelteComponent` class with a `SvelteComponentTyped` class. This renaming should help with backwards compatibility. We've updated [last month's blog post](https://svelte.dev/blog/whats-new-in-svelte-december-2020) to avoid any confusion with the name change.
+
+If you're using `SvelteComponent` or the new `SvelteComponentTyped` in your project or library, let us know what you're using it for and we'll add it to the showcase!
+
+
+## What's going on in Sapper?
+
+More quality of life features are landing in the upcoming release every day. `0.29.0` will include new TypeScript definitions, fixes to scroll tracking and prefetching behavior, and improvements to the runtime router to support encoded query parameters.
+
+If you're upgrading from 0.28.x, check out [the migration guide](https://sapper.svelte.dev/migrating/#0_28_to_0_29) for steps on updating to Sapper 0.29.
+
+
+## Is SvelteKit ready yet?
+
+To avoid too much churn during development, SvelteKit is still being worked on in a private repo. There will be an announcement on the Discord, blog and Twitter when it's ready for a larger group of users and contributors.
+
+In the meantime, you can explore the current build by running `npm init svelte@next` from your command line.
+
+As cautioned in _[What's the deal with SvelteKit?](https://svelte.dev/blog/whats-the-deal-with-sveltekit)_, there are no docs or support available yet... So use at your own risk / for your own enjoyment!
+
+
+---
+
+## Community Showcase
+
+**Apps & Sites**
+
+- [manitu.me](https://manitu.me/) is a background sound / pomodoro timer for focus and relaxation
+- [Answer Socrates](https://answersocrates.com/) helps you find trending questions on the internet so that you can write the most relevant blog post, tweet, or billboard
+- [multris](https://multris.s1h.org/) is a multiplayer Tetris game. You can read about its development [here](https://blog.s1h.org/svelte-multiplayer-game/)
+- [weather-ab](https://github.com/ganochenkodg/weather-ab) compares the archive of weather in different cities of the world. Indispensable for people thinking about migration
+- [Game Nibs](https://gamenibs.com/) is a platform for gamers to find and share concise bite-sized bits of gaming advice, tips, tricks, screenshots, builds, and much more
+- [Ora](https://github.com/cupcakearmy/ora) is an open source website tracking and limiting tool for Chrome and Firefox
+- [vscode-dms](https://github.com/techsyndicate/vscode-dms) is a group direct messaging chat app for VSCode
+- [Zero.2](https://zero.oleksandrdemian.tech/) is a math-based challenge game where you try to get to zero as quickly as possible
+- [Octave Compass](https://octavecompass.com/2741) is a chord table and scale explorer for many popular musical scales
+- [Infinite Walking Bass Generator 2](https://github.com/elialbert/infinitewalkingbass2) is an online music player that generates a unique walking bass line
+- [ListenAddict](https://www.listenaddict.com/) is a site that notifies you whenever a person has a new talk/interview on podcast
+
+**Demos, Libraries & Components**
+
+- [svelte-tiny-virtual-list](https://github.com/Skayo/svelte-tiny-virtual-list) speeds up long lists by only rendering visible items
+- [svelte-query](https://github.com/TanStack/svelte-query) is a collection of helpful hooks for managing, caching and syncing asynchronous and remote data
+- [svelte-previous](https://github.com/bryanmylee/svelte-previous) is a svelte store to remember previous values - helpful for transitions or a quick undo stack
+- [Let's Build a Confetti Cannon](https://varun.ca/confetti/) explains how to build a particle system and integrate a Canvas based animation into a larger application
+- [svelte-micro](https://github.com/ayndqy/svelte-micro) is a one-component router
+- [svelte-standalone-router](https://github.com/hjalmar/svelte-standalone-router) is a standalone router with an API based on [standalone-router](https://github.com/hjalmar/standalone-router)
+- [svelte-datepicker](https://github.com/beyonk-adventures/svelte-datepicker) is a datepicker component with variations for time selection, date ranges and responsive themes
+- [svelte-slimscroll](https://github.com/MelihAltintas/svelte-slimscroll) is a action for Svelte.js, which can transforms any div into a scrollable area with a nice scrollbar.
+- [Svelte Zoomable](https://svelte.dev/repl/58dfe87756ee4db897c281b52fdef7b7?version=3.31.0) is a custom transition with a nice zoom effect
+
+**Have a component you'd like to share?** Check out the [Components](https://sveltesociety.dev/components) page on the Svelte Society site. You can contribute by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json).
+
+**Learning Resources**
+
+- [Using Svelte to create a scroll video effect](https://blog.koenvangilst.nl/tutorial-svelte-scroll-video/) showcases how the `bind` command can be used to create a cool scroll video effect with very little code
+- [How to make a flappybird game in svelte and typescript](https://www.youtube.com/watch?v=nhrYBoVI8pQ) is a video tutorial including docs and code for reference
+- [Accessible Svelte Transition](https://www.youtube.com/watch?v=QK_QuRL7nSo&feature=youtu.be) walks through `prefers-reduced-motion` to make svelte transitions more accessible
+- [Svelte's module scripts explained](https://codechips.me/svelte-module-scripts-explained/) is a great introduction to the module context, a common Sapper pattern
+- [Awesome Svelte](https://github.com/TheComputerM/awesome-svelte#readme) is a curated list of Svelte resources
+- [.NET Core and Svelte](https://dev.to/cainux/net-core-and-svelte-f8o) explains how to get Svelte up and running with .NET Core
+- [A la découverte de Svelte JS](https://www.youtube.com/watch?v=SLpx1Y8e1ek&list=PLff5I1miao9ZEUhpqkrOx7k8RGAZt-nm9) is a svelte tutorial series in French!
+- [Svelte for React Developers](https://soshace.com/svelte-for-react-developers/) explains Svelte's core concepts to folks who are used to React
+- [Building a Svelte Static Website with Smooth Page Transitions](https://www.youtube.com/watch?v=dvPfmcGtmrI&feature=emb_title) shows how to build a static website with Svelte and add smooth page transitions using Three.js and GSAP.
+- [Using Apollo Client in Sapper](https://bjornlu.com/blog/using-apollo-client-in-sapper/) explains the "simplest" solutions to integrate the Apollo query client into Sapper
+- [Reactive web apps with Crystal + Svelte](https://www.youtube.com/watch?v=i1xjLd6z7BU) explores how to build full-stack, server-rendered Svelte apps with a [Crystal](https://crystal-lang.org) backend
+
+**Related Projects**
+
+- [Snowpack's v3 release candidate](https://www.snowpack.dev/posts/2020-12-03-snowpack-3-release-candidate) is out now in preparation for a January 6 release date. Check out the [Getting Started with Svelte](https://www.snowpack.dev/tutorials/svelte) for more info on how to use Snowpack.
+- [Uppy](https://uppy.io/blog/2020/12/1.24/), the open source file uploader, announced Svelte support in its new version 1.24
+
+## See you next month!
+
+Want to add your work to the Showcase? Want to contribute to Svelte? Check out the [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs) to get involved!
diff --git a/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md b/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md
new file mode 100644
index 0000000000..2d09a3c439
--- /dev/null
+++ b/site/content/blog/2021-02-01-whats-new-in-svelte-february-2021.md
@@ -0,0 +1,86 @@
+---
+title: "What's new in Svelte: February 2021"
+description: Integrations and improvements at lightning speed...
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+With the shortest month of the year coming up, Svelte maintainers and community members alike have been busy this last month – from big changes in `svelte-loader`, `prettier-plugin-svelte`, `rollup-plugin-svelte`, and `language-tools` to steady progress in Sapper and `svelte-preprocess`. Meanwhile, lots of folks have been busy integrating Svelte with other popular frameworks.
+
+## New compiler features
+- Aria roles from the [WAI-ARIA Graphics Module](https://www.w3.org/TR/graphics-aria-1.0/#role_definitions) are now recognized as valid aria roles in Svelte components (**3.31.1**)
+- Compiler warnings for the common React attributes, `className` and `htmlFor`, now make it easier to port React components to Svelte (**3.31.1**)
+
+Have a suggestion for a compiler feature or want to help implement new features/bug fixes? Check out the ["triage: good first issue" tag for Svelte](https://github.com/sveltejs/svelte/issues?q=is%3Aopen+is%3Aissue+label%3A%22triage%3A+good+first+issue%22)
+
+
+## New bits in language-tools
+
+- User disabled auto import suggestions no longer show in VS Code (**103.0.0**)
+- Renaming a variable is now safer with smart additions of a prefix/suffix to renamed variables (**104.0.0**)
+- Semantic (token) highlighting for TypeScript users lets theme makers apply semantic styling in their themes, if they support it (**104.0.0**)
+- "Extract Component" has been added to the context menu - allowing you to extract components out of files without having to open the command window to type "Svelte: Extract Component" (**104.0.0**)
+- The VS Code extension now listens to JavaScript/TypeScript file changes - you no longer need to save the files for the changes to be noticed (**104.1.0**)
+
+For the complete list of changes, check out the language-tools [Releases page](https://github.com/sveltejs/language-tools/releases).
+
+A great way to try the language tools is to download the [Svelte Extension for VSCode](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). This extension provides syntax highlighting and rich intellisense for Svelte components in VS Code, using the svelte language server. Check your editor's extension sources to see if there's a Svelte plugin for your IDE or build your own (see [coc-svelte](https://github.com/coc-extensions/coc-svelte) for example)!
+
+## Big improvements across the Svelte ecosystem
+
+- [svelte-loader](https://github.com/sveltejs/svelte-loader) released a major version, 3.0.0 - featuring Webpack 5 and Node 14 support, better hot reloading, and new `compilerOptions` to match `rollup-plugin-svelte`. Breaking changes include dropping Svelte 2 and Node 8 support. [More info in the changelog](https://github.com/sveltejs/svelte-loader/blob/master/CHANGELOG.md)
+- [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) is now at version 7.x - with support for relative filenames, better handling of sourcemaps, and consistent `compilerOptions`. Be sure to [checkout the changelog](https://github.com/sveltejs/rollup-plugin-svelte/blob/master/CHANGELOG.md) for breaking changes when upgrading
+- [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) iterated through some 4.6.x releases this month to improve postcss and scss handling and fix sourcemap transformation for typescript users. [More info in the changelog](https://github.com/sveltejs/svelte-preprocess/blob/main/CHANGELOG.md)
+- [Sapper](https://github.com/sveltejs/sapper) got some improvements in scroll tracking and handling encoding query parameters. Dynamic imports also now work as expected in browsers that don't support ES modules. These changes from 0.29.0 and a step-by-step migration guide can be found [in the changelog](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md)
+- [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte) version 2 was released. It received an overhaul and comes with a rewrite of the HTML formatting. The output is now much more in line with how standard Prettier formats HTML. Better defaults for `svelteBracketNewLine` and `options-scripts-markup-styles` should now match how the majority of users like to order the code blocks. Additionally, Prettier's `htmlWhitespaceSensitivity` setting is now supported. [More info in the changelog](https://github.com/sveltejs/prettier-plugin-svelte/blob/master/CHANGELOG.md)
+
+New changes to the Svelte Society website include [a new cheat sheet](https://sveltesociety.dev/cheatsheet) for easy access to useful code patterns and some smaller visual fixes across the site. **Want to help make the Svelte Society website ready for prime time**? [Checkout the GitHub repo](https://github.com/svelte-society/sveltesociety.dev) to get started! 
+
+---
+
+## Community Showcase
+
+**Apps & Sites**
+
+- [The official German vaccination dashboard](https://impfdashboard.de/) tracks the current COVID vaccine rollout and features some well-done dataviz.
+- [La neuva era de la educatión conectada](https://elfuturoesapasionante.vodafone.es/especiales/educacion-conectada/) is a Vodaphone site that highlights the ways that technology and COVID-19 has changed the education landscape
+- [sho.rest](https://github.com/Melonai/shorest) is a self-hostable url shortener
+- [night.fm](https://night.fm/) is a cyberpunk-themed radio station
+
+
+**Demos, Libraries & Components**
+
+- [Svelte Reactive Debugger](https://addons.mozilla.org/en-US/firefox/addon/svelte-reactive-debugger/) is a way to monitor Svelte reactive statements in Firefox devtools
+- [svelte-actions](https://github.com/sw-yx/svelte-actions) is a set of prototype Svelte actions for inclusion into official actions in future. [See RFC](https://github.com/sveltejs/rfcs/pull/24) and [Discuss High Level Policy](https://github.com/sw-yx/svelte-actions/issues/7).
+- [This css grid gallery](https://svelte.dev/repl/3a1b7fae13b242fe9cd4a4f7aa092fa4?version=3.31.2) made by @joja (in the Svelte Discord) features grid transitions based on a user's mouse position
+- [Patchcab](https://github.com/spectrome/patchcab) is a modular Eurorack style synthesizer made with Web Audio.
+- [svelte-knob](https://github.com/MelihAltintas/svelte-knob) is a knob control to help with speedometer-style visualization
+- [descent-ripple](https://github.com/micha-lmxt/descent-ripple) is a highly customizable javascript ripple animation for buttons
+- [makeItSnow](https://github.com/florianlouvet/make-it-snow/blob/main/makeItSnowAction.js) is a Svelte action made by @MrPoule (in the Svelte Discord) that can be used to add ❄️snow❄️ to any component ([Demo](https://svelte.dev/repl/de5223beb45540a5a11c9bd7b318304f?version=3.31.2))
+- [svelte-video-player](https://github.com/meigo/svelte-video-player) is a customizable `VideoPlayer` component
+- [svelte-readonly](https://github.com/Crisfole/svelte-readonly) is a very small store that exposes only a readable interface.
+
+
+**New Integrations & Starters**
+- [svelte-derver-starter](https://github.com/AlexxNB/svelte-derver-starter) is a starter for baking fullstack application with the client based on Svelte and server side powered by Derver.
+- [eleventy-plugin-embed-svelte](https://github.com/shalomscott/eleventy-plugin-embed-svelte) makes it easy to embed Svelte components into an 11ty site.
+- [svelte-tailwind-extension-boilerplate](https://github.com/kyrelldixon/svelte-tailwind-extension-boilerplate) is a good foundation for a Chrome extension using either JavaScript or TypeScript, Svelte for the frontend, Tailwind CSS for styling, Jest for testing, and Rollup as the build system.
+- [snowpack-ui](https://github.com/rajasegar/snowpack-ui) lets you run & manage Snowpack projects from the browser instead of the terminal
+- [Svelte for Appwrite](https://dev.to/torstendittmann/svelte-for-appwrite-4fkg) explains how to integrate with Appwrite, a self-hosted Firebase alternative [Github Repo](https://github.com/appwrite/sdk-for-svelte)
+- [here-maps-svelte](https://github.com/peopledrivemecrazy/here-maps-svelte) makes it easy to include HERE maps in a Svelte app
+- [p5-svelte](https://github.com/tonyketcham/p5-svelte) is an absolutely dead simple way of tossing the creative coding/sketching tool, p5, into a project
+- [svelte-windicss-preprocess](https://github.com/voorjaar/svelte-windicss-preprocess) is a Svelte preprocessor to compile tailwindcss at build time based on windicss compiler
+- [MitzaCoder/svelte-boilerplate](https://github.com/MitzaCoder/svelte-boilerplate) features configurations for Typescript, TailwindCSS, IE11 compatibility (with Babel) and lazy loaded modules.
+
+**Want to share your Svelte Component with the world?** Head over to the [Components](https://sveltesociety.dev/components) page on the Svelte Society site. You can contribute by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json).
+
+**Learning Resources**
+
+- [lihautan's Svelte Actions Playlist](https://www.youtube.com/watch?v=ciaMT_MswzE&list=PLoKaNN3BjQX3Gl14MBygFf8buPIw9pAeK) teaches how actions work and how they can help solve common problems when developing Svelte applications
+- [One-click Portfolio/Personal blog generator from dev.to API ](https://dev.to/shriji/one-click-portfolio-personal-blog-generator-from-dev-to-api-3apb) walks through creating a Sapper site that also fetches your articles from DEV.to using the API
+- [How to Code a VSCode Extension](https://www.youtube.com/watch?v=a5DX5pQ9p5M) features Svelte as a way to render a custom UI within VSCode
+- [This YouTube series on Plenti](https://www.youtube.com/watch?v=wyNC7R_VVyQ&list=PLbWvcwWtuDm12y3Hye6oKDwI2gAS0ccHW) walks through the new static site generator in detail
+
+## See you next month!
+
+Want to add your work to the Showcase? Want to contribute to Svelte? Check out the [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs) to get involved!
diff --git a/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md b/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md
new file mode 100644
index 0000000000..45a03444c7
--- /dev/null
+++ b/site/content/blog/2021-03-01-whats-new-in-svelte-march-2021.md
@@ -0,0 +1,104 @@
+---
+title: "What's new in Svelte: March 2021"
+description: Call for Svelte Summit Speakers! Improved SSR, non-HTML5 compilation targets, and ESLint TypeScript support
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+Lots to cover this month with releases from across the Svelte ecosystem. Most importantly, Svelte Summit Spring 2021 has an [Open Call for Speakers](https://sessionize.com/svelte-summit-spring-2021). **The deadline is March 14** so if you have an idea for a talk, submit it now!
+
+Let's dive into the news 🐬
+
+## What's new in `sveltejs/svelte`
+* SSR store handling has been reworked to subscribe and unsubscribe as in DOM mode. SSR stores should work much more consistently now (**3.31.2**, see [custom stores](https://svelte.dev/examples/custom-stores) and [Server-side component API ](https://svelte.dev/docs#run-time-server-side-component-api))
+* Multiple instances of the same action are now allowed on an element (**3.32.0**, [example](https://svelte.dev/repl/01a14375951749dab9579cb6860eccde?version=3.32.0))
+* The new `foreign` namespace should make it easier for alternative compile targets (like Svelte Native and SvelteGUI) by disabling certain HTML5-specific behaviour and checks (**3.32.0**, [more info](https://github.com/sveltejs/svelte/pull/5652))
+* Support for inline comment sourcemaps in code from preprocessors (**3.32.0**)
+* Destructured defaults are now allowed to refer to other variables (**3.33.0**, [example](https://svelte.dev/repl/0ee7227e1b45465b9b47d7a5ae2d1252?version=3.33.0))
+* Custom elements will now call `onMount` functions when connecting and clean up when disconnecting (**3.33.0**, checkout [this PR](https://github.com/sveltejs/svelte/pull/4522) for an interesting conversation on how folks are using Svelte with Web Components)
+* A `cssHash` option has been added to the compiler options to control the classname used for CSS scoping (**3.34.0**, [docs](https://svelte.dev/docs#compile-time-svelte-compile))
+* Continued improvement to Typescript definitions
+
+For a complete list of changes, including bug fixes and links to PRs, check out [the CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
+
+
+## New from `sveltejs/language-tools`
+
+- For language server clients that don't support `didChangeWatchedFiles`, a fallback file watcher will be used instead
+- New highlighting rules for store accessors and element directives (like `bind:` and `class:`)
+- HTML tags can now be renamed together
+- Mustache tags parsing is now more robust and will provide better intellisense in more situations
+
+Haven't tried the language-tools yet? Check out [Svelte Extension for VSCode](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) or find a plugin for your favorite IDE!
+
+## Other changes from `sveltejs/*`
+
+- [eslint-plugin-svelte3](https://github.com/sveltejs/eslint-plugin-svelte3) now supports TypeScript as of 3.1.0
+- [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte/) released a number of minor versions to address whitespace and comment trimming issues.
+- [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess/) bug fixes this month include fixes to postcss transformations and support for both v2 and v3 of `postcss-load-config`
+- [sapper](https://github.com/sveltejs/sapper/)'s 0.29.1 release fixes some bad imports in type definitions, updates typings to be compatible with express/polka, and restores hashing of all CSS file names.
+
+---
+
+## Community Showcase
+
+**Apps & Sites**
+
+- [Tracking the Coronavirus](https://www.nytimes.com/interactive/2021/us/new-york-city-new-york-covid-cases.html) from NYTimes is an example of SvelteKit in production
+- [Budibase](https://github.com/Budibase/budibase) is an open-source low-code platform, helping developers and IT professionals build, automate, and ship internal tools 50x faster on their own infrastructure. 
+- [Track the Parcel](https://tracktheparcel.com/) is a one-stop tool for tracking parcel status with all major package shippers.
+- [Memo](https://sendmemo.app/features/) is a replacement for email that uses Svelte for modern messaging
+- [Userscripts Safari](https://github.com/quoid/userscripts) is an open-source userscript editor for Safari... a native Svelte app for Mac OS!
+- [SVGX](https://svgx.app/) is "the desktop SVG asset manager designers and developers wished they had."
+- [Armoria](https://azgaar.github.io/Armoria/) is a procedural heraldry generator and editor
+- [FictionBoard](https://www.fictionboard.com) is a virtual table top (VTT) platform that just released fillable and responsive character sheets
+- [Castles & Crusades Treasure Generator](https://treasure.playaheadgames.com/) is a treasure generator for the table top RPG: Castles and Crusades.
+- [NESBit Studio](https://jensa.org/NESBitStudio-web/graphics/spritesheets) is a toolkit to help the development of homebrew NES games
+- [ElectroBlocks](https://electroblocks.org/) is an online Arduino IDE with a built-in simulator (Chrome Only)
+- [Goblin.life](https://store.steampowered.com/app/552180/GoblinLife/) is a 3D world builder whose UI is built with Svelte
+- [farmbox](https://farmbox.ae/) is a UAE-based grocery delivery services
+- [heroeswearmasks.fun](https://heroeswearmasks.fun/) is a client-side machine learning tool that determines whether or not you're wearing a mask.
+- [weatherify](https://brdtheo-weatherify.netlify.app/) is a very pretty (and [open source](https://github.com/brdtheo/weatherify)) weather app
+- [DSN Live](https://dsn-live.netlify.app/#/) lets you monitor connections between NASA/JPL and interplanetary spacecraft missions in real time.
+
+
+
+**Demos, Libraries, Tools & Components**
+
+- [spc](https://github.com/khang-nd/spc) is a special characters picker component for the web
+- [svelte-injector](https://www.npmjs.com/package/svelte-injector) lets you inject Svelte components in React, Angular, Vue, jQuery, Vanilla JS.
+- [Felte](https://felte.dev/) is a form library for Svelte with simple validation reporting.
+- [svelte-use-form](https://github.com/noahsalvi/svelte-use-form#readme) is form library that "is easy to use and has 0 boilerplate."
+- [Formula](https://formula.svelte.codes/) provides "Zero Configuration Reactive Forms for Svelte."
+- [Houdini](https://github.com/AlecAivazis/houdini) is "the disappearing GraphQL client built for Sapper and Sveltekit."
+- [svelte-split-pane](https://www.reddit.com/r/sveltejs/comments/leoe33/sveltesplitpane/) is a draggable split pane component
+- [svelte-virtualized-auto-sizer](https://github.com/micha-lmxt/svelte-virtualized-auto-sizer) is a high-order component that automatically adjusts the width and height of a single child.
+- [svelte-window](https://github.com/micha-lmxt/svelte-window) are components for efficiently rendering large, scrollable lists and tabular data.
+- [Svelte Persistent store](https://github.com/MacFJA/svelte-persistent-store) is a Svelte store that keep its value through pages and reloads
+- [Svelte Dark](https://marketplace.visualstudio.com/items?itemName=NickScialli.svelte-dark) is a VSCode theme inspired by the svelte.dev REPL
+- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) has been updated to support Svelte libraries and help developers keep their bundle size under control.
+- [Tree-sitter-svelte](https://github.com/Himujjal/tree-sitter-svelte) provides tree-sitter grammar for svelte
+- [Svelte Ripple](https://svelte.dev/repl/b73224a0fd4248178e3eab41943d41a9?version=3.31.2) is a Material Design ripple effect that doesn't depend on `@material/ripple` (made by @karakara in the Svelte Discord)
+- [Analog SVG Clock](https://svelte.dev/repl/270e83f43e7a48918d8f2d497760904f?version=3.32.1) is a great example of easing functions (made by @tonmcg in the Svelte Discord)
+- [Console Log Styler](https://svelte.dev/repl/11f609d0d90746f08da6d3d90bba84fc?version=3.32.0) lets you generate a styled console log using pseudo HTML and CSS (made by @EmNudge in the Svelte Discord)
+- [svelte-heroicons](https://github.com/martinse/svelte-heroicons) is a handy wrapper for the Heroicons icon library
+- [supabase-ui-svelte](https://github.com/joshnuss/supabase-ui-svelte) are UI components for Supabase authentication
+
+**Have your own Svelte Component to share?** Check out the [Components](https://sveltesociety.dev/components) page on the Svelte Society site. You can contribute by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json).
+
+
+**Learning Resources & Starters**
+
+- [The **unofficial** SvelteKit docs](https://sk-incognito.vercel.app/learn/what-is-sveltekit) were built using SvelteKit and are [open for contributions](https://github.com/GrygrFlzr/kit-docs)
+- [📦 Svelte Store](https://www.youtube.com/playlist?list=PLoKaNN3BjQX3fG-XOSwsPHtnV8FUY6lgK) course by lihautan covers the basics of Svelte Stores and best practices.
+- [Svelte Events](https://www.youtube.com/watch?v=cbxxbBofjAw&feature=youtu.be) by WebJeda explains how directives like `on:` can be used to listen to DOM events.
+- [How to Set Up Protected Routes in Your Svelte Application](https://www.webtips.dev/how-to-set-up-protected-routes-in-your-svelte-application) describes how to authenticate your users to access your routes
+- [Using Fauna's streaming feature to build a chat with Svelte](https://dev.to/fauna/using-fauna-s-streaming-feature-to-build-a-chat-with-svelte-1gkd) demonstrates how to setup and configure Fauna to build a real-time chat interface with Svelte
+- [Using TakeShape with Sapper](https://www.takeshape.io/articles/using-takeshape-with-sapper/) demonstrates how to connect the TakeShape CMS with Sapper
+- [YastPack](https://github.com/rodabt/yastpack) is Yet Another Snowpack-Svelte-TailwindCss-Routify Template Pack
+- [S2T2](https://ralphbliu.medium.com/s2t2-snowpack-svelte-tailwindcss-typescript-8928caa5af6c) is a Snowpack + Svelte + TailwindCSS + Typescript template
+- [tonyketcham/sapper-tailwind2-template](https://github.com/tonyketcham/sapper-tailwind2-template) is a Sapper Template w/ Tailwind 2.0, TypeScript, ESLint, and Prettier
+
+## See you next month!
+
+Got something to add? Join us on [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/site/content/blog/2021-03-23-sveltekit-beta.md b/site/content/blog/2021-03-23-sveltekit-beta.md
new file mode 100644
index 0000000000..59cc2c4833
--- /dev/null
+++ b/site/content/blog/2021-03-23-sveltekit-beta.md
@@ -0,0 +1,67 @@
+---
+title: SvelteKit is in public beta
+description: And we'd love to have your feedback
+author: Rich Harris
+authorURL: https://twitter.com/rich_harris
+---
+
+<aside><p>Previously: <a href="/blog/whats-the-deal-with-sveltekit">What's the deal with SvelteKit?</a></p></aside>
+
+It's time. After five months and hundreds of commits, you're finally invited to try out the SvelteKit beta. It's not finished — there are a few known bugs and several missing features — but we're really happy with how it's shaping up and can't wait for you to try it.
+
+Starting a new project is easy:
+
+```bash
+# create the project
+mkdir my-app
+cd my-app
+npm init svelte@next
+
+# install dependencies
+npm install
+
+# start dev server and open a browser tab
+npm run dev -- --open
+```
+
+You'll find documentation at [kit.svelte.dev/docs](https://kit.svelte.dev/docs). If you have a [Sapper](https://sapper.svelte.dev) app that you'd like to migrate to SvelteKit, you'll find instructions at [kit.svelte.dev/docs/migrating](https://kit.svelte.dev/docs/migrating).
+
+The source code is available at [github.com/sveltejs/kit](https://github.com/sveltejs/kit). Issues and pull requests are disabled while we finish getting our house in order, but we'll be making it fully open in the near future.
+
+
+## Wait, what is SvelteKit?
+
+Think of it as [Next](https://nextjs.org/) for Svelte. It's a framework for building apps with Svelte, complete with server-side rendering, routing, code-splitting for JS and CSS, adapters for different serverless platforms and so on.
+
+If you're familiar with [Sapper](https://sapper.svelte.dev), SvelteKit is Sapper's successor.
+
+## From Snowpack to Vite
+
+One thing that might seem surprising after the [announcement video](/blog/whats-the-deal-with-sveltekit), in which I waxed lyrical about [Snowpack](https://www.snowpack.dev/), is that SvelteKit uses [Vite](https://vitejs.dev) under the hood. When we tried Snowpack back when we started thinking about what form SvelteKit should take, it was love at first sight.
+
+Snowpack created an entirely new category of dev tooling. Rather than _bundling_ your app in development, as we've been doing with webpack and Rollup for the last several years, Snowpack is an _unbundled dev server_ that uses the browser's native `import` and does 1:1 transformations of things like Svelte components on the fly. As a result you get quick startup, simple caching and instant hot module reloading. Once you experience this way of working, it will ruin you for anything else.
+
+Vite falls into the same category as Snowpack. While Vite 1 wasn't suitable for SvelteKit — it was Vue-centric (Vite and Vue are both created by [Evan You](https://twitter.com/youyuxi)) and made server-side rendering difficult — Vite 2 is framework-agnostic and designed with SSR at the core. It also has powerful features, like CSS code-splitting, that we previously had to implement ourselves. When we evaluated the two technologies side-by-side we were forced to conclude that Vite is a closer match for SvelteKit's requirements and would give us the best chance to deliver the framework of our imaginations.
+
+We owe a deep debt of gratitude to the Snowpack team, both for the close collaboration earlier in development and for lighting the path that web development will take over the next few years. It's a wonderful tool, and you should absolutely try it out.
+
+
+## Dogfooding as extreme sport
+
+SvelteKit is very much in beta, but that doesn't mean it hasn't been used in production.
+
+My day job is at the New York Times, where I've spent much of the last twelve months working on our [coronavirus tracker](https://www.nytimes.com/interactive/2020/us/coronavirus-us-cases.html). It uses a customised version of the workflow that powers the majority of graphics at the Times, which isn't designed for large multi-page projects. When we decided late last year to create pages for each of the ~3,000 counties in the US, we quickly realised we would need to completely rearchitect the project.
+
+Even though it was far from ready, SvelteKit was the only framework that matched our esoteric requirements. (Anyone who has worked in a newsroom and done battle with their CMS will know what I'm talking about.) Today it powers our [county risk pages](https://www.nytimes.com/interactive/2021/us/tom-green-texas-covid-cases.html) and we're in the process of migrating existing pages to the SvelteKit app.
+
+<aside><p>I am eternally grateful for my coworkers' forbearance.</p></aside>
+
+Using unfinished software to build an app that will be seen by millions of people is a risk, and in general I don't recommend it. But it has enabled us to develop the app much faster, and has made the framework itself much stronger than it otherwise would be.
+
+## The road to 1.0
+
+You can see the list of outstanding issues with the 1.0 milestone on our [issue tracker](https://github.com/sveltejs/kit/issues?q=is%3Aopen+is%3Aissue+milestone%3A1.0). Alongside that work, we plan to upgrade the documentation and add more [adapters](https://kit.svelte.dev/docs/adapters).
+
+Most importantly though, we need your feedback to help us make the best possible app framework. Try it out, and let us know which pieces are missing.
+
+Many thanks to everyone who has tried SvelteKit out despite the 'here be dragons' warnings and lack of documentation; your back-channel feedback has been invaluable. In particular, I want to acknowledge the work of [GrygrFlzr](https://github.com/GrygrFlzr), who maintained unofficial docs and a fork that added Windows support when we lacked it; and [dominikg](https://github.com/dominikg) whose work on [Svite](https://github.com/svitejs/svite) laid essential groundwork for SvelteKit's Vite integration. Both have now been welcomed onto the team.
diff --git a/site/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md b/site/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md
new file mode 100644
index 0000000000..b5a360dee5
--- /dev/null
+++ b/site/content/blog/2021-04-01-whats-new-in-svelte-april-2021.md
@@ -0,0 +1,73 @@
+---
+title: "What's new in Svelte: April 2021"
+description: SvelteKit beta and new way to use slots
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+Two projects that have been months (even years) in the making have made their way out into the world. SvelteKit is now in public beta and slotted components are now available in Svelte!
+
+## What's up with SvelteKit?
+[SvelteKit](https://kit.svelte.dev/) - Svelte's versatile framework for building SSR, serverless applications, or SPAs - is now officially in public beta. Expect bugs! Lots more detail in the [latest blog post](https://svelte.dev/blog/sveltekit-beta). Want to know when 1.0 is close? Check out the milestone on [github](https://github.com/sveltejs/kit/milestone/2).
+
+Want to learn more about how to get started, what's different compared to Sapper, new features and migration paths? Check out this week's [episode of Svelte Radio](https://www.svelteradio.com/episodes/svelte-kit-public-beta) for a deep dive with Antony, Kev and Swyx.
+
+## New in Svelte & Language Tools
+- Slotted components, including `<svelte:fragment slot="...">` lets component consumers target specific slots with rich content (**Svelte 3.35.0, Language Tools [104.5.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.5.0)**, check out the [docs](https://svelte.dev/docs#template-syntax-svelte-fragment) and the [tutorial](https://svelte.dev/tutorial/svelte-fragment))
+- Linked editing now works for HTML in Svelte files (**Language Tools, [104.6.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.6.0)**)
+- Type definitions `svelte.d.ts` are now resolved in order, allowing library authors to ship type definitions with their svelte components (**Language Tools, [104.7.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-104.7.0)**)
+- [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) is available for general use of Svelte in Vite. `npm init @vitejs/app` includes Svelte options using this plugin.
+
+---
+
+## Community Showcase
+
+**Apps & Sites**
+
+- [Nagato](https://nagato.app/) is a task management tool that connects popular time tracking and to-do tools all in one place.
+- [type-kana](https://type-kana.cass.moe/setup) is a quiz app to help you learn ひらがな (hiragana) and カタカナ (katakana), the Japanese syllabaries.
+- [Pittsburgh Steps](https://pittsburgh-steps.samlearner.com/) is an interactive map of the more than 800 sets of public outdoor stairways in Pittsburgh, PA.
+- [Music Mode Wheels](https://tobx.github.io/music-mode-wheels/) is a website that displays music modes as interactive wheels.
+- [Critical Notes](https://www.critical-notes.com/) helps game masters and players keep track of their roleplaying games campaigns and adventures.
+- [Svelte Game of Life](https://github.com/alanrsoares/svelte-game-of-life) is an educational implementation of Conway's Game of Life in TypeScript + Svelte
+- [foxql](https://github.com/foxql) is a peer to peer full text search engine that runs on your browser.
+
+
+**Demos, Libraries, Tools & Components**
+
+- [svelte-nodegui](https://github.com/nodegui/svelte-nodegui) is a way to build performant, native and cross-platform desktop applications with Node.js and Svelte
+- [Svelte Story Format](https://www.npmjs.com/package/@storybook/addon-svelte-csf) allows you to write your "stories" in Storybook using the Svelte syntax. More info in the [Storybook blog](https://storybook.js.org/blog/storybook-for-svelte/)
+- [SelectMadu](https://github.com/pavish/select-madu) is a replacement for the select menu, with support for searching, multiple selections, async data loading and more.
+- [Svelte Checklist](https://www.npmjs.com/package/svelte-checklist) is a customizable CheckList built with Svelte.
+- [Suspense for Svelte](https://www.npmjs.com/package/@jamcart/suspense) is a Svelte component that implements the core idea of React's `<Suspense>`.
+- [MiniRx](https://spierala.github.io/mini-rx-store/) is a RxJS Redux Store that works with Svelte and TypeScript
+- [svelte-formly](https://github.com/arabdevelop/svelte-formly) generates dynamic forms for Svelte and Sapper
+- [7ty](https://www.npmjs.com/package/@jamcart/7ty) is a static site generator that uses Svelte, supports partial hydration of components, and uses file based routing resembling Sapper and 11ty.
+
+**Want to contribute your own component?** Submit a [Component](https://sveltesociety.dev/components) to the Svelte Society site by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json).
+
+
+**Starters**
+
+- [sveltekit-electron](https://github.com/FractalHQ/sveltekit-electron) is a starter kit for Electron using SvelteKit
+- [sveltekit-tailwindcss-external-api](https://github.com/acidlake/sveltekit-tailwindcss-external-api) is everything you need to build a Svelte project with TailwindCSS and an external API, powered by create-svelte.
+- [Sapper Netlify](https://www.npmjs.com/package/sapper-netlify) is a Sapper project that can run on a Netlify function.
+
+
+**Looking for a particular starter?** Check out [svelte-adders](https://github.com/svelte-add/svelte-adders) and a number of other template examples at the community site [sveltesociety.dev](https://sveltesociety.dev/templates/)
+
+**Learning Resources**
+- [How to Build a Website with Svelte and SvelteKit](https://prismic.io/blog/svelte-sveltekit-tutorial) is a step-by-step tutorial walking through the new SvelteKit setup.
+- [A Svelte store for prefers-reduced-motion](https://geoffrich.net/posts/svelte-prefers-reduced-motion-store/) demonstrates how to make a custom Svelte store whose value will indicate whether the user has requested reduced motion and improve accessibility.
+- [TypeScript support in Svelte](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript) is an MDN guide to using TypeScript in Svelte.
+- [How to merge cells with svelte-window](https://gradientdescent.de/merging-cells/) is a walkthrough of svelte-window, a port of the popular react-window tool for merging table cells. For more on this migration, see [from react-window 1:1 to svelte-window](https://gradientdescent.de/porting-react-window/).
+- [Easy-to-Embed Svelte Components](https://codeandlife.com/2021/03/06/easy-to-embed-svelte-components/) explains how to use Rollup and a script tag to embed Svelte components anywhere.
+- [Convert Svelte project from Rollup to Snowpack](https://www.youtube.com/watch?v=-sHcqj4YLeQ) walks through a common migration pattern on video.
+- [How to internationalize routing in Svelte & Sapper](https://www.leaf.cloud/blog/how-to-internationalize-routing-in-svelte-sapper?utm_medium=story&utm_source=reddit.com&utm_campaign=awareness&utm_content=sapper_routing) explains how leaf.cloud translated their site to Dutch.
+- [Svelte Store: Reactive context using Svelte Store](https://www.youtube.com/watch?v=-rTnWlbdjoY) is a video answer to the question, "How do we make [a] context value reactive?"
+- [Creating Social Sharing Images with Cloudinary and Svelte](https://www.youtube.com/watch?v=-Si5o-R7KHY) is a video from Cloudinary that demonstrates how to dynamically develop Open Graph images and Twitter Cards for a JAMstack website.
+
+
+## See you next month!
+
+Got something to add? Join us on [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/site/content/blog/2021-05-01-whats-new-in-svelte-may-2021.md b/site/content/blog/2021-05-01-whats-new-in-svelte-may-2021.md
new file mode 100644
index 0000000000..c162d7d54f
--- /dev/null
+++ b/site/content/blog/2021-05-01-whats-new-in-svelte-may-2021.md
@@ -0,0 +1,76 @@
+---
+title: "What's new in Svelte: May 2021"
+description: Working toward SvelteKit 1.0 and a showcase full of SvelteKit sites!
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+Last week, Svelte Summit blew us away with a mountain of content! [Check out the full recording](https://www.youtube.com/watch?v=fnr9XWvjJHw) or an audio-only (p)review [on Svelte Radio](https://www.svelteradio.com/episodes/svelte-summit-party-episode). Now let's get into this month's news...
+
+## New features in the Svelte Compiler
+- `:global()` is now supported as part of compound CSS selectors (**3.38.0**, [Example](https://svelte.dev/repl/54148fd2af484f2c84977c94e523c7c5?version=3.38.0))
+- CSS custom properties can now be passed to components for use cases such as theming (**3.38.0**, [Docs coming soon](https://github.com/sveltejs/svelte/issues/6268))
+
+## New in SvelteKit
+- [kit.svelte.dev](https://kit.svelte.dev/) has a fresh new look and the [SvelteKit Demo Site](https://netlify.demo.svelte.dev/) got a fresh set of paint. Check it out by running `npm init svelte@next`
+- You can now use `@sveltejs/adapter-static` to create a single-page app or SPA by specifying a fallback page ([PR](https://github.com/sveltejs/kit/pull/1181), [Docs](https://github.com/sveltejs/kit/tree/master/packages/adapter-static))
+- Disable Server-side Rendering (SSR) app-wide or on a page-by-page basis ([PR](https://github.com/sveltejs/kit/pull/713))
+- Error messages thrown during pre-rendering are now much more informative and readable ([PR](https://github.com/sveltejs/kit/pull/1062), [Docs](https://kit.svelte.dev/docs/layouts#error-pages))
+- Layouts can now be reset to prevent pages from inheriting the root layout. This is useful if you have a specific layout for a page or i18n variation ([PR](https://github.com/sveltejs/kit/pull/1061), [Docs](https://kit.svelte.dev/docs/layouts#resets))
+- `fetch` in SvelteKit code will now use the environment-provided implementation, whenever possible. If `fetch` is unavailable, it will be polyfilled by adapters ([PR](https://github.com/sveltejs/kit/pull/1066), [Docs](https://kit.svelte.dev/docs/loading#input-fetch))
+
+## New in Svelte & Language Tools
+- `svelte-preprocess` now supports the "extends" field of the tsconfig.json (4.7.2)
+- HTML `style` attributes now have hover & auto-complete. Foreign namespaces and ESM configs are now supported in the Svelte language server & extensions
+- The Svelte language tools can now infer slot/event types from their props if a generic relationship between them was defined
+
+---
+
+## Community Showcase
+
+**Apps & Sites**
+
+- [gitpod.io](https://github.com/gitpod-io/website) recently rewrote its site with SvelteKit
+- [highlight eel](https://highlighteel.com/) is a web-based editor to mark your favorite parts of any YouTube video to clip and share with anyone
+- [The Far Star Mission](https://thefarstar.apotheus.net/) is an interactive audiobook companion to the album, The Far Star by Apotheus
+- [JavaScript quiz](https://github.com/nclskfm/javascript-quiz) is a small quiz application that saves your answers locally
+- [ExtensionPay](https://extensionpay.com/) lets developers accept secure payments in browser extensions with no backend server code.
+- [mk48.io](https://mk48.io/) is a naval warship game made with SvelteKit
+- [Frog Safety](https://frog-safety.vercel.app/) is a guide for African Dwarf Frogs and the API freshwater master kit
+- [Stardew Valley Character Preview](https://github.com/overscore-media/stardew-valley-character-preview) loads your character's attributes from your Stardew Valley savefile and lets you play around with different outfits, colours, and accessories.
+
+
+**Demos, Libraries, Tools & Components**
+
+- [svelte-parallax](https://github.com/kindoflew/svelte-parallax) is a spring-based parallax component for Svelte
+- [@svelte-plugins/viewable](https://github.com/svelte-plugins/viewable) is a simple rule-based approach to tracking element viewability.
+- [Sveltekit-JUI](https://github.com/Wolfr/sveltekit-jui) is a kit of UI components to be used in conjunction with Svelte and Svelte Kit.
+- [EZGesture](https://github.com/mhmd-22/ezgesture#integrating-with-other-frameworks) makes it easy to add gestures functionality with simple native DOM events 
+
+**Want to contribute your own component?** Submit a [Component](https://sveltesociety.dev/components) to the Svelte Society site by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json).
+
+
+**Starters**
+- [How to use Vercel Analytics with SvelteKit](https://ivoberger.com/posts/using-vercel-analytics-with-svelte-kit) teaches how to track Web Vitals across your users' devices
+- [Asp.NETCore + Svelte + Vite](https://github.com/Kiho/aspcore-spa-cli/tree/master/samples/SviteSample) connects the three frameworks with SpaCliMiddleware (VS2019)
+- [Add CoffeeScript to Svelte](https://github.com/Leftium/coffeescript-adder) is an experimental command to run to add CoffeeScript to your SvelteKit project or Vite-powered Svelte app
+- [Adds Supabase to Svelte](https://github.com/joshnuss/svelte-supabase) is an experimental command to run to add Supabase to your SvelteKit project
+- [svelte-babylon](https://github.com/SectorXUSA/svelte-babylon) lets you use BabylonJS like A-Frame through reactive Svelte Components
+
+**Looking for a starter or integration?** Check out [svelte-adders](https://github.com/svelte-add/svelte-adders) and a number of other template examples at the community site [sveltesociety.dev](https://sveltesociety.dev/templates)
+
+
+**Learning Resources**
+- [Amazing macOS Dock animation in Svelte](https://dev.to/puruvj/amazing-macos-dock-animation-in-svelte-5hfb) demonstrates how nice Svelte and popmotion look together
+- [Solving the Tower of Hanoi with recursive Svelte templates](https://geoffrich.net/posts/svelte-tower-of-hanoi/) incorporates the `<svelte:self>` element into a common computer science problem
+- [DIY SvelteKit CDK adapter](https://dev.to/juranki/diy-sveltekit-cdk-adapter-3enp) puts together SvelteKit and AWS CDK
+- Fireship's [Svelte in 100 Seconds](https://www.youtube.com/watch?v=rv3Yq-B8qp4) is a quick and easy introduction to Svelte's core concepts
+- [Tech Downtime](https://www.youtube.com/watch?v=tsePBA2JC7o&list=PLualcIC6WNK1LHIYx2Tg9AQfTQDv4zNPu) has been diving into SvelteKit in this playlist - from getting up and running to debugging.
+- lihautan's latest video updates in the [Svelte 101](https://www.youtube.com/watch?v=rwYgOU0WmVk&list=PLoKaNN3BjQX3mxDEVG3oGJx2ByXnue_gR&index=59) and [Svelte Store](https://www.youtube.com/watch?v=p4GmT0trCPE&list=PLoKaNN3BjQX3fG-XOSwsPHtnV8FUY6lgK&index=19) playlists cover slots, stores and context - and when to use which
+- [DavidParkerW](https://www.youtube.com/c/DavidParkerW/playlists) has been exploring Svelte, Sapper and SvelteKit in some real-world scenarios, like [displaying a blog post list from an API](https://www.youtube.com/watch?v=kAPVFgFnxaM&list=PLPqKsyEGhUna6cvm6d4vZNI6gbt_0S4Xx&index=15)
+
+
+
+## See you next month!
+
+Got something to add? Join us on [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md b/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md
new file mode 100644
index 0000000000..d1e3af95fb
--- /dev/null
+++ b/site/content/blog/2021-06-01-whats-new-in-svelte-june-2021.md
@@ -0,0 +1,65 @@
+---
+title: "What's new in Svelte: June 2021"
+description: Progress towards SvelteKit 1.0 and tighter TypeScript/Svelte integrations in language tools
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+This month, we saw lots of contributions to SvelteKit and its docs. The language tools also got some new features, most notably deeper integration with Svelte files within JavaScript or TypeScript files. Let's jump into the updates...
+
+## New in SvelteKit
+- `svelte.config.js` config files are now loaded in ESM format (`.js` instead of `.cjs`).
+- AMP pages will now use the rendered CSS, rather than emitted CSS
+- `svelte-check` has been added to the TypeScript template ([sveltejs/kit#1556](https://github.com/sveltejs/kit/pull/1556)) 
+- Support for https keypair [sveltejs/kit#1456](https://github.com/sveltejs/kit/pull/1456) 
+- Now bundling Vite with SvelteKit and using an upgraded version. Remove Vite from your `package.json` if it's there 
+- Etags for binary responses [sveltejs/kit#1382](https://github.com/sveltejs/kit/pull/1382) 
+- Renamed `$layout` to `__layout` and `$error` to `__error` 
+- Removed `getContext` in favor of `request.locals` 
+- Renamed `.svelte` output directory to `.svelte-kit`. Update your `.gitignore` accordingly
+- `trailingSlash: 'never' | 'always' | 'ignore'` is now available in the config. This should make it easier to build sites that work with static hosting providers that expect a trailing slash for `index.html` pages, and provides an escape hatch for anyone that needs more complex behaviour.
+
+## Notable bug fixes in SvelteKit
+- `adapter-netlify` got a fix [sveltejs/kit#1467](https://github.com/sveltejs/kit/pull/1467) and new documentation in the readme https://github.com/sveltejs/kit/tree/master/packages/adapter-netlify 
+- The router will no longer intercept navigation for URLs that the app does not own. This fixes a crash for apps that have `<a>` elements on the page with the same origin but don't share a base path with the app.
+- Hash only changes are now handled by the router fixing the browser's "back" navigation between hash changes in some circumstances.
+
+
+
+## New in Svelte & Language Tools
+- Svelte 3.38.1 and 3.38.2 fixed an issue with hydration that was causing duplicate elements. If you're seeing this in your project, be sure to update the latest version!
+- A new TypeScript plugin provides deeper integration with Svelte files within JavaScript or TypeScript files. This includes diagnostics, references and renaming of variables. It comes packaged with the VS Code extension but is turned off by default for now. You can enable it through [this setting](https://github.com/sveltejs/language-tools/tree/master/packages/svelte-vscode#svelteenable-ts-plugin). We encourage you to test it out and [provide feedback](https://github.com/sveltejs/language-tools/issues/580)
+- In the latest version of `svelte-check` you can now provide the path to your `tsconfig.json` or `jsconfig.json`. Example: `svelte-check --tsconfig "./tsconfig.json"`. This ensures the diagnostics are only run on files that are referenced in that config. It also runs diagnostics on JavaScript and/or TypeScript files which removes the need to run another check (like `tsc --noEmit`) for non-Svelte files (`svelte-check` version [**1.6.0**](https://github.com/sveltejs/language-tools/releases/tag/svelte-check-1.6.0))
+- The VS Code extension and `svelte-check` got a new major release. Previously, properties that had no initializer (`export let foo;`) were only required if the user was using both TypeScript and activated `strict` mode. This is changed now: People using TypeScript, and those using `checkJs` also in JavaScript files, will now always have these properties marked as required (`svelte-check` version [**2.0.0**](https://github.com/sveltejs/language-tools/releases/tag/svelte-check-2.0.0), extension version [**105.0.0**](https://github.com/sveltejs/language-tools/releases/tag/extensions-105.0.0))
+
+---
+
+## Community Showcase
+
+**Apps & Sites**
+
+- [vidu](https://github.com/pa-nic/vidu) is a minimal web analytics collector and dashboard
+- [River Runner](https://river-runner.samlearner.com/) is a virtual way to follow rivers downstream - built with Mapbox and Svelte.
+- [JSDoc Type Generator](https://rafistrauss.github.io/jsdoc-generator/) generates JSDoc types for valid JSON.
+- [pagereview.io](https://pagereview.io/) is a website feedback tool that lets you leave comments directly on the site being reviewed.
+- [gamesroom.io](https://gamesroom.io/) is an online board game platform with video chat built-in.
+- [Greedy Goblin](https://greedygoblin-fe11c.web.app/) is a recipe app for old-school Runescape players.
+- [hashbrown.geopjr.dev](https://hashbrown.geopjr.dev/) is a GNOME-shell inspired webpage to learn about, explore the source code and download the Hashbrown GTK app ([link to source](https://github.com/GeopJr/Hashbrown/tree/website)).
+
+
+**Libraries, Tools & Components**
+
+- [svelte-image-crop](https://novacbn.github.io/svelte-image-crop/) is a simple click'n'drag image cropping library using Web APIs.
+- [svelte-datepicker](https://github.com/andrew-secret/svelte-datepicker) is a lightweight and inclusive date picker build with Svelte.
+- [svelte-regex-router](https://www.npmjs.com/package/svelte-regex-router) is a simple, lightweight library for you to easily handle routes in your Svelte application.
+- [Svelte Micro](https://www.npmjs.com/package/svelte-micro) is a light & reactive one-component router for Svelte.
+- [svelte-entity-store](https://www.npmjs.com/package/svelte-entity-store) is to provide a simple, generic solution for storing collections of entity objects.
+- [svelte-animation-store](https://github.com/joshnuss/svelte-animation-store) is a store that is based on Svelte's tweened store, that lets you pause, continue, reset, replay, reverse or adjust speed of a tween.
+
+
+**Want to contribute a component?** Submit a [Component](https://sveltesociety.dev/components) to the Svelte Society site by making [a PR to this file](https://github.com/svelte-society/sveltesociety.dev/blob/master/src/pages/components/components.json).
+
+
+## See you next month!
+
+Did we miss something? Join us on [Svelte Society](https://sveltesociety.dev/), [Reddit](https://www.reddit.com/r/sveltejs/) and [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/site/content/blog/2021-07-01-whats-new-in-svelte-july-2021.md b/site/content/blog/2021-07-01-whats-new-in-svelte-july-2021.md
new file mode 100644
index 0000000000..c7510143a8
--- /dev/null
+++ b/site/content/blog/2021-07-01-whats-new-in-svelte-july-2021.md
@@ -0,0 +1,65 @@
+---
+title: "What's new in Svelte: July 2021"
+description: Keeping cool with fixes, TypeScript tooling and tonnes of new features
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+As the northern hemisphere heats up, Svelte has stayed cool with lots of performance and bug fixes, better TypeScript support, and lots of new components & tools from around the ecosystem. Let's take a peek 👀
+
+## New in SvelteKit
+- `adapter-node` now precompresses assets using gzip & brotli ([#1693](https://github.com/sveltejs/kit/pull/1693))
+- Support for TypeScript transpilation has been added to the `svelte-kit package` tooling ([#1633](https://github.com/sveltejs/kit/pull/1633))
+- Improved caching defaults in `adapter-node` ([#1416](https://github.com/sveltejs/kit/pull/1416))
+- Allow configuring Rollup output options ([#1572](https://github.com/sveltejs/kit/pull/1572))
+- Fixed usage of SSL with HMR ([#1517](https://github.com/sveltejs/kit/pull/1517))
+
+
+
+## Features & bug fixes from around svelte/*
+- [Svelte 3.38.3](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3383) (released June 22) includes a bunch of performance and bug fixes - including hydration optimizations, `this` preservation in bubbled events, and more!
+- The latest language tools releases added support for prop renaming from outside of a component, PostCSS syntax grammar, and a `.d.ts` output target in `svelte2tsx` which can be used to create type definitions from Svelte files.
+- Also in language tools, some long-awaited experimental features for enhanced TypeScript support were added - including explicitly typing all possible component events or slots, and using generics. Have a look at [the RFC](https://github.com/sveltejs/rfcs/pull/38) for more details and leave feedback in [this issue](https://github.com/sveltejs/language-tools/issues/442) if you are using it.
+- `svelte-scroller` got some quality-of-life fixes in 2.0.7 - fixing an initial width bug and updating its `index` more conservatively
+
+
+## Coming soon to Svelte
+- Constants in markup ([RFC](https://github.com/sveltejs/rfcs/blob/master/text/0000-markup-constants.md)): Adds a new `{@const ...}` tag that defines a local constant ([PR](https://github.com/sveltejs/svelte/pull/6413))
+
+---
+
+## Community Showcase
+
+**Apps & Sites**
+- [SvelteThemes](https://sveltethemes.dev/) is a curated list of Svelte themes and templates built using svelte, sveltekit, elderjs, routify etc.
+- [Beatbump](https://github.com/snuffyDev/Beatbump) is an alternative frontend for YouTube Music created using Svelte/SvelteKit.
+- [Sveltuir](https://github.com/webspaceadam/sveltuir) is an app help you memorize the guitar fretboard
+
+
+**Educational Content**
+- [Svelte Radio: A Jolly Good Svelte Summer](https://share.transistor.fm/s/60880542) is a conversation about what's new in Svelte and a celebration of Svelte Radio's 1-year anniversary
+- [Class properties in Svelte](https://navillus.dev/blog/svelte-class-props) is a refresher on the power of `class` for developers switching over to Svelte from React
+- [Sveltekit Tutorial for Beginners](https://www.youtube.com/playlist?list=PLm_Qt4aKpfKjf77S8UD79Ockhwp_699Ms) is a video playlist for learning SvelteKit by WebJeda
+- [How To Cache Dynamic Pages On Demand With A Service Worker In SvelteKit](https://jochemvogel.medium.com/how-to-cache-dynamic-pages-on-demand-with-a-service-worker-in-sveltekit-4b4a7652583d) walks through the power of service workers when used within SvelteKit for on-demand caching
+- [Vue vs Svelte: Comparing Framework Internals](https://www.vuemastery.com/blog/vue-vs-svelte-comparing-framework-internals/) dives deep into the differences between Vue and Svelte from the inside out
+- [Setting up a development environment for SvelteKit with Docker and Docker Compose](https://jenyus.web.app/blog/2021-05-30-setting-up-a-development-environment-for-sveltekit-with-docker-and-compose) walks through how to use Docker to create reusable development environments, no matter what kind of device you run your code on
+- Scalable Scripts released three videos this month documenting how to deploy dockerized Svelte Apps to [AWS](https://youtu.be/VOs2Od5jYOc), [Azure](https://youtu.be/gdg4ne_uDm8) and [Google Cloud](https://youtu.be/_-uBb61Tikw)
+- [Render Katex with Svelte from zero to hero](https://www.youtube.com/watch?v=euowJs9CblA) demonstrates how to implement Katex in a Svelte project
+- [Using Custom Elements in Svelte](https://css-tricks.com/using-custom-elements-in-svelte/) shows some of the quirks to look out for when using custom elements in a Svelte site
+
+
+**Libraries, Tools & Components**
+- [svelte-pipeline](https://github.com/novacbn/svelte-pipeline) provides custom Javascript contexts and the Svelte Compiler as Svelte Stores, for REPLs, Editors, etc.
+- [Sveltotron](https://github.com/Salemmous/sveltotron) is an Electron-based app made to inspect your Svelte app
+- [svelte-qr-reader-writer](https://github.com/pleasemarkdarkly/svelte-qr-reader-writer) is a Svelte component that helps read and write data from QR codes
+- [svelte-stack-router](https://www.npmjs.com/package/svelte-stack-router) Aims to make Svelte apps feel more native by routing with Stacks
+- [svelte-typed-context](https://www.npmjs.com/package/svelte-typed-context) provides an interface which, when provided to `getContext` or `setContext`, allows for stricter types
+- [svelte-modals](https://svelte-modals.mattjennings.io/) is a simple, flexible, zero-dependency modal manager for Svelte
+
+
+**Want to contribute a component? Interested in helping make Svelte's presence on the web better?** Submit a Component to the Svelte Society site by making [a PR to this file](https://github.com/svelte-society/sveltesociety-2021/blob/main/src/routes/components/components.json) or check out [the list of open issues](https://github.com/svelte-society/sveltesociety-2021/issues) if you'd like to contribute to the Svelte Society rewrite in SvelteKit.
+
+
+## See you next month!
+
+Want more updates? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/site/content/blog/2021-08-01-whats-new-in-svelte-august-2021.md b/site/content/blog/2021-08-01-whats-new-in-svelte-august-2021.md
new file mode 100644
index 0000000000..0dd54ca22f
--- /dev/null
+++ b/site/content/blog/2021-08-01-whats-new-in-svelte-august-2021.md
@@ -0,0 +1,71 @@
+---
+title: "What's new in Svelte: August 2021"
+description: Shadow DOM, export and await - oh my!
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+From The Changelog ([JS Party Ep. 182](https://changelog.com/jsparty/182)) to Svelte Radio (Episodes [29](https://share.transistor.fm/s/adc23e84) and [30](https://share.transistor.fm/s/6316622d)), it seems that folks couldn't help but talk about Svelte, this month! Also, shadow DOM support and new export and await functionality are new in Svelte.
+
+## New in Svelte
+
+July was the most active month for the Svelte core repo since late 2019 as we really worked to reduce the number of outstanding PRs and saw the release of Svelte 3.39.0, 3.40.0, and 3.41.0. Tons of bug fixes were added as well as the following new features:
+
+- The `|trusted` event modifier allows you to check if an event is trusted before it's called ([#6137](https://github.com/sveltejs/svelte/issues/6137))
+- The new `svelte/ssr` package to support work on improving SvelteKit SSR ([#6416](https://github.com/sveltejs/svelte/pull/6416))
+- A new `errorMode` compiler option to support improved preprocessing of TypeScript files ([#6194](https://github.com/sveltejs/svelte/pull/6194))
+- You can now specify a `ShadowRoot` as the `target` when creating a component - making it possible to render Svelte components inside the shadow DOM ([#5869](https://github.com/sveltejs/svelte/issues/5869))
+- The `export { ... } from` ([#2214](https://github.com/sveltejs/svelte/issues/2214)), `export let { ... } =` ([#5612](https://github.com/sveltejs/svelte/issues/5612)) and `{#await ... then/catch}` ([#6270](https://github.com/sveltejs/svelte/issues/6270)) syntaxes are all now supported in Svelte components
+
+For a full list of features and bug fixes, check out the [Svelte changelog](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
+
+## SvelteKit Updates
+- `prerender.force` is now `prerender.onError` which lets you fine-tune which errors fail the build and which do not ([#2007](https://github.com/sveltejs/kit/pull/2007))
+- esbuild's configuration is now exposed for use with SvelteKit adapters ([#1914](https://github.com/sveltejs/kit/pull/1914))
+- Error messages are friendlier now for common config errors ([#1910](https://github.com/sveltejs/kit/pull/1910)) and compiler errors ([#1827](https://github.com/sveltejs/kit/pull/1827))
+- Cookies will only be passed through if the target host is the same as the SvelteKit application or a more specific subdomain of it ([#1847](https://github.com/sveltejs/kit/pull/1847))
+- index.js exports will now be changed to directory exports when packaging - making for nicer imports ([#1905](https://github.com/sveltejs/kit/pull/1905))
+- Vite.js's `mode` is now exposed from `$app/env` ([#1789](https://github.com/sveltejs/kit/pull/1789))
+- Better types across the board ([#1778](https://github.com/sveltejs/kit/pull/1778), [#1791](https://github.com/sveltejs/kit/pull/1791), [#1646](https://github.com/sveltejs/kit/pull/1646))
+
+To see all updates to SvelteKit, check out the [SvelteKit changelog](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).
+
+## Features & bug fixes from around svelte/*
+- Language Tools now better support the "Workplace Trust" functionality (used in VS Code)
+- In svelte2tsx, ambient type declarations are now renamed to avoid conflicting declarations in the future. Users are now expected to provide the ambient type definitions themselves - fixing JS output
+- Sapper released v0.29.2 which fixes regex routes, status codes when requesting a directory, and exports when a user has not provided a `base` tag ([changelog](https://github.com/sveltejs/sapper/blob/master/CHANGELOG.md))
+
+---
+
+## Community Showcase
+
+**Apps & Sites**
+- [Parsnip](https://www.parsnip.ai/) is a mobile-first, progressive-web-app that helps you to learn to cook at home. Check out the [conversation on Reddit](https://www.reddit.com/r/sveltejs/comments/oearb9/learning_to_cook_at_home_with_parsnip_built/) for all the geeky details.
+- [Central Bank Digital Currency (CBDC) tracker](https://www.atlanticcouncil.org/cbdctracker/) is a site that keeps track of how countries around the world are adopting digital currencies.
+- [Svelte Commerce](https://github.com/itswadesh/svelte-commerce) is an advanced frontend platform for eCommerce based on Sveltekit.
+- [neovimcraft](https://neovimcraft.com/) is a SvelteKit site dedicated to neovim plugins
+
+**Looking for a Svelte project to work on? Interested in helping make Svelte's presence on the web better?** Check out [the list of open issues](https://github.com/svelte-society/sveltesociety-2021/issues) if you'd like to contribute to the Svelte Society rewrite in SvelteKit.
+
+**Educational Content**
+- [How I Built a Cross-Platform Desktop Application with Svelte, Redis, and Rust](https://css-tricks.com/how-i-built-a-cross-platform-desktop-application-with-svelte-redis-and-rust/) is a blog post by Luke Edwards, Svelte maintainer and Developer Advocate from Cloudflare.
+- [How to Create a Blog with SvelteKit and Strapi](https://strapi.io/blog/how-to-create-a-blog-with-svelte-kit-strapi) is a step-by-step tutorial by Aarnav Pai from Strapi
+- [Sveltekit Markdown Blog](https://www.youtube.com/watch?v=sKKgT0SEioI&list=PLm_Qt4aKpfKgonq1zwaCS6kOD-nbOKx7V) is a YouTube tutorial series by WebJeda.
+- [Using Custom Elements in Svelte](https://css-tricks.com/using-custom-elements-in-svelte/) is a deep dive into custom elements by Geoff Rich.
+- [learn / graphql / svelte](https://hasura.io/learn/graphql/svelte-apollo/introduction/) is a free 2-hour GraphQL course course from Hasura.
+- [How to add Magic Link to a SvelteKit application](https://magic.link/posts/magic-svelte) is a guide to the popular password-less login pattern.
+
+**Libraries, Tools & Components**
+- [Svelte-Capacitor](https://github.com/drannex42/svelte-capacitor/) just released v2.0.0 - making it even easier to build hybrid mobile apps for iOS and Android using Svelte and Capacitor with near native performance.
+- [svelte-remixicon](https://github.com/ABarnob/svelte-remixicon) is an icon library for Svelte based on Remix Icon, consisting of more than 2000 icons.
+- [SveltePress](https://github.com/GeopJr/SveltePress) is a documentation tool built on top of SvelteKit.
+- [Svelte Starter Kit](https://github.com/one-aalam/svelte-starter-kit/tree/auth-supabase) is a boilerplate to quckly get up and running with Svelte, with Auth and User Profiles powered by Supabase.
+- [Kahi UI](https://github.com/novacbn/kahi-ui) is a Svelte-first UI kit with Dark Mode built-in.
+- [typesafe-i18n](https://github.com/ivanhofer/typesafe-i18n) is an opinionated, fully type-safe, lightweight localization library for TypeScript and JavaScript projects with no external dependencies.
+
+Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) for more templates, adders and adapters from across the Svelte ecosystem.
+
+
+## See you next month!
+
+Want more updates? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/site/content/blog/2021-09-01-whats-new-in-svelte-september-2021.md b/site/content/blog/2021-09-01-whats-new-in-svelte-september-2021.md
new file mode 100644
index 0000000000..d4794b3c5e
--- /dev/null
+++ b/site/content/blog/2021-09-01-whats-new-in-svelte-september-2021.md
@@ -0,0 +1,83 @@
+---
+title: "What's new in Svelte: September 2021"
+description: StackOverflow's most loved web framework
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+This month, Svelte was [voted StackOverflow's most loved web framework](https://insights.stackoverflow.com/survey/2021#section-most-loved-dreaded-and-wanted-web-frameworks), Tan Li Hau [talked to Svelte Radio](https://share.transistor.fm/s/84c7521b) about his [Svelte-filled YouTube channel](https://www.youtube.com/channel/UCbmC3HP3FaAFdcZkui8YoMQ), and SvelteKit made even more progress towards its 1.0 release!
+
+## New in Svelte
+
+- `use:actions` can now be used on `<svelte:body>` (**3.42.0**)
+- `HTMLElement`, `SVGElement` (**3.42.2**) and `BigInt` (**3.42.3**) are now known globals
+- There is less code in Svelte's output thanks to the following improvements in **3.42.2**:
+  - Whitespace is now collapsed in class and style attributes
+  - Hydrated components have been updated to only rely upon helpers for creating the types of elements present in the component
+- Scaling is now accounted for in `flip` animations (**3.42.2**)
+- All `<option>`s in a `<select>` are now deselected when the bound value doesn't match any of them (**3.42.2**)
+
+For a full list of features and bug fixes, check out the [Svelte changelog](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
+
+## SvelteKit Updates
+
+Svelte maintainers are [looking for help getting SvelteKit to 1.0](https://github.com/sveltejs/kit/issues/2100). We've knocked out over 100 issues that were on the 1.0 milestone. There's only a couple dozen left and we'd love a hand making that list a bit shorter!
+
+If you'd like to help, please consider working on any of the [1.0 milestone issues](https://github.com/sveltejs/kit/issues?q=is%3Aopen+is%3Aissue+milestone%3A1.0).
+
+The focus this past month was on continuing to iron out any kinks, with well over 100 PRs merged. A few new features went in as well...
+
+- SvelteKit will now detect if a prerendered app is trying to access a query parameter and return an error instead of failing silently ([#2104](https://github.com/sveltejs/kit/pull/2104))
+- `adapter-node` now lets you [add the Kit middleware to your own server](https://kit.svelte.dev/faq#integrations) for use with other middleware. You can also [add middleware in dev mode](https://kit.svelte.dev/faq#how-do-i-use-x-with-sveltekit-how-do-i-use-middleware) with more improvements to come in this area
+- The new [`sequence` helper lets you chain together multiple `handle` calls](https://kit.svelte.dev/docs/modules#sveltejs-kit-hooks)
+- A new [`handleError` hook](https://kit.svelte.dev/docs/hooks#handleerror) gives you the option to send data to an error tracking service, or to customise the formatting before printing the error to the console.
+- `adapter-node` can now listen on socket path ([#2048](https://github.com/sveltejs/kit/pull/2048))
+
+To see all updates to SvelteKit, check out the [SvelteKit changelog](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).
+
+
+---
+
+## Community Showcase
+
+**Apps & Sites**
+- [macos-web](https://github.com/PuruVJ/macos-web) by @puruvjdev has been rebuilt with Svelte from the ground up. Check out all the details in this [Twitter thread](https://twitter.com/puruvjdev/status/1426267327687847939)
+- [Brave Search](https://search.brave.com/) is using Svelte
+- [exatorrent](https://github.com/varbhat/exatorrent) is a self-hostable, easy-to-use, lightweight and feature-rich torrent client written in Go and Svelte
+- [json2TsTypes](https://github.com/jatinhemnani01/json2TsTypes) is a simple tool which will convert your JSON to Typescript Types/Interfaces
+- [Histogram.dev](https://histogram.dev/) generates histograms for each feature in a CSV
+- [cybernetic.dev](https://cybernetic.dev/) is a collection of data-centric UI experiments made while learning Svelte
+- [LunaNotes](https://chrome.google.com/webstore/detail/lunanotes-youtube-video-n/oehoffnnkgcdacmbkhmlbjedinpampak?hl=en) is a Chrome extension to help with taking YouTube video notes
+- [theia.games](https://theia.games/#dev)'s built-in 3D environment editor lets you create a VR world with a menu built in Svelte
+- [Ferrum](https://github.com/probablykasper/ferrum) is a music library and player available for Mac, Windows or Linux
+- [Fluid Earth](https://github.com/byrd-polar/fluid-earth) is an interactive WebGL application for visualizing Earth's atmosphere and oceans
+
+**Looking for a Svelte project to work on? Interested in helping make Svelte's presence on the web better?** Check out [the list of open issues](https://github.com/svelte-society/sveltesociety-2021/issues) if you'd like to contribute to the Svelte Society rewrite in SvelteKit.
+
+**Educational Content**
+- [Tauri with Standard Svelte or SvelteKit](https://medium.com/@cazanator/tauri-with-standard-svelte-or-sveltekit-ad7f103c37e7) walks through how to setup Svelte with Tauri, a new light-weight framework for developing cross-platform hybrid desktop applications
+- [Svelte - Web App Development Reimagined [An Intro to Svelte]](https://www.youtube.com/watch?v=4CGzFwHoD0A&list=PLEx5khR4g7PKSASVAXXiAhkyx02_OeruP) is a great intro talk from the goto; conference
+- [LevelUpTuts - Even More 5 Things I Like More In Svelte Than React](https://www.youtube.com/watch?v=ISmnG2sIOeM) highlights Svelte's approach to refs (don't need them), meta tags and more
+- [State Management in Svelte Applications](https://auth0.com/blog/state-management-in-svelte-applications/) is a tutorial on how to use the Svelte state management store to manage state in Svelte applications
+- [Migrating from Sapper to SvelteKit](https://shipbit.de/blog/migrating-from-sapper-to-svelte-kit/) is a review and retrospective of ShipBit's migration from Sapper
+
+**Libraries, Tools & Components**
+- [svelte-stripe-js](https://github.com/joshnuss/svelte-stripe-js) is everything you need to add Stripe to your Svelte project. 100% SvelteKit compatible
+- [svelte-steps](https://github.com/shaozi/svelte-steps) is a customizable step component written in Svelte
+- [simple-optics-module](https://gitlab.com/Samzelot/simple-optics-module) is an online open source optics tool for experimenting and teaching geometrical optics
+- [inlang](https://github.com/samuelstroschein/inlang) is an internationalization (i18n) tool for SvelteKit apps
+- [Sveno](https://github.com/pocinnovation/sveno) is a component transpiler that transforms React components to Svelte components
+- [svelte-useactions](https://github.com/paolotiu/svelte-useactions) is a fully typed library for passing actions to components
+- [Svelte-Element-Query](https://github.com/leveluptuts/Svelte-Element-Query) is a 322b library/action for element queries
+- [svelte-meta-tags](https://github.com/oekazuma/svelte-meta-tags) is a plug-in that makes managing SEO easier in Svelte projects
+- [svelte-domtree](https://github.com/alex-knyaz/svelte-domtree) lets you visualize the DOM - similar to DOM tree in Chrome DevTools
+- [Diffx](https://github.com/jbjorge/diffx/tree/master/svelte), a cross-framework state management library, just added Svelte support
+- [svelte-ionic-starter](https://github.com/Zettexe/svelte-ionic-starter) a project template for Svelte + Ionic + CapacitorJS apps with live reload and iOS/Android build targets
+- [demo-sveltekit-sanity](https://github.com/stephane-vanraes/demo-sveltekit-sanity/) is a starter kit for SvelteKit and Sanity, an open source React CMS
+
+Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) for more templates, adders and adapters from across the Svelte ecosystem.
+
+
+## See you next month!
+
+Want more updates? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md b/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md
new file mode 100644
index 0000000000..5ffd65bb0a
--- /dev/null
+++ b/site/content/blog/2021-10-01-whats-new-in-svelte-october-2021.md
@@ -0,0 +1,99 @@
+---
+title: "What's new in Svelte: October 2021"
+description: A whole year of "What's new in Svelte"
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+Hey y'all 👋 It's been 1 year since "What's new in Svelte" started being cross-posted to the Svelte blog. I wanted to take this moment at the top to thank all of you for reading and for all the contributors every month. From the maintainers to everyone who posts their work in the Discord and Reddit, it's amazing to witness all the effort that goes into making the Svelte community great.
+
+Keep up the good work, everyone! Now, let's dive into this month's news...
+
+## New around Svelte
+
+- New additions to Svelte's export map now expose no-op versions of lifecycle functions for SSR (Svelte **3.43.0**)
+- Custom components with a `src` attribute no longer break `svelte-native` builds (Svelte **3.42.4**)
+- Svelte plugin users without [the TypeScript plugin](https://www.npmjs.com/package/typescript-svelte-plugin) enabled will now be prompted to enable it. It enhances TypeScript and JavaScript files with additional intellisense to interact with Svelte files. [Please leave feedback](https://github.com/sveltejs/language-tools/issues/580) if you are using it (Svelte extensions **105.4.0**)
+- Event modifiers have been added to intellisense as autocomplete and hover info (Svelte extensions **105.4.0**)
+- TypeScript users no longer have to strictly separate type imports and value imports when using Svelte version 3.39 or higher and `svelte-preprocess` version 4.9.5 or higher. This means you can now write `import { MyInterface, myValue } from './somewhere'` instead of `import type { MyInterface } from './somewhere'; import { myValue } from './somewhere'`. Huge thanks to community member [@SomaticIT](https://github.com/SomaticIT) who mainly implemented this!
+
+For a full list of features and bug fixes, check out the [Svelte changelog](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md).
+
+## SvelteKit Updates
+
+Nearly 100 PRs committed again this past month, but there's still lots to do and Svelte maintainers are [looking for help getting SvelteKit to 1.0](https://github.com/sveltejs/kit/issues/2100). Antony said it well in a [recent comment](https://github.com/sveltejs/kit/issues/2100#issuecomment-895446285) on the issue: 
+
+> If you think you are too n00b to contribute (you're not), then add tests, or write tests for the feature you want to add, before you add it! Start small, and learn the codebase that way.
+
+If you'd like to help, please consider working on any of the [1.0 milestone issues labeled with "help wanted"](https://github.com/sveltejs/kit/issues?q=is%3Aopen+is%3Aissue+milestone%3A1.0+label%3A%22help+wanted%22).
+
+Notable SvelteKit improvements this month include...
+
+- Service workers are now allowed to access files using the `$lib` alias ([#2326](https://github.com/sveltejs/kit/pull/2326))
+- Svelte libraries should now work out-of-the-box without any Vite configuration ([#2343](https://github.com/sveltejs/kit/pull/2343))
+- Improvements to package exports field ([#2345](https://github.com/sveltejs/kit/pull/2345) and [#2327](https://github.com/sveltejs/kit/pull/2327))
+- [breaking] The `prerender.pages` config option has been renamed to `prerender.entries` ([#2380](https://github.com/sveltejs/kit/pull/2380))
+- A new generic argument has beend added to allow typing Body from hooks ([#2413](https://github.com/sveltejs/kit/pull/2413))
+- The `svelte` field will be added to package.json when running the package command ([#2431](https://github.com/sveltejs/kit/pull/2431))
+- [breaking] The `context` parameter of the load function was renamed to `stuff` ([#2439](https://github.com/sveltejs/kit/pull/2439))
+- Added an `entryPoint` option for building a custom server with `adapter-node` ([#2414](https://github.com/sveltejs/kit/pull/2414))
+- `vite-plugin-svelte` improved support for [useVitePreprocess](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#usevitepreprocess), which uses Vite to automatically preprocess TypeScript, PostCSS, Scss, etc in Svelte components ([#173](https://github.com/sveltejs/vite-plugin-svelte/pull/173))
+
+To see all updates to SvelteKit, check out the [SvelteKit changelog](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md).
+
+
+---
+
+## Community Showcase
+
+**Apps & Sites**
+- [radiofrance](https://www.radiofrance.fr/) just migrated their website to SvelteKit
+- [FLAYKS](https://flayks.com/) is the portfolio site for Félix Péault made with SvelteKit, Sanity, and Anime.js
+- [hirehive](https://www.hirehive.com/) is a candidate and job tracking site
+- [Microsocial](https://microsocial.xyz/) is an experimental Peer-to-Peer Social Platform 
+- [Dylan Ipsum](https://www.dylanlyrics.app/) is a random text generator to replace lorem ipsum with Bob Dylan lyrics
+- [Chip8 Svelte](https://github.com/mikeyhogarth/chip8-svelte) is a CHIP-8 emulator frontend, built on top of CHIP8 Typescript
+
+**Looking for a Svelte project to work on? Interested in helping make Svelte's presence on the web better?** Check out [the list of open issues](https://github.com/svelte-society/sveltesociety-2021/issues) if you'd like to contribute to the Svelte Society rewrite in SvelteKit.
+
+**Podcasts Featuring Svelte**
+- [Syntax Podast: From React to SvelteKit](https://podcasts.apple.com/us/podcast/from-react-to-sveltekit/id1253186678?i=1000536276106) Scott talks with Wes about moving Level Up Tutorials from React to SvelteKit — why he did it, how, benefits, things to watch out for, and more!
+- [Web Rush Podcast: Svelte Tools and Svelte Society](https://www.webrush.io/episodes/episode-150-svelte-tools-and-svelte-society) Kevin Åberg Kultalahti talks about what Svelte Society is, what he's excited about with Svelte, how important documentation is to any product, and much _much_ more
+- [Svelte: The Compiled Future of Front End](https://www.arahansen.com/the-compiled-future-of-front-end/) details the history of component-based frontends and how a compiler changes everything
+- [Svelte Radio: Contributing to Svelte with Martin 'Grygrflzr' Krisnanto Putra](https://share.transistor.fm/s/10aa305c) Grygrflzr shares his journey to becoming a maintainer and his views on React, Vite and a host of other things
+- [Svelte Radio: Routify 3 with Jake and Willow](https://share.transistor.fm/s/10aa305c) the Svelte Radio crew sits down with the maintainers of Routify and discusses the just-released Routify 3
+- [JS Party: 1Password](https://twitter.com/geoffrich_/status/1441816829853253640?s=20) mentioned on the latest episode of The Changelog's JS Party that they use Svelte to power their in-page suggestions
+
+**Educational Content**
+- [How I built a blog with Svelte and SvelteKit](https://fantinel.dev/blog-development-sveltekit/) is an introduction to Svelte, SvelteKit and Progressive Enhancement with code examples
+- [I built a decentralized chat dapp](https://www.youtube.com/watch?v=J5x3OMXjgMc) is a tutorial on how to use popular web3 technologies like GUN to build a decentralized web app (dapp)
+- [Writing a Svelte Store with TypeScript](https://javascript.plainenglish.io/writing-a-svelte-store-with-typescript-22fa1c901a4) is a deep dive into writing Svelte stores with TypeScript
+- [How Svelte scopes component styles](https://geoffrich.net/posts/svelte-scoped-styles/) explains scoping using classes and more complex CSS specifiers
+- [SvelteKit Hooks](https://www.youtube.com/watch?v=RarufLoEL08) shows how to use hooks.js in Sveltekit.. When you're done, check out [Part 2](https://www.youtube.com/watch?v=RmIBG3G0-VY)
+- [An early look at SvelteKit](https://www.infoworld.com/article/3630395/an-early-look-at-sveltekit.html) is a post from Infoworld walking through the features and onboarding of SvelteKit
+
+**Libraries, Tools & Components**
+- [sveltekit-netlify-cms](https://github.com/buhrmi/sveltekit-netlify-cms) is a SvelteKit skeleton app configured for use with Netlify CMS
+- [SvelteFireTS](https://github.com/jacobbowdoin/sveltefirets) is a SvelteKit + Typescript + Firebase library inspired by Fireship.io 
+- [stores-x](https://github.com/Anyass3/stores-x) lets you use Svelte stores just like vueX
+- [sveltekit-snippets](https://github.com/stordahl/sveltekit-snippets) is a VSCode extension that provides snippets for common patterns in SvelteKit & Vanilla Svelte
+- [svelte-xactor](https://github.com/wobsoriano/svelte-xactor) is a middleware that allows you to easily convert your xactor machines into a global store that implements the store contract
+- [vite-plugin-pages-svelte](https://github.com/aldy505/vite-plugin-pages-svelte) is a vite plugin for automatic filesystem-based routing
+- [sveltio](https://www.npmjs.com/package/sveltio) is a Svelte wrapper for valtio - a proxy-state library
+- [svelte-transition-classes](https://github.com/rmarscher/svelte-transition-classes) is a custom Svelte transition for adding and swapping CSS classes
+- [Svelte-Boring-Avatars](https://github.com/paolotiu/svelte-boring-avatars) is Svelte port of the popular [Boring Avatars](https://github.com/boringdesigners/boring-avatars) React project
+- [Svelte DataTables](https://github.com/homescriptone/svelte-datatables) brings DataTable, a popular JavaScript library allowing you to easily display your data in a user-friendly table, into your Svelte project.
+- [focus-svelte](https://github.com/chanced/focus-svelte) is a focus trap for Svelte with zero dependencies
+- [filedrop-svelte](https://github.com/chanced/filedrop-svelte) is a file dropzone action & component for Svelte
+
+
+Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) for more templates, adders and adapters from across the Svelte ecosystem.
+
+
+## Before you go, answer the call for speakers!
+
+Svelte Summit Fall 2021 (happening 20 November 2021) is looking for speakers. Submit your talk propsoal before 30 October... all are welcome to present and attend.
+
+### More info on the [sessionize site](https://sessionize.com/svelte-summit-fall-2021/)
+
+Can't wait for the summit? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md b/site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md
new file mode 100644
index 0000000000..12a89a639c
--- /dev/null
+++ b/site/content/blog/2021-11-01-whats-new-in-svelte-november-2021.md
@@ -0,0 +1,85 @@
+---
+title: "What's new in Svelte: November 2021"
+description: Over 5000 stars to light up the showcase
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+With SvelteKit crossing the [80% complete mark](https://github.com/sveltejs/kit/milestone/2), over [5000 stars](https://github.com/sveltejs/kit) on GitHub, and now having more usage than Sapper, there's never been a better time to try it out! Many in the community have, making for quite a large showcase this month...
+
+Also, don't miss out on [Svelte Summit](https://sveltesummit.com/) on November 20th - featuring speakers from around the world. Keep an eye out for a watch party in your area 👀
+
+Now onto what's new!
+
+## New in Svelte and SvelteKit
+- [svelte.dev](https://svelte.dev/) now runs on SvelteKit alongside [sveltesociety.dev](https://sveltesociety.dev). svelte.dev is a relatively complicated site with live code editing, authentication, and a markdown-based blog - making it a great way for us to really test out SvelteKit
+- A new compiler option, `enableSourcemap`, provides more control over the compiler output for JS and CSS sourcemaps (**3.44.0**). With this new feature, SvelteKit and the Vite Svelte plugin can now properly handle environment variables in `.svelte` templates (See [sveltejs/kit#720](https://github.com/sveltejs/kit/issues/720) and [sveltejs/vite-plugin-svelte#201](https://github.com/sveltejs/vite-plugin-svelte/pull/201))
+- The Svelte Language Tools now support reading the configuration of the VS Code CSS settings ([#1219](https://github.com/sveltejs/language-tools/issues/1219))
+- `vite-plugin-svelte` added a new `experimental.prebundleSvelteLibraries` option that makes it much faster to load Svelte libraries with many components like icon libraries and UI frameworks. The option can be set in the root of `svelte.config.js`. Please test it out and give us feedback!
+- SvelteKit will only route endpoints on the client, unless marked as `rel="external"` - reducing the size of the client JS and making it easier to refactor the router in the future ([2656](https://github.com/sveltejs/kit/pull/2656))
+- SvelteKit no longer supports Node 12 ([2604](https://github.com/sveltejs/kit/pull/2604))
+- SvelteKit was upgraded from Vite 2.6.0 to Vite 2.6.12 fixing an issue where Vite would corrupt the Svelte runtime (https://github.com/vitejs/vite/issues/4306). It also included two fixes from the SvelteKit team to avoid or make diagnosing Vite issues in SvelteKit templates easier (https://github.com/vitejs/vite/pull/5192 and https://github.com/vitejs/vite/pull/5193). Vite 2.7 is currently available in beta with additional fixes for SSR
+
+
+To see all updates to Svelte and SvelteKit, check out the [Svelte](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) and [SvelteKit changelog](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md), respectively.
+
+
+---
+
+## Community Showcase
+
+**Apps & Sites**
+- [Tangent](http://tangentnotes.com/) is a clean and powerful notes app for Mac & Windows
+- [The Pudding](https://pudding.cool/) is a digital publication that explains ideas debated in culture with visual essays - rebuilt in SvelteKit
+- [Power Switcher](https://powerswitcher.axpo.com/) is an interactive overview of the development of the power supply in Switzerland, as energy sources migrate to cleaner sources
+- [Sublive](https://sub.live/) is a new way of making music by connecting musicians all over the world with a low-latency and high-quality audio network
+- [Vibify](https://www.vibify.me/) helps you find hidden playlists within your music using your Spotify listening history
+- [Browse Marvel Unlimited by Year](https://marvel.geoffrich.net/) is a SvelteKit site to see what issues are available on Marvel Unlimited for a given year
+- [Files](https://files.community/), a modern file explorer for Windows, has a new site rebuilt with SvelteKit
+- [lil-hash](https://github.com/jackbow/lil-hash) is a simple URL shortener that produces easily rememberable and speakable shortened URLs
+- [PWA Haven](https://github.com/ThaUnknown/pwa-haven) is a collection of small, fast, simple PWAs to replace native OS apps
+- [DottoBit](https://dottobit.com/) is a multi-color 16-bit drawing program with URL sharing built-in
+- [Former Fast Document for Print](https://github.com/zummon/former) is an invoice generator with beautiful designs, abilities for international languages and auto calculation
+- [Helvetikon](https://github.com/noahsalvi/helvetikon) is a community maintained dictionary for the Swiss German language
+- [Palitra App](https://palitra.app/) is a search-based color pallete generator
+
+**Podcasts Featuring Svelte**
+- [Svelte Radio](https://www.svelteradio.com/episodes/svelte-summit-is-coming-up-and-svelte-is-growing) dives into the tech behind the recently released Svelte Summit website and a bunch of other fun stuff!
+- [PodRocket](https://podrocket.logrocket.com/rich-harris), LogRocket's podcast, talks Svelte with Rich Harris
+- [PodRocket also dove deep](https://podrocket.logrocket.com/elderjs) into Elder.js with Nick Reese
+- [Web Rush](https://webrush.io/episodes/episode-153-single-page-application-vs-multi-page-application-with-rich-harris) and Rich Harris talk about the differences between a SPA and MPA, what role the server rendering plays, what client side hydration is, and the state of modern tooling for developing an SPA or MPA
+- [devtools.fm](https://devtools.fm/episode/15) talks with Rich Harris about developing engaging data visualizations and building the tools of tomorrow
+
+**Educational Content**
+- [Have Single-Page Apps Ruined the Web?](https://www.youtube.com/watch?v=860d8usGC0o) Rich Harris answers the controversial question at this year's Jamstack Conf
+- [Svelte vs SvelteKit - What's The Difference?](https://www.youtube.com/watch?v=IKhtnhQKjxQ) LevelUpTuts provides a quick guide to explaining the relationship between the two projects. You can check out the rest of Scott Tolinski's guides to Svelte in his new series, ["Weekly Svelte"](https://www.youtube.com/playlist?list=PLLnpHn493BHF-Onm1MQgKC1psvW-rJuYi)
+- [WebJeda's SvelteKit Hooks](https://www.youtube.com/watch?v=RarufLoEL08&list=PLm_Qt4aKpfKgzcTiMT2cgWGBDBIPK06DQ) series continues this month with Part 3 - Cookie Session Authentication
+- [Writing Context Aware Styles in a Svelte App](https://www.ryanfiller.com/blog/tips/svelte-contex-aware-styles) is a guide to writing self-contained components that are able to dynamically adapt to their parents
+- [A Beginner’s Guide to SvelteKit](https://www.sitepoint.com/a-beginners-guide-to-sveltekit/) takes a beginner-friendly look at both Svelte and SvelteKit and build out a simple web app showing profile pages of imaginary users
+- [Svelte vs React: Ending the Debate](https://massivepixel.io/blog/svelte-vs-react/) is a historical take on the age-old argument
+- [Svelte Snacks | Custom Events for Modal Actions](https://jeremydayslice.hashnode.dev/svelte-snacks-or-custom-events-for-modal-actions) walks through a solid implementation of Svelte's handy custom event system
+- [What Svelte's accessibility warnings won't tell you](https://geoffrich.net/posts/svelte-a11y-limits/) explains how Svelte's a11y warnings work and why you shouldn't count on them to make your app accessible
+
+**Libraries, Tools & Components**
+- [svelte-adapter-azure-swa](https://github.com/geoffrich/svelte-adapter-azure-swa) is an adapter for Svelte apps that creates an Azure Static Web App, using an Azure function for dynamic server rendering
+- [Inlang](https://docs.inlang.dev/getting-started/svelte-kit) is a localization and internationalization toolkit that now supports SvelteKit
+- [svelte-translate-tools](https://github.com/noelmugnier/svelte-translate-tools) extract/generate/compile translation files for your Svelte App at build time
+- [@egjs/svelte-infinitegrid](https://github.com/naver/egjs-infinitegrid/tree/master/packages/svelte-infinitegrid) lets you implement various grids composed of different card elements whose sizes vary
+- [svelte-reactive-css-preprocess](https://github.com/srmullen/svelte-reactive-css-preprocess) makes it easier to update css variable values whenever your component state changes
+- [Sveltegen](https://github.com/snuffyDev/sveltegen) is a CLI for simple and easy creation of actions, components, and routes
+- [svelte-advanced-multistep-form](https://www.npmjs.com/package/svelte-advanced-multistep-form) helps to wrap form elements passing down styles to the component to be rendered, also it presents each form step in a ordered and stylish way
+- [gQuery](https://github.com/leveluptuts/gQuery) is a GraphQL Fetcher & Cache for SvelteKit
+- [date-picker-svelte](https://github.com/probablykasper/date-picker-svelte) is a date and time picker for Svelte
+- [TwelveUI](https://twelveui.readme.io/reference/what-is-twelveui) is a Svelte component library with accessibility built-in
+- [svelte-outclick](https://github.com/babakfp/svelte-outclick/) is a Svelte component that allows you to listen for clicks outside of an element, by providing you an outclick event
+- [svelte-zero-api](https://github.com/ymzuiku/svelte-zero-api) lets you use SvelteKit APIs like client functions - with support for Typescript
+- [svelte-recaptcha-v2](https://github.com/basaran/svelte-recaptcha-v2) is a Google reCAPTCHA v2 implementation for Svelte SPA, SSR and sveltekit static sites.
+- [Svelte Body](https://github.com/ghostdevv/svelte-body) lets you apply styles to the body in routes - designed to work with SvelteKit and Routify.
+- [svelte-debug-console](https://github.com/basaran/svelte-debug-console) is a debug.js implementation for Svelte SPA, SSR and sveltekit static sites that lets you see your debug statements in the browser.
+- [SVEO](https://github.com/didier/sveo) is a dependency-free approach to declare metadata on SvelteKit pages
+- [@svelte-drama/suspense](https://www.npmjs.com/package/@svelte-drama/suspense) is a Svelte component that implements the core idea of React's `<Suspense>`. Also check out [SWR for Svelte](https://www.npmjs.com/package/@svelte-drama/swr) to make refetching even easier.
+- [sveltekit-adapter-browser-extension](https://github.com/antony/sveltekit-adapter-browser-extension) is an adapter for SvelteKit which turns your app into a cross-platform browser extension
+
+Check out the community site [sveltesociety.dev](https://sveltesociety.dev/templates/) for more tools, templates, adders and adapters from across the Svelte ecosystem.
+
+Looking for more Svelte goodness? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs)!
diff --git a/site/content/blog/2021-12-01-whats-new-in-svelte-december-2021.md b/site/content/blog/2021-12-01-whats-new-in-svelte-december-2021.md
new file mode 100644
index 0000000000..f50f25b0f4
--- /dev/null
+++ b/site/content/blog/2021-12-01-whats-new-in-svelte-december-2021.md
@@ -0,0 +1,91 @@
+---
+title: "What's new in Svelte: December 2021"
+description: "Svelte Summit Fall 2021 Recap, Rich Harris joins Vercel, and Kevin goes full-time on Svelte Society"
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+With SvelteKit getting more and more stable each day, there's not much to cover in terms of code changes other than bug fixes... So, in this month's newsletter, we'll be covering Svelte Summit Fall 2021!
+
+If you want to dive deep into the last month's worth of bug fixes, check out the [Svelte](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) and [SvelteKit](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md) changelogs, respectively.
+
+
+## What happened at Svelte Summit?
+
+If you missed Svelte Summit, you can watch the entire live stream on [YouTube](https://www.youtube.com/watch?v=1Df-9EKvZr0) and catch a recap in the [#svelte-summit channel on Discord](https://discord.gg/YmHcdnhu).
+
+Here are the highlights:
+- [Rich Harris](https://twitter.com/rich_harris) took us through a tour of Svelte's history and announced [his move to Vercel](https://vercel.com/blog/vercel-welcomes-rich-harris-creator-of-svelte) - where he will be helping maintain Svelte full-time! ([20:00](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=1200s))
+- [Steph Dietz](https://twitter.com/steph_dietz_) explained how Svelte's simple abstractions makes it easy for beginners and experts alike to learn and use JavaScript - without the boilerplate ([29:00](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=1740s))
+- [Kevin Bridges](https://twitter.com/kevinast) dove deep into Svelte's reactivity logic by visualizing it through `ReflectiveCounter` and showing how to "fine tune" it, as needed. A full "syllabus" for the presentation is available on [Kevin's site](https://wiibridges.com/presentations/ResponsiveSvelte/). ([42:55](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=2575s))
+- [Mateo Morris](https://twitter.com/_mateomorris) launched [Primo](https://primo.af/), an all-in-one SvelteKit CMS to help build and manage static sites ([1:12:34](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=4354s))
+- [Guillermo Rauch](https://vercel.com/about/rauchg) explained Vercel's commitment to Svelte, what it means to have Rich on the team, and what's coming next from the company... ([1:21:54](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=4914s))
+- [Geoff Rich](https://twitter.com/geoffrich_) introduced various ways to modify motion and transitions within Svelte to be more accessible to all users of the web. Slides and a full transcription of the talk are available on [Geoff's site](https://geoffrich.net/posts/svelte-summit-2021/). ([1:32:30](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=5550s))
+- [Dean Fogarty](https://df.id.au/) demoed a number of different use-cases for custom stores - transforming data to and from storage mechanisms within Svelte. Transcript and code is available on [Dean's GitHub](https://github.com/angrytongan/svelte-summit-2021). ([1:43:06](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=6186s))
+- [Kellen Mace](https://twitter.com/kellenmace) shared how we can let content creators keep using WordPress, while leveraging Svelte on the frontend to provide a phenomenal user experience ([1:49:30](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=6570ss))
+- [Ben Holmes](https://twitter.com/bholmesdev) explained the "islands" architecture and how 11ty + [Slinkity](https://slinkity.dev/) can bring these islands to any HTML template ([2:17:15](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=8235s))
+- [Scott Tolinski](https://twitter.com/stolinski) shared the lessons learned from rewriting the React-based LevelUpTutorials in Svelte and "found developer bliss" ([3:16:35](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=11795s))
+- [Svelte Sirens](https://sveltesirens.dev) was announced as the new Svelte community for women, non-binary and allies. Their first event was on November 29th - all future events can be found on [the Svelte Sirens website](https://sveltesirens.dev/events) ([3:50:45](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=13845s))
+- [Rich Harris](https://twitter.com/rich_harris) discussed creating libraries with SvelteKit, better ways to link packages when developing, and how SvelteKit helps with modern JavaScript library development ([3:56:00](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=14160s))
+- [Ken Kunz](https://twitter.com/kennethkunz) explained how finite state machines (and the svelte-fsm library) can make managing Svelte component states more... manageable. Examples from the talk are available on [Ken's GitHub](https://github.com/kenkunz/svelte-fsm/wiki/Examples). ([4:07:18](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=14838s))
+- [Austin Crim](https://twitter.com/crim_codes) connected learning to code on the web to learning how to play an instrument. By giving learners early wins and introducing the fundamentals through real-world apps, learning Svelte (and the fundamentals underneath) doesn't have to be a chore ([4:21:50](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=15710s))
+- [Jesse Skinner](https://twitter.com/JesseSkinner) brought our legacy apps into the future by explaining how to use (and reuse) Svelte components within React (and even jQuery!) projects ([4:32:30](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=16350s))
+- [Jim Fisk](https://twitter.com/jimafisk) and [Stephanie Luz](https://stephanie-luz.medium.com/) introduced [Plenti](https://plenti.co/) and its theming tools to make building new Svelte sites much faster ([4:59:00](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=17940s))
+- [Evyatar Alush](https://twitter.com/evyataral) helped us all make (and maintain) better forms using a powerful validation library called [Vest](https://github.com/ealush/vest) ([5:08:55](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=18535s))
+- Dominik G. presented a fresh take on icon libraries - one that reduces the bundle size of applications and opens up the entire iconify library for use in any Svelte app ([5:30:04](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=19804s))
+
+Thanks to [Kevin](https://twitter.com/kevmodrome) and all the Svelte Society volunteers for pulling together such an amazing event! Excitingly, [Kevin announced](https://twitter.com/kevmodrome/status/1463151477174714373) after the event that he will now be working full-time on Svelte Society! You can check out all the talks, broken up into individual videos for convenience, in [this Svelte Society YouTube Playlist](https://www.youtube.com/playlist?list=PL8bMgX1kyZTg2bI9IOMgfBc8lrU3v2itt).
+
+If you have feedback on the Svelte Summit, Kev is [looking for feedback on the Svelte subreddit](https://www.reddit.com/r/sveltejs/comments/qzgo3k/svelte_summit_feedback/) 👀
+
+
+---
+
+## Community Showcase
+
+**Apps & Sites**
+- [pixeldrain](https://github.com/Fornaxian/pixeldrain_web) is a free-to-use file sharing platform
+- [LifeHash](http://lifehash.info/) generates beautiful visual hashes from Blockchain Commons
+- [simple-cloud-music](https://github.com/dufu1991/simple-cloud-music) is a lightweight third-party NetEase cloud music player for modern browsers (likely only works on Chrome)
+- [palette.rocks](https://palette.rocks/) is a color palette generator with contrast-checking built-in
+- [Kadium](https://github.com/probablykasper/kadium) is an app for staying on top of YouTube channel uploads 
+- [Multi-Monitor Calculator](https://multimonitorcalculator.com/) is a tool for planning your multi-monitor setup
+- [Your Home](https://yourhome.fb.com/) is an interactive overview of Facebook's privacy settings
+- [Svelte Crush](https://svelte-crush.netlify.app/) is a Candy Crush style match-3 game
+- [100.000 Corona deaths in Germany](https://twitter.com/h_i_g_s_c_h/status/1463767113563353089?s=20) is a visualization made for Spiegel Gesundheit
+
+**Looking for a Svelte project to work on? Interested in helping make Svelte's presence on the web better?** Check out [the list of open issues](https://github.com/svelte-society/sveltesociety-2021/issues) if you'd like to contribute to the Svelte Society rewrite in SvelteKit.
+
+
+**Videos, Blogs and Podcasts**
+- [How To Make and Publish a Svelte Library](https://www.youtube.com/watch?v=_TymiadmPrc)
+- [SvelteKit is now fully supported in WebContainers](https://blog.stackblitz.com/posts/sveltekit-supported-in-webcontainers/)
+- [Introducing Svelte, and Comparing Svelte with React and Vue](https://joshcollinsworth.com/blog/introducing-svelte-comparing-with-react-vue)
+- [Testing a Svelte app with Jest](https://www.roboleary.net/2021/11/18/svelte-app-testing-jest.html)
+- [How to create a toast notification library package with SvelteKit](https://www.sarcevic.dev/blog/toasting-in-svelte)
+- [Svelte training: Here you can learn Svelte](https://sustainablewww.org/principles/svelte-training-here-you-can-learn-svelte)
+- [Introduction to Svelte Actions](https://blog.logrocket.com/svelte-actions-introduction/)
+- [Enjoy making DAPPs using SvelteWeb3](https://chiuzon.medium.com/enjoy-making-dapps-using-svelteweb3-b78dfea1d902)
+- [Svelte creator: Web development should be more fun](https://www.infoworld.com/article/3639521/svelte-creator-web-development-should-be-more-fun.html)
+- [Svelte Radio: Rich Harris is now working full-time on Svelte 🤯](https://share.transistor.fm/s/d9b04961)
+- [Web Rush: Svelte and Elder.js with Nick Reese](https://webrush.io/episodes/episode-158-svelte-and-elderjs-with-nick-reese)
+- [Building SvelteKit applications with Serverless Redis](https://blog.upstash.com/svelte-with-serverless-redis)
+
+**Libraries, Tools & Components**
+- [svelte-cubed](https://github.com/Rich-Harris/svelte-cubed) is a Three.js component library for Svelte - created by Rich Harris for his presentation at Svelte Summit Fall 2021
+- [svelte-fsm](https://github.com/kenkunz/svelte-fsm) is a tiny, simple, expressive, pragmatic Finite State Machine (FSM) library, optimized for Svelte
+- [bromb](https://github.com/samuelstroschein/bromb) is a feedback widget for websites/web apps that is small and easy to integration/self-host
+- [Spaper](https://github.com/Oli8/spaper) is a set of PaperCSS components for Svelte
+- [svelte-intl-precompile](https://github.com/cibernox/svelte-intl-precompile) is an i18n library for Svelte that analyzes and compiles your translations at build time
+- [svelte-preprocess-svg](https://github.com/svitejs/svelte-preprocess-svg) automatically optimizes inline svg in Svelte components for better performance and reduced file size
+- [svelte-subcomponent-preprocessor](https://github.com/srmullen/svelte-subcomponent-preprocessor) allows you to write more than one component within a svelte file
+- [svelte-pdfjs](https://github.com/gtm-nayan/svelte-pdfjs) is a crude implementation of a Svelte PDF viewer component
+- [svelte-inview](https://github.com/maciekgrzybek/svelte-inview) is a Svelte action that monitors an element enters or leaves the viewport/parent element
+- [sveltekit-adapter-wordpress-shortcode](https://github.com/tomatrow/sveltekit-adapter-wordpress-shortcode) is an adapter for SvelteKit which turns your app into a wordpress shortcode
+- [svelte-websocket-store](https://github.com/arlac77/svelte-websocket-store) is a Svelte store with a websocket backend
+- [Svelte Auto Form](https://github.com/leveluptuts/auto-form) is a fast and fun form library focused on ease of use, rather than flexibility.
+- [set-focus](https://www.npmjs.com/package/@svackages/set-focus) is an Svelte action that will set focus on `<a>` or `<button>` elements as soon as they mount - useful for some experiences and testing
+
+Got an idea for SvelteKit? Check out the new [GitHub Discussions](https://github.com/sveltejs/kit/discussions) in the Svelte repo. You can also join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs).
+
+See you next ~~month~~ year!
diff --git a/site/content/blog/2022-01-01-whats-new-in-svelte-january-2022.md b/site/content/blog/2022-01-01-whats-new-in-svelte-january-2022.md
new file mode 100644
index 0000000000..bf7bc3df57
--- /dev/null
+++ b/site/content/blog/2022-01-01-whats-new-in-svelte-january-2022.md
@@ -0,0 +1,77 @@
+---
+title: "What's new in Svelte: January 2022"
+description: "Faster builds with SvelteKit and a much anticipated REPL feature"
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+Happy new year, Svelte Community! Lots to share this month across Svelte, SvelteKit, Language Tools and the Showcase. Thanks to everyone who made 2021 a great year to use Svelte. Looking forward to the next one 🚀
+
+## What's new in SvelteKit
+- `@sveltejs/adapter-static` for SvelteKit now has a `precompress` option to make brotli compression of assets and pages easier to do out of the box ([#3079](https://github.com/sveltejs/kit/pull/3079))
+- Concurrency mode in SvelteKit will now prerender pages in parallel ([#3120](https://github.com/sveltejs/kit/pull/3120)). It is enabled by default in `1.0.0-next.205` and later
+- CSS is now automatically included before JS for improved page performance ([d13efe](https://github.com/sveltejs/kit/commit/d138efe21692f5925f1e89afc0a33f42d6a1a711))
+- A new config option adds the ability to disable service worker registration to do your own custom registration ([#2988](https://github.com/sveltejs/kit/pull/2988))
+- SSR route-splitting is here - breaking monolithic builds into smaller pieces for improved startup and routing performance ([#2931](https://github.com/sveltejs/kit/pull/2931))
+- `request.origin/path/query` is now `request.url` - simplifying the config and page `load` functions ([#3126](https://github.com/sveltejs/kit/pull/3126))
+- After the [update to Vite 2.7](https://github.com/sveltejs/kit/pull/3018), SvelteKit users are [reporting significant performance improvements](https://www.reddit.com/r/sveltejs/comments/rljhfc/sveltekit_massive_compiler_improvement_by/) and loading third-parties libraries in SSR has also been greatly improved
+- SvelteKit server will now automatically restart when the config files is changed ([vite-plugin-svelte#237](https://github.com/sveltejs/vite-plugin-svelte/pull/237))
+
+
+## Other new bits from `svelte/*`
+- [Svelte 3.44.3](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3443) is out with a few bug fixes in the binding and loop code
+- Svelte Language Tools has introduced support for the then/catch shorthands from Svelte 3.41 and TypeScript's "go to" functionality ([105.8.0 and later](https://github.com/sveltejs/language-tools/releases/tag/extensions-105.8.0))
+- The Svelte REPL got a nice upgrade as well - letting you delete saved REPLs. Try it out by logging in at [svelte.dev/apps](https://svelte.dev/apps)
+
+
+---
+
+## Community Showcase
+
+**Apps & Sites**
+- [Discover Twitter Spaces](https://github.com/navneetsharmaui/discover-twitter-spaces) is a tool that helps you find the Twitter Spaces
+- [Modern Fluid Typography Editor](https://github.com/codeAdrian/modern-fluid-typography-editor) helps create beautiful fluid typography using CSS clamp
+- [Unnwhiteboard](https://github.com/AviKKi/unnwhiteboard) is a job board for companies (or teams) that don't do "whiteboard" interviews
+- [Secret Santa](https://gitlab.com/arturoguzman/secret-santa-sveltekit) is a gift giving coordination app developed with easiness in mind
+- [LogSnag](https://logsnag.com/) notifies you of your projects' events and provides you with a timeline to keep track of anything important that happens
+- [Version 0.2 of Tangent](http://tangentnotes.com/Download), a Svelte-based note writing app, is now in beta
+- [Intl Explorer](https://github.com/jesperorb/intl-explorer) is a tool for viewing output for all possible formatters for Intl
+
+A lot of work this month has gone into migrating the Svelte main website and Svelte REPL to live in the https://github.com/sveltejs/sites repository - including a brand new homepage for [svelte.dev](https://svelte.dev/). Thanks to all the contributors who made this possible!
+
+If you're looking for a fun SvelteKit project to work on, [you can contribute to the Svelte Society site rewrite](https://github.com/svelte-society/sveltesociety-2021/issues) 💅
+
+
+**Learning and Listening**
+
+_To Read_
+- [Mutating Query Params in SvelteKit Without Page Reloads or Navigations](https://dev.to/mohamadharith/mutating-query-params-in-sveltekit-without-page-reloads-or-navigations-2i2b) by Mohamad Harith
+- [Svelte for Reactaholics : A guide for React developers](https://www.100ms.live/blog/svelte-guide-for-react-developers) by Puru Vijay
+- [Svelte's lifecycle methods can be used anywhere](https://geoffrich.net/posts/svelte-lifecycle-examples/) and [The many meanings of $ in Svelte](https://geoffrich.net/posts/svelte-$-meanings/) by Geoff Rich
+- [Vercel and Svelte: A Perfect Match for Web Developers](https://thenewstack.io/vercel-and-svelte-a-perfect-match-for-web-developers/) by Darryl K. Taft
+- [User-defined TailwindCSS Color Scheme with Svelte Stores](https://blog.dayslice.io/user-defined-tailwindcss-color-scheme-with-svelte-stores-ad80ca2cf038) by jeremy zaborowski
+- [Ionic 6 + Svelte 🚀](https://medium.com/@raymondboswel/ionic-6-svelte-ae904caa82df) by Raymond Boswel
+- [What happened in #Svelte language tools this year](https://twitter.com/dummdidumm_/status/1474158105395179525?t=ytj2K2Q52iD5-lNyLnQaAQ&s=19) by Simon H
+
+_To Watch_
+- [The Future of Svelte (Interview with Rich Harris)](https://www.youtube.com/watch?v=uQntFkK8Z54) by Lee Robinson, Director of Developer Relations at Vercel
+- [Svelte is becoming the go-to framework](https://www.youtube.com/watch?v=fo6BKY2xR2w&t=1834s) for Obsidian plugin developers
+- [Sveltekit WordPress Headless Blog](https://www.youtube.com/watch?v=c0UDVgjPxFw) by WebJeda
+- [Getting started with SvelteKit](https://www.youtube.com/watch?v=i2suPKMPUFA) by Lihau Tan
+- [Deploy a full-stack SvelteKit app on Cloudflare Pages](https://www.youtube.com/watch?v=Wc1_U6Dy5Tw) by 1nf
+
+_To Listen To_
+- [Syntax podcast: How To Do Things In Svelte](https://podcasts.apple.com/ca/podcast/how-to-do-things-in-svelte/id1253186678?i=1000544796072)
+- [JS Party #205: So much Sveltey goodness (w/ Rich Harris)](https://changelog.com/jsparty/205)
+
+**Libraries, Tools & Components**
+- [svelte-headlessui](https://github.com/rgossiaux/svelte-headlessui) is an unofficial, complete Svelte port of the Headless UI component library
+- [svelte-forms v2](https://chainlist.github.io/svelte-forms/) has been released - the author is [looking for feedback](https://www.reddit.com/r/sveltejs/comments/r6354j/svelteforms_v2_has_been_released/)
+- [Percival](https://github.com/ekzhang/percival) is a declarative data query and visualization language
+- [Svelte FlatList](https://github.com/snuffyDev/svelte-flatlist) is a mobile-friendly, simple, and customizable draggable menu
+- [svelte-keyed](https://github.com/bryanmylee/svelte-keyed) is a writable derived store for objects and arrays
+- [Svemix](https://github.com/svemix/svemix) is Remix for Svelte - providing server scripts inside your Svelte components/routes, which will be transformed into endpoints
+
+Want to add something to the showcase? Need help bringing your next idea to life in Svelte? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs).
+
+See ya next month!
diff --git a/site/content/blog/2022-01-13-accelerating-sveltes-development.md b/site/content/blog/2022-01-13-accelerating-sveltes-development.md
new file mode 100644
index 0000000000..7860c2acbc
--- /dev/null
+++ b/site/content/blog/2022-01-13-accelerating-sveltes-development.md
@@ -0,0 +1,67 @@
+---
+title: "Accelerating Svelte's Development"
+description: "Scaling the team, building partnerships, and growing the community"
+author: Ben McCann
+authorURL: https://www.benmccann.com/
+---
+
+[Svelte](/) is a frontend framework for building fast reactive web apps with less code. If you’re new here, [check out the tutorial](/tutorial) or [examples](/examples) to get a feel for it.
+
+Svelte was [launched 5 years ago](https://news.ycombinator.com/item?id=13069841) and has [come a long way in the time since](https://www.youtube.com/watch?v=YeY5M29-WcY). In 2021, as usage more than doubled, it was voted the [most loved](https://insights.stackoverflow.com/survey/2021#section-most-loved-dreaded-and-wanted-web-frameworks) framework with the [most satisfied](https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/) developers in a pair of surveys. Alongside high-profile companies like The New York Times, Apple, Spotify, Square, Rakuten, Bloomberg, Reuters, Ikea, Brave, and countless others, Svelte is used to power everything from hobby projects to embedded systems interfaces.
+
+To help developers build fully-featured applications with Svelte without worrying about the hard parts, we’ve been developing the [SvelteKit](https://kit.svelte.dev/) application framework. We’re moving quickly towards a [stable 1.0 release](https://github.com/sveltejs/kit/issues?q=is%3Aopen+is%3Aissue+milestone%3A1.0) with the help of early adopters who have already downloaded SvelteKit almost one million times.
+
+## Scaling the team
+
+Rich Harris, Svelte’s creator, has [joined Vercel to work on Svelte full-time](https://vercel.com/blog/vercel-welcomes-rich-harris-creator-of-svelte). We’re incredibly excited to have Rich’s level of involvement in Svelte increase even more and have him steward Svelte into the future.
+
+Svelte has been made possible by the work of a large, dedicated community. Svelte has added numerous core maintainers over the course of the pandemic, including three this past week. In alphabetical order:
+- [benmccann](https://github.com/benmccann) - primary maintainer of SvelteKit for much of 2021
+- [bluwy](https://github.com/bluwy) - major contributor across SvelteKit, vite-plugin-svelte, and Vite
+- [dominikg](https://github.com/dominikg) - creator of vite-plugin-svelte
+- [dummdidumm](https://github.com/dummdidumm) - maintainer of language-tools, which includes the VS Code extension and `svelte-check`
+- [ehrencrona](https://github.com/ehrencrona) - contributor to SvelteKit and uses Svelte at work
+- [geoffrich](https://github.com/geoffrich) - has driven efforts to improve the accessibility of the Svelte site and documentation
+- [GrygrFlzr](https://github.com/GrygrFlzr) - holds a unique status as a maintainer of both SvelteKit and Vite
+- [Halfnelson](https://github.com/Halfnelson) - creator of svelte-native
+- [ignatiusmb](https://github.com/ignatiusmb) - regular SvelteKit contributor especially to TypeScript support
+- [jasonlyu123](https://github.com/jasonlyu123) - maintainer of language-tools, which includes the VS Code extension and `svelte-check`
+- [kaisermann](https://github.com/kaisermann) - creator of svelte-preprocess
+- [RedHatter](https://github.com/RedHatter) - creator of Svelte Devtools
+- [rixo](https://github.com/rixo) - creator of svelte-hmr
+
+Svelte began accepting donations via [OpenCollective](https://opencollective.com/svelte) last year and has now had over $60,000 donated to-date with [Cohere](https://cohere.ai/) giving $10,000 just today. We hope that these funds will allow existing maintainers to spend more time on Svelte or that the funds could otherwise support Svelte on a part-time or contract basis, which we will continue to investigate.
+
+## Partnerships
+
+Multiple major cloud vendors are stepping up to make deploying SvelteKit applications anywhere a seamless experience. As a result of Rich’s new job, SvelteKit will soon run on [Vercel Edge Functions](https://vercel.com/features/edge-functions). Netlify has made [big contributions](https://github.com/sveltejs/kit/pull/2113) to the SvelteKit Netlify adapter and also [updated](https://github.com/dependents/node-precinct/pull/88) their zip-it-and-ship-it tool to better support SvelteKit. The recent [Cloudflare Pages launch](https://blog.cloudflare.com/cloudflare-pages-goes-full-stack/) featured SvelteKit as a day one partner via a [new adapter](https://github.com/sveltejs/kit/tree/master/packages/adapter-cloudflare) written by Svelte maintainers [pngwn](https://twitter.com/evilpingwin) and [lukeed](https://twitter.com/lukeed05), the latter of whom joined Cloudflare in 2021. [Begin](https://begin.com) created a [SvelteKit adapter](https://github.com/architect/sveltekit-adapter) for [Architect](https://arc.codes) apps. And community members have [contributed adapters](https://sveltesociety.dev/components#adapters) for environments such as Firebase and Deno, showcasing SvelteKit’s ability to run wherever JavaScript does.
+
+We’ve also been working closely with the [Vite](https://vitejs.dev) team to iron out SSR issues uncovered by SvelteKit users. Vite is the build tool that makes the SvelteKit developer experience possible, and thanks to hard work from a contributor base that includes representatives of multiple frameworks, recent releases have solved almost all the issues we’ve been tracking as SvelteKit 1.0 release blockers.
+
+## A growing community
+
+[SvelteSociety](https://sveltesociety.dev/) just hosted the [4th Svelte Summit](https://sveltesummit.com/) — [read a summary here](https://svelte.dev/blog/whats-new-in-svelte-december-2021#what-happened-at-svelte-summit) — and Kevin Åberg Kultalahti is [going full-time to lead SvelteSociety](https://twitter.com/kevmodrome/status/1463151477174714373). In addition to hosting Svelte Summit, Kevin and SvelteSociety host and manage the [Svelte Radio podcast](https://www.svelteradio.com/), the [SvelteSociety YouTube channel](https://www.youtube.com/SvelteSociety), and the [Svelte subreddit](https://www.reddit.com/r/sveltejs). SvelteSociety has become the home of all things related to the Svelte community, with the sveltejs/community and sveltejs/integrations repos being retired in favor of [sveltesociety.dev](https://sveltesociety.dev/), which has been redesigned and rebuilt in SvelteKit. In October [Brittney Postma](https://github.com/brittneypostma), [Willow aka GHOST](https://ghostdev.xyz), [Steph Dietz](https://github.com/StephDietz), and [Gen Ashley](https://twitter.com/coderinheels) founded [Svelte Sirens](https://sveltesirens.dev/), a group for women & non-binary community members and their allies.
+
+Hundreds of developers join the Svelte Discord every week to chat about Svelte. You may have noticed that, as of recently, some members of the server have purple names. These are people with the ambassadors role, which was created to recognise some of the community’s most valued members and help manage the demands of a rapidly growing community. Svelte ambassadors are people who are well known for their helpfulness and contributions and for upholding Svelte’s reputation as a friendly, welcoming community, and we’re deeply grateful for their involvement.  The initial ambassadors in alphabetical order are:
+- [babichjacob](https://github.com/babichjacob)
+- [brady fractal](https://github.com/FractalHQ)
+- [brittney postma](https://github.com/brittneypostma)
+- [d3sandoval](https://github.com/d3sandoval)
+- [geoffrich](https://github.com/geoffrich)
+- [kev](https://github.com/kevmodrome)
+- [puru](https://github.com/PuruVJ)
+- [rainlife](https://github.com/stephane-vanraes)
+- [rmunn](https://github.com/rmunn)
+- [stolinski](https://github.com/stolinski)
+- [swyx](https://github.com/sw-yx)
+- [theo](https://github.com/theo-steiner)
+
+We’re also testing out [GitHub discussions on SvelteKit](https://github.com/sveltejs/kit/discussions) and may bring this to other repos in the Svelte organization if feedback is positive. 
+
+## Things to watch
+
+SvelteKit is continuing to progress towards 1.0 and, in just the past week, we have added major features like [improved client-only rendering](https://github.com/sveltejs/kit/pull/2804), [routing hooks](https://github.com/sveltejs/kit/pull/3293), and [the ability to pass data from child components to layouts](https://github.com/sveltejs/kit/pull/3252) (e.g. to support easier management of `<meta>` tags). We're currently working on a number of other high priority items such as discussing API designs for features like streaming and file uploads and contributing to the upcoming Vite 2.8 release.
+
+While a lot of effort has been going into SvelteKit recently, we continue to progress the entire ecosystem. [Svelte 3.46.0](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3460) was one of our biggest releases in awhile with two major new features added: [constants in markup](https://github.com/sveltejs/rfcs/blob/master/text/0007-markup-constants.md) and [style directives](https://github.com/sveltejs/rfcs/blob/master/text/0008-style-directives.md).
+
+Svelte and SvelteKit’s trajectories have been accelerated by the numerous investments above and there will be many more updates to come — subscribe to the [blog](/blog) via [RSS](https://svelte.dev/blog/rss.xml) or check monthly to be the first to get them.
diff --git a/site/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md b/site/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md
new file mode 100644
index 0000000000..9de6a3a28d
--- /dev/null
+++ b/site/content/blog/2022-02-01-whats-new-in-svelte-february-2022.md
@@ -0,0 +1,106 @@
+---
+title: "What's new in Svelte: February 2022"
+description: "Rapid-fire releases across Svelte, SvelteKit and the community"
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+Happy February, everyone! Over the last month or so, we've seen Svelte and SvelteKit [develop at rapid speed](accelerating-sveltes-development), new community rules across the [Reddit](https://www.reddit.com/r/sveltejs/comments/s9n8ou/new_rules/), [GitHub](https://github.com/sveltejs/community/blob/main/CODE_OF_CONDUCT.md) and [Discord](https://discord.com/channels/457912077277855764/831611707667382303/935264550436102315), and quite a few amazing apps, tutorials and libraries.
+
+Let's take a look...
+
+## Highlights from the Svelte changelog
+- **3.45.0** brought a [new a11y warning `a11y-no-redundant-roles`](https://svelte.dev/docs#accessibility-warnings-a11y-no-redundant-roles), destructuring and caching fixes
+- **3.46.0** added the much requested [`{@const}` tag](https://svelte.dev/docs#template-syntax-const) and [`style:` directive](https://svelte.dev/docs#template-syntax-element-directives-style-property)
+- Check out **3.46.1 - 3.46.3** for fixes to the `{@const}` tag and `style:` directive, along with a number of fixes to animations
+- [AST output is now available in the Svelte REPL](https://svelte.dev/repl/hello-world)
+
+## What's new in SvelteKit
+- `inlineStyleThreshold` allows you to specify where inline stylesheets are inserted into the page ([Docs](https://kit.svelte.dev/docs/configuration#inlinestylethreshold), [#2620](https://github.com/sveltejs/kit/pull/2620))
+- `beforeNavigate`/`afterNavigate` lifecycle functions lets you add functionality before or after a page navigation ([Docs](https://kit.svelte.dev/docs/modules#$app-navigation), [#3293](https://github.com/sveltejs/kit/pull/3293))
+- Platform context can now be passed from adapters ([Docs](https://kit.svelte.dev/docs/adapters#supported-environments-platform-specific-context), [#3429](https://github.com/sveltejs/kit/pull/3429))
+- Hooks now have an `ssr` parameter in `resolve` to make it easier to skip SSR, when needed ([Docs](https://kit.svelte.dev/docs/hooks#handle), [#2804](https://github.com/sveltejs/kit/pull/2804))
+- `$page.stuff` provides a mechanism for pages to pass data 'upward' to layouts ([Docs](https://kit.svelte.dev/docs/loading#input-stuff), [#3252](https://github.com/sveltejs/kit/pull/3252))
+- Fallthrough routes let you specify where to route when an route can't be loaded ([Docs](https://kit.svelte.dev/docs/routing#advanced-routing-fallthrough-routes), [#3217](https://github.com/sveltejs/kit/pull/3217))
+
+**New configs**
+- Content Security Policy (CSP) is now supported for increased security when using inline javascript or stylesheets ([Docs](https://kit.svelte.dev/docs/configuration#csp), [#3499](https://github.com/sveltejs/kit/pull/3499))
+- `kit.routes` config allows you to customise public/private modules during build ([Docs](https://kit.svelte.dev/docs/configuration#routes), [#3576](https://github.com/sveltejs/kit/pull/3576))
+- `prerender.createIndexFiles` config lets you prerender index.html files as their subfolder's name ([Docs](https://kit.svelte.dev/docs/configuration#prerender), [#2632](https://github.com/sveltejs/kit/pull/2632))
+- HTTP methods can now be overridden using `kit.methodOverride` ([Docs](https://kit.svelte.dev/docs/routing#endpoints-http-method-overrides), [#2989](https://github.com/sveltejs/kit/pull/2989))
+
+**Config changes**
+- `config.kit.hydrate` and `config.kit.router` are now nested under `config.kit.browser` ([Docs](https://kit.svelte.dev/docs/configuration#browser), [3578](https://github.com/sveltejs/kit/pull/3578))
+
+**Breaking change**
+- use `Request` and `Response` objects in endpoints and hooks ([#3384](https://github.com/sveltejs/kit/pull/3384))
+
+
+---
+
+## Community Showcase
+
+**Apps & Sites**
+- [timb(re)](https://paullj.github.io/timb) is a live music programming environment
+- [Music for Programming](https://musicforprogramming.net/latest/) is a series of mixes intended for listening while `${task}` to focus the brain and inspire the mind
+- [Team Tale](https://teamtale.app/) allows two authors to write the same story in a tag-team sort of fashion
+- [Puzzlez](https://www.puzzlez.io/) is an online place to play Sudoku and Wordle
+- [Closed Caption Creator](https://www.closedcaptioncreator.com/) makes it easy to add subtitles to your video on Windows, Mac and Google Chrome
+- [SC3Lab](https://sc3-lab.netlify.app/) is a code generator for experimenting with svelte-cubed and three.js
+- [Donkeytype](https://github.com/0ql/Donkeytype) is a minimalistic and lightweight typingtest inspired by Monkeytype.
+- [Above](https://above.silas.pro/) is a visual routine timer built for the ADHD/autistic mind
+- [base.report](https://base.report/) is a modern research platform for serious investors
+- [String](https://string.kampsy.xyz/) turns your Phone into a secure portable audio recorder, making it easy to capture and share personal notes, family moments, classroom lectures, and more
+- [The Raytracer Challenge REPL](https://github.com/jakobwesthoff/the_raytracer_challenge_repl) provides a live editor interface to configure a raytraced scene and render it live in any modern browser
+- [awesome-svelte-kit](https://github.com/janosh/awesome-svelte-kit) is a list of awesome examples of SvelteKit in the wild
+- [Map Projection Explorer](https://www.geo-projections.com/) lets you explore different map projections and explains their differences
+- [Rubiks](https://github.com/MeharGaur/rubiks) is a Rubik's Cube simulator
+- [Pianisto](https://pianisto.net/) is a working piano made with SVG, ToneJS and a lot of patience
+
+Want to work on a SvelteKit site with others, [try contributing to the Svelte Society site](https://github.com/svelte-society/sveltesociety-2021/issues)!
+
+
+**Learning and Listening**
+
+_To Read_
+- [Accelerating Svelte's Development](https://svelte.dev/blog/accelerating-sveltes-development) by Ben McCann
+- [Storybook for Vite](https://storybook.js.org/blog/storybook-for-vite/)
+- [Let's learn SvelteKit by building a static Markdown blog from scratch](https://joshcollinsworth.com/blog/build-static-sveltekit-markdown-blog) by Josh Collinsworth
+- [Building an iOS app with Svelte, Capacitor and Firebase](https://harryherskowitz.com/2022/01/05/tapedrop-app.html) by Harry Herskowitz
+- [Mutating Query Params in SvelteKit Without Page Reloads or Navigations](https://dev.to/mohamadharith/mutating-query-params-in-sveltekit-without-page-reloads-or-navigations-2i2b) and [Workaround for Bubbling Custom Events in Svelte](https://dev.to/mohamadharith/workaround-for-bubbling-custom-events-in-svelte-3khk) by Mohamad Harith
+- [How to build a full stack serverless application with Svelte and GraphQL](https://dev.to/shadid12/how-to-build-a-full-stack-serverless-application-with-svelte-graphql-and-fauna-5427) by Shadid Haque
+- [How to Deploy SvelteKit Apps to Github Pages](https://sveltesaas.com/articles/sveltekit-github-pages-guide/)
+- [Creating a dApp with SvelteKit](https://anthonyriley.org/2021/12/31/creating-a-dapp-with-sveltekit/) by Anthony Riley
+- [Comparing Svelte Reactivity Options](https://opendirective.net/2022/01/06/comparing-svelte-reactivity-options/) by Steve Lee
+
+_To Watch_
+- [Integrating Storybook with SvelteKit](https://www.youtube.com/watch?v=Kc1ULlfyUcw) and [Integrating FaunaDB with Svelte](https://www.youtube.com/watch?v=zaoLZc76uZM) by the Svelte Sirens
+- [SvelteKit Crash Course Tutorial](https://www.youtube.com/watch?v=9OlLxkaeVvw&list=PL4cUxeGkcC9hpM9ARM59Ve3jqcb54dqiP) by The Net Ninja
+- [Svelte for Beginners](https://www.youtube.com/watch?v=BrkrOjknC_E&list=PLA9WiRZ-IS_ylnMYxIFCsZN6xVVSvLuHk) by Joy of Code
+- [SvelteKit For Beginners | Movie App Tutorial](https://www.youtube.com/watch?v=ydR_M0fw9Xc) by Dev Ed
+- [SvelteKit $app/stores](https://www.youtube.com/watch?v=gBPhr1xbgaQ) by lihautan
+- [Sveltekit - Get All Routes/Pages](https://www.youtube.com/watch?v=Y_NE2R3HuOU) by WebJeda
+
+_To Listen To_
+- [New Year, New Svelte!?](https://share.transistor.fm/s/36212cdc) from Svelte Radio
+- [So much Sveltey goodness (featuring Rich Harris)](https://changelog.com/jsparty/205) from JS Party
+- [The Other Side of Tech: A Documentarian Perspective (with Stefan Kingham)](https://codingcat.dev/podcast/2-4-the-other-side-of-tech-a-documentarian-perspective) from Purrfect.dev
+
+**Libraries, Tools & Components**
+- [threlte](https://github.com/grischaerbe/threlte) is a three.js component library for Svelte
+- [svelte-formify](https://github.com/nodify-at/svelte-formify) is a library to manage and validate forms that uses decorators to define validations
+- [gQuery](https://github.com/leveluptuts/gQuery) is a GraphQL Fetcher & Cache for Svelte Kit
+- [Unlock-protocol](https://github.com/novum-insights/sveltekit-unlock-firebase) is an integration to help login with MetaMask, Firebase, and paywall customers
+- [AgnosticUI](https://github.com/AgnosticUI/agnosticui) is a set of UI primitives that start their lives in clean HTML and CSS
+- [Vitebook](https://github.com/vitebook/vitebook) is a fast and lightweight alternative to Storybook that's powered by Vite
+- [SwyxKit](https://swyxkit.netlify.app/) is an opinionated blog starter for SvelteKit + Tailwind + Netlify. Refreshed for 2022!
+- [svelte-themes](https://github.com/beynar/svelte-themes) is an abstraction for themes in your SvelteKit app
+- [svelte-transition](https://www.npmjs.com/package/svelte-transition) is a Svelte component to make using CSS class based transitions easier - ideally suited for use with TailwindCSS
+- [Svelte Inview](https://www.npmjs.com/package/svelte-inview) is a Svelte action that monitors an element enters or leaves the viewport/parent element
+- [svelte-inline-compile](https://github.com/DockYard/svelte-inline-compile) is a babel transform that allows for a much more pleasant experience when testing svelte components using Jest and `@testing-library/svelte`
+- [@feltcoop/svelte-mutable-store](https://github.com/feltcoop/svelte-mutable-store) is a Svelte store for mutable values with an `immutable` compiler option
+- [headless-svelte-ui](https://www.npmjs.com/package/@bojalelabs/headless-svelte-ui) is a group of headless components that can be used in building Svelte Apps.
+
+Did we miss something? Need help bringing your next idea to life in Svelte? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs).
+
+See ya next month!
diff --git a/site/content/blog/2022-03-01-whats-new-in-svelte-march-2022.md b/site/content/blog/2022-03-01-whats-new-in-svelte-march-2022.md
new file mode 100644
index 0000000000..ceaed511bc
--- /dev/null
+++ b/site/content/blog/2022-03-01-whats-new-in-svelte-march-2022.md
@@ -0,0 +1,87 @@
+---
+title: "What's new in Svelte: March 2022"
+description: "Svelte Summit Spring is coming... and page endpoints are here!"
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+Just announced: [Svelte Summit Spring](https://www.sveltesummit.com/) will be taking place on April 30, 2022. The 5th Virtual Svelte Conference is [looking for speakers](https://www.sveltesummit.com/#speakers) and [sponsors](https://www.sveltesummit.com/sponsors)... so it's time to dust off those proposals!
+
+Also, some long-requested features were added to SvelteKit this month... including page endpoints! This change in how the `load` function works makes it easier to fetch data required for basic pages, redirect from POST responses and handle 404s and other errors.
+
+More on that and other new features and fixes below!
+
+## What's new in SvelteKit
+- The docs are now searchable and multipage with type definitions and hoverable code examples - Check them out at [kit.svelte.dev/docs](https://kit.svelte.dev/docs/)
+- Page endpoints significantly decrease the boilerplate needed when loading a page ([Issue](https://github.com/sveltejs/kit/issues/3532), [PR](https://github.com/sveltejs/kit/pull/3679), [Docs](https://kit.svelte.dev/docs/routing#endpoints-page-endpoints))
+- Application versioning and update detection support lets you determine what to do when a route fails to load after an app update ([Issue](https://github.com/sveltejs/kit/issues/87), [PR](https://github.com/sveltejs/kit/pull/3412), [Docs](https://kit.svelte.dev/docs/configuration#version))
+- A new option in `npm init svelte@next` will now set up Playwright automatically for testing ([PR](https://github.com/sveltejs/kit/pull/4056))
+
+
+**Breaking Changes**
+- The `target` option is no longer available. Instead, the `init` script hydrates its `parentNode` ([#3674](https://github.com/sveltejs/kit/pull/3674))
+- App-level types now live in the `App` namespace which allows you to type global types like `Stuff` or `Session` ([#3670](https://github.com/sveltejs/kit/pull/3670))
+- `JSONString` is now `JSONValue` ([#3683](https://github.com/sveltejs/kit/pull/3683))
+- `createIndexFiles` has been removed — it is now controlled by the `trailingSlash` option ([#3801](https://github.com/sveltejs/kit/pull/3801))
+- SvelteKit will no longer exclude root-relative external links from prerendering, which will cause 404s if these URLs are intended to be served by a separate app. Use a custom [`prerender.onError`](https://kit.svelte.dev/docs/configuration#prerender) handler if you need to ignore them ([#3826](https://github.com/sveltejs/kit/pull/3826))
+
+
+## New in Language Tools
+- Accessing properties in markups has been improved in the Svelte language tools ([105.12.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-105.12.0)) - working around some known issues with autocomplete ([#538](https://github.com/sveltejs/language-tools/issues/538) / [#1302](https://github.com/sveltejs/language-tools/issues/1302))
+
+
+---
+
+## Community Showcase
+
+**Apps & Sites**
+- [SvelteStorm](https://github.com/open-source-labs/SvelteStorm) is specifically tailored to provide all of the essential tools a Svelte developer needs to build a Svelte application
+- [Supachat](https://github.com/Lleweraf/supachat) is a real-time chat app using Svelte and Supabase
+- [Radicle](https://radicle.xyz/) is a peer-to-peer stack for building software together
+- [The Making Known](https://the-making-known.com/) is a narrated encounter with posters designed by the Nazi German government to communicate with the occupied nations of Belgium, France, and Luxembourg during the Second World War
+- [Svelte Kanban](https://github.com/V-Py/svelte-kanban) is a simple Svelte Kanban made in pure CSS
+- [fngrng](https://github.com/nvlgzr/fngrng) is a typing trainer focussed on accuracy over speed
+- [Generative grids](https://svelte.dev/repl/873988ce33db43f097c0ca69df57b3ac?version=3.46.4) is a neat little generative SVG grid in a Svelte REPL, with randomly generated color palettes and shapes
+- [LifeHash](https://github.com/BlockchainCommons/lifehash.info) is a method of hash visualization that creates beautiful, deterministic icons
+- [TypedWebhook.tools](https://typedwebhook.tools/) is a webhook testing tool for checking payloads, with automatic type generation
+- [Speedskating](https://github.com/spiegelgraphics/speedskating) is an animation widget to show olympic speedskating runs. Built with Svelte, D3 and regl
+- [Web tail](https://github.com/mishankov/web-tail) is a web application to view lines from file on local system or on remote server
+
+Want to work on a SvelteKit site with others? [Contribute to the Svelte Society site](https://github.com/svelte-society/sveltesociety.dev/issues)!
+
+
+**Learning Resources**
+
+_To Read_
+- [Svelte Components as Web Components](https://medium.com/@yesmeno/svelte-components-as-web-components-b400d1253504) by Matias Meno
+- [Simple Svelte Routing with Reactive URLs](https://bjornlu.com/blog/simple-svelte-routing-with-reactive-urls) by Bjorn Lu
+- [Leveling Up my Sveltekit / Sanity.io Blog Content with Featured Videos and Syntax Highlighting](https://ryanboddy.net/level-up-blog) by Ryan Boddy
+- [How This Blog Makes the Most of GitHub](https://paullj.github.io/posts/how-this-blog-makes-the-most-of-github/) by paullj
+- [FullStack JWT Auth: Introducing SvelteKit](https://dev.to/sirneij/fullstack-jwt-introducing-sveltekit-3jcn) by John Idogun
+- [Svelte-Cubed: Adding Motion to 3D Scenes](https://dev.to/alexwarnes/svelte-cubed-adding-motion-to-3d-scenes-51lo) by Alex Warnes
+- [Creating a RSS feed with Sanity and Svelte Kit](https://ghostdev.xyz/posts/creating-a-rss-feed-with-sanity-and-svelte-kit) by GHOST
+- [How to use Svelte's style directive](https://geoffrich.net/posts/style-directives/) by Geoff Rich
+- [SvelteKit and the "Client pattern"](https://retro.cloud/sveltekit-and-the-client-pattern/) by Julian Laubstein
+
+_To Watch_
+- [~~Shadow~~ Page Endpoints In Svelte Kit - Weekly Svelte](https://www.youtube.com/watch?v=PoYPZT7ruqI) by LevelUpTuts
+- [Testing For Beginners (Playlist)](https://www.youtube.com/watch?v=y53wwdBr5AI&list=PLA9WiRZ-IS_z7KpqhPELfEMbhAGRwZrzn) by Joy of Code
+- [KitQL - The native SvelteKit library for GraphQL](https://www.youtube.com/watch?v=6pH4fnFN70w) by Jean-Yves COUËT
+
+
+**Libraries, Tools & Components**
+- [gosvelte](https://github.com/sachinbhutani/gosvelte) is a proof of concept to serve Svelte-generated pages on GoLang HTTP server with server data being sent as props to svelte components
+- [svelte-ethers-store](https://www.npmjs.com/package/svelte-ethers-store) uses the ethers.js library as a collection of readable Svelte stores for Svelte, Sapper or SvelteKit
+- [Fluid Grid](https://fluid-grid.com/) is a CSS grid system for future web
+- [stirstack](https://github.com/seeReadCode/stirstack) is an opinionated framework that combines Svelte.js, TailwindCSS, InertiaJS and Ruby on Rails
+- [OATHqr](https://codeberg.org/vhs/oathqr) helps users create security credentials for use with 2FA/MFA and other OATH-enabled apps. Use it to generate scannable QR codes for one-time password authenticator apps such as Aegis or YubiKey
+- [svelte-GridTiles](https://github.com/honeybeeSunshine/svelte-GridTiles) is a drag and drop resizable tiles library built on a responsive grid
+- [Miscellaneous Svelte Components](https://github.com/alex-knyaz/Miscellaneous-svelte-components/) is a collection of miscellaneous svelte components alex-knyaz often use in my projects
+- [walk-and-graph-svelte-components](https://github.com/j2l/walk-and-graph-svelte-components) is a CLI node script to walk svelte and js files, to draw a beautiful JPG of your dependencies aka "imports"
+- [Felte](https://www.npmjs.com/package/felte) is a simple to use form library for Svelte
+- [svelte-use-tooltip](https://github.com/untemps/svelte-use-tooltip) is a Svelte action to display a tooltip
+- [persistent-svelte-store](https://github.com/omer-g/persistent-svelte-store) is a generic persistent writable store, built from scratch in TypeScript according to the Svelte store contract
+
+What'd we miss? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs) to continue the conversation.
+
+See y'all next month!
diff --git a/site/content/blog/2022-04-01-whats-new-in-svelte-april-2022.md b/site/content/blog/2022-04-01-whats-new-in-svelte-april-2022.md
new file mode 100644
index 0000000000..2f9db93580
--- /dev/null
+++ b/site/content/blog/2022-04-01-whats-new-in-svelte-april-2022.md
@@ -0,0 +1,104 @@
+---
+title: "What's new in Svelte: April 2022"
+description: "Goodbye fallthrough routes, hello param validators!"
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+This month, we felt a shift in the way SvelteKit handles page properties. The last holdout of the use-cases that required fallthrough routes, validating parameter properties, has been replaced by a more specific solution.
+
+More on that, and what else is new in Svelte, as we dive in...
+
+## What's new in SvelteKit
+- Param matchers allow you to check if a url parameter matches before rendering a page - replacing the need for fallthrough routes for this purpose ([Docs](https://kit.svelte.dev/docs/routing#advanced-routing-matching), [#4334](https://github.com/sveltejs/kit/pull/4334))
+- Explicit redirects can now be handled directly from endpoints ([#4260](https://github.com/sveltejs/kit/pull/4260))
+- `svelte-kit sync` ([#4182](https://github.com/sveltejs/kit/pull/4182)), TypeScript 4.6 ([#4190](https://github.com/sveltejs/kit/pull/4190)) and Vite 2.9 were released - adding non-blocking dependency optimization and experimental CSS source maps in dev mode as well as a number of bug fixes contributed by the SvelteKit team ([#4468](https://github.com/sveltejs/kit/pull/4468))
+
+
+**New Config Options**
+- `outDir` fixes path issues in monorepos and other situations where the desired output directory is outside the project directory ([Docs](https://kit.svelte.dev/docs/configuration#outdir), [#4176](https://github.com/sveltejs/kit/pull/4176))
+- `endpointExtensions` prevents files other than .js and .ts files from being treated as endpoints, unless you specify endpointExtensions ([Docs](https://kit.svelte.dev/docs/configuration#endpointextensions), [#4197](https://github.com/sveltejs/kit/pull/4197))
+- `prerender.default` lets you prerender every page without having to write `export const prerender = true` in every page file ([Docs](https://kit.svelte.dev/docs/configuration#prerender), [#4192](https://github.com/sveltejs/kit/pull/4192))
+
+
+**Breaking Changes**
+- Fallthrough routes have been removed. For migration tips, check out the PR ([#4330](https://github.com/sveltejs/kit/pull/4330))
+- `tabindex="-1"` is only added to `<body>` during navigation ([#4140](https://github.com/sveltejs/kit/pull/4140) and [#4184](https://github.com/sveltejs/kit/pull/4184))
+- Adapters are now required to supply a `getClientAddress` function ([#4289](https://github.com/sveltejs/kit/pull/4289))
+- `InputProps` and `OutputProps` can now be typed separately in generated `Load` ([#4305](https://github.com/sveltejs/kit/pull/4305))
+- The `\$` character is no longer allowed in dynamic parameters ([#4334](https://github.com/sveltejs/kit/pull/4334))
+- `svelte-kit package` has been marked as experimental so changes to it after Kit 1.0 will not be considered breaking ([#4164](https://github.com/sveltejs/kit/pull/4164))
+
+
+## New across the Svelte ecosystem
+- Svelte: Lots of new types for TypeScript and Svelte plugin users - including `style:` directives and Svelte Actions (**3.46.4** and **3.46.5**)
+- Language Tools: Svelte project files are now importable/findable through references without having them imported in a TS file ([105.13.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-105.13.0))
+- Language Tools: Region folding is now supported in html with `<!--#region-->`/`<!--#endregion-->` ([105.13.0](https://github.com/sveltejs/language-tools/releases/tag/extensions-105.13.0))
+
+---
+
+## Community Showcase
+
+**Apps & Sites built with Svelte**
+- [Launcher](https://launcher.team/) is an open-source app launcher powered by SvelteKit, Prisma, and Tailwind
+- [Paaster](https://paaster.io/) is a secure by default end to end encrypted pastebin built with Svelte, Vite, Typescript, Python, Starlette, rclone & Docker.
+- [Simple AF Video Converter](https://github.com/berlyozzy/Simple-AF-Video-Converter) is an Electron wrapper around ffmpeg.wasm to make converting videos between formats easier
+- [Streamchaser](https://github.com/streamchaser/streamchaser) seeks to simplify movie, series and documentary search through a centralized entertainment technology platform
+- [Svelte Color Picker](https://github.com/V-Py/svelte-material-color-picker) is a simple color picker made with Svelte
+- [ConcertMash](https://github.com/mcmxcdev/ConcertMash) is a small website that interacts with the Spotify API and generates new playlists based on the upcoming concerts you're attending
+- [Modulus](https://modulus.vision/) is a Design+Code Think Tank conceived with the main mission to evolve design and technology
+- [Multiply](https://www.multiply.us/) is an integrated PR and Social agency moving at the speed of culture
+- [yia!](https://www.yia.co.nz/) is a Young Innovator Award competition in New Zealand
+- [Write to Russia](https://www.writetorussia.org/index) is a community email writing platform to communicate with public `.ru` email addresses
+- [Markdown Playground](https://github.com/Petros-K/markdown-playground) is an online playground dedicated for your markdown experiments. 
+- [RatherMisty](https://rathermisty.com/) is a no frills weather app with weather data from Open-Meteo
+- [Minecraft Profile Pic (MCPFP)](https://github.com/MauritsWilke/mcpfp) is a site to generate Minecraft profile pictures with ease
+- [WebGL Fluid Simulation](https://github.com/jpaquim/svelte-webgl-fluid-simulation) is a configurable fluid simulation built with Svelte and WebGL
+- [This @NobelPeaceOslo exhibition](https://twitter.com/perbyhring/status/1504754949791621120) was built using printed graphics, projected motion graphics, particle animations and generative sound design
+
+Itching to contribute to a modern SvelteKit website? [Help build the Svelte Society site](https://github.com/svelte-society/sveltesociety.dev/issues)!
+
+
+**Learning Resources**
+
+_To Attend_
+- [Svelte Summit: Spring](https://www.sveltesummit.com/) will take place on April 30, 2022! Join us for the 5th virtual Svelte conference on [YouTube](https://www.sveltesummit.com/) and Discord 🍾
+
+_To Read_
+- [Svelte(Kit) TypeScript Showcase + general TypeScript tips](https://github.com/ivanhofer/sveltekit-typescript-showcase) by Hofer Ivan
+- [Local constants in Svelte with the @const tag](https://geoffrich.net/posts/local-constants/) by Geoff Rich
+- [Design Patterns for Building Reusable Svelte Components](https://render.com/blog/svelte-design-patterns) by Eric Liu
+- [Svelte is better than React](https://labs.hamy.xyz/posts/svelte-is-better-than-react/) by Hamilton Greene
+- [Making Visualizations Literally with Svelte and D3](https://www.connorrothschild.com/post/svelte-and-d3) by Connor Rothschild
+- [Coordinating Multiple Elements with Svelte Deferred Transitions](https://imfeld.dev/writing/svelte_deferred_transitions) by Daniel Imfeld
+- [Animate on scroll with Svelte Inview - Little Bits](https://dev.to/maciekgrzybek/animate-on-scroll-with-svelte-inview-266f) by Maciek Grzybek
+- [Lazy-Loading Firebase with SvelteKit](https://www.captaincodeman.com/lazy-loading-firebase-with-sveltekit) and [HeadlessUI Components with Svelte](https://www.captaincodeman.com/headlessui-components-with-svelte) by Captain Codeman
+- [SvelteKit Accessibility Testing: Automated CI A11y Tests](https://rodneylab.com/sveltekit-accessibility-testing/) by Rodney Lab
+- [Getting Started with KitQL and GraphCMS](https://scottspence.com/posts/getting-started-with-kitql-and-graphcms) by Scott Spence
+- [React ⇆ Svelte Cheatsheet](https://dev.to/joshnuss/react-to-svelte-cheatsheet-1a2a) lists the similarities and differences between the two libraries - by Joshua Nussbaum
+
+_To Watch_
+- [Svelte Extravaganza | Async](https://www.youtube.com/watch?v=mT4CLVHgtSg) by pngwn
+- [6 Svelte Packages You Should Know](https://www.youtube.com/watch?v=y5SrUKcX_Co) and [Basic React To Svelte Conversion](https://www.youtube.com/watch?v=DiSuwLlhOxs) by LevelUpTuts
+- [Page/Shadow Endpoint in SvelteKit](https://www.youtube.com/watch?v=j-9D5UDyVOM) by WebJeda
+- [Custom Svelte Store: Higher Order Store](https://www.youtube.com/watch?v=p1aPfVyZ1IY) by lihautan
+- [SvelteKit For Beginners (Playlist)](https://www.youtube.com/watch?v=bLBHecY4-ak&list=PLA9WiRZ-IS_zXZZyW4qfj0akvOAtk6MFS) by Joy of Code - follow along with the [blog guide](https://joyofcode.xyz/sveltekit-for-beginners)
+- [Fullstack SvelteKit Auth 🔐 with Firebase & Magic Links! 🪄](https://www.youtube.com/watch?v=MAHE4iQgh5Q) by Johnny Magrippis
+- [Firebase Authentication in SvelteKit! Full Stack App](https://www.youtube.com/watch?v=N6Y3hqhZvNI) by Ryan Boddy
+
+
+**Libraries, Tools & Components**
+- [SvelTable](https://sveltable.io/) is a feature rich, data table component built with Svelte
+- [svelte-cyberComp](https://github.com/Cybersteam00/svelte-cyberComp) is a powerful, lightweight component library written in Svelte and Typescript
+- [Flowbite Svelte](https://github.com/shinokada/flowbite-svelte) is an unofficial Flowbite component library for Svelte
+- [Svelte-Tide-Project](https://github.com/jbertovic/svelte-tide-project) is a starter template for Svelte frontend apps with Rust Tide backend server
+- [Fetch Inject](https://github.com/vhscom/fetch-inject#sveltekit) implements a performance optimization technique for managing asynchronous JavaScript dependencies - now with Svelte support
+- [svelte-utterances](https://github.com/shinokada/svelte-utterances) is a lightweight comments widget built on GitHub issues
+- [Liquivelte](https://github.com/malipetek/liquivelte-vscode) allows you to create your Shopify theme with Svelte-like components
+- [@storyblok/svelte](https://github.com/storyblok/storyblok-svelte) is the Svelte SDK you need to interact with Storyblok API and enable the Real-time Visual Editing Experience
+- [@svelte-on-solana/wallet-adapter](https://github.com/svelte-on-solana/wallet-adapter) is a modular TypeScript wallet adapter and UI components for Solana/Anchor applications using SvelteJS as framework
+- [svelte-lookat](https://www.npmjs.com/package/svelte-lookat) creates a div which makes all its children follow the mouse cursor or the user's face when using a mobile phone
+
+Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs) to continue the conversation.
+
+See y'all next month!
diff --git a/site/content/blog/2022-05-01-whats-new-in-svelte-may-2022.md b/site/content/blog/2022-05-01-whats-new-in-svelte-may-2022.md
new file mode 100644
index 0000000000..5bf169049e
--- /dev/null
+++ b/site/content/blog/2022-05-01-whats-new-in-svelte-may-2022.md
@@ -0,0 +1,89 @@
+---
+title: "What's new in Svelte: May 2022"
+description: "Dynamically switch between HTML element types with `<svelte:element>`"
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+With yesterday's Svelte Summit behind us, we've got a lot of news to share! Check out all of the recordings on the [Svelte Society YouTube Channel](https://www.youtube.com/sveltesociety) and the rest of this month's updates below...
+
+## What's new in Svelte
+- The `<svelte:element>` element lets you render an element of a dynamically specified type. This is useful, for example, when rendering rich text content from a CMS. Check out the [docs](https://svelte.dev/docs#template-syntax-svelte-element) or the [tutorial](https://svelte.dev/tutorial/svelte-element) for more info (**3.47.0**)!
+
+
+## Language Tools updates
+- `svelte:element` and `sveltekit:reload` are now supported
+- Invalid Svelte import paths will now be automatically detected - see PR for getting back the old behavior ([#1448](https://github.com/sveltejs/language-tools/pull/1448))
+- `source.sortImports` lets you sort imports without deleting unused imports ([#1338](https://github.com/sveltejs/language-tools/issues/1338))
+- Hovering over HTML attributes will now show HTML hover info instead of the TS hover info - resulting in much more useful information ([#1447](https://github.com/sveltejs/language-tools/pull/1447))
+- In VS Code, you can now wrap existing blocks of code in control flow tags using the `Insert Snippet` command ([#1373](https://github.com/sveltejs/language-tools/pull/1373))
+
+## What's new in SvelteKit
+- Files and directories can now be named `__tests__` and `__test__` in the routes directory ([#4438](https://github.com/sveltejs/kit/pull/4438))
+- Netlify Edge Functions ([#4657](https://github.com/sveltejs/kit/pull/4657)) and the Vercel build output API ([#4663](https://github.com/sveltejs/kit/pull/4663)) are now supported
+- Custom `load` dependencies, array of strings representing URLs the page depends on, are now available when loading routes ([Docs](https://kit.svelte.dev/docs/loading#output-dependencies), [#4536](https://github.com/sveltejs/kit/pull/4536))
+
+
+**Breaking Changes**
+- Validators are now called "matchers" ([Docs](https://kit.svelte.dev/docs/routing#advanced-routing-matching), [#4358](https://github.com/sveltejs/kit/pull/4358))
+- `__layout.reset` has been replaced by named layouts - which have much configurability for shared layout elements ([Docs](https://kit.svelte.dev/docs/layouts#named-layouts), [#4388](https://github.com/sveltejs/kit/pull/4388))
+- Prerendering is now skipped for `rel="external"` links ([#4545](https://github.com/sveltejs/kit/pull/4545))
+- `maxage` is now `cache` in `LoadOutput` ([#4690](https://github.com/sveltejs/kit/pull/4690))
+
+
+---
+
+## Community Showcase
+
+**Apps & Sites built with Svelte**
+- [polySpectra AR](https://ar.polyspectra.com/) lets you prototype faster 3D Printing with seamless AR file handoffs ([video demo](https://www.youtube.com/watch?v=VhYCeVGcG3E))
+- [Pixel Art Together](https://github.com/liveblocks/pixel-art-together) is a free multiplayer pixel art editor powered by Liveblocks
+- [Tooling Manager](https://tooling-manager.netlify.app/) lets you compare your JavaScript tech stack against industry standard boilerplates
+- [Easy Portfolio](https://easy-portfolio.com/) generates a portfolio based on your GitHub profile
+- [FLOAT](https://github.com/muttoni/float) is an attendance tracking program for events
+- [The Coin Perspective](https://thecoinperspective.com/) is a cryptocurrency price tracker and portfolio management tool
+- [Locutionis](https://github.com/pbouillon/locutionis) is a small, online reference of figures of speech (en français)
+- [ASM Editor](https://asm-editor.specy.app/) is an all in one web editor for M68K and MIPS
+- [Otium](https://github.com/alombi/otium) is a free and open source book manager and bookshelf organiser, that helps you managing your books and the ones you would like to read
+- [Sinwaver](https://github.com/Hugo-Dz/Sinwaver) is an SVG sine wave generator
+
+Want to contribute to a modern SvelteKit website? [Help build the Svelte Society site](https://github.com/svelte-society/sveltesociety.dev/issues)!
+
+
+**Learning Resources**
+
+_To Read_
+- [4 tips for cleaner Svelte components](https://geoffrich.net/posts/clean-component-tips/) by Geoff Rich
+- [Building a Clubhouse clone with Svelte and 100ms](https://www.100ms.live/blog/clubhouse-clone-with-svelte) By Seun Taiwo
+- [SvelteKit uvu Testing: Fast Component Unit Tests](https://rodneylab.com/sveltekit-uvu-testing/) by Rodney Lab
+- [SvelteKit JWT authentication tutorial](https://dev.to/pilcrowonpaper/sveltekit-jwt-authentication-tutorial-2m34) by pilcrowOnPaper
+- [Converting a Rollup-based Svelte SPA to SvelteKit](https://github.com/sveltejs/kit/discussions/4595) by Simon H
+- [Add Commitint, Commitizen, Standard Version, and Husky to SvelteKit Project](https://davipon.hashnode.dev/add-commitint-commitizen-standard-version-and-husky-to-sveltekit-project) by David Peng
+
+_To Watch or Hear_
+- [Rich Harris - The Road to SvelteKit 1.0 (Svelte Society NYC)](https://www.youtube.com/watch?v=s6a1pbTVcUs) by Svelte Society
+- [Svelte Fundamentals - Intro to Svelte](https://codingcat.dev/course/intro-to-svelte) by Coding Cat
+- [Svelte Components Using Custom Markdown Renderers - Weekly Svelte](https://www.youtube.com/watch?v=ZiEROAqobwM) by LevelUpTuts
+- [Implementing {@const} in if block](https://www.youtube.com/watch?v=f5iReGqjmG0) by lihautan
+- [Svelte and Contributing to Open-Source with Geoff Rich](https://podcast.20minjs.com/1952066/10417700-episode-6-svelte-and-contributing-to-open-source-with-geoff-rich) by 20minJS
+
+
+**Libraries, Tools & Components**
+- [KitDocs](https://github.com/svelteness/kit-docs) is a documentation integration for SvelteKit - like VitePress for Svelte.
+- [Svelte Copy](https://github.com/ghostdevv/svelte-copy) is a click/tap-to-copy library that makes it easy to copy to the clipboard
+- [Svend3r](https://github.com/oslabs-beta/svend3r) provides beautiful visualizations that harness the power of D3 to bring your data to life while abstracting away its imperative-style code
+- [Svelte Hamburgers](https://github.com/ghostdevv/svelte-hamburgers) is the easy to use Hamburger menu component for Svelte
+- [Svelte Droplet](https://github.com/probablykasper/svelte-droplet) is a file dropzone for Svelte
+- [Svelte MP3](https://www.npmjs.com/package/svelte-mp3) is a light blazingly fast yet simple minimalistic audio player for Svelte 
+- [SvelteUI](https://github.com/Brisklemonade/svelteui) is a component library for building fully functional & accessible web applications faster than ever 
+- [svelte-spotlight](https://github.com/beynar/svelte-spotlight) is a headless spotlight component to help you build your site's global search box in minutes
+- [svelte-pdf-simple](https://github.com/gspasov/svelte-pdf-simple) is a simple svelte library for displaying PDFs and giving you all the control
+- [persistent-svelte-store](https://github.com/omer-g/persistent-svelte-store) is a generic persistent writable store, built from scratch in TypeScript according to the Svelte store contract
+- [svelte-exmarkdown](https://github.com/ssssota/svelte-exmarkdown) is Svelte component to render markdown dynamically
+- [Bookit](https://github.com/leveluptuts/bookit) is a storybook-like component rendering environment - finely tuned to work directly within your SvelteKit projects
+
+Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs) to continue the conversation.
+
+If you'd prefer to join us in person, Svelte Summit is finally transitioning properly into the real world. Come join us for two days of awesome Svelte content! [Get your tickets now!](https://ti.to/svelte/svelte-summit-fall-edition)
+
+See y'all next month!
diff --git a/site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md b/site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md
new file mode 100644
index 0000000000..d38921b7eb
--- /dev/null
+++ b/site/content/blog/2022-06-01-whats-new-in-svelte-june-2022.md
@@ -0,0 +1,113 @@
+---
+title: "What's new in Svelte: June 2022"
+description: "Cancellable dispatched events, deeper {@const} declarations and more!"
+author: Daniel Sandoval
+authorURL: https://desandoval.net
+---
+
+With last month's [Svelte Summit](https://www.youtube.com/watch?v=qqj2cBockqE) behind us, we're ready to apply everything we learned in this new month of June! Also new this month are some quality-of-life changes to `createEventDispatcher`, `@const` declarations and tons of progress toward SvelteKit 1.0.
+
+Let's dive in!
+
+## What's new in Svelte
+- Custom events can now be cancelled in the `createEventDispatcher` function (**3.48.0**, [Docs](https://svelte.dev/docs#run-time-svelte-createeventdispatcher), [PR](https://github.com/sveltejs/svelte/pull/7064))
+- The `{@const}` tag can now be used in `{#if}` blocks to conditionally define variables (**3.48.0**, [Docs](https://svelte.dev/docs#template-syntax-const), [PR](https://github.com/sveltejs/svelte/pull/7451))
+- Lots of bug fixes across `<svelte:element>`, animations and various DOM elements. Check out the [CHANGELOG](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3480) for a deeper dive!
+
+
+## What's new in SvelteKit
+- Vite 2.9.9 was released as one of the last Vite 2 releases. The Svelte team has been hard at work contributing to the the Vite 3 release to make the integration between SvelteKit and Vite smoother than ever ([Vite 3.0 Milestone](https://github.com/vitejs/vite/milestone/5))
+- `config.kit.alias` lets you more easily declare a custom alias to replace values in `import` statements ([Docs](https://kit.svelte.dev/docs/configuration#alias), [PR](https://github.com/sveltejs/kit/pull/4964))
+- Pages marked for prerendering will now fail during SSR at runtime ([PR](https://github.com/sveltejs/kit/pull/4812))
+
+**Breaking Changes**
+- Node 14 is no longer supported ([PR](https://github.com/sveltejs/kit/pull/4922))
+- Requests to `/favicon.ico` will no longer be suppressed and will instead be handled as a valid route ([PR](https://github.com/sveltejs/kit/pull/5046))
+- AMP support has been moved to a separate `@sveltejs/amp` package ([Docs](https://kit.svelte.dev/docs/seo#manual-setup-amp), [PR](https://github.com/sveltejs/kit/pull/4710))
+- Generated types are now written to `_types` directories - update your imports accordingly ([PR](https://github.com/sveltejs/kit/pull/4705))
+- `%svelte.head%` and `%svelte.body%` are now `%sveltekit.head%` and `%sveltekit.body%` in `app.html` ([Docs](https://kit.svelte.dev/docs/migrating#project-files-src-template-html), [PR](https://github.com/sveltejs/kit/pull/5016/))
+- `LoadInput` is now `LoadEvent`
+- Dropped support for Wrangler 1 in favor of Wrangler 2 ([PR](https://github.com/sveltejs/kit/pull/4887))
+
+---
+
+## Community Showcase
+
+**Apps & Sites built with Svelte**
+- [Plantarium](https://github.com/jim-fx/plantarium) is a tool for the procedural generation of 3D plants.
+- [SPATULA](https://github.com/AlexWarnes/lamina-spatula) is a tool for building shading materials that are exportable as code material in any project that uses lamina and threejs
+- [Waaard](https://waaard.com/) lets you create and send protected links with a variety of SSO providers
+- [Magidoc](https://github.com/magidoc-org/magidoc) is a fast and highly customizable GraphQL documentation generator
+- [myMarkmap](https://github.com/eyssette/myMarkmap) is a custom editor for Markmap, built with SvelteKit
+- [PassShare](https://passshare.mynt.pw/) is a way for you to share your passwords to your friends, securely and effortlessly
+- [DashingOS](https://beta.dashingos.com/) is a tool (like Notion + CodeSandbox) to make it quick and easy to prototype and document your work all in one place
+- [worker-kit-email](https://github.com/miunau/worker-kit-email) helps you develop transactional emails quickly using regular SvelteKit routes
+- [kaios-weather-svelte](https://github.com/cyan-2048/kaios-weather-svelte) is a very familiar looking weather app for KaiOS
+- [svelte-gantt](https://github.com/ANovokmet/svelte-gantt) is a lightweight and fast interactive gantt chart/resource booking component
+- [Miru](https://github.com/ThaUnknown/miru) is a BitTorrent streaming software for cats
+
+Looking for a great SvelteKit website to contribute to? [Help build the Svelte Society site](https://github.com/svelte-society/sveltesociety.dev/issues)!
+
+
+**Learning Resources**
+
+_To Read_
+- [Component party](https://component-party.dev/) is a site that compares common patterns in different frameworks
+- [Quick tip: style prop defaults](https://geoffrich.net/posts/style-prop-defaults/) by Geoff Rich
+- [Working with reduced motion in Svelte](https://ghostdev.xyz/posts/working-with-reduced-motion-in-svelte) by GHOST
+- [Building a Musical Instrument with the Web Audio API](https://www.taniarascia.com/musical-instrument-web-audio-api/) by Tania Rascia
+- [Svelte-Cubed: Creating an Accessible and Consistent Experience Across Devices](https://dev.to/alexwarnes/svelte-cubed-creating-an-accessible-and-consistent-experience-across-devices-42ae) and [Svelte-Cubed: Loading Your glTF Models](https://dev.to/alexwarnes/svelte-cubed-loading-your-gltf-models-14lf) by Alex Warnes
+
+_To Watch_
+
+From Svelte Society:
+- [The Svelte Summit Spring 2022 stream recording](https://www.youtube.com/watch?v=qqj2cBockqE) has been updated with chapter markers to make it easy to watch again and again
+- [The full recording of Svelte London, April 2022](https://www.youtube.com/watch?v=zIxzJzTnoxA) is up! Check out the amazing talks from across the Svelte London community
+- [Persian Svelte Society](https://www.youtube.com/channel/UCfWH9lCsXN3j8oXq8dru82Q) is making Persian-language videos about Svelte
+- Svelte Sirens has been talking monthly to creators and contributors across the Svelte Community:
+  - [SvelteKit + Sanity.io: a match made in heaven](https://www.youtube.com/watch?v=j0_1hfiEVWA&list=PL8bMgX1kyZThkJ_Rk6AAFI4eY24g5XKwK&index=5) on May 13
+  - [Slicing up your Svelte Sites with Prismic](https://www.youtube.com/watch?v=FUbHwwMALkk) on May 20
+  - [Rendering your Svelte apps on Render](https://www.youtube.com/watch?v=SnV_hMLVyqs) on May 24
+  - [The story behind the (unofficial) Svelte newsletter](https://www.youtube.com/watch?v=aK0xXm3hPxk&list=PL8bMgX1kyZThkJ_Rk6AAFI4eY24g5XKwK&index=7) on May 27
+
+
+Across the Web:
+- [Building vite-plugin-svelte-inspector](https://www.youtube.com/watch?v=udYB24IMtsY), [What is Singleton?](https://www.youtube.com/watch?v=xhi0m1QZue0) and [What is Navigation?](https://www.youtube.com/watch?v=Ym-OnGUps2c) by lihautan
+- [Auto Import Components In Svelte Kit - Weekly Svelte](https://www.youtube.com/watch?v=JXvKBtTPr64) by LevelUpTuts
+- [🧪 Test SvelteKit with TDD & VITEST 🧪](https://www.youtube.com/watch?v=5bQD3dCoyHA) by Johnny Magrippis
+- [Google Analytics With SvelteKit](https://www.youtube.com/watch?v=l-x6H0fnqqQ), [Using WebSockets With SvelteKit](https://www.youtube.com/watch?v=mAcKzdW5fR8), [SvelteKit Authentication Using Cookies](https://www.youtube.com/watch?v=T935Ya4W5X0) and [Svelte Headless UI Component Library](https://www.reddit.com/r/sveltejs/comments/ueu849/svelte_headless_ui_component_library/) by Joy of Code
+- [Named Layouts In Nested Routes in SvelteKit](https://www.youtube.com/watch?v=hKg_V3jouLk) by The Svelte Junction
+- [SvelteKit Shiki Syntax Highlighting: Markdown Codeblocks](https://rodneylab.com/sveltekit-shiki-syntax-highlighting/) and [Svelte Capsize Styling: Typography Tooling](https://rodneylab.com/svelte-capsize-styling/) by Rodney Lab
+
+_To Hear_
+- Svelte Radio has been putting out weekly episodes:
+  - [The Adventures of Running a Svelte Meetup](https://www.svelteradio.com/episodes/the-adventures-of-running-a-svelte-meetup)
+  - [The other Rich! Geoff! (feat. Geoff Rich)](https://www.svelteradio.com/episodes/the-other-rich-geoff)
+  - [Inspecting Svelte Code with Dominik G.](https://www.svelteradio.com/episodes/inspecting-svelte-code-with-dominik-g)
+  - [Stores Galore](https://www.svelteradio.com/episodes/stores-galore)
+- [Svelte and the Future of Frontend Development (feat. Rich Harris)](https://thenewstack.io/svelte-and-the-future-of-front-end-development/) from The New Stack
+
+
+**Libraries, Tools & Components**
+- [vite-plugin-svelte-console-remover](https://github.com/jhubbardsf/vite-plugin-svelte-console-remover) is a Vite plugin that removes all console statements (log, group, dir, error, etc) from Svelte, JS, and TS files during build so they don't leak into production
+- [Svelte Headless Tables](https://github.com/bryanmylee/svelte-headless-table) is an unopinionated and extensible data tables for Svelte
+- [y-presence](https://github.com/nimeshnayaju/y-presence) is a lightweight set of libraries to easily add presence (live cursors/avatars) to any web application (now with Svelte support!)
+- [Svelcro](https://github.com/oslabs-beta/Svelcro) is a component performance tracker for Svelte applications
+- [Svelte-Splitpanes](https://github.com/orefalo/svelte-splitpanes) lets you create dynamic and predictable view panels to layout an application
+- [svelte-miniplayer](https://github.com/ThaUnknown/svelte-miniplayer) is a lightweight, fast, resizable and draggable miniplayer for media
+- [svelte-keybinds](https://github.com/ThaUnknown/svelte-keybinds) is a minimalistic keybinding interface, with rebinding and saving
+- [svelte-speech-recognition](https://github.com/jhubbardsf/svelte-speech-recognition) converts speech from the microphone to text and makes it available to your Svelte components
+
+**Special Feature: Svelte Stores**
+There were lots of Svelte stores released this month from a number of authors...
+
+- [svelte-mutable-store](https://github.com/feltcoop/svelte-mutable-store) is a Svelte store for mutable values with the `immutable` compiler option
+- [svelte-damped-store](https://github.com/aredridel/svelte-damped-store) is a derived writable store that can suspend updates while [svelte-lens-store](https://github.com/aredridel/svelte-lens-store) is a functional lens over Svelte stores
+- [svelte-persistent-store](https://github.com/furudean/svelte-persistent-store) is a writable svelte store that saves and loads data from `Window.localStorage` or `Window.sessionStorage`.
+
+
+Did we miss anything? Join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs) to add your voice.
+
+Don't forget that you can also join us in-person at the Svelte Summit in Stockholm! Come join us for two days of awesome Svelte content! [Get your tickets now](https://ti.to/svelte/svelte-summit-fall-edition).
+
+See y'all next month!
diff --git a/site/content/docs/00-introduction.md b/site/content/docs/00-introduction.md
new file mode 100644
index 0000000000..11f82117e9
--- /dev/null
+++ b/site/content/docs/00-introduction.md
@@ -0,0 +1,11 @@
+---
+title: Before we begin
+---
+
+This page contains detailed API reference documentation. It's intended to be a resource for people who already have some familiarity with Svelte.
+
+If that's not you (yet), you may prefer to visit the [interactive tutorial](/tutorial) or the [examples](/examples) before consulting this reference.
+
+Don't be shy about asking for help in the [Discord chatroom](https://svelte.dev/chat).
+
+Using an older version of Svelte? Have a look at the [v2 docs](https://v2.svelte.dev).
diff --git a/site/content/docs/01-component-format.md b/site/content/docs/01-component-format.md
new file mode 100644
index 0000000000..1c64094002
--- /dev/null
+++ b/site/content/docs/01-component-format.md
@@ -0,0 +1,340 @@
+---
+title: Component format
+---
+
+---
+
+Components are the building blocks of Svelte applications. They are written into `.svelte` files, using a superset of HTML.
+
+All three sections — script, styles and markup — are optional.
+
+```sv
+<script>
+	// logic goes here
+</script>
+
+<!-- markup (zero or more items) goes here -->
+
+<style>
+	/* styles go here */
+</style>
+```
+
+### &lt;script&gt;
+
+A `<script>` block contains JavaScript that runs when a component instance is created. Variables declared (or imported) at the top level are 'visible' from the component's markup. There are four additional rules:
+
+#### 1. `export` creates a component prop
+
+---
+
+Svelte uses the `export` keyword to mark a variable declaration as a *property* or *prop*, which means it becomes accessible to consumers of the component (see the section on [attributes and props](/docs#template-syntax-attributes-and-props) for more information).
+
+```sv
+<script>
+	export let foo;
+
+	// Values that are passed in as props
+	// are immediately available
+	console.log({ foo });
+</script>
+```
+
+---
+
+You can specify a default initial value for a prop. It will be used if the component's consumer doesn't specify the prop on the component (or if its initial value is `undefined`) when instantiating the component. Note that whenever a prop is removed by the consumer, its value is set to `undefined` rather than the initial value.
+
+In development mode (see the [compiler options](/docs#compile-time-svelte-compile)), a warning will be printed if no default initial value is provided and the consumer does not specify a value. To squelch this warning, ensure that a default initial value is specified, even if it is `undefined`.
+
+```sv
+<script>
+	export let bar = 'optional default initial value';
+	export let baz = undefined;
+</script>
+```
+
+---
+
+If you export a `const`, `class` or `function`, it is readonly from outside the component. Function *expressions* are valid props, however.
+
+Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](/docs#template-syntax-component-directives-bind-this).
+
+```sv
+<script>
+	// these are readonly
+	export const thisIs = 'readonly';
+
+	export function greet(name) {
+		alert(`hello ${name}!`);
+	}
+
+	// this is a prop
+	export let format = n => n.toFixed(2);
+</script>
+```
+
+---
+
+You can use reserved words as prop names.
+
+```sv
+<script>
+	let className;
+
+	// creates a `class` property, even
+	// though it is a reserved word
+	export { className as class };
+</script>
+```
+
+#### 2. Assignments are 'reactive'
+
+---
+
+To change component state and trigger a re-render, just assign to a locally declared variable.
+
+Update expressions (`count += 1`) and property assignments (`obj.x = y`) have the same effect.
+
+```sv
+<script>
+	let count = 0;
+
+	function handleClick () {
+		// calling this function will trigger an
+		// update if the markup references `count`
+		count = count + 1;
+	}
+</script>
+```
+
+---
+
+Because Svelte's reactivity is based on assignments, using array methods like `.push()` and `.splice()` won't automatically trigger updates. A subsequent assignment is required to trigger the update. This and more details can also be found in the [tutorial](/tutorial/updating-arrays-and-objects).
+
+```sv
+<script>
+	let arr = [0, 1];
+
+	function handleClick () {
+		// this method call does not trigger an update
+		arr.push(2);
+		// this assignment will trigger an update
+		// if the markup references `arr`
+		arr = arr
+	}
+</script>
+```
+
+#### 3. `$:` marks a statement as reactive
+
+---
+
+Any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with the `$:` [JS label syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label). Reactive statements run immediately before the component updates, whenever the values that they depend on have changed.
+
+```sv
+<script>
+	export let title;
+
+	// this will update `document.title` whenever
+	// the `title` prop changes
+	$: document.title = title;
+
+	$: {
+		console.log(`multiple statements can be combined`);
+		console.log(`the current title is ${title}`);
+	}
+</script>
+```
+
+---
+
+Only values which directly appear within the `$:` block will become dependencies of the reactive statement. For example, in the code below `total` will only update when `x` changes, but not `y`.
+
+```sv
+<script>
+	let x = 0;
+	let y = 0;
+	
+	function yPlusAValue(value) {
+		return value + y;
+	}
+	
+	$: total = yPlusAValue(x);
+</script>
+
+Total: {total}
+<button on:click={() => x++}>
+	Increment X
+</button>
+
+<button on:click={() => y++}>
+	Increment Y
+</button>
+```
+
+---
+
+If a statement consists entirely of an assignment to an undeclared variable, Svelte will inject a `let` declaration on your behalf.
+
+```sv
+<script>
+	export let num;
+
+	// we don't need to declare `squared` and `cubed`
+	// — Svelte does it for us
+	$: squared = num * num;
+	$: cubed = squared * num;
+</script>
+```
+
+#### 4. Prefix stores with `$` to access their values
+
+---
+
+A *store* is an object that allows reactive access to a value via a simple *store contract*. The [`svelte/store` module](/docs#run-time-svelte-store) contains minimal store implementations which fulfil this contract.
+
+Any time you have a reference to a store, you can access its value inside a component by prefixing it with the `$` character. This causes Svelte to declare the prefixed variable, subscribe to the store at component initialization and unsubscribe when appropriate.
+
+Assignments to `$`-prefixed variables require that the variable be a writable store, and will result in a call to the store's `.set` method.
+
+Note that the store must be declared at the top level of the component — not inside an `if` block or a function, for example.
+
+Local variables (that do not represent store values) must *not* have a `$` prefix.
+
+```sv
+<script>
+	import { writable } from 'svelte/store';
+
+	const count = writable(0);
+	console.log($count); // logs 0
+
+	count.set(1);
+	console.log($count); // logs 1
+
+	$count = 2;
+	console.log($count); // logs 2
+</script>
+```
+
+##### Store contract
+
+```js
+store = { subscribe: (subscription: (value: any) => void) => (() => void), set?: (value: any) => void }
+```
+
+You can create your own stores without relying on [`svelte/store`](/docs#run-time-svelte-store), by implementing the *store contract*:
+
+1. A store must contain a `.subscribe` method, which must accept as its argument a subscription function. This subscription function must be immediately and synchronously called with the store's current value upon calling `.subscribe`. All of a store's active subscription functions must later be synchronously called whenever the store's value changes.
+2. The `.subscribe` method must return an unsubscribe function. Calling an unsubscribe function must stop its subscription, and its corresponding subscription function must not be called again by the store.
+3. A store may *optionally* contain a `.set` method, which must accept as its argument a new value for the store, and which synchronously calls all of the store's active subscription functions. Such a store is called a *writable store*.
+
+For interoperability with RxJS Observables, the `.subscribe` method is also allowed to return an object with an `.unsubscribe` method, rather than return the unsubscription function directly. Note however that unless `.subscribe` synchronously calls the subscription (which is not required by the Observable spec), Svelte will see the value of the store as `undefined` until it does.
+
+
+### &lt;script context="module"&gt;
+
+---
+
+A `<script>` tag with a `context="module"` attribute runs once when the module first evaluates, rather than for each component instance. Values declared in this block are accessible from a regular `<script>` (and the component markup) but not vice versa.
+
+You can `export` bindings from this block, and they will become exports of the compiled module.
+
+You cannot `export default`, since the default export is the component itself.
+
+> Variables defined in `module` scripts are not reactive — reassigning them will not trigger a rerender even though the variable itself will update. For values shared between multiple components, consider using a [store](/docs#run-time-svelte-store).
+
+```sv
+<script context="module">
+	let totalComponents = 0;
+
+	// this allows an importer to do e.g.
+	// `import Example, { alertTotal } from './Example.svelte'`
+	export function alertTotal() {
+		alert(totalComponents);
+	}
+</script>
+
+<script>
+	totalComponents += 1;
+	console.log(`total number of times this component has been created: ${totalComponents}`);
+</script>
+```
+
+
+### &lt;style&gt;
+
+---
+
+CSS inside a `<style>` block will be scoped to that component.
+
+This works by adding a class to affected elements, which is based on a hash of the component styles (e.g. `svelte-123xyz`).
+
+```sv
+<style>
+	p {
+		/* this will only affect <p> elements in this component */
+		color: burlywood;
+	}
+</style>
+```
+
+---
+
+To apply styles to a selector globally, use the `:global(...)` modifier.
+
+```sv
+<style>
+	:global(body) {
+		/* this will apply to <body> */
+		margin: 0;
+	}
+
+	div :global(strong) {
+		/* this will apply to all <strong> elements, in any
+			 component, that are inside <div> elements belonging
+			 to this component */
+		color: goldenrod;
+	}
+
+	p:global(.red) {
+		/* this will apply to all <p> elements belonging to this 
+			 component with a class of red, even if class="red" does
+			 not initially appear in the markup, and is instead 
+			 added at runtime. This is useful when the class 
+			 of the element is dynamically applied, for instance 
+			 when updating the element's classList property directly. */
+	}
+</style>
+```
+
+---
+
+If you want to make @keyframes that are accessible globally, you need to prepend your keyframe names with `-global-`.
+
+The `-global-` part will be removed when compiled, and the keyframe then be referenced using just `my-animation-name` elsewhere in your code.
+
+```html
+<style>
+	@keyframes -global-my-animation-name {...}
+</style>
+```
+
+---
+
+There should only be 1 top-level `<style>` tag per component.
+
+However, it is possible to have `<style>` tag nested inside other elements or logic blocks.
+
+In that case, the `<style>` tag will be inserted as-is into the DOM, no scoping or processing will be done on the `<style>` tag.
+
+```html
+<div>
+	<style>
+		/* this style tag will be inserted as-is */
+		div {
+			/* this will apply to all `<div>` elements in the DOM */
+			color: red;
+		}
+	</style>
+</div>
+```
diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
new file mode 100644
index 0000000000..f2e71ecbe0
--- /dev/null
+++ b/site/content/docs/02-template-syntax.md
@@ -0,0 +1,1782 @@
+---
+title: Template syntax
+---
+
+
+### Tags
+
+---
+
+A lowercase tag, like `<div>`, denotes a regular HTML element. A capitalised tag, such as `<Widget>` or `<Namespace.Widget>`, indicates a *component*.
+
+```sv
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<div>
+	<Widget/>
+</div>
+```
+
+
+### Attributes and props
+
+---
+
+By default, attributes work exactly like their HTML counterparts.
+
+```sv
+<div class="foo">
+	<button disabled>can't touch this</button>
+</div>
+```
+
+---
+
+As in HTML, values may be unquoted.
+
+```sv
+<input type=checkbox>
+```
+
+---
+
+Attribute values can contain JavaScript expressions.
+
+```sv
+<a href="page/{p}">page {p}</a>
+```
+
+---
+
+Or they can *be* JavaScript expressions.
+
+```sv
+<button disabled={!clickable}>...</button>
+```
+
+---
+
+Boolean attributes are included on the element if their value is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) and excluded if it's [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).
+
+All other attributes are included unless their value is [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish) (`null` or `undefined`).
+
+```html
+<input required={false} placeholder="This input field is not required">
+<div title={null}>This div has no title attribute</div>
+```
+
+---
+
+An expression might include characters that would cause syntax highlighting to fail in regular HTML, so quoting the value is permitted. The quotes do not affect how the value is parsed:
+
+```sv
+<button disabled="{number !== 42}">...</button>
+```
+
+---
+
+When the attribute name and value match (`name={name}`), they can be replaced with `{name}`.
+
+```sv
+<!-- These are equivalent -->
+<button disabled={disabled}>...</button>
+<button {disabled}>...</button>
+```
+
+---
+
+By convention, values passed to components are referred to as *properties* or *props* rather than *attributes*, which are a feature of the DOM.
+
+As with elements, `name={name}` can be replaced with the `{name}` shorthand.
+
+```sv
+<Widget foo={bar} answer={42} text="hello"/>
+```
+
+---
+
+*Spread attributes* allow many attributes or properties to be passed to an element or component at once.
+
+An element or component can have multiple spread attributes, interspersed with regular ones.
+
+```sv
+<Widget {...things}/>
+```
+
+---
+
+*`$$props`* references all props that are passed to a component, including ones that are not declared with `export`. It is not generally recommended, as it is difficult for Svelte to optimise. But it can be useful in rare cases – for example, when you don't know at compile time what props might be passed to a component.
+
+```sv
+<Widget {...$$props}/>
+```
+
+---
+
+*`$$restProps`* contains only the props which are *not* declared with `export`. It can be used to pass down other unknown attributes to an element in a component. It shares the same optimisation problems as *`$$props`*, and is likewise not recommended.
+
+```html
+<input {...$$restProps}>
+```
+
+
+> The `value` attribute of an `input` element or its children `option` elements must not be set with spread attributes when using `bind:group` or `bind:checked`. Svelte needs to be able to see the element's `value` directly in the markup in these cases so that it can link it to the bound variable.
+
+---
+
+### Text expressions
+
+```sv
+{expression}
+```
+
+---
+
+Text can also contain JavaScript expressions:
+
+> If you're using a regular expression (`RegExp`) [literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor), you'll need to wrap it in parentheses.
+
+```sv
+<h1>Hello {name}!</h1>
+<p>{a} + {b} = {a + b}.</p>
+
+<div>{(/^[A-Za-z ]+$/).test(value) ? x : y}</div>
+```
+
+### Comments
+
+---
+
+You can use HTML comments inside components.
+
+```sv
+<!-- this is a comment! -->
+<h1>Hello world</h1>
+```
+
+---
+
+Comments beginning with `svelte-ignore` disable warnings for the next block of markup. Usually these are accessibility warnings; make sure that you're disabling them for a good reason.
+
+```sv
+<!-- svelte-ignore a11y-autofocus -->
+<input bind:value={name} autofocus>
+```
+
+
+### {#if ...}
+
+```sv
+{#if expression}...{/if}
+```
+```sv
+{#if expression}...{:else if expression}...{/if}
+```
+```sv
+{#if expression}...{:else}...{/if}
+```
+
+---
+
+Content that is conditionally rendered can be wrapped in an if block.
+
+```sv
+{#if answer === 42}
+	<p>what was the question?</p>
+{/if}
+```
+
+---
+
+Additional conditions can be added with `{:else if expression}`, optionally ending in an `{:else}` clause.
+
+```sv
+{#if porridge.temperature > 100}
+	<p>too hot!</p>
+{:else if 80 > porridge.temperature}
+	<p>too cold!</p>
+{:else}
+	<p>just right!</p>
+{/if}
+```
+
+
+### {#each ...}
+
+```sv
+{#each expression as name}...{/each}
+```
+```sv
+{#each expression as name, index}...{/each}
+```
+```sv
+{#each expression as name (key)}...{/each}
+```
+```sv
+{#each expression as name, index (key)}...{/each}
+```
+```sv
+{#each expression as name}...{:else}...{/each}
+```
+
+---
+
+Iterating over lists of values can be done with an each block.
+
+```sv
+<h1>Shopping list</h1>
+<ul>
+	{#each items as item}
+		<li>{item.name} x {item.qty}</li>
+	{/each}
+</ul>
+```
+
+You can use each blocks to iterate over any array or array-like value — that is, any object with a `length` property.
+
+---
+
+An each block can also specify an *index*, equivalent to the second argument in an `array.map(...)` callback:
+
+```sv
+{#each items as item, i}
+	<li>{i + 1}: {item.name} x {item.qty}</li>
+{/each}
+```
+
+---
+
+If a *key* expression is provided — which must uniquely identify each list item — Svelte will use it to diff the list when data changes, rather than adding or removing items at the end. The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.
+
+```sv
+{#each items as item (item.id)}
+	<li>{item.name} x {item.qty}</li>
+{/each}
+
+<!-- or with additional index value -->
+{#each items as item, i (item.id)}
+	<li>{i + 1}: {item.name} x {item.qty}</li>
+{/each}
+```
+
+---
+
+You can freely use destructuring and rest patterns in each blocks.
+
+```sv
+{#each items as { id, name, qty }, i (id)}
+	<li>{i + 1}: {name} x {qty}</li>
+{/each}
+
+{#each objects as { id, ...rest }}
+	<li><span>{id}</span><MyComponent {...rest}/></li>
+{/each}
+
+{#each items as [id, ...rest]}
+	<li><span>{id}</span><MyComponent values={rest}/></li>
+{/each}
+```
+
+---
+
+An each block can also have an `{:else}` clause, which is rendered if the list is empty.
+
+```sv
+{#each todos as todo}
+	<p>{todo.text}</p>
+{:else}
+	<p>No tasks today!</p>
+{/each}
+```
+
+
+### {#await ...}
+
+```sv
+{#await expression}...{:then name}...{:catch name}...{/await}
+```
+```sv
+{#await expression}...{:then name}...{/await}
+```
+```sv
+{#await expression then name}...{/await}
+```
+```sv
+{#await expression catch name}...{/await}
+```
+
+---
+
+Await blocks allow you to branch on the three possible states of a Promise — pending, fulfilled or rejected. In SSR mode, only the pending state will be rendered on the server.
+
+```sv
+{#await promise}
+	<!-- promise is pending -->
+	<p>waiting for the promise to resolve...</p>
+{:then value}
+	<!-- promise was fulfilled -->
+	<p>The value is {value}</p>
+{:catch error}
+	<!-- promise was rejected -->
+	<p>Something went wrong: {error.message}</p>
+{/await}
+```
+
+---
+
+The `catch` block can be omitted if you don't need to render anything when the promise rejects (or no error is possible).
+
+```sv
+{#await promise}
+	<!-- promise is pending -->
+	<p>waiting for the promise to resolve...</p>
+{:then value}
+	<!-- promise was fulfilled -->
+	<p>The value is {value}</p>
+{/await}
+```
+
+---
+
+If you don't care about the pending state, you can also omit the initial block.
+
+```sv
+{#await promise then value}
+	<p>The value is {value}</p>
+{/await}
+```
+
+---
+
+Similarly, if you only want to show the error state, you can omit the `then` block.
+
+```sv
+{#await promise catch error}
+	<p>The error is {error}</p>
+{/await}
+```
+
+### {#key ...}
+
+```sv
+{#key expression}...{/key}
+```
+
+Key blocks destroy and recreate their contents when the value of an expression changes.
+
+---
+
+This is useful if you want an element to play its transition whenever a value changes.
+
+```sv
+{#key value}
+	<div transition:fade>{value}</div>
+{/key}
+```
+
+---
+
+When used around components, this will cause them to be reinstantiated and reinitialised.
+
+```sv
+{#key value}
+	<Component />
+{/key}
+```
+
+### {@html ...}
+
+```sv
+{@html expression}
+```
+
+---
+
+In a text expression, characters like `<` and `>` are escaped; however, with HTML expressions, they're not.
+
+The expression should be valid standalone HTML — `{@html "<div>"}content{@html "</div>"}` will *not* work, because `</div>` is not valid HTML. It also will *not* compile Svelte code.
+
+> Svelte does not sanitize expressions before injecting HTML. If the data comes from an untrusted source, you must sanitize it, or you are exposing your users to an XSS vulnerability.
+
+```sv
+<div class="blog-post">
+	<h1>{post.title}</h1>
+	{@html post.content}
+</div>
+```
+
+
+### {@debug ...}
+
+```sv
+{@debug}
+```
+```sv
+{@debug var1, var2, ..., varN}
+```
+
+---
+
+The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.
+
+```sv
+<script>
+	let user = {
+		firstname: 'Ada',
+		lastname: 'Lovelace'
+	};
+</script>
+
+{@debug user}
+
+<h1>Hello {user.firstname}!</h1>
+```
+
+---
+
+`{@debug ...}` accepts a comma-separated list of variable names (not arbitrary expressions).
+
+```sv
+<!-- Compiles -->
+{@debug user}
+{@debug user1, user2, user3}
+
+<!-- WON'T compile -->
+{@debug user.firstname}
+{@debug myArray[0]}
+{@debug !isReady}
+{@debug typeof user === 'object'}
+```
+
+The `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when *any* state changes, as opposed to the specified variables.
+
+
+### {@const ...}
+
+```sv
+{@const assignment}
+```
+
+---
+
+The `{@const ...}` tag defines a local constant.
+
+```sv
+<script>
+	export let boxes;
+</script>
+
+{#each boxes as box}
+	{@const area = box.width * box.height}
+	{box.width} * {box.height} = {area}
+{/each}
+```
+
+`{@const}` is only allowed as direct child of `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<Component />` or `<svelte:fragment />`.
+
+
+### Element directives
+
+As well as attributes, elements can have *directives*, which control the element's behaviour in some way.
+
+
+#### on:*eventname*
+
+```sv
+on:eventname={handler}
+```
+```sv
+on:eventname|modifiers={handler}
+```
+
+---
+
+Use the `on:` directive to listen to DOM events.
+
+```sv
+<script>
+	let count = 0;
+
+	function handleClick(event) {
+		count += 1;
+	}
+</script>
+
+<button on:click={handleClick}>
+	count: {count}
+</button>
+```
+
+---
+
+Handlers can be declared inline with no performance penalty. As with attributes, directive values may be quoted for the sake of syntax highlighters.
+
+```sv
+<button on:click="{() => count += 1}">
+	count: {count}
+</button>
+```
+
+---
+
+Add *modifiers* to DOM events with the `|` character.
+
+```sv
+<form on:submit|preventDefault={handleSubmit}>
+	<!-- the `submit` event's default is prevented,
+	     so the page won't reload -->
+</form>
+```
+
+The following modifiers are available:
+
+* `preventDefault` — calls `event.preventDefault()` before running the handler
+* `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element
+* `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
+* `nonpassive` — explicitly set `passive: false`
+* `capture` — fires the handler during the *capture* phase instead of the *bubbling* phase
+* `once` — remove the handler after the first time it runs
+* `self` — only trigger handler if `event.target` is the element itself
+* `trusted` — only trigger handler if `event.isTrusted` is `true`. I.e. if the event is triggered by a user action.
+
+Modifiers can be chained together, e.g. `on:click|once|capture={...}`.
+
+---
+
+If the `on:` directive is used without a value, the component will *forward* the event, meaning that a consumer of the component can listen for it.
+
+```sv
+<button on:click>
+	The component itself will emit the click event
+</button>
+```
+
+---
+
+It's possible to have multiple event listeners for the same event:
+
+```sv
+<script>
+	let counter = 0;
+	function increment() {
+		counter = counter + 1;
+	}
+
+	function track(event) {
+		trackEvent(event)
+	}
+</script>
+
+<button on:click={increment} on:click={track}>Click me!</button>
+```
+
+#### bind:*property*
+
+```sv
+bind:property={variable}
+```
+
+---
+
+Data ordinarily flows down, from parent to child. The `bind:` directive allows data to flow the other way, from child to parent. Most bindings are specific to particular elements.
+
+The simplest bindings reflect the value of a property, such as `input.value`.
+
+```sv
+<input bind:value={name}>
+<textarea bind:value={text}></textarea>
+
+<input type="checkbox" bind:checked={yes}>
+```
+
+---
+
+If the name matches the value, you can use a shorthand.
+
+```sv
+<!-- These are equivalent -->
+<input bind:value={value}>
+<input bind:value>
+```
+
+---
+
+Numeric input values are coerced; even though `input.value` is a string as far as the DOM is concerned, Svelte will treat it as a number. If the input is empty or invalid (in the case of `type="number"`), the value is `undefined`.
+
+```sv
+<input type="number" bind:value={num}>
+<input type="range" bind:value={num}>
+```
+
+---
+
+On `<input>` elements with `type="file"`, you can use `bind:files` to get the [`FileList` of selected files](https://developer.mozilla.org/en-US/docs/Web/API/FileList). It is readonly.
+
+```sv
+<label for="avatar">Upload a picture:</label>
+<input
+	accept="image/png, image/jpeg"
+	bind:files
+	id="avatar"
+	name="avatar"
+	type="file"
+/>
+```
+
+---
+
+If you're using `bind:` directives together with `on:` directives, the order that they're defined in affects the value of the bound variable when the event handler is called.
+
+```sv
+<script>
+	let value = 'Hello World';
+</script>
+
+<input
+	on:input="{() => console.log('Old value:', value)}"
+	bind:value
+	on:input="{() => console.log('New value:', value)}"
+/>
+```
+
+Here we were binding to the value of a text input, which uses the `input` event. Bindings on other elements may use different events such as `change`.
+
+##### Binding `<select>` value
+
+---
+
+A `<select>` value binding corresponds to the `value` property on the selected `<option>`, which can be any value (not just strings, as is normally the case in the DOM).
+
+```sv
+<select bind:value={selected}>
+	<option value={a}>a</option>
+	<option value={b}>b</option>
+	<option value={c}>c</option>
+</select>
+```
+
+---
+
+A `<select multiple>` element behaves similarly to a checkbox group.
+
+```sv
+<select multiple bind:value={fillings}>
+	<option value="Rice">Rice</option>
+	<option value="Beans">Beans</option>
+	<option value="Cheese">Cheese</option>
+	<option value="Guac (extra)">Guac (extra)</option>
+</select>
+```
+
+---
+
+When the value of an `<option>` matches its text content, the attribute can be omitted.
+
+```sv
+<select multiple bind:value={fillings}>
+	<option>Rice</option>
+	<option>Beans</option>
+	<option>Cheese</option>
+	<option>Guac (extra)</option>
+</select>
+```
+
+---
+
+Elements with the `contenteditable` attribute support `innerHTML` and `textContent` bindings.
+
+```sv
+<div contenteditable="true" bind:innerHTML={html}></div>
+```
+
+---
+
+`<details>` elements support binding to the `open` property.
+
+```sv
+<details bind:open={isOpen}>
+	<summary>Details</summary>
+	<p>
+		Something small enough to escape casual notice.
+	</p>
+</details>
+```
+
+##### Media element bindings
+
+---
+
+Media elements (`<audio>` and `<video>`) have their own set of bindings — six *readonly* ones...
+
+* `duration` (readonly) — the total duration of the video, in seconds
+* `buffered` (readonly) — an array of `{start, end}` objects
+* `played` (readonly) — ditto
+* `seekable` (readonly) — ditto
+* `seeking` (readonly) — boolean
+* `ended` (readonly) — boolean
+
+...and five *two-way* bindings:
+
+* `currentTime` — the current playback time in the video, in seconds
+* `playbackRate` — how fast or slow to play the video, where 1 is 'normal'
+* `paused` — this one should be self-explanatory
+* `volume` — a value between 0 and 1
+* `muted` — a boolean value indicating whether the player is muted
+
+Videos additionally have readonly `videoWidth` and `videoHeight` bindings.
+
+```sv
+<video
+	src={clip}
+	bind:duration
+	bind:buffered
+	bind:played
+	bind:seekable
+	bind:seeking
+	bind:ended
+	bind:currentTime
+	bind:playbackRate
+	bind:paused
+	bind:volume
+	bind:muted
+	bind:videoWidth
+	bind:videoHeight
+></video>
+```
+
+##### Block-level element bindings
+
+---
+
+Block-level elements have 4 readonly bindings, measured using a technique similar to [this one](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/):
+
+* `clientWidth`
+* `clientHeight`
+* `offsetWidth`
+* `offsetHeight`
+
+```sv
+<div
+	bind:offsetWidth={width}
+	bind:offsetHeight={height}
+>
+	<Chart {width} {height}/>
+</div>
+```
+
+#### bind:group
+
+```sv
+bind:group={variable}
+```
+
+---
+
+Inputs that work together can use `bind:group`.
+
+```sv
+<script>
+	let tortilla = 'Plain';
+	let fillings = [];
+</script>
+
+<!-- grouped radio inputs are mutually exclusive -->
+<input type="radio" bind:group={tortilla} value="Plain">
+<input type="radio" bind:group={tortilla} value="Whole wheat">
+<input type="radio" bind:group={tortilla} value="Spinach">
+
+<!-- grouped checkbox inputs populate an array -->
+<input type="checkbox" bind:group={fillings} value="Rice">
+<input type="checkbox" bind:group={fillings} value="Beans">
+<input type="checkbox" bind:group={fillings} value="Cheese">
+<input type="checkbox" bind:group={fillings} value="Guac (extra)">
+```
+
+#### bind:this
+
+```sv
+bind:this={dom_node}
+```
+
+---
+
+To get a reference to a DOM node, use `bind:this`.
+
+```sv
+<script>
+	import { onMount } from 'svelte';
+
+	let canvasElement;
+
+	onMount(() => {
+		const ctx = canvasElement.getContext('2d');
+		drawStuff(ctx);
+	});
+</script>
+
+<canvas bind:this={canvasElement}></canvas>
+```
+
+
+#### class:*name*
+
+```sv
+class:name={value}
+```
+```sv
+class:name
+```
+
+---
+
+A `class:` directive provides a shorter way of toggling a class on an element.
+
+```sv
+<!-- These are equivalent -->
+<div class="{active ? 'active' : ''}">...</div>
+<div class:active={active}>...</div>
+
+<!-- Shorthand, for when name and value match -->
+<div class:active>...</div>
+
+<!-- Multiple class toggles can be included -->
+<div class:active class:inactive={!active} class:isAdmin>...</div>
+```
+
+#### style:*property*
+
+```sv
+style:property={value}
+```
+```sv
+style:property="value"
+```
+```sv
+style:property
+```
+
+---
+
+The `style:` directive provides a shorthand for setting multiple styles on an element.
+
+```sv
+<!-- These are equivalent -->
+<div style:color="red">...</div>
+<div style="color: red;">...</div>
+
+<!-- Variables can be used -->
+<div style:color={myColor}>...</div>
+
+<!-- Shorthand, for when property and variable name match -->
+<div style:color>...</div>
+
+<!-- Multiple styles can be included -->
+<div style:color style:width="12rem" style:background-color={darkMode ? "black" : "white"}>...</div>
+```
+
+---
+
+When `style:` directives are combined with `style` attributes, the directives will take precedence:
+
+```sv
+<div style="color: blue;" style:color="red">This will be red</div>
+```
+
+
+
+#### use:*action*
+
+```sv
+use:action
+```
+```sv
+use:action={parameters}
+```
+
+```js
+action = (node: HTMLElement, parameters: any) => {
+	update?: (parameters: any) => void,
+	destroy?: () => void
+}
+```
+
+---
+
+Actions are functions that are called when an element is created. They can return an object with a `destroy` method that is called after the element is unmounted:
+
+```sv
+<script>
+	function foo(node) {
+		// the node has been mounted in the DOM
+
+		return {
+			destroy() {
+				// the node has been removed from the DOM
+			}
+		};
+	}
+</script>
+
+<div use:foo></div>
+```
+
+---
+
+An action can have a parameter. If the returned value has an `update` method, it will be called whenever that parameter changes, immediately after Svelte has applied updates to the markup.
+
+> Don't worry about the fact that we're redeclaring the `foo` function for every component instance — Svelte will hoist any functions that don't depend on local state out of the component definition.
+
+```sv
+<script>
+	export let bar;
+
+	function foo(node, bar) {
+		// the node has been mounted in the DOM
+
+		return {
+			update(bar) {
+				// the value of `bar` has changed
+			},
+
+			destroy() {
+				// the node has been removed from the DOM
+			}
+		};
+	}
+</script>
+
+<div use:foo={bar}></div>
+```
+
+
+#### transition:*fn*
+
+```sv
+transition:fn
+```
+```sv
+transition:fn={params}
+```
+```sv
+transition:fn|local
+```
+```sv
+transition:fn|local={params}
+```
+
+
+```js
+transition = (node: HTMLElement, params: any) => {
+	delay?: number,
+	duration?: number,
+	easing?: (t: number) => number,
+	css?: (t: number, u: number) => string,
+	tick?: (t: number, u: number) => void
+}
+```
+
+---
+
+A transition is triggered by an element entering or leaving the DOM as a result of a state change.
+
+When a block is transitioning out, all elements inside the block, including those that do not have their own transitions, are kept in the DOM until every transition in the block has completed.
+
+The `transition:` directive indicates a *bidirectional* transition, which means it can be smoothly reversed while the transition is in progress.
+
+```sv
+{#if visible}
+	<div transition:fade>
+		fades in and out
+	</div>
+{/if}
+```
+
+> By default intro transitions will not play on first render. You can modify this behaviour by setting `intro: true` when you [create a component](/docs#run-time-client-side-component-api).
+
+##### Transition parameters
+
+---
+
+Like actions, transitions can have parameters.
+
+(The double `{{curlies}}` aren't a special syntax; this is an object literal inside an expression tag.)
+
+```sv
+{#if visible}
+	<div transition:fade="{{ duration: 2000 }}">
+		flies in, fades out over two seconds
+	</div>
+{/if}
+```
+
+##### Custom transition functions
+
+---
+
+Transitions can use custom functions. If the returned object has a `css` function, Svelte will create a CSS animation that plays on the element.
+
+The `t` argument passed to `css` is a value between `0` and `1` after the `easing` function has been applied. *In* transitions run from `0` to `1`, *out* transitions run from `1` to `0` — in other words `1` is the element's natural state, as though no transition had been applied. The `u` argument is equal to `1 - t`.
+
+The function is called repeatedly *before* the transition begins, with different `t` and `u` arguments.
+
+```sv
+<script>
+	import { elasticOut } from 'svelte/easing';
+
+	export let visible;
+
+	function whoosh(node, params) {
+		const existingTransform = getComputedStyle(node).transform.replace('none', '');
+
+		return {
+			delay: params.delay || 0,
+			duration: params.duration || 400,
+			easing: params.easing || elasticOut,
+			css: (t, u) => `transform: ${existingTransform} scale(${t})`
+		};
+	}
+</script>
+
+{#if visible}
+	<div in:whoosh>
+		whooshes in
+	</div>
+{/if}
+```
+
+---
+
+A custom transition function can also return a `tick` function, which is called *during* the transition with the same `t` and `u` arguments.
+
+> If it's possible to use `css` instead of `tick`, do so — CSS animations can run off the main thread, preventing jank on slower devices.
+
+```sv
+<script>
+	export let visible = false;
+
+	function typewriter(node, { speed = 1 }) {
+		const valid = (
+			node.childNodes.length === 1 &&
+			node.childNodes[0].nodeType === Node.TEXT_NODE
+		);
+
+		if (!valid) {
+			throw new Error(`This transition only works on elements with a single text node child`);
+		}
+
+		const text = node.textContent;
+		const duration = text.length / (speed * 0.01);
+
+		return {
+			duration,
+			tick: t => {
+				const i = ~~(text.length * t);
+				node.textContent = text.slice(0, i);
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<p in:typewriter="{{ speed: 1 }}">
+		The quick brown fox jumps over the lazy dog
+	</p>
+{/if}
+```
+
+If a transition returns a function instead of a transition object, the function will be called in the next microtask. This allows multiple transitions to coordinate, making [crossfade effects](/tutorial/deferred-transitions) possible.
+
+
+##### Transition events
+
+---
+
+An element with transitions will dispatch the following events in addition to any standard DOM events:
+
+* `introstart`
+* `introend`
+* `outrostart`
+* `outroend`
+
+```sv
+{#if visible}
+	<p
+		transition:fly="{{ y: 200, duration: 2000 }}"
+		on:introstart="{() => status = 'intro started'}"
+		on:outrostart="{() => status = 'outro started'}"
+		on:introend="{() => status = 'intro ended'}"
+		on:outroend="{() => status = 'outro ended'}"
+	>
+		Flies in and out
+	</p>
+{/if}
+```
+
+---
+
+Local transitions only play when the block they belong to is created or destroyed, *not* when parent blocks are created or destroyed.
+
+```sv
+{#if x}
+	{#if y}
+		<p transition:fade>
+			fades in and out when x or y change
+		</p>
+
+		<p transition:fade|local>
+			fades in and out only when y changes
+		</p>
+	{/if}
+{/if}
+```
+
+
+#### in:*fn*/out:*fn*
+
+```sv
+in:fn
+```
+```sv
+in:fn={params}
+```
+```sv
+in:fn|local
+```
+```sv
+in:fn|local={params}
+```
+
+```sv
+out:fn
+```
+```sv
+out:fn={params}
+```
+```sv
+out:fn|local
+```
+```sv
+out:fn|local={params}
+```
+
+---
+
+Similar to `transition:`, but only applies to elements entering (`in:`) or leaving (`out:`) the DOM.
+
+Unlike with `transition:`, transitions applied with `in:` and `out:` are not bidirectional — an in transition will continue to 'play' alongside the out transition, rather than reversing, if the block is outroed while the transition is in progress. If an out transition is aborted, transitions will restart from scratch.
+
+```sv
+{#if visible}
+	<div in:fly out:fade>
+		flies in, fades out
+	</div>
+{/if}
+```
+
+
+
+#### animate:*fn*
+
+```sv
+animate:name
+```
+
+```sv
+animate:name={params}
+```
+
+```js
+animation = (node: HTMLElement, { from: DOMRect, to: DOMRect } , params: any) => {
+	delay?: number,
+	duration?: number,
+	easing?: (t: number) => number,
+	css?: (t: number, u: number) => string,
+	tick?: (t: number, u: number) => void
+}
+```
+
+```js
+DOMRect {
+	bottom: number,
+	height: number,
+	​​left: number,
+	right: number,
+	​top: number,
+	width: number,
+	x: number,
+	y: number
+}
+```
+
+---
+
+An animation is triggered when the contents of a [keyed each block](/docs#template-syntax-each) are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an *immediate* child of a keyed each block.
+
+Animations can be used with Svelte's [built-in animation functions](/docs#run-time-svelte-animate) or [custom animation functions](/docs#template-syntax-element-directives-animate-fn-custom-animation-functions).
+
+```sv
+<!-- When `list` is reordered the animation will run-->
+{#each list as item, index (item)}
+	<li animate:flip>{item}</li>
+{/each}
+```
+
+##### Animation Parameters
+
+---
+
+As with actions and transitions, animations can have parameters.
+
+(The double `{{curlies}}` aren't a special syntax; this is an object literal inside an expression tag.)
+
+```sv
+{#each list as item, index (item)}
+	<li animate:flip="{{ delay: 500 }}">{item}</li>
+{/each}
+```
+
+##### Custom animation functions
+
+---
+
+Animations can use custom functions that provide the `node`, an `animation` object and any `parameters` as arguments. The `animation` parameter is an object containing `from` and `to` properties each containing a [DOMRect](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect#Properties) describing the geometry of the element in its `start` and `end` positions. The `from` property is the DOMRect of the element in its starting position, the `to` property is the DOMRect of the element in its final position after the list has been reordered and the DOM updated.
+
+If the returned object has a `css` method, Svelte will create a CSS animation that plays on the element.
+
+The `t` argument passed to `css` is a value that goes from `0` and `1` after the `easing` function has been applied. The `u` argument is equal to `1 - t`.
+
+The function is called repeatedly *before* the animation begins, with different `t` and `u` arguments.
+
+
+```sv
+<script>
+	import { cubicOut } from 'svelte/easing';
+
+	function whizz(node, { from, to }, params) {
+
+		const dx = from.left - to.left;
+		const dy = from.top - to.top;
+
+		const d = Math.sqrt(dx * dx + dy * dy);
+
+		return {
+			delay: 0,
+			duration: Math.sqrt(d) * 120,
+			easing: cubicOut,
+			css: (t, u) =>
+				`transform: translate(${u * dx}px, ${u * dy}px) rotate(${t*360}deg);`
+		};
+	}
+</script>
+
+{#each list as item, index (item)}
+	<div animate:whizz>{item}</div>
+{/each}
+```
+
+---
+
+
+A custom animation function can also return a `tick` function, which is called *during* the animation with the same `t` and `u` arguments.
+
+> If it's possible to use `css` instead of `tick`, do so — CSS animations can run off the main thread, preventing jank on slower devices.
+
+```sv
+<script>
+	import { cubicOut } from 'svelte/easing';
+
+	function whizz(node, { from, to }, params) {
+
+		const dx = from.left - to.left;
+		const dy = from.top - to.top;
+
+		const d = Math.sqrt(dx * dx + dy * dy);
+
+		return {
+		delay: 0,
+		duration: Math.sqrt(d) * 120,
+		easing: cubicOut,
+		tick: (t, u) =>
+			Object.assign(node.style, {
+				color: t > 0.5 ? 'Pink' : 'Blue'
+			});
+	};
+	}
+</script>
+
+{#each list as item, index (item)}
+	<div animate:whizz>{item}</div>
+{/each}
+```
+
+### Component directives
+
+#### on:*eventname*
+
+```sv
+on:eventname={handler}
+```
+
+---
+
+Components can emit events using [createEventDispatcher](/docs#run-time-svelte-createeventdispatcher), or by forwarding DOM events. Listening for component events looks the same as listening for DOM events:
+
+```sv
+<SomeComponent on:whatever={handler}/>
+```
+
+---
+
+As with DOM events, if the `on:` directive is used without a value, the component will *forward* the event, meaning that a consumer of the component can listen for it.
+
+```sv
+<SomeComponent on:whatever/>
+```
+
+#### --style-props
+
+```sv
+--style-props="anycssvalue"
+```
+
+---
+
+You can also pass styles as props to components for the purposes of theming, using CSS custom properties.
+
+Svelte's implementation is essentially syntactic sugar for adding a wrapper element. This example:
+
+```sv
+<Slider
+  bind:value
+  min={0}
+  --rail-color="black"
+  --track-color="rgb(0, 0, 255)"
+/>
+```
+
+---
+
+Desugars to this:
+
+```sv
+<div style="display: contents; --rail-color: black; --track-color: rgb(0, 0, 255)">
+  <Slider
+    bind:value
+    min={0}
+    max={100}
+  />
+</div>
+```
+
+**Note**: Since this is an extra `<div>`, beware that your CSS structure might accidentally target this. Be mindful of this added wrapper element when using this feature.
+
+---
+
+Svelte's CSS Variables support allows for easily themable components:
+
+```sv
+<!-- Slider.svelte -->
+<style>
+  .potato-slider-rail {
+    background-color: var(--rail-color, var(--theme-color, 'purple'));
+  }
+</style>
+```
+
+---
+
+So you can set a high level theme color:
+
+```css
+/* global.css */
+html {
+  --theme-color: black;
+}
+```
+
+---
+
+Or override it at the consumer level:
+
+```sv
+<Slider --rail-color="goldenrod"/>
+```
+
+#### bind:*property*
+
+```sv
+bind:property={variable}
+```
+
+---
+
+You can bind to component props using the same syntax as for elements.
+
+```sv
+<Keypad bind:value={pin}/>
+```
+
+#### bind:this
+
+```sv
+bind:this={component_instance}
+```
+
+---
+
+Components also support `bind:this`, allowing you to interact with component instances programmatically.
+
+> Note that we can't do `{cart.empty}` since `cart` is `undefined` when the button is first rendered and throws an error.
+
+```sv
+<ShoppingCart bind:this={cart}/>
+
+<button on:click={() => cart.empty()}>
+	Empty shopping cart
+</button>
+```
+
+
+
+### `<slot>`
+
+```sv
+<slot><!-- optional fallback --></slot>
+```
+```sv
+<slot name="x"><!-- optional fallback --></slot>
+```
+```sv
+<slot prop={value}></slot>
+```
+
+---
+
+Components can have child content, in the same way that elements can.
+
+The content is exposed in the child component using the `<slot>` element, which can contain fallback content that is rendered if no children are provided.
+
+```sv
+<!-- Widget.svelte -->
+<div>
+	<slot>
+		this fallback content will be rendered when no content is provided, like in the first example
+	</slot>
+</div>
+
+<!-- App.svelte -->
+<Widget></Widget> <!-- this component will render the default content -->
+
+<Widget>
+	<p>this is some child content that will overwrite the default slot content</p>
+</Widget>
+```
+
+#### `<slot name="`*name*`">`
+
+---
+
+Named slots allow consumers to target specific areas. They can also have fallback content.
+
+```sv
+<!-- Widget.svelte -->
+<div>
+	<slot name="header">No header was provided</slot>
+	<p>Some content between header and footer</p>
+	<slot name="footer"></slot>
+</div>
+
+<!-- App.svelte -->
+<Widget>
+	<h1 slot="header">Hello</h1>
+	<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
+</Widget>
+```
+
+Components can be placed in a named slot using the syntax `<Component slot="name" />`.
+In order to place content in a slot without using a wrapper element, you can use the special element `<svelte:fragment>`.
+
+```sv
+<!-- Widget.svelte -->
+<div>
+	<slot name="header">No header was provided</slot>
+	<p>Some content between header and footer</p>
+	<slot name="footer"></slot>
+</div>
+
+<!-- App.svelte -->
+<Widget>
+	<HeaderComponent slot="header" />
+	<svelte:fragment slot="footer">
+		<p>All rights reserved.</p>
+		<p>Copyright (c) 2019 Svelte Industries</p>
+	</svelte:fragment>
+</Widget>
+```
+
+
+#### `$$slots`
+
+---
+
+`$$slots` is an object whose keys are the names of the slots passed into the component by the parent. If the parent does not pass in a slot with a particular name, that name will not be present in `$$slots`. This allows components to render a slot (and other elements, like wrappers for styling) only if the parent provides it.
+
+Note that explicitly passing in an empty named slot will add that slot's name to `$$slots`. For example, if a parent passes `<div slot="title" />` to a child component, `$$slots.title` will be truthy within the child.
+
+```sv
+<!-- Card.svelte -->
+<div>
+	<slot name="title"></slot>
+	{#if $$slots.description}
+		<!-- This <hr> and slot will render only if a slot named "description" is provided. -->
+		<hr>
+		<slot name="description"></slot>
+	{/if}
+</div>
+
+<!-- App.svelte -->
+<Card>
+	<h1 slot="title">Blog Post Title</h1>
+	<!-- No slot named "description" was provided so the optional slot will not be rendered. -->
+</Card>
+```
+
+#### `<slot key={`*value*`}>`
+
+---
+
+Slots can be rendered zero or more times, and can pass values *back* to the parent using props. The parent exposes the values to the slot template using the `let:` directive.
+
+The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `<slot {item}>` is equivalent to `<slot item={item}>`.
+
+```sv
+<!-- FancyList.svelte -->
+<ul>
+	{#each items as item}
+		<li class="fancy">
+			<slot prop={item}></slot>
+		</li>
+	{/each}
+</ul>
+
+<!-- App.svelte -->
+<FancyList {items} let:prop={thing}>
+	<div>{thing.text}</div>
+</FancyList>
+```
+
+---
+
+Named slots can also expose values. The `let:` directive goes on the element with the `slot` attribute.
+
+```sv
+<!-- FancyList.svelte -->
+<ul>
+	{#each items as item}
+		<li class="fancy">
+			<slot name="item" {item}></slot>
+		</li>
+	{/each}
+</ul>
+
+<slot name="footer"></slot>
+
+<!-- App.svelte -->
+<FancyList {items}>
+	<div slot="item" let:item>{item.text}</div>
+	<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
+</FancyList>
+```
+
+
+### `<svelte:self>`
+
+---
+
+The `<svelte:self>` element allows a component to include itself, recursively.
+
+It cannot appear at the top level of your markup; it must be inside an if or each block or passed to a component's slot to prevent an infinite loop.
+
+```sv
+<script>
+	export let count;
+</script>
+
+{#if count > 0}
+	<p>counting down... {count}</p>
+	<svelte:self count="{count - 1}"/>
+{:else}
+	<p>lift-off!</p>
+{/if}
+```
+
+### `<svelte:component>`
+
+```sv
+<svelte:component this={expression}/>
+```
+
+---
+
+The `<svelte:component>` element renders a component dynamically, using the component constructor specified as the `this` property. When the property changes, the component is destroyed and recreated.
+
+If `this` is falsy, no component is rendered.
+
+```sv
+<svelte:component this={currentSelection.component} foo={bar}/>
+```
+
+### `<svelte:element>`
+
+```sv
+<svelte:element this={expression}/>
+```
+
+---
+
+The `<svelte:element>` element lets you render an element of a dynamically specified type. This is useful for example when displaying rich text content from a CMS. Any properties and event listeners present will be applied to the element.
+
+The only supported binding is `bind:this`, since the element type specific bindings that Svelte does at build time (e.g. `bind:value` for input elements) does not work with a dynamic tag type.
+
+If `this` has a nullish value, the element and its children will not be rendered.
+
+If `this` is the name of a void tag (e.g., `br`) and `<svelte:element>` has child elements, a runtime error will be thrown in development mode.
+
+```sv
+<script>
+	let tag = 'div';
+	export let handler;
+</script>
+
+<svelte:element this={tag} on:click={handler}>Foo</svelte:element>
+```
+
+### `<svelte:window>`
+
+```sv
+<svelte:window on:event={handler}/>
+```
+```sv
+<svelte:window bind:prop={value}/>
+```
+
+---
+
+The `<svelte:window>` element allows you to add event listeners to the `window` object without worrying about removing them when the component is destroyed, or checking for the existence of `window` when server-side rendering.
+
+Unlike `<svelte:self>`, this element may only appear at the top level of your component and must never be inside a block or element.
+
+```sv
+<script>
+	function handleKeydown(event) {
+		alert(`pressed the ${event.key} key`);
+	}
+</script>
+
+<svelte:window on:keydown={handleKeydown}/>
+```
+
+---
+
+You can also bind to the following properties:
+
+* `innerWidth`
+* `innerHeight`
+* `outerWidth`
+* `outerHeight`
+* `scrollX`
+* `scrollY`
+* `online` — an alias for window.navigator.onLine
+
+All except `scrollX` and `scrollY` are readonly.
+
+```sv
+<svelte:window bind:scrollY={y}/>
+```
+
+> Note that the page will not be scrolled to the initial value to avoid accessibility issues. Only subsequent changes to the bound variable of `scrollX` and `scrollY` will cause scrolling. However, if the scrolling behaviour is desired, call `scrollTo()` in `onMount()`.
+
+### `<svelte:body>`
+
+```sv
+<svelte:body on:event={handler}/>
+```
+
+---
+
+Similarly to `<svelte:window>`, this element allows you to add listeners to events on `document.body`, such as `mouseenter` and `mouseleave`, which don't fire on `window`. It also lets you use [actions](/docs#template-syntax-element-directives-use-action) on the `<body>` element.
+
+As with `<svelte:window>`, this element may only appear the top level of your component and must never be inside a block or element.
+
+```sv
+<svelte:body
+	on:mouseenter={handleMouseenter}
+	on:mouseleave={handleMouseleave}
+	use:someAction
+/>
+```
+
+
+### `<svelte:head>`
+
+```sv
+<svelte:head>...</svelte:head>
+```
+
+---
+
+This element makes it possible to insert elements into `document.head`. During server-side rendering, `head` content is exposed separately to the main `html` content.
+
+As with `<svelte:window>` and `<svelte:body>`, this element may only appear at the top level of your component and must never be inside a block or element.
+
+```sv
+<svelte:head>
+	<link rel="stylesheet" href="/tutorial/dark-theme.css">
+</svelte:head>
+```
+
+
+### `<svelte:options>`
+
+```sv
+<svelte:options option={value}/>
+```
+
+---
+
+The `<svelte:options>` element provides a place to specify per-component compiler options, which are detailed in the [compiler section](/docs#compile-time-svelte-compile). The possible options are:
+
+* `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed
+* `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed
+* `accessors={true}` — adds getters and setters for the component's props
+* `accessors={false}` — the default
+* `namespace="..."` — the namespace where this component will be used, most commonly "svg"; use the "foreign" namespace to opt out of case-insensitive attribute names and HTML-specific warnings
+* `tag="..."` — the name to use when compiling this component as a custom element
+
+```sv
+<svelte:options tag="my-custom-element"/>
+```
+
+### `<svelte:fragment>`
+
+The `<svelte:fragment>` element allows you to place content in a [named slot](/docs#template-syntax-slot-slot-name-name) without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
+
+```sv
+<!-- Widget.svelte -->
+<div>
+	<slot name="header">No header was provided</slot>
+	<p>Some content between header and footer</p>
+	<slot name="footer"></slot>
+</div>
+
+<!-- App.svelte -->
+<Widget>
+	<h1 slot="header">Hello</h1>
+	<svelte:fragment slot="footer">
+		<p>All rights reserved.</p>
+		<p>Copyright (c) 2019 Svelte Industries</p>
+	</svelte:fragment>
+</Widget>
+```
diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md
new file mode 100644
index 0000000000..bf5574ad44
--- /dev/null
+++ b/site/content/docs/03-run-time.md
@@ -0,0 +1,1203 @@
+---
+title: Run time
+---
+
+
+### `svelte`
+
+The `svelte` package exposes [lifecycle functions](/tutorial/onmount) and the [context API](/tutorial/context-api).
+
+#### `onMount`
+
+```js
+onMount(callback: () => void)
+```
+```js
+onMount(callback: () => () => void)
+```
+
+---
+
+The `onMount` function schedules a callback to run as soon as the component has been mounted to the DOM. It must be called during the component's initialisation (but doesn't need to live *inside* the component; it can be called from an external module).
+
+`onMount` does not run inside a [server-side component](/docs#run-time-server-side-component-api).
+
+```sv
+<script>
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		console.log('the component has mounted');
+	});
+</script>
+```
+
+---
+
+If a function is returned from `onMount`, it will be called when the component is unmounted.
+
+```sv
+<script>
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		const interval = setInterval(() => {
+			console.log('beep');
+		}, 1000);
+
+		return () => clearInterval(interval);
+	});
+</script>
+```
+
+> This behaviour will only work when the function passed to `onMount` *synchronously* returns a value. `async` functions always return a `Promise`, and as such cannot *synchronously* return a function.
+
+#### `beforeUpdate`
+
+```js
+beforeUpdate(callback: () => void)
+```
+
+---
+
+Schedules a callback to run immediately before the component is updated after any state change.
+
+> The first time the callback runs will be before the initial `onMount`
+
+```sv
+<script>
+	import { beforeUpdate } from 'svelte';
+
+	beforeUpdate(() => {
+		console.log('the component is about to update');
+	});
+</script>
+```
+
+#### `afterUpdate`
+
+```js
+afterUpdate(callback: () => void)
+```
+
+---
+
+Schedules a callback to run immediately after the component has been updated.
+
+> The first time the callback runs will be after the initial `onMount`
+
+```sv
+<script>
+	import { afterUpdate } from 'svelte';
+
+	afterUpdate(() => {
+		console.log('the component just updated');
+	});
+</script>
+```
+
+#### `onDestroy`
+
+```js
+onDestroy(callback: () => void)
+```
+
+---
+
+Schedules a callback to run immediately before the component is unmounted.
+
+Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the only one that runs inside a server-side component.
+
+```sv
+<script>
+	import { onDestroy } from 'svelte';
+
+	onDestroy(() => {
+		console.log('the component is being destroyed');
+	});
+</script>
+```
+
+#### `tick`
+
+```js
+promise: Promise = tick()
+```
+
+---
+
+Returns a promise that resolves once any pending state changes have been applied, or in the next microtask if there are none.
+
+```sv
+<script>
+	import { beforeUpdate, tick } from 'svelte';
+
+	beforeUpdate(async () => {
+		console.log('the component is about to update');
+		await tick();
+		console.log('the component just updated');
+	});
+</script>
+```
+
+#### `setContext`
+
+```js
+setContext(key: any, context: any)
+```
+
+---
+
+Associates an arbitrary `context` object with the current component and the specified `key` and returns that object. The context is then available to children of the component (including slotted content) with `getContext`.
+
+Like lifecycle functions, this must be called during component initialisation.
+
+```sv
+<script>
+	import { setContext } from 'svelte';
+
+	setContext('answer', 42);
+</script>
+```
+
+> Context is not inherently reactive. If you need reactive values in context then you can pass a store into context, which *will* be reactive.
+
+#### `getContext`
+
+```js
+context: any = getContext(key: any)
+```
+
+---
+
+Retrieves the context that belongs to the closest parent component with the specified `key`. Must be called during component initialisation.
+
+```sv
+<script>
+	import { getContext } from 'svelte';
+
+	const answer = getContext('answer');
+</script>
+```
+
+#### `hasContext`
+
+```js
+hasContext: boolean = hasContext(key: any)
+```
+
+---
+
+Checks whether a given `key` has been set in the context of a parent component. Must be called during component initialisation.
+
+```sv
+<script>
+	import { hasContext } from 'svelte';
+
+	if (hasContext('answer')) {
+		// do something
+	}
+</script>
+```
+
+#### `getAllContexts`
+
+```js
+contexts: Map<any, any> = getAllContexts()
+```
+
+---
+
+Retrieves the whole context map that belongs to the closest parent component. Must be called during component initialisation. Useful, for example, if you programmatically create a component and want to pass the existing context to it.
+
+```sv
+<script>
+	import { getAllContexts } from 'svelte';
+
+	const contexts = getAllContexts();
+</script>
+```
+
+#### `createEventDispatcher`
+
+```js
+dispatch: ((name: string, detail?: any, options?: DispatchOptions) => boolean) = createEventDispatcher();
+```
+
+---
+
+Creates an event dispatcher that can be used to dispatch [component events](/docs#template-syntax-component-directives-on-eventname). Event dispatchers are functions that can take two arguments: `name` and `detail`.
+
+Component events created with `createEventDispatcher` create a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture). The `detail` argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) property and can contain any type of data.
+
+```sv
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<button on:click="{() => dispatch('notify', 'detail value')}">Fire Event</button>
+```
+
+---
+
+Events dispatched from child components can be listened to in their parent. Any data provided when the event was dispatched is available on the `detail` property of the event object.
+
+```sv
+<script>
+	function callbackFunction(event) {
+		console.log(`Notify fired! Detail: ${event.detail}`)
+	}
+</script>
+
+<Child on:notify="{callbackFunction}"/>
+```
+
+---
+
+Events can be cancelable by passing a third parameter to the dispatch function. The function returns `false` if the event is cancelled with `event.preventDefault()`, otherwise it returns `true`.
+
+```sv
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	function notify() {
+		const shouldContinue = dispatch('notify', 'detail value', { cancelable: true });
+		if (shouldContinue) {
+			// no one called preventDefault
+		} else {
+			// a listener called preventDefault
+		}
+	}
+</script>
+```
+
+### `svelte/store`
+
+The `svelte/store` module exports functions for creating [readable](/docs#run-time-svelte-store-readable), [writable](/docs#run-time-svelte-store-writable) and [derived](/docs#run-time-svelte-store-derived) stores.
+
+Keep in mind that you don't *have* to use these functions to enjoy the [reactive `$store` syntax](/docs#component-format-script-4-prefix-stores-with-$-to-access-their-values) in your components. Any object that correctly implements `.subscribe`, unsubscribe, and (optionally) `.set` is a valid store, and will work both with the special syntax, and with Svelte's built-in [`derived` stores](/docs#run-time-svelte-store-derived).
+
+This makes it possible to wrap almost any other reactive state handling library for use in Svelte. Read more about the [store contract](/docs#component-format-script-4-prefix-stores-with-$-to-access-their-values-store-contract) to see what a correct implementation looks like.
+
+#### `writable`
+
+```js
+store = writable(value?: any)
+```
+```js
+store = writable(value?: any, start?: (set: (value: any) => void) => () => void)
+```
+
+---
+
+Function that creates a store which has values that can be set from 'outside' components. It gets created as an object with additional `set` and `update` methods.
+
+`set` is a method that takes one argument which is the value to be set. The store value gets set to the value of the argument if the store value is not already equal to it.
+
+`update` is a method that takes one argument which is a callback. The callback takes the existing store value as its argument and returns the new value to be set to the store.
+
+```js
+import { writable } from 'svelte/store';
+
+const count = writable(0);
+
+count.subscribe(value => {
+	console.log(value);
+}); // logs '0'
+
+count.set(1); // logs '1'
+
+count.update(n => n + 1); // logs '2'
+```
+
+---
+
+If a function is passed as the second argument, it will be called when the number of subscribers goes from zero to one (but not from one to two, etc). That function will be passed a `set` function which changes the value of the store. It must return a `stop` function that is called when the subscriber count goes from one to zero.
+
+```js
+import { writable } from 'svelte/store';
+
+const count = writable(0, () => {
+	console.log('got a subscriber');
+	return () => console.log('no more subscribers');
+});
+
+count.set(1); // does nothing
+
+const unsubscribe = count.subscribe(value => {
+	console.log(value);
+}); // logs 'got a subscriber', then '1'
+
+unsubscribe(); // logs 'no more subscribers'
+```
+
+Note that the value of a `writable` is lost when it is destroyed, for example when the page is refreshed. However, you can write your own logic to sync the value to for example the `localStorage`.
+
+#### `readable`
+
+```js
+store = readable(value?: any, start?: (set: (value: any) => void) => () => void)
+```
+
+---
+
+Creates a store whose value cannot be set from 'outside', the first argument is the store's initial value, and the second argument to `readable` is the same as the second argument to `writable`.
+
+```js
+import { readable } from 'svelte/store';
+
+const time = readable(null, set => {
+	set(new Date());
+
+	const interval = setInterval(() => {
+		set(new Date());
+	}, 1000);
+
+	return () => clearInterval(interval);
+});
+```
+
+#### `derived`
+
+```js
+store = derived(a, callback: (a: any) => any)
+```
+```js
+store = derived(a, callback: (a: any, set: (value: any) => void) => void | () => void, initial_value: any)
+```
+```js
+store = derived([a, ...b], callback: ([a: any, ...b: any[]]) => any)
+```
+```js
+store = derived([a, ...b], callback: ([a: any, ...b: any[]], set: (value: any) => void) => void | () => void, initial_value: any)
+```
+
+---
+
+Derives a store from one or more other stores. The callback runs initially when the first subscriber subscribes and then whenever the store dependencies change.
+
+In the simplest version, `derived` takes a single store, and the callback returns a derived value.
+
+```js
+import { derived } from 'svelte/store';
+
+const doubled = derived(a, $a => $a * 2);
+```
+
+---
+
+The callback can set a value asynchronously by accepting a second argument, `set`, and calling it when appropriate.
+
+In this case, you can also pass a third argument to `derived` — the initial value of the derived store before `set` is first called.
+
+```js
+import { derived } from 'svelte/store';
+
+const delayed = derived(a, ($a, set) => {
+	setTimeout(() => set($a), 1000);
+}, 'one moment...');
+```
+
+---
+
+If you return a function from the callback, it will be called when a) the callback runs again, or b) the last subscriber unsubscribes.
+
+```js
+import { derived } from 'svelte/store';
+
+const tick = derived(frequency, ($frequency, set) => {
+	const interval = setInterval(() => {
+	  set(Date.now());
+	}, 1000 / $frequency);
+
+	return () => {
+		clearInterval(interval);
+	};
+}, 'one moment...');
+```
+
+---
+
+In both cases, an array of arguments can be passed as the first argument instead of a single store.
+
+```js
+import { derived } from 'svelte/store';
+
+const summed = derived([a, b], ([$a, $b]) => $a + $b);
+
+const delayed = derived([a, b], ([$a, $b], set) => {
+	setTimeout(() => set($a + $b), 1000);
+});
+```
+
+#### `get`
+
+```js
+value: any = get(store)
+```
+
+---
+
+Generally, you should read the value of a store by subscribing to it and using the value as it changes over time. Occasionally, you may need to retrieve the value of a store to which you're not subscribed. `get` allows you to do so.
+
+> This works by creating a subscription, reading the value, then unsubscribing. It's therefore not recommended in hot code paths.
+
+```js
+import { get } from 'svelte/store';
+
+const value = get(store);
+```
+
+
+### `svelte/motion`
+
+The `svelte/motion` module exports two functions, `tweened` and `spring`, for creating writable stores whose values change over time after `set` and `update`, rather than immediately.
+
+#### `tweened`
+
+```js
+store = tweened(value: any, options)
+```
+
+Tweened stores update their values over a fixed duration. The following options are available:
+
+* `delay` (`number`, default 0) — milliseconds before starting
+* `duration` (`number` | `function`, default 400) — milliseconds the tween lasts
+* `easing` (`function`, default `t => t`) — an [easing function](/docs#run-time-svelte-easing)
+* `interpolate` (`function`) — see below
+
+`store.set` and `store.update` can accept a second `options` argument that will override the options passed in upon instantiation.
+
+Both functions return a Promise that resolves when the tween completes. If the tween is interrupted, the promise will never resolve.
+
+---
+
+Out of the box, Svelte will interpolate between two numbers, two arrays or two objects (as long as the arrays and objects are the same 'shape', and their 'leaf' properties are also numbers).
+
+```sv
+<script>
+	import { tweened } from 'svelte/motion';
+	import { cubicOut } from 'svelte/easing';
+
+	const size = tweened(1, {
+		duration: 300,
+		easing: cubicOut
+	});
+
+	function handleClick() {
+		// this is equivalent to size.update(n => n + 1)
+		$size += 1;
+	}
+</script>
+
+<button
+	on:click={handleClick}
+	style="transform: scale({$size}); transform-origin: 0 0"
+>embiggen</button>
+```
+
+---
+
+If the initial value is `undefined` or `null`, the first value change will take effect immediately. This is useful when you have tweened values that are based on props, and don't want any motion when the component first renders.
+
+```js
+const size = tweened(undefined, {
+	duration: 300,
+	easing: cubicOut
+});
+
+$: $size = big ? 100 : 10;
+```
+
+---
+
+The `interpolate` option allows you to tween between *any* arbitrary values. It must be an `(a, b) => t => value` function, where `a` is the starting value, `b` is the target value, `t` is a number between 0 and 1, and `value` is the result. For example, we can use the [d3-interpolate](https://github.com/d3/d3-interpolate) package to smoothly interpolate between two colours.
+
+```sv
+<script>
+	import { interpolateLab } from 'd3-interpolate';
+	import { tweened } from 'svelte/motion';
+
+	const colors = [
+		'rgb(255, 62, 0)',
+		'rgb(64, 179, 255)',
+		'rgb(103, 103, 120)'
+	];
+
+	const color = tweened(colors[0], {
+		duration: 800,
+		interpolate: interpolateLab
+	});
+</script>
+
+{#each colors as c}
+	<button
+		style="background-color: {c}; color: white; border: none;"
+		on:click="{e => color.set(c)}"
+	>{c}</button>
+{/each}
+
+<h1 style="color: {$color}">{$color}</h1>
+```
+
+#### `spring`
+
+```js
+store = spring(value: any, options)
+```
+
+A `spring` store gradually changes to its target value based on its `stiffness` and `damping` parameters. Whereas `tweened` stores change their values over a fixed duration, `spring` stores change over a duration that is determined by their existing velocity, allowing for more natural-seeming motion in many situations. The following options are available:
+
+* `stiffness` (`number`, default `0.15`) — a value between 0 and 1 where higher means a 'tighter' spring
+* `damping` (`number`, default `0.8`) — a value between 0 and 1 where lower means a 'springier' spring
+* `precision` (`number`, default `0.01`) — determines the threshold at which the spring is considered to have 'settled', where lower means more precise
+
+---
+
+All of the options above can be changed while the spring is in motion, and will take immediate effect.
+
+```js
+const size = spring(100);
+size.stiffness = 0.3;
+size.damping = 0.4;
+size.precision = 0.005;
+```
+
+---
+
+As with [`tweened`](/docs#run-time-svelte-motion-tweened) stores, `set` and `update` return a Promise that resolves if the spring settles.
+
+Both `set` and `update` can take a second argument — an object with `hard` or `soft` properties. `{ hard: true }` sets the target value immediately; `{ soft: n }` preserves existing momentum for `n` seconds before settling. `{ soft: true }` is equivalent to `{ soft: 0.5 }`.
+
+```js
+const coords = spring({ x: 50, y: 50 });
+// updates the value immediately
+coords.set({ x: 100, y: 200 }, { hard: true });
+// preserves existing momentum for 1s
+coords.update(
+	(target_coords, coords) => {
+		return { x: target_coords.x, y: coords.y };
+	},
+	{ soft: 1 }
+);
+```
+
+[See a full example on the spring tutorial.](/tutorial/spring)
+
+```sv
+<script>
+	import { spring } from 'svelte/motion';
+
+	const coords = spring({ x: 50, y: 50 }, {
+		stiffness: 0.1,
+		damping: 0.25
+	});
+</script>
+```
+
+---
+
+If the initial value is `undefined` or `null`, the first value change will take effect immediately, just as with `tweened` values (see above).
+
+```js
+const size = spring();
+$: $size = big ? 100 : 10;
+```
+
+### `svelte/transition`
+
+The `svelte/transition` module exports seven functions: `fade`, `blur`, `fly`, `slide`, `scale`, `draw` and `crossfade`. They are for use with Svelte [`transitions`](/docs#template-syntax-element-directives-transition-fn).
+
+#### `fade`
+
+```sv
+transition:fade={params}
+```
+```sv
+in:fade={params}
+```
+```sv
+out:fade={params}
+```
+
+---
+
+Animates the opacity of an element from 0 to the current opacity for `in` transitions and from the current opacity to 0 for `out` transitions.
+
+`fade` accepts the following parameters:
+
+* `delay` (`number`, default 0) — milliseconds before starting
+* `duration` (`number`, default 400) — milliseconds the transition lasts
+* `easing` (`function`, default `linear`) — an [easing function](/docs#run-time-svelte-easing)
+
+You can see the `fade` transition in action in the [transition tutorial](/tutorial/transition).
+
+```sv
+<script>
+	import { fade } from 'svelte/transition';
+</script>
+
+{#if condition}
+	<div transition:fade="{{delay: 250, duration: 300}}">
+		fades in and out
+	</div>
+{/if}
+```
+
+#### `blur`
+
+```sv
+transition:blur={params}
+```
+```sv
+in:blur={params}
+```
+```sv
+out:blur={params}
+```
+
+---
+
+Animates a `blur` filter alongside an element's opacity.
+
+`blur` accepts the following parameters:
+
+* `delay` (`number`, default 0) — milliseconds before starting
+* `duration` (`number`, default 400) — milliseconds the transition lasts
+* `easing` (`function`, default `cubicInOut`) — an [easing function](/docs#run-time-svelte-easing)
+* `opacity` (`number`, default 0) - the opacity value to animate out to and in from
+* `amount` (`number`, default 5) - the size of the blur in pixels
+
+```sv
+<script>
+	import { blur } from 'svelte/transition';
+</script>
+
+{#if condition}
+	<div transition:blur="{{amount: 10}}">
+		fades in and out
+	</div>
+{/if}
+```
+
+#### `fly`
+
+```sv
+transition:fly={params}
+```
+```sv
+in:fly={params}
+```
+```sv
+out:fly={params}
+```
+
+---
+
+Animates the x and y positions and the opacity of an element. `in` transitions animate from an element's current (default) values to the provided values, passed as parameters. `out` transitions animate from the provided values to an element's default values.
+
+`fly` accepts the following parameters:
+
+* `delay` (`number`, default 0) — milliseconds before starting
+* `duration` (`number`, default 400) — milliseconds the transition lasts
+* `easing` (`function`, default `cubicOut`) — an [easing function](/docs#run-time-svelte-easing)
+* `x` (`number`, default 0) - the x offset to animate out to and in from
+* `y` (`number`, default 0) - the y offset to animate out to and in from
+* `opacity` (`number`, default 0) - the opacity value to animate out to and in from
+
+You can see the `fly` transition in action in the [transition tutorial](/tutorial/adding-parameters-to-transitions).
+
+```sv
+<script>
+	import { fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+</script>
+
+{#if condition}
+	<div transition:fly="{{delay: 250, duration: 300, x: 100, y: 500, opacity: 0.5, easing: quintOut}}">
+		flies in and out
+	</div>
+{/if}
+```
+
+#### `slide`
+
+```sv
+transition:slide={params}
+```
+```sv
+in:slide={params}
+```
+```sv
+out:slide={params}
+```
+
+---
+
+Slides an element in and out.
+
+`slide` accepts the following parameters:
+
+* `delay` (`number`, default 0) — milliseconds before starting
+* `duration` (`number`, default 400) — milliseconds the transition lasts
+* `easing` (`function`, default `cubicOut`) — an [easing function](/docs#run-time-svelte-easing)
+
+```sv
+<script>
+	import { slide } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+</script>
+
+{#if condition}
+	<div transition:slide="{{delay: 250, duration: 300, easing: quintOut }}">
+		slides in and out
+	</div>
+{/if}
+```
+
+#### `scale`
+
+```sv
+transition:scale={params}
+```
+```sv
+in:scale={params}
+```
+```sv
+out:scale={params}
+```
+
+---
+
+Animates the opacity and scale of an element. `in` transitions animate from an element's current (default) values to the provided values, passed as parameters. `out` transitions animate from the provided values to an element's default values.
+
+`scale` accepts the following parameters:
+
+* `delay` (`number`, default 0) — milliseconds before starting
+* `duration` (`number`, default 400) — milliseconds the transition lasts
+* `easing` (`function`, default `cubicOut`) — an [easing function](/docs#run-time-svelte-easing)
+* `start` (`number`, default 0) - the scale value to animate out to and in from
+* `opacity` (`number`, default 0) - the opacity value to animate out to and in from
+
+```sv
+<script>
+	import { scale } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+</script>
+
+{#if condition}
+	<div transition:scale="{{duration: 500, delay: 500, opacity: 0.5, start: 0.5, easing: quintOut}}">
+		scales in and out
+	</div>
+{/if}
+```
+
+#### `draw`
+
+```sv
+transition:draw={params}
+```
+```sv
+in:draw={params}
+```
+```sv
+out:draw={params}
+```
+
+---
+
+Animates the stroke of an SVG element, like a snake in a tube. `in` transitions begin with the path invisible and draw the path to the screen over time. `out` transitions start in a visible state and gradually erase the path. `draw` only works with elements that have a `getTotalLength` method, like `<path>` and `<polyline>`.
+
+`draw` accepts the following parameters:
+
+* `delay` (`number`, default 0) — milliseconds before starting
+* `speed` (`number`, default undefined) - the speed of the animation, see below.
+* `duration` (`number` | `function`, default 800) — milliseconds the transition lasts
+* `easing` (`function`, default `cubicInOut`) — an [easing function](/docs#run-time-svelte-easing)
+
+The `speed` parameter is a means of setting the duration of the transition relative to the path's length. It is a modifier that is applied to the length of the path: `duration = length / speed`. A path that is 1000 pixels with a speed of 1 will have a duration of `1000ms`, setting the speed to `0.5` will double that duration and setting it to `2` will halve it.
+
+```sv
+<script>
+	import { draw } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+</script>
+
+<svg viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg">
+	{#if condition}
+		<path transition:draw="{{duration: 5000, delay: 500, easing: quintOut}}"
+					d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z"
+					fill="none"
+					stroke="cornflowerblue"
+					stroke-width="0.1px"
+					stroke-linejoin="round"
+		/>
+	{/if}
+</svg>
+
+```
+
+
+#### `crossfade`
+
+The `crossfade` function creates a pair of [transitions](/docs#template-syntax-element-directives-transition-fn) called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
+
+---
+
+`crossfade` accepts the following parameters:
+
+* `delay` (`number`, default 0) — milliseconds before starting
+* `duration` (`number` | `function`, default 800) — milliseconds the transition lasts
+* `easing` (`function`, default `cubicOut`) — an [easing function](/docs#run-time-svelte-easing)
+* `fallback` (`function`) — A fallback [transition](/docs#template-syntax-element-directives-transition-fn) to use for send when there is no matching element being received, and for receive when there is no element being sent. 
+
+```sv
+<script>
+	import { crossfade } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+
+	const [send, receive] = crossfade({
+		duration:1500,
+		easing: quintOut
+	});
+</script>
+
+{#if condition}
+	<h1 in:send={{key}} out:receive={{key}}>BIG ELEM</h1>
+{:else}
+	<small in:send={{key}} out:receive={{key}}>small elem</small>
+{/if}
+```
+
+
+### `svelte/animate`
+
+The `svelte/animate` module exports one function for use with Svelte [animations](/docs#template-syntax-element-directives-animate-fn).
+
+#### `flip`
+
+```sv
+animate:flip={params}
+```
+
+The `flip` function calculates the start and end position of an element and animates between them, translating the `x` and `y` values. `flip` stands for [First, Last, Invert, Play](https://aerotwist.com/blog/flip-your-animations/).
+
+`flip` accepts the following parameters:
+
+* `delay` (`number`, default 0) — milliseconds before starting
+* `duration` (`number` | `function`, default `d => Math.sqrt(d) * 120`) — see below
+* `easing` (`function`, default `cubicOut`) — an [easing function](/docs#run-time-svelte-easing)
+
+
+`duration` can be provided as either:
+
+- a `number`, in milliseconds.
+- a function, `distance: number => duration: number`, receiving the distance the element will travel in pixels and returning the duration in milliseconds. This allows you to assign a duration that is relative to the distance travelled by each element.
+
+---
+
+You can see a full example on the [animations tutorial](/tutorial/animate)
+
+
+```sv
+<script>
+	import { flip } from 'svelte/animate';
+	import { quintOut } from 'svelte/easing';
+
+	let list = [1, 2, 3];
+</script>
+
+{#each list as n (n)}
+	<div animate:flip="{{delay: 250, duration: 250, easing: quintOut}}">
+		{n}
+	</div>
+{/each}
+```
+
+
+
+### `svelte/easing`
+
+Easing functions specify the rate of change over time and are useful when working with Svelte's built-in transitions and animations as well as the tweened and spring utilities. `svelte/easing` contains 31 named exports, a `linear` ease and 3 variants of 10 different easing functions: `in`, `out` and `inOut`.
+
+You can explore the various eases using the [ease visualiser](/examples/easing) in the [examples section](/examples).
+
+
+| ease | in | out | inOut |
+| --- | --- | --- | --- |
+| **back** | `backIn` | `backOut` | `backInOut` |
+| **bounce** | `bounceIn` | `bounceOut` | `bounceInOut` |
+| **circ** | `circIn` | `circOut` | `circInOut` |
+| **cubic** | `cubicIn` | `cubicOut` | `cubicInOut` |
+| **elastic** | `elasticIn` | `elasticOut` | `elasticInOut` |
+| **expo** | `expoIn` | `expoOut` | `expoInOut` |
+| **quad** | `quadIn` | `quadOut` | `quadInOut` |
+| **quart** | `quartIn` | `quartOut` | `quartInOut` |
+| **quint** | `quintIn` | `quintOut` | `quintInOut` |
+| **sine** | `sineIn` | `sineOut` | `sineInOut` |
+
+
+### `svelte/register`
+
+To render Svelte components in Node.js without bundling, use `require('svelte/register')`. After that, you can use `require` to include any `.svelte` file.
+
+```js
+require('svelte/register');
+
+const App = require('./App.svelte').default;
+
+...
+
+const { html, css, head } = App.render({ answer: 42 });
+```
+
+> The `.default` is necessary because we're converting from native JavaScript modules to the CommonJS modules recognised by Node. Note that if your component imports JavaScript modules, they will fail to load in Node and you will need to use a bundler instead.
+
+To set compile options, or to use a custom file extension, call the `register` hook as a function:
+
+```js
+require('svelte/register')({
+  extensions: ['.customextension'], // defaults to ['.html', '.svelte']
+	preserveComments: true
+});
+```
+
+
+### Client-side component API
+
+#### Creating a component
+
+```js
+const component = new Component(options)
+```
+
+A client-side component — that is, a component compiled with `generate: 'dom'` (or the `generate` option left unspecified) is a JavaScript class.
+
+```js
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body,
+	props: {
+		// assuming App.svelte contains something like
+		// `export let answer`:
+		answer: 42
+	}
+});
+```
+
+The following initialisation options can be provided:
+
+| option | default | description |
+| --- | --- | --- |
+| `target` | **none** | An `HTMLElement` or `ShadowRoot` to render to. This option is required
+| `anchor` | `null` | A child of `target` to render the component immediately before
+| `props` | `{}` | An object of properties to supply to the component
+| `context` | `new Map()` | A `Map` of root-level context key-value pairs to supply to the component
+| `hydrate` | `false` | See below
+| `intro` | `false` | If `true`, will play transitions on initial render, rather than waiting for subsequent state changes
+
+Existing children of `target` are left where they are.
+
+
+---
+
+The `hydrate` option instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. It will only work if the component was compiled with the [`hydratable: true` option](/docs#compile-time-svelte-compile). Hydration of `<head>` elements only works properly if the server-side rendering code was also compiled with `hydratable: true`, which adds a marker to each element in the `<head>` so that the component knows which elements it's responsible for removing during hydration.
+
+Whereas children of `target` are normally left alone, `hydrate: true` will cause any children to be removed. For that reason, the `anchor` option cannot be used alongside `hydrate: true`.
+
+The existing DOM doesn't need to match the component — Svelte will 'repair' the DOM as it goes.
+
+```js
+import App from './App.svelte';
+
+const app = new App({
+	target: document.querySelector('#server-rendered-html'),
+	hydrate: true
+});
+```
+
+#### `$set`
+
+```js
+component.$set(props)
+```
+
+---
+
+Programmatically sets props on an instance. `component.$set({ x: 1 })` is equivalent to `x = 1` inside the component's `<script>` block.
+
+Calling this method schedules an update for the next microtask — the DOM is *not* updated synchronously.
+
+```js
+component.$set({ answer: 42 });
+```
+
+#### `$on`
+
+```js
+component.$on(event, callback)
+```
+
+---
+
+Causes the `callback` function to be called whenever the component dispatches an `event`.
+
+A function is returned that will remove the event listener when called.
+
+```js
+const off = app.$on('selected', event => {
+	console.log(event.detail.selection);
+});
+
+off();
+```
+
+#### `$destroy`
+
+```js
+component.$destroy()
+```
+
+Removes a component from the DOM and triggers any `onDestroy` handlers.
+
+#### Component props
+
+```js
+component.prop
+```
+```js
+component.prop = value
+```
+
+---
+
+If a component is compiled with `accessors: true`, each instance will have getters and setters corresponding to each of the component's props. Setting a value will cause a *synchronous* update, rather than the default async update caused by `component.$set(...)`.
+
+By default, `accessors` is `false`, unless you're compiling as a custom element.
+
+```js
+console.log(app.count);
+app.count += 1;
+```
+
+
+### Custom element API
+
+---
+
+Svelte components can also be compiled to custom elements (aka web components) using the `customElement: true` compiler option. You should specify a tag name for the component using the `<svelte:options>` [element](/docs#template-syntax-svelte-options).
+
+```sv
+<svelte:options tag="my-element" />
+
+<script>
+	export let name = 'world';
+</script>
+
+<h1>Hello {name}!</h1>
+<slot></slot>
+```
+
+---
+
+Alternatively, use `tag={null}` to indicate that the consumer of the custom element should name it.
+
+```js
+import MyElement from './MyElement.svelte';
+
+customElements.define('my-element', MyElement);
+```
+
+---
+
+Once a custom element has been defined, it can be used as a regular DOM element:
+
+```js
+document.body.innerHTML = `
+	<my-element>
+		<p>This is some slotted content</p>
+	</my-element>
+`;
+```
+
+---
+
+By default, custom elements are compiled with `accessors: true`, which means that any [props](/docs#template-syntax-attributes-and-props) are exposed as properties of the DOM element (as well as being readable/writable as attributes, where possible).
+
+To prevent this, add `accessors={false}` to `<svelte:options>`.
+
+```js
+const el = document.querySelector('my-element');
+
+// get the current value of the 'name' prop
+console.log(el.name);
+
+// set a new value, updating the shadow DOM
+el.name = 'everybody';
+```
+
+Custom elements can be a useful way to package components for consumption in a non-Svelte app, as they will work with vanilla HTML and JavaScript as well as [most frameworks](https://custom-elements-everywhere.com/). There are, however, some important differences to be aware of:
+
+* Styles are *encapsulated*, rather than merely *scoped*. This means that any non-component styles (such as you might have in a `global.css` file) will not apply to the custom element, including styles with the `:global(...)` modifier
+* Instead of being extracted out as a separate .css file, styles are inlined into the component as a JavaScript string
+* Custom elements are not generally suitable for server-side rendering, as the shadow DOM is invisible until JavaScript loads
+* In Svelte, slotted content renders *lazily*. In the DOM, it renders *eagerly*. In other words, it will always be created even if the component's `<slot>` element is inside an `{#if ...}` block. Similarly, including a `<slot>` in an `{#each ...}` block will not cause the slotted content to be rendered multiple times
+* The `let:` directive has no effect
+* Polyfills are required to support older browsers
+
+
+
+### Server-side component API
+
+```js
+const result = Component.render(...)
+```
+
+---
+
+Unlike client-side components, server-side components don't have a lifespan after you render them — their whole job is to create some HTML and CSS. For that reason, the API is somewhat different.
+
+A server-side component exposes a `render` method that can be called with optional props. It returns an object with `head`, `html`, and `css` properties, where `head` contains the contents of any `<svelte:head>` elements encountered.
+
+You can import a Svelte component directly into Node using [`svelte/register`](/docs#run-time-svelte-register).
+
+```js
+require('svelte/register');
+
+const App = require('./App.svelte').default;
+
+const { head, html, css } = App.render({
+	answer: 42
+});
+```
+
+---
+
+The `.render()` method accepts the following parameters:
+
+| parameter | default | description |
+| --- | --- | --- |
+| `props` | `{}` | An object of properties to supply to the component
+| `options` | `{}` | An object of options
+
+The `options` object takes in the following options:
+
+| option | default | description |
+| --- | --- | --- |
+| `context` | `new Map()` | A `Map` of root-level context key-value pairs to supply to the component
+
+```js
+const { head, html, css } = App.render(
+	// props
+	{ answer: 42 },
+	// options
+	{
+		context: new Map([['context-key', 'context-value']])
+	}
+);
+```
diff --git a/site/content/docs/04-compile-time.md b/site/content/docs/04-compile-time.md
new file mode 100644
index 0000000000..35a57ced85
--- /dev/null
+++ b/site/content/docs/04-compile-time.md
@@ -0,0 +1,367 @@
+---
+title: Compile time
+---
+
+Typically, you won't interact with the Svelte compiler directly, but will instead integrate it into your build system using a bundler plugin. The bundler plugin that the Svelte team most recommends and invests in is [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte). The [SvelteKit](https://kit.svelte.dev/) framework provides a setup leveraging `vite-plugin-svelte` to build applications as well as a [tool for packaging Svelte component libraries](https://kit.svelte.dev/docs/packaging). Svelte Society maintains a list of [other bundler plugins](https://sveltesociety.dev/tools/#bundling) for additional tools like Rollup and Webpack.
+
+Nonetheless, it's useful to understand how to use the compiler, since bundler plugins generally expose compiler options to you.
+
+
+
+### `svelte.compile`
+
+```js
+result: {
+	js,
+	css,
+	ast,
+	warnings,
+	vars,
+	stats
+} = svelte.compile(source: string, options?: {...})
+```
+
+---
+
+This is where the magic happens. `svelte.compile` takes your component source code, and turns it into a JavaScript module that exports a class.
+
+```js
+const svelte = require('svelte/compiler');
+
+const result = svelte.compile(source, {
+	// options
+});
+```
+
+The following options can be passed to the compiler. None are required:
+
+<!-- | option | type | default
+| --- | --- | --- |
+| `filename` | string | `null`
+| `name` | string | `"Component"`
+| `format` | `"esm"` or `"cjs"` | `"esm"`
+| `generate` | `"dom"` or `"ssr"` or `false` | `"dom"`
+| `errorMode` | `"throw"` or `"warn"` | `"throw"`
+| `varsReport` | `"strict"` or `"full"` or `false` | `"strict"`
+| `dev` | boolean | `false`
+| `immutable` | boolean | `false`
+| `hydratable` | boolean | `false`
+| `legacy` | boolean | `false`
+| `customElement` | boolean | `false`
+| `tag` | string | null
+| `accessors` | boolean | `false`
+| `css` | boolean | `true`
+| `loopGuardTimeout` | number | 0
+| `preserveComments` | boolean | `false`
+| `preserveWhitespace` | boolean | `false`
+| `outputFilename` | string | `null`
+| `cssOutputFilename` | string | `null`
+| `sveltePath` | string | `"svelte"` -->
+
+| option | default | description |
+| --- | --- | --- |
+| `filename` | `null` | `string` used for debugging hints and sourcemaps. Your bundler plugin will set it automatically.
+| `name` | `"Component"` | `string` that sets the name of the resulting JavaScript class (though the compiler will rename it if it would otherwise conflict with other variables in scope). It will normally be inferred from `filename`.
+| `format` | `"esm"` | If `"esm"`, creates a JavaScript module (with `import` and `export`). If `"cjs"`, creates a CommonJS module (with `require` and `module.exports`), which is useful in some server-side rendering situations or for testing.
+| `generate` | `"dom"` | If `"dom"`, Svelte emits a JavaScript class for mounting to the DOM. If `"ssr"`, Svelte emits an object with a `render` method suitable for server-side rendering. If `false`, no JavaScript or CSS is returned; just metadata.
+| `errorMode` | `"throw"` | If `"throw"`, Svelte throws when a compilation error occurred. If `"warn"`, Svelte will treat errors as warnings and add them to the warning report.
+| `varsReport` | `"strict"` | If `"strict"`, Svelte returns a variables report with only variables that are not globals nor internals. If `"full"`, Svelte returns a variables report with all detected variables. If `false`, no variables report is returned.
+| `dev` | `false` | If `true`, causes extra code to be added to components that will perform runtime checks and provide debugging information during development.
+| `immutable` | `false` | If `true`, tells the compiler that you promise not to mutate any objects. This allows it to be less conservative about checking whether values have changed.
+| `hydratable` | `false` | If `true` when generating DOM code, enables the `hydrate: true` runtime option, which allows a component to upgrade existing DOM rather than creating new DOM from scratch. When generating SSR code, this adds markers to `<head>` elements so that hydration knows which to replace.
+| `legacy` | `false` | If `true`, generates code that will work in IE9 and IE10, which don't support things like `element.dataset`.
+| `accessors` | `false` | If `true`, getters and setters will be created for the component's props. If `false`, they will only be created for readonly exported values (i.e. those declared with `const`, `class` and `function`). If compiling with `customElement: true` this option defaults to `true`.
+| `customElement` | `false` | If `true`, tells the compiler to generate a custom element constructor instead of a regular Svelte component.
+| `tag` | `null` | A `string` that tells Svelte what tag name to register the custom element with. It must be a lowercase alphanumeric string with at least one hyphen, e.g. `"my-element"`.
+| `css` | `true` | If `true`, styles will be included in the JavaScript class and injected at runtime for the components actually rendered. If `false`, the CSS will be returned in the `css` field of the compilation result. Most Svelte bundler plugins will set this to `false` and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable `.css` files.
+| `cssHash` | See right | A function that takes a `{ hash, css, name, filename }` argument and returns the string that is used as a classname for scoped CSS. It defaults to returning `svelte-${hash(css)}`
+| `loopGuardTimeout` | 0 | A `number` that tells Svelte to break the loop if it blocks the thread for more than `loopGuardTimeout` ms. This is useful to prevent infinite loops. **Only available when `dev: true`**
+| `preserveComments` | `false` | If `true`, your HTML comments will be preserved during server-side rendering. By default, they are stripped out.
+| `preserveWhitespace` | `false` | If `true`, whitespace inside and between elements is kept as you typed it, rather than removed or collapsed to a single space where possible.
+| `sourcemap` | `object \| string` | An initial sourcemap that will be merged into the final output sourcemap. This is usually the preprocessor sourcemap.
+| `enableSourcemap` | `boolean \| { js: boolean; css: boolean; }` | If `true`, Svelte generate sourcemaps for components. Use an object with `js` or `css` for more granular control of sourcemap generation. By default, this is `true`.
+| `outputFilename` | `null` | A `string` used for your JavaScript sourcemap.
+| `cssOutputFilename` | `null` | A `string` used for your CSS sourcemap.
+| `sveltePath` | `"svelte"` | The location of the `svelte` package. Any imports from `svelte` or `svelte/[module]` will be modified accordingly.
+| `namespace` | `"html"` | The namespace of the element; e.g., `"mathml"`, `"svg"`, `"foreign"`.
+
+---
+
+The returned `result` object contains the code for your component, along with useful bits of metadata.
+
+```js
+const {
+	js,
+	css,
+	ast,
+	warnings,
+	vars,
+	stats
+} = svelte.compile(source);
+```
+
+* `js` and `css` are objects with the following properties:
+	* `code` is a JavaScript string
+	* `map` is a sourcemap with additional `toString()` and `toUrl()` convenience methods
+* `ast` is an abstract syntax tree representing the structure of your component.
+* `warnings` is an array of warning objects that were generated during compilation. Each warning has several properties:
+	* `code` is a string identifying the category of warning
+	* `message` describes the issue in human-readable terms
+	* `start` and `end`, if the warning relates to a specific location, are objects with `line`, `column` and `character` properties
+	* `frame`, if applicable, is a string highlighting the offending code with line numbers
+* `vars` is an array of the component's declarations, used by [eslint-plugin-svelte3](https://github.com/sveltejs/eslint-plugin-svelte3) for example. Each variable has several properties:
+	* `name` is self-explanatory
+	* `export_name` is the name the value is exported as, if it is exported (will match `name` unless you do `export...as`)
+	* `injected` is `true` if the declaration is injected by Svelte, rather than in the code you wrote
+	* `module` is `true` if the value is declared in a `context="module"` script
+	* `mutated` is `true` if the value's properties are assigned to inside the component
+	* `reassigned` is `true` if the value is reassigned inside the component
+	* `referenced` is `true` if the value is used in the template
+	* `referenced_from_script` is `true` if the value is used in the `<script>` outside the declaration
+	* `writable` is `true` if the value was declared with `let` or `var` (but not `const`, `class` or `function`)
+* `stats` is an object used by the Svelte developer team for diagnosing the compiler. Avoid relying on it to stay the same!
+
+
+<!--
+
+```js
+compiled: {
+	// `map` is a v3 sourcemap with toString()/toUrl() methods
+	js: { code: string, map: {...} },
+	css: { code: string, map: {...} },
+	ast: {...}, // ESTree-like syntax tree for the component, including HTML, CSS and JS
+	warnings: Array<{
+		code: string,
+		message: string,
+		filename: string,
+		pos: number,
+		start: { line: number, column: number },
+		end: { line: number, column: number },
+		frame: string,
+		toString: () => string
+	}>,
+	vars: Array<{
+		name: string,
+		export_name: string,
+		injected: boolean,
+		module: boolean,
+		mutated: boolean,
+		reassigned: boolean,
+		referenced: boolean,
+		referenced_from_script: boolean,
+		writable: boolean
+	}>,
+	stats: {
+		timings: { [label]: number }
+	}
+} = svelte.compile(source: string, options?: {...})
+```
+
+-->
+
+
+### `svelte.parse`
+
+```js
+ast: object = svelte.parse(
+	source: string,
+	options?: {
+		filename?: string,
+		customElement?: boolean
+	}
+)
+```
+
+---
+
+The `parse` function parses a component, returning only its abstract syntax tree. Unlike compiling with the `generate: false` option, this will not perform any validation or other analysis of the component beyond parsing it. Note that the returned AST is not considered public API, so breaking changes could occur at any point in time.
+
+
+```js
+const svelte = require('svelte/compiler');
+
+const ast = svelte.parse(source, { filename: 'App.svelte' });
+```
+
+
+### `svelte.preprocess`
+
+A number of [community-maintained preprocessing plugins](https://sveltesociety.dev/tools#preprocessors) are available to allow you to use Svelte with tools like TypeScript, PostCSS, SCSS, and Less.
+
+You can write your own preprocessor using the `svelte.preprocess` API.
+
+```js
+result: {
+	code: string,
+	dependencies: Array<string>
+} = await svelte.preprocess(
+	source: string,
+	preprocessors: Array<{
+		markup?: (input: { content: string, filename: string }) => Promise<{
+			code: string,
+			dependencies?: Array<string>
+		}>,
+		script?: (input: { content: string, markup: string, attributes: Record<string, string>, filename: string }) => Promise<{
+			code: string,
+			dependencies?: Array<string>
+		}>,
+		style?: (input: { content: string, markup: string, attributes: Record<string, string>, filename: string }) => Promise<{
+			code: string,
+			dependencies?: Array<string>
+		}>
+	}>,
+	options?: {
+		filename?: string
+	}
+)
+```
+
+---
+
+The `preprocess` function provides convenient hooks for arbitrarily transforming component source code. For example, it can be used to convert a `<style lang="sass">` block into vanilla CSS.
+
+The first argument is the component source code. The second is an array of *preprocessors* (or a single preprocessor, if you only have one), where a preprocessor is an object with `markup`, `script` and `style` functions, each of which is optional.
+
+Each `markup`, `script` or `style` function must return an object (or a Promise that resolves to an object) with a `code` property, representing the transformed source code, and an optional array of `dependencies`.
+
+The `markup` function receives the entire component source text, along with the component's `filename` if it was specified in the third argument.
+
+> Preprocessor functions should additionally return a `map` object alongside `code` and `dependencies`, where `map` is a sourcemap representing the transformation.
+
+```js
+const svelte = require('svelte/compiler');
+const MagicString = require('magic-string');
+
+const { code } = await svelte.preprocess(source, {
+	markup: ({ content, filename }) => {
+		const pos = content.indexOf('foo');
+		if(pos < 0) {
+			return { code: content }
+		}
+		const s = new MagicString(content, { filename })
+		s.overwrite(pos, pos + 3, 'bar', { storeName: true })
+		return {
+			code: s.toString(),
+			map: s.generateMap()
+		}
+	}
+}, {
+	filename: 'App.svelte'
+});
+```
+
+---
+
+The `script` and `style` functions receive the contents of `<script>` and `<style>` elements respectively (`content`) as well as the entire component source text (`markup`). In addition to `filename`, they get an object of the element's attributes.
+
+If a `dependencies` array is returned, it will be included in the result object. This is used by packages like [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) to watch additional files for changes, in the case where your `<style>` tag has an `@import` (for example).
+
+```js
+const svelte = require('svelte/compiler');
+const sass = require('node-sass');
+const { dirname } = require('path');
+
+const { code, dependencies } = await svelte.preprocess(source, {
+	style: async ({ content, attributes, filename }) => {
+		// only process <style lang="sass">
+		if (attributes.lang !== 'sass') return;
+
+		const { css, stats } = await new Promise((resolve, reject) => sass.render({
+			file: filename,
+			data: content,
+			includePaths: [
+				dirname(filename),
+			],
+		}, (err, result) => {
+			if (err) reject(err);
+			else resolve(result);
+		}));
+
+		return {
+			code: css.toString(),
+			dependencies: stats.includedFiles
+		};
+	}
+}, {
+	filename: 'App.svelte'
+});
+```
+
+---
+
+Multiple preprocessors can be used together. The output of the first becomes the input to the second. `markup` functions run first, then `script` and `style`.
+
+```js
+const svelte = require('svelte/compiler');
+
+const { code } = await svelte.preprocess(source, [
+	{
+		markup: () => {
+			console.log('this runs first');
+		},
+		script: () => {
+			console.log('this runs third');
+		},
+		style: () => {
+			console.log('this runs fifth');
+		}
+	},
+	{
+		markup: () => {
+			console.log('this runs second');
+		},
+		script: () => {
+			console.log('this runs fourth');
+		},
+		style: () => {
+			console.log('this runs sixth');
+		}
+	}
+], {
+	filename: 'App.svelte'
+});
+```
+
+
+### `svelte.walk`
+
+```js
+walk(ast: Node, {
+	enter(node: Node, parent: Node, prop: string, index: number)?: void,
+	leave(node: Node, parent: Node, prop: string, index: number)?: void
+})
+```
+
+---
+
+The `walk` function provides a way to walk the abstract syntax trees generated by the parser, using the compiler's own built-in instance of [estree-walker](https://github.com/Rich-Harris/estree-walker).
+
+The walker takes an abstract syntax tree to walk and an object with two optional methods: `enter` and `leave`. For each node, `enter` is called (if present). Then, unless `this.skip()` is called during `enter`, each of the children are traversed, and then `leave` is called on the node.
+
+
+```js
+const svelte = require('svelte/compiler');
+svelte.walk(ast, {
+	enter(node, parent, prop, index) {
+		do_something(node);
+		if (should_skip_children(node)) {
+			this.skip();
+		}
+	},
+	leave(node, parent, prop, index) {
+		do_something_else(node);
+	}
+});
+```
+
+
+### `svelte.VERSION`
+
+---
+
+The current version, as set in package.json.
+
+```js
+const svelte = require('svelte/compiler');
+console.log(`running svelte version ${svelte.VERSION}`);
+```
diff --git a/site/content/docs/05-accessibility-warnings.md b/site/content/docs/05-accessibility-warnings.md
new file mode 100644
index 0000000000..b39b06f9ff
--- /dev/null
+++ b/site/content/docs/05-accessibility-warnings.md
@@ -0,0 +1,272 @@
+---
+title: Accessibility warnings
+---
+
+Accessibility (shortened to a11y) isn't always easy to get right, but Svelte will help by warning you at compile time if you write inaccessible markup. However, keep in mind that many accessibility issues can only be identified at runtime using other automated tools and by manually testing your application.
+
+Here is a list of accessibility checks Svelte will do for you.
+
+---
+
+### `a11y-accesskey`
+
+Enforce no `accesskey` on element. Access keys are HTML attributes that allow web developers to assign keyboard shortcuts to elements. Inconsistencies between keyboard shortcuts and keyboard commands used by screen reader and keyboard-only users create accessibility complications. To avoid complications, access keys should not be used.
+
+```sv
+<!-- A11y: Avoid using accesskey -->
+<div accessKey='z'></div>
+```
+
+---
+
+### `a11y-aria-attributes`
+
+Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `aria-*` props.
+
+```sv
+<!-- A11y: <meta> should not have aria-* attributes -->
+<meta aria-hidden="false">
+```
+
+---
+
+### `a11y-autofocus`
+
+Enforce that `autofocus` is not used on elements. Autofocusing elements can cause usability issues for sighted and non-sighted users alike.
+
+```sv
+<!-- A11y: Avoid using autofocus -->
+<input autofocus>
+```
+
+---
+
+### `a11y-distracting-elements`
+
+Enforces that no distracting elements are used. Elements that can be visually distracting can cause accessibility issues with visually impaired users. Such elements are most likely deprecated, and should be avoided.
+
+The following elements are visually distracting: `<marquee>` and `<blink>`.
+
+```sv
+<!-- A11y: Avoid <marquee> elements -->
+<marquee />
+```
+
+---
+
+### `a11y-hidden`
+
+Certain DOM elements are useful for screen reader navigation and should not be hidden.
+
+```sv
+<!-- A11y: <h2> element should not be hidden -->
+<h2 aria-hidden="true">invisible header</h2>
+```
+
+---
+
+### `a11y-img-redundant-alt`
+
+Enforce img alt attribute does not contain the word image, picture, or photo. Screen readers already announce `img` elements as an image. There is no need to use words such as _image_, _photo_, and/or _picture_.
+
+```sv
+<img src="foo" alt="Foo eating a sandwich." />
+
+<!-- aria-hidden, won't be announced by screen reader -->
+<img src="bar" aria-hidden="true" alt="Picture of me taking a photo of an image" />
+
+<!-- A11y: Screen readers already announce <img> elements as an image. -->
+<img src="foo" alt="Photo of foo being weird." />
+
+<!-- A11y: Screen readers already announce <img> elements as an image. -->
+<img src="bar" alt="Image of me at a bar!" />
+
+<!-- A11y: Screen readers already announce <img> elements as an image. -->
+<img src="foo" alt="Picture of baz fixing a bug." />
+```
+
+---
+
+### `a11y-invalid-attribute`
+
+Enforce that attributes important for accessibility have a valid value. For example, `href` should not be empty, `'#'`, or `javascript:`.
+
+```sv
+<!-- A11y: '' is not a valid href attribute -->
+<a href=''>invalid</a>
+```
+
+---
+
+### `a11y-label-has-associated-control`
+
+Enforce that a label tag has a text label and an associated control.
+
+There are two supported ways to associate a label with a control:
+
+- Wrapping a control in a label tag.
+- Adding `for` to a label and assigning it the ID of an input on the page.
+
+```sv
+<label for="id">B</label>
+
+<label>C <input type="text" /></label>
+
+<!-- A11y: A form label must be associated with a control. -->
+<label>A</label>
+```
+
+---
+
+### `a11y-media-has-caption`
+
+Providing captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information. Not only is this important for accessibility, but can also be useful for all users in the case that the media is unavailable (similar to `alt` text on an image when an image is unable to load).
+
+The captions should contain all important and relevant information to understand the corresponding media. This may mean that the captions are not a 1:1 mapping of the dialogue in the media content. However, captions are not necessary for video components with the `muted` attribute.
+
+```sv
+<video><track kind="captions"/></video>
+
+<audio muted></audio>
+
+<!-- A11y: Media elements must have a <track kind=\"captions\"> -->
+<video></video>
+
+<!-- A11y: Media elements must have a <track kind=\"captions\"> -->
+<video><track /></video>
+```
+
+---
+
+### `a11y-misplaced-role`
+
+Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `role` props.
+
+```sv
+<!-- A11y: <meta> should not have role attribute -->
+<meta role="tooltip">
+```
+
+---
+
+### `a11y-misplaced-scope`
+
+The scope attribute should only be used on `<th>` elements.
+
+```sv
+<!-- A11y: The scope attribute should only be used with <th> elements -->
+<div scope="row" />
+```
+
+---
+
+### `a11y-missing-attribute`
+
+Enforce that attributes required for accessibility are present on an element. This includes the following checks:
+
+- `<a>` should have an href (unless it's a [fragment-defining tag](https://github.com/sveltejs/svelte/issues/4697))
+- `<area>` should have alt, aria-label, or aria-labelledby
+- `<html>` should have lang
+- `<iframe>` should have title
+- `<img>` should have alt
+- `<object>` should have title, aria-label, or aria-labelledby
+- `<input type="image">` should have alt, aria-label, or aria-labelledby
+
+```sv
+<!-- A11y: <input type=\"image\"> element should have an alt, aria-label or aria-labelledby attribute -->
+<input type="image">
+
+<!-- A11y: <html> element should have a lang attribute -->
+<html></html>
+
+<!-- A11y: <a> element should have an href attribute -->
+<a>text</a>
+```
+
+---
+
+### `a11y-missing-content`
+
+Enforce that heading elements (`h1`, `h2`, etc.) and anchors have content and that the content is accessible to screen readers
+
+```sv
+<!-- A11y: <a> element should have child content -->
+<a href='/foo'></a>
+
+<!-- A11y: <h1> element should have child content -->
+<h1></h1>
+```
+
+---
+
+### `a11y-mouse-events-have-key-events`
+
+Enforce that `on:mouseover` and `on:mouseout` are accompanied by `on:focus` and `on:blur`, respectively. This helps to ensure that any functionality triggered by these mouse events is also accessible to keyboard users.
+
+```sv
+<!-- A11y: on:mouseover must be accompanied by on:focus -->
+<div on:mouseover={handleMouseover} />
+
+<!-- A11y: on:mouseout must be accompanied by on:blur -->
+<div on:mouseout={handleMouseout} />
+```
+
+---
+
+### `a11y-no-redundant-roles`
+
+Some HTML elements have default ARIA roles. Giving these elements an ARIA role that is already set by the browser [has no effect](https://www.w3.org/TR/using-aria/#aria-does-nothing) and is redundant.
+
+```sv
+<!-- A11y: Redundant role 'button' -->
+<button role="button" />
+
+<!-- A11y: Redundant role 'img' -->
+<img role="img" src="foo.jpg" />
+```
+
+---
+
+### `a11y-positive-tabindex`
+
+Avoid positive `tabindex` property values. This will move elements out of the expected tab order, creating a confusing experience for keyboard users.
+
+```sv
+<!-- A11y: avoid tabindex values above zero -->
+<div tabindex='1'/>
+```
+
+---
+
+### `a11y-structure`
+
+Enforce that certain DOM elements have the correct structure.
+
+```sv
+<!-- A11y: <figcaption> must be an immediate child of <figure> -->
+<div>
+	<figcaption>Image caption</figcaption>
+</div>
+```
+
+---
+
+### `a11y-unknown-aria-attribute`
+
+Enforce that only known ARIA attributes are used. This is based on the [WAI-ARIA States and Properties spec](https://www.w3.org/WAI/PF/aria-1.1/states_and_properties).
+
+```sv
+<!-- A11y: Unknown aria attribute 'aria-labeledby' (did you mean 'labelledby'?) -->
+<input type="image" aria-labeledby="foo">
+```
+
+---
+
+### `a11y-unknown-role`
+
+Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference to role definitions can be found at [WAI-ARIA](https://www.w3.org/TR/wai-aria/#role_definitions) site.
+
+```sv
+<!-- A11y: Unknown role 'toooltip' (did you mean 'tooltip'?) -->
+<div role="toooltip"></div>
+```
diff --git a/site/content/examples/00-introduction/00-hello-world/App.svelte b/site/content/examples/00-introduction/00-hello-world/App.svelte
new file mode 100644
index 0000000000..22b3c84db0
--- /dev/null
+++ b/site/content/examples/00-introduction/00-hello-world/App.svelte
@@ -0,0 +1,5 @@
+<script>
+	let name = 'world';
+</script>
+
+<h1>Hello {name}!</h1>
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/00-hello-world/meta.json b/site/content/examples/00-introduction/00-hello-world/meta.json
new file mode 100644
index 0000000000..6cf02c2ed1
--- /dev/null
+++ b/site/content/examples/00-introduction/00-hello-world/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Hello world"
+}
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/01-dynamic-attributes/App.svelte b/site/content/examples/00-introduction/01-dynamic-attributes/App.svelte
new file mode 100644
index 0000000000..6a1ac86e69
--- /dev/null
+++ b/site/content/examples/00-introduction/01-dynamic-attributes/App.svelte
@@ -0,0 +1,7 @@
+<script>
+	let src = '/tutorial/image.gif';
+	let name = 'Rick Astley';
+</script>
+
+<!-- {src} is short for src={src} -->
+<img {src} alt="{name} dancing">
diff --git a/site/content/examples/00-introduction/01-dynamic-attributes/meta.json b/site/content/examples/00-introduction/01-dynamic-attributes/meta.json
new file mode 100644
index 0000000000..89614e0aa6
--- /dev/null
+++ b/site/content/examples/00-introduction/01-dynamic-attributes/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Dynamic attributes"
+}
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/02-styling/App.svelte b/site/content/examples/00-introduction/02-styling/App.svelte
new file mode 100644
index 0000000000..b3ad2fc8e6
--- /dev/null
+++ b/site/content/examples/00-introduction/02-styling/App.svelte
@@ -0,0 +1,9 @@
+<p>Styled!</p>
+
+<style>
+	p {
+		color: purple;
+		font-family: 'Comic Sans MS', cursive;
+		font-size: 2em;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/02-styling/meta.json b/site/content/examples/00-introduction/02-styling/meta.json
new file mode 100644
index 0000000000..dcdf2bff01
--- /dev/null
+++ b/site/content/examples/00-introduction/02-styling/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Styling"
+}
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/03-nested-components/App.svelte b/site/content/examples/00-introduction/03-nested-components/App.svelte
new file mode 100644
index 0000000000..0b200112ab
--- /dev/null
+++ b/site/content/examples/00-introduction/03-nested-components/App.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<p>These styles...</p>
+<Nested/>
+
+<style>
+	p {
+		color: purple;
+		font-family: 'Comic Sans MS', cursive;
+		font-size: 2em;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/03-nested-components/Nested.svelte b/site/content/examples/00-introduction/03-nested-components/Nested.svelte
new file mode 100644
index 0000000000..17685233a5
--- /dev/null
+++ b/site/content/examples/00-introduction/03-nested-components/Nested.svelte
@@ -0,0 +1 @@
+<p>...don't affect this element</p>
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/03-nested-components/meta.json b/site/content/examples/00-introduction/03-nested-components/meta.json
new file mode 100644
index 0000000000..5848360a40
--- /dev/null
+++ b/site/content/examples/00-introduction/03-nested-components/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Nested components"
+}
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/04-html-tags/App.svelte b/site/content/examples/00-introduction/04-html-tags/App.svelte
new file mode 100644
index 0000000000..4029f076e2
--- /dev/null
+++ b/site/content/examples/00-introduction/04-html-tags/App.svelte
@@ -0,0 +1,5 @@
+<script>
+	let string = `here's some <strong>HTML!!!</strong>`;
+</script>
+
+<p>{@html string}</p>
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/04-html-tags/meta.json b/site/content/examples/00-introduction/04-html-tags/meta.json
new file mode 100644
index 0000000000..01af59ac84
--- /dev/null
+++ b/site/content/examples/00-introduction/04-html-tags/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "HTML tags"
+}
\ No newline at end of file
diff --git a/site/content/examples/00-introduction/meta.json b/site/content/examples/00-introduction/meta.json
new file mode 100644
index 0000000000..5c8f7bc10b
--- /dev/null
+++ b/site/content/examples/00-introduction/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Introduction"
+}
\ No newline at end of file
diff --git a/site/content/examples/01-reactivity/00-reactive-assignments/App.svelte b/site/content/examples/01-reactivity/00-reactive-assignments/App.svelte
new file mode 100644
index 0000000000..bc50d74cfc
--- /dev/null
+++ b/site/content/examples/01-reactivity/00-reactive-assignments/App.svelte
@@ -0,0 +1,11 @@
+<script>
+	let count = 0;
+
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button on:click={handleClick}>
+	Clicked {count} {count === 1 ? 'time' : 'times'}
+</button>
\ No newline at end of file
diff --git a/site/content/examples/01-reactivity/00-reactive-assignments/meta.json b/site/content/examples/01-reactivity/00-reactive-assignments/meta.json
new file mode 100644
index 0000000000..feb3e8f338
--- /dev/null
+++ b/site/content/examples/01-reactivity/00-reactive-assignments/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Reactive assignments"
+}
\ No newline at end of file
diff --git a/site/content/examples/01-reactivity/01-reactive-declarations/App.svelte b/site/content/examples/01-reactivity/01-reactive-declarations/App.svelte
new file mode 100644
index 0000000000..f7aca3bd80
--- /dev/null
+++ b/site/content/examples/01-reactivity/01-reactive-declarations/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	let count = 1;
+
+	// the `$:` means 're-run whenever these values change'
+	$: doubled = count * 2;
+	$: quadrupled = doubled * 2;
+
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button on:click={handleClick}>
+	Count: {count}
+</button>
+
+<p>{count} * 2 = {doubled}</p>
+<p>{doubled} * 2 = {quadrupled}</p>
\ No newline at end of file
diff --git a/site/content/examples/01-reactivity/01-reactive-declarations/meta.json b/site/content/examples/01-reactivity/01-reactive-declarations/meta.json
new file mode 100644
index 0000000000..d824d83669
--- /dev/null
+++ b/site/content/examples/01-reactivity/01-reactive-declarations/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Reactive declarations"
+}
\ No newline at end of file
diff --git a/site/content/examples/01-reactivity/02-reactive-statements/App.svelte b/site/content/examples/01-reactivity/02-reactive-statements/App.svelte
new file mode 100644
index 0000000000..f757be6f51
--- /dev/null
+++ b/site/content/examples/01-reactivity/02-reactive-statements/App.svelte
@@ -0,0 +1,16 @@
+<script>
+	let count = 0;
+
+	$: if (count >= 10) {
+		alert(`count is dangerously high!`);
+		count = 9;
+	}
+
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button on:click={handleClick}>
+	Clicked {count} {count === 1 ? 'time' : 'times'}
+</button>
\ No newline at end of file
diff --git a/site/content/examples/01-reactivity/02-reactive-statements/meta.json b/site/content/examples/01-reactivity/02-reactive-statements/meta.json
new file mode 100644
index 0000000000..1ef62c8830
--- /dev/null
+++ b/site/content/examples/01-reactivity/02-reactive-statements/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Reactive statements"
+}
\ No newline at end of file
diff --git a/site/content/examples/01-reactivity/meta.json b/site/content/examples/01-reactivity/meta.json
new file mode 100644
index 0000000000..c908815e04
--- /dev/null
+++ b/site/content/examples/01-reactivity/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Reactivity"
+}
\ No newline at end of file
diff --git a/site/content/examples/02-props/00-declaring-props/App.svelte b/site/content/examples/02-props/00-declaring-props/App.svelte
new file mode 100644
index 0000000000..79d7e6b789
--- /dev/null
+++ b/site/content/examples/02-props/00-declaring-props/App.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested answer={42}/>
\ No newline at end of file
diff --git a/site/content/examples/02-props/00-declaring-props/Nested.svelte b/site/content/examples/02-props/00-declaring-props/Nested.svelte
new file mode 100644
index 0000000000..ecd3cb6254
--- /dev/null
+++ b/site/content/examples/02-props/00-declaring-props/Nested.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let answer;
+</script>
+
+<p>The answer is {answer}</p>
\ No newline at end of file
diff --git a/site/content/examples/02-props/00-declaring-props/meta.json b/site/content/examples/02-props/00-declaring-props/meta.json
new file mode 100644
index 0000000000..485c2708bd
--- /dev/null
+++ b/site/content/examples/02-props/00-declaring-props/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Declaring props"
+}
\ No newline at end of file
diff --git a/site/content/examples/02-props/01-default-values/App.svelte b/site/content/examples/02-props/01-default-values/App.svelte
new file mode 100644
index 0000000000..f9d63b30d6
--- /dev/null
+++ b/site/content/examples/02-props/01-default-values/App.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested answer={42}/>
+<Nested/>
\ No newline at end of file
diff --git a/site/content/examples/02-props/01-default-values/Nested.svelte b/site/content/examples/02-props/01-default-values/Nested.svelte
new file mode 100644
index 0000000000..35ee5c9f88
--- /dev/null
+++ b/site/content/examples/02-props/01-default-values/Nested.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let answer = 'a mystery';
+</script>
+
+<p>The answer is {answer}</p>
\ No newline at end of file
diff --git a/site/content/examples/02-props/01-default-values/meta.json b/site/content/examples/02-props/01-default-values/meta.json
new file mode 100644
index 0000000000..f690d64349
--- /dev/null
+++ b/site/content/examples/02-props/01-default-values/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Default values"
+}
\ No newline at end of file
diff --git a/site/content/examples/02-props/02-spread-props/App.svelte b/site/content/examples/02-props/02-spread-props/App.svelte
new file mode 100644
index 0000000000..7071bdbbb7
--- /dev/null
+++ b/site/content/examples/02-props/02-spread-props/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Info from './Info.svelte';
+
+	const pkg = {
+		name: 'svelte',
+		version: 3,
+		speed: 'blazing',
+		website: 'https://svelte.dev'
+	};
+</script>
+
+<Info {...pkg}/>
\ No newline at end of file
diff --git a/site/content/examples/02-props/02-spread-props/Info.svelte b/site/content/examples/02-props/02-spread-props/Info.svelte
new file mode 100644
index 0000000000..7412398244
--- /dev/null
+++ b/site/content/examples/02-props/02-spread-props/Info.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let name;
+	export let version;
+	export let speed;
+	export let website;
+</script>
+
+<p>
+	The <code>{name}</code> package is {speed} fast.
+	Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>
+	and <a href={website}>learn more here</a>
+</p>
\ No newline at end of file
diff --git a/site/content/examples/02-props/02-spread-props/meta.json b/site/content/examples/02-props/02-spread-props/meta.json
new file mode 100644
index 0000000000..3f4b5128bf
--- /dev/null
+++ b/site/content/examples/02-props/02-spread-props/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Spread props"
+}
\ No newline at end of file
diff --git a/site/content/examples/02-props/meta.json b/site/content/examples/02-props/meta.json
new file mode 100644
index 0000000000..7b9e0a2783
--- /dev/null
+++ b/site/content/examples/02-props/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Props"
+}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/00-if-blocks/App.svelte b/site/content/examples/03-logic/00-if-blocks/App.svelte
new file mode 100644
index 0000000000..01b8867ade
--- /dev/null
+++ b/site/content/examples/03-logic/00-if-blocks/App.svelte
@@ -0,0 +1,19 @@
+<script>
+	let user = { loggedIn: false };
+
+	function toggle() {
+		user.loggedIn = !user.loggedIn;
+	}
+</script>
+
+{#if user.loggedIn}
+	<button on:click={toggle}>
+		Log out
+	</button>
+{/if}
+
+{#if !user.loggedIn}
+	<button on:click={toggle}>
+		Log in
+	</button>
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/00-if-blocks/meta.json b/site/content/examples/03-logic/00-if-blocks/meta.json
new file mode 100644
index 0000000000..21598b878e
--- /dev/null
+++ b/site/content/examples/03-logic/00-if-blocks/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "If blocks"
+}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/01-else-blocks/App.svelte b/site/content/examples/03-logic/01-else-blocks/App.svelte
new file mode 100644
index 0000000000..c82565c2f7
--- /dev/null
+++ b/site/content/examples/03-logic/01-else-blocks/App.svelte
@@ -0,0 +1,17 @@
+<script>
+	let user = { loggedIn: false };
+
+	function toggle() {
+		user.loggedIn = !user.loggedIn;
+	}
+</script>
+
+{#if user.loggedIn}
+	<button on:click={toggle}>
+		Log out
+	</button>
+{:else}
+	<button on:click={toggle}>
+		Log in
+	</button>
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/01-else-blocks/meta.json b/site/content/examples/03-logic/01-else-blocks/meta.json
new file mode 100644
index 0000000000..5703b7ea92
--- /dev/null
+++ b/site/content/examples/03-logic/01-else-blocks/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Else blocks"
+}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/02-else-if-blocks/App.svelte b/site/content/examples/03-logic/02-else-if-blocks/App.svelte
new file mode 100644
index 0000000000..9102618ff4
--- /dev/null
+++ b/site/content/examples/03-logic/02-else-if-blocks/App.svelte
@@ -0,0 +1,11 @@
+<script>
+	let x = 7;
+</script>
+
+{#if x > 10}
+	<p>{x} is greater than 10</p>
+{:else if 5 > x}
+	<p>{x} is less than 5</p>
+{:else}
+	<p>{x} is between 5 and 10</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/02-else-if-blocks/meta.json b/site/content/examples/03-logic/02-else-if-blocks/meta.json
new file mode 100644
index 0000000000..c778d9f48b
--- /dev/null
+++ b/site/content/examples/03-logic/02-else-if-blocks/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Else-if blocks"
+}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/03-each-blocks/App.svelte b/site/content/examples/03-logic/03-each-blocks/App.svelte
new file mode 100644
index 0000000000..3ecbe5ca2f
--- /dev/null
+++ b/site/content/examples/03-logic/03-each-blocks/App.svelte
@@ -0,0 +1,19 @@
+<script>
+	let cats = [
+		{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
+		{ id: 'z_AbfPXTKms', name: 'Maru' },
+		{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
+	];
+</script>
+
+<h1>The Famous Cats of YouTube</h1>
+
+<ul>
+	{#each cats as { id, name }, i}
+		<li>
+			<a target="_blank" href="https://www.youtube.com/watch?v={id}">
+				{i + 1}: {name}
+			</a>
+		</li>
+	{/each}
+</ul>
diff --git a/site/content/examples/03-logic/03-each-blocks/meta.json b/site/content/examples/03-logic/03-each-blocks/meta.json
new file mode 100644
index 0000000000..d829b3cc53
--- /dev/null
+++ b/site/content/examples/03-logic/03-each-blocks/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Each blocks"
+}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/04-keyed-each-blocks/App.svelte b/site/content/examples/03-logic/04-keyed-each-blocks/App.svelte
new file mode 100644
index 0000000000..b4f300668c
--- /dev/null
+++ b/site/content/examples/03-logic/04-keyed-each-blocks/App.svelte
@@ -0,0 +1,35 @@
+<script>
+	import Thing from './Thing.svelte';
+
+	let things = [
+		{ id: 1, color: 'darkblue' },
+		{ id: 2, color: 'indigo' },
+		{ id: 3, color: 'deeppink' },
+		{ id: 4, color: 'salmon' },
+		{ id: 5, color: 'gold' }
+	];
+
+	function handleClick() {
+		things = things.slice(1);
+	}
+</script>
+
+<button on:click={handleClick}>
+	Remove first thing
+</button>
+
+<div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em">
+	<div>
+		<h2>Keyed</h2>
+		{#each things as thing (thing.id)}
+			<Thing current={thing.color}/>
+		{/each}
+	</div>
+
+	<div>
+		<h2>Unkeyed</h2>
+		{#each things as thing}
+			<Thing current={thing.color}/>
+		{/each}
+	</div>
+</div>
diff --git a/site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte b/site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte
new file mode 100644
index 0000000000..28c3c65d05
--- /dev/null
+++ b/site/content/examples/03-logic/04-keyed-each-blocks/Thing.svelte
@@ -0,0 +1,24 @@
+<script>
+	// `current` is updated whenever the prop value changes...
+	export let current;
+
+	// ...but `initial` is fixed upon initialisation
+	const initial = current;
+</script>
+
+<p>
+	<span style="background-color: {initial}">initial</span>
+	<span style="background-color: {current}">current</span>
+</p>
+
+<style>
+	span {
+		display: inline-block;
+		padding: 0.2em 0.5em;
+		margin: 0 0.2em 0.2em 0;
+		width: 4em;
+		text-align: center;
+		border-radius: 0.2em;
+		color: white;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/03-logic/04-keyed-each-blocks/meta.json b/site/content/examples/03-logic/04-keyed-each-blocks/meta.json
new file mode 100644
index 0000000000..faee8bff8d
--- /dev/null
+++ b/site/content/examples/03-logic/04-keyed-each-blocks/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Keyed each blocks"
+}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/05-await-blocks/App.svelte b/site/content/examples/03-logic/05-await-blocks/App.svelte
new file mode 100644
index 0000000000..a6d0346733
--- /dev/null
+++ b/site/content/examples/03-logic/05-await-blocks/App.svelte
@@ -0,0 +1,30 @@
+<script>
+	let promise = getRandomNumber();
+
+	async function getRandomNumber() {
+		const res = await fetch(`/tutorial/random-number`);
+		const text = await res.text();
+
+		if (res.ok) {
+			return text;
+		} else {
+			throw new Error(text);
+		}
+	}
+
+	function handleClick() {
+		promise = getRandomNumber();
+	}
+</script>
+
+<button on:click={handleClick}>
+	generate random number
+</button>
+
+{#await promise}
+	<p>...waiting</p>
+{:then number}
+	<p>The number is {number}</p>
+{:catch error}
+	<p style="color: red">{error.message}</p>
+{/await}
diff --git a/site/content/examples/03-logic/05-await-blocks/meta.json b/site/content/examples/03-logic/05-await-blocks/meta.json
new file mode 100644
index 0000000000..c7a809f5ed
--- /dev/null
+++ b/site/content/examples/03-logic/05-await-blocks/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Await blocks"
+}
\ No newline at end of file
diff --git a/site/content/examples/03-logic/meta.json b/site/content/examples/03-logic/meta.json
new file mode 100644
index 0000000000..3ecf1ccee2
--- /dev/null
+++ b/site/content/examples/03-logic/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Logic"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/00-dom-events/App.svelte b/site/content/examples/04-events/00-dom-events/App.svelte
new file mode 100644
index 0000000000..de1f664112
--- /dev/null
+++ b/site/content/examples/04-events/00-dom-events/App.svelte
@@ -0,0 +1,16 @@
+<script>
+	let m = { x: 0, y: 0 };
+
+	function handleMousemove(event) {
+		m.x = event.clientX;
+		m.y = event.clientY;
+	}
+</script>
+
+<div on:mousemove={handleMousemove}>
+	The mouse position is {m.x} x {m.y}
+</div>
+
+<style>
+	div { width: 100%; height: 100%; }
+</style>
\ No newline at end of file
diff --git a/site/content/examples/04-events/00-dom-events/meta.json b/site/content/examples/04-events/00-dom-events/meta.json
new file mode 100644
index 0000000000..5b3e37e41f
--- /dev/null
+++ b/site/content/examples/04-events/00-dom-events/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "DOM events"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/01-inline-handlers/App.svelte b/site/content/examples/04-events/01-inline-handlers/App.svelte
new file mode 100644
index 0000000000..36fed40a4f
--- /dev/null
+++ b/site/content/examples/04-events/01-inline-handlers/App.svelte
@@ -0,0 +1,11 @@
+<script>
+	let m = { x: 0, y: 0 };
+</script>
+
+<div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">
+	The mouse position is {m.x} x {m.y}
+</div>
+
+<style>
+	div { width: 100%; height: 100%; }
+</style>
\ No newline at end of file
diff --git a/site/content/examples/04-events/01-inline-handlers/meta.json b/site/content/examples/04-events/01-inline-handlers/meta.json
new file mode 100644
index 0000000000..575b9ab2b6
--- /dev/null
+++ b/site/content/examples/04-events/01-inline-handlers/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Inline handlers"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/02-event-modifiers/App.svelte b/site/content/examples/04-events/02-event-modifiers/App.svelte
new file mode 100644
index 0000000000..94df49cb2d
--- /dev/null
+++ b/site/content/examples/04-events/02-event-modifiers/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	function handleClick() {
+		alert('no more alerts')
+	}
+</script>
+
+<button on:click|once={handleClick}>
+	Click me
+</button>
\ No newline at end of file
diff --git a/site/content/examples/04-events/02-event-modifiers/meta.json b/site/content/examples/04-events/02-event-modifiers/meta.json
new file mode 100644
index 0000000000..322bb5ba5e
--- /dev/null
+++ b/site/content/examples/04-events/02-event-modifiers/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Event modifiers"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/03-component-events/App.svelte b/site/content/examples/04-events/03-component-events/App.svelte
new file mode 100644
index 0000000000..a8d14a368a
--- /dev/null
+++ b/site/content/examples/04-events/03-component-events/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Inner from './Inner.svelte';
+
+	function handleMessage(event) {
+		alert(event.detail.text);
+	}
+</script>
+
+<Inner on:message={handleMessage}/>
\ No newline at end of file
diff --git a/site/content/examples/04-events/03-component-events/Inner.svelte b/site/content/examples/04-events/03-component-events/Inner.svelte
new file mode 100644
index 0000000000..6ac8301f24
--- /dev/null
+++ b/site/content/examples/04-events/03-component-events/Inner.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	function sayHello() {
+		dispatch('message', {
+			text: 'Hello!'
+		});
+	}
+</script>
+
+<button on:click={sayHello}>
+	Click to say hello
+</button>
\ No newline at end of file
diff --git a/site/content/examples/04-events/03-component-events/meta.json b/site/content/examples/04-events/03-component-events/meta.json
new file mode 100644
index 0000000000..2a777d4d00
--- /dev/null
+++ b/site/content/examples/04-events/03-component-events/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Component events"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/04-event-forwarding/App.svelte b/site/content/examples/04-events/04-event-forwarding/App.svelte
new file mode 100644
index 0000000000..973df50f0a
--- /dev/null
+++ b/site/content/examples/04-events/04-event-forwarding/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Outer from './Outer.svelte';
+
+	function handleMessage(event) {
+		alert(event.detail.text);
+	}
+</script>
+
+<Outer on:message={handleMessage}/>
\ No newline at end of file
diff --git a/site/content/examples/04-events/04-event-forwarding/Inner.svelte b/site/content/examples/04-events/04-event-forwarding/Inner.svelte
new file mode 100644
index 0000000000..6ac8301f24
--- /dev/null
+++ b/site/content/examples/04-events/04-event-forwarding/Inner.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	function sayHello() {
+		dispatch('message', {
+			text: 'Hello!'
+		});
+	}
+</script>
+
+<button on:click={sayHello}>
+	Click to say hello
+</button>
\ No newline at end of file
diff --git a/site/content/examples/04-events/04-event-forwarding/Outer.svelte b/site/content/examples/04-events/04-event-forwarding/Outer.svelte
new file mode 100644
index 0000000000..10c28f298a
--- /dev/null
+++ b/site/content/examples/04-events/04-event-forwarding/Outer.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Inner from './Inner.svelte';
+</script>
+
+<Inner on:message/>
\ No newline at end of file
diff --git a/site/content/examples/04-events/04-event-forwarding/meta.json b/site/content/examples/04-events/04-event-forwarding/meta.json
new file mode 100644
index 0000000000..3a8aa674b7
--- /dev/null
+++ b/site/content/examples/04-events/04-event-forwarding/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Event forwarding"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/05-dom-event-forwarding/App.svelte b/site/content/examples/04-events/05-dom-event-forwarding/App.svelte
new file mode 100644
index 0000000000..e75c78106a
--- /dev/null
+++ b/site/content/examples/04-events/05-dom-event-forwarding/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	import CustomButton from './CustomButton.svelte';
+
+	function handleClick() {
+		alert('clicked');
+	}
+</script>
+
+<CustomButton on:click={handleClick}/>
\ No newline at end of file
diff --git a/site/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte b/site/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte
new file mode 100644
index 0000000000..4004ffbf29
--- /dev/null
+++ b/site/content/examples/04-events/05-dom-event-forwarding/CustomButton.svelte
@@ -0,0 +1,22 @@
+<button on:click>
+	Click me
+</button>
+
+<style>
+	button {
+		height: 4rem;
+		width: 8rem;
+		background-color: #aaa;
+		border-color: #f1c40f;
+		color: #f1c40f;
+		font-size: 1.25rem;
+		background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
+		background-position: 100%;
+		background-size: 400%;
+		transition: background 300ms ease-in-out;
+	}
+	button:hover {
+		background-position: 0;
+		color: #aaa;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/04-events/05-dom-event-forwarding/meta.json b/site/content/examples/04-events/05-dom-event-forwarding/meta.json
new file mode 100644
index 0000000000..9aa593808f
--- /dev/null
+++ b/site/content/examples/04-events/05-dom-event-forwarding/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "DOM event forwarding"
+}
\ No newline at end of file
diff --git a/site/content/examples/04-events/meta.json b/site/content/examples/04-events/meta.json
new file mode 100644
index 0000000000..c5f088e208
--- /dev/null
+++ b/site/content/examples/04-events/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Events"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/00-text-inputs/App.svelte b/site/content/examples/05-bindings/00-text-inputs/App.svelte
new file mode 100644
index 0000000000..5eab79764a
--- /dev/null
+++ b/site/content/examples/05-bindings/00-text-inputs/App.svelte
@@ -0,0 +1,6 @@
+<script>
+	let name = '';
+</script>
+
+<input bind:value={name} placeholder="enter your name">
+<p>Hello {name || 'stranger'}!</p>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/00-text-inputs/meta.json b/site/content/examples/05-bindings/00-text-inputs/meta.json
new file mode 100644
index 0000000000..45577af5be
--- /dev/null
+++ b/site/content/examples/05-bindings/00-text-inputs/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Text inputs"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/01-numeric-inputs/App.svelte b/site/content/examples/05-bindings/01-numeric-inputs/App.svelte
new file mode 100644
index 0000000000..798d57e021
--- /dev/null
+++ b/site/content/examples/05-bindings/01-numeric-inputs/App.svelte
@@ -0,0 +1,16 @@
+<script>
+	let a = 1;
+	let b = 2;
+</script>
+
+<label>
+	<input type=number bind:value={a} min=0 max=10>
+	<input type=range bind:value={a} min=0 max=10>
+</label>
+
+<label>
+	<input type=number bind:value={b} min=0 max=10>
+	<input type=range bind:value={b} min=0 max=10>
+</label>
+
+<p>{a} + {b} = {a + b}</p>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/01-numeric-inputs/meta.json b/site/content/examples/05-bindings/01-numeric-inputs/meta.json
new file mode 100644
index 0000000000..72f8579704
--- /dev/null
+++ b/site/content/examples/05-bindings/01-numeric-inputs/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Numeric inputs"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte b/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte
new file mode 100644
index 0000000000..b82d31e783
--- /dev/null
+++ b/site/content/examples/05-bindings/02-checkbox-inputs/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	let yes = false;
+</script>
+
+<label>
+	<input type=checkbox bind:checked={yes}>
+	Yes! Send me regular email spam
+</label>
+
+{#if yes}
+	<p>Thank you. We will bombard your inbox and sell your personal details.</p>
+{:else}
+	<p>You must opt in to continue. If you're not paying, you're the product.</p>
+{/if}
+
+<button disabled={!yes}>
+	Subscribe
+</button>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/02-checkbox-inputs/meta.json b/site/content/examples/05-bindings/02-checkbox-inputs/meta.json
new file mode 100644
index 0000000000..723312a3d9
--- /dev/null
+++ b/site/content/examples/05-bindings/02-checkbox-inputs/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Checkbox inputs"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/03-group-inputs/App.svelte b/site/content/examples/05-bindings/03-group-inputs/App.svelte
new file mode 100644
index 0000000000..a46c61c7e7
--- /dev/null
+++ b/site/content/examples/05-bindings/03-group-inputs/App.svelte
@@ -0,0 +1,52 @@
+<script>
+	let scoops = 1;
+	let flavours = ['Mint choc chip'];
+
+	let menu = [
+		'Cookies and cream',
+		'Mint choc chip',
+		'Raspberry ripple'
+	];
+
+	function join(flavours) {
+		if (flavours.length === 1) return flavours[0];
+		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
+	}
+</script>
+
+<h2>Size</h2>
+
+<label>
+	<input type=radio bind:group={scoops} value={1}>
+	One scoop
+</label>
+
+<label>
+	<input type=radio bind:group={scoops} value={2}>
+	Two scoops
+</label>
+
+<label>
+	<input type=radio bind:group={scoops} value={3}>
+	Three scoops
+</label>
+
+<h2>Flavours</h2>
+
+{#each menu as flavour}
+	<label>
+		<input type=checkbox bind:group={flavours} value={flavour}>
+		{flavour}
+	</label>
+{/each}
+
+{#if flavours.length === 0}
+	<p>Please select at least one flavour</p>
+{:else if flavours.length > scoops}
+	<p>Can't order more flavours than scoops!</p>
+{:else}
+	<p>
+		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
+		of {join(flavours)}
+	</p>
+{/if}
diff --git a/site/content/examples/05-bindings/03-group-inputs/meta.json b/site/content/examples/05-bindings/03-group-inputs/meta.json
new file mode 100644
index 0000000000..2203d6e6fa
--- /dev/null
+++ b/site/content/examples/05-bindings/03-group-inputs/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Group inputs"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/04-textarea-inputs/App.svelte b/site/content/examples/05-bindings/04-textarea-inputs/App.svelte
new file mode 100644
index 0000000000..19a2814c9f
--- /dev/null
+++ b/site/content/examples/05-bindings/04-textarea-inputs/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { marked } from 'marked';
+	let text = `Some words are *italic*, some are **bold**`;
+</script>
+
+<textarea bind:value={text}></textarea>
+
+{@html marked(text)}
+
+<style>
+	textarea { width: 100%; height: 200px; }
+</style>
diff --git a/site/content/examples/05-bindings/04-textarea-inputs/meta.json b/site/content/examples/05-bindings/04-textarea-inputs/meta.json
new file mode 100644
index 0000000000..01adf6b5cf
--- /dev/null
+++ b/site/content/examples/05-bindings/04-textarea-inputs/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Textarea inputs"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/05-file-inputs/App.svelte b/site/content/examples/05-bindings/05-file-inputs/App.svelte
new file mode 100644
index 0000000000..a3334dbd01
--- /dev/null
+++ b/site/content/examples/05-bindings/05-file-inputs/App.svelte
@@ -0,0 +1,37 @@
+<script>
+	let files;
+
+	$: if (files) {
+		// Note that `files` is of type `FileList`, not an Array:
+		// https://developer.mozilla.org/en-US/docs/Web/API/FileList
+		console.log(files);
+
+		for (const file of files) {
+			console.log(`${file.name}: ${file.size} bytes`);
+		}
+	}
+</script>
+
+<label for="avatar">Upload a picture:</label>
+<input
+	accept="image/png, image/jpeg"
+	bind:files
+	id="avatar"
+	name="avatar"
+	type="file"
+/>
+
+<label for="many">Upload multiple files of any type:</label>
+<input
+	bind:files
+	id="many"
+	multiple
+	type="file"
+/>
+
+{#if files}
+	<h2>Selected files:</h2>
+	{#each Array.from(files) as file}
+		<p>{file.name} ({file.size} bytes) </p>
+	{/each}
+{/if}
diff --git a/site/content/examples/05-bindings/05-file-inputs/meta.json b/site/content/examples/05-bindings/05-file-inputs/meta.json
new file mode 100644
index 0000000000..92d0587e87
--- /dev/null
+++ b/site/content/examples/05-bindings/05-file-inputs/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "File inputs"
+}
diff --git a/site/content/examples/05-bindings/06-select-bindings/App.svelte b/site/content/examples/05-bindings/06-select-bindings/App.svelte
new file mode 100644
index 0000000000..a3607a6f4f
--- /dev/null
+++ b/site/content/examples/05-bindings/06-select-bindings/App.svelte
@@ -0,0 +1,39 @@
+<script>
+	let questions = [
+		{ id: 1, text: `Where did you go to school?` },
+		{ id: 2, text: `What is your mother's name?` },
+		{ id: 3, text: `What is another personal fact that an attacker could easily find with Google?` }
+	];
+
+	let selected;
+
+	let answer = '';
+
+	function handleSubmit() {
+		alert(`answered question ${selected.id} (${selected.text}) with "${answer}"`);
+	}
+</script>
+
+<h2>Insecurity questions</h2>
+
+<form on:submit|preventDefault={handleSubmit}>
+	<select bind:value={selected} on:change="{() => answer = ''}">
+		{#each questions as question}
+			<option value={question}>
+				{question.text}
+			</option>
+		{/each}
+	</select>
+
+	<input bind:value={answer}>
+
+	<button disabled={!answer} type=submit>
+		Submit
+	</button>
+</form>
+
+<p>selected question {selected ? selected.id : '[waiting...]'}</p>
+
+<style>
+	input { display: block; width: 500px; max-width: 100%; }
+</style>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/06-select-bindings/meta.json b/site/content/examples/05-bindings/06-select-bindings/meta.json
new file mode 100644
index 0000000000..fe170eb0fc
--- /dev/null
+++ b/site/content/examples/05-bindings/06-select-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Select bindings"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/07-multiple-select-bindings/App.svelte b/site/content/examples/05-bindings/07-multiple-select-bindings/App.svelte
new file mode 100644
index 0000000000..d808850158
--- /dev/null
+++ b/site/content/examples/05-bindings/07-multiple-select-bindings/App.svelte
@@ -0,0 +1,53 @@
+<script>
+	let scoops = 1;
+	let flavours = ['Mint choc chip'];
+
+	let menu = [
+		'Cookies and cream',
+		'Mint choc chip',
+		'Raspberry ripple'
+	];
+
+	function join(flavours) {
+		if (flavours.length === 1) return flavours[0];
+		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
+	}
+</script>
+
+<h2>Size</h2>
+
+<label>
+	<input type=radio bind:group={scoops} value={1}>
+	One scoop
+</label>
+
+<label>
+	<input type=radio bind:group={scoops} value={2}>
+	Two scoops
+</label>
+
+<label>
+	<input type=radio bind:group={scoops} value={3}>
+	Three scoops
+</label>
+
+<h2>Flavours</h2>
+
+<select multiple bind:value={flavours}>
+	{#each menu as flavour}
+		<option value={flavour}>
+			{flavour}
+		</option>
+	{/each}
+</select>
+
+{#if flavours.length === 0}
+	<p>Please select at least one flavour</p>
+{:else if flavours.length > scoops}
+	<p>Can't order more flavours than scoops!</p>
+{:else}
+	<p>
+		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
+		of {join(flavours)}
+	</p>
+{/if}
diff --git a/site/content/examples/05-bindings/07-multiple-select-bindings/meta.json b/site/content/examples/05-bindings/07-multiple-select-bindings/meta.json
new file mode 100644
index 0000000000..abf7635407
--- /dev/null
+++ b/site/content/examples/05-bindings/07-multiple-select-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Select multiple"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/08-each-block-bindings/App.svelte b/site/content/examples/05-bindings/08-each-block-bindings/App.svelte
new file mode 100644
index 0000000000..4d3d75420c
--- /dev/null
+++ b/site/content/examples/05-bindings/08-each-block-bindings/App.svelte
@@ -0,0 +1,44 @@
+<script>
+	let todos = [
+		{ done: false, text: 'finish Svelte tutorial' },
+		{ done: false, text: 'build an app' },
+		{ done: false, text: 'world domination' }
+	];
+
+	function add() {
+		todos = todos.concat({ done: false, text: '' });
+	}
+
+	function clear() {
+		todos = todos.filter(t => !t.done);
+	}
+
+	$: remaining = todos.filter(t => !t.done).length;
+</script>
+
+<h1>Todos</h1>
+
+{#each todos as todo}
+	<div>
+		<input
+			type=checkbox
+			bind:checked={todo.done}
+		>
+
+		<input
+			placeholder="What needs to be done?"
+			bind:value={todo.text}
+			disabled={todo.done}
+		>
+	</div>
+{/each}
+
+<p>{remaining} remaining</p>
+
+<button on:click={add}>
+	Add new
+</button>
+
+<button on:click={clear}>
+	Clear completed
+</button>
diff --git a/site/content/examples/05-bindings/08-each-block-bindings/meta.json b/site/content/examples/05-bindings/08-each-block-bindings/meta.json
new file mode 100644
index 0000000000..2d27051b49
--- /dev/null
+++ b/site/content/examples/05-bindings/08-each-block-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Each block bindings"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/09-media-elements/App.svelte b/site/content/examples/05-bindings/09-media-elements/App.svelte
new file mode 100644
index 0000000000..de89b1be8d
--- /dev/null
+++ b/site/content/examples/05-bindings/09-media-elements/App.svelte
@@ -0,0 +1,131 @@
+<script>
+	// These values are bound to properties of the video
+	let time = 0;
+	let duration;
+	let paused = true;
+
+	let showControls = true;
+	let showControlsTimeout;
+
+	// Used to track time of last mouse down event
+	let lastMouseDown;
+
+	function handleMove(e) {
+		// Make the controls visible, but fade out after
+		// 2.5 seconds of inactivity
+		clearTimeout(showControlsTimeout);
+		showControlsTimeout = setTimeout(() => showControls = false, 2500);
+		showControls = true;
+
+		if (!duration) return; // video not loaded yet
+		if (e.type !== 'touchmove' && !(e.buttons & 1)) return; // mouse not down
+
+		const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
+		const { left, right } = this.getBoundingClientRect();
+		time = duration * (clientX - left) / (right - left);
+	}
+
+	// we can't rely on the built-in click event, because it fires
+	// after a drag — we have to listen for clicks ourselves
+	function handleMousedown(e) {
+		lastMouseDown = new Date();
+	}
+
+	function handleMouseup(e) {
+		if (new Date() - lastMouseDown < 300) {
+			if (paused) e.target.play();
+			else e.target.pause();
+		}
+	}
+
+	function format(seconds) {
+		if (isNaN(seconds)) return '...';
+
+		const minutes = Math.floor(seconds / 60);
+		seconds = Math.floor(seconds % 60);
+		if (seconds < 10) seconds = '0' + seconds;
+
+		return `${minutes}:${seconds}`;
+	}
+</script>
+
+<h1>Caminandes: Llamigos</h1>
+<p>From <a href="https://studio.blender.org/films">Blender Studio</a>. CC-BY</p>
+
+<div>
+	<video
+		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
+		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
+		on:mousemove={handleMove}
+		on:touchmove|preventDefault={handleMove}
+		on:mousedown={handleMousedown}
+		on:mouseup={handleMouseup}
+		bind:currentTime={time}
+		bind:duration
+		bind:paused>
+			<track kind="captions"/>
+	</video>
+
+	<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
+		<progress value="{(time / duration) || 0}"/>
+
+		<div class="info">
+			<span class="time">{format(time)}</span>
+			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
+			<span class="time">{format(duration)}</span>
+		</div>
+	</div>
+</div>
+
+<style>
+	div {
+		position: relative;
+	}
+
+	.controls {
+		position: absolute;
+		top: 0;
+		width: 100%;
+		transition: opacity 1s;
+	}
+
+	.info {
+		display: flex;
+		width: 100%;
+		justify-content: space-between;
+	}
+
+	span {
+		padding: 0.2em 0.5em;
+		color: white;
+		text-shadow: 0 0 8px black;
+		font-size: 1.4em;
+		opacity: 0.7;
+	}
+
+	.time {
+		width: 3em;
+	}
+
+	.time:last-child { text-align: right }
+
+	progress {
+		display: block;
+		width: 100%;
+		height: 10px;
+		-webkit-appearance: none;
+		appearance: none;
+	}
+
+	progress::-webkit-progress-bar {
+		background-color: rgba(0,0,0,0.2);
+	}
+
+	progress::-webkit-progress-value {
+		background-color: rgba(255,255,255,0.6);
+	}
+
+	video {
+		width: 100%;
+	}
+</style>
diff --git a/site/content/examples/05-bindings/09-media-elements/meta.json b/site/content/examples/05-bindings/09-media-elements/meta.json
new file mode 100644
index 0000000000..4e40a6acee
--- /dev/null
+++ b/site/content/examples/05-bindings/09-media-elements/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Media elements"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/10-dimensions/App.svelte b/site/content/examples/05-bindings/10-dimensions/App.svelte
new file mode 100644
index 0000000000..c955aeba8e
--- /dev/null
+++ b/site/content/examples/05-bindings/10-dimensions/App.svelte
@@ -0,0 +1,20 @@
+<script>
+	let w;
+	let h;
+	let size = 42;
+	let text = 'edit me';
+</script>
+
+<input type=range bind:value={size}>
+<input bind:value={text}>
+
+<p>size: {w}px x {h}px</p>
+
+<div bind:clientWidth={w} bind:clientHeight={h}>
+	<span style="font-size: {size}px">{text}</span>
+</div>
+
+<style>
+	input { display: block; }
+	div { display: inline-block; }
+</style>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/10-dimensions/meta.json b/site/content/examples/05-bindings/10-dimensions/meta.json
new file mode 100644
index 0000000000..9f8b6602c7
--- /dev/null
+++ b/site/content/examples/05-bindings/10-dimensions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Dimensions"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/11-bind-this/App.svelte b/site/content/examples/05-bindings/11-bind-this/App.svelte
new file mode 100644
index 0000000000..ddf37a9be3
--- /dev/null
+++ b/site/content/examples/05-bindings/11-bind-this/App.svelte
@@ -0,0 +1,55 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let canvas;
+
+	onMount(() => {
+		const ctx = canvas.getContext('2d');
+		let frame;
+
+		(function loop() {
+			frame = requestAnimationFrame(loop);
+
+			const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+			for (let p = 0; p < imageData.data.length; p += 4) {
+				const i = p / 4;
+				const x = i % canvas.width;
+				const y = i / canvas.height >>> 0;
+
+				const t = window.performance.now();
+
+				const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000));
+				const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(t / 1400));
+				const b = 128;
+
+				imageData.data[p + 0] = r;
+				imageData.data[p + 1] = g;
+				imageData.data[p + 2] = b;
+				imageData.data[p + 3] = 255;
+			}
+
+			ctx.putImageData(imageData, 0, 0);
+		}());
+
+		return () => {
+			cancelAnimationFrame(frame);
+		};
+	});
+</script>
+
+<canvas
+	bind:this={canvas}
+	width={32}
+	height={32}
+></canvas>
+
+<style>
+	canvas {
+		width: 100%;
+		height: 100%;
+		background-color: #666;
+		-webkit-mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
+		mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
+	}
+</style>
diff --git a/site/content/examples/05-bindings/11-bind-this/meta.json b/site/content/examples/05-bindings/11-bind-this/meta.json
new file mode 100644
index 0000000000..da5ce399ab
--- /dev/null
+++ b/site/content/examples/05-bindings/11-bind-this/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "bind:this={canvas}"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/12-component-bindings/App.svelte b/site/content/examples/05-bindings/12-component-bindings/App.svelte
new file mode 100644
index 0000000000..67fec4a5ad
--- /dev/null
+++ b/site/content/examples/05-bindings/12-component-bindings/App.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Keypad from './Keypad.svelte';
+
+	let pin;
+	$: view = pin ? pin.replace(/\d(?!$)/g, '•') : 'enter your pin';
+
+	function handleSubmit() {
+		alert(`submitted ${pin}`);
+	}
+</script>
+
+<h1 style="color: {pin ? '#333' : '#ccc'}">{view}</h1>
+
+<Keypad bind:value={pin} on:submit={handleSubmit}/>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte b/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte
new file mode 100644
index 0000000000..631f7964e2
--- /dev/null
+++ b/site/content/examples/05-bindings/12-component-bindings/Keypad.svelte
@@ -0,0 +1,40 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	export let value = '';
+
+	const dispatch = createEventDispatcher();
+
+	const select = num => () => value += num;
+	const clear  = () => value = '';
+	const submit = () => dispatch('submit');
+</script>
+
+<div class="keypad">
+	<button on:click={select(1)}>1</button>
+	<button on:click={select(2)}>2</button>
+	<button on:click={select(3)}>3</button>
+	<button on:click={select(4)}>4</button>
+	<button on:click={select(5)}>5</button>
+	<button on:click={select(6)}>6</button>
+	<button on:click={select(7)}>7</button>
+	<button on:click={select(8)}>8</button>
+	<button on:click={select(9)}>9</button>
+
+	<button disabled={!value} on:click={clear}>clear</button>
+	<button on:click={select(0)}>0</button>
+	<button disabled={!value} on:click={submit}>submit</button>
+</div>
+
+<style>
+	.keypad {
+		display: grid;
+		grid-template-columns: repeat(3, 5em);
+		grid-template-rows: repeat(4, 3em);
+		grid-gap: 0.5em
+	}
+
+	button {
+		margin: 0
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/12-component-bindings/meta.json b/site/content/examples/05-bindings/12-component-bindings/meta.json
new file mode 100644
index 0000000000..4c921d0e8a
--- /dev/null
+++ b/site/content/examples/05-bindings/12-component-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Component bindings"
+}
\ No newline at end of file
diff --git a/site/content/examples/05-bindings/meta.json b/site/content/examples/05-bindings/meta.json
new file mode 100644
index 0000000000..8bb0142ecc
--- /dev/null
+++ b/site/content/examples/05-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Bindings"
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/00-onmount/App.svelte b/site/content/examples/06-lifecycle/00-onmount/App.svelte
new file mode 100644
index 0000000000..06997161f0
--- /dev/null
+++ b/site/content/examples/06-lifecycle/00-onmount/App.svelte
@@ -0,0 +1,38 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let photos = [];
+
+	onMount(async () => {
+		const res = await fetch(`/tutorial/api/album`);
+		photos = await res.json();
+	});
+</script>
+
+<h1>Photo album</h1>
+
+<div class="photos">
+	{#each photos as photo}
+		<figure>
+			<img src={photo.thumbnailUrl} alt={photo.title}>
+			<figcaption>{photo.title}</figcaption>
+		</figure>
+	{:else}
+		<!-- this block renders when photos.length === 0 -->
+		<p>loading...</p>
+	{/each}
+</div>
+
+<style>
+	.photos {
+		width: 100%;
+		display: grid;
+		grid-template-columns: repeat(5, 1fr);
+		grid-gap: 8px;
+	}
+
+	figure, img {
+		width: 100%;
+		margin: 0;
+	}
+</style>
diff --git a/site/content/examples/06-lifecycle/00-onmount/meta.json b/site/content/examples/06-lifecycle/00-onmount/meta.json
new file mode 100644
index 0000000000..3b2799c5bc
--- /dev/null
+++ b/site/content/examples/06-lifecycle/00-onmount/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "onMount"
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/01-ondestroy/App.svelte b/site/content/examples/06-lifecycle/01-ondestroy/App.svelte
new file mode 100644
index 0000000000..93a721ef44
--- /dev/null
+++ b/site/content/examples/06-lifecycle/01-ondestroy/App.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { onInterval } from './utils.js';
+
+	let seconds = 0;
+	onInterval(() => seconds += 1, 1000);
+</script>
+
+<p>
+	The page has been open for
+	{seconds} {seconds === 1 ? 'second' : 'seconds'}
+</p>
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/01-ondestroy/meta.json b/site/content/examples/06-lifecycle/01-ondestroy/meta.json
new file mode 100644
index 0000000000..d87febd1a5
--- /dev/null
+++ b/site/content/examples/06-lifecycle/01-ondestroy/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "onDestroy"
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/01-ondestroy/utils.js b/site/content/examples/06-lifecycle/01-ondestroy/utils.js
new file mode 100644
index 0000000000..0f75f29e2a
--- /dev/null
+++ b/site/content/examples/06-lifecycle/01-ondestroy/utils.js
@@ -0,0 +1,9 @@
+import { onDestroy } from 'svelte';
+
+export function onInterval(callback, milliseconds) {
+	const interval = setInterval(callback, milliseconds);
+
+	onDestroy(() => {
+		clearInterval(interval);
+	});
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/02-update/App.svelte b/site/content/examples/06-lifecycle/02-update/App.svelte
new file mode 100644
index 0000000000..ee3bca32df
--- /dev/null
+++ b/site/content/examples/06-lifecycle/02-update/App.svelte
@@ -0,0 +1,106 @@
+<script>
+	import Eliza from 'elizabot';
+	import { beforeUpdate, afterUpdate } from 'svelte';
+
+	let div;
+	let autoscroll;
+
+	beforeUpdate(() => {
+		autoscroll = div && (div.offsetHeight + div.scrollTop) > (div.scrollHeight - 20);
+	});
+
+	afterUpdate(() => {
+		if (autoscroll) div.scrollTo(0, div.scrollHeight);
+	});
+
+	const eliza = new Eliza();
+
+	let comments = [
+		{ author: 'eliza', text: eliza.getInitial() }
+	];
+
+	function handleKeydown(event) {
+		if (event.key === 'Enter') {
+			const text = event.target.value;
+			if (!text) return;
+
+			comments = comments.concat({
+				author: 'user',
+				text
+			});
+
+			event.target.value = '';
+
+			const reply = eliza.transform(text);
+
+			setTimeout(() => {
+				comments = comments.concat({
+					author: 'eliza',
+					text: '...',
+					placeholder: true
+				});
+
+				setTimeout(() => {
+					comments = comments.filter(comment => !comment.placeholder).concat({
+						author: 'eliza',
+						text: reply
+					});
+				}, 500 + Math.random() * 500);
+			}, 200 + Math.random() * 200);
+		}
+	}
+</script>
+
+<div class="chat">
+	<h1>Eliza</h1>
+
+	<div class="scrollable" bind:this={div}>
+		{#each comments as comment}
+			<article class={comment.author}>
+				<span>{comment.text}</span>
+			</article>
+		{/each}
+	</div>
+
+	<input on:keydown={handleKeydown}>
+</div>
+
+<style>
+	.chat {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		max-width: 320px;
+	}
+
+	.scrollable {
+		flex: 1 1 auto;
+		border-top: 1px solid #eee;
+		margin: 0 0 0.5em 0;
+		overflow-y: auto;
+	}
+
+	article {
+		margin: 0.5em 0;
+	}
+
+	.user {
+		text-align: right;
+	}
+
+	span {
+		padding: 0.5em 1em;
+		display: inline-block;
+	}
+
+	.eliza span {
+		background-color: #eee;
+		border-radius: 1em 1em 1em 0;
+	}
+
+	.user span {
+		background-color: #0074D9;
+		color: white;
+		border-radius: 1em 1em 0 1em;
+	}
+</style>
diff --git a/site/content/examples/06-lifecycle/02-update/meta.json b/site/content/examples/06-lifecycle/02-update/meta.json
new file mode 100644
index 0000000000..c92a6db8dc
--- /dev/null
+++ b/site/content/examples/06-lifecycle/02-update/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "beforeUpdate and afterUpdate"
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/03-tick/App.svelte b/site/content/examples/06-lifecycle/03-tick/App.svelte
new file mode 100644
index 0000000000..e678020d3d
--- /dev/null
+++ b/site/content/examples/06-lifecycle/03-tick/App.svelte
@@ -0,0 +1,37 @@
+<script>
+	import { tick } from 'svelte';
+
+	let text = `Select some text and hit the tab key to toggle uppercase`;
+
+	async function handleKeydown(event) {
+		if (event.key !== 'Tab') return;
+
+		event.preventDefault();
+
+		const { selectionStart, selectionEnd, value } = this;
+		const selection = value.slice(selectionStart, selectionEnd);
+
+		const replacement = /[a-z]/.test(selection)
+			? selection.toUpperCase()
+			: selection.toLowerCase();
+
+		text = (
+			value.slice(0, selectionStart) +
+			replacement +
+			value.slice(selectionEnd)
+		);
+
+		await tick();
+		this.selectionStart = selectionStart;
+		this.selectionEnd = selectionEnd;
+	}
+</script>
+
+<textarea value={text} on:keydown={handleKeydown}></textarea>
+
+<style>
+	textarea {
+		width: 100%;
+		height: 200px;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/03-tick/meta.json b/site/content/examples/06-lifecycle/03-tick/meta.json
new file mode 100644
index 0000000000..0a406e13aa
--- /dev/null
+++ b/site/content/examples/06-lifecycle/03-tick/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "tick"
+}
\ No newline at end of file
diff --git a/site/content/examples/06-lifecycle/meta.json b/site/content/examples/06-lifecycle/meta.json
new file mode 100644
index 0000000000..2f833e2a4a
--- /dev/null
+++ b/site/content/examples/06-lifecycle/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Lifecycle"
+}
\ No newline at end of file
diff --git a/site/content/examples/07-stores/00-writable-stores/App.svelte b/site/content/examples/07-stores/00-writable-stores/App.svelte
new file mode 100644
index 0000000000..61e55401a5
--- /dev/null
+++ b/site/content/examples/07-stores/00-writable-stores/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { count } from './stores.js';
+	import Incrementer from './Incrementer.svelte';
+	import Decrementer from './Decrementer.svelte';
+	import Resetter from './Resetter.svelte';
+
+	let countValue;
+
+	const unsubscribe = count.subscribe(value => {
+		countValue = value;
+	});
+</script>
+
+<h1>The count is {countValue}</h1>
+
+<Incrementer/>
+<Decrementer/>
+<Resetter/>
\ No newline at end of file
diff --git a/site/content/examples/07-stores/00-writable-stores/Decrementer.svelte b/site/content/examples/07-stores/00-writable-stores/Decrementer.svelte
new file mode 100644
index 0000000000..043b795047
--- /dev/null
+++ b/site/content/examples/07-stores/00-writable-stores/Decrementer.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function decrement() {
+		count.update(n => n - 1);
+	}
+</script>
+
+<button on:click={decrement}>
+	-
+</button>
\ No newline at end of file
diff --git a/site/content/examples/07-stores/00-writable-stores/Incrementer.svelte b/site/content/examples/07-stores/00-writable-stores/Incrementer.svelte
new file mode 100644
index 0000000000..2b5763012b
--- /dev/null
+++ b/site/content/examples/07-stores/00-writable-stores/Incrementer.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function increment() {
+		count.update(n => n + 1);
+	}
+</script>
+
+<button on:click={increment}>
+	+
+</button>
\ No newline at end of file
diff --git a/site/content/examples/07-stores/00-writable-stores/Resetter.svelte b/site/content/examples/07-stores/00-writable-stores/Resetter.svelte
new file mode 100644
index 0000000000..4183421e51
--- /dev/null
+++ b/site/content/examples/07-stores/00-writable-stores/Resetter.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function reset() {
+		count.set(0);
+	}
+</script>
+
+<button on:click={reset}>
+	reset
+</button>
\ No newline at end of file
diff --git a/site/content/examples/07-stores/00-writable-stores/meta.json b/site/content/examples/07-stores/00-writable-stores/meta.json
new file mode 100644
index 0000000000..e0b2a6809d
--- /dev/null
+++ b/site/content/examples/07-stores/00-writable-stores/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Writable stores"
+}
\ No newline at end of file
diff --git a/site/content/examples/07-stores/00-writable-stores/stores.js b/site/content/examples/07-stores/00-writable-stores/stores.js
new file mode 100644
index 0000000000..143e0c99f0
--- /dev/null
+++ b/site/content/examples/07-stores/00-writable-stores/stores.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const count = writable(0);
\ No newline at end of file
diff --git a/site/content/examples/07-stores/01-auto-subscriptions/App.svelte b/site/content/examples/07-stores/01-auto-subscriptions/App.svelte
new file mode 100644
index 0000000000..10ebfb65bb
--- /dev/null
+++ b/site/content/examples/07-stores/01-auto-subscriptions/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { count } from './stores.js';
+	import Incrementer from './Incrementer.svelte';
+	import Decrementer from './Decrementer.svelte';
+	import Resetter from './Resetter.svelte';
+</script>
+
+<h1>The count is {$count}</h1>
+
+<Incrementer/>
+<Decrementer/>
+<Resetter/>
\ No newline at end of file
diff --git a/site/content/examples/07-stores/01-auto-subscriptions/Decrementer.svelte b/site/content/examples/07-stores/01-auto-subscriptions/Decrementer.svelte
new file mode 100644
index 0000000000..043b795047
--- /dev/null
+++ b/site/content/examples/07-stores/01-auto-subscriptions/Decrementer.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function decrement() {
+		count.update(n => n - 1);
+	}
+</script>
+
+<button on:click={decrement}>
+	-
+</button>
\ No newline at end of file
diff --git a/site/content/examples/07-stores/01-auto-subscriptions/Incrementer.svelte b/site/content/examples/07-stores/01-auto-subscriptions/Incrementer.svelte
new file mode 100644
index 0000000000..2b5763012b
--- /dev/null
+++ b/site/content/examples/07-stores/01-auto-subscriptions/Incrementer.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function increment() {
+		count.update(n => n + 1);
+	}
+</script>
+
+<button on:click={increment}>
+	+
+</button>
\ No newline at end of file
diff --git a/site/content/examples/07-stores/01-auto-subscriptions/Resetter.svelte b/site/content/examples/07-stores/01-auto-subscriptions/Resetter.svelte
new file mode 100644
index 0000000000..4183421e51
--- /dev/null
+++ b/site/content/examples/07-stores/01-auto-subscriptions/Resetter.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function reset() {
+		count.set(0);
+	}
+</script>
+
+<button on:click={reset}>
+	reset
+</button>
\ No newline at end of file
diff --git a/site/content/examples/07-stores/01-auto-subscriptions/meta.json b/site/content/examples/07-stores/01-auto-subscriptions/meta.json
new file mode 100644
index 0000000000..a7e4c5fefc
--- /dev/null
+++ b/site/content/examples/07-stores/01-auto-subscriptions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Auto-subscriptions"
+}
\ No newline at end of file
diff --git a/site/content/examples/07-stores/01-auto-subscriptions/stores.js b/site/content/examples/07-stores/01-auto-subscriptions/stores.js
new file mode 100644
index 0000000000..143e0c99f0
--- /dev/null
+++ b/site/content/examples/07-stores/01-auto-subscriptions/stores.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const count = writable(0);
\ No newline at end of file
diff --git a/site/content/examples/07-stores/02-readable-stores/App.svelte b/site/content/examples/07-stores/02-readable-stores/App.svelte
new file mode 100644
index 0000000000..3ff0b0362f
--- /dev/null
+++ b/site/content/examples/07-stores/02-readable-stores/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { time } from './stores.js';
+
+	const formatter = new Intl.DateTimeFormat('en', {
+		hour12: true,
+		hour: 'numeric',
+		minute: '2-digit',
+		second: '2-digit'
+	});
+</script>
+
+<h1>The time is {formatter.format($time)}</h1>
\ No newline at end of file
diff --git a/site/content/examples/07-stores/02-readable-stores/meta.json b/site/content/examples/07-stores/02-readable-stores/meta.json
new file mode 100644
index 0000000000..3f420cafd8
--- /dev/null
+++ b/site/content/examples/07-stores/02-readable-stores/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Readable stores"
+}
\ No newline at end of file
diff --git a/site/content/examples/07-stores/02-readable-stores/stores.js b/site/content/examples/07-stores/02-readable-stores/stores.js
new file mode 100644
index 0000000000..9702628c1c
--- /dev/null
+++ b/site/content/examples/07-stores/02-readable-stores/stores.js
@@ -0,0 +1,11 @@
+import { readable } from 'svelte/store';
+
+export const time = readable(new Date(), function start(set) {
+	const interval = setInterval(() => {
+		set(new Date());
+	}, 1000);
+
+	return function stop() {
+		clearInterval(interval);
+	};
+});
\ No newline at end of file
diff --git a/site/content/examples/07-stores/03-derived-stores/App.svelte b/site/content/examples/07-stores/03-derived-stores/App.svelte
new file mode 100644
index 0000000000..8182ecd671
--- /dev/null
+++ b/site/content/examples/07-stores/03-derived-stores/App.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { time, elapsed } from './stores.js';
+
+	const formatter = new Intl.DateTimeFormat('en', {
+		hour12: true,
+		hour: 'numeric',
+		minute: '2-digit',
+		second: '2-digit'
+	});
+</script>
+
+<h1>The time is {formatter.format($time)}</h1>
+
+<p>
+	This page has been open for
+	{$elapsed} {$elapsed === 1 ? 'second' : 'seconds'}
+</p>
\ No newline at end of file
diff --git a/site/content/examples/07-stores/03-derived-stores/meta.json b/site/content/examples/07-stores/03-derived-stores/meta.json
new file mode 100644
index 0000000000..23105b0bfa
--- /dev/null
+++ b/site/content/examples/07-stores/03-derived-stores/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Derived stores"
+}
\ No newline at end of file
diff --git a/site/content/examples/07-stores/03-derived-stores/stores.js b/site/content/examples/07-stores/03-derived-stores/stores.js
new file mode 100644
index 0000000000..1da6d4195b
--- /dev/null
+++ b/site/content/examples/07-stores/03-derived-stores/stores.js
@@ -0,0 +1,18 @@
+import { readable, derived } from 'svelte/store';
+
+export const time = readable(new Date(), function start(set) {
+	const interval = setInterval(() => {
+		set(new Date());
+	}, 1000);
+
+	return function stop() {
+		clearInterval(interval);
+	};
+});
+
+const start = new Date();
+
+export const elapsed = derived(
+	time,
+	$time => Math.round(($time - start) / 1000)
+);
\ No newline at end of file
diff --git a/site/content/examples/07-stores/04-custom-stores/App.svelte b/site/content/examples/07-stores/04-custom-stores/App.svelte
new file mode 100644
index 0000000000..a320cc052f
--- /dev/null
+++ b/site/content/examples/07-stores/04-custom-stores/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { count } from './stores.js';
+</script>
+
+<h1>The count is {$count}</h1>
+
+<button on:click={count.increment}>+</button>
+<button on:click={count.decrement}>-</button>
+<button on:click={count.reset}>reset</button>
\ No newline at end of file
diff --git a/site/content/examples/07-stores/04-custom-stores/meta.json b/site/content/examples/07-stores/04-custom-stores/meta.json
new file mode 100644
index 0000000000..7394c55f28
--- /dev/null
+++ b/site/content/examples/07-stores/04-custom-stores/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Custom stores"
+}
\ No newline at end of file
diff --git a/site/content/examples/07-stores/04-custom-stores/stores.js b/site/content/examples/07-stores/04-custom-stores/stores.js
new file mode 100644
index 0000000000..5a26025b03
--- /dev/null
+++ b/site/content/examples/07-stores/04-custom-stores/stores.js
@@ -0,0 +1,14 @@
+import { writable } from 'svelte/store';
+
+function createCount() {
+	const { subscribe, set, update } = writable(0);
+
+	return {
+		subscribe,
+		increment: () => update(n => n + 1),
+		decrement: () => update(n => n - 1),
+		reset: () => set(0)
+	};
+}
+
+export const count = createCount();
\ No newline at end of file
diff --git a/site/content/examples/07-stores/meta.json b/site/content/examples/07-stores/meta.json
new file mode 100644
index 0000000000..ad974de0d9
--- /dev/null
+++ b/site/content/examples/07-stores/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Stores"
+}
\ No newline at end of file
diff --git a/site/content/examples/08-motion/00-tweened/App.svelte b/site/content/examples/08-motion/00-tweened/App.svelte
new file mode 100644
index 0000000000..ee3c7a1b5d
--- /dev/null
+++ b/site/content/examples/08-motion/00-tweened/App.svelte
@@ -0,0 +1,38 @@
+<script>
+	import { tweened } from 'svelte/motion';
+	import { cubicOut } from 'svelte/easing';
+
+	const progress = tweened(0, {
+		duration: 400,
+		easing: cubicOut
+	});
+</script>
+
+<progress value={$progress}></progress>
+
+<button on:click="{() => progress.set(0)}">
+	0%
+</button>
+
+<button on:click="{() => progress.set(0.25)}">
+	25%
+</button>
+
+<button on:click="{() => progress.set(0.5)}">
+	50%
+</button>
+
+<button on:click="{() => progress.set(0.75)}">
+	75%
+</button>
+
+<button on:click="{() => progress.set(1)}">
+	100%
+</button>
+
+<style>
+	progress {
+		display: block;
+		width: 100%;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/08-motion/00-tweened/meta.json b/site/content/examples/08-motion/00-tweened/meta.json
new file mode 100644
index 0000000000..39d3af7f38
--- /dev/null
+++ b/site/content/examples/08-motion/00-tweened/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Tweened"
+}
\ No newline at end of file
diff --git a/site/content/examples/08-motion/01-spring/App.svelte b/site/content/examples/08-motion/01-spring/App.svelte
new file mode 100644
index 0000000000..251bf640ee
--- /dev/null
+++ b/site/content/examples/08-motion/01-spring/App.svelte
@@ -0,0 +1,35 @@
+<script>
+	import { spring } from 'svelte/motion';
+
+	let coords = spring({ x: 50, y: 50 }, {
+		stiffness: 0.1,
+		damping: 0.25
+	});
+
+	let size = spring(10);
+</script>
+
+<div style="position: absolute; right: 1em;">
+	<label>
+		<h3>stiffness ({coords.stiffness})</h3>
+		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01">
+	</label>
+
+	<label>
+		<h3>damping ({coords.damping})</h3>
+		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01">
+	</label>
+</div>
+
+<svg
+	on:mousemove="{e => coords.set({ x: e.clientX, y: e.clientY })}"
+	on:mousedown="{() => size.set(30)}"
+	on:mouseup="{() => size.set(10)}"
+>
+	<circle cx={$coords.x} cy={$coords.y} r={$size}/>
+</svg>
+
+<style>
+	svg { width: 100%; height: 100%; margin: -8px }
+	circle { fill: #ff3e00 }
+</style>
\ No newline at end of file
diff --git a/site/content/examples/08-motion/01-spring/meta.json b/site/content/examples/08-motion/01-spring/meta.json
new file mode 100644
index 0000000000..f871fea53e
--- /dev/null
+++ b/site/content/examples/08-motion/01-spring/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Spring"
+}
\ No newline at end of file
diff --git a/site/content/examples/08-motion/meta.json b/site/content/examples/08-motion/meta.json
new file mode 100644
index 0000000000..e6fa83cd7f
--- /dev/null
+++ b/site/content/examples/08-motion/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Motion"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/00-transition/App.svelte b/site/content/examples/09-transitions/00-transition/App.svelte
new file mode 100644
index 0000000000..b7909fb86e
--- /dev/null
+++ b/site/content/examples/09-transitions/00-transition/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { fade } from 'svelte/transition';
+	let visible = true;
+</script>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<p transition:fade>
+		Fades in and out
+	</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/00-transition/meta.json b/site/content/examples/09-transitions/00-transition/meta.json
new file mode 100644
index 0000000000..e07975554f
--- /dev/null
+++ b/site/content/examples/09-transitions/00-transition/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "The transition directive"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte b/site/content/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
new file mode 100644
index 0000000000..01047f5e37
--- /dev/null
+++ b/site/content/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { fly } from 'svelte/transition';
+	let visible = true;
+</script>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<p transition:fly="{{ y: 200, duration: 2000 }}">
+		Flies in and out
+	</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/01-adding-parameters-to-transitions/meta.json b/site/content/examples/09-transitions/01-adding-parameters-to-transitions/meta.json
new file mode 100644
index 0000000000..517bc54c3c
--- /dev/null
+++ b/site/content/examples/09-transitions/01-adding-parameters-to-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Adding parameters"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/02-in-and-out/App.svelte b/site/content/examples/09-transitions/02-in-and-out/App.svelte
new file mode 100644
index 0000000000..36d36664e6
--- /dev/null
+++ b/site/content/examples/09-transitions/02-in-and-out/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { fade, fly } from 'svelte/transition';
+	let visible = true;
+</script>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<p in:fly="{{ y: 200, duration: 2000 }}" out:fade>
+		Flies in, fades out
+	</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/02-in-and-out/meta.json b/site/content/examples/09-transitions/02-in-and-out/meta.json
new file mode 100644
index 0000000000..627f409fa4
--- /dev/null
+++ b/site/content/examples/09-transitions/02-in-and-out/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "In and out"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/03-custom-css-transitions/App.svelte b/site/content/examples/09-transitions/03-custom-css-transitions/App.svelte
new file mode 100644
index 0000000000..a98f38272a
--- /dev/null
+++ b/site/content/examples/09-transitions/03-custom-css-transitions/App.svelte
@@ -0,0 +1,49 @@
+<script>
+	import { fade } from 'svelte/transition';
+	import { elasticOut } from 'svelte/easing';
+
+	let visible = true;
+
+	function spin(node, { duration }) {
+		return {
+			duration,
+			css: t => {
+				const eased = elasticOut(t);
+
+				return `
+					transform: scale(${eased}) rotate(${eased * 1080}deg);
+					color: hsl(
+						${~~(t * 360)},
+						${Math.min(100, 1000 - 1000 * t)}%,
+						${Math.min(50, 500 - 500 * t)}%
+					);`
+			}
+		};
+	}
+</script>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<div class="centered" in:spin="{{duration: 8000}}" out:fade>
+		<span>transitions!</span>
+	</div>
+{/if}
+
+<style>
+	.centered {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%,-50%);
+	}
+
+	span {
+		position: absolute;
+		transform: translate(-50%,-50%);
+		font-size: 4em;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/03-custom-css-transitions/meta.json b/site/content/examples/09-transitions/03-custom-css-transitions/meta.json
new file mode 100644
index 0000000000..8b70464ca8
--- /dev/null
+++ b/site/content/examples/09-transitions/03-custom-css-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Custom CSS transitions"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte b/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte
new file mode 100644
index 0000000000..90701aeab4
--- /dev/null
+++ b/site/content/examples/09-transitions/04-custom-js-transitions/App.svelte
@@ -0,0 +1,36 @@
+<script>
+	let visible = false;
+
+	function typewriter(node, { speed = 1 }) {
+		const valid = (
+			node.childNodes.length === 1 &&
+			node.childNodes[0].nodeType === Node.TEXT_NODE
+		);
+
+		if (!valid) {
+			throw new Error(`This transition only works on elements with a single text node child`);
+		}
+
+		const text = node.textContent;
+		const duration = text.length / (speed * 0.01);
+
+		return {
+			duration,
+			tick: t => {
+				const i = ~~(text.length * t);
+				node.textContent = text.slice(0, i);
+			}
+		};
+	}
+</script>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<p transition:typewriter>
+		The quick brown fox jumps over the lazy dog
+	</p>
+{/if}
diff --git a/site/content/examples/09-transitions/04-custom-js-transitions/meta.json b/site/content/examples/09-transitions/04-custom-js-transitions/meta.json
new file mode 100644
index 0000000000..1ec11d90f9
--- /dev/null
+++ b/site/content/examples/09-transitions/04-custom-js-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Custom JS transitions"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/05-transition-events/App.svelte b/site/content/examples/09-transitions/05-transition-events/App.svelte
new file mode 100644
index 0000000000..da79897365
--- /dev/null
+++ b/site/content/examples/09-transitions/05-transition-events/App.svelte
@@ -0,0 +1,25 @@
+<script>
+	import { fly } from 'svelte/transition';
+
+	let visible = true;
+	let status = 'waiting...';
+</script>
+
+<p>status: {status}</p>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<p
+		transition:fly="{{ y: 200, duration: 2000 }}"
+		on:introstart="{() => status = 'intro started'}"
+		on:outrostart="{() => status = 'outro started'}"
+		on:introend="{() => status = 'intro ended'}"
+		on:outroend="{() => status = 'outro ended'}"
+	>
+		Flies in and out
+	</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/05-transition-events/meta.json b/site/content/examples/09-transitions/05-transition-events/meta.json
new file mode 100644
index 0000000000..b46e28feed
--- /dev/null
+++ b/site/content/examples/09-transitions/05-transition-events/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Transition events"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/06-deferred-transitions/App.svelte b/site/content/examples/09-transitions/06-deferred-transitions/App.svelte
new file mode 100644
index 0000000000..f8c74081fe
--- /dev/null
+++ b/site/content/examples/09-transitions/06-deferred-transitions/App.svelte
@@ -0,0 +1,153 @@
+<script>
+	import { crossfade, scale } from 'svelte/transition';
+	import images from './images.js';
+
+	const [send, receive] = crossfade({
+		duration: 200,
+		fallback: scale
+	});
+
+	let selected = null;
+	let loading = null;
+
+	const ASSETS = `https://sveltejs.github.io/assets/crossfade`;
+
+	const load = image => {
+		const timeout = setTimeout(() => loading = image, 100);
+
+		const img = new Image();
+
+		img.onload = () => {
+			selected = image;
+			clearTimeout(timeout);
+			loading = null;
+		};
+
+		img.src = `${ASSETS}/${image.id}.jpg`;
+	};
+</script>
+
+<div class="container">
+	<div class="phone">
+		<h1>Photo gallery</h1>
+
+		<div class="grid">
+			{#each images as image}
+				<div class="square">
+					{#if selected !== image}
+						<button
+							style="background-color: {image.color};"
+							on:click="{() => load(image)}"
+							in:receive={{key:image.id}}
+							out:send={{key:image.id}}
+						>{loading === image ? '...' : image.id}</button>
+					{/if}
+				</div>
+			{/each}
+		</div>
+
+		{#if selected}
+			{#await selected then d}
+				<div class="photo" in:receive={{key:d.id}} out:send={{key:d.id}}>
+					<img
+						alt={d.alt}
+						src="{ASSETS}/{d.id}.jpg"
+						on:click="{() => selected = null}"
+					>
+
+					<p class='credit'>
+						<a target="_blank" href="https://www.flickr.com/photos/{d.path}">via Flickr</a> &ndash;
+						<a target="_blank" href={d.license.url}>{d.license.name}</a>
+					</p>
+				</div>
+			{/await}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.container {
+		position: absolute;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+	}
+
+	.phone {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		width: 52vmin;
+		height: 76vmin;
+		border: 2vmin solid #ccc;
+		border-bottom-width: 10vmin;
+		padding: 3vmin;
+		border-radius: 2vmin;
+	}
+
+	h1 {
+		font-weight: 300;
+		text-transform: uppercase;
+		font-size: 5vmin;
+		margin: 0.2em 0 0.5em 0;
+	}
+
+	.grid {
+		display: grid;
+		flex: 1;
+		grid-template-columns: repeat(3, 1fr);
+		grid-template-rows: repeat(4, 1fr);
+		grid-gap: 2vmin;
+	}
+
+	button {
+		width: 100%;
+		height: 100%;
+		color: white;
+		font-size: 5vmin;
+		border: none;
+		margin: 0;
+		will-change: transform;
+	}
+
+	.photo, img {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+	}
+
+	.photo {
+		display: flex;
+		align-items: stretch;
+		justify-content: flex-end;
+		flex-direction: column;
+		will-change: transform;
+	}
+
+	img {
+		object-fit: cover;
+		cursor: pointer;
+	}
+
+	.credit {
+		text-align: right;
+		font-size: 2.5vmin;
+		padding: 1em;
+		margin: 0;
+		color: white;
+		font-weight: bold;
+		opacity: 0.6;
+		background: rgba(0,0,0,0.4);
+	}
+
+	.credit a, .credit a:visited {
+		color: white;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/06-deferred-transitions/images.js b/site/content/examples/09-transitions/06-deferred-transitions/images.js
new file mode 100644
index 0000000000..d3ce723758
--- /dev/null
+++ b/site/content/examples/09-transitions/06-deferred-transitions/images.js
@@ -0,0 +1,102 @@
+const BY = {
+	name: 'CC BY 2.0',
+	url: 'https://creativecommons.org/licenses/by/2.0/'
+};
+
+const BY_SA = {
+	name: 'CC BY-SA 2.0',
+	url: 'https://creativecommons.org/licenses/by-sa/2.0/'
+};
+
+const BY_ND = {
+	name: 'CC BY-ND 2.0',
+	url: 'https://creativecommons.org/licenses/by-nd/2.0/'
+};
+
+// via http://labs.tineye.com/multicolr
+export default [
+	{
+		color: '#001f3f',
+		id: '1',
+		alt: 'Crepuscular rays',
+		path: '43428526@N03/7863279376',
+		license: BY
+	},
+	{
+		color: '#0074D9',
+		id: '2',
+		alt: 'Lapland winter scene',
+		path: '25507134@N00/6527537485',
+		license: BY
+	},
+	{
+		color: '#7FDBFF',
+		id: '3',
+		alt: 'Jellyfish',
+		path: '37707866@N00/3354331318',
+		license: BY
+	},
+	{
+		color: '#39CCCC',
+		id: '4',
+		alt: 'A man scuba diving',
+		path: '32751486@N00/4608886209',
+		license: BY_SA
+	},
+	{
+		color: '#3D9970',
+		id: '5',
+		alt: 'Underwater scene',
+		path: '25483059@N08/5548569010',
+		license: BY
+	},
+	{
+		color: '#2ECC40',
+		id: '6',
+		alt: 'Ferns',
+		path: '8404611@N06/2447470760',
+		license: BY
+	},
+	{
+		color: '#01FF70',
+		id: '7',
+		alt: 'Posters in a bar',
+		path: '33917831@N00/114428206',
+		license: BY_SA
+	},
+	{
+		color: '#FFDC00',
+		id: '8',
+		alt: 'Daffodil',
+		path: '46417125@N04/4818617089',
+		license: BY_ND
+	},
+	{
+		color: '#FF851B',
+		id: '9',
+		alt: 'Dust storm in Sydney',
+		path: '56068058@N00/3945496657',
+		license: BY
+	},
+	{
+		color: '#FF4136',
+		id: '10',
+		alt: 'Postbox',
+		path: '31883499@N05/4216820032',
+		license: BY
+	},
+	{
+		color: '#85144b',
+		id: '11',
+		alt: 'Fireworks',
+		path: '8484971@N07/2625506561',
+		license: BY_ND
+	},
+	{
+		color: '#B10DC9',
+		id: '12',
+		alt: 'The Stereophonics',
+		path: '58028312@N00/5385464371',
+		license: BY_ND
+	}
+];
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/06-deferred-transitions/meta.json b/site/content/examples/09-transitions/06-deferred-transitions/meta.json
new file mode 100644
index 0000000000..b9fc7da898
--- /dev/null
+++ b/site/content/examples/09-transitions/06-deferred-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Deferred transitions"
+}
\ No newline at end of file
diff --git a/site/content/examples/09-transitions/meta.json b/site/content/examples/09-transitions/meta.json
new file mode 100644
index 0000000000..cb9291d73f
--- /dev/null
+++ b/site/content/examples/09-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Transitions"
+}
\ No newline at end of file
diff --git a/site/content/examples/10-animations/00-animate/App.svelte b/site/content/examples/10-animations/00-animate/App.svelte
new file mode 100644
index 0000000000..d1842671da
--- /dev/null
+++ b/site/content/examples/10-animations/00-animate/App.svelte
@@ -0,0 +1,147 @@
+<script>
+	import { quintOut } from 'svelte/easing';
+	import { crossfade } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+
+	const [send, receive] = crossfade({
+		fallback(node, params) {
+			const style = getComputedStyle(node);
+			const transform = style.transform === 'none' ? '' : style.transform;
+
+			return {
+				duration: 600,
+				easing: quintOut,
+				css: t => `
+					transform: ${transform} scale(${t});
+					opacity: ${t}
+				`
+			};
+		}
+	});
+
+	let todos = [
+		{ id: 1, done: false, description: 'write some docs' },
+		{ id: 2, done: false, description: 'start writing JSConf talk' },
+		{ id: 3, done: true, description: 'buy some milk' },
+		{ id: 4, done: false, description: 'mow the lawn' },
+		{ id: 5, done: false, description: 'feed the turtle' },
+		{ id: 6, done: false, description: 'fix some bugs' },
+	];
+
+	let uid = todos.length + 1;
+
+	function add(input) {
+		const todo = {
+			id: uid++,
+			done: false,
+			description: input.value
+		};
+
+		todos = [todo, ...todos];
+		input.value = '';
+	}
+
+	function remove(todo) {
+		todos = todos.filter(t => t !== todo);
+	}
+</script>
+
+<div class='board'>
+	<input
+		class="new-todo"
+		placeholder="what needs to be done?"
+		on:keydown="{event => event.key === 'Enter' && add(event.target)}"
+	>
+
+	<div class='left'>
+		<h2>todo</h2>
+		{#each todos.filter(t => !t.done) as todo (todo.id)}
+			<label
+				in:receive="{{key: todo.id}}"
+				out:send="{{key: todo.id}}"
+				animate:flip
+			>
+				<input type=checkbox bind:checked={todo.done}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">x</button>
+			</label>
+		{/each}
+	</div>
+
+	<div class='right'>
+		<h2>done</h2>
+		{#each todos.filter(t => t.done) as todo (todo.id)}
+			<label
+				in:receive="{{key: todo.id}}"
+				out:send="{{key: todo.id}}"
+				animate:flip
+			>
+				<input type=checkbox bind:checked={todo.done}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">x</button>
+			</label>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.new-todo {
+		font-size: 1.4em;
+		width: 100%;
+		margin: 2em 0 1em 0;
+	}
+
+	.board {
+		max-width: 36em;
+		margin: 0 auto;
+	}
+
+	.left, .right {
+		float: left;
+		width: 50%;
+		padding: 0 1em 0 0;
+		box-sizing: border-box;
+	}
+
+	h2 {
+		font-size: 2em;
+		font-weight: 200;
+		user-select: none;
+	}
+
+	label {
+		top: 0;
+		left: 0;
+		display: block;
+		font-size: 1em;
+		line-height: 1;
+		padding: 0.5em;
+		margin: 0 auto 0.5em auto;
+		border-radius: 2px;
+		background-color: #eee;
+		user-select: none;
+	}
+
+	input { margin: 0 }
+
+	.right label {
+		background-color: rgb(180,240,100);
+	}
+
+	button {
+		float: right;
+		height: 1em;
+		box-sizing: border-box;
+		padding: 0 0.5em;
+		line-height: 1;
+		background-color: transparent;
+		border: none;
+		color: rgb(170,30,30);
+		opacity: 0;
+		transition: opacity 0.2s;
+	}
+
+	label:hover button {
+		opacity: 1;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/10-animations/00-animate/meta.json b/site/content/examples/10-animations/00-animate/meta.json
new file mode 100644
index 0000000000..dd7e345443
--- /dev/null
+++ b/site/content/examples/10-animations/00-animate/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "The animate directive"
+}
\ No newline at end of file
diff --git a/site/content/examples/10-animations/meta.json b/site/content/examples/10-animations/meta.json
new file mode 100644
index 0000000000..c71301495e
--- /dev/null
+++ b/site/content/examples/10-animations/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Animations"
+}
\ No newline at end of file
diff --git a/site/content/examples/11-easing/00-easing/App.svelte b/site/content/examples/11-easing/00-easing/App.svelte
new file mode 100644
index 0000000000..8dd92f2b20
--- /dev/null
+++ b/site/content/examples/11-easing/00-easing/App.svelte
@@ -0,0 +1,105 @@
+<script>
+	import { interpolateString as interpolate } from 'd3-interpolate';
+	import { tweened } from 'svelte/motion';
+
+	import Grid from './Grid.svelte';
+	import Controls from './Controls.svelte';
+
+	import { eases, types } from './eases.js';
+
+	let current_type = 'In';
+	let current_ease = 'sine';
+	let duration = 2000;
+	let current = eases.get(current_ease)[current_type];
+	let playing = false;
+	let width;
+
+	const ease_path = tweened(current.shape, { interpolate });
+	const time = tweened(0);
+	const value = tweened(1000);
+
+	async function runAnimations() {
+		playing = true;
+
+		value.set(1000, {duration: 0});
+		time.set(0, {duration: 0});
+
+		await ease_path.set(current.shape);
+		await Promise.all([
+			time.set(1000, {duration, easing: x => x}),
+			value.set(0, {duration, easing: current.fn})
+		]);
+
+		playing = false;
+	}
+
+	$: current = eases.get(current_ease)[current_type];
+	$: current && runAnimations();
+</script>
+
+<div bind:offsetWidth={width} class="easing-vis">
+	<svg viewBox="0 0 1400 1802">
+		<g class="canvas">
+			<Grid x={$time} y={$value}/>
+			<g class="graph">
+				<path
+					d={$ease_path}
+					stroke="#333"
+					stroke-width="2"
+					fill="none"
+				/>
+
+				<path d="M0,23.647C0,22.41 27.014,0.407 28.496,0.025C29.978,-0.357 69.188,3.744 70.104,4.744C71.02,5.745 71.02,41.499 70.104,42.5C69.188,43.501 29.978,47.601 28.496,47.219C27.014,46.837 0,24.884 0,23.647Z"
+					fill="#ff3e00"
+					style="transform: translate(1060px, {($value - 24)}px)"
+				/>
+
+				<circle
+					cx="{$time}"
+					cy="{$value}"
+					r="15"
+					fill="#ff3e00"
+				/>
+			</g>
+		</g>
+	</svg>
+
+	<Controls
+		{eases}
+		{types}
+		{playing}
+		{width}
+		bind:duration
+		bind:current_ease
+		bind:current_type
+		on:play={runAnimations}
+	/>
+</div>
+
+<style>
+	.easing-vis {
+		display: flex;
+		max-height: 95%;
+		max-width: 800px;
+		margin: auto;
+		border: 1px solid #333;
+		border-radius: 2px;
+		padding: 20px;
+	}
+
+	svg {
+		width: 100%;
+		margin: 0 20px 0 0;
+	}
+
+	.graph {
+		transform: translate(200px,400px)
+	}
+
+	@media (max-width:600px) {
+		.easing-vis {
+			flex-direction: column;
+			max-height: calc(100% - 3rem);
+		}
+	}
+</style>
diff --git a/site/content/examples/11-easing/00-easing/Controls.svelte b/site/content/examples/11-easing/00-easing/Controls.svelte
new file mode 100644
index 0000000000..3123b8a25b
--- /dev/null
+++ b/site/content/examples/11-easing/00-easing/Controls.svelte
@@ -0,0 +1,187 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	export let current_ease;
+	export let current_type;
+	export let eases;
+	export let types;
+	export let duration;
+	export let playing;
+	export let width;
+
+	const dispatch = createEventDispatcher();
+
+	$: mobile = width && width < 600;
+</script>
+
+<div class="easing-sidebar">
+		<div class="easing-types">
+			<h3>Ease</h3>
+			{#if mobile}
+				<select bind:value={current_ease}>
+					{#each [...eases] as [name]}
+						<option
+							value={name}
+							class:selected={name === current_ease}
+						>
+							{name}
+						</option>
+					{/each}
+				</select>
+			{:else}
+				<ul>
+					{#each [...eases] as [name]}
+						<li
+							class:selected={name === current_ease}
+							on:click={() => current_ease = name}
+						>
+							{name}
+						</li>
+					{/each}
+				</ul>
+			{/if}
+			<h3>Type</h3>
+			{#if mobile }
+				<select bind:value={current_type}>
+					{#each types as [name, type]}
+						<option
+							value={type}
+						>
+							{name}
+						</option>
+					{/each}
+				</select>
+			{:else}
+				<ul>
+					{#each types as [name, type]}
+						<li
+							class:selected={type === current_type}
+							on:click={() => current_type = type}
+						>
+							{name}
+					</li>
+					{/each}
+				</ul>
+			{/if}
+		</div>
+		<h4>
+			Duration
+		</h4>
+		<div class="duration">
+			<span>
+				<input type="number" bind:value={duration} min="0" step="100"/>
+				<button class="number" on:click={() => duration -= 100}>-</button>
+				<button class="number" on:click={() => duration += 100}>+</button>
+			</span>
+			<button class="play" on:click={() => dispatch('play')}>
+				{playing ? 'Restart' : 'Play'}
+			</button>
+		</div>
+	</div>
+
+	
+<style>
+	.easing-sidebar {
+		width: 11em;
+	}
+
+	ul {
+		list-style: none;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		font-size: 18px;
+	}
+
+	li {
+		padding: 5px 10px;
+		background: #eee;
+		border-radius: 2px;
+		margin: 3px 0;
+		cursor:pointer;
+	}
+
+	li:hover {
+		background: #676778;
+		color: white;
+	}
+
+	.selected {
+		background: #ff3e00;
+		color: white;
+	}
+
+	h3 {
+		margin: 0 10px 0 0;
+	}
+
+	h4 {
+		margin-bottom: 0;
+	}
+
+	select {
+		display: inline;
+		padding: 0.2em;
+		margin: 0;
+	}
+
+	.duration {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	.duration span {
+		display: flex;
+	}
+
+	.duration input {
+		width: 80px;
+		margin: 10px 10px 10px 0 ;
+	}
+
+	.duration button {
+		margin: 10px 5px;
+	}
+
+	.duration .number {
+		width: 30px;
+	}
+
+	.duration .play {
+		margin: 0 5px 0 auto;
+		width: 100%;
+	}
+
+	@media (max-width:600px) {
+		.easing-types {
+			display: flex;
+			align-items: center;
+			margin-top: 10px;
+		}
+
+		.easing-sidebar {
+			width: 100%;
+		}
+
+		.duration .play {
+			margin-left: auto;
+			width: unset;
+		}
+
+		h3 {
+			font-size: 0.9em;
+			display: inline;
+		}
+
+		h3:nth-of-type(2) {
+			margin-left: auto;
+		}
+
+		ul li {
+			margin-right: 10px;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/11-easing/00-easing/Grid.svelte b/site/content/examples/11-easing/00-easing/Grid.svelte
new file mode 100644
index 0000000000..c0c9d47913
--- /dev/null
+++ b/site/content/examples/11-easing/00-easing/Grid.svelte
@@ -0,0 +1,62 @@
+<script>
+	export let x, y;
+</script>
+
+<svelte:options namespace="svg" />
+
+<rect
+	x=0
+	y=0
+	width=1400
+	height=1800
+	stroke=#ccc
+	style="opacity: 0.5"
+	fill=none
+	stroke-width=2
+/>
+
+{#each { length: 8 } as _, i}
+	{#if i < 6}
+		<path
+			d="M{(i+1) * 200} 0 L{(i+1)*200} 1802"
+			class="grid-line"
+		/>
+	{/if}
+	<path
+		d="M0 {(i+1) * 200} L1400 {(i+1)*200} "
+		class="grid-line"
+	/>
+{/each}
+
+<path
+	style="transform: translateX({x+200}px)"
+	d="M0 0 L0 1800"
+	class="grid-line-xy"
+/>
+<path
+	style="transform: translateY({y}px)"
+	d="M0 400 L1400 400"
+	class="grid-line-xy"
+/>
+<rect
+	x=200
+	y=400
+	width=1000
+	height=1000
+	stroke=#999
+	fill=none
+	stroke-width=2
+/>
+
+<style>
+	.grid-line {
+		stroke:#ccc;
+		opacity: 0.5;
+		stroke-width: 2;
+	}
+
+	.grid-line-xy {
+		stroke: tomato;
+		stroke-width: 2;
+	}
+</style>
diff --git a/site/content/examples/11-easing/00-easing/eases.js b/site/content/examples/11-easing/00-easing/eases.js
new file mode 100644
index 0000000000..a24246005a
--- /dev/null
+++ b/site/content/examples/11-easing/00-easing/eases.js
@@ -0,0 +1,43 @@
+import * as eases from 'svelte/easing';
+
+const processed_eases = {};
+
+for (const ease in eases) {
+	if (ease === "linear") {
+		processed_eases.linear = eases.linear;
+	} else {
+		const name = ease.replace(/In$|InOut$|Out$/, '');
+		const type = ease.match(/In$|InOut$|Out$/)[0];
+
+		if (!(name in processed_eases)) processed_eases[name] = {};
+		processed_eases[name][type] = {};
+		processed_eases[name][type].fn = eases[ease];
+
+		let shape = 'M0 1000';
+		for (let i = 1; i <= 1000; i++) {
+			shape = `${shape} L${(i / 1000) * 1000} ${1000 - eases[ease](i / 1000) * 1000} `;
+			processed_eases[name][type].shape = shape;
+		}
+	}
+}
+
+const sorted_eases = new Map([
+	['sine', processed_eases.sine],
+	['quad', processed_eases.quad],
+	['cubic', processed_eases.cubic],
+	['quart', processed_eases.quart],
+	['quint', processed_eases.quint],
+	['expo', processed_eases.expo],
+	['circ', processed_eases.circ],
+	['back', processed_eases.back],
+	['elastic', processed_eases.elastic],
+	['bounce', processed_eases.bounce],
+]);
+
+export const types = [
+	['Ease In', 'In'],
+	['Ease Out', 'Out'],
+	['Ease In Out', 'InOut']
+];
+
+export { sorted_eases as eases };
\ No newline at end of file
diff --git a/site/content/examples/11-easing/00-easing/meta.json b/site/content/examples/11-easing/00-easing/meta.json
new file mode 100644
index 0000000000..59ad604b26
--- /dev/null
+++ b/site/content/examples/11-easing/00-easing/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Ease Visualiser"
+}
\ No newline at end of file
diff --git a/site/content/examples/11-easing/meta.json b/site/content/examples/11-easing/meta.json
new file mode 100644
index 0000000000..78341a522d
--- /dev/null
+++ b/site/content/examples/11-easing/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Easing"
+}
\ No newline at end of file
diff --git a/site/content/examples/12-svg/01-clock/App.svelte b/site/content/examples/12-svg/01-clock/App.svelte
new file mode 100644
index 0000000000..44f7e484a1
--- /dev/null
+++ b/site/content/examples/12-svg/01-clock/App.svelte
@@ -0,0 +1,104 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let time = new Date();
+
+	// these automatically update when `time`
+	// changes, because of the `$:` prefix
+	$: hours = time.getHours();
+	$: minutes = time.getMinutes();
+	$: seconds = time.getSeconds();
+
+	onMount(() => {
+		const interval = setInterval(() => {
+			time = new Date();
+		}, 1000);
+
+		return () => {
+			clearInterval(interval);
+		};
+	});
+</script>
+
+<svg viewBox='-50 -50 100 100'>
+	<circle class='clock-face' r='48'/>
+
+	<!-- markers -->
+	{#each [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] as minute}
+		<line
+			class='major'
+			y1='35'
+			y2='45'
+			transform='rotate({30 * minute})'
+		/>
+
+		{#each [1, 2, 3, 4] as offset}
+			<line
+				class='minor'
+				y1='42'
+				y2='45'
+				transform='rotate({6 * (minute + offset)})'
+			/>
+		{/each}
+	{/each}
+
+	<!-- hour hand -->
+	<line
+		class='hour'
+		y1='2'
+		y2='-20'
+		transform='rotate({30 * hours + minutes / 2})'
+	/>
+
+	<!-- minute hand -->
+	<line
+		class='minute'
+		y1='4'
+		y2='-30'
+		transform='rotate({6 * minutes + seconds / 10})'
+	/>
+
+	<!-- second hand -->
+	<g transform='rotate({6 * seconds})'>
+		<line class='second' y1='10' y2='-38'/>
+		<line class='second-counterweight' y1='10' y2='2'/>
+	</g>
+</svg>
+
+<style>
+	svg {
+		width: 100%;
+		height: 100%;
+	}
+
+	.clock-face {
+		stroke: #333;
+		fill: white;
+	}
+
+	.minor {
+		stroke: #999;
+		stroke-width: 0.5;
+	}
+
+	.major {
+		stroke: #333;
+		stroke-width: 1;
+	}
+
+	.hour {
+		stroke: #333;
+	}
+
+	.minute {
+		stroke: #666;
+	}
+
+	.second, .second-counterweight {
+		stroke: rgb(180,0,0);
+	}
+
+	.second-counterweight {
+		stroke-width: 3;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/12-svg/01-clock/meta.json b/site/content/examples/12-svg/01-clock/meta.json
new file mode 100644
index 0000000000..ec7137feb6
--- /dev/null
+++ b/site/content/examples/12-svg/01-clock/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Clock"
+}
\ No newline at end of file
diff --git a/site/content/examples/12-svg/02-bar-chart/App.svelte b/site/content/examples/12-svg/02-bar-chart/App.svelte
new file mode 100644
index 0000000000..7ad21545ff
--- /dev/null
+++ b/site/content/examples/12-svg/02-bar-chart/App.svelte
@@ -0,0 +1,118 @@
+<script>
+	import { scaleLinear } from 'd3-scale';
+
+	const points = [
+		{ year: 1990, birthrate: 16.7 },
+		{ year: 1995, birthrate: 14.6 },
+		{ year: 2000, birthrate: 14.4 },
+		{ year: 2005, birthrate: 14 },
+		{ year: 2010, birthrate: 13 },
+		{ year: 2015, birthrate: 12.4 }
+	];
+
+	const xTicks = [1990, 1995, 2000, 2005, 2010, 2015];
+	const yTicks = [0, 5, 10, 15, 20];
+	const padding = { top: 20, right: 15, bottom: 20, left: 25 };
+
+	let width = 500;
+	let height = 200;
+
+	function formatMobile(tick) {
+		return "'" + tick.toString().slice(-2);
+	}
+
+	$: xScale = scaleLinear()
+		.domain([0, xTicks.length])
+		.range([padding.left, width - padding.right]);
+
+	$: yScale = scaleLinear()
+		.domain([0, Math.max.apply(null, yTicks)])
+		.range([height - padding.bottom, padding.top]);
+
+	$: innerWidth = width - (padding.left + padding.right);
+	$: barWidth = innerWidth / xTicks.length;
+</script>
+
+<h2>US birthrate by year</h2>
+
+<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
+	<svg>
+		<!-- y axis -->
+		<g class="axis y-axis">
+			{#each yTicks as tick}
+				<g class="tick tick-{tick}" transform="translate(0, {yScale(tick)})">
+					<line x2="100%"></line>
+					<text y="-4">{tick} {tick === 20 ? ' per 1,000 population' : ''}</text>
+				</g>
+			{/each}
+		</g>
+
+		<!-- x axis -->
+		<g class="axis x-axis">
+			{#each points as point, i}
+				<g class="tick" transform="translate({xScale(i)},{height})">
+					<text x="{barWidth/2}" y="-4">{width > 380 ? point.year : formatMobile(point.year)}</text>
+				</g>
+			{/each}
+		</g>
+
+		<g class='bars'>
+			{#each points as point, i}
+				<rect
+					x="{xScale(i) + 2}"
+					y="{yScale(point.birthrate)}"
+					width="{barWidth - 4}"
+					height="{yScale(0) - yScale(point.birthrate)}"
+				></rect>
+			{/each}
+		</g>
+	</svg>
+</div>
+
+<style>
+	h2 {
+		text-align: center;
+	}
+
+	.chart {
+		width: 100%;
+		max-width: 500px;
+		margin: 0 auto;
+	}
+
+	svg {
+		position: relative;
+		width: 100%;
+		height: 200px;
+	}
+
+	.tick {
+		font-family: Helvetica, Arial;
+		font-size: .725em;
+		font-weight: 200;
+	}
+
+	.tick line {
+		stroke: #e2e2e2;
+		stroke-dasharray: 2;
+	}
+
+	.tick text {
+		fill: #ccc;
+		text-anchor: start;
+	}
+
+	.tick.tick-0 line {
+		stroke-dasharray: 0;
+	}
+
+	.x-axis .tick text {
+		text-anchor: middle;
+	}
+
+	.bars rect {
+		fill: #a11;
+		stroke: none;
+		opacity: 0.65;
+	}
+</style>
diff --git a/site/content/examples/12-svg/02-bar-chart/meta.json b/site/content/examples/12-svg/02-bar-chart/meta.json
new file mode 100644
index 0000000000..97ae2b671b
--- /dev/null
+++ b/site/content/examples/12-svg/02-bar-chart/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Bar chart"
+}
\ No newline at end of file
diff --git a/site/content/examples/12-svg/03-area-chart/App.svelte b/site/content/examples/12-svg/03-area-chart/App.svelte
new file mode 100644
index 0000000000..2fe39280e4
--- /dev/null
+++ b/site/content/examples/12-svg/03-area-chart/App.svelte
@@ -0,0 +1,111 @@
+<script>
+	import { scaleLinear } from 'd3-scale';
+	import points from './data.js';
+
+	const yTicks = [0, 2, 4, 6, 8];
+	const xTicks = [1980, 1990, 2000, 2010];
+	const padding = { top: 20, right: 15, bottom: 20, left: 25 };
+
+	let width = 500;
+	let height = 200;
+
+	$: xScale = scaleLinear()
+		.domain([minX, maxX])
+		.range([padding.left, width - padding.right]);
+
+	$: yScale = scaleLinear()
+		.domain([Math.min.apply(null, yTicks), Math.max.apply(null, yTicks)])
+		.range([height - padding.bottom, padding.top]);
+
+	$: minX = points[0].x;
+	$: maxX = points[points.length - 1].x;
+	$: path = `M${points.map(p => `${xScale(p.x)},${yScale(p.y)}`).join('L')}`;
+	$: area = `${path}L${xScale(maxX)},${yScale(0)}L${xScale(minX)},${yScale(0)}Z`;
+
+	function formatMobile (tick) {
+		return "'" + tick.toString().slice(-2);
+	}
+</script>
+
+<h2>Arctic sea ice minimum</h2>
+
+<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
+	<svg>
+		<!-- y axis -->
+		<g class="axis y-axis" transform="translate(0, {padding.top})">
+			{#each yTicks as tick}
+				<g class="tick tick-{tick}" transform="translate(0, {yScale(tick) - padding.bottom})">
+					<line x2="100%"></line>
+					<text y="-4">{tick} {tick === 8 ? ' million sq km' : ''}</text>
+				</g>
+			{/each}
+		</g>
+
+		<!-- x axis -->
+		<g class="axis x-axis">
+			{#each xTicks as tick}
+				<g class="tick tick-{ tick }" transform="translate({xScale(tick)},{height})">
+					<line y1="-{height}" y2="-{padding.bottom}" x1="0" x2="0"></line>
+					<text y="-2">{width > 380 ? tick : formatMobile(tick)}</text>
+				</g>
+			{/each}
+		</g>
+
+		<!-- data -->
+		<path class="path-area" d={area}></path>
+		<path class="path-line" d={path}></path>
+	</svg>
+</div>
+
+<p>Average September extent. Source: <a href='https://climate.nasa.gov/vital-signs/arctic-sea-ice/'>NSIDC/NASA</a></p>
+
+<style>
+	.chart, h2, p {
+		width: 100%;
+		max-width: 500px;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	svg {
+		position: relative;
+		width: 100%;
+		height: 200px;
+		overflow: visible;
+	}
+
+	.tick {
+		font-size: .725em;
+		font-weight: 200;
+	}
+
+	.tick line {
+		stroke: #aaa;
+		stroke-dasharray: 2;
+	}
+
+	.tick text {
+		fill: #666;
+		text-anchor: start;
+	}
+
+	.tick.tick-0 line {
+		stroke-dasharray: 0;
+	}
+
+	.x-axis .tick text {
+		text-anchor: middle;
+	}
+
+	.path-line {
+		fill: none;
+		stroke: rgb(0,100,100);
+		stroke-linejoin: round;
+		stroke-linecap: round;
+		stroke-width: 2;
+	}
+
+	.path-area {
+		fill: rgba(0,100,100,0.2);
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/12-svg/03-area-chart/data.js b/site/content/examples/12-svg/03-area-chart/data.js
new file mode 100644
index 0000000000..5cb65b397e
--- /dev/null
+++ b/site/content/examples/12-svg/03-area-chart/data.js
@@ -0,0 +1,45 @@
+export default [
+	{ x: 1979, y: 7.19 },
+	{ x: 1980, y: 7.83 },
+	{ x: 1981, y: 7.24 },
+	{ x: 1982, y: 7.44 },
+	{ x: 1983, y: 7.51 },
+	{ x: 1984, y: 7.10 },
+	{ x: 1985, y: 6.91 },
+	{ x: 1986, y: 7.53 },
+	{ x: 1987, y: 7.47 },
+	{ x: 1988, y: 7.48 },
+	{ x: 1989, y: 7.03 },
+	{ x: 1990, y: 6.23 },
+	{ x: 1991, y: 6.54 },
+	{ x: 1992, y: 7.54 },
+	{ x: 1993, y: 6.50 },
+	{ x: 1994, y: 7.18 },
+	{ x: 1995, y: 6.12 },
+	{ x: 1996, y: 7.87 },
+	{ x: 1997, y: 6.73 },
+	{ x: 1998, y: 6.55 },
+	{ x: 1999, y: 6.23 },
+	{ x: 2000, y: 6.31 },
+	{ x: 2001, y: 6.74 },
+	{ x: 2002, y: 5.95 },
+	{ x: 2003, y: 6.13 },
+	{ x: 2004, y: 6.04 },
+	{ x: 2005, y: 5.56 },
+	{ x: 2006, y: 5.91 },
+	{ x: 2007, y: 4.29 },
+	{ x: 2008, y: 4.72 },
+	{ x: 2009, y: 5.38 },
+	{ x: 2010, y: 4.92 },
+	{ x: 2011, y: 4.61 },
+	{ x: 2012, y: 3.62 },
+	{ x: 2013, y: 5.35 },
+	{ x: 2014, y: 5.28 },
+	{ x: 2015, y: 4.63 },
+	{ x: 2016, y: 4.72 },
+	{ x: 2017, y: 4.82 },
+	{ x: 2018, y:	4.79 },
+	{ x: 2019, y: 4.36 },
+	{ x: 2020, y: 4 },
+	{ x: 2021, y: 4.92 }
+];
diff --git a/site/content/examples/12-svg/03-area-chart/meta.json b/site/content/examples/12-svg/03-area-chart/meta.json
new file mode 100644
index 0000000000..3c8bb48a40
--- /dev/null
+++ b/site/content/examples/12-svg/03-area-chart/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Area chart"
+}
\ No newline at end of file
diff --git a/site/content/examples/12-svg/04-scatterplot/App.svelte b/site/content/examples/12-svg/04-scatterplot/App.svelte
new file mode 100644
index 0000000000..1ceb1d221c
--- /dev/null
+++ b/site/content/examples/12-svg/04-scatterplot/App.svelte
@@ -0,0 +1,24 @@
+<script>
+	import Scatterplot from './Scatterplot.svelte';
+	import data from './data.js';
+</script>
+
+<div class="chart">
+	<h2>Anscombe's quartet</h2>
+
+	<Scatterplot points={data.a}/>
+	<Scatterplot points={data.b}/>
+	<Scatterplot points={data.c}/>
+	<Scatterplot points={data.d}/>
+</div>
+
+<style>
+	.chart {
+		width: 100%;
+		max-width: 640px;
+		height: calc(100% - 4em);
+		min-height: 280px;
+		max-height: 480px;
+		margin: 0 auto;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte b/site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte
new file mode 100644
index 0000000000..7ae113ab06
--- /dev/null
+++ b/site/content/examples/12-svg/04-scatterplot/Scatterplot.svelte
@@ -0,0 +1,95 @@
+<script>
+	import { onMount } from 'svelte';
+	import { scaleLinear } from 'd3-scale';
+
+	export let points;
+
+	let svg;
+	let width = 500;
+	let height = 200;
+
+	const padding = { top: 20, right: 40, bottom: 40, left: 25 };
+
+	$: xScale = scaleLinear()
+		.domain([0, 20])
+		.range([padding.left, width - padding.right]);
+
+	$: yScale = scaleLinear()
+		.domain([0, 12])
+		.range([height - padding.bottom, padding.top]);
+
+	$: xTicks = width > 180 ?
+		[0, 4, 8, 12, 16, 20] :
+		[0, 10, 20];
+
+	$: yTicks = height > 180 ?
+		[0, 2, 4, 6, 8, 10, 12] :
+		[0, 4, 8, 12];
+
+	onMount(resize);
+
+	function resize() {
+		({ width, height } = svg.getBoundingClientRect());
+	}
+</script>
+
+<svelte:window on:resize='{resize}'/>
+
+<svg bind:this={svg}>
+	<!-- y axis -->
+	<g class='axis y-axis'>
+		{#each yTicks as tick}
+			<g class='tick tick-{tick}' transform='translate(0, {yScale(tick)})'>
+				<line x1='{padding.left}' x2='{xScale(22)}'/>
+				<text x='{padding.left - 8}' y='+4'>{tick}</text>
+			</g>
+		{/each}
+	</g>
+
+	<!-- x axis -->
+	<g class='axis x-axis'>
+		{#each xTicks as tick}
+			<g class='tick' transform='translate({xScale(tick)},0)'>
+				<line y1='{yScale(0)}' y2='{yScale(13)}'/>
+				<text y='{height - padding.bottom + 16}'>{tick}</text>
+			</g>
+		{/each}
+	</g>
+
+	<!-- data -->
+	{#each points as point}
+		<circle cx='{xScale(point.x)}' cy='{yScale(point.y)}' r='5'/>
+	{/each}
+</svg>
+
+<style>
+	svg {
+		width: 50%;
+		height: 50%;
+		float: left;
+	}
+
+	circle {
+		fill: orange;
+		fill-opacity: 0.6;
+		stroke: rgba(0,0,0,0.5);
+	}
+
+	.tick line {
+		stroke: #ddd;
+		stroke-dasharray: 2;
+	}
+
+	text {
+		font-size: 12px;
+		fill: #999;
+	}
+
+	.x-axis text {
+		text-anchor: middle;
+	}
+
+	.y-axis text {
+		text-anchor: end;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/12-svg/04-scatterplot/data.js b/site/content/examples/12-svg/04-scatterplot/data.js
new file mode 100644
index 0000000000..0faeb976d9
--- /dev/null
+++ b/site/content/examples/12-svg/04-scatterplot/data.js
@@ -0,0 +1,54 @@
+export default {
+	a: [
+		{ x: 10, y: 8.04 },
+		{ x: 8, y: 6.95 },
+		{ x: 13, y: 7.58 },
+		{ x: 9, y: 8.81 },
+		{ x: 11, y: 8.33 },
+		{ x: 14, y: 9.96 },
+		{ x: 6, y: 7.24 },
+		{ x: 4, y: 4.26 },
+		{ x: 12, y: 10.84 },
+		{ x: 7, y: 4.82 },
+		{ x: 5, y: 5.68 }
+	],
+	b: [
+		{ x: 10, y: 9.14 },
+		{ x: 8, y: 8.14 },
+		{ x: 13, y: 8.74 },
+		{ x: 9, y: 8.77 },
+		{ x: 11, y: 9.26 },
+		{ x: 14, y: 8.1 },
+		{ x: 6, y: 6.13 },
+		{ x: 4, y: 3.1 },
+		{ x: 12, y: 9.13 },
+		{ x: 7, y: 7.26 },
+		{ x: 5, y: 4.74 }
+	],
+	c: [
+		{ x: 10, y: 7.46 },
+		{ x: 8, y: 6.77 },
+		{ x: 13, y: 12.74 },
+		{ x: 9, y: 7.11 },
+		{ x: 11, y: 7.81 },
+		{ x: 14, y: 8.84 },
+		{ x: 6, y: 6.08 },
+		{ x: 4, y: 5.39 },
+		{ x: 12, y: 8.15 },
+		{ x: 7, y: 6.42 },
+		{ x: 5, y: 5.73 }
+	],
+	d: [
+		{ x: 8, y: 6.58 },
+		{ x: 8, y: 5.76 },
+		{ x: 8, y: 7.71 },
+		{ x: 8, y: 8.84 },
+		{ x: 8, y: 8.47 },
+		{ x: 8, y: 7.04 },
+		{ x: 8, y: 5.25 },
+		{ x: 19, y: 12.5 },
+		{ x: 8, y: 5.56 },
+		{ x: 8, y: 7.91 },
+		{ x: 8, y: 6.89 }
+	]
+};
\ No newline at end of file
diff --git a/site/content/examples/12-svg/04-scatterplot/meta.json b/site/content/examples/12-svg/04-scatterplot/meta.json
new file mode 100644
index 0000000000..52a4c119bc
--- /dev/null
+++ b/site/content/examples/12-svg/04-scatterplot/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Scatterplot"
+}
\ No newline at end of file
diff --git a/site/content/examples/12-svg/05-svg-transitions/App.svelte b/site/content/examples/12-svg/05-svg-transitions/App.svelte
new file mode 100644
index 0000000000..7f3a774a2c
--- /dev/null
+++ b/site/content/examples/12-svg/05-svg-transitions/App.svelte
@@ -0,0 +1,74 @@
+<script>
+	import { quintOut } from 'svelte/easing';
+	import { fade, draw, fly } from 'svelte/transition';
+	import { expand } from './custom-transitions.js';
+	import { inner, outer } from './shape.js';
+
+	let visible = true;
+</script>
+
+{#if visible}
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
+		<g out:fade="{{duration: 200}}" opacity=0.2>
+			<path
+				in:expand="{{duration: 400, delay: 1000, easing: quintOut}}"
+				style="stroke: #ff3e00; fill: #ff3e00; stroke-width: 50;"
+				d={outer}
+			/>
+			<path
+				in:draw="{{duration: 1000}}"
+				style="stroke:#ff3e00; stroke-width: 1.5"
+				d={inner}
+			/>
+		</g>
+	</svg>
+
+	<div class="centered" out:fly="{{y: -20, duration: 800}}">
+		{#each 'SVELTE' as char, i}
+			<span
+				in:fade="{{delay: 1000 + i * 150, duration: 800}}"
+			>{char}</span>
+		{/each}
+	</div>
+{/if}
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	toggle me
+</label>
+
+<link href="https://fonts.googleapis.com/css?family=Overpass:100,400" rel="stylesheet">
+
+<style>
+	svg {
+		width: 100%;
+		height: 100%;
+	}
+
+	path {
+		fill: white;
+		opacity: 1;
+	}
+
+	label {
+		position: absolute;
+		top: 1em;
+		left: 1em;
+	}
+
+	.centered {
+		font-size: 20vw;
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%,-50%);
+		font-family: 'Overpass';
+		letter-spacing: 0.12em;
+		color: #676778;
+		font-weight: 400;
+	}
+
+	.centered span {
+		will-change: filter;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/12-svg/05-svg-transitions/custom-transitions.js b/site/content/examples/12-svg/05-svg-transitions/custom-transitions.js
new file mode 100644
index 0000000000..0d9a98a43f
--- /dev/null
+++ b/site/content/examples/12-svg/05-svg-transitions/custom-transitions.js
@@ -0,0 +1,18 @@
+import { cubicOut } from 'svelte/easing';
+
+export function expand(node, params) {
+	const {
+		delay = 0,
+		duration = 400,
+		easing = cubicOut
+	} = params;
+
+	const w = parseFloat(getComputedStyle(node).strokeWidth);
+
+	return {
+		delay,
+		duration,
+		easing,
+		css: t => `opacity: ${t}; stroke-width: ${t * w}`
+	};
+}
\ No newline at end of file
diff --git a/site/content/examples/12-svg/05-svg-transitions/meta.json b/site/content/examples/12-svg/05-svg-transitions/meta.json
new file mode 100644
index 0000000000..aa14d1a3d4
--- /dev/null
+++ b/site/content/examples/12-svg/05-svg-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "SVG transitions"
+}
\ No newline at end of file
diff --git a/site/content/examples/12-svg/05-svg-transitions/shape.js b/site/content/examples/12-svg/05-svg-transitions/shape.js
new file mode 100644
index 0000000000..9ed2128ebe
--- /dev/null
+++ b/site/content/examples/12-svg/05-svg-transitions/shape.js
@@ -0,0 +1,2 @@
+export const inner = `M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45`;
+export const outer = `M65,34 L37,52 A1 1 0 0 0 44 60 L70.5,44.5 A1 1 0 0 0 65,34Z M64,67 L36,85 A1 1 0 0 0 42 94 L68,77.5 A1 1 0 0 0 64,67Z`;
\ No newline at end of file
diff --git a/site/content/examples/12-svg/meta.json b/site/content/examples/12-svg/meta.json
new file mode 100644
index 0000000000..a26780dfc8
--- /dev/null
+++ b/site/content/examples/12-svg/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "SVG"
+}
\ No newline at end of file
diff --git a/site/content/examples/13-actions/00-actions/App.svelte b/site/content/examples/13-actions/00-actions/App.svelte
new file mode 100644
index 0000000000..79214ec81f
--- /dev/null
+++ b/site/content/examples/13-actions/00-actions/App.svelte
@@ -0,0 +1,32 @@
+<script>
+	import { clickOutside } from "./click_outside.js";
+
+	let showModal = true;
+</script>
+
+<button on:click={() => (showModal = true)}>Show Modal</button>
+{#if showModal}
+	<div class="box" use:clickOutside on:outclick={() => (showModal = false)}>
+		Click outside me!
+	</div>
+{/if}
+
+<style>
+	.box {
+		--width: 100px;
+		--height: 100px;
+		position: absolute;
+		width: var(--width);
+		height: var(--height);
+		left: calc(50% - var(--width) / 2);
+		top: calc(50% - var(--height) / 2);
+		display: flex;
+		align-items: center;
+		padding: 8px;
+		border-radius: 4px;
+		background-color: #ff3e00;
+		color: #fff;
+		text-align: center;
+		font-weight: bold;
+	}
+</style>
diff --git a/site/content/examples/13-actions/00-actions/click_outside.js b/site/content/examples/13-actions/00-actions/click_outside.js
new file mode 100644
index 0000000000..e8983c1457
--- /dev/null
+++ b/site/content/examples/13-actions/00-actions/click_outside.js
@@ -0,0 +1,15 @@
+export function clickOutside(node) {
+	const handleClick = (event) => {
+		if (!node.contains(event.target)) {
+			node.dispatchEvent(new CustomEvent("outclick"));
+		}
+	};
+
+	document.addEventListener("click", handleClick, true);
+
+	return {
+		destroy() {
+			document.removeEventListener("click", handleClick, true);
+		}
+	};
+}
diff --git a/site/content/examples/13-actions/00-actions/meta.json b/site/content/examples/13-actions/00-actions/meta.json
new file mode 100644
index 0000000000..463fc963af
--- /dev/null
+++ b/site/content/examples/13-actions/00-actions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "The use directive"
+}
\ No newline at end of file
diff --git a/site/content/examples/13-actions/01-adding-parameters-to-actions/App.svelte b/site/content/examples/13-actions/01-adding-parameters-to-actions/App.svelte
new file mode 100644
index 0000000000..d6eaa0ff12
--- /dev/null
+++ b/site/content/examples/13-actions/01-adding-parameters-to-actions/App.svelte
@@ -0,0 +1,20 @@
+<script>
+	import { longpress } from './longpress.js';
+
+	let pressed = false;
+	let duration = 2000;
+</script>
+
+<label>
+	<input type=range bind:value={duration} max={2000} step={100}>
+	{duration}ms
+</label>
+
+<button use:longpress={duration}
+	on:longpress="{() => pressed = true}"
+	on:mouseenter="{() => pressed = false}"
+>press and hold</button>
+
+{#if pressed}
+	<p>congratulations, you pressed and held for {duration}ms</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/examples/13-actions/01-adding-parameters-to-actions/longpress.js b/site/content/examples/13-actions/01-adding-parameters-to-actions/longpress.js
new file mode 100644
index 0000000000..9d807cb13a
--- /dev/null
+++ b/site/content/examples/13-actions/01-adding-parameters-to-actions/longpress.js
@@ -0,0 +1,28 @@
+export function longpress(node, duration) {
+	let timer;
+	
+	const handleMousedown = () => {
+		timer = setTimeout(() => {
+			node.dispatchEvent(
+				new CustomEvent('longpress')
+			);
+		}, duration);
+	};
+	
+	const handleMouseup = () => {
+		clearTimeout(timer)
+	};
+
+	node.addEventListener('mousedown', handleMousedown);
+	node.addEventListener('mouseup', handleMouseup);
+
+	return {
+		update(newDuration) {
+			duration = newDuration;
+		},
+		destroy() {
+			node.removeEventListener('mousedown', handleMousedown);
+			node.removeEventListener('mouseup', handleMouseup);
+		}
+	};
+}
\ No newline at end of file
diff --git a/site/content/examples/13-actions/01-adding-parameters-to-actions/meta.json b/site/content/examples/13-actions/01-adding-parameters-to-actions/meta.json
new file mode 100644
index 0000000000..517bc54c3c
--- /dev/null
+++ b/site/content/examples/13-actions/01-adding-parameters-to-actions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Adding parameters"
+}
\ No newline at end of file
diff --git a/site/content/examples/13-actions/03-actions-pannable/App.svelte b/site/content/examples/13-actions/03-actions-pannable/App.svelte
new file mode 100644
index 0000000000..4548a5cbb6
--- /dev/null
+++ b/site/content/examples/13-actions/03-actions-pannable/App.svelte
@@ -0,0 +1,51 @@
+<script>
+	import { spring } from 'svelte/motion';
+	import { pannable } from './pannable.js';
+
+	const coords = spring({ x: 0, y: 0 }, {
+		stiffness: 0.2,
+		damping: 0.4
+	});
+
+	function handlePanStart() {
+		coords.stiffness = coords.damping = 1;
+	}
+
+	function handlePanMove(event) {
+		coords.update($coords => ({
+			x: $coords.x + event.detail.dx,
+			y: $coords.y + event.detail.dy
+		}));
+	}
+
+	function handlePanEnd(event) {
+		coords.stiffness = 0.2;
+		coords.damping = 0.4;
+		coords.set({ x: 0, y: 0 });
+	}
+</script>
+
+<div class="box"
+	use:pannable
+	on:panstart={handlePanStart}
+	on:panmove={handlePanMove}
+	on:panend={handlePanEnd}
+	style="transform:
+		translate({$coords.x}px,{$coords.y}px)
+		rotate({$coords.x * 0.2}deg)"
+></div>
+
+<style>
+	.box {
+		--width: 100px;
+		--height: 100px;
+		position: absolute;
+		width: var(--width);
+		height: var(--height);
+		left: calc(50% - var(--width) / 2);
+		top: calc(50% - var(--height) / 2);
+		border-radius: 4px;
+		background-color: #ff3e00;
+		cursor: move;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/13-actions/03-actions-pannable/meta.json b/site/content/examples/13-actions/03-actions-pannable/meta.json
new file mode 100644
index 0000000000..b97be8071f
--- /dev/null
+++ b/site/content/examples/13-actions/03-actions-pannable/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "A more complex action"
+}
\ No newline at end of file
diff --git a/site/content/examples/13-actions/03-actions-pannable/pannable.js b/site/content/examples/13-actions/03-actions-pannable/pannable.js
new file mode 100644
index 0000000000..f7d15328be
--- /dev/null
+++ b/site/content/examples/13-actions/03-actions-pannable/pannable.js
@@ -0,0 +1,47 @@
+export function pannable(node) {
+	let x;
+	let y;
+
+	function handleMousedown(event) {
+		x = event.clientX;
+		y = event.clientY;
+
+		node.dispatchEvent(new CustomEvent('panstart', {
+			detail: { x, y }
+		}));
+
+		window.addEventListener('mousemove', handleMousemove);
+		window.addEventListener('mouseup', handleMouseup);
+	}
+
+	function handleMousemove(event) {
+		const dx = event.clientX - x;
+		const dy = event.clientY - y;
+		x = event.clientX;
+		y = event.clientY;
+
+		node.dispatchEvent(new CustomEvent('panmove', {
+			detail: { x, y, dx, dy }
+		}));
+	}
+
+	function handleMouseup(event) {
+		x = event.clientX;
+		y = event.clientY;
+
+		node.dispatchEvent(new CustomEvent('panend', {
+			detail: { x, y }
+		}));
+
+		window.removeEventListener('mousemove', handleMousemove);
+		window.removeEventListener('mouseup', handleMouseup);
+	}
+
+	node.addEventListener('mousedown', handleMousedown);
+
+	return {
+		destroy() {
+			node.removeEventListener('mousedown', handleMousedown);
+		}
+	};
+}
\ No newline at end of file
diff --git a/site/content/examples/13-actions/meta.json b/site/content/examples/13-actions/meta.json
new file mode 100644
index 0000000000..a154610283
--- /dev/null
+++ b/site/content/examples/13-actions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Actions"
+}
\ No newline at end of file
diff --git a/site/content/examples/14-classes/00-classes/App.svelte b/site/content/examples/14-classes/00-classes/App.svelte
new file mode 100644
index 0000000000..1073242bcf
--- /dev/null
+++ b/site/content/examples/14-classes/00-classes/App.svelte
@@ -0,0 +1,29 @@
+<script>
+	let current = 'foo';
+</script>
+
+<button
+	class:active="{current === 'foo'}"
+	on:click="{() => current = 'foo'}"
+>foo</button>
+
+<button
+	class:active="{current === 'bar'}"
+	on:click="{() => current = 'bar'}"
+>bar</button>
+
+<button
+	class:active="{current === 'baz'}"
+	on:click="{() => current = 'baz'}"
+>baz</button>
+
+<style>
+	button {
+		display: block;
+	}
+
+	.active {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/14-classes/00-classes/meta.json b/site/content/examples/14-classes/00-classes/meta.json
new file mode 100644
index 0000000000..7641cc6a5a
--- /dev/null
+++ b/site/content/examples/14-classes/00-classes/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "The class directive"
+}
\ No newline at end of file
diff --git a/site/content/examples/14-classes/01-class-shorthand/App.svelte b/site/content/examples/14-classes/01-class-shorthand/App.svelte
new file mode 100644
index 0000000000..c91385e4e5
--- /dev/null
+++ b/site/content/examples/14-classes/01-class-shorthand/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	let big = false;
+</script>
+
+<label>
+	<input type=checkbox bind:checked={big}>
+	big
+</label>
+
+<div class:big>
+	some {big ? 'big' : 'small'} text
+</div>
+
+<style>
+	.big {
+		font-size: 4em;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/14-classes/01-class-shorthand/meta.json b/site/content/examples/14-classes/01-class-shorthand/meta.json
new file mode 100644
index 0000000000..72c51bd387
--- /dev/null
+++ b/site/content/examples/14-classes/01-class-shorthand/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Shorthand class directive"
+}
\ No newline at end of file
diff --git a/site/content/examples/14-classes/meta.json b/site/content/examples/14-classes/meta.json
new file mode 100644
index 0000000000..9c2b8a41f6
--- /dev/null
+++ b/site/content/examples/14-classes/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Classes"
+}
\ No newline at end of file
diff --git a/site/content/examples/15-composition/00-slots/App.svelte b/site/content/examples/15-composition/00-slots/App.svelte
new file mode 100644
index 0000000000..cd0ebde935
--- /dev/null
+++ b/site/content/examples/15-composition/00-slots/App.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Box from './Box.svelte';
+</script>
+
+<Box>
+	<h2>Hello!</h2>
+	<p>This is a box. It can contain anything.</p>
+</Box>
\ No newline at end of file
diff --git a/site/content/examples/15-composition/00-slots/Box.svelte b/site/content/examples/15-composition/00-slots/Box.svelte
new file mode 100644
index 0000000000..b17fdbe60d
--- /dev/null
+++ b/site/content/examples/15-composition/00-slots/Box.svelte
@@ -0,0 +1,14 @@
+<div class="box">
+	<slot></slot>
+</div>
+
+<style>
+	.box {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+		margin: 0 0 1em 0;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/15-composition/00-slots/meta.json b/site/content/examples/15-composition/00-slots/meta.json
new file mode 100644
index 0000000000..bd30c8935a
--- /dev/null
+++ b/site/content/examples/15-composition/00-slots/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Slots"
+}
\ No newline at end of file
diff --git a/site/content/examples/15-composition/01-slot-fallbacks/App.svelte b/site/content/examples/15-composition/01-slot-fallbacks/App.svelte
new file mode 100644
index 0000000000..e30be6d1fc
--- /dev/null
+++ b/site/content/examples/15-composition/01-slot-fallbacks/App.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Box from './Box.svelte';
+</script>
+
+<Box>
+	<h2>Hello!</h2>
+	<p>This is a box. It can contain anything.</p>
+</Box>
+
+<Box/>
\ No newline at end of file
diff --git a/site/content/examples/15-composition/01-slot-fallbacks/Box.svelte b/site/content/examples/15-composition/01-slot-fallbacks/Box.svelte
new file mode 100644
index 0000000000..bdaf61b874
--- /dev/null
+++ b/site/content/examples/15-composition/01-slot-fallbacks/Box.svelte
@@ -0,0 +1,16 @@
+<div class="box">
+	<slot>
+		<em>no content was provided</em>
+	</slot>
+</div>
+
+<style>
+	.box {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+		margin: 0 0 1em 0;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/15-composition/01-slot-fallbacks/meta.json b/site/content/examples/15-composition/01-slot-fallbacks/meta.json
new file mode 100644
index 0000000000..26e7fcfb92
--- /dev/null
+++ b/site/content/examples/15-composition/01-slot-fallbacks/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Slot fallbacks"
+}
\ No newline at end of file
diff --git a/site/content/examples/15-composition/02-named-slots/App.svelte b/site/content/examples/15-composition/02-named-slots/App.svelte
new file mode 100644
index 0000000000..620b602eca
--- /dev/null
+++ b/site/content/examples/15-composition/02-named-slots/App.svelte
@@ -0,0 +1,14 @@
+<script>
+	import ContactCard from './ContactCard.svelte';
+</script>
+
+<ContactCard>
+	<span slot="name">
+		P. Sherman
+	</span>
+
+	<span slot="address">
+		42 Wallaby Way<br>
+		Sydney
+	</span>
+</ContactCard>
\ No newline at end of file
diff --git a/site/content/examples/15-composition/02-named-slots/ContactCard.svelte b/site/content/examples/15-composition/02-named-slots/ContactCard.svelte
new file mode 100644
index 0000000000..1068641891
--- /dev/null
+++ b/site/content/examples/15-composition/02-named-slots/ContactCard.svelte
@@ -0,0 +1,47 @@
+<article class="contact-card">
+	<h2>
+		<slot name="name">
+			<span class="missing">Unknown name</span>
+		</slot>
+	</h2>
+
+	<div class="address">
+		<slot name="address">
+			<span class="missing">Unknown address</span>
+		</slot>
+	</div>
+
+	<div class="email">
+		<slot name="email">
+			<span class="missing">Unknown email</span>
+		</slot>
+	</div>
+</article>
+
+<style>
+	.contact-card {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+	}
+
+	h2 {
+		padding: 0 0 0.2em 0;
+		margin: 0 0 1em 0;
+		border-bottom: 1px solid #ff3e00
+	}
+
+	.address, .email {
+		padding: 0 0 0 1.5em;
+		background:  0 0 no-repeat;
+		background-size: 20px 20px;
+		margin: 0 0 0.5em 0;
+		line-height: 1.2;
+	}
+
+	.address { background-image: url(/tutorial/icons/map-marker.svg) }
+	.email   { background-image: url(/tutorial/icons/email.svg) }
+	.missing { color: #999 }
+</style>
diff --git a/site/content/examples/15-composition/02-named-slots/meta.json b/site/content/examples/15-composition/02-named-slots/meta.json
new file mode 100644
index 0000000000..60b82e991c
--- /dev/null
+++ b/site/content/examples/15-composition/02-named-slots/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Named slots"
+}
\ No newline at end of file
diff --git a/site/content/examples/15-composition/03-slot-props/App.svelte b/site/content/examples/15-composition/03-slot-props/App.svelte
new file mode 100644
index 0000000000..299cd336a6
--- /dev/null
+++ b/site/content/examples/15-composition/03-slot-props/App.svelte
@@ -0,0 +1,46 @@
+<script>
+	import Hoverable from './Hoverable.svelte';
+</script>
+
+<Hoverable let:hovering={active}>
+	<div class:active>
+		{#if active}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
+
+<Hoverable let:hovering={active}>
+	<div class:active>
+		{#if active}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
+
+<Hoverable let:hovering={active}>
+	<div class:active>
+		{#if active}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
+
+<style>
+	div {
+		padding: 1em;
+		margin: 0 0 1em 0;
+		background-color: #eee;
+	}
+
+	.active {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/15-composition/03-slot-props/Hoverable.svelte b/site/content/examples/15-composition/03-slot-props/Hoverable.svelte
new file mode 100644
index 0000000000..69f2fc8ef6
--- /dev/null
+++ b/site/content/examples/15-composition/03-slot-props/Hoverable.svelte
@@ -0,0 +1,15 @@
+<script>
+	let hovering;
+
+	function enter() {
+		hovering = true;
+	}
+
+	function leave() {
+		hovering = false;
+	}
+</script>
+
+<div on:mouseenter={enter} on:mouseleave={leave}>
+	<slot hovering={hovering}></slot>
+</div>
\ No newline at end of file
diff --git a/site/content/examples/15-composition/03-slot-props/meta.json b/site/content/examples/15-composition/03-slot-props/meta.json
new file mode 100644
index 0000000000..74e2ff197c
--- /dev/null
+++ b/site/content/examples/15-composition/03-slot-props/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Slot props"
+}
\ No newline at end of file
diff --git a/site/content/examples/15-composition/04-conditional-slots/App.svelte b/site/content/examples/15-composition/04-conditional-slots/App.svelte
new file mode 100644
index 0000000000..69142b807d
--- /dev/null
+++ b/site/content/examples/15-composition/04-conditional-slots/App.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Profile from "./Profile.svelte";
+</script>
+
+<Profile>
+	<span slot="name">Bob</span>
+	<span slot="email">bob@email.com</span>
+</Profile>
+
+<Profile>
+	<span slot="name">Alice</span>
+	<span slot="phone">12345678</span>
+</Profile>
diff --git a/site/content/examples/15-composition/04-conditional-slots/Profile.svelte b/site/content/examples/15-composition/04-conditional-slots/Profile.svelte
new file mode 100644
index 0000000000..834c23dc14
--- /dev/null
+++ b/site/content/examples/15-composition/04-conditional-slots/Profile.svelte
@@ -0,0 +1,24 @@
+<section>
+	<div>Name</div>
+	<slot name="name" />
+	{#if $$slots.email}
+		<div>Email</div>
+		<slot name="email" />
+	{/if}
+	{#if $$slots.phone}
+		<div>Phone</div>
+		<slot name="phone" />
+	{/if}
+</section>
+
+<style>
+	section {
+		width: 200px;
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		padding: 16px;
+		box-shadow: 2px 2px 4px #dedede;
+		border: 1px solid #888;
+		margin-bottom: 16px;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/15-composition/04-conditional-slots/meta.json b/site/content/examples/15-composition/04-conditional-slots/meta.json
new file mode 100644
index 0000000000..95809f4c93
--- /dev/null
+++ b/site/content/examples/15-composition/04-conditional-slots/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Conditional Slots"
+}
\ No newline at end of file
diff --git a/site/content/examples/15-composition/05-modal/App.svelte b/site/content/examples/15-composition/05-modal/App.svelte
new file mode 100644
index 0000000000..cfd3856447
--- /dev/null
+++ b/site/content/examples/15-composition/05-modal/App.svelte
@@ -0,0 +1,29 @@
+<script>
+	import Modal from './Modal.svelte';
+
+	let showModal = false;
+</script>
+
+<button on:click="{() => showModal = true}">
+	show modal
+</button>
+
+{#if showModal}
+	<Modal on:close="{() => showModal = false}">
+		<h2 slot="header">
+			modal
+			<small><em>adjective</em>  mod·al \ˈmō-dəl\</small>
+		</h2>
+
+		<ol class="definition-list">
+			<li>of or relating to modality in logic</li>
+			<li>containing provisions as to the mode of procedure or the manner of taking effect —used of a contract or legacy</li>
+			<li>of or relating to a musical mode</li>
+			<li>of or relating to structure as opposed to substance</li>
+			<li>of, relating to, or constituting a grammatical form or category characteristically indicating predication</li>
+			<li>of or relating to a statistical mode</li>
+		</ol>
+
+		<a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>
+	</Modal>
+{/if}
diff --git a/site/content/examples/15-composition/05-modal/Modal.svelte b/site/content/examples/15-composition/05-modal/Modal.svelte
new file mode 100644
index 0000000000..baa57824bc
--- /dev/null
+++ b/site/content/examples/15-composition/05-modal/Modal.svelte
@@ -0,0 +1,81 @@
+<script>
+	import { createEventDispatcher, onDestroy } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+	const close = () => dispatch('close');
+
+	let modal;
+
+	const handle_keydown = e => {
+		if (e.key === 'Escape') {
+			close();
+			return;
+		}
+
+		if (e.key === 'Tab') {
+			// trap focus
+			const nodes = modal.querySelectorAll('*');
+			const tabbable = Array.from(nodes).filter(n => n.tabIndex >= 0);
+
+			let index = tabbable.indexOf(document.activeElement);
+			if (index === -1 && e.shiftKey) index = 0;
+
+			index += tabbable.length + (e.shiftKey ? -1 : 1);
+			index %= tabbable.length;
+
+			tabbable[index].focus();
+			e.preventDefault();
+		}
+	};
+
+	const previously_focused = typeof document !== 'undefined' && document.activeElement;
+
+	if (previously_focused) {
+		onDestroy(() => {
+			previously_focused.focus();
+		});
+	}
+</script>
+
+<svelte:window on:keydown={handle_keydown}/>
+
+<div class="modal-background" on:click={close}></div>
+
+<div class="modal" role="dialog" aria-modal="true" bind:this={modal}>
+	<slot name="header"></slot>
+	<hr>
+	<slot></slot>
+	<hr>
+
+	<!-- svelte-ignore a11y-autofocus -->
+	<button autofocus on:click={close}>close modal</button>
+</div>
+
+<style>
+	.modal-background {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: rgba(0,0,0,0.3);
+	}
+
+	.modal {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		width: calc(100vw - 4em);
+		max-width: 32em;
+		max-height: calc(100vh - 4em);
+		overflow: auto;
+		transform: translate(-50%,-50%);
+		padding: 1em;
+		border-radius: 0.2em;
+		background: white;
+	}
+
+	button {
+		display: block;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/15-composition/05-modal/meta.json b/site/content/examples/15-composition/05-modal/meta.json
new file mode 100644
index 0000000000..c39791fcf6
--- /dev/null
+++ b/site/content/examples/15-composition/05-modal/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Modal"
+}
\ No newline at end of file
diff --git a/site/content/examples/15-composition/meta.json b/site/content/examples/15-composition/meta.json
new file mode 100644
index 0000000000..54cf2db82d
--- /dev/null
+++ b/site/content/examples/15-composition/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Component composition"
+}
\ No newline at end of file
diff --git a/site/content/examples/16-context/00-context-api/App.svelte b/site/content/examples/16-context/00-context-api/App.svelte
new file mode 100644
index 0000000000..ea1ba4c7ae
--- /dev/null
+++ b/site/content/examples/16-context/00-context-api/App.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Map from './Map.svelte';
+	import MapMarker from './MapMarker.svelte';
+</script>
+
+<Map lat={35} lon={-84} zoom={3.5}>
+	<MapMarker lat={37.8225} lon={-122.0024} label="Svelte Body Shaping"/>
+	<MapMarker lat={33.8981} lon={-118.4169} label="Svelte Barbershop & Essentials"/>
+	<MapMarker lat={29.7230} lon={-95.4189} label="Svelte Waxing Studio"/>
+	<MapMarker lat={28.3378} lon={-81.3966} label="Svelte 30 Nutritional Consultants"/>
+	<MapMarker lat={40.6483} lon={-74.0237} label="Svelte Brands LLC"/>
+	<MapMarker lat={40.6986} lon={-74.4100} label="Svelte Medical Systems"/>
+</Map>
\ No newline at end of file
diff --git a/site/content/examples/16-context/00-context-api/Map.svelte b/site/content/examples/16-context/00-context-api/Map.svelte
new file mode 100644
index 0000000000..99aead054b
--- /dev/null
+++ b/site/content/examples/16-context/00-context-api/Map.svelte
@@ -0,0 +1,49 @@
+<script>
+	import { onDestroy, setContext } from 'svelte';
+	import { mapbox, key } from './mapbox.js';
+
+	setContext(key, {
+		getMap: () => map,
+	});
+
+	export let lat;
+	export let lon;
+	export let zoom;
+
+	let container;
+	let map;
+
+	function load() {
+		map = new mapbox.Map({
+			container,
+			style: 'mapbox://styles/mapbox/streets-v9',
+			center: [lon, lat],
+			zoom,
+		});
+	}
+
+	onDestroy(() => {
+		if (map) map.remove();
+	});
+</script>
+
+<svelte:head>
+	<link
+		rel="stylesheet"
+		href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css"
+		on:load={load}
+	/>
+</svelte:head>
+
+<div bind:this={container}>
+	{#if map}
+		<slot />
+	{/if}
+</div>
+
+<style>
+	div {
+		width: 100%;
+		height: 100%;
+	}
+</style>
diff --git a/site/content/examples/16-context/00-context-api/MapMarker.svelte b/site/content/examples/16-context/00-context-api/MapMarker.svelte
new file mode 100644
index 0000000000..c936652507
--- /dev/null
+++ b/site/content/examples/16-context/00-context-api/MapMarker.svelte
@@ -0,0 +1,19 @@
+<script>
+	import { getContext } from 'svelte';
+	import { mapbox, key } from './mapbox.js';
+
+	const { getMap } = getContext(key);
+	const map = getMap();
+
+	export let lat;
+	export let lon;
+	export let label;
+
+	const popup = new mapbox.Popup({ offset: 25 })
+		.setText(label);
+
+	const marker = new mapbox.Marker()
+		.setLngLat([lon, lat])
+		.setPopup(popup)
+		.addTo(map);
+</script>
\ No newline at end of file
diff --git a/site/content/examples/16-context/00-context-api/mapbox.js b/site/content/examples/16-context/00-context-api/mapbox.js
new file mode 100644
index 0000000000..55b4200038
--- /dev/null
+++ b/site/content/examples/16-context/00-context-api/mapbox.js
@@ -0,0 +1,8 @@
+import mapbox from 'mapbox-gl';
+
+// https://docs.mapbox.com/help/glossary/access-token/
+mapbox.accessToken = MAPBOX_ACCESS_TOKEN;
+
+const key = {};
+
+export { mapbox, key };
\ No newline at end of file
diff --git a/site/content/examples/16-context/00-context-api/meta.json b/site/content/examples/16-context/00-context-api/meta.json
new file mode 100644
index 0000000000..2601c87cae
--- /dev/null
+++ b/site/content/examples/16-context/00-context-api/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "setContext and getContext"
+}
\ No newline at end of file
diff --git a/site/content/examples/16-context/meta.json b/site/content/examples/16-context/meta.json
new file mode 100644
index 0000000000..d3bd862676
--- /dev/null
+++ b/site/content/examples/16-context/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Context API"
+}
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/00-svelte-self/App.svelte b/site/content/examples/17-special-elements/00-svelte-self/App.svelte
new file mode 100644
index 0000000000..ff02fa6a42
--- /dev/null
+++ b/site/content/examples/17-special-elements/00-svelte-self/App.svelte
@@ -0,0 +1,41 @@
+<script>
+	import Folder from './Folder.svelte';
+
+	let root = [
+		{
+			type: 'folder',
+			name: 'Important work stuff',
+			files: [
+				{ type: 'file', name: 'quarterly-results.xlsx' }
+			]
+		},
+		{
+			type: 'folder',
+			name: 'Animal GIFs',
+			files: [
+				{
+					type: 'folder',
+					name: 'Dogs',
+					files: [
+						{ type: 'file', name: 'treadmill.gif' },
+						{ type: 'file', name: 'rope-jumping.gif' }
+					]
+				},
+				{
+					type: 'folder',
+					name: 'Goats',
+					files: [
+						{ type: 'file', name: 'parkour.gif' },
+						{ type: 'file', name: 'rampage.gif' }
+					]
+				},
+				{ type: 'file', name: 'cat-roomba.gif' },
+				{ type: 'file', name: 'duck-shuffle.gif' },
+				{ type: 'file', name: 'monkey-on-a-pig.gif' }
+			]
+		},
+		{ type: 'file', name: 'TODO.md' }
+	];
+</script>
+
+<Folder name="Home" files={root} expanded/>
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/00-svelte-self/File.svelte b/site/content/examples/17-special-elements/00-svelte-self/File.svelte
new file mode 100644
index 0000000000..e769ab4841
--- /dev/null
+++ b/site/content/examples/17-special-elements/00-svelte-self/File.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let name;
+	$: type = name.slice(name.lastIndexOf('.') + 1);
+</script>
+
+<span style="background-image: url(/tutorial/icons/{type}.svg)">{name}</span>
+
+<style>
+	span {
+		padding: 0 0 0 1.5em;
+		background: 0 0.1em no-repeat;
+		background-size: 1em 1em;
+	}
+</style>
diff --git a/site/content/examples/17-special-elements/00-svelte-self/Folder.svelte b/site/content/examples/17-special-elements/00-svelte-self/Folder.svelte
new file mode 100644
index 0000000000..7e9f667dd2
--- /dev/null
+++ b/site/content/examples/17-special-elements/00-svelte-self/Folder.svelte
@@ -0,0 +1,53 @@
+<script>
+	import File from './File.svelte';
+	import {slide} from 'svelte/transition'
+	
+	export let expanded = false;
+	export let name;
+	export let files;
+
+	function toggle() {
+		expanded = !expanded;
+	}
+</script>
+
+<span class:expanded on:click={toggle}>{name}</span>
+
+{#if expanded}
+	<ul transition:slide={{duration:300}}>
+		{#each files as file}
+			<li>
+				{#if file.type === 'folder'}
+					<svelte:self {...file}/>
+				{:else}
+					<File {...file}/>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+{/if}
+
+<style>
+	span {
+		padding: 0 0 0 1.5em;
+		background: url(/tutorial/icons/folder.svg) 0 0.1em no-repeat;
+		background-size: 1em 1em;
+		font-weight: bold;
+		cursor: pointer;
+	}
+
+	.expanded {
+		background-image: url(/tutorial/icons/folder-open.svg);
+	}
+
+	ul {
+		padding: 0.2em 0 0 0.5em;
+		margin: 0 0 0 0.5em;
+		list-style: none;
+		border-left: 1px solid #eee;
+	}
+
+	li {
+		padding: 0.2em 0;
+	}
+</style>
diff --git a/site/content/examples/17-special-elements/00-svelte-self/meta.json b/site/content/examples/17-special-elements/00-svelte-self/meta.json
new file mode 100644
index 0000000000..14485d7cee
--- /dev/null
+++ b/site/content/examples/17-special-elements/00-svelte-self/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "<svelte:self>"
+}
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/01-svelte-component/App.svelte b/site/content/examples/17-special-elements/01-svelte-component/App.svelte
new file mode 100644
index 0000000000..a510fa8ad8
--- /dev/null
+++ b/site/content/examples/17-special-elements/01-svelte-component/App.svelte
@@ -0,0 +1,21 @@
+<script>
+	import RedThing from './RedThing.svelte';
+	import GreenThing from './GreenThing.svelte';
+	import BlueThing from './BlueThing.svelte';
+
+	const options = [
+		{ color: 'red',   component: RedThing   },
+		{ color: 'green', component: GreenThing },
+		{ color: 'blue',  component: BlueThing  },
+	];
+
+	let selected = options[0];
+</script>
+
+<select bind:value={selected}>
+	{#each options as option}
+		<option value={option}>{option.color}</option>
+	{/each}
+</select>
+
+<svelte:component this={selected.component}/>
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/01-svelte-component/BlueThing.svelte b/site/content/examples/17-special-elements/01-svelte-component/BlueThing.svelte
new file mode 100644
index 0000000000..eb7ba64163
--- /dev/null
+++ b/site/content/examples/17-special-elements/01-svelte-component/BlueThing.svelte
@@ -0,0 +1,7 @@
+<strong>Blue thing</strong>
+
+<style>
+	strong {
+		color: blue;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/01-svelte-component/GreenThing.svelte b/site/content/examples/17-special-elements/01-svelte-component/GreenThing.svelte
new file mode 100644
index 0000000000..ed2aa49f27
--- /dev/null
+++ b/site/content/examples/17-special-elements/01-svelte-component/GreenThing.svelte
@@ -0,0 +1,7 @@
+<strong>Green thing</strong>
+
+<style>
+	strong {
+		color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/01-svelte-component/RedThing.svelte b/site/content/examples/17-special-elements/01-svelte-component/RedThing.svelte
new file mode 100644
index 0000000000..365f226492
--- /dev/null
+++ b/site/content/examples/17-special-elements/01-svelte-component/RedThing.svelte
@@ -0,0 +1,7 @@
+<strong>Red thing</strong>
+
+<style>
+	strong {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/01-svelte-component/meta.json b/site/content/examples/17-special-elements/01-svelte-component/meta.json
new file mode 100644
index 0000000000..bb3675d5e5
--- /dev/null
+++ b/site/content/examples/17-special-elements/01-svelte-component/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "<svelte:component>"
+}
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/02-svelte-element/App.svelte b/site/content/examples/17-special-elements/02-svelte-element/App.svelte
new file mode 100644
index 0000000000..068f7b3c4f
--- /dev/null
+++ b/site/content/examples/17-special-elements/02-svelte-element/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	const options = ['h1', 'h3', 'p'];
+	let selected = options[0];
+</script>
+
+<select bind:value={selected}>
+	{#each options as option}
+		<option value={option}>{option}</option>
+	{/each}
+</select>
+
+<svelte:element this={selected}>I'm a {selected} tag</svelte:element>
diff --git a/site/content/examples/17-special-elements/02-svelte-element/meta.json b/site/content/examples/17-special-elements/02-svelte-element/meta.json
new file mode 100644
index 0000000000..4ff15b716f
--- /dev/null
+++ b/site/content/examples/17-special-elements/02-svelte-element/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "<svelte:element>"
+}
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/03-svelte-window/App.svelte b/site/content/examples/17-special-elements/03-svelte-window/App.svelte
new file mode 100644
index 0000000000..8452f160b0
--- /dev/null
+++ b/site/content/examples/17-special-elements/03-svelte-window/App.svelte
@@ -0,0 +1,42 @@
+<script>
+	let key;
+	let keyCode;
+
+	function handleKeydown(event) {
+		key = event.key;
+		keyCode = event.keyCode;
+	}
+</script>
+
+<svelte:window on:keydown={handleKeydown}/>
+
+<div style="text-align: center">
+	{#if key}
+		<kbd>{key === ' ' ? 'Space' : key}</kbd>
+		<p>{keyCode}</p>
+	{:else}
+		<p>Focus this window and press any key</p>
+	{/if}
+</div>
+
+<style>
+	div {
+		display: flex;
+		height: 100%;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+	}
+
+	kbd {
+		background-color: #eee;
+		border-radius: 4px;
+		font-size: 6em;
+		padding: 0.2em 0.5em;
+		border-top: 5px solid rgba(255,255,255,0.5);
+		border-left: 5px solid rgba(255,255,255,0.5);
+		border-right: 5px solid rgba(0,0,0,0.2);
+		border-bottom: 5px solid rgba(0,0,0,0.2);
+		color: #555;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/03-svelte-window/meta.json b/site/content/examples/17-special-elements/03-svelte-window/meta.json
new file mode 100644
index 0000000000..18357e9ef9
--- /dev/null
+++ b/site/content/examples/17-special-elements/03-svelte-window/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "<svelte:window>"
+}
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/04-svelte-window-bindings/App.svelte b/site/content/examples/17-special-elements/04-svelte-window-bindings/App.svelte
new file mode 100644
index 0000000000..15c2aa0ebc
--- /dev/null
+++ b/site/content/examples/17-special-elements/04-svelte-window-bindings/App.svelte
@@ -0,0 +1,88 @@
+<script>
+	const layers = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+
+	let y;
+</script>
+
+<svelte:window bind:scrollY={y}/>
+
+<a class="parallax-container" href="https://www.firewatchgame.com">
+	{#each layers as layer}
+		<img
+			style="transform: translate(0,{-y * layer / (layers.length - 1)}px)"
+			src="https://www.firewatchgame.com/images/parallax/parallax{layer}.png"
+			alt="parallax layer {layer}"
+		>
+	{/each}
+</a>
+
+<div class="text">
+	<span style="opacity: {1 - Math.max(0, y / 40)}">
+		scroll down
+	</span>
+
+	<div class="foreground">
+		You have scrolled {y} pixels
+	</div>
+</div>
+
+<style>
+	.parallax-container {
+		position: fixed;
+		width: 2400px;
+		height: 712px;
+		left: 50%;
+		transform: translate(-50%,0);
+	}
+
+	.parallax-container img {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		will-change: transform;
+	}
+
+	.parallax-container img:last-child::after {
+		content: '';
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		background: rgb(45,10,13);
+	}
+
+	.text {
+		position: relative;
+		width: 100%;
+		height: 300vh;
+		color: rgb(220,113,43);
+		text-align: center;
+		padding: 4em 0.5em 0.5em 0.5em;
+		box-sizing: border-box;
+		pointer-events: none;
+	}
+
+	span {
+		display: block;
+		font-size: 1em;
+		text-transform: uppercase;
+		will-change: transform, opacity;
+	}
+
+	.foreground {
+		position: absolute;
+		top: 711px;
+		left: 0;
+		width: 100%;
+		height: calc(100% - 712px);
+		background-color: rgb(32,0,1);
+		color: white;
+		padding: 50vh 0 0 0;
+	}
+
+	:global(body) {
+		margin: 0;
+		padding: 0;
+		background-color: rgb(253, 174, 51);
+	}
+</style>
diff --git a/site/content/examples/17-special-elements/04-svelte-window-bindings/meta.json b/site/content/examples/17-special-elements/04-svelte-window-bindings/meta.json
new file mode 100644
index 0000000000..9903a804bb
--- /dev/null
+++ b/site/content/examples/17-special-elements/04-svelte-window-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "<svelte:window> bindings"
+}
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/05-svelte-body/App.svelte b/site/content/examples/17-special-elements/05-svelte-body/App.svelte
new file mode 100644
index 0000000000..fddc8f8d0a
--- /dev/null
+++ b/site/content/examples/17-special-elements/05-svelte-body/App.svelte
@@ -0,0 +1,37 @@
+<script>
+	let hereKitty = false;
+
+	const handleMouseenter = () => hereKitty = true;
+	const handleMouseleave = () => hereKitty = false;
+</script>
+
+<svelte:body
+	on:mouseenter={handleMouseenter}
+	on:mouseleave={handleMouseleave}
+/>
+
+<!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
+<img
+	class:curious={hereKitty}
+	alt="Kitten wants to know what's going on"
+	src="/tutorial/kitten.png"
+>
+
+<style>
+	img {
+		position: absolute;
+		left: 0;
+		bottom: -60px;
+		transform: translate(-80%, 0) rotate(-30deg);
+		transform-origin: 100% 100%;
+		transition: transform 0.4s;
+	}
+
+	.curious {
+		transform: translate(-15%, 0) rotate(0deg);
+	}
+
+	:global(body) {
+		overflow: hidden;
+	}
+</style>
diff --git a/site/content/examples/17-special-elements/05-svelte-body/meta.json b/site/content/examples/17-special-elements/05-svelte-body/meta.json
new file mode 100644
index 0000000000..a140d2c168
--- /dev/null
+++ b/site/content/examples/17-special-elements/05-svelte-body/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "<svelte:body>"
+}
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/06-svelte-head/App.svelte b/site/content/examples/17-special-elements/06-svelte-head/App.svelte
new file mode 100644
index 0000000000..8323b56ad0
--- /dev/null
+++ b/site/content/examples/17-special-elements/06-svelte-head/App.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+	<link rel="stylesheet" href="/tutorial/dark-theme.css">
+</svelte:head>
+
+<h1>Hello world!</h1>
diff --git a/site/content/examples/17-special-elements/06-svelte-head/meta.json b/site/content/examples/17-special-elements/06-svelte-head/meta.json
new file mode 100644
index 0000000000..d35a752d15
--- /dev/null
+++ b/site/content/examples/17-special-elements/06-svelte-head/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "<svelte:head>"
+}
\ No newline at end of file
diff --git a/site/content/examples/17-special-elements/meta.json b/site/content/examples/17-special-elements/meta.json
new file mode 100644
index 0000000000..2718c14b59
--- /dev/null
+++ b/site/content/examples/17-special-elements/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Special elements"
+}
\ No newline at end of file
diff --git a/site/content/examples/18-module-context/01-module-exports/App.svelte b/site/content/examples/18-module-context/01-module-exports/App.svelte
new file mode 100644
index 0000000000..1d5d94b5d1
--- /dev/null
+++ b/site/content/examples/18-module-context/01-module-exports/App.svelte
@@ -0,0 +1,47 @@
+<script>
+	import AudioPlayer, { stopAll } from './AudioPlayer.svelte';
+</script>
+
+<button on:click={stopAll}>
+	stop all audio
+</button>
+
+<!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/strauss.mp3"
+	title="The Blue Danube Waltz"
+	composer="Johann Strauss"
+	performer="European Archive"
+/>
+
+<!-- https://musopen.org/music/43775-the-planets-op-32/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/holst.mp3"
+	title="Mars, the Bringer of War"
+	composer="Gustav Holst"
+	performer="USAF Heritage of America Band"
+/>
+
+<!-- https://musopen.org/music/8010-3-gymnopedies/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/satie.mp3"
+	title="Gymnopédie no. 1"
+	composer="Erik Satie"
+	performer="Prodigal Procrastinator"
+/>
+
+<!-- https://musopen.org/music/2567-symphony-no-5-in-c-minor-op-67/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/beethoven.mp3"
+	title="Symphony no. 5 in Cm, Op. 67 - I. Allegro con brio"
+	composer="Ludwig van Beethoven"
+	performer="European Archive"
+/>
+
+<!-- https://musopen.org/music/43683-requiem-in-d-minor-k-626/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/mozart.mp3"
+	title="Requiem in D minor, K. 626 - III. Sequence - Lacrymosa"
+	composer="Wolfgang Amadeus Mozart"
+	performer="Markus Staab"
+/>
diff --git a/site/content/examples/18-module-context/01-module-exports/AudioPlayer.svelte b/site/content/examples/18-module-context/01-module-exports/AudioPlayer.svelte
new file mode 100644
index 0000000000..561c7094a4
--- /dev/null
+++ b/site/content/examples/18-module-context/01-module-exports/AudioPlayer.svelte
@@ -0,0 +1,52 @@
+<script context="module">
+	const elements = new Set();
+
+	export function stopAll() {
+		elements.forEach(element => {
+			element.pause();
+		});
+	}
+</script>
+
+<script>
+	import { onMount } from 'svelte';
+
+	export let src;
+	export let title;
+	export let composer;
+	export let performer;
+
+	let audio;
+	let paused = true;
+
+	onMount(() => {
+		elements.add(audio);
+		return () => elements.delete(audio);
+	});
+
+	function stopOthers() {
+		elements.forEach(element => {
+			if (element !== audio) element.pause();
+		});
+	}
+</script>
+
+<article class:playing={!paused}>
+	<h2>{title}</h2>
+	<p><strong>{composer}</strong> / performed by {performer}</p>
+
+	<audio
+		bind:this={audio}
+		bind:paused
+		on:play={stopOthers}
+		controls
+		{src}
+	></audio>
+</article>
+
+<style>
+	article { margin: 0 0 1em 0; max-width: 800px }
+	h2, p { margin: 0 0 0.3em 0; }
+	audio { width: 100%; margin: 0.5em 0 1em 0; }
+	.playing { color: #ff3e00; }
+</style>
\ No newline at end of file
diff --git a/site/content/examples/18-module-context/01-module-exports/meta.json b/site/content/examples/18-module-context/01-module-exports/meta.json
new file mode 100644
index 0000000000..2de21f2379
--- /dev/null
+++ b/site/content/examples/18-module-context/01-module-exports/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Named exports"
+}
\ No newline at end of file
diff --git a/site/content/examples/18-module-context/meta.json b/site/content/examples/18-module-context/meta.json
new file mode 100644
index 0000000000..1a8720e2ce
--- /dev/null
+++ b/site/content/examples/18-module-context/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Module context"
+}
\ No newline at end of file
diff --git a/site/content/examples/19-debugging/00-debug/App.svelte b/site/content/examples/19-debugging/00-debug/App.svelte
new file mode 100644
index 0000000000..1b91ac740b
--- /dev/null
+++ b/site/content/examples/19-debugging/00-debug/App.svelte
@@ -0,0 +1,13 @@
+<script>
+	let user = {
+		firstname: 'Ada',
+		lastname: 'Lovelace'
+	};
+</script>
+
+<input bind:value={user.firstname}>
+<input bind:value={user.lastname}>
+
+{@debug user}
+
+<h1>Hello {user.firstname}!</h1>
\ No newline at end of file
diff --git a/site/content/examples/19-debugging/00-debug/meta.json b/site/content/examples/19-debugging/00-debug/meta.json
new file mode 100644
index 0000000000..44ad769024
--- /dev/null
+++ b/site/content/examples/19-debugging/00-debug/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "The @debug tag"
+}
\ No newline at end of file
diff --git a/site/content/examples/19-debugging/meta.json b/site/content/examples/19-debugging/meta.json
new file mode 100644
index 0000000000..5eeed281d3
--- /dev/null
+++ b/site/content/examples/19-debugging/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Debugging"
+}
\ No newline at end of file
diff --git a/site/content/examples/20-7guis/01-7guis-counter/App.svelte b/site/content/examples/20-7guis/01-7guis-counter/App.svelte
new file mode 100644
index 0000000000..832891b735
--- /dev/null
+++ b/site/content/examples/20-7guis/01-7guis-counter/App.svelte
@@ -0,0 +1,7 @@
+<!-- https://eugenkiss.github.io/7guis/tasks#counter -->
+<script>
+	let count = 0;
+</script>
+
+<input type=number bind:value={count}>
+<button on:click="{() => count += 1}">count</button>
\ No newline at end of file
diff --git a/site/content/examples/20-7guis/01-7guis-counter/meta.json b/site/content/examples/20-7guis/01-7guis-counter/meta.json
new file mode 100644
index 0000000000..a3c3ba33c2
--- /dev/null
+++ b/site/content/examples/20-7guis/01-7guis-counter/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Counter"
+}
\ No newline at end of file
diff --git a/site/content/examples/20-7guis/02-7guis-temperature/App.svelte b/site/content/examples/20-7guis/02-7guis-temperature/App.svelte
new file mode 100644
index 0000000000..a98a5fd06c
--- /dev/null
+++ b/site/content/examples/20-7guis/02-7guis-temperature/App.svelte
@@ -0,0 +1,24 @@
+<script>
+	let c = 0;
+	let f = 32;
+
+	function setBothFromC(value) {
+		c = +value;
+		f = +(32 + (9 / 5 * c)).toFixed(1);
+	}
+
+	function setBothFromF(value) {
+		f = +value;
+		c =+(5 / 9 * (f - 32)).toFixed(1);
+	}
+</script>
+
+<!-- https://eugenkiss.github.io/7guis/tasks/#temp -->
+<input value={c} on:input="{e => setBothFromC(e.target.value)}" type=number> °C =
+<input value={f} on:input="{e => setBothFromF(e.target.value)}" type=number> °F
+
+<style>
+	input {
+		width: 5em;
+	}
+</style>
diff --git a/site/content/examples/20-7guis/02-7guis-temperature/meta.json b/site/content/examples/20-7guis/02-7guis-temperature/meta.json
new file mode 100644
index 0000000000..3a578f3887
--- /dev/null
+++ b/site/content/examples/20-7guis/02-7guis-temperature/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Temperature Converter"
+}
\ No newline at end of file
diff --git a/site/content/examples/20-7guis/03-7guis-flight-booker/App.svelte b/site/content/examples/20-7guis/03-7guis-flight-booker/App.svelte
new file mode 100644
index 0000000000..f9484aa360
--- /dev/null
+++ b/site/content/examples/20-7guis/03-7guis-flight-booker/App.svelte
@@ -0,0 +1,59 @@
+<!-- https://eugenkiss.github.io/7guis/tasks/#flight -->
+<script>
+	const tomorrow = new Date(Date.now() + 86400000);
+
+	let start = [
+		tomorrow.getFullYear(),
+		pad(tomorrow.getMonth() + 1, 2),
+		pad(tomorrow.getDate(), 2)
+	].join('-');
+
+	let end = start;
+	let isReturn = false;
+
+	$: startDate = convertToDate(start);
+	$: endDate = convertToDate(end);
+
+	function bookFlight() {
+		const type = isReturn ? 'return' : 'one-way';
+
+		let message = `You have booked a ${type} flight, leaving ${startDate.toDateString()}`;
+		if (type === 'return') {
+			message += ` and returning ${endDate.toDateString()}`;
+		}
+
+		alert(message);
+	}
+
+	function convertToDate(str) {
+		const split = str.split('-');
+		return new Date(+split[0], +split[1] - 1, +split[2]);
+	}
+
+	function pad(x, len) {
+		x = String(x);
+		while (x.length < len) x = `0${x}`;
+		return x;
+	}
+</script>
+
+<select bind:value={isReturn}>
+	<option value={false}>one-way flight</option>
+	<option value={true}>return flight</option>
+</select>
+
+<input type=date bind:value={start}>
+<input type=date bind:value={end} disabled={!isReturn}>
+
+<button
+	on:click={bookFlight}
+	disabled="{isReturn && (startDate >= endDate)}"
+>book</button>
+
+<style>
+	select, input, button {
+		display: block;
+		margin: 0.5em 0;
+		font-size: inherit;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/20-7guis/03-7guis-flight-booker/meta.json b/site/content/examples/20-7guis/03-7guis-flight-booker/meta.json
new file mode 100644
index 0000000000..8f546a740c
--- /dev/null
+++ b/site/content/examples/20-7guis/03-7guis-flight-booker/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Flight booker"
+}
\ No newline at end of file
diff --git a/site/content/examples/20-7guis/04-7guis-timer/App.svelte b/site/content/examples/20-7guis/04-7guis-timer/App.svelte
new file mode 100644
index 0000000000..47afd6c48b
--- /dev/null
+++ b/site/content/examples/20-7guis/04-7guis-timer/App.svelte
@@ -0,0 +1,41 @@
+<!-- https://eugenkiss.github.io/7guis/tasks#timer -->
+
+<script>
+	import { onDestroy } from 'svelte';
+
+	let elapsed = 0;
+	let duration = 5000;
+
+	let last_time = window.performance.now();
+	let frame;
+
+	(function update() {
+		frame = requestAnimationFrame(update);
+
+		const time = window.performance.now();
+		elapsed += Math.min(
+			time - last_time,
+			duration - elapsed
+		);
+
+		last_time = time;
+	}());
+
+	onDestroy(() => {
+		cancelAnimationFrame(frame);
+	});
+</script>
+
+<label>
+	elapsed time:
+	<progress value="{elapsed / duration}"></progress>
+</label>
+
+<div>{(elapsed / 1000).toFixed(1)}s</div>
+
+<label>
+	duration:
+	<input type="range" bind:value={duration} min="1" max="20000">
+</label>
+
+<button on:click="{() => elapsed = 0}">reset</button>
\ No newline at end of file
diff --git a/site/content/examples/20-7guis/04-7guis-timer/meta.json b/site/content/examples/20-7guis/04-7guis-timer/meta.json
new file mode 100644
index 0000000000..516b8bc3c2
--- /dev/null
+++ b/site/content/examples/20-7guis/04-7guis-timer/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Timer"
+}
\ No newline at end of file
diff --git a/site/content/examples/20-7guis/05-7guis-crud/App.svelte b/site/content/examples/20-7guis/05-7guis-crud/App.svelte
new file mode 100644
index 0000000000..5097eebe26
--- /dev/null
+++ b/site/content/examples/20-7guis/05-7guis-crud/App.svelte
@@ -0,0 +1,90 @@
+<!-- https://eugenkiss.github.io/7guis/tasks#crud -->
+
+<script>
+	let people = [
+		{ first: 'Hans', last: 'Emil' },
+		{ first: 'Max', last: 'Mustermann' },
+		{ first: 'Roman', last: 'Tisch' }
+	];
+
+	let prefix = '';
+	let first = '';
+	let last = '';
+	let i = 0;
+
+	$: filteredPeople = prefix
+		? people.filter(person => {
+			const name = `${person.last}, ${person.first}`;
+			return name.toLowerCase().startsWith(prefix.toLowerCase());
+		})
+		: people;
+
+	$: selected = filteredPeople[i];
+
+	$: reset_inputs(selected);
+
+	function create() {
+		people = people.concat({ first, last });
+		i = people.length - 1;
+		first = last = '';
+	}
+
+	function update() {
+		selected.first = first;
+		selected.last = last;
+		people = people;
+	}
+
+	function remove() {
+		// Remove selected person from the source array (people), not the filtered array
+		const index = people.indexOf(selected);
+		people = [...people.slice(0, index), ...people.slice(index + 1)];
+
+		first = last = '';
+		i = Math.min(i, filteredPeople.length - 2);
+	}
+
+	function reset_inputs(person) {
+		first = person ? person.first : '';
+		last = person ? person.last : '';
+	}
+</script>
+
+<input placeholder="filter prefix" bind:value={prefix}>
+
+<select bind:value={i} size={5}>
+	{#each filteredPeople as person, i}
+		<option value={i}>{person.last}, {person.first}</option>
+	{/each}
+</select>
+
+<label><input bind:value={first} placeholder="first"></label>
+<label><input bind:value={last} placeholder="last"></label>
+
+<div class='buttons'>
+	<button on:click={create} disabled="{!first || !last}">create</button>
+	<button on:click={update} disabled="{!first || !last || !selected}">update</button>
+	<button on:click={remove} disabled="{!selected}">delete</button>
+</div>
+
+<style>
+	* {
+		font-family: inherit;
+		font-size: inherit;
+	}
+
+	input {
+		display: block;
+		margin: 0 0 0.5em 0;
+	}
+
+	select {
+		float: left;
+		margin: 0 1em 1em 0;
+		width: 14em;
+	}
+
+	.buttons {
+		clear: both;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/20-7guis/05-7guis-crud/meta.json b/site/content/examples/20-7guis/05-7guis-crud/meta.json
new file mode 100644
index 0000000000..6f617938ba
--- /dev/null
+++ b/site/content/examples/20-7guis/05-7guis-crud/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "CRUD"
+}
\ No newline at end of file
diff --git a/site/content/examples/20-7guis/06-7guis-circles/App.svelte b/site/content/examples/20-7guis/06-7guis-circles/App.svelte
new file mode 100644
index 0000000000..2c42250f8e
--- /dev/null
+++ b/site/content/examples/20-7guis/06-7guis-circles/App.svelte
@@ -0,0 +1,125 @@
+<!--
+https://eugenkiss.github.io/7guis/tasks#circle
+
+Click on the canvas to draw a circle. Click on a circle
+to select it. Right-click on the canvas to adjust the
+radius of the selected circle.
+-->
+
+<script>
+	let i = 0;
+	let undoStack = [[]];
+	let circles = [];
+	let selected;
+	let adjusting = false;
+	let adjusted = false;
+
+	function handleClick(event) {
+		if (adjusting) {
+			adjusting = false;
+
+			// if circle was adjusted,
+			// push to the stack
+			if (adjusted) push();
+			return;
+		}
+
+		const circle = {
+			cx: event.clientX,
+			cy: event.clientY,
+			r: 50
+		};
+
+		circles = circles.concat(circle);
+		selected = circle;
+
+		push();
+	}
+
+	function adjust(event) {
+		selected.r = +event.target.value;
+		circles = circles;
+		adjusted = true;
+	}
+
+	function select(circle, event) {
+		if (!adjusting) {
+			event.stopPropagation();
+			selected = circle;
+		}
+	}
+
+	function push() {
+		const newUndoStack = undoStack.slice(0, ++i);
+		newUndoStack.push(clone(circles));
+		undoStack = newUndoStack;
+	}
+
+	function travel(d) {
+		circles = clone(undoStack[i += d]);
+		adjusting = false;
+	}
+
+	function clone(circles) {
+		return circles.map(({ cx, cy, r }) => ({ cx, cy, r }));
+	}
+</script>
+
+<div class="controls">
+	<button on:click="{() => travel(-1)}" disabled="{i === 0}">undo</button>
+	<button on:click="{() => travel(+1)}" disabled="{i === undoStack.length -1}">redo</button>
+</div>
+
+<svg on:click={handleClick} >
+	{#each circles as circle}
+		<circle cx={circle.cx} cy={circle.cy} r={circle.r}
+			on:click="{event => select(circle, event)}"
+			on:contextmenu|stopPropagation|preventDefault="{() => {
+				adjusting = !adjusting;
+				if (adjusting) selected = circle;
+			}}"
+			fill="{circle === selected ? '#ccc': 'white'}"
+		/>
+	{/each}
+</svg>
+
+{#if adjusting}
+	<div class="adjuster">
+		<p>adjust diameter of circle at {selected.cx}, {selected.cy}</p>
+		<input type="range" value={selected.r} on:input={adjust}>
+	</div>
+{/if}
+
+<style>
+	.controls {
+		position: absolute;
+		width: 100%;
+		text-align: center;
+	}
+
+	svg {
+		background-color: #eee;
+		width: 100%;
+		height: 100%;
+	}
+
+	circle {
+		stroke: black;
+	}
+
+	.adjuster {
+		position: absolute;
+		width: 80%;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%,-50%);
+		padding: 1em;
+		text-align: center;
+		background-color: rgba(255,255,255,0.7);
+		border-radius: 4px;
+	}
+
+	input[type='range'] {
+		width: 100%;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/20-7guis/06-7guis-circles/meta.json b/site/content/examples/20-7guis/06-7guis-circles/meta.json
new file mode 100644
index 0000000000..03a82d6b6f
--- /dev/null
+++ b/site/content/examples/20-7guis/06-7guis-circles/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Circle Drawer"
+}
\ No newline at end of file
diff --git a/site/content/examples/20-7guis/meta.json b/site/content/examples/20-7guis/meta.json
new file mode 100644
index 0000000000..61439f7f4d
--- /dev/null
+++ b/site/content/examples/20-7guis/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "7GUIs"
+}
\ No newline at end of file
diff --git a/site/content/examples/21-miscellaneous/01-hacker-news/App.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/App.svelte
new file mode 100644
index 0000000000..f8a2e9066a
--- /dev/null
+++ b/site/content/examples/21-miscellaneous/01-hacker-news/App.svelte
@@ -0,0 +1,57 @@
+<script>
+	import { onMount } from 'svelte';
+	import List from './List.svelte';
+	import Item from './Item.svelte';
+
+	let item;
+	let page;
+
+	async function hashchange() {
+		// the poor man's router!
+		const path = window.location.hash.slice(1);
+
+		if (path.startsWith('/item')) {
+			const id = path.slice(6);
+			item = await fetch(`https://node-hnapi.herokuapp.com/item/${id}`).then(r => r.json());
+
+			window.scrollTo(0,0);
+		} else if (path.startsWith('/top')) {
+			page = +path.slice(5);
+			item = null;
+		} else {
+			window.location.hash = '/top/1';
+		}
+	}
+
+	onMount(hashchange);
+</script>
+
+<svelte:window on:hashchange={hashchange}/>
+
+<main>
+	{#if item}
+		<Item {item} returnTo="#/top/{page}"/>
+	{:else if page}
+		<List {page}/>
+	{/if}
+</main>
+
+<style>
+	main {
+		position: relative;
+		max-width: 800px;
+		margin: 0 auto;
+		min-height: 101vh;
+		padding: 1em;
+	}
+
+	main :global(.meta) {
+		color: #999;
+		font-size: 12px;
+		margin: 0 0 1em 0;
+	}
+
+	main :global(a) {
+		color: rgb(0,0,150);
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/21-miscellaneous/01-hacker-news/Comment.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/Comment.svelte
new file mode 100644
index 0000000000..3faa345746
--- /dev/null
+++ b/site/content/examples/21-miscellaneous/01-hacker-news/Comment.svelte
@@ -0,0 +1,32 @@
+<script>
+	export let comment;
+</script>
+
+<article>
+	<p class="meta">{comment.user} {comment.time_ago}</p>
+
+	{@html comment.content}
+
+	<div class="replies">
+		{#each comment.comments as child}
+			<svelte:self comment={child}/>
+		{/each}
+	</div>
+</article>
+
+<style>
+	article {
+		border-top: 1px solid #eee;
+		margin: 1em 0 0 0;
+		padding: 1em 0 0 0;
+		font-size: 14px;
+	}
+
+	.meta {
+		color: #999;
+	}
+
+	.replies {
+		padding: 0 0 0 1em;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/21-miscellaneous/01-hacker-news/Item.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/Item.svelte
new file mode 100644
index 0000000000..190d8fe20c
--- /dev/null
+++ b/site/content/examples/21-miscellaneous/01-hacker-news/Item.svelte
@@ -0,0 +1,43 @@
+<script>
+	import Comment from "./Comment.svelte";
+
+	export let item;
+	export let returnTo;
+
+	$: url = !item.domain ? `https://news.ycombinator.com/${item.url}` : item.url;
+</script>
+
+<a href={returnTo}>&laquo; back</a>
+
+<article>
+	<a href="{url}">
+		<h1>{item.title}</h1>
+		{#if item.domain}
+			<small>{item.domain}</small>
+		{/if}
+	</a>
+
+	<p class="meta">submitted by {item.user} {item.time_ago}
+</article>
+
+<div class="comments">
+	{#each item.comments as comment}
+		<Comment {comment}/>
+	{/each}
+</div>
+
+<style>
+	article {
+		margin: 0 0 1em 0;
+	}
+
+	a {
+		display: block;
+		margin: 0 0 1em 0;
+	}
+
+	h1 {
+		font-size: 1.4em;
+		margin: 0;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/21-miscellaneous/01-hacker-news/List.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/List.svelte
new file mode 100644
index 0000000000..46b934a2e7
--- /dev/null
+++ b/site/content/examples/21-miscellaneous/01-hacker-news/List.svelte
@@ -0,0 +1,46 @@
+<script>
+	import { beforeUpdate } from "svelte";
+	import Summary from "./Summary.svelte";
+
+	const PAGE_SIZE = 20;
+
+	export let page;
+
+	let items;
+	let offset;
+
+	$: fetch(`https://node-hnapi.herokuapp.com/news?page=${page}`)
+		.then(r => r.json())
+		.then(data => {
+			items = data;
+			offset = PAGE_SIZE * (page - 1);
+			window.scrollTo(0, 0);
+		});
+</script>
+
+{#if items}
+	{#each items as item, i}
+		<Summary {item} {i} {offset}/>
+	{/each}
+
+	<a href="#/top/{page + 1}">page {page + 1}</a>
+{:else}
+	<p class="loading">loading...</p>
+{/if}
+
+<style>
+	a {
+		padding: 2em;
+		display: block;
+	}
+
+	.loading {
+		opacity: 0;
+		animation: 0.4s 0.8s forwards fade-in;
+	}
+
+	@keyframes fade-in {
+		from { opacity: 0; }
+		to { opacity: 1; }
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte b/site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte
new file mode 100644
index 0000000000..08d515f3c2
--- /dev/null
+++ b/site/content/examples/21-miscellaneous/01-hacker-news/Summary.svelte
@@ -0,0 +1,40 @@
+<script>
+	export let item;
+	export let i;
+	export let offset;
+
+	function comment_text() {
+		const c = item.comments_count;
+		return `${c} ${c === 1 ? 'comment' : 'comments'}`;
+	}
+
+	$: url = item.type === "ask" ? `https://news.ycombinator.com/${item.url}` : item.url;
+</script>
+
+<article>
+	<span>{i + offset + 1}</span>
+	<h2><a target="_blank" href={url}>{item.title}</a></h2>
+	<p class="meta"><a href="#/item/{item.id}">{comment_text()}</a> by {item.user} {item.time_ago}</p>
+</article>
+
+<style>
+	article {
+		position: relative;
+		padding: 0 0 0 2em;
+		border-bottom: 1px solid #eee;
+	}
+
+	h2 {
+		font-size: 1em;
+		margin: 0.5em 0;
+	}
+
+	span {
+		position: absolute;
+		left: 0;
+	}
+
+	a {
+		color: #333;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/21-miscellaneous/01-hacker-news/meta.json b/site/content/examples/21-miscellaneous/01-hacker-news/meta.json
new file mode 100644
index 0000000000..becbac4ea7
--- /dev/null
+++ b/site/content/examples/21-miscellaneous/01-hacker-news/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Hacker News"
+}
\ No newline at end of file
diff --git a/site/content/examples/21-miscellaneous/02-immutable-data/App.svelte b/site/content/examples/21-miscellaneous/02-immutable-data/App.svelte
new file mode 100644
index 0000000000..0e2b0e6ae0
--- /dev/null
+++ b/site/content/examples/21-miscellaneous/02-immutable-data/App.svelte
@@ -0,0 +1,36 @@
+<script>
+	import ImmutableTodo from './ImmutableTodo.svelte';
+	import MutableTodo from './MutableTodo.svelte';
+
+	let todos = [
+		{ id: 1, done: true, text: 'wash the car' },
+		{ id: 2, done: false, text: 'take the dog for a walk' },
+		{ id: 3, done: false, text: 'mow the lawn' }
+	];
+
+	function toggle(id) {
+		todos = todos.map(todo => {
+			if (todo.id === id) {
+				// return a new object
+				return {
+					id,
+					done: !todo.done,
+					text: todo.text
+				};
+			}
+
+			// return the same object
+			return todo;
+		});
+	}
+</script>
+
+<h2>Immutable</h2>
+{#each todos as todo}
+	<ImmutableTodo {todo} on:click="{() => toggle(todo.id)}"/>
+{/each}
+
+<h2>Mutable</h2>
+{#each todos as todo}
+	<MutableTodo {todo} on:click="{() => toggle(todo.id)}"/>
+{/each}
diff --git a/site/content/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte b/site/content/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
new file mode 100644
index 0000000000..2a62cf7021
--- /dev/null
+++ b/site/content/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
@@ -0,0 +1,27 @@
+<svelte:options immutable/>
+
+<script>
+	import { afterUpdate } from 'svelte';
+	import flash from './flash.js';
+
+	export let todo;
+
+	let div;
+
+	afterUpdate(() => {
+		flash(div);
+	});
+</script>
+
+<!-- the text will flash red whenever
+		the `todo` object changes -->
+<div bind:this={div} on:click>
+	{todo.done ? '👍': ''} {todo.text}
+</div>
+
+<style>
+	div {
+		cursor: pointer;
+		line-height: 1.5;
+	}
+</style>
diff --git a/site/content/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte b/site/content/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
new file mode 100644
index 0000000000..a4d37c54fe
--- /dev/null
+++ b/site/content/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
@@ -0,0 +1,25 @@
+<script>
+	import { afterUpdate } from 'svelte';
+	import flash from './flash.js';
+
+	export let todo;
+
+	let div;
+
+	afterUpdate(() => {
+		flash(div);
+	});
+</script>
+
+<!-- the text will flash red whenever
+		the `todo` object changes -->
+<div bind:this={div} on:click>
+	{todo.done ? '👍': ''} {todo.text}
+</div>
+
+<style>
+	div {
+		cursor: pointer;
+		line-height: 1.5;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/examples/21-miscellaneous/02-immutable-data/flash.js b/site/content/examples/21-miscellaneous/02-immutable-data/flash.js
new file mode 100644
index 0000000000..c788cc6d35
--- /dev/null
+++ b/site/content/examples/21-miscellaneous/02-immutable-data/flash.js
@@ -0,0 +1,13 @@
+export default function flash(element) {
+	requestAnimationFrame(() => {
+		element.style.transition = 'none';
+		element.style.color = 'rgba(255,62,0,1)';
+		element.style.backgroundColor = 'rgba(255,62,0,0.2)';
+
+		setTimeout(() => {
+			element.style.transition = 'color 1s, background 1s';
+			element.style.color = '';
+			element.style.backgroundColor = '';
+		});
+	});
+}
\ No newline at end of file
diff --git a/site/content/examples/21-miscellaneous/02-immutable-data/meta.json b/site/content/examples/21-miscellaneous/02-immutable-data/meta.json
new file mode 100644
index 0000000000..68e56ee7fa
--- /dev/null
+++ b/site/content/examples/21-miscellaneous/02-immutable-data/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Immutable data"
+}
\ No newline at end of file
diff --git a/site/content/examples/21-miscellaneous/meta.json b/site/content/examples/21-miscellaneous/meta.json
new file mode 100644
index 0000000000..116634ec42
--- /dev/null
+++ b/site/content/examples/21-miscellaneous/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Miscellaneous"
+}
\ No newline at end of file
diff --git a/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte
new file mode 100644
index 0000000000..ccb1ad8834
--- /dev/null
+++ b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/App.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { comicSans, link } from './styles.js';
+	import Hero from './Hero.svelte';
+</script>
+
+<Hero/>
+
+<div class={comicSans}>
+	<p>Did you enjoy your lunch, mom? You drank it fast enough. I know, I just call her Annabelle cause she's shaped like a…she's the belle of the ball! YOU'RE the Chiclet! Not me. Caw ca caw, caw ca caw, caw ca caw! A Colombian cartel that WON'T kidnap and kill you. You go buy a tape recorder and record yourself for a whole day. <a class={link} href="https://bluthipsum.com/">I think you'll be surprised at some of your phrasing.</a></p>
+</div>
\ No newline at end of file
diff --git a/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte
new file mode 100644
index 0000000000..9f60c276ce
--- /dev/null
+++ b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/Hero.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { title, comicSans, box } from './styles.js';
+</script>
+
+<div class="{title} {comicSans}">
+	<h1>
+		<div class={box}>
+			<div class={box}>
+				<div class={box}>CSS</div>
+				in JS
+			</div>
+			in HTML
+		</div>
+	</h1>
+</div>
\ No newline at end of file
diff --git a/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json
new file mode 100644
index 0000000000..eaa2a1da63
--- /dev/null
+++ b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "-"
+}
diff --git a/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js
new file mode 100644
index 0000000000..b54fa92763
--- /dev/null
+++ b/site/content/examples/99-embeds/20181225-blog-svelte-css-in-js/styles.js
@@ -0,0 +1,35 @@
+import emotion from '@emotion/css@11.1.3/dist/emotion-css.umd.min.js';
+
+const { css } = emotion;
+
+const brand = '#74D900';
+
+export const title = css`
+	color: ${brand};
+	font-size: 1em;
+	white-space: nowrap;
+`;
+
+export const comicSans = css`
+	font-family: 'Comic Sans MS', cursive;
+`;
+
+export const box = css`
+	position: relative;
+	display: inline-block;
+	border: 2px solid ${brand};
+	line-height: 1;
+	padding: 4px;
+	border-radius: 4px;
+`;
+
+export const link = css`
+	color: inherit;
+	font-weight: bold;
+	text-decoration: none;
+	border-bottom: 1px solid ${brand};
+	&:hover {
+		text-decoration: none;
+		background: ${brand};
+	}
+`;
diff --git a/site/content/examples/99-embeds/20190420-blog-write-less-code/App.svelte b/site/content/examples/99-embeds/20190420-blog-write-less-code/App.svelte
new file mode 100644
index 0000000000..46cf93b0fc
--- /dev/null
+++ b/site/content/examples/99-embeds/20190420-blog-write-less-code/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	let a = 1;
+	let b = 2;
+</script>
+
+<input type="number" bind:value={a}>
+<input type="number" bind:value={b}>
+
+<p>{a} + {b} = {a + b}</p>
\ No newline at end of file
diff --git a/site/content/examples/99-embeds/20190420-blog-write-less-code/meta.json b/site/content/examples/99-embeds/20190420-blog-write-less-code/meta.json
new file mode 100644
index 0000000000..eaa2a1da63
--- /dev/null
+++ b/site/content/examples/99-embeds/20190420-blog-write-less-code/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "-"
+}
diff --git a/site/content/examples/99-embeds/meta.json b/site/content/examples/99-embeds/meta.json
new file mode 100644
index 0000000000..0967ef424b
--- /dev/null
+++ b/site/content/examples/99-embeds/meta.json
@@ -0,0 +1 @@
+{}
diff --git a/site/content/faq/100-im-new-to-svelte.md b/site/content/faq/100-im-new-to-svelte.md
new file mode 100644
index 0000000000..5bd7b96379
--- /dev/null
+++ b/site/content/faq/100-im-new-to-svelte.md
@@ -0,0 +1,7 @@
+---
+question: I'm new to Svelte. Where should I start?
+---
+
+We think the best way to get started is playing through the interactive [tutorial](/tutorial). Each step there is mainly focused on one specific aspect and is easy to follow. You'll be editing and running real Svelte components right in your browser.
+
+Five to ten minutes should be enough to get you up and running. An hour and a half should get you through the entire tutorial.
diff --git a/site/content/faq/1000-how-can-i-update-my-v2-components.md b/site/content/faq/1000-how-can-i-update-my-v2-components.md
new file mode 100644
index 0000000000..0800dff89b
--- /dev/null
+++ b/site/content/faq/1000-how-can-i-update-my-v2-components.md
@@ -0,0 +1,5 @@
+---
+question: How can I update my components written in Svelte v2?
+---
+
+svelte-upgrade isn't fully working for v2->v3 yet, [but it's close](https://github.com/sveltejs/svelte-upgrade/pull/12).
\ No newline at end of file
diff --git a/site/content/faq/110-where-can-i-get-support.md b/site/content/faq/110-where-can-i-get-support.md
new file mode 100644
index 0000000000..45e61a823f
--- /dev/null
+++ b/site/content/faq/110-where-can-i-get-support.md
@@ -0,0 +1,9 @@
+---
+question: Where can I get support?
+---
+
+If your question is about certain syntax, the [API page](https://svelte.dev/docs) is a good place to start.
+
+Stack Overflow is a popular forum to ask code-level questions or if you’re stuck with a specific error. Read through the existing questions tagged with [Svelte](https://stackoverflow.com/questions/tagged/svelte+or+svelte-3) or [ask your own](https://stackoverflow.com/questions/ask?tags=svelte)!
+
+There are online forums and chats which are a great place for discussion about best practices, application architecture or just to get to know fellow Svelte users. [Our Discord](https://svelte.dev/chat) or [the Reddit channel](https://www.reddit.com/r/sveltejs/) are examples of that. If you have an answerable code-level question, Stack Overflow is usually a better fit.
diff --git a/site/content/faq/1100-is-svelte-v2-still-available.md b/site/content/faq/1100-is-svelte-v2-still-available.md
new file mode 100644
index 0000000000..0fbc4c039c
--- /dev/null
+++ b/site/content/faq/1100-is-svelte-v2-still-available.md
@@ -0,0 +1,7 @@
+---
+question: Is Svelte v2 still available?
+---
+
+New features aren't being added to it, and bugs will probably only be fixed if they are extremely nasty or present some sort of security vulnerability.
+
+The documentation is still available [here](https://v2.svelte.dev/guide).
\ No newline at end of file
diff --git a/site/content/faq/1200-how-do-i-do-hmr.md b/site/content/faq/1200-how-do-i-do-hmr.md
new file mode 100644
index 0000000000..e9a4fd9de8
--- /dev/null
+++ b/site/content/faq/1200-how-do-i-do-hmr.md
@@ -0,0 +1,5 @@
+---
+question: How do I do hot module reloading?
+---
+
+We recommend using [SvelteKit](https://kit.svelte.dev/), which supports HMR out of the box and is built on top of [Vite](https://vitejs.dev/) and [svelte-hmr](https://github.com/sveltejs/svelte-hmr). There are also community plugins for [rollup](https://github.com/rixo/rollup-plugin-svelte-hot) and [webpack](https://github.com/sveltejs/svelte-loader).
diff --git a/site/content/faq/200-are-there-any-third-party-resources.md b/site/content/faq/200-are-there-any-third-party-resources.md
new file mode 100644
index 0000000000..a4da9628a6
--- /dev/null
+++ b/site/content/faq/200-are-there-any-third-party-resources.md
@@ -0,0 +1,5 @@
+---
+question: Are there any third-party resources?
+---
+
+Svelte Society maintains a [list of books and videos](https://sveltesociety.dev/resources).
diff --git a/site/content/faq/400-how-can-i-get-syntax-highlighting.md b/site/content/faq/400-how-can-i-get-syntax-highlighting.md
new file mode 100644
index 0000000000..96a80e3c32
--- /dev/null
+++ b/site/content/faq/400-how-can-i-get-syntax-highlighting.md
@@ -0,0 +1,5 @@
+---
+question: How can I get VS Code to syntax-highlight my .svelte files?
+---
+
+There is an [official VS Code extension for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
diff --git a/site/content/faq/425-is-there-a-tool-to-automaticly-format.md b/site/content/faq/425-is-there-a-tool-to-automaticly-format.md
new file mode 100644
index 0000000000..10f54d6bb7
--- /dev/null
+++ b/site/content/faq/425-is-there-a-tool-to-automaticly-format.md
@@ -0,0 +1,5 @@
+---
+question: Is there a tool to automatically format my .svelte files?
+---
+
+You can use prettier with the [prettier-plugin-svelte](https://www.npmjs.com/package/prettier-plugin-svelte) plugin.
diff --git a/site/content/faq/450-how-do-i-document-my-components.md b/site/content/faq/450-how-do-i-document-my-components.md
new file mode 100644
index 0000000000..4574d02961
--- /dev/null
+++ b/site/content/faq/450-how-do-i-document-my-components.md
@@ -0,0 +1,32 @@
+---
+question: How do I document my components?
+---
+
+In editors which use the Svelte Language Server you can document Components, functions and exports using specially formatted comments.
+
+````sv
+<script>
+	/** What should we call the user? */
+	export let name = 'world';
+</script>
+
+<!--
+@component
+Here's some documentation for this component.
+It will show up on hover.
+
+- You can use markdown here.
+- You can also use code blocks here.
+- Usage:
+  ```tsx
+  <main name="Arethra">
+  ```
+-->
+<main>
+	<h1>
+		Hello, {name}
+	</h1>
+</main>
+````
+
+Note: The `@component` is necessary in the HTML comment which describes your component.
diff --git a/site/content/faq/500-what-about-typescript-support.md b/site/content/faq/500-what-about-typescript-support.md
new file mode 100644
index 0000000000..9bdec6f2da
--- /dev/null
+++ b/site/content/faq/500-what-about-typescript-support.md
@@ -0,0 +1,20 @@
+---
+question: What about TypeScript support?
+---
+
+You need to install a preprocessor such as [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess). You can run type checking from the command line with [svelte-check](https://www.npmjs.com/package/svelte-check).
+
+To declare the type of a reactive variable in a Svelte template, you should use the following syntax:
+
+```ts
+let x: number;
+$: x = count + 1;
+```
+
+To import a type or interface make sure to use [TypeScript's `type` modifier](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export):
+
+```ts
+import type { SomeInterface } from './SomeFile';
+```
+
+You must use the `type` modifier because `svelte-preprocess` doesn't know whether an import is a type or a value — it only transpiles one file at a time without knowledge of the other files and therefore can't safely erase imports which only contain types without this modifier present.
diff --git a/site/content/faq/600-does-svelte-scale.md b/site/content/faq/600-does-svelte-scale.md
new file mode 100644
index 0000000000..06c9b58a97
--- /dev/null
+++ b/site/content/faq/600-does-svelte-scale.md
@@ -0,0 +1,5 @@
+---
+question: Does Svelte scale?
+---
+
+There will be a blog post about this eventually, but in the meantime, check out [this issue](https://github.com/sveltejs/svelte/issues/2546).
diff --git a/site/content/faq/700-is-there-a-component-library.md b/site/content/faq/700-is-there-a-component-library.md
new file mode 100644
index 0000000000..30460da38c
--- /dev/null
+++ b/site/content/faq/700-is-there-a-component-library.md
@@ -0,0 +1,5 @@
+---
+question: Is there a UI component library?
+---
+
+There are several UI component libraries as well as standalone components. Find them under the [components section](https://sveltesociety.dev/components) of the Svelte Society website.
diff --git a/site/content/faq/800-how-do-i-test-svelte-apps.md b/site/content/faq/800-how-do-i-test-svelte-apps.md
new file mode 100644
index 0000000000..1481b6ba59
--- /dev/null
+++ b/site/content/faq/800-how-do-i-test-svelte-apps.md
@@ -0,0 +1,12 @@
+---
+question: How do I test Svelte apps?
+---
+
+We recommend trying to separate your view logic from your business logic. Data transformation or cross component state management is best kept outside of Svelte components. You can test those parts like you would test any JavaScript functionality that way. When it comes to testing the components, it is best to test the logic of the component and remember that the Svelte library has its own tests and you do not need to test implementation details provided by Svelte.
+
+There are a few approaches that people take when testing, but it generally involves compiling the component and mounting it to something and then performing the tests. You essentially need to create a bundle for each component you're testing (since svelte is a compiler and not a normal library) and then mount them. You can mount to a JSDOM instance. Or you can use a real browser powered by a library like Playwright, Puppeteer, or Cypress.
+
+Some resources for getting started with unit testing:
+- [Svelte Testing Library](https://testing-library.com/docs/svelte-testing-library/example/)
+- [Example using vitest](https://github.com/vitest-dev/vitest/tree/main/examples/svelte)
+- [Example using uvu test runner with JSDOM](https://github.com/lukeed/uvu/tree/master/examples/svelte)
diff --git a/site/content/faq/900-is-there-a-router.md b/site/content/faq/900-is-there-a-router.md
new file mode 100644
index 0000000000..9d50bbe490
--- /dev/null
+++ b/site/content/faq/900-is-there-a-router.md
@@ -0,0 +1,13 @@
+---
+question: Is there a router?
+---
+
+The official routing library is [SvelteKit](https://kit.svelte.dev/), which is currently in beta. SvelteKit provides a filesystem router, server-side rendering (SSR), and hot module reloading (HMR) in one easy-to-use package. It shares similarities with Next.js for React.
+
+However, you can use any router lib you want. A lot of people use [page.js](https://github.com/visionmedia/page.js). There's also [navaid](https://github.com/lukeed/navaid), which is very similar. And [universal-router](https://github.com/kriasoft/universal-router), which is isomorphic with child routes, but without built-in history support.
+
+If you prefer a declarative HTML approach, there's the isomorphic [svelte-routing](https://github.com/EmilTholin/svelte-routing) library and a fork of it called [svelte-navigator](https://github.com/mefechoel/svelte-navigator) containing some additional functionality.
+
+If you need hash-based routing on the client side, check out [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router) or [abstract-state-router](https://github.com/TehShrike/abstract-state-router/).
+
+[Routify](https://routify.dev) is another filesystem-based router, similar to SvelteKit's router. Version 3 supports Svelte's native SSR.
diff --git a/site/content/tutorial/01-introduction/01-basics/app-a/App.svelte b/site/content/tutorial/01-introduction/01-basics/app-a/App.svelte
new file mode 100644
index 0000000000..efe5048cbc
--- /dev/null
+++ b/site/content/tutorial/01-introduction/01-basics/app-a/App.svelte
@@ -0,0 +1 @@
+<h1>Hello world!</h1>
\ No newline at end of file
diff --git a/site/content/tutorial/01-introduction/01-basics/text.md b/site/content/tutorial/01-introduction/01-basics/text.md
new file mode 100644
index 0000000000..08ba922b42
--- /dev/null
+++ b/site/content/tutorial/01-introduction/01-basics/text.md
@@ -0,0 +1,32 @@
+---
+title: Basics
+---
+
+Welcome to the Svelte tutorial. This will teach you everything you need to know to build fast, small web applications easily.
+
+You can also consult the [API docs](/docs) and the [examples](/examples), or — if you're impatient to start hacking on your machine locally — the [60-second quickstart](/blog/the-easiest-way-to-get-started).
+
+
+## What is Svelte?
+
+Svelte is a tool for building fast web applications.
+
+It is similar to JavaScript frameworks such as React and Vue, which share a goal of making it easy to build slick interactive user interfaces.
+
+But there's a crucial difference: Svelte converts your app into ideal JavaScript at *build time*, rather than interpreting your application code at *run time*. This means you don't pay the performance cost of the framework's abstractions, and you don't incur a penalty when your app first loads.
+
+You can build your entire app with Svelte, or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere, without the overhead of a dependency on a conventional framework.
+
+
+## How to use this tutorial
+
+You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Svelte.
+
+As you progress through the tutorial, you'll be presented with mini exercises designed to illustrate new features. Later chapters build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the dropdown above (click 'Introduction / Basics').
+
+Each tutorial chapter will have a 'Show me' button that you can click if you get stuck following the instructions. Try not to rely on it too much; you will learn faster by figuring out where to put each suggested code block and manually typing it in to the editor.
+
+
+## Understanding components
+
+In Svelte, an application is composed from one or more *components*. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a `.svelte` file. The 'hello world' example in the code editor is a simple component.
diff --git a/site/content/tutorial/01-introduction/02-adding-data/app-a/App.svelte b/site/content/tutorial/01-introduction/02-adding-data/app-a/App.svelte
new file mode 100644
index 0000000000..efe5048cbc
--- /dev/null
+++ b/site/content/tutorial/01-introduction/02-adding-data/app-a/App.svelte
@@ -0,0 +1 @@
+<h1>Hello world!</h1>
\ No newline at end of file
diff --git a/site/content/tutorial/01-introduction/02-adding-data/app-b/App.svelte b/site/content/tutorial/01-introduction/02-adding-data/app-b/App.svelte
new file mode 100644
index 0000000000..2ab60ba0ac
--- /dev/null
+++ b/site/content/tutorial/01-introduction/02-adding-data/app-b/App.svelte
@@ -0,0 +1,5 @@
+<script>
+	let name = 'world';
+</script>
+
+<h1>Hello {name.toUpperCase()}!</h1>
\ No newline at end of file
diff --git a/site/content/tutorial/01-introduction/02-adding-data/text.md b/site/content/tutorial/01-introduction/02-adding-data/text.md
new file mode 100644
index 0000000000..fbae6c3e75
--- /dev/null
+++ b/site/content/tutorial/01-introduction/02-adding-data/text.md
@@ -0,0 +1,23 @@
+---
+title: Adding data
+---
+
+A component that just renders some static markup isn't very interesting. Let's add some data.
+
+First, add a script tag to your component and declare a `name` variable:
+
+```html
+<script>
+	let name = 'world';
+</script>
+
+<h1>Hello world!</h1>
+```
+
+Then, we can refer to `name` in the markup:
+
+```html
+<h1>Hello {name}!</h1>
+```
+
+Inside the curly braces, we can put any JavaScript we want. Try changing `name` to `name.toUpperCase()` for a shoutier greeting.
\ No newline at end of file
diff --git a/site/content/tutorial/01-introduction/03-dynamic-attributes/app-a/App.svelte b/site/content/tutorial/01-introduction/03-dynamic-attributes/app-a/App.svelte
new file mode 100644
index 0000000000..03850a3670
--- /dev/null
+++ b/site/content/tutorial/01-introduction/03-dynamic-attributes/app-a/App.svelte
@@ -0,0 +1,5 @@
+<script>
+	let src = '/tutorial/image.gif';
+</script>
+
+<img>
diff --git a/site/content/tutorial/01-introduction/03-dynamic-attributes/app-b/App.svelte b/site/content/tutorial/01-introduction/03-dynamic-attributes/app-b/App.svelte
new file mode 100644
index 0000000000..f2f9101d51
--- /dev/null
+++ b/site/content/tutorial/01-introduction/03-dynamic-attributes/app-b/App.svelte
@@ -0,0 +1,6 @@
+<script>
+	let src = '/tutorial/image.gif';
+	let name = 'Rick Astley';
+</script>
+
+<img {src} alt="{name} dances.">
diff --git a/site/content/tutorial/01-introduction/03-dynamic-attributes/text.md b/site/content/tutorial/01-introduction/03-dynamic-attributes/text.md
new file mode 100644
index 0000000000..b4e2001bcf
--- /dev/null
+++ b/site/content/tutorial/01-introduction/03-dynamic-attributes/text.md
@@ -0,0 +1,33 @@
+---
+title: Dynamic attributes
+---
+
+You can use curly braces to control element attributes, just like you use them to control text.
+
+Our image is missing a `src` attribute — let's add one:
+
+```html
+<img src={src}>
+```
+
+That's better. But Svelte is giving us a warning:
+
+> A11y: &lt;img&gt; element should have an alt attribute
+
+When building web apps, it's important to make sure that they're *accessible* to the broadest possible userbase, including people with (for example) impaired vision or motion, or people without powerful hardware or good internet connections. Accessibility (shortened to a11y) isn't always easy to get right, but Svelte will help by warning you if you write inaccessible markup.
+
+In this case, we're missing the `alt` attribute that describes the image for people using screenreaders, or people with slow or flaky internet connections that can't download the image. Let's add one:
+
+```html
+<img src={src} alt="A man dances.">
+```
+
+We can use curly braces *inside* attributes. Try changing it to `"{name} dances."` — remember to declare a `name` variable in the `<script>` block.
+
+## Shorthand attributes
+
+It's not uncommon to have an attribute where the name and value are the same, like `src={src}`. Svelte gives us a convenient shorthand for these cases:
+
+```html
+<img {src} alt="A man dances.">
+```
diff --git a/site/content/tutorial/01-introduction/04-styling/app-a/App.svelte b/site/content/tutorial/01-introduction/04-styling/app-a/App.svelte
new file mode 100644
index 0000000000..672b0e96c7
--- /dev/null
+++ b/site/content/tutorial/01-introduction/04-styling/app-a/App.svelte
@@ -0,0 +1,5 @@
+<p>This is a paragraph.</p>
+
+<style>
+	/* Write your CSS here */
+</style>
diff --git a/site/content/tutorial/01-introduction/04-styling/app-b/App.svelte b/site/content/tutorial/01-introduction/04-styling/app-b/App.svelte
new file mode 100644
index 0000000000..a6451a008a
--- /dev/null
+++ b/site/content/tutorial/01-introduction/04-styling/app-b/App.svelte
@@ -0,0 +1,9 @@
+<p>This is a paragraph.</p>
+
+<style>
+	p {
+		color: purple;
+		font-family: 'Comic Sans MS', cursive;
+		font-size: 2em;
+	}
+</style>
diff --git a/site/content/tutorial/01-introduction/04-styling/text.md b/site/content/tutorial/01-introduction/04-styling/text.md
new file mode 100644
index 0000000000..d3500a5ac2
--- /dev/null
+++ b/site/content/tutorial/01-introduction/04-styling/text.md
@@ -0,0 +1,19 @@
+---
+title: Styling
+---
+
+Just like in HTML, you can add a `<style>` tag to your component. Let's add some styles to the `<p>` element:
+
+```html
+<p>This is a paragraph.</p>
+
+<style>
+	p {
+		color: purple;
+		font-family: 'Comic Sans MS', cursive;
+		font-size: 2em;
+	}
+</style>
+```
+
+Importantly, these rules are *scoped to the component*. You won't accidentally change the style of `<p>` elements elsewhere in your app, as we'll see in the next step.
diff --git a/site/content/tutorial/01-introduction/05-nested-components/app-a/App.svelte b/site/content/tutorial/01-introduction/05-nested-components/app-a/App.svelte
new file mode 100644
index 0000000000..a6451a008a
--- /dev/null
+++ b/site/content/tutorial/01-introduction/05-nested-components/app-a/App.svelte
@@ -0,0 +1,9 @@
+<p>This is a paragraph.</p>
+
+<style>
+	p {
+		color: purple;
+		font-family: 'Comic Sans MS', cursive;
+		font-size: 2em;
+	}
+</style>
diff --git a/site/content/tutorial/01-introduction/05-nested-components/app-a/Nested.svelte b/site/content/tutorial/01-introduction/05-nested-components/app-a/Nested.svelte
new file mode 100644
index 0000000000..83fe98d1d9
--- /dev/null
+++ b/site/content/tutorial/01-introduction/05-nested-components/app-a/Nested.svelte
@@ -0,0 +1 @@
+<p>This is another paragraph.</p>
diff --git a/site/content/tutorial/01-introduction/05-nested-components/app-b/App.svelte b/site/content/tutorial/01-introduction/05-nested-components/app-b/App.svelte
new file mode 100644
index 0000000000..b6cac46d2a
--- /dev/null
+++ b/site/content/tutorial/01-introduction/05-nested-components/app-b/App.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<p>This is a paragraph.</p>
+<Nested/>
+
+<style>
+	p {
+		color: purple;
+		font-family: 'Comic Sans MS', cursive;
+		font-size: 2em;
+	}
+</style>
diff --git a/site/content/tutorial/01-introduction/05-nested-components/app-b/Nested.svelte b/site/content/tutorial/01-introduction/05-nested-components/app-b/Nested.svelte
new file mode 100644
index 0000000000..83fe98d1d9
--- /dev/null
+++ b/site/content/tutorial/01-introduction/05-nested-components/app-b/Nested.svelte
@@ -0,0 +1 @@
+<p>This is another paragraph.</p>
diff --git a/site/content/tutorial/01-introduction/05-nested-components/text.md b/site/content/tutorial/01-introduction/05-nested-components/text.md
new file mode 100644
index 0000000000..ae02296755
--- /dev/null
+++ b/site/content/tutorial/01-introduction/05-nested-components/text.md
@@ -0,0 +1,28 @@
+---
+title: Nested components
+---
+
+It would be impractical to put your entire app in a single component. Instead, we can import components from other files and then use them as though we were including elements.
+
+We now present you 2 files in the editor on the right (upper bar) to click on, `App.svelte` and `Nested.svelte`.
+
+Each `.svelte` file holds a component that is a reusable self-contained block of code that encapsulates HTML, CSS, and JavaScript that belong together.
+
+Let's add a `<script>` tag to `App.svelte` that imports the file (our component) `Nested.svelte` into our app...
+
+```html
+<script>
+	import Nested from './Nested.svelte';
+</script>
+```
+
+...then use component `Nested` in the app markup:
+
+```html
+<p>This is a paragraph.</p>
+<Nested/>
+```
+
+Notice that even though `Nested.svelte` has a `<p>` element, the styles from `App.svelte` don't leak in.
+
+Also notice that the component name `Nested` is capitalised. This convention has been adopted to allow us to differentiate between user-defined components and regular HTML tags.
diff --git a/site/content/tutorial/01-introduction/06-html-tags/app-a/App.svelte b/site/content/tutorial/01-introduction/06-html-tags/app-a/App.svelte
new file mode 100644
index 0000000000..e366d78865
--- /dev/null
+++ b/site/content/tutorial/01-introduction/06-html-tags/app-a/App.svelte
@@ -0,0 +1,5 @@
+<script>
+	let string = `this string contains some <strong>HTML!!!</strong>`;
+</script>
+
+<p>{string}</p>
\ No newline at end of file
diff --git a/site/content/tutorial/01-introduction/06-html-tags/app-b/App.svelte b/site/content/tutorial/01-introduction/06-html-tags/app-b/App.svelte
new file mode 100644
index 0000000000..527e9a4830
--- /dev/null
+++ b/site/content/tutorial/01-introduction/06-html-tags/app-b/App.svelte
@@ -0,0 +1,5 @@
+<script>
+	let string = `this string contains some <strong>HTML!!!</strong>`;
+</script>
+
+<p>{@html string}</p>
\ No newline at end of file
diff --git a/site/content/tutorial/01-introduction/06-html-tags/text.md b/site/content/tutorial/01-introduction/06-html-tags/text.md
new file mode 100644
index 0000000000..ff547247e2
--- /dev/null
+++ b/site/content/tutorial/01-introduction/06-html-tags/text.md
@@ -0,0 +1,15 @@
+---
+title: HTML tags
+---
+
+Ordinarily, strings are inserted as plain text, meaning that characters like `<` and `>` have no special meaning.
+
+But sometimes you need to render HTML directly into a component. For example, the words you're reading right now exist in a markdown file that gets included on this page as a blob of HTML.
+
+In Svelte, you do this with the special `{@html ...}` tag:
+
+```html
+<p>{@html string}</p>
+```
+
+> Svelte doesn't perform any sanitization of the expression inside `{@html ...}` before it gets inserted into the DOM. In other words, if you use this feature it's critical that you manually escape HTML that comes from sources you don't trust, otherwise you risk exposing your users to XSS attacks.
diff --git a/site/content/tutorial/01-introduction/07-making-an-app/app-a/App.svelte b/site/content/tutorial/01-introduction/07-making-an-app/app-a/App.svelte
new file mode 100644
index 0000000000..c4de2848c2
--- /dev/null
+++ b/site/content/tutorial/01-introduction/07-making-an-app/app-a/App.svelte
@@ -0,0 +1 @@
+<h1>What now?</h1>
\ No newline at end of file
diff --git a/site/content/tutorial/01-introduction/07-making-an-app/text.md b/site/content/tutorial/01-introduction/07-making-an-app/text.md
new file mode 100644
index 0000000000..b65d084f13
--- /dev/null
+++ b/site/content/tutorial/01-introduction/07-making-an-app/text.md
@@ -0,0 +1,39 @@
+---
+title: Making an app
+---
+
+This tutorial is designed to get you familiar with the process of writing components. But at some point, you'll want to start writing components in the comfort of your own text editor.
+
+First, you'll need to integrate Svelte with a build tool. We recommend using [Vite](https://vitejs.dev/) with [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte/)...
+
+```bash
+npm init vite my-app -- --template svelte
+```
+
+...or one of the [community-maintained integrations](https://sveltesociety.dev/tools).
+
+> [SvelteKit](https://kit.svelte.dev) is the official application framework from the Svelte team. It's currently in development, but if you don't mind using pre-1.0 software then it's the recommended way to build Svelte apps.
+
+Don't worry if you're relatively new to web development and haven't used these tools before. We've prepared a simple step-by-step guide, [Svelte for new developers](/blog/svelte-for-new-developers), which walks you through the process.
+
+You'll also want to configure your text editor. There are [plugins](https://sveltesociety.dev/tools#editor-support) for many popular editors as well as an official [VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+<!-- 
+NOTE: Removed until we have better place for setting-up-your-editor guide. See https://github.com/sveltejs/svelte/pull/7310#issuecomment-1049923609
+If your editor does not have a Svelte plugin then you can follow [this guide](/blog/setting-up-your-editor) to configure your text editor to treat `.svelte` files the same as `.html` for the sake of syntax highlighting. -->
+
+Then, once you've got your project set up, using Svelte components is easy. The compiler turns each component into a regular JavaScript class — just import it and instantiate with `new`:
+
+```js
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body,
+	props: {
+		// we'll learn about props later
+		answer: 42
+	}
+});
+```
+
+You can then interact with `app` using the [component API](/docs#run-time-client-side-component-api) if you need to.
diff --git a/site/content/tutorial/01-introduction/meta.json b/site/content/tutorial/01-introduction/meta.json
new file mode 100644
index 0000000000..5c8f7bc10b
--- /dev/null
+++ b/site/content/tutorial/01-introduction/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Introduction"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte b/site/content/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte
new file mode 100644
index 0000000000..b93b48055b
--- /dev/null
+++ b/site/content/tutorial/02-reactivity/01-reactive-assignments/app-a/App.svelte
@@ -0,0 +1,11 @@
+<script>
+	let count = 0;
+
+	function incrementCount() {
+		// event handler code goes here
+	}
+</script>
+
+<button>
+	Clicked {count} {count === 1 ? 'time' : 'times'}
+</button>
diff --git a/site/content/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte b/site/content/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte
new file mode 100644
index 0000000000..dff5942d6e
--- /dev/null
+++ b/site/content/tutorial/02-reactivity/01-reactive-assignments/app-b/App.svelte
@@ -0,0 +1,11 @@
+<script>
+	let count = 0;
+
+	function incrementCount() {
+		count += 1;
+	}
+</script>
+
+<button on:click={incrementCount}>
+	Clicked {count} {count === 1 ? 'time' : 'times'}
+</button>
diff --git a/site/content/tutorial/02-reactivity/01-reactive-assignments/text.md b/site/content/tutorial/02-reactivity/01-reactive-assignments/text.md
new file mode 100644
index 0000000000..15b58f0820
--- /dev/null
+++ b/site/content/tutorial/02-reactivity/01-reactive-assignments/text.md
@@ -0,0 +1,21 @@
+---
+title: Assignments
+---
+
+At the heart of Svelte is a powerful system of *reactivity* for keeping the DOM in sync with your application state — for example, in response to an event.
+
+To demonstrate it, we first need to wire up an event handler. Replace line 9 with this:
+
+```html
+<button on:click={incrementCount}>
+```
+
+Inside the `incrementCount` function, all we need to do is change the value of `count`:
+
+```js
+function incrementCount() {
+	count += 1;
+}
+```
+
+Svelte 'instruments' this assignment with some code that tells it the DOM will need to be updated.
diff --git a/site/content/tutorial/02-reactivity/02-reactive-declarations/app-a/App.svelte b/site/content/tutorial/02-reactivity/02-reactive-declarations/app-a/App.svelte
new file mode 100644
index 0000000000..bc50d74cfc
--- /dev/null
+++ b/site/content/tutorial/02-reactivity/02-reactive-declarations/app-a/App.svelte
@@ -0,0 +1,11 @@
+<script>
+	let count = 0;
+
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button on:click={handleClick}>
+	Clicked {count} {count === 1 ? 'time' : 'times'}
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/02-reactivity/02-reactive-declarations/app-b/App.svelte b/site/content/tutorial/02-reactivity/02-reactive-declarations/app-b/App.svelte
new file mode 100644
index 0000000000..a9fc207851
--- /dev/null
+++ b/site/content/tutorial/02-reactivity/02-reactive-declarations/app-b/App.svelte
@@ -0,0 +1,14 @@
+<script>
+	let count = 0;
+	$: doubled = count * 2;
+
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button on:click={handleClick}>
+	Clicked {count} {count === 1 ? 'time' : 'times'}
+</button>
+
+<p>{count} doubled is {doubled}</p>
\ No newline at end of file
diff --git a/site/content/tutorial/02-reactivity/02-reactive-declarations/text.md b/site/content/tutorial/02-reactivity/02-reactive-declarations/text.md
new file mode 100644
index 0000000000..027a91a44a
--- /dev/null
+++ b/site/content/tutorial/02-reactivity/02-reactive-declarations/text.md
@@ -0,0 +1,22 @@
+---
+title: Declarations
+---
+
+Svelte automatically updates the DOM when your component's state changes. Often, some parts of a component's state need to be computed from *other* parts (such as a `fullname` derived from a `firstname` and a `lastname`), and recomputed whenever they change.
+
+For these, we have *reactive declarations*. They look like this:
+
+```js
+let count = 0;
+$: doubled = count * 2;
+```
+
+> Don't worry if this looks a little alien. It's [valid](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label) (if unconventional) JavaScript, which Svelte interprets to mean 're-run this code whenever any of the referenced values change'. Once you get used to it, there's no going back.
+
+Let's use `doubled` in our markup:
+
+```html
+<p>{count} doubled is {doubled}</p>
+```
+
+Of course, you could just write `{count * 2}` in the markup instead — you don't have to use reactive values. Reactive values become particularly valuable when you need to reference them multiple times, or you have values that depend on *other* reactive values.
diff --git a/site/content/tutorial/02-reactivity/03-reactive-statements/app-a/App.svelte b/site/content/tutorial/02-reactivity/03-reactive-statements/app-a/App.svelte
new file mode 100644
index 0000000000..bc50d74cfc
--- /dev/null
+++ b/site/content/tutorial/02-reactivity/03-reactive-statements/app-a/App.svelte
@@ -0,0 +1,11 @@
+<script>
+	let count = 0;
+
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button on:click={handleClick}>
+	Clicked {count} {count === 1 ? 'time' : 'times'}
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/02-reactivity/03-reactive-statements/app-b/App.svelte b/site/content/tutorial/02-reactivity/03-reactive-statements/app-b/App.svelte
new file mode 100644
index 0000000000..3e82cd562c
--- /dev/null
+++ b/site/content/tutorial/02-reactivity/03-reactive-statements/app-b/App.svelte
@@ -0,0 +1,16 @@
+<script>
+	let count = 0;
+
+	$: if (count >= 10) {
+		alert('count is dangerously high!');
+		count = 9;
+	}
+
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button on:click={handleClick}>
+	Clicked {count} {count === 1 ? 'time' : 'times'}
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/02-reactivity/03-reactive-statements/text.md b/site/content/tutorial/02-reactivity/03-reactive-statements/text.md
new file mode 100644
index 0000000000..87dc9c14b6
--- /dev/null
+++ b/site/content/tutorial/02-reactivity/03-reactive-statements/text.md
@@ -0,0 +1,27 @@
+---
+title: Statements
+---
+
+We're not limited to declaring reactive *values* — we can also run arbitrary *statements* reactively. For example, we can log the value of `count` whenever it changes:
+
+```js
+$: console.log('the count is ' + count);
+```
+
+You can easily group statements together with a block:
+
+```js
+$: {
+	console.log('the count is ' + count);
+	alert('I SAID THE COUNT IS ' + count);
+}
+```
+
+You can even put the `$:` in front of things like `if` blocks:
+
+```js
+$: if (count >= 10) {
+	alert('count is dangerously high!');
+	count = 9;
+}
+```
\ No newline at end of file
diff --git a/site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/app-a/App.svelte b/site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/app-a/App.svelte
new file mode 100644
index 0000000000..74b11d2399
--- /dev/null
+++ b/site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/app-a/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	let numbers = [1, 2, 3, 4];
+
+	function addNumber() {
+		numbers.push(numbers.length + 1);
+	}
+
+	$: sum = numbers.reduce((t, n) => t + n, 0);
+</script>
+
+<p>{numbers.join(' + ')} = {sum}</p>
+
+<button on:click={addNumber}>
+	Add a number
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/app-b/App.svelte b/site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/app-b/App.svelte
new file mode 100644
index 0000000000..3c2111712e
--- /dev/null
+++ b/site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/app-b/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	let numbers = [1, 2, 3, 4];
+
+	function addNumber() {
+		numbers = [...numbers, numbers.length + 1];
+	}
+
+	$: sum = numbers.reduce((t, n) => t + n, 0);
+</script>
+
+<p>{numbers.join(' + ')} = {sum}</p>
+
+<button on:click={addNumber}>
+	Add a number
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/text.md b/site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/text.md
new file mode 100644
index 0000000000..a298d1d1bb
--- /dev/null
+++ b/site/content/tutorial/02-reactivity/04-updating-arrays-and-objects/text.md
@@ -0,0 +1,54 @@
+---
+title: Updating arrays and objects
+---
+
+Svelte's reactivity is triggered by assignments. Methods that mutate arrays or objects will not trigger updates by themselves.
+
+In this example, clicking the "Add a number" button calls the `addNumber` function, which appends a number to the array but doesn't trigger the recalculation of `sum`.
+
+One way to fix that is to assign `numbers` to itself to tell the compiler it has changed:
+
+```js
+function addNumber() {
+	numbers.push(numbers.length + 1);
+	numbers = numbers;
+}
+```
+
+You could also write this more concisely using the ES6 spread syntax:
+
+```js
+function addNumber() {
+	numbers = [...numbers, numbers.length + 1];
+}
+```
+
+The same rule applies to array methods such as `pop`, `shift`, and `splice` and to objects methods such as `Map.set`, `Set.add`, etc.
+
+Assignments to *properties* of arrays and objects — e.g. `obj.foo += 1` or `array[i] = x` — work the same way as assignments to the values themselves.
+
+```js
+function addNumber() {
+	numbers[numbers.length] = numbers.length + 1;
+}
+```
+
+However, indirect assignments to references such as this...
+
+```js
+const foo = obj.foo;
+foo.bar = 'baz';
+```
+
+or 
+
+```js
+function quox(thing) {
+	thing.foo.bar = 'baz';
+}
+quox(obj);
+```
+
+...won't trigger reactivity on `obj.foo.bar`, unless you follow it up with `obj = obj`.
+
+A simple rule of thumb: the updated variable must directly appear on the left hand side of the assignment.
\ No newline at end of file
diff --git a/site/content/tutorial/02-reactivity/meta.json b/site/content/tutorial/02-reactivity/meta.json
new file mode 100644
index 0000000000..c908815e04
--- /dev/null
+++ b/site/content/tutorial/02-reactivity/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Reactivity"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/01-declaring-props/app-a/App.svelte b/site/content/tutorial/03-props/01-declaring-props/app-a/App.svelte
new file mode 100644
index 0000000000..79d7e6b789
--- /dev/null
+++ b/site/content/tutorial/03-props/01-declaring-props/app-a/App.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested answer={42}/>
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/01-declaring-props/app-a/Nested.svelte b/site/content/tutorial/03-props/01-declaring-props/app-a/Nested.svelte
new file mode 100644
index 0000000000..da9270c7a2
--- /dev/null
+++ b/site/content/tutorial/03-props/01-declaring-props/app-a/Nested.svelte
@@ -0,0 +1,5 @@
+<script>
+	let answer;
+</script>
+
+<p>The answer is {answer}</p>
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/01-declaring-props/app-b/App.svelte b/site/content/tutorial/03-props/01-declaring-props/app-b/App.svelte
new file mode 100644
index 0000000000..79d7e6b789
--- /dev/null
+++ b/site/content/tutorial/03-props/01-declaring-props/app-b/App.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested answer={42}/>
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/01-declaring-props/app-b/Nested.svelte b/site/content/tutorial/03-props/01-declaring-props/app-b/Nested.svelte
new file mode 100644
index 0000000000..ecd3cb6254
--- /dev/null
+++ b/site/content/tutorial/03-props/01-declaring-props/app-b/Nested.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let answer;
+</script>
+
+<p>The answer is {answer}</p>
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/01-declaring-props/text.md b/site/content/tutorial/03-props/01-declaring-props/text.md
new file mode 100644
index 0000000000..26e6762106
--- /dev/null
+++ b/site/content/tutorial/03-props/01-declaring-props/text.md
@@ -0,0 +1,15 @@
+---
+title: Declaring props
+---
+
+So far, we've dealt exclusively with internal state — that is to say, the values are only accessible within a given component.
+
+In any real application, you'll need to pass data from one component down to its children. To do that, we need to declare *properties*, generally shortened to 'props'. In Svelte, we do that with the `export` keyword. Edit the `Nested.svelte` component:
+
+```html
+<script>
+	export let answer;
+</script>
+```
+
+> Just like `$:`, this may feel a little weird at first. That's not how `export` normally works in JavaScript modules! Just roll with it for now — it'll soon become second nature.
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/02-default-values/app-a/App.svelte b/site/content/tutorial/03-props/02-default-values/app-a/App.svelte
new file mode 100644
index 0000000000..79d7e6b789
--- /dev/null
+++ b/site/content/tutorial/03-props/02-default-values/app-a/App.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested answer={42}/>
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/02-default-values/app-a/Nested.svelte b/site/content/tutorial/03-props/02-default-values/app-a/Nested.svelte
new file mode 100644
index 0000000000..ecd3cb6254
--- /dev/null
+++ b/site/content/tutorial/03-props/02-default-values/app-a/Nested.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let answer;
+</script>
+
+<p>The answer is {answer}</p>
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/02-default-values/app-b/App.svelte b/site/content/tutorial/03-props/02-default-values/app-b/App.svelte
new file mode 100644
index 0000000000..f9d63b30d6
--- /dev/null
+++ b/site/content/tutorial/03-props/02-default-values/app-b/App.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested answer={42}/>
+<Nested/>
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/02-default-values/app-b/Nested.svelte b/site/content/tutorial/03-props/02-default-values/app-b/Nested.svelte
new file mode 100644
index 0000000000..35ee5c9f88
--- /dev/null
+++ b/site/content/tutorial/03-props/02-default-values/app-b/Nested.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let answer = 'a mystery';
+</script>
+
+<p>The answer is {answer}</p>
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/02-default-values/text.md b/site/content/tutorial/03-props/02-default-values/text.md
new file mode 100644
index 0000000000..17b486d0ad
--- /dev/null
+++ b/site/content/tutorial/03-props/02-default-values/text.md
@@ -0,0 +1,18 @@
+---
+title: Default values
+---
+
+We can easily specify default values for props in `Nested.svelte`:
+
+```html
+<script>
+	export let answer = 'a mystery';
+</script>
+```
+
+If we now add a second component *without* an `answer` prop, it will fall back to the default:
+
+```html
+<Nested answer={42}/>
+<Nested/>
+```
diff --git a/site/content/tutorial/03-props/03-spread-props/app-a/App.svelte b/site/content/tutorial/03-props/03-spread-props/app-a/App.svelte
new file mode 100644
index 0000000000..91ff42146d
--- /dev/null
+++ b/site/content/tutorial/03-props/03-spread-props/app-a/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Info from './Info.svelte';
+
+	const pkg = {
+		name: 'svelte',
+		version: 3,
+		speed: 'blazing',
+		website: 'https://svelte.dev'
+	};
+</script>
+
+<Info name={pkg.name} version={pkg.version} speed={pkg.speed} website={pkg.website}/>
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/03-spread-props/app-a/Info.svelte b/site/content/tutorial/03-props/03-spread-props/app-a/Info.svelte
new file mode 100644
index 0000000000..7412398244
--- /dev/null
+++ b/site/content/tutorial/03-props/03-spread-props/app-a/Info.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let name;
+	export let version;
+	export let speed;
+	export let website;
+</script>
+
+<p>
+	The <code>{name}</code> package is {speed} fast.
+	Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>
+	and <a href={website}>learn more here</a>
+</p>
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/03-spread-props/app-b/App.svelte b/site/content/tutorial/03-props/03-spread-props/app-b/App.svelte
new file mode 100644
index 0000000000..7071bdbbb7
--- /dev/null
+++ b/site/content/tutorial/03-props/03-spread-props/app-b/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Info from './Info.svelte';
+
+	const pkg = {
+		name: 'svelte',
+		version: 3,
+		speed: 'blazing',
+		website: 'https://svelte.dev'
+	};
+</script>
+
+<Info {...pkg}/>
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/03-spread-props/app-b/Info.svelte b/site/content/tutorial/03-props/03-spread-props/app-b/Info.svelte
new file mode 100644
index 0000000000..7412398244
--- /dev/null
+++ b/site/content/tutorial/03-props/03-spread-props/app-b/Info.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let name;
+	export let version;
+	export let speed;
+	export let website;
+</script>
+
+<p>
+	The <code>{name}</code> package is {speed} fast.
+	Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>
+	and <a href={website}>learn more here</a>
+</p>
\ No newline at end of file
diff --git a/site/content/tutorial/03-props/03-spread-props/text.md b/site/content/tutorial/03-props/03-spread-props/text.md
new file mode 100644
index 0000000000..1480ad8065
--- /dev/null
+++ b/site/content/tutorial/03-props/03-spread-props/text.md
@@ -0,0 +1,11 @@
+---
+title: Spread props
+---
+
+If you have an object of properties, you can 'spread' them onto a component instead of specifying each one:
+
+```html
+<Info {...pkg}/>
+```
+
+> Conversely, if you need to reference all the props that were passed into a component, including ones that weren't declared with `export`, you can do so by accessing `$$props` directly. It's not generally recommended, as it's difficult for Svelte to optimise, but it's useful in rare cases.
diff --git a/site/content/tutorial/03-props/meta.json b/site/content/tutorial/03-props/meta.json
new file mode 100644
index 0000000000..7b9e0a2783
--- /dev/null
+++ b/site/content/tutorial/03-props/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Props"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/04-logic/01-if-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/01-if-blocks/app-a/App.svelte
new file mode 100644
index 0000000000..38efdc9ddd
--- /dev/null
+++ b/site/content/tutorial/04-logic/01-if-blocks/app-a/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	let user = { loggedIn: false };
+
+	function toggle() {
+		user.loggedIn = !user.loggedIn;
+	}
+</script>
+
+<button on:click={toggle}>
+	Log out
+</button>
+
+<button on:click={toggle}>
+	Log in
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/04-logic/01-if-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/01-if-blocks/app-b/App.svelte
new file mode 100644
index 0000000000..01b8867ade
--- /dev/null
+++ b/site/content/tutorial/04-logic/01-if-blocks/app-b/App.svelte
@@ -0,0 +1,19 @@
+<script>
+	let user = { loggedIn: false };
+
+	function toggle() {
+		user.loggedIn = !user.loggedIn;
+	}
+</script>
+
+{#if user.loggedIn}
+	<button on:click={toggle}>
+		Log out
+	</button>
+{/if}
+
+{#if !user.loggedIn}
+	<button on:click={toggle}>
+		Log in
+	</button>
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/04-logic/01-if-blocks/text.md b/site/content/tutorial/04-logic/01-if-blocks/text.md
new file mode 100644
index 0000000000..33915070cb
--- /dev/null
+++ b/site/content/tutorial/04-logic/01-if-blocks/text.md
@@ -0,0 +1,23 @@
+---
+title: If blocks
+---
+
+HTML doesn't have a way of expressing *logic*, like conditionals and loops. Svelte does.
+
+To conditionally render some markup, we wrap it in an `if` block:
+
+```html
+{#if user.loggedIn}
+	<button on:click={toggle}>
+		Log out
+	</button>
+{/if}
+
+{#if !user.loggedIn}
+	<button on:click={toggle}>
+		Log in
+	</button>
+{/if}
+```
+
+Try it — update the component, and click on the buttons.
\ No newline at end of file
diff --git a/site/content/tutorial/04-logic/02-else-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/02-else-blocks/app-a/App.svelte
new file mode 100644
index 0000000000..01b8867ade
--- /dev/null
+++ b/site/content/tutorial/04-logic/02-else-blocks/app-a/App.svelte
@@ -0,0 +1,19 @@
+<script>
+	let user = { loggedIn: false };
+
+	function toggle() {
+		user.loggedIn = !user.loggedIn;
+	}
+</script>
+
+{#if user.loggedIn}
+	<button on:click={toggle}>
+		Log out
+	</button>
+{/if}
+
+{#if !user.loggedIn}
+	<button on:click={toggle}>
+		Log in
+	</button>
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/04-logic/02-else-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/02-else-blocks/app-b/App.svelte
new file mode 100644
index 0000000000..c82565c2f7
--- /dev/null
+++ b/site/content/tutorial/04-logic/02-else-blocks/app-b/App.svelte
@@ -0,0 +1,17 @@
+<script>
+	let user = { loggedIn: false };
+
+	function toggle() {
+		user.loggedIn = !user.loggedIn;
+	}
+</script>
+
+{#if user.loggedIn}
+	<button on:click={toggle}>
+		Log out
+	</button>
+{:else}
+	<button on:click={toggle}>
+		Log in
+	</button>
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/04-logic/02-else-blocks/text.md b/site/content/tutorial/04-logic/02-else-blocks/text.md
new file mode 100644
index 0000000000..d25a7d3897
--- /dev/null
+++ b/site/content/tutorial/04-logic/02-else-blocks/text.md
@@ -0,0 +1,19 @@
+---
+title: Else blocks
+---
+
+Since the two conditions — `if user.loggedIn` and `if !user.loggedIn` — are mutually exclusive, we can simplify this component slightly by using an `else` block:
+
+```html
+{#if user.loggedIn}
+	<button on:click={toggle}>
+		Log out
+	</button>
+{:else}
+	<button on:click={toggle}>
+		Log in
+	</button>
+{/if}
+```
+
+> A `#` character always indicates a *block opening* tag. A `/` character always indicates a *block closing* tag. A `:` character, as in `{:else}`, indicates a *block continuation* tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML.
\ No newline at end of file
diff --git a/site/content/tutorial/04-logic/03-else-if-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/03-else-if-blocks/app-a/App.svelte
new file mode 100644
index 0000000000..efffa9af2b
--- /dev/null
+++ b/site/content/tutorial/04-logic/03-else-if-blocks/app-a/App.svelte
@@ -0,0 +1,13 @@
+<script>
+	let x = 7;
+</script>
+
+{#if x > 10}
+	<p>{x} is greater than 10</p>
+{:else}
+	{#if 5 > x}
+		<p>{x} is less than 5</p>
+	{:else}
+		<p>{x} is between 5 and 10</p>
+	{/if}
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/04-logic/03-else-if-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/03-else-if-blocks/app-b/App.svelte
new file mode 100644
index 0000000000..9102618ff4
--- /dev/null
+++ b/site/content/tutorial/04-logic/03-else-if-blocks/app-b/App.svelte
@@ -0,0 +1,11 @@
+<script>
+	let x = 7;
+</script>
+
+{#if x > 10}
+	<p>{x} is greater than 10</p>
+{:else if 5 > x}
+	<p>{x} is less than 5</p>
+{:else}
+	<p>{x} is between 5 and 10</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/04-logic/03-else-if-blocks/text.md b/site/content/tutorial/04-logic/03-else-if-blocks/text.md
new file mode 100644
index 0000000000..18faeacfe6
--- /dev/null
+++ b/site/content/tutorial/04-logic/03-else-if-blocks/text.md
@@ -0,0 +1,15 @@
+---
+title: Else-if blocks
+---
+
+Multiple conditions can be 'chained' together with `else if`:
+
+```html
+{#if x > 10}
+	<p>{x} is greater than 10</p>
+{:else if 5 > x}
+	<p>{x} is less than 5</p>
+{:else}
+	<p>{x} is between 5 and 10</p>
+{/if}
+```
\ No newline at end of file
diff --git a/site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte
new file mode 100644
index 0000000000..34fb2cebfc
--- /dev/null
+++ b/site/content/tutorial/04-logic/04-each-blocks/app-a/App.svelte
@@ -0,0 +1,17 @@
+<script>
+	let cats = [
+		{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
+		{ id: 'z_AbfPXTKms', name: 'Maru' },
+		{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
+	];
+</script>
+
+<h1>The Famous Cats of YouTube</h1>
+
+<ul>
+	<!-- open each block -->
+		<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
+			{cat.name}
+		</a></li>
+	<!-- close each block -->
+</ul>
\ No newline at end of file
diff --git a/site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte
new file mode 100644
index 0000000000..6ea5097be2
--- /dev/null
+++ b/site/content/tutorial/04-logic/04-each-blocks/app-b/App.svelte
@@ -0,0 +1,17 @@
+<script>
+	let cats = [
+		{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
+		{ id: 'z_AbfPXTKms', name: 'Maru' },
+		{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
+	];
+</script>
+
+<h1>The Famous Cats of YouTube</h1>
+
+<ul>
+	{#each cats as { id, name }, i}
+		<li><a target="_blank" href="https://www.youtube.com/watch?v={id}">
+			{i + 1}: {name}
+		</a></li>
+	{/each}
+</ul>
\ No newline at end of file
diff --git a/site/content/tutorial/04-logic/04-each-blocks/text.md b/site/content/tutorial/04-logic/04-each-blocks/text.md
new file mode 100644
index 0000000000..886990f5a0
--- /dev/null
+++ b/site/content/tutorial/04-logic/04-each-blocks/text.md
@@ -0,0 +1,29 @@
+---
+title: Each blocks
+---
+
+If you need to loop over lists of data, use an `each` block:
+
+```html
+<ul>
+	{#each cats as cat}
+		<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
+			{cat.name}
+		</a></li>
+	{/each}
+</ul>
+```
+
+> The expression (`cats`, in this case) can be any array or array-like object (i.e. it has a `length` property). You can loop over generic iterables with `each [...iterable]`.
+
+You can get the current *index* as a second argument, like so:
+
+```html
+{#each cats as cat, i}
+	<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
+		{i + 1}: {cat.name}
+	</a></li>
+{/each}
+```
+
+If you prefer, you can use destructuring — `each cats as { id, name }` — and replace `cat.id` and `cat.name` with `id` and `name`.
\ No newline at end of file
diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte
new file mode 100644
index 0000000000..36a97ea1ba
--- /dev/null
+++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/App.svelte
@@ -0,0 +1,23 @@
+<script>
+	import Thing from './Thing.svelte';
+
+	let things = [
+		{ id: 1, name: 'apple' },
+		{ id: 2, name: 'banana' },
+		{ id: 3, name: 'carrot' },
+		{ id: 4, name: 'doughnut' },
+		{ id: 5, name: 'egg' },
+	];
+
+	function handleClick() {
+		things = things.slice(1);
+	}
+</script>
+
+<button on:click={handleClick}>
+	Remove first thing
+</button>
+
+{#each things as thing}
+	<Thing name={thing.name}/>
+{/each}
diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte
new file mode 100644
index 0000000000..02e6fa7640
--- /dev/null
+++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-a/Thing.svelte
@@ -0,0 +1,32 @@
+<script>
+	const emojis = {
+        apple: "🍎",
+        banana: "🍌",
+        carrot: "🥕",
+        doughnut: "🍩",
+        egg: "🥚"
+	}
+
+	// the name is updated whenever the prop value changes...
+	export let name;
+
+	// ...but the "emoji" variable is fixed upon initialisation of the component
+	const emoji = emojis[name];
+</script>
+
+<p>
+	<span>The emoji for { name } is { emoji }</span>
+</p>
+
+<style>
+	p {
+		margin: 0.8em 0;
+	}
+	span {
+		display: inline-block;
+		padding: 0.2em 1em 0.3em;
+		text-align: center;
+		border-radius: 0.2em;
+		background-color: #FFDFD3;
+	}
+</style>
diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte
new file mode 100644
index 0000000000..0939d58b8a
--- /dev/null
+++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/App.svelte
@@ -0,0 +1,23 @@
+<script>
+	import Thing from './Thing.svelte';
+
+	let things = [
+		{ id: 1, name: 'apple' },
+		{ id: 2, name: 'banana' },
+		{ id: 3, name: 'carrot' },
+		{ id: 4, name: 'doughnut' },
+		{ id: 5, name: 'egg' },
+	];
+
+	function handleClick() {
+		things = things.slice(1);
+	}
+</script>
+
+<button on:click={handleClick}>
+	Remove first thing
+</button>
+
+{#each things as thing (thing.id) }
+	<Thing name={thing.name}/>
+{/each}
diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte
new file mode 100644
index 0000000000..02e6fa7640
--- /dev/null
+++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/app-b/Thing.svelte
@@ -0,0 +1,32 @@
+<script>
+	const emojis = {
+        apple: "🍎",
+        banana: "🍌",
+        carrot: "🥕",
+        doughnut: "🍩",
+        egg: "🥚"
+	}
+
+	// the name is updated whenever the prop value changes...
+	export let name;
+
+	// ...but the "emoji" variable is fixed upon initialisation of the component
+	const emoji = emojis[name];
+</script>
+
+<p>
+	<span>The emoji for { name } is { emoji }</span>
+</p>
+
+<style>
+	p {
+		margin: 0.8em 0;
+	}
+	span {
+		display: inline-block;
+		padding: 0.2em 1em 0.3em;
+		text-align: center;
+		border-radius: 0.2em;
+		background-color: #FFDFD3;
+	}
+</style>
diff --git a/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md b/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md
new file mode 100644
index 0000000000..76d8322fb0
--- /dev/null
+++ b/site/content/tutorial/04-logic/05-keyed-each-blocks/text.md
@@ -0,0 +1,21 @@
+---
+title: Keyed each blocks
+---
+
+By default, when you modify the value of an `each` block, it will add and remove items at the *end* of the block, and update any values that have changed. That might not be what you want.
+
+It's easier to show why than to explain. Click the 'Remove first thing' button a few times, and notice what happens: it does not remove the first `<Thing>` component, but rather the *last* DOM node. Then it updates the `name` value in the remaining DOM nodes, but not the emoji. 
+
+Instead, we'd like to remove only the first `<Thing>` component and its DOM node, and leave the others unaffected.
+
+To do that, we specify a unique identifier (or "key") for the `each` block:
+
+```html
+{#each things as thing (thing.id)}
+	<Thing name={thing.name}/>
+{/each}
+```
+
+Here, `(thing.id)` is the *key*, which tells Svelte how to figure out which DOM node to change when the component updates.
+
+> You can use any object as the key, as Svelte uses a `Map` internally — in other words you could do `(thing)` instead of `(thing.id)`. Using a string or number is generally safer, however, since it means identity persists without referential equality, for example when updating with fresh data from an API server.
diff --git a/site/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte b/site/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte
new file mode 100644
index 0000000000..c473065f63
--- /dev/null
+++ b/site/content/tutorial/04-logic/06-await-blocks/app-a/App.svelte
@@ -0,0 +1,25 @@
+<script>
+	async function getRandomNumber() {
+		const res = await fetch(`/tutorial/random-number`);
+		const text = await res.text();
+
+		if (res.ok) {
+			return text;
+		} else {
+			throw new Error(text);
+		}
+	}
+
+	let promise = getRandomNumber();
+
+	function handleClick() {
+		promise = getRandomNumber();
+	}
+</script>
+
+<button on:click={handleClick}>
+	generate random number
+</button>
+
+<!-- replace this element -->
+<p>{promise}</p>
diff --git a/site/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte b/site/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte
new file mode 100644
index 0000000000..a05bd884d1
--- /dev/null
+++ b/site/content/tutorial/04-logic/06-await-blocks/app-b/App.svelte
@@ -0,0 +1,30 @@
+<script>
+	async function getRandomNumber() {
+		const res = await fetch(`/tutorial/random-number`);
+		const text = await res.text();
+
+		if (res.ok) {
+			return text;
+		} else {
+			throw new Error(text);
+		}
+	}
+	
+	let promise = getRandomNumber();
+
+	function handleClick() {
+		promise = getRandomNumber();
+	}
+</script>
+
+<button on:click={handleClick}>
+	generate random number
+</button>
+
+{#await promise}
+	<p>...waiting</p>
+{:then number}
+	<p>The number is {number}</p>
+{:catch error}
+	<p style="color: red">{error.message}</p>
+{/await}
diff --git a/site/content/tutorial/04-logic/06-await-blocks/text.md b/site/content/tutorial/04-logic/06-await-blocks/text.md
new file mode 100644
index 0000000000..0d47dcde95
--- /dev/null
+++ b/site/content/tutorial/04-logic/06-await-blocks/text.md
@@ -0,0 +1,25 @@
+---
+title: Await blocks
+---
+
+Most web applications have to deal with asynchronous data at some point. Svelte makes it easy to *await* the value of [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) directly in your markup:
+
+```html
+{#await promise}
+	<p>...waiting</p>
+{:then number}
+	<p>The number is {number}</p>
+{:catch error}
+	<p style="color: red">{error.message}</p>
+{/await}
+```
+
+> Only the most recent `promise` is considered, meaning you don't need to worry about race conditions.
+
+If you know that your promise can't reject, you can omit the `catch` block. You can also omit the first block if you don't want to show anything until the promise resolves:
+
+```html
+{#await promise then value}
+	<p>the value is {value}</p>
+{/await}
+```
\ No newline at end of file
diff --git a/site/content/tutorial/04-logic/meta.json b/site/content/tutorial/04-logic/meta.json
new file mode 100644
index 0000000000..3ecf1ccee2
--- /dev/null
+++ b/site/content/tutorial/04-logic/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Logic"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/01-dom-events/app-a/App.svelte b/site/content/tutorial/05-events/01-dom-events/app-a/App.svelte
new file mode 100644
index 0000000000..0ba620308e
--- /dev/null
+++ b/site/content/tutorial/05-events/01-dom-events/app-a/App.svelte
@@ -0,0 +1,16 @@
+<script>
+	let m = { x: 0, y: 0 };
+
+	function handleMousemove(event) {
+		m.x = event.clientX;
+		m.y = event.clientY;
+	}
+</script>
+
+<div>
+	The mouse position is {m.x} x {m.y}
+</div>
+
+<style>
+	div { width: 100%; height: 100%; }
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/01-dom-events/app-b/App.svelte b/site/content/tutorial/05-events/01-dom-events/app-b/App.svelte
new file mode 100644
index 0000000000..de1f664112
--- /dev/null
+++ b/site/content/tutorial/05-events/01-dom-events/app-b/App.svelte
@@ -0,0 +1,16 @@
+<script>
+	let m = { x: 0, y: 0 };
+
+	function handleMousemove(event) {
+		m.x = event.clientX;
+		m.y = event.clientY;
+	}
+</script>
+
+<div on:mousemove={handleMousemove}>
+	The mouse position is {m.x} x {m.y}
+</div>
+
+<style>
+	div { width: 100%; height: 100%; }
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/01-dom-events/text.md b/site/content/tutorial/05-events/01-dom-events/text.md
new file mode 100644
index 0000000000..1c08c9159a
--- /dev/null
+++ b/site/content/tutorial/05-events/01-dom-events/text.md
@@ -0,0 +1,11 @@
+---
+title: DOM events
+---
+
+As we've briefly seen already, you can listen to any event on an element with the `on:` directive:
+
+```html
+<div on:mousemove={handleMousemove}>
+	The mouse position is {m.x} x {m.y}
+</div>
+```
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/02-inline-handlers/app-a/App.svelte b/site/content/tutorial/05-events/02-inline-handlers/app-a/App.svelte
new file mode 100644
index 0000000000..de1f664112
--- /dev/null
+++ b/site/content/tutorial/05-events/02-inline-handlers/app-a/App.svelte
@@ -0,0 +1,16 @@
+<script>
+	let m = { x: 0, y: 0 };
+
+	function handleMousemove(event) {
+		m.x = event.clientX;
+		m.y = event.clientY;
+	}
+</script>
+
+<div on:mousemove={handleMousemove}>
+	The mouse position is {m.x} x {m.y}
+</div>
+
+<style>
+	div { width: 100%; height: 100%; }
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/02-inline-handlers/app-b/App.svelte b/site/content/tutorial/05-events/02-inline-handlers/app-b/App.svelte
new file mode 100644
index 0000000000..36fed40a4f
--- /dev/null
+++ b/site/content/tutorial/05-events/02-inline-handlers/app-b/App.svelte
@@ -0,0 +1,11 @@
+<script>
+	let m = { x: 0, y: 0 };
+</script>
+
+<div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">
+	The mouse position is {m.x} x {m.y}
+</div>
+
+<style>
+	div { width: 100%; height: 100%; }
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/02-inline-handlers/text.md b/site/content/tutorial/05-events/02-inline-handlers/text.md
new file mode 100644
index 0000000000..0ec177cb44
--- /dev/null
+++ b/site/content/tutorial/05-events/02-inline-handlers/text.md
@@ -0,0 +1,15 @@
+---
+title: Inline handlers
+---
+
+You can also declare event handlers inline:
+
+```html
+<div on:mousemove="{e => m = { x: e.clientX, y: e.clientY }}">
+	The mouse position is {m.x} x {m.y}
+</div>
+```
+
+The quote marks are optional, but they're helpful for syntax highlighting in some environments.
+
+> In some frameworks you may see recommendations to avoid inline event handlers for performance reasons, particularly inside loops. That advice doesn't apply to Svelte — the compiler will always do the right thing, whichever form you choose.
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/03-event-modifiers/app-a/App.svelte b/site/content/tutorial/05-events/03-event-modifiers/app-a/App.svelte
new file mode 100644
index 0000000000..e49115d4f1
--- /dev/null
+++ b/site/content/tutorial/05-events/03-event-modifiers/app-a/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	function handleClick() {
+		alert('clicked')
+	}
+</script>
+
+<button on:click={handleClick}>
+	Click me
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/03-event-modifiers/app-b/App.svelte b/site/content/tutorial/05-events/03-event-modifiers/app-b/App.svelte
new file mode 100644
index 0000000000..94df49cb2d
--- /dev/null
+++ b/site/content/tutorial/05-events/03-event-modifiers/app-b/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	function handleClick() {
+		alert('no more alerts')
+	}
+</script>
+
+<button on:click|once={handleClick}>
+	Click me
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/03-event-modifiers/text.md b/site/content/tutorial/05-events/03-event-modifiers/text.md
new file mode 100644
index 0000000000..e9963b78e2
--- /dev/null
+++ b/site/content/tutorial/05-events/03-event-modifiers/text.md
@@ -0,0 +1,30 @@
+---
+title: Event modifiers
+---
+
+DOM event handlers can have *modifiers* that alter their behaviour. For example, a handler with a `once` modifier will only run a single time:
+
+```html
+<script>
+	function handleClick() {
+		alert('no more alerts')
+	}
+</script>
+
+<button on:click|once={handleClick}>
+	Click me
+</button>
+```
+
+The full list of modifiers:
+
+* `preventDefault` — calls `event.preventDefault()` before running the handler. Useful for client-side form handling, for example.
+* `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element
+* `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)
+* `nonpassive` — explicitly set `passive: false`
+* `capture` — fires the handler during the *capture* phase instead of the *bubbling* phase ([MDN docs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture))
+* `once` — remove the handler after the first time it runs
+* `self` — only trigger handler if event.target is the element itself
+* `trusted` — only trigger handler if `event.isTrusted` is `true`. I.e. if the event is triggered by a user action.
+
+You can chain modifiers together, e.g. `on:click|once|capture={...}`.
diff --git a/site/content/tutorial/05-events/04-component-events/app-a/App.svelte b/site/content/tutorial/05-events/04-component-events/app-a/App.svelte
new file mode 100644
index 0000000000..a8d14a368a
--- /dev/null
+++ b/site/content/tutorial/05-events/04-component-events/app-a/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Inner from './Inner.svelte';
+
+	function handleMessage(event) {
+		alert(event.detail.text);
+	}
+</script>
+
+<Inner on:message={handleMessage}/>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/04-component-events/app-a/Inner.svelte b/site/content/tutorial/05-events/04-component-events/app-a/Inner.svelte
new file mode 100644
index 0000000000..0a7980c45c
--- /dev/null
+++ b/site/content/tutorial/05-events/04-component-events/app-a/Inner.svelte
@@ -0,0 +1,11 @@
+<script>
+	// setup code goes here
+
+	function sayHello() {
+
+	}
+</script>
+
+<button on:click={sayHello}>
+	Click to say hello
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/04-component-events/app-b/App.svelte b/site/content/tutorial/05-events/04-component-events/app-b/App.svelte
new file mode 100644
index 0000000000..a8d14a368a
--- /dev/null
+++ b/site/content/tutorial/05-events/04-component-events/app-b/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Inner from './Inner.svelte';
+
+	function handleMessage(event) {
+		alert(event.detail.text);
+	}
+</script>
+
+<Inner on:message={handleMessage}/>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/04-component-events/app-b/Inner.svelte b/site/content/tutorial/05-events/04-component-events/app-b/Inner.svelte
new file mode 100644
index 0000000000..6ac8301f24
--- /dev/null
+++ b/site/content/tutorial/05-events/04-component-events/app-b/Inner.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	function sayHello() {
+		dispatch('message', {
+			text: 'Hello!'
+		});
+	}
+</script>
+
+<button on:click={sayHello}>
+	Click to say hello
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/04-component-events/text.md b/site/content/tutorial/05-events/04-component-events/text.md
new file mode 100644
index 0000000000..ba3cd5b9c4
--- /dev/null
+++ b/site/content/tutorial/05-events/04-component-events/text.md
@@ -0,0 +1,27 @@
+---
+title: Component events
+---
+
+Components can also dispatch events. To do so, they must create an event dispatcher. Update `Inner.svelte`:
+
+```html
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	function sayHello() {
+		dispatch('message', {
+			text: 'Hello!'
+		});
+	}
+</script>
+```
+
+> `createEventDispatcher` must be called when the component is first instantiated — you can't do it later inside e.g. a `setTimeout` callback. This links `dispatch` to the component instance.
+
+Notice that the `App` component is listening to the messages dispatched by `Inner` component thanks to the `on:message` directive. This directive is an attribute prefixed with `on:` followed by the event name that we are dispatching (in this case, `message`).
+
+Without this attribute, messages would still be dispatched, but the App would not react to it. You can try removing the `on:message` attribute and pressing the button again.
+
+> You can also try changing the event name to something else. For instance, change `dispatch('message')` to `dispatch('myevent')` in `Inner.svelte` and change the attribute name from `on:message` to `on:myevent` in the `App.svelte` component.
diff --git a/site/content/tutorial/05-events/05-event-forwarding/app-a/App.svelte b/site/content/tutorial/05-events/05-event-forwarding/app-a/App.svelte
new file mode 100644
index 0000000000..973df50f0a
--- /dev/null
+++ b/site/content/tutorial/05-events/05-event-forwarding/app-a/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Outer from './Outer.svelte';
+
+	function handleMessage(event) {
+		alert(event.detail.text);
+	}
+</script>
+
+<Outer on:message={handleMessage}/>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/05-event-forwarding/app-a/Inner.svelte b/site/content/tutorial/05-events/05-event-forwarding/app-a/Inner.svelte
new file mode 100644
index 0000000000..6ac8301f24
--- /dev/null
+++ b/site/content/tutorial/05-events/05-event-forwarding/app-a/Inner.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	function sayHello() {
+		dispatch('message', {
+			text: 'Hello!'
+		});
+	}
+</script>
+
+<button on:click={sayHello}>
+	Click to say hello
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/05-event-forwarding/app-a/Outer.svelte b/site/content/tutorial/05-events/05-event-forwarding/app-a/Outer.svelte
new file mode 100644
index 0000000000..6c13070e79
--- /dev/null
+++ b/site/content/tutorial/05-events/05-event-forwarding/app-a/Outer.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Inner from './Inner.svelte';
+</script>
+
+<Inner/>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/05-event-forwarding/app-b/App.svelte b/site/content/tutorial/05-events/05-event-forwarding/app-b/App.svelte
new file mode 100644
index 0000000000..973df50f0a
--- /dev/null
+++ b/site/content/tutorial/05-events/05-event-forwarding/app-b/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Outer from './Outer.svelte';
+
+	function handleMessage(event) {
+		alert(event.detail.text);
+	}
+</script>
+
+<Outer on:message={handleMessage}/>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/05-event-forwarding/app-b/Inner.svelte b/site/content/tutorial/05-events/05-event-forwarding/app-b/Inner.svelte
new file mode 100644
index 0000000000..6ac8301f24
--- /dev/null
+++ b/site/content/tutorial/05-events/05-event-forwarding/app-b/Inner.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	function sayHello() {
+		dispatch('message', {
+			text: 'Hello!'
+		});
+	}
+</script>
+
+<button on:click={sayHello}>
+	Click to say hello
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/05-event-forwarding/app-b/Outer.svelte b/site/content/tutorial/05-events/05-event-forwarding/app-b/Outer.svelte
new file mode 100644
index 0000000000..10c28f298a
--- /dev/null
+++ b/site/content/tutorial/05-events/05-event-forwarding/app-b/Outer.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Inner from './Inner.svelte';
+</script>
+
+<Inner on:message/>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/05-event-forwarding/text.md b/site/content/tutorial/05-events/05-event-forwarding/text.md
new file mode 100644
index 0000000000..514b812aba
--- /dev/null
+++ b/site/content/tutorial/05-events/05-event-forwarding/text.md
@@ -0,0 +1,34 @@
+---
+title: Event forwarding
+---
+
+Unlike DOM events, component events don't *bubble*. If you want to listen to an event on some deeply nested component, the intermediate components must *forward* the event.
+
+In this case, we have the same `App.svelte` and `Inner.svelte` as in the [previous chapter](/tutorial/component-events), but there's now an `Outer.svelte` component that contains `<Inner/>`.
+
+One way we could solve the problem is adding `createEventDispatcher` to `Outer.svelte`, listening for the `message` event, and creating a handler for it:
+
+```html
+<script>
+	import Inner from './Inner.svelte';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	function forward(event) {
+		dispatch('message', event.detail);
+	}
+</script>
+
+<Inner on:message={forward}/>
+```
+
+But that's a lot of code to write, so Svelte gives us an equivalent shorthand — an `on:message` event directive without a value means 'forward all `message` events'.
+
+```html
+<script>
+	import Inner from './Inner.svelte';
+</script>
+
+<Inner on:message/>
+```
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte
new file mode 100644
index 0000000000..32c4e2a33c
--- /dev/null
+++ b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	import CustomButton from './CustomButton.svelte';
+
+	function handleClick() {
+		alert('Button Clicked');
+	}
+</script>
+
+<CustomButton on:click={handleClick}/>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte
new file mode 100644
index 0000000000..d7292a3717
--- /dev/null
+++ b/site/content/tutorial/05-events/06-dom-event-forwarding/app-a/CustomButton.svelte
@@ -0,0 +1,22 @@
+<button>
+	Click me
+</button>
+
+<style>
+	button {
+		background: #E2E8F0;
+		color: #64748B;
+		border: unset;
+		border-radius: 6px;
+		padding: .75rem 1.5rem;
+		cursor: pointer;
+	}
+	button:hover {
+		background: #CBD5E1;
+		color: #475569;
+	}
+	button:focus {
+		background: #94A3B8;
+		color: #F1F5F9;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte
new file mode 100644
index 0000000000..32c4e2a33c
--- /dev/null
+++ b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	import CustomButton from './CustomButton.svelte';
+
+	function handleClick() {
+		alert('Button Clicked');
+	}
+</script>
+
+<CustomButton on:click={handleClick}/>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
new file mode 100644
index 0000000000..141ea14980
--- /dev/null
+++ b/site/content/tutorial/05-events/06-dom-event-forwarding/app-b/CustomButton.svelte
@@ -0,0 +1,22 @@
+<button on:click>
+	Click me
+</button>
+
+<style>
+	button {
+		background: #E2E8F0;
+		color: #64748B;
+		border: unset;
+		border-radius: 6px;
+		padding: .75rem 1.5rem;
+		cursor: pointer;
+	}
+	button:hover {
+		background: #CBD5E1;
+		color: #475569;
+	}
+	button:focus {
+		background: #94A3B8;
+		color: #F1F5F9;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/06-dom-event-forwarding/text.md b/site/content/tutorial/05-events/06-dom-event-forwarding/text.md
new file mode 100644
index 0000000000..be9ae77f89
--- /dev/null
+++ b/site/content/tutorial/05-events/06-dom-event-forwarding/text.md
@@ -0,0 +1,13 @@
+---
+title: DOM event forwarding
+---
+
+Event forwarding works for DOM events too.
+
+We want to get notified of clicks on our `<CustomButton>` — to do that, we just need to forward `click` events on the `<button>` element in `CustomButton.svelte`:
+
+```html
+<button on:click>
+	Click me
+</button>
+```
\ No newline at end of file
diff --git a/site/content/tutorial/05-events/meta.json b/site/content/tutorial/05-events/meta.json
new file mode 100644
index 0000000000..c5f088e208
--- /dev/null
+++ b/site/content/tutorial/05-events/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Events"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/01-text-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/01-text-inputs/app-a/App.svelte
new file mode 100644
index 0000000000..f1c03071ed
--- /dev/null
+++ b/site/content/tutorial/06-bindings/01-text-inputs/app-a/App.svelte
@@ -0,0 +1,7 @@
+<script>
+	let name = 'world';
+</script>
+
+<input value={name}>
+
+<h1>Hello {name}!</h1>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/01-text-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
new file mode 100644
index 0000000000..89dd54a709
--- /dev/null
+++ b/site/content/tutorial/06-bindings/01-text-inputs/app-b/App.svelte
@@ -0,0 +1,7 @@
+<script>
+	let name = 'world';
+</script>
+
+<input bind:value={name}>
+
+<h1>Hello {name}!</h1>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/01-text-inputs/text.md b/site/content/tutorial/06-bindings/01-text-inputs/text.md
new file mode 100644
index 0000000000..7bfe4bb86c
--- /dev/null
+++ b/site/content/tutorial/06-bindings/01-text-inputs/text.md
@@ -0,0 +1,15 @@
+---
+title: Text inputs
+---
+
+As a general rule, data flow in Svelte is *top down* — a parent component can set props on a child component, and a component can set attributes on an element, but not the other way around.
+
+Sometimes it's useful to break that rule. Take the case of the `<input>` element in this component — we *could* add an `on:input` event handler that sets the value of `name` to `event.target.value`, but it's a bit... boilerplatey. It gets even worse with other form elements, as we'll see.
+
+Instead, we can use the `bind:value` directive:
+
+```html
+<input bind:value={name}>
+```
+
+This means that not only will changes to the value of `name` update the input value, but changes to the input value will update `name`.
diff --git a/site/content/tutorial/06-bindings/02-numeric-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/02-numeric-inputs/app-a/App.svelte
new file mode 100644
index 0000000000..795090a8bd
--- /dev/null
+++ b/site/content/tutorial/06-bindings/02-numeric-inputs/app-a/App.svelte
@@ -0,0 +1,21 @@
+<script>
+	let a = 1;
+	let b = 2;
+</script>
+
+<label>
+	<input type=number value={a} min=0 max=10>
+	<input type=range value={a} min=0 max=10>
+</label>
+
+<label>
+	<input type=number value={b} min=0 max=10>
+	<input type=range value={b} min=0 max=10>
+</label>
+
+<p>{a} + {b} = {a + b}</p>
+
+<style>
+	label { display: flex }
+	input, p { margin: 6px }
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte
new file mode 100644
index 0000000000..a419675623
--- /dev/null
+++ b/site/content/tutorial/06-bindings/02-numeric-inputs/app-b/App.svelte
@@ -0,0 +1,21 @@
+<script>
+	let a = 1;
+	let b = 2;
+</script>
+
+<label>
+	<input type=number bind:value={a} min=0 max=10>
+	<input type=range bind:value={a} min=0 max=10>
+</label>
+
+<label>
+	<input type=number bind:value={b} min=0 max=10>
+	<input type=range bind:value={b} min=0 max=10>
+</label>
+
+<p>{a} + {b} = {a + b}</p>
+
+<style>
+	label { display: flex }
+	input, p { margin: 6px }
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/02-numeric-inputs/text.md b/site/content/tutorial/06-bindings/02-numeric-inputs/text.md
new file mode 100644
index 0000000000..1ede244301
--- /dev/null
+++ b/site/content/tutorial/06-bindings/02-numeric-inputs/text.md
@@ -0,0 +1,12 @@
+---
+title: Numeric inputs
+---
+
+In the DOM, everything is a string. That's unhelpful when you're dealing with numeric inputs — `type="number"` and `type="range"` — as it means you have to remember to coerce `input.value` before using it.
+
+With `bind:value`, Svelte takes care of it for you:
+
+```html
+<input type=number bind:value={a} min=0 max=10>
+<input type=range bind:value={a} min=0 max=10>
+```
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte
new file mode 100644
index 0000000000..2847dad485
--- /dev/null
+++ b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-a/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	let yes = false;
+</script>
+
+<label>
+	<input type=checkbox checked={yes}>
+	Yes! Send me regular email spam
+</label>
+
+{#if yes}
+	<p>Thank you. We will bombard your inbox and sell your personal details.</p>
+{:else}
+	<p>You must opt in to continue. If you're not paying, you're the product.</p>
+{/if}
+
+<button disabled={!yes}>
+	Subscribe
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
new file mode 100644
index 0000000000..b82d31e783
--- /dev/null
+++ b/site/content/tutorial/06-bindings/03-checkbox-inputs/app-b/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	let yes = false;
+</script>
+
+<label>
+	<input type=checkbox bind:checked={yes}>
+	Yes! Send me regular email spam
+</label>
+
+{#if yes}
+	<p>Thank you. We will bombard your inbox and sell your personal details.</p>
+{:else}
+	<p>You must opt in to continue. If you're not paying, you're the product.</p>
+{/if}
+
+<button disabled={!yes}>
+	Subscribe
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/03-checkbox-inputs/text.md b/site/content/tutorial/06-bindings/03-checkbox-inputs/text.md
new file mode 100644
index 0000000000..621d9fbb7b
--- /dev/null
+++ b/site/content/tutorial/06-bindings/03-checkbox-inputs/text.md
@@ -0,0 +1,9 @@
+---
+title: Checkbox inputs
+---
+
+Checkboxes are used for toggling between states. Instead of binding to `input.value`, we bind to `input.checked`:
+
+```html
+<input type=checkbox bind:checked={yes}>
+```
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte
new file mode 100644
index 0000000000..3a29f89484
--- /dev/null
+++ b/site/content/tutorial/06-bindings/04-group-inputs/app-a/App.svelte
@@ -0,0 +1,54 @@
+<script>
+	let scoops = 1;
+	let flavours = ['Mint choc chip'];
+
+	function join(flavours) {
+		if (flavours.length === 1) return flavours[0];
+		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
+	}
+</script>
+
+<h2>Size</h2>
+
+<label>
+	<input type=radio group={scoops} name="scoops" value={1}>
+	One scoop
+</label>
+
+<label>
+	<input type=radio group={scoops} name="scoops" value={2}>
+	Two scoops
+</label>
+
+<label>
+	<input type=radio group={scoops} name="scoops" value={3}>
+	Three scoops
+</label>
+
+<h2>Flavours</h2>
+
+<label>
+	<input type=checkbox group={flavours} name="flavours" value="Cookies and cream">
+	Cookies and cream
+</label>
+
+<label>
+	<input type=checkbox group={flavours} name="flavours" value="Mint choc chip">
+	Mint choc chip
+</label>
+
+<label>
+	<input type=checkbox group={flavours} name="flavours" value="Raspberry ripple">
+	Raspberry ripple
+</label>
+
+{#if flavours.length === 0}
+	<p>Please select at least one flavour</p>
+{:else if flavours.length > scoops}
+	<p>Can't order more flavours than scoops!</p>
+{:else}
+	<p>
+		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
+		of {join(flavours)}
+	</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
new file mode 100644
index 0000000000..d97db41f0b
--- /dev/null
+++ b/site/content/tutorial/06-bindings/04-group-inputs/app-b/App.svelte
@@ -0,0 +1,52 @@
+<script>
+	let scoops = 1;
+	let flavours = ['Mint choc chip'];
+
+	let menu = [
+		'Cookies and cream',
+		'Mint choc chip',
+		'Raspberry ripple'
+	];
+
+	function join(flavours) {
+		if (flavours.length === 1) return flavours[0];
+		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
+	}
+</script>
+
+<h2>Size</h2>
+
+<label>
+	<input type=radio bind:group={scoops} name="scoops" value={1}>
+	One scoop
+</label>
+
+<label>
+	<input type=radio bind:group={scoops} name="scoops" value={2}>
+	Two scoops
+</label>
+
+<label>
+	<input type=radio bind:group={scoops} name="scoops" value={3}>
+	Three scoops
+</label>
+
+<h2>Flavours</h2>
+
+{#each menu as flavour}
+	<label>
+		<input type=checkbox bind:group={flavours} name="flavours" value={flavour}>
+		{flavour}
+	</label>
+{/each}
+
+{#if flavours.length === 0}
+	<p>Please select at least one flavour</p>
+{:else if flavours.length > scoops}
+	<p>Can't order more flavours than scoops!</p>
+{:else}
+	<p>
+		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
+		of {join(flavours)}
+	</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/04-group-inputs/text.md b/site/content/tutorial/06-bindings/04-group-inputs/text.md
new file mode 100644
index 0000000000..b48b23921f
--- /dev/null
+++ b/site/content/tutorial/06-bindings/04-group-inputs/text.md
@@ -0,0 +1,36 @@
+---
+title: Group inputs
+---
+
+If you have multiple inputs relating to the same value, you can use `bind:group` along with the `value` attribute. Radio inputs in the same group are mutually exclusive; checkbox inputs in the same group form an array of selected values.
+
+Add `bind:group` to each input:
+
+```html
+<input type=radio bind:group={scoops} name="scoops" value={1}>
+```
+
+In this case, we could make the code simpler by moving the checkbox inputs into an `each` block. First, add a `menu` variable to the `<script>` block...
+
+```js
+let menu = [
+	'Cookies and cream',
+	'Mint choc chip',
+	'Raspberry ripple'
+];
+```
+
+...then replace the second section:
+
+```html
+<h2>Flavours</h2>
+
+{#each menu as flavour}
+	<label>
+		<input type=checkbox bind:group={flavours} name="flavours" value={flavour}>
+		{flavour}
+	</label>
+{/each}
+```
+
+It's now easy to expand our ice cream menu in new and exciting directions.
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte
new file mode 100644
index 0000000000..b3b9024e13
--- /dev/null
+++ b/site/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { marked } from 'marked';
+	let value = `Some words are *italic*, some are **bold**`;
+</script>
+
+{@html marked(value)}
+
+<textarea value={value}></textarea>
+
+<style>
+	textarea { width: 100%; height: 200px; }
+</style>
diff --git a/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte
new file mode 100644
index 0000000000..dbeaf9b67b
--- /dev/null
+++ b/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { marked } from 'marked';
+	let value = `Some words are *italic*, some are **bold**`;
+</script>
+
+{@html marked(value)}
+
+<textarea bind:value></textarea>
+
+<style>
+	textarea { width: 100%; height: 200px; }
+</style>
diff --git a/site/content/tutorial/06-bindings/05-textarea-inputs/text.md b/site/content/tutorial/06-bindings/05-textarea-inputs/text.md
new file mode 100644
index 0000000000..42763200c7
--- /dev/null
+++ b/site/content/tutorial/06-bindings/05-textarea-inputs/text.md
@@ -0,0 +1,17 @@
+---
+title: Textarea inputs
+---
+
+The `<textarea>` element behaves similarly to a text input in Svelte — use `bind:value`:
+
+```html
+<textarea bind:value={value}></textarea>
+```
+
+In cases like these, where the names match, we can also use a shorthand form:
+
+```html
+<textarea bind:value></textarea>
+```
+
+This applies to all bindings, not just textareas.
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte b/site/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
new file mode 100644
index 0000000000..a70b928809
--- /dev/null
+++ b/site/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
@@ -0,0 +1,43 @@
+<script>
+	let questions = [
+		{ id: 1, text: `Where did you go to school?` },
+		{ id: 2, text: `What is your mother's name?` },
+		{ id: 3, text: `What is another personal fact that an attacker could easily find with Google?` }
+	];
+
+	let selected;
+
+	let answer = '';
+
+	function handleSubmit() {
+		alert(`answered question ${selected.id} (${selected.text}) with "${answer}"`);
+	}
+</script>
+
+<h2>Insecurity questions</h2>
+
+<form on:submit|preventDefault={handleSubmit}>
+	<select value={selected} on:change="{() => answer = ''}">
+		{#each questions as question}
+			<option value={question}>
+				{question.text}
+			</option>
+		{/each}
+	</select>
+
+	<input bind:value={answer}>
+
+	<button disabled={!answer} type=submit>
+		Submit
+	</button>
+</form>
+
+<p>selected question {selected ? selected.id : '[waiting...]'}</p>
+
+<style>
+	input {
+		display: block;
+		width: 500px;
+		max-width: 100%;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte b/site/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
new file mode 100644
index 0000000000..c584c95b0e
--- /dev/null
+++ b/site/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
@@ -0,0 +1,43 @@
+<script>
+	let questions = [
+		{ id: 1, text: `Where did you go to school?` },
+		{ id: 2, text: `What is your mother's name?` },
+		{ id: 3, text: `What is another personal fact that an attacker could easily find with Google?` }
+	];
+
+	let selected;
+
+	let answer = '';
+
+	function handleSubmit() {
+		alert(`answered question ${selected.id} (${selected.text}) with "${answer}"`);
+	}
+</script>
+
+<h2>Insecurity questions</h2>
+
+<form on:submit|preventDefault={handleSubmit}>
+	<select bind:value={selected} on:change="{() => answer = ''}">
+		{#each questions as question}
+			<option value={question}>
+				{question.text}
+			</option>
+		{/each}
+	</select>
+
+	<input bind:value={answer}>
+
+	<button disabled={!answer} type=submit>
+		Submit
+	</button>
+</form>
+
+<p>selected question {selected ? selected.id : '[waiting...]'}</p>
+
+<style>
+	input {
+		display: block;
+		width: 500px;
+		max-width: 100%;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/06-select-bindings/text.md b/site/content/tutorial/06-bindings/06-select-bindings/text.md
new file mode 100644
index 0000000000..d0104f7f1a
--- /dev/null
+++ b/site/content/tutorial/06-bindings/06-select-bindings/text.md
@@ -0,0 +1,13 @@
+---
+title: Select bindings
+---
+
+We can also use `bind:value` with `<select>` elements. Update line 20:
+
+```html
+<select bind:value={selected} on:change="{() => answer = ''}">
+```
+
+Note that the `<option>` values are objects rather than strings. Svelte doesn't mind.
+
+> Because we haven't set an initial value of `selected`, the binding will set it to the default value (the first in the list) automatically. Be careful though — until the binding is initialised, `selected` remains undefined, so we can't blindly reference e.g. `selected.id` in the template. If your use case allows it, you could also set an initial value to bypass this problem.
diff --git a/site/content/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte b/site/content/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte
new file mode 100644
index 0000000000..a46c61c7e7
--- /dev/null
+++ b/site/content/tutorial/06-bindings/07-multiple-select-bindings/app-a/App.svelte
@@ -0,0 +1,52 @@
+<script>
+	let scoops = 1;
+	let flavours = ['Mint choc chip'];
+
+	let menu = [
+		'Cookies and cream',
+		'Mint choc chip',
+		'Raspberry ripple'
+	];
+
+	function join(flavours) {
+		if (flavours.length === 1) return flavours[0];
+		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
+	}
+</script>
+
+<h2>Size</h2>
+
+<label>
+	<input type=radio bind:group={scoops} value={1}>
+	One scoop
+</label>
+
+<label>
+	<input type=radio bind:group={scoops} value={2}>
+	Two scoops
+</label>
+
+<label>
+	<input type=radio bind:group={scoops} value={3}>
+	Three scoops
+</label>
+
+<h2>Flavours</h2>
+
+{#each menu as flavour}
+	<label>
+		<input type=checkbox bind:group={flavours} value={flavour}>
+		{flavour}
+	</label>
+{/each}
+
+{#if flavours.length === 0}
+	<p>Please select at least one flavour</p>
+{:else if flavours.length > scoops}
+	<p>Can't order more flavours than scoops!</p>
+{:else}
+	<p>
+		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
+		of {join(flavours)}
+	</p>
+{/if}
diff --git a/site/content/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte b/site/content/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte
new file mode 100644
index 0000000000..d808850158
--- /dev/null
+++ b/site/content/tutorial/06-bindings/07-multiple-select-bindings/app-b/App.svelte
@@ -0,0 +1,53 @@
+<script>
+	let scoops = 1;
+	let flavours = ['Mint choc chip'];
+
+	let menu = [
+		'Cookies and cream',
+		'Mint choc chip',
+		'Raspberry ripple'
+	];
+
+	function join(flavours) {
+		if (flavours.length === 1) return flavours[0];
+		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
+	}
+</script>
+
+<h2>Size</h2>
+
+<label>
+	<input type=radio bind:group={scoops} value={1}>
+	One scoop
+</label>
+
+<label>
+	<input type=radio bind:group={scoops} value={2}>
+	Two scoops
+</label>
+
+<label>
+	<input type=radio bind:group={scoops} value={3}>
+	Three scoops
+</label>
+
+<h2>Flavours</h2>
+
+<select multiple bind:value={flavours}>
+	{#each menu as flavour}
+		<option value={flavour}>
+			{flavour}
+		</option>
+	{/each}
+</select>
+
+{#if flavours.length === 0}
+	<p>Please select at least one flavour</p>
+{:else if flavours.length > scoops}
+	<p>Can't order more flavours than scoops!</p>
+{:else}
+	<p>
+		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
+		of {join(flavours)}
+	</p>
+{/if}
diff --git a/site/content/tutorial/06-bindings/07-multiple-select-bindings/text.md b/site/content/tutorial/06-bindings/07-multiple-select-bindings/text.md
new file mode 100644
index 0000000000..e607100c56
--- /dev/null
+++ b/site/content/tutorial/06-bindings/07-multiple-select-bindings/text.md
@@ -0,0 +1,21 @@
+---
+title: Select multiple
+---
+
+A select can have a `multiple` attribute, in which case it will populate an array rather than selecting a single value.
+
+Returning to our [earlier ice cream example](/tutorial/group-inputs), we can replace the checkboxes with a `<select multiple>`:
+
+```html
+<h2>Flavours</h2>
+
+<select multiple bind:value={flavours}>
+	{#each menu as flavour}
+		<option value={flavour}>
+			{flavour}
+		</option>
+	{/each}
+</select>
+```
+
+> Press and hold the `control` key (or the `command` key on MacOS) for selecting multiple options.
diff --git a/site/content/tutorial/06-bindings/08-contenteditable-bindings/app-a/App.svelte b/site/content/tutorial/06-bindings/08-contenteditable-bindings/app-a/App.svelte
new file mode 100644
index 0000000000..55d699959c
--- /dev/null
+++ b/site/content/tutorial/06-bindings/08-contenteditable-bindings/app-a/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	let html = '<p>Write some text!</p>';
+</script>
+
+<div contenteditable="true"></div>
+
+<pre>{html}</pre>
+
+<style>
+	[contenteditable] {
+		padding: 0.5em;
+		border: 1px solid #eee;
+		border-radius: 4px;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte b/site/content/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte
new file mode 100644
index 0000000000..ee97cf19c0
--- /dev/null
+++ b/site/content/tutorial/06-bindings/08-contenteditable-bindings/app-b/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	let html = '<p>Write some text!</p>';
+</script>
+
+<div
+	contenteditable="true"
+	bind:innerHTML={html}
+></div>
+
+<pre>{html}</pre>
+
+<style>
+	[contenteditable] {
+		padding: 0.5em;
+		border: 1px solid #eee;
+		border-radius: 4px;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/08-contenteditable-bindings/text.md b/site/content/tutorial/06-bindings/08-contenteditable-bindings/text.md
new file mode 100644
index 0000000000..a73b07c0ba
--- /dev/null
+++ b/site/content/tutorial/06-bindings/08-contenteditable-bindings/text.md
@@ -0,0 +1,12 @@
+---
+title: Contenteditable bindings
+---
+
+Elements with a `contenteditable="true"` attribute support `textContent` and `innerHTML` bindings:
+
+```html
+<div
+	contenteditable="true"
+	bind:innerHTML={html}
+></div>
+```
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/09-each-block-bindings/app-a/App.svelte b/site/content/tutorial/06-bindings/09-each-block-bindings/app-a/App.svelte
new file mode 100644
index 0000000000..b0323eb00a
--- /dev/null
+++ b/site/content/tutorial/06-bindings/09-each-block-bindings/app-a/App.svelte
@@ -0,0 +1,49 @@
+<script>
+	let todos = [
+		{ done: false, text: 'finish Svelte tutorial' },
+		{ done: false, text: 'build an app' },
+		{ done: false, text: 'world domination' }
+	];
+
+	function add() {
+		todos = todos.concat({ done: false, text: '' });
+	}
+
+	function clear() {
+		todos = todos.filter(t => !t.done);
+	}
+
+	$: remaining = todos.filter(t => !t.done).length;
+</script>
+
+<h1>Todos</h1>
+
+{#each todos as todo}
+	<div class:done={todo.done}>
+		<input
+			type=checkbox
+			checked={todo.done}
+		>
+
+		<input
+			placeholder="What needs to be done?"
+			value={todo.text}
+		>
+	</div>
+{/each}
+
+<p>{remaining} remaining</p>
+
+<button on:click={add}>
+	Add new
+</button>
+
+<button on:click={clear}>
+	Clear completed
+</button>
+
+<style>
+	.done {
+		opacity: 0.4;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte b/site/content/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
new file mode 100644
index 0000000000..b42cbe3b0a
--- /dev/null
+++ b/site/content/tutorial/06-bindings/09-each-block-bindings/app-b/App.svelte
@@ -0,0 +1,49 @@
+<script>
+	let todos = [
+		{ done: false, text: 'finish Svelte tutorial' },
+		{ done: false, text: 'build an app' },
+		{ done: false, text: 'world domination' }
+	];
+
+	function add() {
+		todos = todos.concat({ done: false, text: '' });
+	}
+
+	function clear() {
+		todos = todos.filter(t => !t.done);
+	}
+
+	$: remaining = todos.filter(t => !t.done).length;
+</script>
+
+<h1>Todos</h1>
+
+{#each todos as todo}
+	<div class:done={todo.done}>
+		<input
+			type=checkbox
+			bind:checked={todo.done}
+		>
+
+		<input
+			placeholder="What needs to be done?"
+			bind:value={todo.text}
+		>
+	</div>
+{/each}
+
+<p>{remaining} remaining</p>
+
+<button on:click={add}>
+	Add new
+</button>
+
+<button on:click={clear}>
+	Clear completed
+</button>
+
+<style>
+	.done {
+		opacity: 0.4;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/09-each-block-bindings/text.md b/site/content/tutorial/06-bindings/09-each-block-bindings/text.md
new file mode 100644
index 0000000000..2174ec578f
--- /dev/null
+++ b/site/content/tutorial/06-bindings/09-each-block-bindings/text.md
@@ -0,0 +1,23 @@
+---
+title: Each block bindings
+---
+
+You can even bind to properties inside an `each` block.
+
+```html
+{#each todos as todo}
+	<div class:done={todo.done}>
+		<input
+			type=checkbox
+			bind:checked={todo.done}
+		>
+
+		<input
+			placeholder="What needs to be done?"
+			bind:value={todo.text}
+		>
+	</div>
+{/each}
+```
+
+> Note that interacting with these `<input>` elements will mutate the array. If you prefer to work with immutable data, you should avoid these bindings and use event handlers instead.
diff --git a/site/content/tutorial/06-bindings/10-media-elements/app-a/App.svelte b/site/content/tutorial/06-bindings/10-media-elements/app-a/App.svelte
new file mode 100644
index 0000000000..33d6e3f6eb
--- /dev/null
+++ b/site/content/tutorial/06-bindings/10-media-elements/app-a/App.svelte
@@ -0,0 +1,128 @@
+<script>
+	// These values are bound to properties of the video
+	let time = 0;
+	let duration;
+	let paused = true;
+
+	let showControls = true;
+	let showControlsTimeout;
+
+	// Used to track time of last mouse down event
+	let lastMouseDown;
+
+	function handleMove(e) {
+		// Make the controls visible, but fade out after
+		// 2.5 seconds of inactivity
+		clearTimeout(showControlsTimeout);
+		showControlsTimeout = setTimeout(() => showControls = false, 2500);
+		showControls = true;
+
+		if (!duration) return; // video not loaded yet
+		if (e.type !== 'touchmove' && !(e.buttons & 1)) return; // mouse not down
+
+		const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
+		const { left, right } = this.getBoundingClientRect();
+		time = duration * (clientX - left) / (right - left);
+	}
+
+	// we can't rely on the built-in click event, because it fires
+	// after a drag — we have to listen for clicks ourselves
+	function handleMousedown(e) {
+		lastMouseDown = new Date();
+	}
+
+	function handleMouseup(e) {
+		if (new Date() - lastMouseDown < 300) {
+			if (paused) e.target.play();
+			else e.target.pause();
+		}
+	}
+
+	function format(seconds) {
+		if (isNaN(seconds)) return '...';
+
+		const minutes = Math.floor(seconds / 60);
+		seconds = Math.floor(seconds % 60);
+		if (seconds < 10) seconds = '0' + seconds;
+
+		return `${minutes}:${seconds}`;
+	}
+</script>
+
+<h1>Caminandes: Llamigos</h1>
+<p>From <a href="https://studio.blender.org/films">Blender Studio</a>. CC-BY</p>
+
+<div>
+	<video
+		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
+		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
+		on:mousemove={handleMove}
+		on:touchmove|preventDefault={handleMove}
+		on:mousedown={handleMousedown}
+		on:mouseup={handleMouseup}>
+		<track kind="captions">
+	</video>
+
+	<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
+		<progress value="{(time / duration) || 0}"/>
+
+		<div class="info">
+			<span class="time">{format(time)}</span>
+			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
+			<span class="time">{format(duration)}</span>
+		</div>
+	</div>
+</div>
+
+<style>
+	div {
+		position: relative;
+	}
+
+	.controls {
+		position: absolute;
+		top: 0;
+		width: 100%;
+		transition: opacity 1s;
+	}
+
+	.info {
+		display: flex;
+		width: 100%;
+		justify-content: space-between;
+	}
+
+	span {
+		padding: 0.2em 0.5em;
+		color: white;
+		text-shadow: 0 0 8px black;
+		font-size: 1.4em;
+		opacity: 0.7;
+	}
+
+	.time {
+		width: 3em;
+	}
+
+	.time:last-child { text-align: right }
+
+	progress {
+		display: block;
+		width: 100%;
+		height: 10px;
+		-webkit-appearance: none;
+		appearance: none;
+	}
+
+	progress::-webkit-progress-bar {
+		background-color: rgba(0,0,0,0.2);
+	}
+
+	progress::-webkit-progress-value {
+		background-color: rgba(255,255,255,0.6);
+	}
+
+	video {
+		width: 100%;
+	}
+</style>
diff --git a/site/content/tutorial/06-bindings/10-media-elements/app-b/App.svelte b/site/content/tutorial/06-bindings/10-media-elements/app-b/App.svelte
new file mode 100644
index 0000000000..8048f7e133
--- /dev/null
+++ b/site/content/tutorial/06-bindings/10-media-elements/app-b/App.svelte
@@ -0,0 +1,131 @@
+<script>
+	// These values are bound to properties of the video
+	let time = 0;
+	let duration;
+	let paused = true;
+
+	let showControls = true;
+	let showControlsTimeout;
+
+	// Used to track time of last mouse down event
+	let lastMouseDown;
+
+	function handleMove(e) {
+		// Make the controls visible, but fade out after
+		// 2.5 seconds of inactivity
+		clearTimeout(showControlsTimeout);
+		showControlsTimeout = setTimeout(() => showControls = false, 2500);
+		showControls = true;
+
+		if (!duration) return; // video not loaded yet
+		if (e.type !== 'touchmove' && !(e.buttons & 1)) return; // mouse not down
+
+		const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
+		const { left, right } = this.getBoundingClientRect();
+		time = duration * (clientX - left) / (right - left);
+	}
+
+	// we can't rely on the built-in click event, because it fires
+	// after a drag — we have to listen for clicks ourselves
+	function handleMousedown(e) {
+		lastMouseDown = new Date();
+	}
+
+	function handleMouseup(e) {
+		if (new Date() - lastMouseDown < 300) {
+			if (paused) e.target.play();
+			else e.target.pause();
+		}
+	}
+
+	function format(seconds) {
+		if (isNaN(seconds)) return '...';
+
+		const minutes = Math.floor(seconds / 60);
+		seconds = Math.floor(seconds % 60);
+		if (seconds < 10) seconds = '0' + seconds;
+
+		return `${minutes}:${seconds}`;
+	}
+</script>
+
+<h1>Caminandes: Llamigos</h1>
+<p>From <a href="https://studio.blender.org/films">Blender Studio</a>. CC-BY</p>
+
+<div>
+	<video
+		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
+		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
+		on:mousemove={handleMove}
+		on:touchmove|preventDefault={handleMove}
+		on:mousedown={handleMousedown}
+		on:mouseup={handleMouseup}
+		bind:currentTime={time}
+		bind:duration
+		bind:paused>
+		<track kind="captions">
+	</video>
+
+	<div class="controls" style="opacity: {duration && showControls ? 1 : 0}">
+		<progress value="{(time / duration) || 0}"/>
+
+		<div class="info">
+			<span class="time">{format(time)}</span>
+			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
+			<span class="time">{format(duration)}</span>
+		</div>
+	</div>
+</div>
+
+<style>
+	div {
+		position: relative;
+	}
+
+	.controls {
+		position: absolute;
+		top: 0;
+		width: 100%;
+		transition: opacity 1s;
+	}
+
+	.info {
+		display: flex;
+		width: 100%;
+		justify-content: space-between;
+	}
+
+	span {
+		padding: 0.2em 0.5em;
+		color: white;
+		text-shadow: 0 0 8px black;
+		font-size: 1.4em;
+		opacity: 0.7;
+	}
+
+	.time {
+		width: 3em;
+	}
+
+	.time:last-child { text-align: right }
+
+	progress {
+		display: block;
+		width: 100%;
+		height: 10px;
+		-webkit-appearance: none;
+		appearance: none;
+	}
+
+	progress::-webkit-progress-bar {
+		background-color: rgba(0,0,0,0.2);
+	}
+
+	progress::-webkit-progress-value {
+		background-color: rgba(255,255,255,0.6);
+	}
+
+	video {
+		width: 100%;
+	}
+</style>
diff --git a/site/content/tutorial/06-bindings/10-media-elements/text.md b/site/content/tutorial/06-bindings/10-media-elements/text.md
new file mode 100644
index 0000000000..b63c5368ff
--- /dev/null
+++ b/site/content/tutorial/06-bindings/10-media-elements/text.md
@@ -0,0 +1,47 @@
+---
+title: Media elements
+---
+
+The `<audio>` and `<video>` elements have several properties that you can bind to. This example demonstrates a few of them.
+
+On line 62, add `currentTime={time}`, `duration` and `paused` bindings:
+
+```html
+<video
+	poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
+	src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
+	on:mousemove={handleMove}
+	on:touchmove|preventDefault={handleMove}
+	on:mousedown={handleMousedown}
+	on:mouseup={handleMouseup}
+	bind:currentTime={time}
+	bind:duration
+	bind:paused>
+	<track kind="captions">
+</video>
+```
+
+> `bind:duration` is equivalent to `bind:duration={duration}`
+
+Now, when you click on the video, it will update `time`, `duration` and `paused` as appropriate. This means we can use them to build custom controls.
+
+> Ordinarily on the web, you would track `currentTime` by listening for `timeupdate` events. But these events fire too infrequently, resulting in choppy UI. Svelte does better — it checks `currentTime` using `requestAnimationFrame`.
+
+The complete set of bindings for `<audio>` and `<video>` is as follows — six *readonly* bindings...
+
+* `duration` (readonly) — the total duration of the video, in seconds
+* `buffered` (readonly) — an array of `{start, end}` objects
+* `seekable` (readonly) — ditto
+* `played` (readonly) — ditto
+* `seeking` (readonly) — boolean
+* `ended` (readonly) — boolean
+
+...and five *two-way* bindings:
+
+* `currentTime` — the current point in the video, in seconds
+* `playbackRate` — how fast to play the video, where `1` is 'normal'
+* `paused` — this one should be self-explanatory
+* `volume` — a value between 0 and 1
+* `muted` — a boolean value where true is muted
+
+Videos additionally have readonly `videoWidth` and `videoHeight` bindings.
diff --git a/site/content/tutorial/06-bindings/11-dimensions/app-a/App.svelte b/site/content/tutorial/06-bindings/11-dimensions/app-a/App.svelte
new file mode 100644
index 0000000000..67bb5db8af
--- /dev/null
+++ b/site/content/tutorial/06-bindings/11-dimensions/app-a/App.svelte
@@ -0,0 +1,21 @@
+<script>
+	let w;
+	let h;
+	let size = 42;
+	let text = 'edit me';
+</script>
+
+<input type=range bind:value={size}>
+<input bind:value={text}>
+
+<p>size: {w}px x {h}px</p>
+
+<div>
+	<span style="font-size: {size}px">{text}</span>
+</div>
+
+<style>
+	input { display: block; }
+	div { display: inline-block; }
+	span { word-break: break-all; }
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/11-dimensions/app-b/App.svelte b/site/content/tutorial/06-bindings/11-dimensions/app-b/App.svelte
new file mode 100644
index 0000000000..fbed44dadc
--- /dev/null
+++ b/site/content/tutorial/06-bindings/11-dimensions/app-b/App.svelte
@@ -0,0 +1,21 @@
+<script>
+	let w;
+	let h;
+	let size = 42;
+	let text = 'edit me';
+</script>
+
+<input type=range bind:value={size}>
+<input bind:value={text}>
+
+<p>size: {w}px x {h}px</p>
+
+<div bind:clientWidth={w} bind:clientHeight={h}>
+	<span style="font-size: {size}px">{text}</span>
+</div>
+
+<style>
+	input { display: block; }
+	div { display: inline-block; }
+	span { word-break: break-all; }
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/11-dimensions/text.md b/site/content/tutorial/06-bindings/11-dimensions/text.md
new file mode 100644
index 0000000000..3f0a27a7ea
--- /dev/null
+++ b/site/content/tutorial/06-bindings/11-dimensions/text.md
@@ -0,0 +1,17 @@
+---
+title: Dimensions
+---
+
+Every block-level element has `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings:
+
+```html
+<div bind:clientWidth={w} bind:clientHeight={h}>
+	<span style="font-size: {size}px">{text}</span>
+</div>
+```
+
+These bindings are readonly — changing the values of `w` and `h` won't have any effect.
+
+> Elements are measured using a technique similar to [this one](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/). There is some overhead involved, so it's not recommended to use this for large numbers of elements.
+>
+> `display: inline` elements cannot be measured with this approach; nor can elements that can't contain other elements (such as `<canvas>`). In these cases you will need to measure a wrapper element instead.
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte b/site/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte
new file mode 100644
index 0000000000..9c30979ace
--- /dev/null
+++ b/site/content/tutorial/06-bindings/12-bind-this/app-a/App.svelte
@@ -0,0 +1,52 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let canvas;
+
+	onMount(() => {
+		const ctx = canvas.getContext('2d');
+		let frame = requestAnimationFrame(loop);
+
+		function loop(t) {
+			frame = requestAnimationFrame(loop);
+
+			const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+			for (let p = 0; p < imageData.data.length; p += 4) {
+				const i = p / 4;
+				const x = i % canvas.width;
+				const y = i / canvas.width >>> 0;
+
+				const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000));
+				const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(t / 1000));
+				const b = 128;
+
+				imageData.data[p + 0] = r;
+				imageData.data[p + 1] = g;
+				imageData.data[p + 2] = b;
+				imageData.data[p + 3] = 255;
+			}
+
+			ctx.putImageData(imageData, 0, 0);
+		}
+
+		return () => {
+			cancelAnimationFrame(frame);
+		};
+	});
+</script>
+
+<canvas
+	width={32}
+	height={32}
+></canvas>
+
+<style>
+	canvas {
+		width: 100%;
+		height: 100%;
+		background-color: #666;
+		-webkit-mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
+		mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
+	}
+</style>
diff --git a/site/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte b/site/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte
new file mode 100644
index 0000000000..5714f3149a
--- /dev/null
+++ b/site/content/tutorial/06-bindings/12-bind-this/app-b/App.svelte
@@ -0,0 +1,53 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let canvas;
+
+	onMount(() => {
+		const ctx = canvas.getContext('2d');
+		let frame = requestAnimationFrame(loop);
+
+		function loop(t) {
+			frame = requestAnimationFrame(loop);
+
+			const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+			for (let p = 0; p < imageData.data.length; p += 4) {
+				const i = p / 4;
+				const x = i % canvas.width;
+				const y = i / canvas.width >>> 0;
+
+				const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000));
+				const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(t / 1000));
+				const b = 128;
+
+				imageData.data[p + 0] = r;
+				imageData.data[p + 1] = g;
+				imageData.data[p + 2] = b;
+				imageData.data[p + 3] = 255;
+			}
+
+			ctx.putImageData(imageData, 0, 0);
+		}
+
+		return () => {
+			cancelAnimationFrame(frame);
+		};
+	});
+</script>
+
+<canvas
+	bind:this={canvas}
+	width={32}
+	height={32}
+></canvas>
+
+<style>
+	canvas {
+		width: 100%;
+		height: 100%;
+		background-color: #666;
+		-webkit-mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
+		mask: url(/svelte-logo-mask.svg) 50% 50% no-repeat;
+	}
+</style>
diff --git a/site/content/tutorial/06-bindings/12-bind-this/text.md b/site/content/tutorial/06-bindings/12-bind-this/text.md
new file mode 100644
index 0000000000..6602e4de76
--- /dev/null
+++ b/site/content/tutorial/06-bindings/12-bind-this/text.md
@@ -0,0 +1,15 @@
+---
+title: This
+---
+
+The readonly `this` binding applies to every element (and component) and allows you to obtain a reference to rendered elements. For example, we can get a reference to a `<canvas>` element:
+
+```html
+<canvas
+	bind:this={canvas}
+	width={32}
+	height={32}
+></canvas>
+```
+
+Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](/tutorial/onmount).
diff --git a/site/content/tutorial/06-bindings/13-component-bindings/app-a/App.svelte b/site/content/tutorial/06-bindings/13-component-bindings/app-a/App.svelte
new file mode 100644
index 0000000000..4eba735de6
--- /dev/null
+++ b/site/content/tutorial/06-bindings/13-component-bindings/app-a/App.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Keypad from './Keypad.svelte';
+
+	let pin;
+	$: view = pin ? pin.replace(/\d(?!$)/g, '•') : 'enter your pin';
+
+	function handleSubmit() {
+		alert(`submitted ${pin}`);
+	}
+</script>
+
+<h1 style="color: {pin ? '#333' : '#ccc'}">{view}</h1>
+
+<Keypad on:submit={handleSubmit}/>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/13-component-bindings/app-a/Keypad.svelte b/site/content/tutorial/06-bindings/13-component-bindings/app-a/Keypad.svelte
new file mode 100644
index 0000000000..631f7964e2
--- /dev/null
+++ b/site/content/tutorial/06-bindings/13-component-bindings/app-a/Keypad.svelte
@@ -0,0 +1,40 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	export let value = '';
+
+	const dispatch = createEventDispatcher();
+
+	const select = num => () => value += num;
+	const clear  = () => value = '';
+	const submit = () => dispatch('submit');
+</script>
+
+<div class="keypad">
+	<button on:click={select(1)}>1</button>
+	<button on:click={select(2)}>2</button>
+	<button on:click={select(3)}>3</button>
+	<button on:click={select(4)}>4</button>
+	<button on:click={select(5)}>5</button>
+	<button on:click={select(6)}>6</button>
+	<button on:click={select(7)}>7</button>
+	<button on:click={select(8)}>8</button>
+	<button on:click={select(9)}>9</button>
+
+	<button disabled={!value} on:click={clear}>clear</button>
+	<button on:click={select(0)}>0</button>
+	<button disabled={!value} on:click={submit}>submit</button>
+</div>
+
+<style>
+	.keypad {
+		display: grid;
+		grid-template-columns: repeat(3, 5em);
+		grid-template-rows: repeat(4, 3em);
+		grid-gap: 0.5em
+	}
+
+	button {
+		margin: 0
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/13-component-bindings/app-b/App.svelte b/site/content/tutorial/06-bindings/13-component-bindings/app-b/App.svelte
new file mode 100644
index 0000000000..67fec4a5ad
--- /dev/null
+++ b/site/content/tutorial/06-bindings/13-component-bindings/app-b/App.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Keypad from './Keypad.svelte';
+
+	let pin;
+	$: view = pin ? pin.replace(/\d(?!$)/g, '•') : 'enter your pin';
+
+	function handleSubmit() {
+		alert(`submitted ${pin}`);
+	}
+</script>
+
+<h1 style="color: {pin ? '#333' : '#ccc'}">{view}</h1>
+
+<Keypad bind:value={pin} on:submit={handleSubmit}/>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/13-component-bindings/app-b/Keypad.svelte b/site/content/tutorial/06-bindings/13-component-bindings/app-b/Keypad.svelte
new file mode 100644
index 0000000000..631f7964e2
--- /dev/null
+++ b/site/content/tutorial/06-bindings/13-component-bindings/app-b/Keypad.svelte
@@ -0,0 +1,40 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	export let value = '';
+
+	const dispatch = createEventDispatcher();
+
+	const select = num => () => value += num;
+	const clear  = () => value = '';
+	const submit = () => dispatch('submit');
+</script>
+
+<div class="keypad">
+	<button on:click={select(1)}>1</button>
+	<button on:click={select(2)}>2</button>
+	<button on:click={select(3)}>3</button>
+	<button on:click={select(4)}>4</button>
+	<button on:click={select(5)}>5</button>
+	<button on:click={select(6)}>6</button>
+	<button on:click={select(7)}>7</button>
+	<button on:click={select(8)}>8</button>
+	<button on:click={select(9)}>9</button>
+
+	<button disabled={!value} on:click={clear}>clear</button>
+	<button on:click={select(0)}>0</button>
+	<button disabled={!value} on:click={submit}>submit</button>
+</div>
+
+<style>
+	.keypad {
+		display: grid;
+		grid-template-columns: repeat(3, 5em);
+		grid-template-rows: repeat(4, 3em);
+		grid-gap: 0.5em
+	}
+
+	button {
+		margin: 0
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/13-component-bindings/text.md b/site/content/tutorial/06-bindings/13-component-bindings/text.md
new file mode 100644
index 0000000000..9ab1be29cd
--- /dev/null
+++ b/site/content/tutorial/06-bindings/13-component-bindings/text.md
@@ -0,0 +1,13 @@
+---
+title: Component bindings
+---
+
+Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `<Keypad>` component as though it were a form element:
+
+```html
+<Keypad bind:value={pin} on:submit={handleSubmit}/>
+```
+
+Now, when the user interacts with the keypad, the value of `pin` in the parent component is immediately updated.
+
+> Use component bindings sparingly. It can be difficult to track the flow of data around your application if you have too many of them, especially if there is no 'single source of truth'.
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/14-component-this/app-a/App.svelte b/site/content/tutorial/06-bindings/14-component-this/app-a/App.svelte
new file mode 100644
index 0000000000..41a6a10d3d
--- /dev/null
+++ b/site/content/tutorial/06-bindings/14-component-this/app-a/App.svelte
@@ -0,0 +1,5 @@
+<script>
+	import InputField from './InputField.svelte';
+</script>
+
+<InputField />
diff --git a/site/content/tutorial/06-bindings/14-component-this/app-a/InputField.svelte b/site/content/tutorial/06-bindings/14-component-this/app-a/InputField.svelte
new file mode 100644
index 0000000000..e2b04b93ed
--- /dev/null
+++ b/site/content/tutorial/06-bindings/14-component-this/app-a/InputField.svelte
@@ -0,0 +1,9 @@
+<script>
+	let input;
+
+	export function focus() {
+		input.focus();
+	}
+</script>
+
+<input bind:this={input} />
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/14-component-this/app-b/App.svelte b/site/content/tutorial/06-bindings/14-component-this/app-b/App.svelte
new file mode 100644
index 0000000000..f14332b398
--- /dev/null
+++ b/site/content/tutorial/06-bindings/14-component-this/app-b/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	import InputField from './InputField.svelte';
+
+	let field;
+</script>
+
+<InputField bind:this={field}/>
+
+<button on:click={() => field.focus()}>Focus field</button>
diff --git a/site/content/tutorial/06-bindings/14-component-this/app-b/InputField.svelte b/site/content/tutorial/06-bindings/14-component-this/app-b/InputField.svelte
new file mode 100644
index 0000000000..e2b04b93ed
--- /dev/null
+++ b/site/content/tutorial/06-bindings/14-component-this/app-b/InputField.svelte
@@ -0,0 +1,9 @@
+<script>
+	let input;
+
+	export function focus() {
+		input.focus();
+	}
+</script>
+
+<input bind:this={input} />
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/14-component-this/text.md b/site/content/tutorial/06-bindings/14-component-this/text.md
new file mode 100644
index 0000000000..e389dbbacf
--- /dev/null
+++ b/site/content/tutorial/06-bindings/14-component-this/text.md
@@ -0,0 +1,23 @@
+---
+title: Binding to component instances
+---
+
+Just as you can bind to DOM elements, you can bind to component instances themselves. For example, we can bind the instance of `<InputField>` to a variable named `field` in the same way we did when binding DOM Elements
+
+```html
+<script>
+	let field;
+</script>
+
+<InputField bind:this={field} />
+```
+
+Now we can programmatically interact with this component using `field`.
+
+```html
+<button on:click="{() => field.focus()}">
+	Focus field
+</button>
+```
+
+> Note that we can't do `{field.focus}` since field is undefined when the button is first rendered and throws an error.
diff --git a/site/content/tutorial/06-bindings/meta.json b/site/content/tutorial/06-bindings/meta.json
new file mode 100644
index 0000000000..8bb0142ecc
--- /dev/null
+++ b/site/content/tutorial/06-bindings/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Bindings"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/07-lifecycle/01-onmount/app-a/App.svelte b/site/content/tutorial/07-lifecycle/01-onmount/app-a/App.svelte
new file mode 100644
index 0000000000..f76c377ad3
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/01-onmount/app-a/App.svelte
@@ -0,0 +1,31 @@
+<script>
+	let photos = [];
+</script>
+
+<h1>Photo album</h1>
+
+<div class="photos">
+	{#each photos as photo}
+		<figure>
+			<img src={photo.thumbnailUrl} alt={photo.title}>
+			<figcaption>{photo.title}</figcaption>
+		</figure>
+	{:else}
+		<!-- this block renders when photos.length === 0 -->
+		<p>loading...</p>
+	{/each}
+</div>
+
+<style>
+	.photos {
+		width: 100%;
+		display: grid;
+		grid-template-columns: repeat(5, 1fr);
+		grid-gap: 8px;
+	}
+
+	figure, img {
+		width: 100%;
+		margin: 0;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/07-lifecycle/01-onmount/app-b/App.svelte b/site/content/tutorial/07-lifecycle/01-onmount/app-b/App.svelte
new file mode 100644
index 0000000000..7dc7a1ec7a
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/01-onmount/app-b/App.svelte
@@ -0,0 +1,38 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let photos = [];
+
+	onMount(async () => {
+		const res = await fetch(`/tutorial/api/album`);
+		photos = await res.json();
+	});
+</script>
+
+<h1>Photo album</h1>
+
+<div class="photos">
+	{#each photos as photo}
+		<figure>
+			<img src={photo.thumbnailUrl} alt={photo.title}>
+			<figcaption>{photo.title}</figcaption>
+		</figure>
+	{:else}
+		<!-- this block renders when photos.length === 0 -->
+		<p>loading...</p>
+	{/each}
+</div>
+
+<style>
+	.photos {
+		width: 100%;
+		display: grid;
+		grid-template-columns: repeat(5, 1fr);
+		grid-gap: 8px;
+	}
+
+	figure, img {
+		width: 100%;
+		margin: 0;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/07-lifecycle/01-onmount/text.md b/site/content/tutorial/07-lifecycle/01-onmount/text.md
new file mode 100644
index 0000000000..6baa254e9f
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/01-onmount/text.md
@@ -0,0 +1,28 @@
+---
+title: onMount
+---
+
+Every component has a *lifecycle* that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle.
+
+The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM. We briefly encountered it [earlier](/tutorial/bind-this) when we needed to interact with a `<canvas>` element after it had been rendered.
+
+We'll add an `onMount` handler that loads some data over the network:
+
+```html
+<script>
+	import { onMount } from 'svelte';
+
+	let photos = [];
+
+	onMount(async () => {
+		const res = await fetch(`/tutorial/api/album`);
+		photos = await res.json();
+	});
+</script>
+```
+
+> It's recommended to put the `fetch` in `onMount` rather than at the top level of the `<script>` because of server-side rendering (SSR). With the exception of `onDestroy`, lifecycle functions don't run during SSR, which means we can avoid fetching data that should be loaded lazily once the component has been mounted in the DOM.
+
+Lifecycle functions must be called while the component is initialising so that the callback is bound to the component instance — not (say) in a `setTimeout`.
+
+If the `onMount` callback returns a function, that function will be called when the component is destroyed.
\ No newline at end of file
diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte
new file mode 100644
index 0000000000..8fdca8d81d
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte
@@ -0,0 +1,20 @@
+<script>
+	import Timer from './Timer.svelte';
+
+	let open = false;
+	let seconds = 0;
+
+	const toggle = () => (open = !open);
+	const handleTick = () => (seconds += 1);
+</script>
+
+<div>
+	<button on:click={toggle}>{open ? 'Close' : 'Open'} Timer</button>
+	<p>
+		The Timer component has been open for
+		{seconds} {seconds === 1 ? 'second' : 'seconds'}
+	</p>
+	{#if open}
+	<Timer callback={handleTick} />
+	{/if}
+</div>
diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/Timer.svelte b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/Timer.svelte
new file mode 100644
index 0000000000..0eb5a7461d
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/Timer.svelte
@@ -0,0 +1,20 @@
+<script>
+	import { onInterval } from './utils.js';
+
+	export let callback;
+	export let interval = 1000;
+
+	onInterval(callback, interval);
+</script>
+
+<p>
+	This component executes a callback every 
+	{interval} millisecond{interval === 1 ? '' : 's'}
+</p>
+
+<style>
+	p { 
+		border: 1px solid blue;
+		padding: 5px;
+	}
+</style>
diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js
new file mode 100644
index 0000000000..64ab7e50c7
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js
@@ -0,0 +1,9 @@
+import { onDestroy } from 'svelte';
+
+export function onInterval(callback, milliseconds) {
+	const interval = setInterval(callback, milliseconds);
+
+	onDestroy(() => {
+		// Fix the memory leak here
+	});
+}
\ No newline at end of file
diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte b/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte
new file mode 100644
index 0000000000..49936b6617
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte
@@ -0,0 +1,20 @@
+<script>
+	import Timer from './Timer.svelte';
+
+	let open = true;
+	let seconds = 0;
+
+	const toggle = () => (open = !open);
+	const handleTick = () => (seconds += 1);
+</script>
+
+<div>
+	<button on:click={toggle}>{open ? 'Close' : 'Open'} Timer</button>
+	<p>
+		The Timer component has been open for
+		{seconds} {seconds === 1 ? 'second' : 'seconds'}
+	</p>
+	{#if open}
+	<Timer callback={handleTick} />
+	{/if}
+</div>
diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/Timer.svelte b/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/Timer.svelte
new file mode 100644
index 0000000000..0eb5a7461d
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/Timer.svelte
@@ -0,0 +1,20 @@
+<script>
+	import { onInterval } from './utils.js';
+
+	export let callback;
+	export let interval = 1000;
+
+	onInterval(callback, interval);
+</script>
+
+<p>
+	This component executes a callback every 
+	{interval} millisecond{interval === 1 ? '' : 's'}
+</p>
+
+<style>
+	p { 
+		border: 1px solid blue;
+		padding: 5px;
+	}
+</style>
diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/utils.js b/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/utils.js
new file mode 100644
index 0000000000..0f75f29e2a
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/utils.js
@@ -0,0 +1,9 @@
+import { onDestroy } from 'svelte';
+
+export function onInterval(callback, milliseconds) {
+	const interval = setInterval(callback, milliseconds);
+
+	onDestroy(() => {
+		clearInterval(interval);
+	});
+}
\ No newline at end of file
diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/text.md b/site/content/tutorial/07-lifecycle/02-ondestroy/text.md
new file mode 100644
index 0000000000..34bbf83cbf
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/02-ondestroy/text.md
@@ -0,0 +1,45 @@
+---
+title: onDestroy
+---
+
+To run code when your component is destroyed, use `onDestroy`.
+
+For example, we can add a `setInterval` function when our component initialises, and clean it up when it's no longer relevant. Doing so prevents memory leaks.
+
+```html
+<script>
+	import { onDestroy } from 'svelte';
+
+	let counter = 0;
+	const interval = setInterval(() => counter += 1, 1000);
+
+	onDestroy(() => clearInterval(interval));
+</script>
+```
+
+While it's important to call lifecycle functions during the component's initialisation, it doesn't matter *where* you call them from. So if we wanted, we could abstract the interval logic into a helper function in `utils.js`...
+
+```js
+import { onDestroy } from 'svelte';
+
+export function onInterval(callback, milliseconds) {
+	const interval = setInterval(callback, milliseconds);
+
+	onDestroy(() => {
+		clearInterval(interval);
+	});
+}
+```
+
+...and import it into our component:
+
+```html
+<script>
+	import { onInterval } from './utils.js';
+
+	let counter = 0;
+	onInterval(() => counter += 1, 1000);
+</script>
+```
+
+Open and close the timer a few times and make sure the counter keeps ticking and the CPU load increases. This is due to a memory leak as the previous timers are not deleted. Don't forget to refresh the page before solving the example.
\ No newline at end of file
diff --git a/site/content/tutorial/07-lifecycle/03-update/app-a/App.svelte b/site/content/tutorial/07-lifecycle/03-update/app-a/App.svelte
new file mode 100644
index 0000000000..a009b2cc1f
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/03-update/app-a/App.svelte
@@ -0,0 +1,107 @@
+<script>
+	import Eliza from 'elizabot';
+	import { beforeUpdate, afterUpdate } from 'svelte';
+
+	let div;
+
+	beforeUpdate(() => {
+		// determine whether we should auto-scroll
+		// once the DOM is updated...
+	});
+
+	afterUpdate(() => {
+		// ...the DOM is now in sync with the data
+	});
+
+	const eliza = new Eliza();
+
+	let comments = [
+		{ author: 'eliza', text: eliza.getInitial() }
+	];
+
+	function handleKeydown(event) {
+		if (event.key === 'Enter') {
+			const text = event.target.value;
+			if (!text) return;
+
+			comments = comments.concat({
+				author: 'user',
+				text
+			});
+
+			event.target.value = '';
+
+			const reply = eliza.transform(text);
+
+			setTimeout(() => {
+				comments = comments.concat({
+					author: 'eliza',
+					text: '...',
+					placeholder: true
+				});
+
+				setTimeout(() => {
+					comments = comments.filter(comment => !comment.placeholder).concat({
+						author: 'eliza',
+						text: reply
+					});
+				}, 500 + Math.random() * 500);
+			}, 200 + Math.random() * 200);
+		}
+	}
+</script>
+
+<style>
+	.chat {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		max-width: 320px;
+	}
+
+	.scrollable {
+		flex: 1 1 auto;
+		border-top: 1px solid #eee;
+		margin: 0 0 0.5em 0;
+		overflow-y: auto;
+	}
+
+	article {
+		margin: 0.5em 0;
+	}
+
+	.user {
+		text-align: right;
+	}
+
+	span {
+		padding: 0.5em 1em;
+		display: inline-block;
+	}
+
+	.eliza span {
+		background-color: #eee;
+		border-radius: 1em 1em 1em 0;
+	}
+
+	.user span {
+		background-color: #0074D9;
+		color: white;
+		border-radius: 1em 1em 0 1em;
+		word-break: break-all;
+	}
+</style>
+
+<div class="chat">
+	<h1>Eliza</h1>
+
+	<div class="scrollable" bind:this={div}>
+		{#each comments as comment}
+			<article class={comment.author}>
+				<span>{comment.text}</span>
+			</article>
+		{/each}
+	</div>
+
+	<input on:keydown={handleKeydown}>
+</div>
diff --git a/site/content/tutorial/07-lifecycle/03-update/app-b/App.svelte b/site/content/tutorial/07-lifecycle/03-update/app-b/App.svelte
new file mode 100644
index 0000000000..97caca99d5
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/03-update/app-b/App.svelte
@@ -0,0 +1,107 @@
+<script>
+	import Eliza from 'elizabot';
+	import { beforeUpdate, afterUpdate } from 'svelte';
+
+	let div;
+	let autoscroll;
+
+	beforeUpdate(() => {
+		autoscroll = div && (div.offsetHeight + div.scrollTop) > (div.scrollHeight - 20);
+	});
+
+	afterUpdate(() => {
+		if (autoscroll) div.scrollTo(0, div.scrollHeight);
+	});
+
+	const eliza = new Eliza();
+
+	let comments = [
+		{ author: 'eliza', text: eliza.getInitial() }
+	];
+
+	function handleKeydown(event) {
+		if (event.key === 'Enter') {
+			const text = event.target.value;
+			if (!text) return;
+
+			comments = comments.concat({
+				author: 'user',
+				text
+			});
+
+			event.target.value = '';
+
+			const reply = eliza.transform(text);
+
+			setTimeout(() => {
+				comments = comments.concat({
+					author: 'eliza',
+					text: '...',
+					placeholder: true
+				});
+
+				setTimeout(() => {
+					comments = comments.filter(comment => !comment.placeholder).concat({
+						author: 'eliza',
+						text: reply
+					});
+				}, 500 + Math.random() * 500);
+			}, 200 + Math.random() * 200);
+		}
+	}
+</script>
+
+<style>
+	.chat {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		max-width: 320px;
+	}
+
+	.scrollable {
+		flex: 1 1 auto;
+		border-top: 1px solid #eee;
+		margin: 0 0 0.5em 0;
+		overflow-y: auto;
+	}
+
+	article {
+		margin: 0.5em 0;
+	}
+
+	.user {
+		text-align: right;
+	}
+
+	span {
+		padding: 0.5em 1em;
+		display: inline-block;
+	}
+
+	.eliza span {
+		background-color: #eee;
+		border-radius: 1em 1em 1em 0;
+	}
+
+	.user span {
+		background-color: #0074D9;
+		color: white;
+		border-radius: 1em 1em 0 1em;
+		word-break: break-all;
+	}
+</style>
+
+<div class="chat">
+	<h1>Eliza</h1>
+
+	<div class="scrollable" bind:this={div}>
+		{#each comments as comment}
+			<article class={comment.author}>
+				<span>{comment.text}</span>
+			</article>
+		{/each}
+	</div>
+
+	<input on:keydown={handleKeydown}>
+</div>
diff --git a/site/content/tutorial/07-lifecycle/03-update/text.md b/site/content/tutorial/07-lifecycle/03-update/text.md
new file mode 100644
index 0000000000..0255e845a8
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/03-update/text.md
@@ -0,0 +1,24 @@
+---
+title: beforeUpdate and afterUpdate
+---
+
+The `beforeUpdate` function schedules work to happen immediately before the DOM is updated. `afterUpdate` is its counterpart, used for running code once the DOM is in sync with your data.
+
+Together, they're useful for doing things imperatively that are difficult to achieve in a purely state-driven way, like updating the scroll position of an element.
+
+This [Eliza](https://en.wikipedia.org/wiki/ELIZA) chatbot is annoying to use, because you have to keep scrolling the chat window. Let's fix that.
+
+```js
+let div;
+let autoscroll;
+
+beforeUpdate(() => {
+	autoscroll = div && (div.offsetHeight + div.scrollTop) > (div.scrollHeight - 20);
+});
+
+afterUpdate(() => {
+	if (autoscroll) div.scrollTo(0, div.scrollHeight);
+});
+```
+
+Note that `beforeUpdate` will first run before the component has mounted, so we need to check for the existence of `div` before reading its properties.
diff --git a/site/content/tutorial/07-lifecycle/04-tick/app-a/App.svelte b/site/content/tutorial/07-lifecycle/04-tick/app-a/App.svelte
new file mode 100644
index 0000000000..97edefa935
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/04-tick/app-a/App.svelte
@@ -0,0 +1,35 @@
+<script>
+	let text = `Select some text and hit the tab key to toggle uppercase`;
+
+	async function handleKeydown(event) {
+		if (event.key !== 'Tab') return;
+
+		event.preventDefault();
+
+		const { selectionStart, selectionEnd, value } = this;
+		const selection = value.slice(selectionStart, selectionEnd);
+
+		const replacement = /[a-z]/.test(selection)
+			? selection.toUpperCase()
+			: selection.toLowerCase();
+
+		text = (
+			value.slice(0, selectionStart) +
+			replacement +
+			value.slice(selectionEnd)
+		);
+
+		// this has no effect, because the DOM hasn't updated yet
+		this.selectionStart = selectionStart;
+		this.selectionEnd = selectionEnd;
+	}
+</script>
+
+<style>
+	textarea {
+		width: 100%;
+		height: 200px;
+	}
+</style>
+
+<textarea value={text} on:keydown={handleKeydown}></textarea>
diff --git a/site/content/tutorial/07-lifecycle/04-tick/app-b/App.svelte b/site/content/tutorial/07-lifecycle/04-tick/app-b/App.svelte
new file mode 100644
index 0000000000..477b5ffb79
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/04-tick/app-b/App.svelte
@@ -0,0 +1,37 @@
+<script>
+	import { tick } from 'svelte';
+
+	let text = `Select some text and hit the tab key to toggle uppercase`;
+
+	async function handleKeydown(event) {
+		if (event.key !== 'Tab') return;
+
+		event.preventDefault();
+
+		const { selectionStart, selectionEnd, value } = this;
+		const selection = value.slice(selectionStart, selectionEnd);
+
+		const replacement = /[a-z]/.test(selection)
+			? selection.toUpperCase()
+			: selection.toLowerCase();
+
+		text = (
+			value.slice(0, selectionStart) +
+			replacement +
+			value.slice(selectionEnd)
+		);
+
+		await tick();
+		this.selectionStart = selectionStart;
+		this.selectionEnd = selectionEnd;
+	}
+</script>
+
+<style>
+	textarea {
+		width: 100%;
+		height: 200px;
+	}
+</style>
+
+<textarea value={text} on:keydown={handleKeydown}></textarea>
diff --git a/site/content/tutorial/07-lifecycle/04-tick/text.md b/site/content/tutorial/07-lifecycle/04-tick/text.md
new file mode 100644
index 0000000000..8f5603a361
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/04-tick/text.md
@@ -0,0 +1,21 @@
+---
+title: tick
+---
+
+The `tick` function is unlike other lifecycle functions in that you can call it any time, not just when the component first initialises. It returns a promise that resolves as soon as any pending state changes have been applied to the DOM (or immediately, if there are no pending state changes).
+
+When you update component state in Svelte, it doesn't update the DOM immediately. Instead, it waits until the next *microtask* to see if there are any other changes that need to be applied, including in other components. Doing so avoids unnecessary work and allows the browser to batch things more effectively.
+
+You can see that behaviour in this example. Select a range of text and hit the tab key. Because the `<textarea>` value changes, the current selection is cleared and the cursor jumps, annoyingly, to the end. We can fix this by importing `tick`...
+
+```js
+import { tick } from 'svelte';
+```
+
+...and running it immediately before we set `this.selectionStart` and `this.selectionEnd` at the end of `handleKeydown`:
+
+```js
+await tick();
+this.selectionStart = selectionStart;
+this.selectionEnd = selectionEnd;
+```
\ No newline at end of file
diff --git a/site/content/tutorial/07-lifecycle/meta.json b/site/content/tutorial/07-lifecycle/meta.json
new file mode 100644
index 0000000000..2f833e2a4a
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Lifecycle"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/01-writable-stores/app-a/App.svelte b/site/content/tutorial/08-stores/01-writable-stores/app-a/App.svelte
new file mode 100644
index 0000000000..481b3070dc
--- /dev/null
+++ b/site/content/tutorial/08-stores/01-writable-stores/app-a/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { count } from './stores.js';
+	import Incrementer from './Incrementer.svelte';
+	import Decrementer from './Decrementer.svelte';
+	import Resetter from './Resetter.svelte';
+
+	let countValue;
+
+	count.subscribe(value => {
+		countValue = value;
+	});
+</script>
+
+<h1>The count is {countValue}</h1>
+
+<Incrementer/>
+<Decrementer/>
+<Resetter/>
diff --git a/site/content/tutorial/08-stores/01-writable-stores/app-a/Decrementer.svelte b/site/content/tutorial/08-stores/01-writable-stores/app-a/Decrementer.svelte
new file mode 100644
index 0000000000..9bd4422f49
--- /dev/null
+++ b/site/content/tutorial/08-stores/01-writable-stores/app-a/Decrementer.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function decrement() {
+		// TODO decrement the count
+	}
+</script>
+
+<button on:click={decrement}>
+	-
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/01-writable-stores/app-a/Incrementer.svelte b/site/content/tutorial/08-stores/01-writable-stores/app-a/Incrementer.svelte
new file mode 100644
index 0000000000..3581f243d8
--- /dev/null
+++ b/site/content/tutorial/08-stores/01-writable-stores/app-a/Incrementer.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function increment() {
+		// TODO increment the count
+	}
+</script>
+
+<button on:click={increment}>
+	+
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/01-writable-stores/app-a/Resetter.svelte b/site/content/tutorial/08-stores/01-writable-stores/app-a/Resetter.svelte
new file mode 100644
index 0000000000..b4a6b7559b
--- /dev/null
+++ b/site/content/tutorial/08-stores/01-writable-stores/app-a/Resetter.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function reset() {
+		// TODO reset the count
+	}
+</script>
+
+<button on:click={reset}>
+	reset
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/01-writable-stores/app-a/stores.js b/site/content/tutorial/08-stores/01-writable-stores/app-a/stores.js
new file mode 100644
index 0000000000..143e0c99f0
--- /dev/null
+++ b/site/content/tutorial/08-stores/01-writable-stores/app-a/stores.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const count = writable(0);
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/01-writable-stores/app-b/App.svelte b/site/content/tutorial/08-stores/01-writable-stores/app-b/App.svelte
new file mode 100644
index 0000000000..57bbde1c1e
--- /dev/null
+++ b/site/content/tutorial/08-stores/01-writable-stores/app-b/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { count } from './stores.js';
+	import Incrementer from './Incrementer.svelte';
+	import Decrementer from './Decrementer.svelte';
+	import Resetter from './Resetter.svelte';
+
+	let countValue;
+
+	count.subscribe(value => {
+		countValue = value;
+	});
+</script>
+
+<h1>The count is {countValue}</h1>
+
+<Incrementer/>
+<Decrementer/>
+<Resetter/>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/01-writable-stores/app-b/Decrementer.svelte b/site/content/tutorial/08-stores/01-writable-stores/app-b/Decrementer.svelte
new file mode 100644
index 0000000000..043b795047
--- /dev/null
+++ b/site/content/tutorial/08-stores/01-writable-stores/app-b/Decrementer.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function decrement() {
+		count.update(n => n - 1);
+	}
+</script>
+
+<button on:click={decrement}>
+	-
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/01-writable-stores/app-b/Incrementer.svelte b/site/content/tutorial/08-stores/01-writable-stores/app-b/Incrementer.svelte
new file mode 100644
index 0000000000..2b5763012b
--- /dev/null
+++ b/site/content/tutorial/08-stores/01-writable-stores/app-b/Incrementer.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function increment() {
+		count.update(n => n + 1);
+	}
+</script>
+
+<button on:click={increment}>
+	+
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/01-writable-stores/app-b/Resetter.svelte b/site/content/tutorial/08-stores/01-writable-stores/app-b/Resetter.svelte
new file mode 100644
index 0000000000..4183421e51
--- /dev/null
+++ b/site/content/tutorial/08-stores/01-writable-stores/app-b/Resetter.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function reset() {
+		count.set(0);
+	}
+</script>
+
+<button on:click={reset}>
+	reset
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/01-writable-stores/app-b/stores.js b/site/content/tutorial/08-stores/01-writable-stores/app-b/stores.js
new file mode 100644
index 0000000000..143e0c99f0
--- /dev/null
+++ b/site/content/tutorial/08-stores/01-writable-stores/app-b/stores.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const count = writable(0);
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/01-writable-stores/text.md b/site/content/tutorial/08-stores/01-writable-stores/text.md
new file mode 100644
index 0000000000..dc7081f46a
--- /dev/null
+++ b/site/content/tutorial/08-stores/01-writable-stores/text.md
@@ -0,0 +1,27 @@
+---
+title: Writable stores
+---
+
+Not all application state belongs inside your application's component hierarchy. Sometimes, you'll have values that need to be accessed by multiple unrelated components, or by a regular JavaScript module.
+
+In Svelte, we do this with *stores*. A store is simply an object with a `subscribe` method that allows interested parties to be notified whenever the store value changes. In `App.svelte`, `count` is a store, and we're setting `countValue` in the `count.subscribe` callback.
+
+Click the `stores.js` tab to see the definition of `count`. It's a *writable* store, which means it has `set` and `update` methods in addition to `subscribe`.
+
+Now go to the `Incrementer.svelte` tab so that we can wire up the `+` button:
+
+```js
+function increment() {
+	count.update(n => n + 1);
+}
+```
+
+Clicking the `+` button should now update the count. Do the inverse for `Decrementer.svelte`.
+
+Finally, in `Resetter.svelte`, implement `reset`:
+
+```js
+function reset() {
+	count.set(0);
+}
+```
diff --git a/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/App.svelte b/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/App.svelte
new file mode 100644
index 0000000000..481b3070dc
--- /dev/null
+++ b/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { count } from './stores.js';
+	import Incrementer from './Incrementer.svelte';
+	import Decrementer from './Decrementer.svelte';
+	import Resetter from './Resetter.svelte';
+
+	let countValue;
+
+	count.subscribe(value => {
+		countValue = value;
+	});
+</script>
+
+<h1>The count is {countValue}</h1>
+
+<Incrementer/>
+<Decrementer/>
+<Resetter/>
diff --git a/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/Decrementer.svelte b/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/Decrementer.svelte
new file mode 100644
index 0000000000..043b795047
--- /dev/null
+++ b/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/Decrementer.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function decrement() {
+		count.update(n => n - 1);
+	}
+</script>
+
+<button on:click={decrement}>
+	-
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/Incrementer.svelte b/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/Incrementer.svelte
new file mode 100644
index 0000000000..2b5763012b
--- /dev/null
+++ b/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/Incrementer.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function increment() {
+		count.update(n => n + 1);
+	}
+</script>
+
+<button on:click={increment}>
+	+
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/Resetter.svelte b/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/Resetter.svelte
new file mode 100644
index 0000000000..4183421e51
--- /dev/null
+++ b/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/Resetter.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function reset() {
+		count.set(0);
+	}
+</script>
+
+<button on:click={reset}>
+	reset
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/stores.js b/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/stores.js
new file mode 100644
index 0000000000..143e0c99f0
--- /dev/null
+++ b/site/content/tutorial/08-stores/02-auto-subscriptions/app-a/stores.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const count = writable(0);
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/02-auto-subscriptions/app-b/App.svelte b/site/content/tutorial/08-stores/02-auto-subscriptions/app-b/App.svelte
new file mode 100644
index 0000000000..10ebfb65bb
--- /dev/null
+++ b/site/content/tutorial/08-stores/02-auto-subscriptions/app-b/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { count } from './stores.js';
+	import Incrementer from './Incrementer.svelte';
+	import Decrementer from './Decrementer.svelte';
+	import Resetter from './Resetter.svelte';
+</script>
+
+<h1>The count is {$count}</h1>
+
+<Incrementer/>
+<Decrementer/>
+<Resetter/>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/02-auto-subscriptions/app-b/Decrementer.svelte b/site/content/tutorial/08-stores/02-auto-subscriptions/app-b/Decrementer.svelte
new file mode 100644
index 0000000000..043b795047
--- /dev/null
+++ b/site/content/tutorial/08-stores/02-auto-subscriptions/app-b/Decrementer.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function decrement() {
+		count.update(n => n - 1);
+	}
+</script>
+
+<button on:click={decrement}>
+	-
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/02-auto-subscriptions/app-b/Incrementer.svelte b/site/content/tutorial/08-stores/02-auto-subscriptions/app-b/Incrementer.svelte
new file mode 100644
index 0000000000..2b5763012b
--- /dev/null
+++ b/site/content/tutorial/08-stores/02-auto-subscriptions/app-b/Incrementer.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function increment() {
+		count.update(n => n + 1);
+	}
+</script>
+
+<button on:click={increment}>
+	+
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/02-auto-subscriptions/app-b/Resetter.svelte b/site/content/tutorial/08-stores/02-auto-subscriptions/app-b/Resetter.svelte
new file mode 100644
index 0000000000..4183421e51
--- /dev/null
+++ b/site/content/tutorial/08-stores/02-auto-subscriptions/app-b/Resetter.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { count } from './stores.js';
+
+	function reset() {
+		count.set(0);
+	}
+</script>
+
+<button on:click={reset}>
+	reset
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/02-auto-subscriptions/app-b/stores.js b/site/content/tutorial/08-stores/02-auto-subscriptions/app-b/stores.js
new file mode 100644
index 0000000000..143e0c99f0
--- /dev/null
+++ b/site/content/tutorial/08-stores/02-auto-subscriptions/app-b/stores.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const count = writable(0);
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/02-auto-subscriptions/text.md b/site/content/tutorial/08-stores/02-auto-subscriptions/text.md
new file mode 100644
index 0000000000..2bed4a67d1
--- /dev/null
+++ b/site/content/tutorial/08-stores/02-auto-subscriptions/text.md
@@ -0,0 +1,55 @@
+---
+title: Auto-subscriptions
+---
+
+The app in the previous example works, but there's a subtle bug — the store is subscribed to, but never unsubscribed. If the component was instantiated and destroyed many times, this would result in a *memory leak*.
+
+Start by declaring `unsubscribe` in `App.svelte`:
+
+```js
+const unsubscribe = count.subscribe(value => {
+	countValue = value;
+});
+```
+> Calling a `subscribe` method returns an `unsubscribe` function.
+
+You now declared `unsubscribe`, but it still needs to be called, for example through the `onDestroy` [lifecycle hook](/tutorial/ondestroy):
+
+```html
+<script>
+	import { onDestroy } from 'svelte';
+	import { count } from './stores.js';
+	import Incrementer from './Incrementer.svelte';
+	import Decrementer from './Decrementer.svelte';
+	import Resetter from './Resetter.svelte';
+
+	let countValue;
+
+	const unsubscribe = count.subscribe(value => {
+		countValue = value;
+	});
+
+	onDestroy(unsubscribe);
+</script>
+
+<h1>The count is {countValue}</h1>
+```
+
+It starts to get a bit boilerplatey though, especially if your component subscribes to multiple stores. Instead, Svelte has a trick up its sleeve — you can reference a store value by prefixing the store name with `$`:
+
+```html
+<script>
+	import { count } from './stores.js';
+	import Incrementer from './Incrementer.svelte';
+	import Decrementer from './Decrementer.svelte';
+	import Resetter from './Resetter.svelte';
+</script>
+
+<h1>The count is {$count}</h1>
+```
+
+> Auto-subscription only works with store variables that are declared (or imported) at the top-level scope of a component.
+
+You're not limited to using `$count` inside the markup, either — you can use it anywhere in the `<script>` as well, such as in event handlers or reactive declarations.
+
+> Any name beginning with `$` is assumed to refer to a store value. It's effectively a reserved character — Svelte will prevent you from declaring your own variables with a `$` prefix.
diff --git a/site/content/tutorial/08-stores/03-readable-stores/app-a/App.svelte b/site/content/tutorial/08-stores/03-readable-stores/app-a/App.svelte
new file mode 100644
index 0000000000..3ff0b0362f
--- /dev/null
+++ b/site/content/tutorial/08-stores/03-readable-stores/app-a/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { time } from './stores.js';
+
+	const formatter = new Intl.DateTimeFormat('en', {
+		hour12: true,
+		hour: 'numeric',
+		minute: '2-digit',
+		second: '2-digit'
+	});
+</script>
+
+<h1>The time is {formatter.format($time)}</h1>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/03-readable-stores/app-a/stores.js b/site/content/tutorial/08-stores/03-readable-stores/app-a/stores.js
new file mode 100644
index 0000000000..ec0a749d79
--- /dev/null
+++ b/site/content/tutorial/08-stores/03-readable-stores/app-a/stores.js
@@ -0,0 +1,7 @@
+import { readable } from 'svelte/store';
+
+export const time = readable(null, function start(set) {
+	// implementation goes here
+
+	return function stop() {};
+});
diff --git a/site/content/tutorial/08-stores/03-readable-stores/app-b/App.svelte b/site/content/tutorial/08-stores/03-readable-stores/app-b/App.svelte
new file mode 100644
index 0000000000..3ff0b0362f
--- /dev/null
+++ b/site/content/tutorial/08-stores/03-readable-stores/app-b/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { time } from './stores.js';
+
+	const formatter = new Intl.DateTimeFormat('en', {
+		hour12: true,
+		hour: 'numeric',
+		minute: '2-digit',
+		second: '2-digit'
+	});
+</script>
+
+<h1>The time is {formatter.format($time)}</h1>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/03-readable-stores/app-b/stores.js b/site/content/tutorial/08-stores/03-readable-stores/app-b/stores.js
new file mode 100644
index 0000000000..8c11f6d3aa
--- /dev/null
+++ b/site/content/tutorial/08-stores/03-readable-stores/app-b/stores.js
@@ -0,0 +1,11 @@
+import { readable } from 'svelte/store';
+
+export const time = readable(new Date(), function start(set) {
+	const interval = setInterval(() => {
+		set(new Date());
+	}, 1000);
+
+	return function stop() {
+		clearInterval(interval);
+	};
+});
diff --git a/site/content/tutorial/08-stores/03-readable-stores/text.md b/site/content/tutorial/08-stores/03-readable-stores/text.md
new file mode 100644
index 0000000000..25c02a9c0a
--- /dev/null
+++ b/site/content/tutorial/08-stores/03-readable-stores/text.md
@@ -0,0 +1,19 @@
+---
+title: Readable stores
+---
+
+Not all stores should be writable by whoever has a reference to them. For example, you might have a store representing the mouse position or the user's geolocation, and it doesn't make sense to be able to set those values from 'outside'. For those cases, we have *readable* stores.
+
+Click over to the `stores.js` tab. The first argument to `readable` is an initial value, which can be `null` or `undefined` if you don't have one yet. The second argument is a `start` function that takes a `set` callback and returns a `stop` function. The `start` function is called when the store gets its first subscriber; `stop` is called when the last subscriber unsubscribes.
+
+```js
+export const time = readable(new Date(), function start(set) {
+	const interval = setInterval(() => {
+		set(new Date());
+	}, 1000);
+
+	return function stop() {
+		clearInterval(interval);
+	};
+});
+```
diff --git a/site/content/tutorial/08-stores/04-derived-stores/app-a/App.svelte b/site/content/tutorial/08-stores/04-derived-stores/app-a/App.svelte
new file mode 100644
index 0000000000..8182ecd671
--- /dev/null
+++ b/site/content/tutorial/08-stores/04-derived-stores/app-a/App.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { time, elapsed } from './stores.js';
+
+	const formatter = new Intl.DateTimeFormat('en', {
+		hour12: true,
+		hour: 'numeric',
+		minute: '2-digit',
+		second: '2-digit'
+	});
+</script>
+
+<h1>The time is {formatter.format($time)}</h1>
+
+<p>
+	This page has been open for
+	{$elapsed} {$elapsed === 1 ? 'second' : 'seconds'}
+</p>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/04-derived-stores/app-a/stores.js b/site/content/tutorial/08-stores/04-derived-stores/app-a/stores.js
new file mode 100644
index 0000000000..f5e7eb28a5
--- /dev/null
+++ b/site/content/tutorial/08-stores/04-derived-stores/app-a/stores.js
@@ -0,0 +1,18 @@
+import { readable, derived } from 'svelte/store';
+
+export const time = readable(new Date(), function start(set) {
+	const interval = setInterval(() => {
+		set(new Date());
+	}, 1000);
+
+	return function stop() {
+		clearInterval(interval);
+	};
+});
+
+const start = new Date();
+
+export const elapsed = derived(
+	time,
+	$time => {}
+);
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/04-derived-stores/app-b/App.svelte b/site/content/tutorial/08-stores/04-derived-stores/app-b/App.svelte
new file mode 100644
index 0000000000..8182ecd671
--- /dev/null
+++ b/site/content/tutorial/08-stores/04-derived-stores/app-b/App.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { time, elapsed } from './stores.js';
+
+	const formatter = new Intl.DateTimeFormat('en', {
+		hour12: true,
+		hour: 'numeric',
+		minute: '2-digit',
+		second: '2-digit'
+	});
+</script>
+
+<h1>The time is {formatter.format($time)}</h1>
+
+<p>
+	This page has been open for
+	{$elapsed} {$elapsed === 1 ? 'second' : 'seconds'}
+</p>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/04-derived-stores/app-b/stores.js b/site/content/tutorial/08-stores/04-derived-stores/app-b/stores.js
new file mode 100644
index 0000000000..1da6d4195b
--- /dev/null
+++ b/site/content/tutorial/08-stores/04-derived-stores/app-b/stores.js
@@ -0,0 +1,18 @@
+import { readable, derived } from 'svelte/store';
+
+export const time = readable(new Date(), function start(set) {
+	const interval = setInterval(() => {
+		set(new Date());
+	}, 1000);
+
+	return function stop() {
+		clearInterval(interval);
+	};
+});
+
+const start = new Date();
+
+export const elapsed = derived(
+	time,
+	$time => Math.round(($time - start) / 1000)
+);
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/04-derived-stores/text.md b/site/content/tutorial/08-stores/04-derived-stores/text.md
new file mode 100644
index 0000000000..8c2c3e2839
--- /dev/null
+++ b/site/content/tutorial/08-stores/04-derived-stores/text.md
@@ -0,0 +1,14 @@
+---
+title: Derived stores
+---
+
+You can create a store whose value is based on the value of one or more *other* stores with `derived`. Building on our previous example, we can create a store that derives the time the page has been open:
+
+```js
+export const elapsed = derived(
+	time,
+	$time => Math.round(($time - start) / 1000)
+);
+```
+
+> It's possible to derive a store from multiple inputs, and to explicitly `set` a value instead of returning it (which is useful for deriving values asynchronously). Consult the [API reference](/docs#run-time-svelte-store-derived) for more information.
diff --git a/site/content/tutorial/08-stores/05-custom-stores/app-a/App.svelte b/site/content/tutorial/08-stores/05-custom-stores/app-a/App.svelte
new file mode 100644
index 0000000000..a320cc052f
--- /dev/null
+++ b/site/content/tutorial/08-stores/05-custom-stores/app-a/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { count } from './stores.js';
+</script>
+
+<h1>The count is {$count}</h1>
+
+<button on:click={count.increment}>+</button>
+<button on:click={count.decrement}>-</button>
+<button on:click={count.reset}>reset</button>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/05-custom-stores/app-a/stores.js b/site/content/tutorial/08-stores/05-custom-stores/app-a/stores.js
new file mode 100644
index 0000000000..ccb322652b
--- /dev/null
+++ b/site/content/tutorial/08-stores/05-custom-stores/app-a/stores.js
@@ -0,0 +1,14 @@
+import { writable } from 'svelte/store';
+
+function createCount() {
+	const { subscribe, set, update } = writable(0);
+
+	return {
+		subscribe,
+		increment: () => {},
+		decrement: () => {},
+		reset: () => {}
+	};
+}
+
+export const count = createCount();
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/05-custom-stores/app-b/App.svelte b/site/content/tutorial/08-stores/05-custom-stores/app-b/App.svelte
new file mode 100644
index 0000000000..a320cc052f
--- /dev/null
+++ b/site/content/tutorial/08-stores/05-custom-stores/app-b/App.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { count } from './stores.js';
+</script>
+
+<h1>The count is {$count}</h1>
+
+<button on:click={count.increment}>+</button>
+<button on:click={count.decrement}>-</button>
+<button on:click={count.reset}>reset</button>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/05-custom-stores/app-b/stores.js b/site/content/tutorial/08-stores/05-custom-stores/app-b/stores.js
new file mode 100644
index 0000000000..5a26025b03
--- /dev/null
+++ b/site/content/tutorial/08-stores/05-custom-stores/app-b/stores.js
@@ -0,0 +1,14 @@
+import { writable } from 'svelte/store';
+
+function createCount() {
+	const { subscribe, set, update } = writable(0);
+
+	return {
+		subscribe,
+		increment: () => update(n => n + 1),
+		decrement: () => update(n => n - 1),
+		reset: () => set(0)
+	};
+}
+
+export const count = createCount();
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/05-custom-stores/text.md b/site/content/tutorial/08-stores/05-custom-stores/text.md
new file mode 100644
index 0000000000..febd0ad7f7
--- /dev/null
+++ b/site/content/tutorial/08-stores/05-custom-stores/text.md
@@ -0,0 +1,21 @@
+---
+title: Custom stores
+---
+
+As long as an object correctly implements the `subscribe` method, it's a store. Beyond that, anything goes. It's very easy, therefore, to create custom stores with domain-specific logic.
+
+For example, the `count` store from our earlier example could include `increment`, `decrement` and `reset` methods and avoid exposing `set` and `update`:
+
+```js
+function createCount() {
+	const { subscribe, set, update } = writable(0);
+
+	return {
+		subscribe,
+		increment: () => update(n => n + 1),
+		decrement: () => update(n => n - 1),
+		reset: () => set(0)
+	};
+}
+```
+
diff --git a/site/content/tutorial/08-stores/06-store-bindings/app-a/App.svelte b/site/content/tutorial/08-stores/06-store-bindings/app-a/App.svelte
new file mode 100644
index 0000000000..3839224826
--- /dev/null
+++ b/site/content/tutorial/08-stores/06-store-bindings/app-a/App.svelte
@@ -0,0 +1,6 @@
+<script>
+	import { name, greeting } from './stores.js';
+</script>
+
+<h1>{$greeting}</h1>
+<input value={$name}>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/06-store-bindings/app-a/stores.js b/site/content/tutorial/08-stores/06-store-bindings/app-a/stores.js
new file mode 100644
index 0000000000..298598a412
--- /dev/null
+++ b/site/content/tutorial/08-stores/06-store-bindings/app-a/stores.js
@@ -0,0 +1,8 @@
+import { writable, derived } from 'svelte/store';
+
+export const name = writable('world');
+
+export const greeting = derived(
+	name,
+	$name => `Hello ${$name}!`
+);
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/06-store-bindings/app-b/App.svelte b/site/content/tutorial/08-stores/06-store-bindings/app-b/App.svelte
new file mode 100644
index 0000000000..52f04be957
--- /dev/null
+++ b/site/content/tutorial/08-stores/06-store-bindings/app-b/App.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { name, greeting } from './stores.js';
+</script>
+
+<h1>{$greeting}</h1>
+<input bind:value={$name}>
+
+<button on:click="{() => $name += '!'}">
+	Add exclamation mark!
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/06-store-bindings/app-b/stores.js b/site/content/tutorial/08-stores/06-store-bindings/app-b/stores.js
new file mode 100644
index 0000000000..298598a412
--- /dev/null
+++ b/site/content/tutorial/08-stores/06-store-bindings/app-b/stores.js
@@ -0,0 +1,8 @@
+import { writable, derived } from 'svelte/store';
+
+export const name = writable('world');
+
+export const greeting = derived(
+	name,
+	$name => `Hello ${$name}!`
+);
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/06-store-bindings/text.md b/site/content/tutorial/08-stores/06-store-bindings/text.md
new file mode 100644
index 0000000000..7034703f33
--- /dev/null
+++ b/site/content/tutorial/08-stores/06-store-bindings/text.md
@@ -0,0 +1,23 @@
+---
+title: Store bindings
+---
+
+If a store is writable — i.e. it has a `set` method — you can bind to its value, just as you can bind to local component state.
+
+In this example we have a writable store `name` and a derived store `greeting`. Update the `<input>` element:
+
+```html
+<input bind:value={$name}>
+```
+
+Changing the input value will now update `name` and all its dependents.
+
+We can also assign directly to store values inside a component. Add a `<button>` element:
+
+```html
+<button on:click="{() => $name += '!'}">
+	Add exclamation mark!
+</button>
+```
+
+The `$name += '!'` assignment is equivalent to `name.set($name + '!')`.
\ No newline at end of file
diff --git a/site/content/tutorial/08-stores/meta.json b/site/content/tutorial/08-stores/meta.json
new file mode 100644
index 0000000000..ad974de0d9
--- /dev/null
+++ b/site/content/tutorial/08-stores/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Stores"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/09-motion/01-tweened/app-a/App.svelte b/site/content/tutorial/09-motion/01-tweened/app-a/App.svelte
new file mode 100644
index 0000000000..a4f828264c
--- /dev/null
+++ b/site/content/tutorial/09-motion/01-tweened/app-a/App.svelte
@@ -0,0 +1,34 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	const progress = writable(0);
+</script>
+
+<progress value={$progress}></progress>
+
+<button on:click="{() => progress.set(0)}">
+	0%
+</button>
+
+<button on:click="{() => progress.set(0.25)}">
+	25%
+</button>
+
+<button on:click="{() => progress.set(0.5)}">
+	50%
+</button>
+
+<button on:click="{() => progress.set(0.75)}">
+	75%
+</button>
+
+<button on:click="{() => progress.set(1)}">
+	100%
+</button>
+
+<style>
+	progress {
+		display: block;
+		width: 100%;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/09-motion/01-tweened/app-b/App.svelte b/site/content/tutorial/09-motion/01-tweened/app-b/App.svelte
new file mode 100644
index 0000000000..ee3c7a1b5d
--- /dev/null
+++ b/site/content/tutorial/09-motion/01-tweened/app-b/App.svelte
@@ -0,0 +1,38 @@
+<script>
+	import { tweened } from 'svelte/motion';
+	import { cubicOut } from 'svelte/easing';
+
+	const progress = tweened(0, {
+		duration: 400,
+		easing: cubicOut
+	});
+</script>
+
+<progress value={$progress}></progress>
+
+<button on:click="{() => progress.set(0)}">
+	0%
+</button>
+
+<button on:click="{() => progress.set(0.25)}">
+	25%
+</button>
+
+<button on:click="{() => progress.set(0.5)}">
+	50%
+</button>
+
+<button on:click="{() => progress.set(0.75)}">
+	75%
+</button>
+
+<button on:click="{() => progress.set(1)}">
+	100%
+</button>
+
+<style>
+	progress {
+		display: block;
+		width: 100%;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/09-motion/01-tweened/text.md b/site/content/tutorial/09-motion/01-tweened/text.md
new file mode 100644
index 0000000000..50cd0c2fba
--- /dev/null
+++ b/site/content/tutorial/09-motion/01-tweened/text.md
@@ -0,0 +1,40 @@
+---
+title: Tweened
+---
+
+Setting values and watching the DOM update automatically is cool. Know what's even cooler? *Tweening* those values. Svelte includes tools to help you build slick user interfaces that use animation to communicate changes.
+
+Let's start by changing the `progress` store to a `tweened` value:
+
+```html
+<script>
+	import { tweened } from 'svelte/motion';
+
+	const progress = tweened(0);
+</script>
+```
+
+Clicking the buttons causes the progress bar to animate to its new value. It's a bit robotic and unsatisfying though. We need to add an easing function:
+
+```html
+<script>
+	import { tweened } from 'svelte/motion';
+	import { cubicOut } from 'svelte/easing';
+
+	const progress = tweened(0, {
+		duration: 400,
+		easing: cubicOut
+	});
+</script>
+```
+
+> The `svelte/easing` module contains the [Penner easing equations](https://web.archive.org/web/20190805215728/http://robertpenner.com/easing/), or you can supply your own `p => t` function where `p` and `t` are both values between 0 and 1.
+
+The full set of options available to `tweened`:
+
+* `delay` — milliseconds before the tween starts
+* `duration` — either the duration of the tween in milliseconds, or a `(from, to) => milliseconds` function allowing you to (e.g.) specify longer tweens for larger changes in value
+* `easing` — a `p => t` function
+* `interpolate` — a custom `(from, to) => t => value` function for interpolating between arbitrary values. By default, Svelte will interpolate between numbers, dates, and identically-shaped arrays and objects (as long as they only contain numbers and dates or other valid arrays and objects). If you want to interpolate (for example) colour strings or transformation matrices, supply a custom interpolator
+
+You can also pass these options to `progress.set` and `progress.update` as a second argument, in which case they will override the defaults. The `set` and `update` methods both return a promise that resolves when the tween completes.
diff --git a/site/content/tutorial/09-motion/02-spring/app-a/App.svelte b/site/content/tutorial/09-motion/02-spring/app-a/App.svelte
new file mode 100644
index 0000000000..aa8a406c2b
--- /dev/null
+++ b/site/content/tutorial/09-motion/02-spring/app-a/App.svelte
@@ -0,0 +1,37 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	let coords = writable({ x: 50, y: 50 });
+	let size = writable(10);
+</script>
+
+<div style="position: absolute; right: 1em;">
+	<label>
+		<h3>stiffness ({coords.stiffness})</h3>
+		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01">
+	</label>
+
+	<label>
+		<h3>damping ({coords.damping})</h3>
+		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01">
+	</label>
+</div>
+
+<svg
+	on:mousemove="{e => coords.set({ x: e.clientX, y: e.clientY })}"
+	on:mousedown="{() => size.set(30)}"
+	on:mouseup="{() => size.set(10)}"
+>
+	<circle cx={$coords.x} cy={$coords.y} r={$size}/>
+</svg>
+
+<style>
+	svg {
+		width: 100%;
+		height: 100%;
+		margin: -8px;
+	}
+	circle {
+		fill: #ff3e00;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/09-motion/02-spring/app-b/App.svelte b/site/content/tutorial/09-motion/02-spring/app-b/App.svelte
new file mode 100644
index 0000000000..d8a0287c2c
--- /dev/null
+++ b/site/content/tutorial/09-motion/02-spring/app-b/App.svelte
@@ -0,0 +1,40 @@
+<script>
+	import { spring } from 'svelte/motion';
+
+	let coords = spring({ x: 50, y: 50 }, {
+		stiffness: 0.1,
+		damping: 0.25
+	});
+
+	let size = spring(10);
+</script>
+
+<div style="position: absolute; right: 1em;">
+	<label>
+		<h3>stiffness ({coords.stiffness})</h3>
+		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01">
+	</label>
+
+	<label>
+		<h3>damping ({coords.damping})</h3>
+		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01">
+	</label>
+</div>
+
+<svg
+	on:mousemove="{e => coords.set({ x: e.clientX, y: e.clientY })}"
+	on:mousedown="{() => size.set(30)}"
+	on:mouseup="{() => size.set(10)}"
+>
+	<circle cx={$coords.x} cy={$coords.y} r={$size}/>
+</svg>
+
+<style>
+	svg {
+		width: 100%;
+		height: 100%;
+	}
+	circle {
+		fill: #ff3e00;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/09-motion/02-spring/text.md b/site/content/tutorial/09-motion/02-spring/text.md
new file mode 100644
index 0000000000..1b2bdfa376
--- /dev/null
+++ b/site/content/tutorial/09-motion/02-spring/text.md
@@ -0,0 +1,29 @@
+---
+title: Spring
+---
+
+The `spring` function is an alternative to `tweened` that often works better for values that are frequently changing.
+
+In this example we have two stores — one representing the circle's coordinates, and one representing its size. Let's convert them to springs:
+
+```html
+<script>
+	import { spring } from 'svelte/motion';
+
+	let coords = spring({ x: 50, y: 50 });
+	let size = spring(10);
+</script>
+```
+
+Both springs have default `stiffness` and `damping` values, which control the spring's, well... springiness. We can specify our own initial values:
+
+```js
+let coords = spring({ x: 50, y: 50 }, {
+	stiffness: 0.1,
+	damping: 0.25
+});
+```
+
+Waggle your mouse around, and try dragging the sliders to get a feel for how they affect the spring's behaviour. Notice that you can adjust the values while the spring is still in motion.
+
+Consult the [API reference](/docs#run-time-svelte-motion-spring) for more information.
diff --git a/site/content/tutorial/09-motion/meta.json b/site/content/tutorial/09-motion/meta.json
new file mode 100644
index 0000000000..e6fa83cd7f
--- /dev/null
+++ b/site/content/tutorial/09-motion/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Motion"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/01-transition/app-a/App.svelte b/site/content/tutorial/10-transitions/01-transition/app-a/App.svelte
new file mode 100644
index 0000000000..fdb1d21540
--- /dev/null
+++ b/site/content/tutorial/10-transitions/01-transition/app-a/App.svelte
@@ -0,0 +1,14 @@
+<script>
+	let visible = true;
+</script>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<p>
+		Fades in and out
+	</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/01-transition/app-b/App.svelte b/site/content/tutorial/10-transitions/01-transition/app-b/App.svelte
new file mode 100644
index 0000000000..b7909fb86e
--- /dev/null
+++ b/site/content/tutorial/10-transitions/01-transition/app-b/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { fade } from 'svelte/transition';
+	let visible = true;
+</script>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<p transition:fade>
+		Fades in and out
+	</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/01-transition/text.md b/site/content/tutorial/10-transitions/01-transition/text.md
new file mode 100644
index 0000000000..741511f233
--- /dev/null
+++ b/site/content/tutorial/10-transitions/01-transition/text.md
@@ -0,0 +1,20 @@
+---
+title: The transition directive
+---
+
+We can make more appealing user interfaces by gracefully transitioning elements into and out of the DOM. Svelte makes this very easy with the `transition` directive.
+
+First, import the `fade` function from `svelte/transition`...
+
+```html
+<script>
+	import { fade } from 'svelte/transition';
+	let visible = true;
+</script>
+```
+
+...then add it to the `<p>` element:
+
+```html
+<p transition:fade>Fades in and out</p>
+```
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte b/site/content/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte
new file mode 100644
index 0000000000..b7909fb86e
--- /dev/null
+++ b/site/content/tutorial/10-transitions/02-adding-parameters-to-transitions/app-a/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { fade } from 'svelte/transition';
+	let visible = true;
+</script>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<p transition:fade>
+		Fades in and out
+	</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte b/site/content/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte
new file mode 100644
index 0000000000..01047f5e37
--- /dev/null
+++ b/site/content/tutorial/10-transitions/02-adding-parameters-to-transitions/app-b/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { fly } from 'svelte/transition';
+	let visible = true;
+</script>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<p transition:fly="{{ y: 200, duration: 2000 }}">
+		Flies in and out
+	</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/02-adding-parameters-to-transitions/text.md b/site/content/tutorial/10-transitions/02-adding-parameters-to-transitions/text.md
new file mode 100644
index 0000000000..5712b7e8c4
--- /dev/null
+++ b/site/content/tutorial/10-transitions/02-adding-parameters-to-transitions/text.md
@@ -0,0 +1,22 @@
+---
+title: Adding parameters
+---
+
+Transition functions can accept parameters. Replace the `fade` transition with `fly`...
+
+```html
+<script>
+	import { fly } from 'svelte/transition';
+	let visible = true;
+</script>
+```
+
+...and apply it to the `<p>` along with some options:
+
+```html
+<p transition:fly="{{ y: 200, duration: 2000 }}">
+	Flies in and out
+</p>
+```
+
+Note that the transition is *reversible* — if you toggle the checkbox while the transition is ongoing, it transitions from the current point, rather than the beginning or the end.
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/03-in-and-out/app-a/App.svelte b/site/content/tutorial/10-transitions/03-in-and-out/app-a/App.svelte
new file mode 100644
index 0000000000..01047f5e37
--- /dev/null
+++ b/site/content/tutorial/10-transitions/03-in-and-out/app-a/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { fly } from 'svelte/transition';
+	let visible = true;
+</script>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<p transition:fly="{{ y: 200, duration: 2000 }}">
+		Flies in and out
+	</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/03-in-and-out/app-b/App.svelte b/site/content/tutorial/10-transitions/03-in-and-out/app-b/App.svelte
new file mode 100644
index 0000000000..36d36664e6
--- /dev/null
+++ b/site/content/tutorial/10-transitions/03-in-and-out/app-b/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { fade, fly } from 'svelte/transition';
+	let visible = true;
+</script>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<p in:fly="{{ y: 200, duration: 2000 }}" out:fade>
+		Flies in, fades out
+	</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/03-in-and-out/text.md b/site/content/tutorial/10-transitions/03-in-and-out/text.md
new file mode 100644
index 0000000000..1f1ac2c80b
--- /dev/null
+++ b/site/content/tutorial/10-transitions/03-in-and-out/text.md
@@ -0,0 +1,19 @@
+---
+title: In and out
+---
+
+Instead of the `transition` directive, an element can have an `in` or an `out` directive, or both together. Import `fade` alongside `fly`...
+
+```js
+import { fade, fly } from 'svelte/transition';
+```
+
+...then replace the `transition` directive with separate `in` and `out` directives:
+
+```html
+<p in:fly="{{ y: 200, duration: 2000 }}" out:fade>
+	Flies in, fades out
+</p>
+```
+
+In this case, the transitions are *not* reversed.
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte b/site/content/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
new file mode 100644
index 0000000000..872c2e4aa3
--- /dev/null
+++ b/site/content/tutorial/10-transitions/04-custom-css-transitions/app-a/App.svelte
@@ -0,0 +1,38 @@
+<script>
+	import { fade } from 'svelte/transition';
+
+	let visible = true;
+
+	function spin(node, { duration }) {
+		return {
+			duration,
+			css: t => ``
+		};
+	}
+</script>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<div class="centered" in:spin="{{duration: 8000}}" out:fade>
+		<span>transitions!</span>
+	</div>
+{/if}
+
+<style>
+	.centered {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%,-50%);
+	}
+
+	span {
+		position: absolute;
+		transform: translate(-50%,-50%);
+		font-size: 4em;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte b/site/content/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
new file mode 100644
index 0000000000..4bb475157c
--- /dev/null
+++ b/site/content/tutorial/10-transitions/04-custom-css-transitions/app-b/App.svelte
@@ -0,0 +1,49 @@
+<script>
+	import { fade } from 'svelte/transition';
+	import { elasticOut } from 'svelte/easing';
+
+	let visible = true;
+
+	function spin(node, { duration }) {
+		return {
+			duration,
+			css: t => {
+				const eased = elasticOut(t);
+
+				return `
+					transform: scale(${eased}) rotate(${eased * 1080}deg);
+					color: hsl(
+						${Math.trunc(t * 360)},
+						${Math.min(100, 1000 - 1000 * t)}%,
+						${Math.min(50, 500 - 500 * t)}%
+					);`
+			}
+		};
+	}
+</script>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<div class="centered" in:spin="{{duration: 8000}}" out:fade>
+		<span>transitions!</span>
+	</div>
+{/if}
+
+<style>
+	.centered {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%,-50%);
+	}
+
+	span {
+		position: absolute;
+		transform: translate(-50%,-50%);
+		font-size: 4em;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md b/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md
new file mode 100644
index 0000000000..138d3de3b6
--- /dev/null
+++ b/site/content/tutorial/10-transitions/04-custom-css-transitions/text.md
@@ -0,0 +1,72 @@
+---
+title: Custom CSS transitions
+---
+
+The `svelte/transition` module has a handful of built-in transitions, but it's very easy to create your own. By way of example, this is the source of the `fade` transition:
+
+```js
+function fade(node, {
+	delay = 0,
+	duration = 400
+}) {
+	const o = +getComputedStyle(node).opacity;
+
+	return {
+		delay,
+		duration,
+		css: t => `opacity: ${t * o}`
+	};
+}
+```
+
+The function takes two arguments — the node to which the transition is applied, and any parameters that were passed in — and returns a transition object which can have the following properties:
+
+* `delay` — milliseconds before the transition begins
+* `duration` — length of the transition in milliseconds
+* `easing` — a `p => t` easing function (see the chapter on [tweening](/tutorial/tweened))
+* `css` — a `(t, u) => css` function, where `u === 1 - t`
+* `tick` — a `(t, u) => {...}` function that has some effect on the node
+
+The `t` value is `0` at the beginning of an intro or the end of an outro, and `1` at the end of an intro or beginning of an outro.
+
+Most of the time you should return the `css` property and *not* the `tick` property, as CSS animations run off the main thread to prevent jank where possible. Svelte 'simulates' the transition and constructs a CSS animation, then lets it run.
+
+For example, the `fade` transition generates a CSS animation somewhat like this:
+
+```css
+0% { opacity: 0 }
+10% { opacity: 0.1 }
+20% { opacity: 0.2 }
+/* ... */
+100% { opacity: 1 }
+```
+
+We can get a lot more creative though. Let's make something truly gratuitous:
+
+```html
+<script>
+	import { fade } from 'svelte/transition';
+	import { elasticOut } from 'svelte/easing';
+
+	let visible = true;
+
+	function spin(node, { duration }) {
+		return {
+			duration,
+			css: t => {
+				const eased = elasticOut(t);
+
+				return `
+					transform: scale(${eased}) rotate(${eased * 1080}deg);
+					color: hsl(
+						${Math.trunc(t * 360)},
+						${Math.min(100, 1000 - 1000 * t)}%,
+						${Math.min(50, 500 - 500 * t)}%
+					);`
+			}
+		};
+	}
+</script>
+```
+
+Remember: with great power comes great responsibility.
diff --git a/site/content/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte b/site/content/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte
new file mode 100644
index 0000000000..7ce4a86e92
--- /dev/null
+++ b/site/content/tutorial/10-transitions/05-custom-js-transitions/app-a/App.svelte
@@ -0,0 +1,22 @@
+<script>
+	let visible = false;
+
+	function typewriter(node, { speed = 50 }) {
+		// implementation goes here
+
+		return {
+
+		};
+	}
+</script>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<p transition:typewriter>
+		The quick brown fox jumps over the lazy dog
+	</p>
+{/if}
diff --git a/site/content/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte b/site/content/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
new file mode 100644
index 0000000000..563803387b
--- /dev/null
+++ b/site/content/tutorial/10-transitions/05-custom-js-transitions/app-b/App.svelte
@@ -0,0 +1,36 @@
+<script>
+	let visible = false;
+
+	function typewriter(node, { speed = 1 }) {
+		const valid = (
+			node.childNodes.length === 1 &&
+			node.childNodes[0].nodeType === Node.TEXT_NODE
+		);
+
+		if (!valid) {
+			throw new Error(`This transition only works on elements with a single text node child`);
+		}
+
+		const text = node.textContent;
+		const duration = text.length / (speed * 0.01);
+
+		return {
+			duration,
+			tick: t => {
+				const i = Math.trunc(text.length * t);
+				node.textContent = text.slice(0, i);
+			}
+		};
+	}
+</script>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<p transition:typewriter>
+		The quick brown fox jumps over the lazy dog
+	</p>
+{/if}
diff --git a/site/content/tutorial/10-transitions/05-custom-js-transitions/text.md b/site/content/tutorial/10-transitions/05-custom-js-transitions/text.md
new file mode 100644
index 0000000000..38c716504e
--- /dev/null
+++ b/site/content/tutorial/10-transitions/05-custom-js-transitions/text.md
@@ -0,0 +1,29 @@
+---
+title: Custom JS transitions
+---
+
+While you should generally use CSS for transitions as much as possible, there are some effects that can't be achieved without JavaScript, such as a typewriter effect:
+
+```js
+function typewriter(node, { speed = 1 }) {
+	const valid = (
+		node.childNodes.length === 1 &&
+		node.childNodes[0].nodeType === Node.TEXT_NODE
+	);
+
+	if (!valid) {
+		throw new Error(`This transition only works on elements with a single text node child`);
+	}
+
+	const text = node.textContent;
+	const duration = text.length / (speed * 0.01);
+
+	return {
+		duration,
+		tick: t => {
+			const i = Math.trunc(text.length * t);
+			node.textContent = text.slice(0, i);
+		}
+	};
+}
+```
diff --git a/site/content/tutorial/10-transitions/06-transition-events/app-a/App.svelte b/site/content/tutorial/10-transitions/06-transition-events/app-a/App.svelte
new file mode 100644
index 0000000000..3369af077f
--- /dev/null
+++ b/site/content/tutorial/10-transitions/06-transition-events/app-a/App.svelte
@@ -0,0 +1,19 @@
+<script>
+	import { fly } from 'svelte/transition';
+
+	let visible = true;
+	let status = 'waiting...';
+</script>
+
+<p>status: {status}</p>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<p transition:fly="{{ y: 200, duration: 2000 }}">
+		Flies in and out
+	</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/06-transition-events/app-b/App.svelte b/site/content/tutorial/10-transitions/06-transition-events/app-b/App.svelte
new file mode 100644
index 0000000000..da79897365
--- /dev/null
+++ b/site/content/tutorial/10-transitions/06-transition-events/app-b/App.svelte
@@ -0,0 +1,25 @@
+<script>
+	import { fly } from 'svelte/transition';
+
+	let visible = true;
+	let status = 'waiting...';
+</script>
+
+<p>status: {status}</p>
+
+<label>
+	<input type="checkbox" bind:checked={visible}>
+	visible
+</label>
+
+{#if visible}
+	<p
+		transition:fly="{{ y: 200, duration: 2000 }}"
+		on:introstart="{() => status = 'intro started'}"
+		on:outrostart="{() => status = 'outro started'}"
+		on:introend="{() => status = 'intro ended'}"
+		on:outroend="{() => status = 'outro ended'}"
+	>
+		Flies in and out
+	</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/06-transition-events/text.md b/site/content/tutorial/10-transitions/06-transition-events/text.md
new file mode 100644
index 0000000000..5b87149162
--- /dev/null
+++ b/site/content/tutorial/10-transitions/06-transition-events/text.md
@@ -0,0 +1,17 @@
+---
+title: Transition events
+---
+
+It can be useful to know when transitions are beginning and ending. Svelte dispatches events that you can listen to like any other DOM event:
+
+```html
+<p
+	transition:fly="{{ y: 200, duration: 2000 }}"
+	on:introstart="{() => status = 'intro started'}"
+	on:outrostart="{() => status = 'outro started'}"
+	on:introend="{() => status = 'intro ended'}"
+	on:outroend="{() => status = 'outro ended'}"
+>
+	Flies in and out
+</p>
+```
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/07-local-transitions/app-a/App.svelte b/site/content/tutorial/10-transitions/07-local-transitions/app-a/App.svelte
new file mode 100644
index 0000000000..2e01048cc0
--- /dev/null
+++ b/site/content/tutorial/10-transitions/07-local-transitions/app-a/App.svelte
@@ -0,0 +1,32 @@
+<script>
+	import { slide } from 'svelte/transition';
+
+	let showItems = true;
+	let i = 5;
+	let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
+</script>
+
+<label>
+	<input type="checkbox" bind:checked={showItems}>
+	show list
+</label>
+
+<label>
+	<input type="range" bind:value={i} max=10>
+
+</label>
+
+{#if showItems}
+	{#each items.slice(0, i) as item}
+		<div transition:slide>
+			{item}
+		</div>
+	{/each}
+{/if}
+
+<style>
+	div {
+		padding: 0.5em 0;
+		border-top: 1px solid #eee;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/07-local-transitions/app-b/App.svelte b/site/content/tutorial/10-transitions/07-local-transitions/app-b/App.svelte
new file mode 100644
index 0000000000..46603a8b53
--- /dev/null
+++ b/site/content/tutorial/10-transitions/07-local-transitions/app-b/App.svelte
@@ -0,0 +1,32 @@
+<script>
+	import { slide } from 'svelte/transition';
+
+	let showItems = true;
+	let i = 5;
+	let items = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
+</script>
+
+<label>
+	<input type="checkbox" bind:checked={showItems}>
+	show list
+</label>
+
+<label>
+	<input type="range" bind:value={i} max=10>
+
+</label>
+
+{#if showItems}
+	{#each items.slice(0, i) as item}
+		<div transition:slide|local>
+			{item}
+		</div>
+	{/each}
+{/if}
+
+<style>
+	div {
+		padding: 0.5em 0;
+		border-top: 1px solid #eee;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/07-local-transitions/text.md b/site/content/tutorial/10-transitions/07-local-transitions/text.md
new file mode 100644
index 0000000000..7b9b0ce7f4
--- /dev/null
+++ b/site/content/tutorial/10-transitions/07-local-transitions/text.md
@@ -0,0 +1,15 @@
+---
+title: Local transitions
+---
+
+Ordinarily, transitions will play on elements when any container block is added or destroyed. In the example here, toggling the visibility of the entire list also applies transitions to individual list elements.
+
+Instead, we'd like transitions to play only when individual items are added and removed — in other words, when the user drags the slider.
+
+We can achieve this with a *local* transition, which only plays when the block with the transition itself is added or removed:
+
+```html
+<div transition:slide|local>
+	{item}
+</div>
+```
diff --git a/site/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte b/site/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte
new file mode 100644
index 0000000000..3b6c6776a6
--- /dev/null
+++ b/site/content/tutorial/10-transitions/08-deferred-transitions/app-a/App.svelte
@@ -0,0 +1,148 @@
+<script>
+	import { quintOut } from 'svelte/easing';
+	import { crossfade } from 'svelte/transition';
+
+	const [send, receive] = crossfade({
+		duration: d => Math.sqrt(d * 200),
+
+		fallback(node, params) {
+			const style = getComputedStyle(node);
+			const transform = style.transform === 'none' ? '' : style.transform;
+
+			return {
+				duration: 600,
+				easing: quintOut,
+				css: t => `
+					transform: ${transform} scale(${t});
+					opacity: ${t}
+				`
+			};
+		}
+	});
+
+	let uid = 1;
+
+	let todos = [
+		{ id: uid++, done: false, description: 'write some docs' },
+		{ id: uid++, done: false, description: 'start writing blog post' },
+		{ id: uid++, done: true,  description: 'buy some milk' },
+		{ id: uid++, done: false, description: 'mow the lawn' },
+		{ id: uid++, done: false, description: 'feed the turtle' },
+		{ id: uid++, done: false, description: 'fix some bugs' },
+	];
+
+	function add(input) {
+		const todo = {
+			id: uid++,
+			done: false,
+			description: input.value
+		};
+
+		todos = [todo, ...todos];
+		input.value = '';
+	}
+
+	function remove(todo) {
+		todos = todos.filter(t => t !== todo);
+	}
+
+	function mark(todo, done) {
+		todo.done = done;
+		remove(todo);
+		todos = todos.concat(todo);
+	}
+</script>
+
+<div class='board'>
+	<input
+		placeholder="what needs to be done?"
+		on:keydown={e => e.key === 'Enter' && add(e.target)}
+	>
+
+	<div class='left'>
+		<h2>todo</h2>
+		{#each todos.filter(t => !t.done) as todo (todo.id)}
+			<label>
+				<input type=checkbox on:change={() => mark(todo, true)}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">remove</button>
+			</label>
+		{/each}
+	</div>
+
+	<div class='right'>
+		<h2>done</h2>
+		{#each todos.filter(t => t.done) as todo (todo.id)}
+			<label class="done">
+				<input type=checkbox checked on:change={() => mark(todo, false)}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">remove</button>
+			</label>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.board {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-gap: 1em;
+		max-width: 36em;
+		margin: 0 auto;
+	}
+
+	.board > input {
+		font-size: 1.4em;
+		grid-column: 1/3;
+	}
+
+	h2 {
+		font-size: 2em;
+		font-weight: 200;
+		user-select: none;
+		margin: 0 0 0.5em 0;
+	}
+
+	label {
+		position: relative;
+		line-height: 1.2;
+		padding: 0.5em 2.5em 0.5em 2em;
+		margin: 0 0 0.5em 0;
+		border-radius: 2px;
+		user-select: none;
+		border: 1px solid hsl(240, 8%, 70%);
+		background-color:hsl(240, 8%, 93%);
+		color: #333;
+	}
+
+	input[type="checkbox"] {
+		position: absolute;
+		left: 0.5em;
+		top: 0.6em;
+		margin: 0;
+	}
+
+	.done {
+		border: 1px solid hsl(240, 8%, 90%);
+		background-color:hsl(240, 8%, 98%);
+	}
+
+	button {
+		position: absolute;
+		top: 0;
+		right: 0.2em;
+		width: 2em;
+		height: 100%;
+		background: no-repeat 50% 50% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
+		background-size: 1.4em 1.4em;
+		border: none;
+		opacity: 0;
+		transition: opacity 0.2s;
+		text-indent: -9999px;
+		cursor: pointer;
+	}
+
+	label:hover button {
+		opacity: 1;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte b/site/content/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte
new file mode 100644
index 0000000000..f3a26915a3
--- /dev/null
+++ b/site/content/tutorial/10-transitions/08-deferred-transitions/app-b/App.svelte
@@ -0,0 +1,155 @@
+<script>
+	import { quintOut } from 'svelte/easing';
+	import { crossfade } from 'svelte/transition';
+
+	const [send, receive] = crossfade({
+		duration: d => Math.sqrt(d * 200),
+
+		fallback(node, params) {
+			const style = getComputedStyle(node);
+			const transform = style.transform === 'none' ? '' : style.transform;
+
+			return {
+				duration: 600,
+				easing: quintOut,
+				css: t => `
+					transform: ${transform} scale(${t});
+					opacity: ${t}
+				`
+			};
+		}
+	});
+
+	let uid = 1;
+
+	let todos = [
+		{ id: uid++, done: false, description: 'write some docs' },
+		{ id: uid++, done: false, description: 'start writing blog post' },
+		{ id: uid++, done: true,  description: 'buy some milk' },
+		{ id: uid++, done: false, description: 'mow the lawn' },
+		{ id: uid++, done: false, description: 'feed the turtle' },
+		{ id: uid++, done: false, description: 'fix some bugs' },
+	];
+
+	function add(input) {
+		const todo = {
+			id: uid++,
+			done: false,
+			description: input.value
+		};
+
+		todos = [todo, ...todos];
+		input.value = '';
+	}
+
+	function remove(todo) {
+		todos = todos.filter(t => t !== todo);
+	}
+
+	function mark(todo, done) {
+		todo.done = done;
+		remove(todo);
+		todos = todos.concat(todo);
+	}
+</script>
+
+<div class='board'>
+	<input
+		placeholder="what needs to be done?"
+		on:keydown={e => e.key === 'Enter' && add(e.target)}
+	>
+
+	<div class='left'>
+		<h2>todo</h2>
+		{#each todos.filter(t => !t.done) as todo (todo.id)}
+			<label
+				in:receive="{{key: todo.id}}"
+				out:send="{{key: todo.id}}"
+			>
+				<input type=checkbox on:change={() => mark(todo, true)}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">remove</button>
+			</label>
+		{/each}
+	</div>
+
+	<div class='right'>
+		<h2>done</h2>
+		{#each todos.filter(t => t.done) as todo (todo.id)}
+			<label
+				class="done"
+				in:receive="{{key: todo.id}}"
+				out:send="{{key: todo.id}}"
+			>
+				<input type=checkbox checked on:change={() => mark(todo, false)}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">remove</button>
+			</label>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.board {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-gap: 1em;
+		max-width: 36em;
+		margin: 0 auto;
+	}
+
+	.board > input {
+		font-size: 1.4em;
+		grid-column: 1/3;
+	}
+
+	h2 {
+		font-size: 2em;
+		font-weight: 200;
+		user-select: none;
+		margin: 0 0 0.5em 0;
+	}
+
+	label {
+		position: relative;
+		line-height: 1.2;
+		padding: 0.5em 2.5em 0.5em 2em;
+		margin: 0 0 0.5em 0;
+		border-radius: 2px;
+		user-select: none;
+		border: 1px solid hsl(240, 8%, 70%);
+		background-color:hsl(240, 8%, 93%);
+		color: #333;
+	}
+
+	input[type="checkbox"] {
+		position: absolute;
+		left: 0.5em;
+		top: 0.6em;
+		margin: 0;
+	}
+
+	.done {
+		border: 1px solid hsl(240, 8%, 90%);
+		background-color:hsl(240, 8%, 98%);
+	}
+
+	button {
+		position: absolute;
+		top: 0;
+		right: 0.2em;
+		width: 2em;
+		height: 100%;
+		background: no-repeat 50% 50% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
+		background-size: 1.4em 1.4em;
+		border: none;
+		opacity: 0;
+		transition: opacity 0.2s;
+		text-indent: -9999px;
+		cursor: pointer;
+	}
+
+	label:hover button {
+		opacity: 1;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/08-deferred-transitions/text.md b/site/content/tutorial/10-transitions/08-deferred-transitions/text.md
new file mode 100644
index 0000000000..49f626554d
--- /dev/null
+++ b/site/content/tutorial/10-transitions/08-deferred-transitions/text.md
@@ -0,0 +1,30 @@
+---
+title: Deferred transitions
+---
+
+A particularly powerful feature of Svelte's transition engine is the ability to *defer* transitions, so that they can be coordinated between multiple elements.
+
+Take this pair of todo lists, in which toggling a todo sends it to the opposite list. In the real world, objects don't behave like that — instead of disappearing and reappearing in another place, they move through a series of intermediate positions. Using motion can go a long way towards helping users understand what's happening in your app.
+
+We can achieve this effect using the `crossfade` function, which creates a pair of transitions called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
+
+Find the `<label>` element on line 65, and add the `send` and `receive` transitions:
+
+```html
+<label
+	in:receive="{{key: todo.id}}"
+	out:send="{{key: todo.id}}"
+>
+```
+
+Do the same for the next `<label>` element:
+
+```html
+<label
+	class="done"
+	in:receive="{{key: todo.id}}"
+	out:send="{{key: todo.id}}"
+>
+```
+
+Now, when you toggle items, they move smoothly to their new location. The non-transitioning items still jump around awkwardly — we can fix that in the next chapter.
\ No newline at end of file
diff --git a/site/content/tutorial/10-transitions/09-key-blocks/app-a/App.svelte b/site/content/tutorial/10-transitions/09-key-blocks/app-a/App.svelte
new file mode 100644
index 0000000000..3385a02339
--- /dev/null
+++ b/site/content/tutorial/10-transitions/09-key-blocks/app-a/App.svelte
@@ -0,0 +1,19 @@
+<script>
+	import { fly } from 'svelte/transition';
+
+	let number = 0;
+</script>
+
+<div>
+	The number is:
+	<span style="display: inline-block" in:fly={{ y: -20 }}>
+		{number}
+	</span>
+</div>
+<br />
+<button
+	on:click={() => {
+		number += 1;
+	}}>
+	Increment
+</button>
diff --git a/site/content/tutorial/10-transitions/09-key-blocks/app-b/App.svelte b/site/content/tutorial/10-transitions/09-key-blocks/app-b/App.svelte
new file mode 100644
index 0000000000..0e40dc57d1
--- /dev/null
+++ b/site/content/tutorial/10-transitions/09-key-blocks/app-b/App.svelte
@@ -0,0 +1,21 @@
+<script>
+	import { fly } from 'svelte/transition';
+
+	let number = 0;
+</script>
+
+<div>
+	The number is:
+	{#key number}
+		<span style="display: inline-block" in:fly={{ y: -20 }}>
+			{number}
+		</span>
+	{/key}
+</div>
+<br />
+<button
+	on:click={() => {
+		number += 1;
+	}}>
+	Increment
+</button>
diff --git a/site/content/tutorial/10-transitions/09-key-blocks/text.md b/site/content/tutorial/10-transitions/09-key-blocks/text.md
new file mode 100644
index 0000000000..05a54d592a
--- /dev/null
+++ b/site/content/tutorial/10-transitions/09-key-blocks/text.md
@@ -0,0 +1,16 @@
+---
+title: Key blocks
+---
+
+Key blocks destroy and recreate their contents when the value of an expression changes.
+
+```html
+{#key value}
+	<div transition:fade>{value}</div>
+{/key}
+```
+
+This is useful if you want an element to play its transition whenever a value changes instead of only when the element enters or leaves the DOM.
+
+Wrap the `<span>` element in a key block depending on `number`. This will make the
+animation play whenever you press the increment button.
diff --git a/site/content/tutorial/10-transitions/meta.json b/site/content/tutorial/10-transitions/meta.json
new file mode 100644
index 0000000000..cb9291d73f
--- /dev/null
+++ b/site/content/tutorial/10-transitions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Transitions"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/11-animations/01-animate/app-a/App.svelte b/site/content/tutorial/11-animations/01-animate/app-a/App.svelte
new file mode 100644
index 0000000000..f3a26915a3
--- /dev/null
+++ b/site/content/tutorial/11-animations/01-animate/app-a/App.svelte
@@ -0,0 +1,155 @@
+<script>
+	import { quintOut } from 'svelte/easing';
+	import { crossfade } from 'svelte/transition';
+
+	const [send, receive] = crossfade({
+		duration: d => Math.sqrt(d * 200),
+
+		fallback(node, params) {
+			const style = getComputedStyle(node);
+			const transform = style.transform === 'none' ? '' : style.transform;
+
+			return {
+				duration: 600,
+				easing: quintOut,
+				css: t => `
+					transform: ${transform} scale(${t});
+					opacity: ${t}
+				`
+			};
+		}
+	});
+
+	let uid = 1;
+
+	let todos = [
+		{ id: uid++, done: false, description: 'write some docs' },
+		{ id: uid++, done: false, description: 'start writing blog post' },
+		{ id: uid++, done: true,  description: 'buy some milk' },
+		{ id: uid++, done: false, description: 'mow the lawn' },
+		{ id: uid++, done: false, description: 'feed the turtle' },
+		{ id: uid++, done: false, description: 'fix some bugs' },
+	];
+
+	function add(input) {
+		const todo = {
+			id: uid++,
+			done: false,
+			description: input.value
+		};
+
+		todos = [todo, ...todos];
+		input.value = '';
+	}
+
+	function remove(todo) {
+		todos = todos.filter(t => t !== todo);
+	}
+
+	function mark(todo, done) {
+		todo.done = done;
+		remove(todo);
+		todos = todos.concat(todo);
+	}
+</script>
+
+<div class='board'>
+	<input
+		placeholder="what needs to be done?"
+		on:keydown={e => e.key === 'Enter' && add(e.target)}
+	>
+
+	<div class='left'>
+		<h2>todo</h2>
+		{#each todos.filter(t => !t.done) as todo (todo.id)}
+			<label
+				in:receive="{{key: todo.id}}"
+				out:send="{{key: todo.id}}"
+			>
+				<input type=checkbox on:change={() => mark(todo, true)}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">remove</button>
+			</label>
+		{/each}
+	</div>
+
+	<div class='right'>
+		<h2>done</h2>
+		{#each todos.filter(t => t.done) as todo (todo.id)}
+			<label
+				class="done"
+				in:receive="{{key: todo.id}}"
+				out:send="{{key: todo.id}}"
+			>
+				<input type=checkbox checked on:change={() => mark(todo, false)}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">remove</button>
+			</label>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.board {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-gap: 1em;
+		max-width: 36em;
+		margin: 0 auto;
+	}
+
+	.board > input {
+		font-size: 1.4em;
+		grid-column: 1/3;
+	}
+
+	h2 {
+		font-size: 2em;
+		font-weight: 200;
+		user-select: none;
+		margin: 0 0 0.5em 0;
+	}
+
+	label {
+		position: relative;
+		line-height: 1.2;
+		padding: 0.5em 2.5em 0.5em 2em;
+		margin: 0 0 0.5em 0;
+		border-radius: 2px;
+		user-select: none;
+		border: 1px solid hsl(240, 8%, 70%);
+		background-color:hsl(240, 8%, 93%);
+		color: #333;
+	}
+
+	input[type="checkbox"] {
+		position: absolute;
+		left: 0.5em;
+		top: 0.6em;
+		margin: 0;
+	}
+
+	.done {
+		border: 1px solid hsl(240, 8%, 90%);
+		background-color:hsl(240, 8%, 98%);
+	}
+
+	button {
+		position: absolute;
+		top: 0;
+		right: 0.2em;
+		width: 2em;
+		height: 100%;
+		background: no-repeat 50% 50% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
+		background-size: 1.4em 1.4em;
+		border: none;
+		opacity: 0;
+		transition: opacity 0.2s;
+		text-indent: -9999px;
+		cursor: pointer;
+	}
+
+	label:hover button {
+		opacity: 1;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/11-animations/01-animate/app-b/App.svelte b/site/content/tutorial/11-animations/01-animate/app-b/App.svelte
new file mode 100644
index 0000000000..5c5e76331d
--- /dev/null
+++ b/site/content/tutorial/11-animations/01-animate/app-b/App.svelte
@@ -0,0 +1,158 @@
+<script>
+	import { quintOut } from 'svelte/easing';
+	import { crossfade } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+
+	const [send, receive] = crossfade({
+		duration: d => Math.sqrt(d * 200),
+
+		fallback(node, params) {
+			const style = getComputedStyle(node);
+			const transform = style.transform === 'none' ? '' : style.transform;
+
+			return {
+				duration: 600,
+				easing: quintOut,
+				css: t => `
+					transform: ${transform} scale(${t});
+					opacity: ${t}
+				`
+			};
+		}
+	});
+
+	let uid = 1;
+
+	let todos = [
+		{ id: uid++, done: false, description: 'write some docs' },
+		{ id: uid++, done: false, description: 'start writing blog post' },
+		{ id: uid++, done: true,  description: 'buy some milk' },
+		{ id: uid++, done: false, description: 'mow the lawn' },
+		{ id: uid++, done: false, description: 'feed the turtle' },
+		{ id: uid++, done: false, description: 'fix some bugs' },
+	];
+
+	function add(input) {
+		const todo = {
+			id: uid++,
+			done: false,
+			description: input.value
+		};
+
+		todos = [todo, ...todos];
+		input.value = '';
+	}
+
+	function remove(todo) {
+		todos = todos.filter(t => t !== todo);
+	}
+
+	function mark(todo, done) {
+		todo.done = done;
+		remove(todo);
+		todos = todos.concat(todo);
+	}
+</script>
+
+<div class='board'>
+	<input
+		placeholder="what needs to be done?"
+		on:keydown={e => e.key === 'Enter' && add(e.target)}
+	>
+
+	<div class='left'>
+		<h2>todo</h2>
+		{#each todos.filter(t => !t.done) as todo (todo.id)}
+			<label
+				in:receive="{{key: todo.id}}"
+				out:send="{{key: todo.id}}"
+				animate:flip
+			>
+				<input type=checkbox on:change={() => mark(todo, true)}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">remove</button>
+			</label>
+		{/each}
+	</div>
+
+	<div class='right'>
+		<h2>done</h2>
+		{#each todos.filter(t => t.done) as todo (todo.id)}
+			<label
+				class="done"
+				in:receive="{{key: todo.id}}"
+				out:send="{{key: todo.id}}"
+				animate:flip
+			>
+				<input type=checkbox checked on:change={() => mark(todo, false)}>
+				{todo.description}
+				<button on:click="{() => remove(todo)}">remove</button>
+			</label>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.board {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-gap: 1em;
+		max-width: 36em;
+		margin: 0 auto;
+	}
+
+	.board > input {
+		font-size: 1.4em;
+		grid-column: 1/3;
+	}
+
+	h2 {
+		font-size: 2em;
+		font-weight: 200;
+		user-select: none;
+		margin: 0 0 0.5em 0;
+	}
+
+	label {
+		position: relative;
+		line-height: 1.2;
+		padding: 0.5em 2.5em 0.5em 2em;
+		margin: 0 0 0.5em 0;
+		border-radius: 2px;
+		user-select: none;
+		border: 1px solid hsl(240, 8%, 70%);
+		background-color:hsl(240, 8%, 93%);
+		color: #333;
+	}
+
+	input[type="checkbox"] {
+		position: absolute;
+		left: 0.5em;
+		top: 0.6em;
+		margin: 0;
+	}
+
+	.done {
+		border: 1px solid hsl(240, 8%, 90%);
+		background-color:hsl(240, 8%, 98%);
+	}
+
+	button {
+		position: absolute;
+		top: 0;
+		right: 0.2em;
+		width: 2em;
+		height: 100%;
+		background: no-repeat 50% 50% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23676778' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M17,7H14.5L13.5,6H10.5L9.5,7H7V9H17V7M9,18H15A1,1 0 0,0 16,17V10H8V17A1,1 0 0,0 9,18Z'%3E%3C/path%3E%3C/svg%3E");
+		background-size: 1.4em 1.4em;
+		border: none;
+		opacity: 0;
+		transition: opacity 0.2s;
+		text-indent: -9999px;
+		cursor: pointer;
+	}
+
+	label:hover button {
+		opacity: 1;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/11-animations/01-animate/text.md b/site/content/tutorial/11-animations/01-animate/text.md
new file mode 100644
index 0000000000..fc09f39cad
--- /dev/null
+++ b/site/content/tutorial/11-animations/01-animate/text.md
@@ -0,0 +1,37 @@
+---
+title: The animate directive
+---
+
+In the [previous chapter](/tutorial/deferred-transitions), we used deferred transitions to create the illusion of motion as elements move from one todo list to the other.
+
+To complete the illusion, we also need to apply motion to the elements that *aren't* transitioning. For this, we use the `animate` directive.
+
+First, import the `flip` function — flip stands for ['First, Last, Invert, Play'](https://aerotwist.com/blog/flip-your-animations/) — from `svelte/animate`:
+
+```js
+import { flip } from 'svelte/animate';
+```
+
+Then add it to the `<label>` elements:
+
+```html
+<label
+	in:receive="{{key: todo.id}}"
+	out:send="{{key: todo.id}}"
+	animate:flip
+>
+```
+
+The movement is a little slow in this case, so we can add a `duration` parameter:
+
+```html
+<label
+	in:receive="{{key: todo.id}}"
+	out:send="{{key: todo.id}}"
+	animate:flip="{{duration: 200}}"
+>
+```
+
+> `duration` can also be a `d => milliseconds` function, where `d` is the number of pixels the element has to travel
+
+Note that all the transitions and animations are being applied with CSS, rather than JavaScript, meaning they won't block (or be blocked by) the main thread.
\ No newline at end of file
diff --git a/site/content/tutorial/11-animations/meta.json b/site/content/tutorial/11-animations/meta.json
new file mode 100644
index 0000000000..c71301495e
--- /dev/null
+++ b/site/content/tutorial/11-animations/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Animations"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/12-actions/01-actions/app-a/App.svelte b/site/content/tutorial/12-actions/01-actions/app-a/App.svelte
new file mode 100644
index 0000000000..0e78f482c5
--- /dev/null
+++ b/site/content/tutorial/12-actions/01-actions/app-a/App.svelte
@@ -0,0 +1,32 @@
+<script>
+
+	
+	let showModal = true;
+</script>
+
+<button on:click={() => (showModal = true)}>Show Modal</button>
+{#if showModal}
+	<div class="box" on:outclick={() => (showModal = false)}>
+		Click outside me!
+	</div>
+{/if}
+
+<style>
+	.box {
+		--width: 100px;
+		--height: 100px;
+		position: absolute;
+		width: var(--width);
+		height: var(--height);
+		left: calc(50% - var(--width) / 2);
+		top: calc(50% - var(--height) / 2);
+		display: flex;
+		align-items: center;
+		padding: 8px;
+		border-radius: 4px;
+		background-color: #ff3e00;
+		color: #fff;
+		text-align: center;
+		font-weight: bold;
+	}
+</style>
diff --git a/site/content/tutorial/12-actions/01-actions/app-a/click_outside.js b/site/content/tutorial/12-actions/01-actions/app-a/click_outside.js
new file mode 100644
index 0000000000..c406f6e95c
--- /dev/null
+++ b/site/content/tutorial/12-actions/01-actions/app-a/click_outside.js
@@ -0,0 +1,9 @@
+export function clickOutside(node) {
+	// setup work goes here...
+
+	return {
+		destroy() {
+			// ...cleanup goes here
+		}
+	};
+}
diff --git a/site/content/tutorial/12-actions/01-actions/app-b/App.svelte b/site/content/tutorial/12-actions/01-actions/app-b/App.svelte
new file mode 100644
index 0000000000..79214ec81f
--- /dev/null
+++ b/site/content/tutorial/12-actions/01-actions/app-b/App.svelte
@@ -0,0 +1,32 @@
+<script>
+	import { clickOutside } from "./click_outside.js";
+
+	let showModal = true;
+</script>
+
+<button on:click={() => (showModal = true)}>Show Modal</button>
+{#if showModal}
+	<div class="box" use:clickOutside on:outclick={() => (showModal = false)}>
+		Click outside me!
+	</div>
+{/if}
+
+<style>
+	.box {
+		--width: 100px;
+		--height: 100px;
+		position: absolute;
+		width: var(--width);
+		height: var(--height);
+		left: calc(50% - var(--width) / 2);
+		top: calc(50% - var(--height) / 2);
+		display: flex;
+		align-items: center;
+		padding: 8px;
+		border-radius: 4px;
+		background-color: #ff3e00;
+		color: #fff;
+		text-align: center;
+		font-weight: bold;
+	}
+</style>
diff --git a/site/content/tutorial/12-actions/01-actions/app-b/click_outside.js b/site/content/tutorial/12-actions/01-actions/app-b/click_outside.js
new file mode 100644
index 0000000000..e8983c1457
--- /dev/null
+++ b/site/content/tutorial/12-actions/01-actions/app-b/click_outside.js
@@ -0,0 +1,15 @@
+export function clickOutside(node) {
+	const handleClick = (event) => {
+		if (!node.contains(event.target)) {
+			node.dispatchEvent(new CustomEvent("outclick"));
+		}
+	};
+
+	document.addEventListener("click", handleClick, true);
+
+	return {
+		destroy() {
+			document.removeEventListener("click", handleClick, true);
+		}
+	};
+}
diff --git a/site/content/tutorial/12-actions/01-actions/text.md b/site/content/tutorial/12-actions/01-actions/text.md
new file mode 100644
index 0000000000..dfe75c192f
--- /dev/null
+++ b/site/content/tutorial/12-actions/01-actions/text.md
@@ -0,0 +1,48 @@
+---
+title: The use directive
+---
+
+Actions are essentially element-level lifecycle functions. They're useful for things like:
+
+- interfacing with third-party libraries
+- lazy-loaded images
+- tooltips
+- adding custom event handlers
+
+In this app, we want to make the orange modal close when the user clicks outside it. It has an event handler for the `outclick` event, but it isn't a native DOM event. We have to dispatch it ourselves. First, import the `clickOutside` function...
+
+```js
+import { clickOutside } from "./click_outside.js";
+```
+
+...then use it with the element:
+
+```html
+<div class="box" use:clickOutside on:outclick="{() => (showModal = false)}">
+	Click outside me!
+</div>
+```
+
+Open the `click_outside.js` file. Like transition functions, an action function receives a `node` (which is the element that the action is applied to) and some optional parameters, and returns an action object. That object can have a `destroy` function, which is called when the element is unmounted.
+
+We want to fire the `outclick` event when the user clicks outside the orange box. One possible implementation looks like this:
+
+```js
+export function clickOutside(node) {
+	const handleClick = (event) => {
+		if (!node.contains(event.target)) {
+			node.dispatchEvent(new CustomEvent("outclick"));
+		}
+	};
+
+	document.addEventListener("click", handleClick, true);
+
+	return {
+		destroy() {
+			document.removeEventListener("click", handleClick, true);
+		},
+	};
+}
+```
+
+Update the `clickOutside` function, click the button to show the modal and then click outside it to close it.
diff --git a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
new file mode 100644
index 0000000000..8ed286b574
--- /dev/null
+++ b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
@@ -0,0 +1,20 @@
+<script>
+	import { longpress } from './longpress.js';
+
+	let pressed = false;
+	let duration = 2000;
+</script>
+
+<label>
+	<input type=range bind:value={duration} max={2000} step={100}>
+	{duration}ms
+</label>
+
+<button use:longpress
+	on:longpress="{() => pressed = true}"
+	on:mouseenter="{() => pressed = false}"
+>press and hold</button>
+
+{#if pressed}
+	<p>congratulations, you pressed and held for {duration}ms</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/longpress.js b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/longpress.js
new file mode 100644
index 0000000000..00bb9d05c8
--- /dev/null
+++ b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/longpress.js
@@ -0,0 +1,25 @@
+export function longpress(node, duration) {
+	let timer;
+	
+	const handleMousedown = () => {
+		timer = setTimeout(() => {
+			node.dispatchEvent(
+				new CustomEvent('longpress')
+			);
+		}, 500);
+	};
+	
+	const handleMouseup = () => {
+		clearTimeout(timer)
+	};
+
+	node.addEventListener('mousedown', handleMousedown);
+	node.addEventListener('mouseup', handleMouseup);
+
+	return {
+		destroy() {
+			node.removeEventListener('mousedown', handleMousedown);
+			node.removeEventListener('mouseup', handleMouseup);
+		}
+	};
+}
\ No newline at end of file
diff --git a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte
new file mode 100644
index 0000000000..d6eaa0ff12
--- /dev/null
+++ b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte
@@ -0,0 +1,20 @@
+<script>
+	import { longpress } from './longpress.js';
+
+	let pressed = false;
+	let duration = 2000;
+</script>
+
+<label>
+	<input type=range bind:value={duration} max={2000} step={100}>
+	{duration}ms
+</label>
+
+<button use:longpress={duration}
+	on:longpress="{() => pressed = true}"
+	on:mouseenter="{() => pressed = false}"
+>press and hold</button>
+
+{#if pressed}
+	<p>congratulations, you pressed and held for {duration}ms</p>
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/longpress.js b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/longpress.js
new file mode 100644
index 0000000000..9d807cb13a
--- /dev/null
+++ b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/longpress.js
@@ -0,0 +1,28 @@
+export function longpress(node, duration) {
+	let timer;
+	
+	const handleMousedown = () => {
+		timer = setTimeout(() => {
+			node.dispatchEvent(
+				new CustomEvent('longpress')
+			);
+		}, duration);
+	};
+	
+	const handleMouseup = () => {
+		clearTimeout(timer)
+	};
+
+	node.addEventListener('mousedown', handleMousedown);
+	node.addEventListener('mouseup', handleMouseup);
+
+	return {
+		update(newDuration) {
+			duration = newDuration;
+		},
+		destroy() {
+			node.removeEventListener('mousedown', handleMousedown);
+			node.removeEventListener('mouseup', handleMouseup);
+		}
+	};
+}
\ No newline at end of file
diff --git a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md
new file mode 100644
index 0000000000..0cb3b7aeca
--- /dev/null
+++ b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md
@@ -0,0 +1,46 @@
+---
+title: Adding parameters
+---
+
+Like transitions and animations, an action can take an argument, which the action function will be called with alongside the element it belongs to.
+
+Here, we're using a `longpress` action that fires an event with the same name whenever the user presses and holds the button for a given duration. Right now, if you switch over to the `longpress.js` file, you'll see it's hardcoded to 500ms.
+
+We can change the action function to accept a `duration` as a second argument, and pass that `duration` to the `setTimeout` call:
+
+```js
+export function longpress(node, duration) {
+	// ...
+
+	const handleMousedown = () => {
+		timer = setTimeout(() => {
+			node.dispatchEvent(
+				new CustomEvent('longpress')
+			);
+		}, duration);
+	};
+
+	// ...
+}
+```
+
+Back in `App.svelte`, we can pass the `duration` value to the action:
+
+```html
+<button use:longpress={duration}
+```
+
+This *almost* works — the event now only fires after 2 seconds. But if you slide the duration down, it will still take two seconds.
+
+To change that, we can add an `update` method in `longpress.js`. This will be called whenever the argument changes:
+
+```js
+return {
+	update(newDuration) {
+		duration = newDuration;
+	},
+	// ...
+};
+```
+
+> If you need to pass multiple arguments to an action, combine them into a single object, as in `use:longpress={{duration, spiciness}}`
\ No newline at end of file
diff --git a/site/content/tutorial/12-actions/meta.json b/site/content/tutorial/12-actions/meta.json
new file mode 100644
index 0000000000..a154610283
--- /dev/null
+++ b/site/content/tutorial/12-actions/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Actions"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/13-advanced-styling/01-classes/app-a/App.svelte b/site/content/tutorial/13-advanced-styling/01-classes/app-a/App.svelte
new file mode 100644
index 0000000000..f0db8b3214
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/01-classes/app-a/App.svelte
@@ -0,0 +1,29 @@
+<script>
+	let current = 'foo';
+</script>
+
+<button
+	class="{current === 'foo' ? 'selected' : ''}"
+	on:click="{() => current = 'foo'}"
+>foo</button>
+
+<button
+	class="{current === 'bar' ? 'selected' : ''}"
+	on:click="{() => current = 'bar'}"
+>bar</button>
+
+<button
+	class="{current === 'baz' ? 'selected' : ''}"
+	on:click="{() => current = 'baz'}"
+>baz</button>
+
+<style>
+	button {
+		display: block;
+	}
+
+	.selected {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/13-advanced-styling/01-classes/app-b/App.svelte b/site/content/tutorial/13-advanced-styling/01-classes/app-b/App.svelte
new file mode 100644
index 0000000000..00851567ef
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/01-classes/app-b/App.svelte
@@ -0,0 +1,29 @@
+<script>
+	let current = 'foo';
+</script>
+
+<button
+	class:selected="{current === 'foo'}"
+	on:click="{() => current = 'foo'}"
+>foo</button>
+
+<button
+	class:selected="{current === 'bar'}"
+	on:click="{() => current = 'bar'}"
+>bar</button>
+
+<button
+	class:selected="{current === 'baz'}"
+	on:click="{() => current = 'baz'}"
+>baz</button>
+
+<style>
+	button {
+		display: block;
+	}
+
+	.selected {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/13-advanced-styling/01-classes/text.md b/site/content/tutorial/13-advanced-styling/01-classes/text.md
new file mode 100644
index 0000000000..6e5b3b3c0d
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/01-classes/text.md
@@ -0,0 +1,23 @@
+---
+title: The class directive
+---
+
+Like any other attribute, you can specify classes with a JavaScript attribute, seen here:
+
+```html
+<button
+	class="{current === 'foo' ? 'selected' : ''}"
+	on:click="{() => current = 'foo'}"
+>foo</button>
+```
+
+This is such a common pattern in UI development that Svelte includes a special directive to simplify it:
+
+```html
+<button
+	class:selected="{current === 'foo'}"
+	on:click="{() => current = 'foo'}"
+>foo</button>
+```
+
+The `selected` class is added to the element whenever the value of the expression is truthy, and removed when it's falsy.
diff --git a/site/content/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte b/site/content/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte
new file mode 100644
index 0000000000..d944a63313
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/02-class-shorthand/app-a/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	let big = false;
+</script>
+
+<label>
+	<input type=checkbox bind:checked={big}>
+	big
+</label>
+
+<div class:big={big}>
+	some {big ? 'big' : 'small'} text
+</div>
+
+<style>
+	.big {
+		font-size: 4em;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte b/site/content/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte
new file mode 100644
index 0000000000..c91385e4e5
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/02-class-shorthand/app-b/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	let big = false;
+</script>
+
+<label>
+	<input type=checkbox bind:checked={big}>
+	big
+</label>
+
+<div class:big>
+	some {big ? 'big' : 'small'} text
+</div>
+
+<style>
+	.big {
+		font-size: 4em;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/13-advanced-styling/02-class-shorthand/text.md b/site/content/tutorial/13-advanced-styling/02-class-shorthand/text.md
new file mode 100644
index 0000000000..e0bfd4baef
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/02-class-shorthand/text.md
@@ -0,0 +1,19 @@
+---
+title: Shorthand class directive
+---
+
+Often, the name of the class will be the same as the name of the value it depends on:
+
+```html
+<div class:big={big}>
+	<!-- ... -->
+</div>
+```
+
+In those cases we can use a shorthand form:
+
+```html
+<div class:big>
+	<!-- ... -->
+</div>
+```
\ No newline at end of file
diff --git a/site/content/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte b/site/content/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
new file mode 100644
index 0000000000..b86665ce55
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/03-inline-styles/app-a/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	let bgOpacity = 0.5;
+	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
+</script>
+
+<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
+
+<p>This is a paragraph.</p>
+
+<style>
+	p {
+		font-family: "Comic Sans MS", cursive;
+		background: rgba(255, 62, 0, var(--opacity));
+	}
+</style>
diff --git a/site/content/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte b/site/content/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
new file mode 100644
index 0000000000..58280f71ad
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/03-inline-styles/app-b/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	let bgOpacity = 0.5;
+	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
+</script>
+
+<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
+
+<p style="color: {color}; --opacity: {bgOpacity};">This is a paragraph.</p>
+
+<style>
+	p {
+		font-family: "Comic Sans MS", cursive;
+		background: rgba(255, 62, 0, var(--opacity));
+	}
+</style>
diff --git a/site/content/tutorial/13-advanced-styling/03-inline-styles/text.md b/site/content/tutorial/13-advanced-styling/03-inline-styles/text.md
new file mode 100644
index 0000000000..f558958358
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/03-inline-styles/text.md
@@ -0,0 +1,10 @@
+---
+title: Inline styles
+---
+
+Apart from adding styles inside style tags, you can also add styles to individual elements using the style attribute. Usually you will want to do styling through CSS, but this can come in handy for dynamic styles, especially when combined with CSS custom properties.
+
+Add the following style attribute to the paragraph element:
+`style="color: {color}; --opacity: {bgOpacity};"`
+
+Great, now you can style the paragraph using variables that change based on your input without having to make a class for every possible value.
diff --git a/site/content/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte b/site/content/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte
new file mode 100644
index 0000000000..58280f71ad
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/04-style-directive/app-a/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	let bgOpacity = 0.5;
+	$: color = bgOpacity < 0.6 ? '#000' : '#fff';
+</script>
+
+<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
+
+<p style="color: {color}; --opacity: {bgOpacity};">This is a paragraph.</p>
+
+<style>
+	p {
+		font-family: "Comic Sans MS", cursive;
+		background: rgba(255, 62, 0, var(--opacity));
+	}
+</style>
diff --git a/site/content/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte b/site/content/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte
new file mode 100644
index 0000000000..aade861b43
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/04-style-directive/app-b/App.svelte
@@ -0,0 +1,15 @@
+<script>
+	let bgOpacity = 0.5;
+	$: color = bgOpacity < 0.6 ? "#000" : "#fff";
+</script>
+
+<input type="range" min="0" max="1" step="0.1" bind:value={bgOpacity} />
+
+<p style:color style:--opacity={bgOpacity}>This is a paragraph.</p>
+
+<style>
+	p {
+		font-family: "Comic Sans MS", cursive;
+		background: rgba(255, 62, 0, var(--opacity));
+	}
+</style>
diff --git a/site/content/tutorial/13-advanced-styling/04-style-directive/text.md b/site/content/tutorial/13-advanced-styling/04-style-directive/text.md
new file mode 100644
index 0000000000..88b4e05885
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/04-style-directive/text.md
@@ -0,0 +1,18 @@
+---
+title: The style directive
+---
+
+Being able to set CSS properties dynamically is nice. However, this can get unwieldy if you have to write a long string. Mistakes like missing any of the semicolons could make the whole string invalid. Therefore, Svelte provides a nicer way to write inline styles with the style directive.
+
+Change the style attribute of the paragraph to the following:
+
+```html
+<p 
+	style:color 
+	style:--opacity="{bgOpacity}"
+>
+```
+
+The style directive shares a few qualities with the class directive. You can use a shorthand when the name of the property and the variable are the same. So `style:color="{color}"` can be written as just `style:color`.
+
+Similar to the class directive, the style directive will take precedence if you try to set the same property through a style attribute.
diff --git a/site/content/tutorial/13-advanced-styling/meta.json b/site/content/tutorial/13-advanced-styling/meta.json
new file mode 100644
index 0000000000..2b76d024e4
--- /dev/null
+++ b/site/content/tutorial/13-advanced-styling/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Advanced styling"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/01-slots/app-a/App.svelte b/site/content/tutorial/14-composition/01-slots/app-a/App.svelte
new file mode 100644
index 0000000000..14ce1bb677
--- /dev/null
+++ b/site/content/tutorial/14-composition/01-slots/app-a/App.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Box from './Box.svelte';
+</script>
+
+<Box>
+	<!-- put content here -->
+</Box>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/01-slots/app-a/Box.svelte b/site/content/tutorial/14-composition/01-slots/app-a/Box.svelte
new file mode 100644
index 0000000000..e199b8ce81
--- /dev/null
+++ b/site/content/tutorial/14-composition/01-slots/app-a/Box.svelte
@@ -0,0 +1,14 @@
+<div class="box">
+	<!-- content should be injected here -->
+</div>
+
+<style>
+	.box {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+		margin: 0 0 1em 0;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/01-slots/app-b/App.svelte b/site/content/tutorial/14-composition/01-slots/app-b/App.svelte
new file mode 100644
index 0000000000..cd0ebde935
--- /dev/null
+++ b/site/content/tutorial/14-composition/01-slots/app-b/App.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Box from './Box.svelte';
+</script>
+
+<Box>
+	<h2>Hello!</h2>
+	<p>This is a box. It can contain anything.</p>
+</Box>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/01-slots/app-b/Box.svelte b/site/content/tutorial/14-composition/01-slots/app-b/Box.svelte
new file mode 100644
index 0000000000..b17fdbe60d
--- /dev/null
+++ b/site/content/tutorial/14-composition/01-slots/app-b/Box.svelte
@@ -0,0 +1,14 @@
+<div class="box">
+	<slot></slot>
+</div>
+
+<style>
+	.box {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+		margin: 0 0 1em 0;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/01-slots/text.md b/site/content/tutorial/14-composition/01-slots/text.md
new file mode 100644
index 0000000000..f26859c29e
--- /dev/null
+++ b/site/content/tutorial/14-composition/01-slots/text.md
@@ -0,0 +1,28 @@
+---
+title: Slots
+---
+
+Just like elements can have children...
+
+```html
+<div>
+	<p>I'm a child of the div</p>
+</div>
+```
+
+...so can components. Before a component can accept children, though, it needs to know where to put them. We do this with the `<slot>` element. Put this inside `Box.svelte`:
+
+```html
+<div class="box">
+	<slot></slot>
+</div>
+```
+
+You can now put things in the box:
+
+```html
+<Box>
+	<h2>Hello!</h2>
+	<p>This is a box. It can contain anything.</p>
+</Box>
+```
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/02-slot-fallbacks/app-a/App.svelte b/site/content/tutorial/14-composition/02-slot-fallbacks/app-a/App.svelte
new file mode 100644
index 0000000000..cd0ebde935
--- /dev/null
+++ b/site/content/tutorial/14-composition/02-slot-fallbacks/app-a/App.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Box from './Box.svelte';
+</script>
+
+<Box>
+	<h2>Hello!</h2>
+	<p>This is a box. It can contain anything.</p>
+</Box>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte b/site/content/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte
new file mode 100644
index 0000000000..b17fdbe60d
--- /dev/null
+++ b/site/content/tutorial/14-composition/02-slot-fallbacks/app-a/Box.svelte
@@ -0,0 +1,14 @@
+<div class="box">
+	<slot></slot>
+</div>
+
+<style>
+	.box {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+		margin: 0 0 1em 0;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/02-slot-fallbacks/app-b/App.svelte b/site/content/tutorial/14-composition/02-slot-fallbacks/app-b/App.svelte
new file mode 100644
index 0000000000..e30be6d1fc
--- /dev/null
+++ b/site/content/tutorial/14-composition/02-slot-fallbacks/app-b/App.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Box from './Box.svelte';
+</script>
+
+<Box>
+	<h2>Hello!</h2>
+	<p>This is a box. It can contain anything.</p>
+</Box>
+
+<Box/>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte b/site/content/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte
new file mode 100644
index 0000000000..bdaf61b874
--- /dev/null
+++ b/site/content/tutorial/14-composition/02-slot-fallbacks/app-b/Box.svelte
@@ -0,0 +1,16 @@
+<div class="box">
+	<slot>
+		<em>no content was provided</em>
+	</slot>
+</div>
+
+<style>
+	.box {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+		margin: 0 0 1em 0;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/02-slot-fallbacks/text.md b/site/content/tutorial/14-composition/02-slot-fallbacks/text.md
new file mode 100644
index 0000000000..fd2ef28fb6
--- /dev/null
+++ b/site/content/tutorial/14-composition/02-slot-fallbacks/text.md
@@ -0,0 +1,24 @@
+---
+title: Slot fallbacks
+---
+
+A component can specify *fallbacks* for any slots that are left empty, by putting content inside the `<slot>` element:
+
+```html
+<div class="box">
+	<slot>
+		<em>no content was provided</em>
+	</slot>
+</div>
+```
+
+We can now create instances of `<Box>` without any children:
+
+```html
+<Box>
+	<h2>Hello!</h2>
+	<p>This is a box. It can contain anything.</p>
+</Box>
+
+<Box/>
+```
diff --git a/site/content/tutorial/14-composition/03-named-slots/app-a/App.svelte b/site/content/tutorial/14-composition/03-named-slots/app-a/App.svelte
new file mode 100644
index 0000000000..af4a8a6b0a
--- /dev/null
+++ b/site/content/tutorial/14-composition/03-named-slots/app-a/App.svelte
@@ -0,0 +1,7 @@
+<script>
+	import ContactCard from './ContactCard.svelte';
+</script>
+
+<ContactCard>
+	<!-- contact details go here -->
+</ContactCard>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte b/site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte
new file mode 100644
index 0000000000..af21dbf379
--- /dev/null
+++ b/site/content/tutorial/14-composition/03-named-slots/app-a/ContactCard.svelte
@@ -0,0 +1,53 @@
+<article class="contact-card">
+	<h2>
+		<slot>
+			<span class="missing">Unknown name</span>
+		</slot>
+	</h2>
+
+	<div class="address">
+		<slot>
+			<span class="missing">Unknown address</span>
+		</slot>
+	</div>
+
+	<div class="email">
+		<slot>
+			<span class="missing">Unknown email</span>
+		</slot>
+	</div>
+</article>
+
+<style>
+	.contact-card {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+	}
+
+	h2 {
+		padding: 0 0 0.2em 0;
+		margin: 0 0 1em 0;
+		border-bottom: 1px solid #ff3e00
+	}
+
+	.address, .email {
+		padding: 0 0 0 1.5em;
+		background:  0 50% no-repeat;
+		background-size: 1em 1em;
+		margin: 0 0 0.5em 0;
+		line-height: 1.2;
+	}
+
+	.address {
+		background-image: url(/tutorial/icons/map-marker.svg);
+	}
+	.email {
+		background-image: url(/tutorial/icons/email.svg);
+	}
+	.missing {
+		color: #999;
+	}
+</style>
diff --git a/site/content/tutorial/14-composition/03-named-slots/app-b/App.svelte b/site/content/tutorial/14-composition/03-named-slots/app-b/App.svelte
new file mode 100644
index 0000000000..620b602eca
--- /dev/null
+++ b/site/content/tutorial/14-composition/03-named-slots/app-b/App.svelte
@@ -0,0 +1,14 @@
+<script>
+	import ContactCard from './ContactCard.svelte';
+</script>
+
+<ContactCard>
+	<span slot="name">
+		P. Sherman
+	</span>
+
+	<span slot="address">
+		42 Wallaby Way<br>
+		Sydney
+	</span>
+</ContactCard>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte b/site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte
new file mode 100644
index 0000000000..6f07d2aecb
--- /dev/null
+++ b/site/content/tutorial/14-composition/03-named-slots/app-b/ContactCard.svelte
@@ -0,0 +1,53 @@
+<article class="contact-card">
+	<h2>
+		<slot name="name">
+			<span class="missing">Unknown name</span>
+		</slot>
+	</h2>
+
+	<div class="address">
+		<slot name="address">
+			<span class="missing">Unknown address</span>
+		</slot>
+	</div>
+
+	<div class="email">
+		<slot name="email">
+			<span class="missing">Unknown email</span>
+		</slot>
+	</div>
+</article>
+
+<style>
+	.contact-card {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
+		padding: 1em;
+	}
+
+	h2 {
+		padding: 0 0 0.2em 0;
+		margin: 0 0 1em 0;
+		border-bottom: 1px solid #ff3e00
+	}
+
+	.address, .email {
+		padding: 0 0 0 1.5em;
+		background:  0 0 no-repeat;
+		background-size: 20px 20px;
+		margin: 0 0 0.5em 0;
+		line-height: 1.2;
+	}
+
+	.address {
+		background-image: url(/tutorial/icons/map-marker.svg);
+	}
+	.email {
+		background-image: url(/tutorial/icons/email.svg);
+	}
+	.missing {
+		color: #999;
+	}
+</style>
diff --git a/site/content/tutorial/14-composition/03-named-slots/text.md b/site/content/tutorial/14-composition/03-named-slots/text.md
new file mode 100644
index 0000000000..169f028830
--- /dev/null
+++ b/site/content/tutorial/14-composition/03-named-slots/text.md
@@ -0,0 +1,44 @@
+---
+title: Named slots
+---
+
+The previous example contained a *default slot*, which renders the direct children of a component. Sometimes you will need more control over placement, such as with this `<ContactCard>`. In those cases, we can use *named slots*.
+
+In `ContactCard.svelte`, add a `name` attribute to each slot:
+
+```html
+<article class="contact-card">
+	<h2>
+		<slot name="name">
+			<span class="missing">Unknown name</span>
+		</slot>
+	</h2>
+
+	<div class="address">
+		<slot name="address">
+			<span class="missing">Unknown address</span>
+		</slot>
+	</div>
+
+	<div class="email">
+		<slot name="email">
+			<span class="missing">Unknown email</span>
+		</slot>
+	</div>
+</article>
+```
+
+Then, add elements with corresponding `slot="..."` attributes inside the `<ContactCard>` component:
+
+```html
+<ContactCard>
+	<span slot="name">
+		P. Sherman
+	</span>
+
+	<span slot="address">
+		42 Wallaby Way<br>
+		Sydney
+	</span>
+</ContactCard>
+```
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte
new file mode 100755
index 0000000000..19537cb4b3
--- /dev/null
+++ b/site/content/tutorial/14-composition/04-optional-slots/app-a/App.svelte
@@ -0,0 +1,57 @@
+<script>
+	import Project from './Project.svelte'
+	import Comment from './Comment.svelte'
+</script>
+
+<h1>
+	Projects
+</h1>
+
+<ul>
+	<li>
+		<Project
+			title="Add Typescript support"
+			tasksCompleted={25}
+			totalTasks={57}
+		>
+			<div slot="comments">
+				<Comment name="Ecma Script" postedAt={new Date('2020-08-17T14:12:23')}>
+					<p>Those interface tests are now passing.</p>
+				</Comment>
+			</div>
+		</Project>
+	</li>
+	<li>
+		<Project
+			title="Update documentation"
+			tasksCompleted={18}
+			totalTasks={21}
+		/>
+	</li>
+</ul>
+
+<style>
+	h1 {
+		font-weight: 300;
+		margin: 0 1rem;
+	}
+
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0.5rem;
+		display: flex;
+	}
+
+	@media (max-width: 600px) {
+		ul {
+			flex-direction: column;
+		}
+	}
+
+	li {
+		padding: 0.5rem;
+		flex: 1 1 50%;
+		min-width: 200px;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-a/Comment.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-a/Comment.svelte
new file mode 100755
index 0000000000..b3c10febf5
--- /dev/null
+++ b/site/content/tutorial/14-composition/04-optional-slots/app-a/Comment.svelte
@@ -0,0 +1,56 @@
+<script>
+	export let name;
+	export let postedAt;
+
+	$: avatar = `https://ui-avatars.com/api/?name=${name.replace(/ /g, '+')}&rounded=true&background=ff3e00&color=fff&bold=true`;
+</script>
+
+<article>
+	<div class="header">
+		<img src={avatar} alt="" height="32" width="32">
+		<div class="details">
+			<h4>{name}</h4>
+			<time datetime={postedAt.toISOString()}>{postedAt.toLocaleDateString()}</time>
+		</div>
+	</div>
+	<div class="body">
+		<slot></slot>
+	</div>
+</article>
+
+<style>
+	article {
+		background-color: #fff;
+		border: 1px #ccc solid;
+		border-radius: 4px;
+		padding: 1rem;
+	}
+
+	.header {
+		align-items: center;
+		display: flex;
+	}
+
+	.details {
+		flex: 1 1 auto;
+		margin-left: 0.5rem
+	}
+
+	h4 {
+		margin: 0;
+	}
+
+	time {
+		color: #777;
+		font-size: 0.75rem;
+		text-decoration: underline;
+	}
+
+	.body {
+		margin-top: 0.5rem;
+	}
+
+	.body :global(p) {
+		margin: 0;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-a/Project.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-a/Project.svelte
new file mode 100755
index 0000000000..2d98458966
--- /dev/null
+++ b/site/content/tutorial/14-composition/04-optional-slots/app-a/Project.svelte
@@ -0,0 +1,62 @@
+<script>
+	export let title;
+	export let tasksCompleted = 0;
+	export let totalTasks = 0;
+</script>
+
+<article class:has-discussion={true}>
+	<div>
+		<h2>{title}</h2>
+		<p>{tasksCompleted}/{totalTasks} tasks completed</p>
+	</div>
+	<div class="discussion">
+		<h3>Comments</h3>
+		<slot name="comments"></slot>
+	</div>
+</article>
+
+<style>
+	article {
+		border: 1px #ccc solid;
+		border-radius: 4px;
+		position: relative;
+	}
+
+	article > div {
+		padding: 1.25rem;
+	}
+
+	article.has-discussion::after {
+		content: '';
+		background-color: #ff3e00;
+		border-radius: 10px;
+		box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+		height: 20px;
+		position: absolute;
+		right: -10px;
+		top: -10px;
+		width: 20px;
+	}
+
+	h2,
+	h3 {
+		margin: 0 0 0.5rem;
+	}
+
+	h3 {
+		font-size: 0.875rem;
+		font-weight: 500;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+	}
+
+	p {
+		color: #777;
+		margin: 0;
+	}
+
+	.discussion {
+		background-color: #eee;
+		border-top: 1px #ccc solid;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte
new file mode 100755
index 0000000000..19537cb4b3
--- /dev/null
+++ b/site/content/tutorial/14-composition/04-optional-slots/app-b/App.svelte
@@ -0,0 +1,57 @@
+<script>
+	import Project from './Project.svelte'
+	import Comment from './Comment.svelte'
+</script>
+
+<h1>
+	Projects
+</h1>
+
+<ul>
+	<li>
+		<Project
+			title="Add Typescript support"
+			tasksCompleted={25}
+			totalTasks={57}
+		>
+			<div slot="comments">
+				<Comment name="Ecma Script" postedAt={new Date('2020-08-17T14:12:23')}>
+					<p>Those interface tests are now passing.</p>
+				</Comment>
+			</div>
+		</Project>
+	</li>
+	<li>
+		<Project
+			title="Update documentation"
+			tasksCompleted={18}
+			totalTasks={21}
+		/>
+	</li>
+</ul>
+
+<style>
+	h1 {
+		font-weight: 300;
+		margin: 0 1rem;
+	}
+
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0.5rem;
+		display: flex;
+	}
+
+	@media (max-width: 600px) {
+		ul {
+			flex-direction: column;
+		}
+	}
+
+	li {
+		padding: 0.5rem;
+		flex: 1 1 50%;
+		min-width: 200px;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-b/Comment.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-b/Comment.svelte
new file mode 100755
index 0000000000..b3c10febf5
--- /dev/null
+++ b/site/content/tutorial/14-composition/04-optional-slots/app-b/Comment.svelte
@@ -0,0 +1,56 @@
+<script>
+	export let name;
+	export let postedAt;
+
+	$: avatar = `https://ui-avatars.com/api/?name=${name.replace(/ /g, '+')}&rounded=true&background=ff3e00&color=fff&bold=true`;
+</script>
+
+<article>
+	<div class="header">
+		<img src={avatar} alt="" height="32" width="32">
+		<div class="details">
+			<h4>{name}</h4>
+			<time datetime={postedAt.toISOString()}>{postedAt.toLocaleDateString()}</time>
+		</div>
+	</div>
+	<div class="body">
+		<slot></slot>
+	</div>
+</article>
+
+<style>
+	article {
+		background-color: #fff;
+		border: 1px #ccc solid;
+		border-radius: 4px;
+		padding: 1rem;
+	}
+
+	.header {
+		align-items: center;
+		display: flex;
+	}
+
+	.details {
+		flex: 1 1 auto;
+		margin-left: 0.5rem
+	}
+
+	h4 {
+		margin: 0;
+	}
+
+	time {
+		color: #777;
+		font-size: 0.75rem;
+		text-decoration: underline;
+	}
+
+	.body {
+		margin-top: 0.5rem;
+	}
+
+	.body :global(p) {
+		margin: 0;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/04-optional-slots/app-b/Project.svelte b/site/content/tutorial/14-composition/04-optional-slots/app-b/Project.svelte
new file mode 100755
index 0000000000..39f55abd18
--- /dev/null
+++ b/site/content/tutorial/14-composition/04-optional-slots/app-b/Project.svelte
@@ -0,0 +1,64 @@
+<script>
+	export let title;
+	export let tasksCompleted = 0;
+	export let totalTasks = 0;
+</script>
+
+<article class:has-discussion={$$slots.comments}>
+	<div>
+		<h2>{title}</h2>
+		<p>{tasksCompleted}/{totalTasks} tasks completed</p>
+	</div>
+	{#if $$slots.comments}
+		<div class="discussion">
+			<h3>Comments</h3>
+			<slot name="comments"></slot>
+		</div>
+	{/if}
+</article>
+
+<style>
+	article {
+		border: 1px #ccc solid;
+		border-radius: 4px;
+		position: relative;
+	}
+
+	article > div {
+		padding: 1.25rem;
+	}
+
+	article.has-discussion::after {
+		content: '';
+		background-color: #ff3e00;
+		border-radius: 10px;
+		box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+		height: 20px;
+		position: absolute;
+		right: -10px;
+		top: -10px;
+		width: 20px;
+	}
+
+	h2,
+	h3 {
+		margin: 0 0 0.5rem;
+	}
+
+	h3 {
+		font-size: 0.875rem;
+		font-weight: 500;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+	}
+
+	p {
+		color: #777;
+		margin: 0;
+	}
+
+	.discussion {
+		background-color: #eee;
+		border-top: 1px #ccc solid;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/04-optional-slots/text.md b/site/content/tutorial/14-composition/04-optional-slots/text.md
new file mode 100644
index 0000000000..b875f4c87d
--- /dev/null
+++ b/site/content/tutorial/14-composition/04-optional-slots/text.md
@@ -0,0 +1,28 @@
+---
+title: Checking for slot content
+---
+
+In some cases, you may want to control parts of your component based on whether the parent passes in content for a certain slot. Perhaps you have a wrapper around that slot, and you don't want to render it if the slot is empty. Or perhaps you'd like to apply a class only if the slot is present. You can do this by checking the properties of the special `$$slots` variable.
+
+`$$slots` is an object whose keys are the names of the slots passed in by the parent component. If the parent leaves a slot empty, then `$$slots` will not have an entry for that slot.
+
+Notice that both instances of `<Project>` in this example render a container for comments and a notification dot, even though only one has comments. We want to use `$$slots` to make sure we only render these elements when the parent `<App>` passes in content for the `comments` slot.
+
+In `Project.svelte`, update the `class:has-discussion` directive on the `<article>`:
+
+```html
+<article class:has-discussion={$$slots.comments}>
+```
+
+Next, wrap the `comments` slot and its wrapping `<div>` in an `if` block that checks `$$slots`:
+
+```html
+{#if $$slots.comments}
+	<div class="discussion">
+		<h3>Comments</h3>
+		<slot name="comments"></slot>
+	</div>
+{/if}
+```
+
+Now the comments container and the notification dot won't render when `<App>` leaves the `comments` slot empty.
diff --git a/site/content/tutorial/14-composition/05-slot-props/app-a/App.svelte b/site/content/tutorial/14-composition/05-slot-props/app-a/App.svelte
new file mode 100644
index 0000000000..e95b4cbe93
--- /dev/null
+++ b/site/content/tutorial/14-composition/05-slot-props/app-a/App.svelte
@@ -0,0 +1,26 @@
+<script>
+	import Hoverable from './Hoverable.svelte';
+</script>
+
+<Hoverable>
+	<div class:active={hovering}>
+		{#if hovering}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
+
+<style>
+	div {
+		padding: 1em;
+		margin: 0 0 1em 0;
+		background-color: #eee;
+	}
+
+	.active {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/05-slot-props/app-a/Hoverable.svelte b/site/content/tutorial/14-composition/05-slot-props/app-a/Hoverable.svelte
new file mode 100644
index 0000000000..e02f788929
--- /dev/null
+++ b/site/content/tutorial/14-composition/05-slot-props/app-a/Hoverable.svelte
@@ -0,0 +1,15 @@
+<script>
+	let hovering;
+
+	function enter() {
+		hovering = true;
+	}
+
+	function leave() {
+		hovering = false;
+	}
+</script>
+
+<div on:mouseenter={enter} on:mouseleave={leave}>
+	<slot></slot>
+</div>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/05-slot-props/app-b/App.svelte b/site/content/tutorial/14-composition/05-slot-props/app-b/App.svelte
new file mode 100644
index 0000000000..299cd336a6
--- /dev/null
+++ b/site/content/tutorial/14-composition/05-slot-props/app-b/App.svelte
@@ -0,0 +1,46 @@
+<script>
+	import Hoverable from './Hoverable.svelte';
+</script>
+
+<Hoverable let:hovering={active}>
+	<div class:active>
+		{#if active}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
+
+<Hoverable let:hovering={active}>
+	<div class:active>
+		{#if active}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
+
+<Hoverable let:hovering={active}>
+	<div class:active>
+		{#if active}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
+
+<style>
+	div {
+		padding: 1em;
+		margin: 0 0 1em 0;
+		background-color: #eee;
+	}
+
+	.active {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/05-slot-props/app-b/Hoverable.svelte b/site/content/tutorial/14-composition/05-slot-props/app-b/Hoverable.svelte
new file mode 100644
index 0000000000..69f2fc8ef6
--- /dev/null
+++ b/site/content/tutorial/14-composition/05-slot-props/app-b/Hoverable.svelte
@@ -0,0 +1,15 @@
+<script>
+	let hovering;
+
+	function enter() {
+		hovering = true;
+	}
+
+	function leave() {
+		hovering = false;
+	}
+</script>
+
+<div on:mouseenter={enter} on:mouseleave={leave}>
+	<slot hovering={hovering}></slot>
+</div>
\ No newline at end of file
diff --git a/site/content/tutorial/14-composition/05-slot-props/text.md b/site/content/tutorial/14-composition/05-slot-props/text.md
new file mode 100644
index 0000000000..a4d7c4911b
--- /dev/null
+++ b/site/content/tutorial/14-composition/05-slot-props/text.md
@@ -0,0 +1,47 @@
+---
+title: Slot props
+---
+
+In this app, we have a `<Hoverable>` component that tracks whether the mouse is currently over it. It needs to pass that data *back* to the parent component, so that we can update the slotted contents.
+
+For this, we use *slot props*. In `Hoverable.svelte`, pass the `hovering` value into the slot:
+
+```html
+<div on:mouseenter={enter} on:mouseleave={leave}>
+	<slot hovering={hovering}></slot>
+</div>
+```
+
+> Remember you can also use the `{hovering}` shorthand, if you prefer.
+
+Then, to expose `hovering` to the contents of the `<Hoverable>` component, we use the `let` directive:
+
+```html
+<Hoverable let:hovering={hovering}>
+	<div class:active={hovering}>
+		{#if hovering}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
+```
+
+You can rename the variable, if you want — let's call it `active` in the parent component:
+
+```html
+<Hoverable let:hovering={active}>
+	<div class:active>
+		{#if active}
+			<p>I am being hovered upon.</p>
+		{:else}
+			<p>Hover over me!</p>
+		{/if}
+	</div>
+</Hoverable>
+```
+
+You can have as many of these components as you like, and the slotted props will remain local to the component where they're declared.
+
+> Named slots can also have props; use the `let` directive on an element with a `slot="..."` attribute, instead of on the component itself.
diff --git a/site/content/tutorial/14-composition/meta.json b/site/content/tutorial/14-composition/meta.json
new file mode 100644
index 0000000000..54cf2db82d
--- /dev/null
+++ b/site/content/tutorial/14-composition/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Component composition"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/15-context/01-context-api/app-a/App.svelte b/site/content/tutorial/15-context/01-context-api/app-a/App.svelte
new file mode 100644
index 0000000000..ea1ba4c7ae
--- /dev/null
+++ b/site/content/tutorial/15-context/01-context-api/app-a/App.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Map from './Map.svelte';
+	import MapMarker from './MapMarker.svelte';
+</script>
+
+<Map lat={35} lon={-84} zoom={3.5}>
+	<MapMarker lat={37.8225} lon={-122.0024} label="Svelte Body Shaping"/>
+	<MapMarker lat={33.8981} lon={-118.4169} label="Svelte Barbershop & Essentials"/>
+	<MapMarker lat={29.7230} lon={-95.4189} label="Svelte Waxing Studio"/>
+	<MapMarker lat={28.3378} lon={-81.3966} label="Svelte 30 Nutritional Consultants"/>
+	<MapMarker lat={40.6483} lon={-74.0237} label="Svelte Brands LLC"/>
+	<MapMarker lat={40.6986} lon={-74.4100} label="Svelte Medical Systems"/>
+</Map>
\ No newline at end of file
diff --git a/site/content/tutorial/15-context/01-context-api/app-a/Map.svelte b/site/content/tutorial/15-context/01-context-api/app-a/Map.svelte
new file mode 100644
index 0000000000..e94bd3f0cd
--- /dev/null
+++ b/site/content/tutorial/15-context/01-context-api/app-a/Map.svelte
@@ -0,0 +1,48 @@
+<script>
+	import { onDestroy } from 'svelte';
+	import { mapbox } from './mapbox.js';
+
+	// set the context here...
+
+	export let lat;
+	export let lon;
+	export let zoom;
+
+	let container;
+	let map;
+
+	function load() {
+		map = new mapbox.Map({
+			container,
+			style: 'mapbox://styles/mapbox/streets-v9',
+			center: [lon, lat],
+			zoom,
+		});
+	}
+
+	onDestroy(() => {
+		if (map) map.remove();
+	});
+</script>
+
+<!-- this special element will be explained in a later section -->
+<svelte:head>
+	<link
+		rel="stylesheet"
+		href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css"
+		on:load={load}
+	/>
+</svelte:head>
+
+<div bind:this={container}>
+	{#if map}
+		<slot />
+	{/if}
+</div>
+
+<style>
+	div {
+		width: 100%;
+		height: 100%;
+	}
+</style>
diff --git a/site/content/tutorial/15-context/01-context-api/app-a/MapMarker.svelte b/site/content/tutorial/15-context/01-context-api/app-a/MapMarker.svelte
new file mode 100644
index 0000000000..9bebce66e4
--- /dev/null
+++ b/site/content/tutorial/15-context/01-context-api/app-a/MapMarker.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { mapbox } from './mapbox.js';
+
+	// ...get the context here
+
+	export let lat;
+	export let lon;
+	export let label;
+
+	const popup = new mapbox.Popup({ offset: 25 })
+		.setText(label);
+
+	const marker = new mapbox.Marker()
+		.setLngLat([lon, lat])
+		.setPopup(popup)
+		.addTo(map);
+</script>
\ No newline at end of file
diff --git a/site/content/tutorial/15-context/01-context-api/app-a/mapbox.js b/site/content/tutorial/15-context/01-context-api/app-a/mapbox.js
new file mode 100644
index 0000000000..9c5cec430c
--- /dev/null
+++ b/site/content/tutorial/15-context/01-context-api/app-a/mapbox.js
@@ -0,0 +1,8 @@
+import mapbox from 'mapbox-gl';
+
+// https://docs.mapbox.com/help/glossary/access-token/
+mapbox.accessToken = MAPBOX_ACCESS_TOKEN;
+
+const key = Symbol();
+
+export { mapbox, key };
\ No newline at end of file
diff --git a/site/content/tutorial/15-context/01-context-api/app-b/App.svelte b/site/content/tutorial/15-context/01-context-api/app-b/App.svelte
new file mode 100644
index 0000000000..ea1ba4c7ae
--- /dev/null
+++ b/site/content/tutorial/15-context/01-context-api/app-b/App.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Map from './Map.svelte';
+	import MapMarker from './MapMarker.svelte';
+</script>
+
+<Map lat={35} lon={-84} zoom={3.5}>
+	<MapMarker lat={37.8225} lon={-122.0024} label="Svelte Body Shaping"/>
+	<MapMarker lat={33.8981} lon={-118.4169} label="Svelte Barbershop & Essentials"/>
+	<MapMarker lat={29.7230} lon={-95.4189} label="Svelte Waxing Studio"/>
+	<MapMarker lat={28.3378} lon={-81.3966} label="Svelte 30 Nutritional Consultants"/>
+	<MapMarker lat={40.6483} lon={-74.0237} label="Svelte Brands LLC"/>
+	<MapMarker lat={40.6986} lon={-74.4100} label="Svelte Medical Systems"/>
+</Map>
\ No newline at end of file
diff --git a/site/content/tutorial/15-context/01-context-api/app-b/Map.svelte b/site/content/tutorial/15-context/01-context-api/app-b/Map.svelte
new file mode 100644
index 0000000000..bd4010e765
--- /dev/null
+++ b/site/content/tutorial/15-context/01-context-api/app-b/Map.svelte
@@ -0,0 +1,50 @@
+<script>
+	import { onDestroy, setContext } from 'svelte';
+	import { mapbox, key } from './mapbox.js';
+
+	setContext(key, {
+		getMap: () => map,
+	});
+
+	export let lat;
+	export let lon;
+	export let zoom;
+
+	let container;
+	let map;
+
+	function load() {
+		map = new mapbox.Map({
+			container,
+			style: 'mapbox://styles/mapbox/streets-v9',
+			center: [lon, lat],
+			zoom,
+		});
+	}
+
+	onDestroy(() => {
+		if (map) map.remove();
+	});
+</script>
+
+<!-- this special element will be explained in a later section -->
+<svelte:head>
+	<link
+		rel="stylesheet"
+		href="https://unpkg.com/mapbox-gl/dist/mapbox-gl.css"
+		on:load={load}
+	/>
+</svelte:head>
+
+<div bind:this={container}>
+	{#if map}
+		<slot />
+	{/if}
+</div>
+
+<style>
+	div {
+		width: 100%;
+		height: 100%;
+	}
+</style>
diff --git a/site/content/tutorial/15-context/01-context-api/app-b/MapMarker.svelte b/site/content/tutorial/15-context/01-context-api/app-b/MapMarker.svelte
new file mode 100644
index 0000000000..c936652507
--- /dev/null
+++ b/site/content/tutorial/15-context/01-context-api/app-b/MapMarker.svelte
@@ -0,0 +1,19 @@
+<script>
+	import { getContext } from 'svelte';
+	import { mapbox, key } from './mapbox.js';
+
+	const { getMap } = getContext(key);
+	const map = getMap();
+
+	export let lat;
+	export let lon;
+	export let label;
+
+	const popup = new mapbox.Popup({ offset: 25 })
+		.setText(label);
+
+	const marker = new mapbox.Marker()
+		.setLngLat([lon, lat])
+		.setPopup(popup)
+		.addTo(map);
+</script>
\ No newline at end of file
diff --git a/site/content/tutorial/15-context/01-context-api/app-b/mapbox.js b/site/content/tutorial/15-context/01-context-api/app-b/mapbox.js
new file mode 100644
index 0000000000..9c5cec430c
--- /dev/null
+++ b/site/content/tutorial/15-context/01-context-api/app-b/mapbox.js
@@ -0,0 +1,8 @@
+import mapbox from 'mapbox-gl';
+
+// https://docs.mapbox.com/help/glossary/access-token/
+mapbox.accessToken = MAPBOX_ACCESS_TOKEN;
+
+const key = Symbol();
+
+export { mapbox, key };
\ No newline at end of file
diff --git a/site/content/tutorial/15-context/01-context-api/text.md b/site/content/tutorial/15-context/01-context-api/text.md
new file mode 100644
index 0000000000..e1f095c494
--- /dev/null
+++ b/site/content/tutorial/15-context/01-context-api/text.md
@@ -0,0 +1,56 @@
+---
+title: setContext and getContext
+---
+
+The context API provides a mechanism for components to 'talk' to each other without passing around data and functions as props, or dispatching lots of events. It's an advanced feature, but a useful one.
+
+Take this example app using a [Mapbox GL](https://docs.mapbox.com/mapbox-gl-js/overview/) map. We'd like to display the markers, using the `<MapMarker>` component, but we don't want to have to pass around a reference to the underlying Mapbox instance as a prop on each component.
+
+There are two halves to the context API — `setContext` and `getContext`. If a component calls `setContext(key, context)`, then any *child* component can retrieve the context with `const context = getContext(key)`.
+
+Let's set the context first. In `Map.svelte`, import `setContext` from `svelte` and `key` from `mapbox.js` and call `setContext`:
+
+```js
+import { onDestroy, setContext } from 'svelte';
+import { mapbox, key } from './mapbox.js';
+
+setContext(key, {
+	getMap: () => map
+});
+```
+
+The context object can be anything you like. Like [lifecycle functions](/tutorial/onmount), `setContext` and `getContext` must be called during component initialisation. Calling it afterwards - for example inside `onMount` - will throw an error. In this example, since `map` isn't created until the component has mounted, our context object contains a `getMap` function rather than `map` itself.
+
+On the other side of the equation, in `MapMarker.svelte`, we can now get a reference to the Mapbox instance:
+
+```js
+import { getContext } from 'svelte';
+import { mapbox, key } from './mapbox.js';
+
+const { getMap } = getContext(key);
+const map = getMap();
+```
+
+The markers can now add themselves to the map.
+
+> A more finished version of `<MapMarker>` would also handle removal and prop changes, but we're only demonstrating context here.
+
+## Context keys
+
+In `mapbox.js` you'll see this line:
+
+```js
+const key = Symbol();
+```
+
+Technically, we can use any value as a key — we could do `setContext('mapbox', ...)` for example. The downside of using a string is that different component libraries might accidentally use the same one; using [symbols](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol), on the other hand, means that the keys are guaranteed not to conflict in any circumstance, even when you have multiple different contexts operating across many component layers, since a symbol is essentially a unique identifier.
+
+## Contexts vs. stores
+
+Contexts and stores seem similar. They differ in that stores are available to *any* part of an app, while a context is only available to *a component and its descendants*. This can be helpful if you want to use several instances of a component without the state of one interfering with the state of the others.
+
+In fact, you might use the two together. Since context is not reactive, values that change over time should be represented as stores:
+
+```js
+const { these, are, stores } = getContext(...);
+```
diff --git a/site/content/tutorial/15-context/meta.json b/site/content/tutorial/15-context/meta.json
new file mode 100644
index 0000000000..d3bd862676
--- /dev/null
+++ b/site/content/tutorial/15-context/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Context API"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-a/App.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/App.svelte
new file mode 100644
index 0000000000..de0b2e0179
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/App.svelte
@@ -0,0 +1,37 @@
+<script>
+	import Folder from './Folder.svelte';
+
+	let root = [
+		{
+			name: 'Important work stuff',
+			files: [
+				{ name: 'quarterly-results.xlsx' }
+			]
+		},
+		{
+			name: 'Animal GIFs',
+			files: [
+				{
+					name: 'Dogs',
+					files: [
+						{ name: 'treadmill.gif' },
+						{ name: 'rope-jumping.gif' }
+					]
+				},
+				{
+					name: 'Goats',
+					files: [
+						{ name: 'parkour.gif' },
+						{ name: 'rampage.gif' }
+					]
+				},
+				{ name: 'cat-roomba.gif' },
+				{ name: 'duck-shuffle.gif' },
+				{ name: 'monkey-on-a-pig.gif' }
+			]
+		},
+		{ name: 'TODO.md' }
+	];
+</script>
+
+<Folder name="Home" files={root} expanded/>
diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte
new file mode 100644
index 0000000000..e769ab4841
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/File.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let name;
+	$: type = name.slice(name.lastIndexOf('.') + 1);
+</script>
+
+<span style="background-image: url(/tutorial/icons/{type}.svg)">{name}</span>
+
+<style>
+	span {
+		padding: 0 0 0 1.5em;
+		background: 0 0.1em no-repeat;
+		background-size: 1em 1em;
+	}
+</style>
diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
new file mode 100644
index 0000000000..e93ffdc548
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
@@ -0,0 +1,52 @@
+<script>
+	import File from './File.svelte';
+
+	export let expanded = false;
+	export let name;
+	export let files;
+
+	function toggle() {
+		expanded = !expanded;
+	}
+</script>
+
+<span class:expanded on:click={toggle}>{name}</span>
+
+{#if expanded}
+	<ul>
+		{#each files as file}
+			<li>
+				{#if file.files}
+					<!-- show folder -->
+				{:else}
+					<File {...file}/>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+{/if}
+
+<style>
+	span {
+		padding: 0 0 0 1.5em;
+		background: url(/tutorial/icons/folder.svg) 0 0.1em no-repeat;
+		background-size: 1em 1em;
+		font-weight: bold;
+		cursor: pointer;
+	}
+
+	.expanded {
+		background-image: url(/tutorial/icons/folder-open.svg);
+	}
+
+	ul {
+		padding: 0.2em 0 0 0.5em;
+		margin: 0 0 0 0.5em;
+		list-style: none;
+		border-left: 1px solid #eee;
+	}
+
+	li {
+		padding: 0.2em 0;
+	}
+</style>
diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-b/App.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/App.svelte
new file mode 100644
index 0000000000..de0b2e0179
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/App.svelte
@@ -0,0 +1,37 @@
+<script>
+	import Folder from './Folder.svelte';
+
+	let root = [
+		{
+			name: 'Important work stuff',
+			files: [
+				{ name: 'quarterly-results.xlsx' }
+			]
+		},
+		{
+			name: 'Animal GIFs',
+			files: [
+				{
+					name: 'Dogs',
+					files: [
+						{ name: 'treadmill.gif' },
+						{ name: 'rope-jumping.gif' }
+					]
+				},
+				{
+					name: 'Goats',
+					files: [
+						{ name: 'parkour.gif' },
+						{ name: 'rampage.gif' }
+					]
+				},
+				{ name: 'cat-roomba.gif' },
+				{ name: 'duck-shuffle.gif' },
+				{ name: 'monkey-on-a-pig.gif' }
+			]
+		},
+		{ name: 'TODO.md' }
+	];
+</script>
+
+<Folder name="Home" files={root} expanded/>
diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte
new file mode 100644
index 0000000000..e769ab4841
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/File.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let name;
+	$: type = name.slice(name.lastIndexOf('.') + 1);
+</script>
+
+<span style="background-image: url(/tutorial/icons/{type}.svg)">{name}</span>
+
+<style>
+	span {
+		padding: 0 0 0 1.5em;
+		background: 0 0.1em no-repeat;
+		background-size: 1em 1em;
+	}
+</style>
diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
new file mode 100644
index 0000000000..d3fc3a431f
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
@@ -0,0 +1,52 @@
+<script>
+	import File from './File.svelte';
+
+	export let expanded = false;
+	export let name;
+	export let files;
+
+	function toggle() {
+		expanded = !expanded;
+	}
+</script>
+
+<span class:expanded on:click={toggle}>{name}</span>
+
+{#if expanded}
+	<ul>
+		{#each files as file}
+			<li>
+				{#if file.files}
+					<svelte:self {...file}/>
+				{:else}
+					<File {...file}/>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+{/if}
+
+<style>
+	span {
+		padding: 0 0 0 1.5em;
+		background: url(/tutorial/icons/folder.svg) 0 0.1em no-repeat;
+		background-size: 1em 1em;
+		font-weight: bold;
+		cursor: pointer;
+	}
+
+	.expanded {
+		background-image: url(/tutorial/icons/folder-open.svg);
+	}
+
+	ul {
+		padding: 0.2em 0 0 0.5em;
+		margin: 0 0 0 0.5em;
+		list-style: none;
+		border-left: 1px solid #eee;
+	}
+
+	li {
+		padding: 0.2em 0;
+	}
+</style>
diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/text.md b/site/content/tutorial/16-special-elements/01-svelte-self/text.md
new file mode 100644
index 0000000000..894a8efc3d
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/01-svelte-self/text.md
@@ -0,0 +1,25 @@
+---
+title: <svelte:self>
+---
+
+Svelte provides a variety of built-in elements. The first, `<svelte:self>`, allows a component to contain itself recursively.
+
+It's useful for things like this folder tree view, where folders can contain *other* folders. In `Folder.svelte` we want to be able to do this...
+
+```html
+{#if file.files}
+	<Folder {...file}/>
+{:else}
+	<File {...file}/>
+{/if}
+```
+
+...but that's impossible, because a module can't import itself. Instead, we use `<svelte:self>`:
+
+```html
+{#if file.files}
+	<svelte:self {...file}/>
+{:else}
+	<File {...file}/>
+{/if}
+```
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte
new file mode 100644
index 0000000000..9fbec68593
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/App.svelte
@@ -0,0 +1,27 @@
+<script>
+	import RedThing from './RedThing.svelte';
+	import GreenThing from './GreenThing.svelte';
+	import BlueThing from './BlueThing.svelte';
+
+	const options = [
+		{ color: 'red',   component: RedThing   },
+		{ color: 'green', component: GreenThing },
+		{ color: 'blue',  component: BlueThing  },
+	];
+
+	let selected = options[0];
+</script>
+
+<select bind:value={selected}>
+	{#each options as option}
+		<option value={option}>{option.color}</option>
+	{/each}
+</select>
+
+{#if selected.color === 'red'}
+	<RedThing/>
+{:else if selected.color === 'green'}
+	<GreenThing/>
+{:else if selected.color === 'blue'}
+	<BlueThing/>
+{/if}
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte
new file mode 100644
index 0000000000..eb7ba64163
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte
@@ -0,0 +1,7 @@
+<strong>Blue thing</strong>
+
+<style>
+	strong {
+		color: blue;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte
new file mode 100644
index 0000000000..ed2aa49f27
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte
@@ -0,0 +1,7 @@
+<strong>Green thing</strong>
+
+<style>
+	strong {
+		color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte
new file mode 100644
index 0000000000..365f226492
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte
@@ -0,0 +1,7 @@
+<strong>Red thing</strong>
+
+<style>
+	strong {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte
new file mode 100644
index 0000000000..a510fa8ad8
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/App.svelte
@@ -0,0 +1,21 @@
+<script>
+	import RedThing from './RedThing.svelte';
+	import GreenThing from './GreenThing.svelte';
+	import BlueThing from './BlueThing.svelte';
+
+	const options = [
+		{ color: 'red',   component: RedThing   },
+		{ color: 'green', component: GreenThing },
+		{ color: 'blue',  component: BlueThing  },
+	];
+
+	let selected = options[0];
+</script>
+
+<select bind:value={selected}>
+	{#each options as option}
+		<option value={option}>{option.color}</option>
+	{/each}
+</select>
+
+<svelte:component this={selected.component}/>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte
new file mode 100644
index 0000000000..eb7ba64163
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte
@@ -0,0 +1,7 @@
+<strong>Blue thing</strong>
+
+<style>
+	strong {
+		color: blue;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte
new file mode 100644
index 0000000000..ed2aa49f27
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte
@@ -0,0 +1,7 @@
+<strong>Green thing</strong>
+
+<style>
+	strong {
+		color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte
new file mode 100644
index 0000000000..365f226492
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte
@@ -0,0 +1,7 @@
+<strong>Red thing</strong>
+
+<style>
+	strong {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/02-svelte-component/text.md b/site/content/tutorial/16-special-elements/02-svelte-component/text.md
new file mode 100644
index 0000000000..57a6a3b531
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/02-svelte-component/text.md
@@ -0,0 +1,23 @@
+---
+title: <svelte:component>
+---
+
+A component can change its category altogether with `<svelte:component>`. Instead of a sequence of `if` blocks...
+
+```html
+{#if selected.color === 'red'}
+	<RedThing/>
+{:else if selected.color === 'green'}
+	<GreenThing/>
+{:else if selected.color === 'blue'}
+	<BlueThing/>
+{/if}
+```
+
+...we can have a single dynamic component:
+
+```html
+<svelte:component this={selected.component}/>
+```
+
+The `this` value can be any component constructor, or a falsy value — if it's falsy, no component is rendered.
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte b/site/content/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte
new file mode 100644
index 0000000000..0718efd949
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/03-svelte-element/app-a/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	const options = ['h1', 'h3', 'p'];
+	let selected = options[0];
+</script>
+
+<select bind:value={selected}>
+	{#each options as option}
+		<option value={option}>{option}</option>
+	{/each}
+</select>
+
+{#if selected === 'h1'}
+	<h1>I'm a h1 tag</h1>
+{:else if selected === 'h3'}
+	<h3>I'm a h3 tag</h3>
+{:else if selected === 'p'}
+	<p>I'm a p tag</p>
+{/if}
diff --git a/site/content/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte b/site/content/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte
new file mode 100644
index 0000000000..068f7b3c4f
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/03-svelte-element/app-b/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	const options = ['h1', 'h3', 'p'];
+	let selected = options[0];
+</script>
+
+<select bind:value={selected}>
+	{#each options as option}
+		<option value={option}>{option}</option>
+	{/each}
+</select>
+
+<svelte:element this={selected}>I'm a {selected} tag</svelte:element>
diff --git a/site/content/tutorial/16-special-elements/03-svelte-element/text.md b/site/content/tutorial/16-special-elements/03-svelte-element/text.md
new file mode 100644
index 0000000000..ace344db42
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/03-svelte-element/text.md
@@ -0,0 +1,23 @@
+---
+title: <svelte:element>
+---
+
+Sometimes we don't know in advance what kind of DOM element to render. `<svelte:element>` comes in handy here. Instead of a sequence of `if` blocks...
+
+```html
+{#if selected === 'h1'}
+	<h1>I'm a h1 tag</h1>
+{:else if selected === 'h3'}
+	<h3>I'm a h3 tag</h3>
+{:else if selected === 'p'}
+	<p>I'm a p tag</p>
+{/if}
+```
+
+...we can have a single dynamic component:
+
+```html
+<svelte:element this={selected}>I'm a {selected} tag</svelte:element>
+```
+
+The `this` value can be any string, or a falsy value — if it's falsy, no element is rendered.
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte b/site/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte
new file mode 100644
index 0000000000..24c9a6368a
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/04-svelte-window/app-a/App.svelte
@@ -0,0 +1,42 @@
+<script>
+	let key;
+	let keyCode;
+
+	function handleKeydown(event) {
+		key = event.key;
+		keyCode = event.keyCode;
+	}
+</script>
+
+<svelte:window/>
+
+<div style="text-align: center">
+	{#if key}
+		<kbd>{key === ' ' ? 'Space' : key}</kbd>
+		<p>{keyCode}</p>
+	{:else}
+		<p>Focus this window and press any key</p>
+	{/if}
+</div>
+
+<style>
+	div {
+		display: flex;
+		height: 100%;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+	}
+
+	kbd {
+		background-color: #eee;
+		border-radius: 4px;
+		font-size: 6em;
+		padding: 0.2em 0.5em;
+		border-top: 5px solid rgba(255, 255, 255, 0.5);
+		border-left: 5px solid rgba(255, 255, 255, 0.5);
+		border-right: 5px solid rgba(0, 0, 0, 0.2);
+		border-bottom: 5px solid rgba(0, 0, 0, 0.2);
+		color: #555;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte b/site/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte
new file mode 100644
index 0000000000..026dfa94f7
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/04-svelte-window/app-b/App.svelte
@@ -0,0 +1,42 @@
+<script>
+	let key;
+	let keyCode;
+
+	function handleKeydown(event) {
+		key = event.key;
+		keyCode = event.keyCode;
+	}
+</script>
+
+<svelte:window on:keydown={handleKeydown}/>
+
+<div style="text-align: center">
+	{#if key}
+		<kbd>{key === ' ' ? 'Space' : key}</kbd>
+		<p>{keyCode}</p>
+	{:else}
+		<p>Focus this window and press any key</p>
+	{/if}
+</div>
+
+<style>
+	div {
+		display: flex;
+		height: 100%;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+	}
+
+	kbd {
+		background-color: #eee;
+		border-radius: 4px;
+		font-size: 6em;
+		padding: 0.2em 0.5em;
+		border-top: 5px solid rgba(255, 255, 255, 0.5);
+		border-left: 5px solid rgba(255, 255, 255, 0.5);
+		border-right: 5px solid rgba(0, 0, 0, 0.2);
+		border-bottom: 5px solid rgba(0, 0, 0, 0.2);
+		color: #555;
+	}
+</style>
diff --git a/site/content/tutorial/16-special-elements/04-svelte-window/text.md b/site/content/tutorial/16-special-elements/04-svelte-window/text.md
new file mode 100644
index 0000000000..ea01dd3bdf
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/04-svelte-window/text.md
@@ -0,0 +1,13 @@
+---
+title: <svelte:window>
+---
+
+Just as you can add event listeners to any DOM element, you can add event listeners to the `window` object with `<svelte:window>`.
+
+On line 11, add the `keydown` listener:
+
+```html
+<svelte:window on:keydown={handleKeydown}/>
+```
+
+> As with DOM elements, you can add [event modifiers](/tutorial/event-modifiers) like `preventDefault`.
diff --git a/site/content/tutorial/16-special-elements/05-svelte-window-bindings/app-a/App.svelte b/site/content/tutorial/16-special-elements/05-svelte-window-bindings/app-a/App.svelte
new file mode 100644
index 0000000000..ba51140ff4
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/05-svelte-window-bindings/app-a/App.svelte
@@ -0,0 +1,88 @@
+<script>
+	const layers = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+
+	let y;
+</script>
+
+<svelte:window/>
+
+<a class="parallax-container" href="https://www.firewatchgame.com">
+	{#each layers as layer}
+		<img
+			style="transform: translate(0,{-y * layer / (layers.length - 1)}px)"
+			src="https://www.firewatchgame.com/images/parallax/parallax{layer}.png"
+			alt="parallax layer {layer}"
+		>
+	{/each}
+</a>
+
+<div class="text">
+	<span style="opacity: {1 - Math.max(0, y / 40)}">
+		scroll down
+	</span>
+
+	<div class="foreground">
+		You have scrolled {y} pixels
+	</div>
+</div>
+
+<style>
+	.parallax-container {
+		position: fixed;
+		width: 2400px;
+		height: 712px;
+		left: 50%;
+		transform: translate(-50%,0);
+	}
+
+	.parallax-container img {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		will-change: transform;
+	}
+
+	.parallax-container img:last-child::after {
+		content: '';
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		background: rgb(45,10,13);
+	}
+
+	.text {
+		position: relative;
+		width: 100%;
+		height: 300vh;
+		color: rgb(220,113,43);
+		text-align: center;
+		padding: 4em 0.5em 0.5em 0.5em;
+		box-sizing: border-box;
+		pointer-events: none;
+	}
+
+	span {
+		display: block;
+		font-size: 1em;
+		text-transform: uppercase;
+		will-change: transform, opacity;
+	}
+
+	.foreground {
+		position: absolute;
+		top: 711px;
+		left: 0;
+		width: 100%;
+		height: calc(100% - 712px);
+		background-color: rgb(32,0,1);
+		color: white;
+		padding: 50vh 0 0 0;
+	}
+
+	:global(body) {
+		margin: 0;
+		padding: 0;
+		background-color: rgb(253, 174, 51);
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte b/site/content/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte
new file mode 100644
index 0000000000..2fc076b991
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/05-svelte-window-bindings/app-b/App.svelte
@@ -0,0 +1,88 @@
+<script>
+	const layers = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+
+	let y;
+</script>
+
+<svelte:window bind:scrollY={y}/>
+
+<a class="parallax-container" href="https://www.firewatchgame.com">
+	{#each layers as layer}
+		<img
+			style="transform: translate(0,{-y * layer / (layers.length - 1)}px)"
+			src="https://www.firewatchgame.com/images/parallax/parallax{layer}.png"
+			alt="parallax layer {layer}"
+		>
+	{/each}
+</a>
+
+<div class="text">
+	<span style="opacity: {1 - Math.max(0, y / 40)}">
+		scroll down
+	</span>
+
+	<div class="foreground">
+		You have scrolled {y} pixels
+	</div>
+</div>
+
+<style>
+	.parallax-container {
+		position: fixed;
+		width: 2400px;
+		height: 712px;
+		left: 50%;
+		transform: translate(-50%,0);
+	}
+
+	.parallax-container img {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		will-change: transform;
+	}
+
+	.parallax-container img:last-child::after {
+		content: '';
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		background: rgb(45,10,13);
+	}
+
+	.text {
+		position: relative;
+		width: 100%;
+		height: 300vh;
+		color: rgb(220,113,43);
+		text-align: center;
+		padding: 4em 0.5em 0.5em 0.5em;
+		box-sizing: border-box;
+		pointer-events: none;
+	}
+
+	span {
+		display: block;
+		font-size: 1em;
+		text-transform: uppercase;
+		will-change: transform, opacity;
+	}
+
+	.foreground {
+		position: absolute;
+		top: 711px;
+		left: 0;
+		width: 100%;
+		height: calc(100% - 712px);
+		background-color: rgb(32,0,1);
+		color: white;
+		padding: 50vh 0 0 0;
+	}
+
+	:global(body) {
+		margin: 0;
+		padding: 0;
+		background-color: rgb(253, 174, 51);
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/05-svelte-window-bindings/text.md b/site/content/tutorial/16-special-elements/05-svelte-window-bindings/text.md
new file mode 100644
index 0000000000..c4653e0948
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/05-svelte-window-bindings/text.md
@@ -0,0 +1,21 @@
+---
+title: <svelte:window> bindings
+---
+
+We can also bind to certain properties of `window`, such as `scrollY`. Update line 7:
+
+```html
+<svelte:window bind:scrollY={y}/>
+```
+
+The list of properties you can bind to is as follows:
+
+* `innerWidth`
+* `innerHeight`
+* `outerWidth`
+* `outerHeight`
+* `scrollX`
+* `scrollY`
+* `online` — an alias for `window.navigator.onLine`
+
+All except `scrollX` and `scrollY` are readonly.
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/06-svelte-body/app-a/App.svelte b/site/content/tutorial/16-special-elements/06-svelte-body/app-a/App.svelte
new file mode 100644
index 0000000000..e74bcc6a4c
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/06-svelte-body/app-a/App.svelte
@@ -0,0 +1,34 @@
+<script>
+	let hereKitty = false;
+
+	const handleMouseenter = () => hereKitty = true;
+	const handleMouseleave = () => hereKitty = false;
+</script>
+
+<svelte:body/>
+
+<!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
+<img
+	class:curious={hereKitty}
+	alt="Kitten wants to know what's going on"
+	src="/tutorial/kitten.png"
+>
+
+<style>
+	img {
+		position: absolute;
+		left: 0;
+		bottom: -60px;
+		transform: translate(-80%, 0) rotate(-30deg);
+		transform-origin: 100% 100%;
+		transition: transform 0.4s;
+	}
+
+	.curious {
+		transform: translate(-15%, 0) rotate(0deg);
+	}
+
+	:global(body) {
+		overflow: hidden;
+	}
+</style>
diff --git a/site/content/tutorial/16-special-elements/06-svelte-body/app-b/App.svelte b/site/content/tutorial/16-special-elements/06-svelte-body/app-b/App.svelte
new file mode 100644
index 0000000000..fddc8f8d0a
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/06-svelte-body/app-b/App.svelte
@@ -0,0 +1,37 @@
+<script>
+	let hereKitty = false;
+
+	const handleMouseenter = () => hereKitty = true;
+	const handleMouseleave = () => hereKitty = false;
+</script>
+
+<svelte:body
+	on:mouseenter={handleMouseenter}
+	on:mouseleave={handleMouseleave}
+/>
+
+<!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
+<img
+	class:curious={hereKitty}
+	alt="Kitten wants to know what's going on"
+	src="/tutorial/kitten.png"
+>
+
+<style>
+	img {
+		position: absolute;
+		left: 0;
+		bottom: -60px;
+		transform: translate(-80%, 0) rotate(-30deg);
+		transform-origin: 100% 100%;
+		transition: transform 0.4s;
+	}
+
+	.curious {
+		transform: translate(-15%, 0) rotate(0deg);
+	}
+
+	:global(body) {
+		overflow: hidden;
+	}
+</style>
diff --git a/site/content/tutorial/16-special-elements/06-svelte-body/text.md b/site/content/tutorial/16-special-elements/06-svelte-body/text.md
new file mode 100644
index 0000000000..95da3ce608
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/06-svelte-body/text.md
@@ -0,0 +1,14 @@
+---
+title: <svelte:body>
+---
+
+Similar to `<svelte:window>`, the `<svelte:body>` element allows you to listen for events that fire on `document.body`. This is useful with the `mouseenter` and `mouseleave` events, which don't fire on `window`.
+
+Add the `mouseenter` and `mouseleave` handlers to the `<svelte:body>` tag:
+
+```html
+<svelte:body
+	on:mouseenter={handleMouseenter}
+	on:mouseleave={handleMouseleave}
+/>
+```
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/07-svelte-head/app-a/App.svelte b/site/content/tutorial/16-special-elements/07-svelte-head/app-a/App.svelte
new file mode 100644
index 0000000000..2f5fed88cb
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/07-svelte-head/app-a/App.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+	<!-- elements go here -->
+</svelte:head>
+
+<h1>Hello world!</h1>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/07-svelte-head/app-b/App.svelte b/site/content/tutorial/16-special-elements/07-svelte-head/app-b/App.svelte
new file mode 100644
index 0000000000..8323b56ad0
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/07-svelte-head/app-b/App.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+	<link rel="stylesheet" href="/tutorial/dark-theme.css">
+</svelte:head>
+
+<h1>Hello world!</h1>
diff --git a/site/content/tutorial/16-special-elements/07-svelte-head/text.md b/site/content/tutorial/16-special-elements/07-svelte-head/text.md
new file mode 100644
index 0000000000..a7876b9cbf
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/07-svelte-head/text.md
@@ -0,0 +1,13 @@
+---
+title: <svelte:head>
+---
+
+The `<svelte:head>` element allows you to insert elements inside the `<head>` of your document:
+
+```html
+<svelte:head>
+	<link rel="stylesheet" href="/tutorial/dark-theme.css">
+</svelte:head>
+```
+
+> In server-side rendering (SSR) mode, contents of `<svelte:head>` are returned separately from the rest of your HTML.
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/08-svelte-options/app-a/App.svelte b/site/content/tutorial/16-special-elements/08-svelte-options/app-a/App.svelte
new file mode 100644
index 0000000000..298526902d
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/08-svelte-options/app-a/App.svelte
@@ -0,0 +1,30 @@
+<script>
+	import Todo from './Todo.svelte';
+
+	let todos = [
+		{ id: 1, done: true, text: 'wash the car' },
+		{ id: 2, done: false, text: 'take the dog for a walk' },
+		{ id: 3, done: false, text: 'mow the lawn' }
+	];
+
+	function toggle(toggled) {
+		todos = todos.map(todo => {
+			if (todo === toggled) {
+				// return a new object
+				return {
+					id: todo.id,
+					text: todo.text,
+					done: !todo.done
+				};
+			}
+
+			// return the same object
+			return todo;
+		});
+	}
+</script>
+
+<h2>Todos</h2>
+{#each todos as todo}
+	<Todo {todo} on:click={() => toggle(todo)}/>
+{/each}
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/08-svelte-options/app-a/Todo.svelte b/site/content/tutorial/16-special-elements/08-svelte-options/app-a/Todo.svelte
new file mode 100644
index 0000000000..57d4dcc79a
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/08-svelte-options/app-a/Todo.svelte
@@ -0,0 +1,25 @@
+<script>
+	import { afterUpdate } from 'svelte';
+	import flash from './flash.js';
+
+	export let todo;
+
+	let div;
+
+	afterUpdate(() => {
+		flash(div);
+	});
+</script>
+
+<!-- the text will flash red whenever
+     the `todo` object changes -->
+<div bind:this={div} on:click>
+	{todo.done ? '👍': ''} {todo.text}
+</div>
+
+<style>
+	div {
+		cursor: pointer;
+		line-height: 1.5;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/08-svelte-options/app-a/flash.js b/site/content/tutorial/16-special-elements/08-svelte-options/app-a/flash.js
new file mode 100644
index 0000000000..c788cc6d35
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/08-svelte-options/app-a/flash.js
@@ -0,0 +1,13 @@
+export default function flash(element) {
+	requestAnimationFrame(() => {
+		element.style.transition = 'none';
+		element.style.color = 'rgba(255,62,0,1)';
+		element.style.backgroundColor = 'rgba(255,62,0,0.2)';
+
+		setTimeout(() => {
+			element.style.transition = 'color 1s, background 1s';
+			element.style.color = '';
+			element.style.backgroundColor = '';
+		});
+	});
+}
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/08-svelte-options/app-b/App.svelte b/site/content/tutorial/16-special-elements/08-svelte-options/app-b/App.svelte
new file mode 100644
index 0000000000..298526902d
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/08-svelte-options/app-b/App.svelte
@@ -0,0 +1,30 @@
+<script>
+	import Todo from './Todo.svelte';
+
+	let todos = [
+		{ id: 1, done: true, text: 'wash the car' },
+		{ id: 2, done: false, text: 'take the dog for a walk' },
+		{ id: 3, done: false, text: 'mow the lawn' }
+	];
+
+	function toggle(toggled) {
+		todos = todos.map(todo => {
+			if (todo === toggled) {
+				// return a new object
+				return {
+					id: todo.id,
+					text: todo.text,
+					done: !todo.done
+				};
+			}
+
+			// return the same object
+			return todo;
+		});
+	}
+</script>
+
+<h2>Todos</h2>
+{#each todos as todo}
+	<Todo {todo} on:click={() => toggle(todo)}/>
+{/each}
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/08-svelte-options/app-b/Todo.svelte b/site/content/tutorial/16-special-elements/08-svelte-options/app-b/Todo.svelte
new file mode 100644
index 0000000000..fa81d35989
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/08-svelte-options/app-b/Todo.svelte
@@ -0,0 +1,27 @@
+<svelte:options immutable={true}/>
+
+<script>
+	import { afterUpdate } from 'svelte';
+	import flash from './flash.js';
+
+	export let todo;
+
+	let div;
+
+	afterUpdate(() => {
+		flash(div);
+	});
+</script>
+
+<!-- the text will flash red whenever
+     the `todo` object changes -->
+<div bind:this={div} on:click>
+	{todo.done ? '👍': ''} {todo.text}
+</div>
+
+<style>
+	div {
+		cursor: pointer;
+		line-height: 1.5;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/08-svelte-options/app-b/flash.js b/site/content/tutorial/16-special-elements/08-svelte-options/app-b/flash.js
new file mode 100644
index 0000000000..c788cc6d35
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/08-svelte-options/app-b/flash.js
@@ -0,0 +1,13 @@
+export default function flash(element) {
+	requestAnimationFrame(() => {
+		element.style.transition = 'none';
+		element.style.color = 'rgba(255,62,0,1)';
+		element.style.backgroundColor = 'rgba(255,62,0,0.2)';
+
+		setTimeout(() => {
+			element.style.transition = 'color 1s, background 1s';
+			element.style.color = '';
+			element.style.backgroundColor = '';
+		});
+	});
+}
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/08-svelte-options/text.md b/site/content/tutorial/16-special-elements/08-svelte-options/text.md
new file mode 100644
index 0000000000..1a0105a09a
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/08-svelte-options/text.md
@@ -0,0 +1,30 @@
+---
+title: <svelte:options>
+---
+
+The `<svelte:options>` element allows you to specify compiler options.
+
+We'll use the `immutable` option as an example. In this app, the `<Todo>` component flashes whenever it receives new data. Clicking on one of the items toggles its `done` state by creating an updated `todos` array. This causes the *other* `<Todo>` items to flash, even though they don't end up making any changes to the DOM.
+
+We can optimise this by telling the `<Todo>` component to expect *immutable* data. This means that we're promising never to *mutate* the `todo` prop, but will instead create new todo objects whenever things change.
+
+Add this to the top of the `Todo.svelte` file:
+
+```html
+<svelte:options immutable={true}/>
+```
+
+> You can shorten this to `<svelte:options immutable/>` if you prefer.
+
+Now, when you toggle todos by clicking on them, only the updated component flashes.
+
+The options that can be set here are:
+
+* `immutable={true}` — you never use mutable data, so the compiler can do simple referential equality checks to determine if values have changed
+* `immutable={false}` — the default. Svelte will be more conservative about whether or not mutable objects have changed
+* `accessors={true}` — adds getters and setters for the component's props
+* `accessors={false}` — the default
+* `namespace="..."` — the namespace where this component will be used, most commonly `"svg"`
+* `tag="..."` — the name to use when compiling this component as a custom element
+
+Consult the [API reference](/docs) for more information on these options.
diff --git a/site/content/tutorial/16-special-elements/09-svelte-fragment/app-a/App.svelte b/site/content/tutorial/16-special-elements/09-svelte-fragment/app-a/App.svelte
new file mode 100644
index 0000000000..442ff07d26
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/09-svelte-fragment/app-a/App.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Box from './Box.svelte'
+</script>
+
+<Box>
+	<div slot="footer">
+		<p>All rights reserved.</p>
+		<p>Copyright (c) 2019 Svelte Industries</p>
+	</div>
+</Box>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/09-svelte-fragment/app-a/Box.svelte b/site/content/tutorial/16-special-elements/09-svelte-fragment/app-a/Box.svelte
new file mode 100644
index 0000000000..ed389182a7
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/09-svelte-fragment/app-a/Box.svelte
@@ -0,0 +1,20 @@
+<div class="box">
+	<slot name="header">No header was provided</slot>
+	<p>Some content between header and footer</p>
+	<slot name="footer"></slot>
+</div>
+
+<style>
+	.box {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
+		padding: 1em;
+		margin: 0 0 1em 0;
+		
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/09-svelte-fragment/app-b/App.svelte b/site/content/tutorial/16-special-elements/09-svelte-fragment/app-b/App.svelte
new file mode 100644
index 0000000000..e66b026d90
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/09-svelte-fragment/app-b/App.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Box from './Box.svelte'
+</script>
+
+<Box>
+	<svelte:fragment slot="footer">
+		<p>All rights reserved.</p>
+		<p>Copyright (c) 2019 Svelte Industries</p>
+	</svelte:fragment>
+</Box>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/09-svelte-fragment/app-b/Box.svelte b/site/content/tutorial/16-special-elements/09-svelte-fragment/app-b/Box.svelte
new file mode 100644
index 0000000000..ed389182a7
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/09-svelte-fragment/app-b/Box.svelte
@@ -0,0 +1,20 @@
+<div class="box">
+	<slot name="header">No header was provided</slot>
+	<p>Some content between header and footer</p>
+	<slot name="footer"></slot>
+</div>
+
+<style>
+	.box {
+		width: 300px;
+		border: 1px solid #aaa;
+		border-radius: 2px;
+		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
+		padding: 1em;
+		margin: 0 0 1em 0;
+		
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/16-special-elements/09-svelte-fragment/text.md b/site/content/tutorial/16-special-elements/09-svelte-fragment/text.md
new file mode 100644
index 0000000000..2103404799
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/09-svelte-fragment/text.md
@@ -0,0 +1,35 @@
+---
+title: <svelte:fragment>
+---
+
+The `<svelte:fragment>` element allows you to place content in a named slot without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
+
+In the example notice how we applied a flex layout with a gap of `1em` to the box.
+
+```sv
+<!-- Box.svelte -->
+<div class="box">
+	<slot name="header">No header was provided</slot>
+	<p>Some content between header and footer</p>
+	<slot name="footer"></slot>
+</div>
+
+<style>
+	.box {		
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+	}
+</style>
+```
+
+However, the content in the footer is not spaced out according to this rhythm because wrapping it in a div created a new flow layout.
+
+We can solve this by changing `<div slot="footer">` in the `App` component. Replace the `<div>` with `<svelte:fragment>`:
+
+```sv
+<svelte:fragment slot="footer">
+	<p>All rights reserved.</p>
+	<p>Copyright (c) 2019 Svelte Industries</p>
+</svelte:fragment>
+```
diff --git a/site/content/tutorial/16-special-elements/meta.json b/site/content/tutorial/16-special-elements/meta.json
new file mode 100644
index 0000000000..2718c14b59
--- /dev/null
+++ b/site/content/tutorial/16-special-elements/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Special elements"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/17-module-context/01-sharing-code/app-a/App.svelte b/site/content/tutorial/17-module-context/01-sharing-code/app-a/App.svelte
new file mode 100644
index 0000000000..f031b43fd5
--- /dev/null
+++ b/site/content/tutorial/17-module-context/01-sharing-code/app-a/App.svelte
@@ -0,0 +1,43 @@
+<script>
+	import AudioPlayer from './AudioPlayer.svelte';
+</script>
+
+<!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/strauss.mp3"
+	title="The Blue Danube Waltz"
+	composer="Johann Strauss"
+	performer="European Archive"
+/>
+
+<!-- https://musopen.org/music/43775-the-planets-op-32/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/holst.mp3"
+	title="Mars, the Bringer of War"
+	composer="Gustav Holst"
+	performer="USAF Heritage of America Band"
+/>
+
+<!-- https://musopen.org/music/8010-3-gymnopedies/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/satie.mp3"
+	title="Gymnopédie no. 1"
+	composer="Erik Satie"
+	performer="Prodigal Procrastinator"
+/>
+
+<!-- https://musopen.org/music/2567-symphony-no-5-in-c-minor-op-67/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/beethoven.mp3"
+	title="Symphony no. 5 in Cm, Op. 67 - I. Allegro con brio"
+	composer="Ludwig van Beethoven"
+	performer="European Archive"
+/>
+
+<!-- https://musopen.org/music/43683-requiem-in-d-minor-k-626/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/mozart.mp3"
+	title="Requiem in D minor, K. 626 - III. Sequence - Lacrymosa"
+	composer="Wolfgang Amadeus Mozart"
+	performer="Markus Staab"
+/>
diff --git a/site/content/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte b/site/content/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte
new file mode 100644
index 0000000000..179bdacffe
--- /dev/null
+++ b/site/content/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte
@@ -0,0 +1,41 @@
+<script>
+	export let src;
+	export let title;
+	export let composer;
+	export let performer;
+
+	let audio;
+	let paused = true;
+
+	function stopOthers() {
+		// TODO: implement stopOthers
+	}
+</script>
+
+<article class:playing={!paused}>
+	<h2>{title}</h2>
+	<p><strong>{composer}</strong> / performed by {performer}</p>
+
+	<audio
+		bind:this={audio}
+		bind:paused
+		on:play={stopOthers}
+		controls
+		{src}
+	></audio>
+</article>
+
+<style>
+	article {
+		margin: 0 0 1em 0; max-width: 800px;
+	}
+	h2, p {
+		margin: 0 0 0.3em 0;
+	}
+	audio {
+		width: 100%; margin: 0.5em 0 1em 0;
+	}
+	.playing {
+		color: #ff3e00;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/17-module-context/01-sharing-code/app-b/App.svelte b/site/content/tutorial/17-module-context/01-sharing-code/app-b/App.svelte
new file mode 100644
index 0000000000..f031b43fd5
--- /dev/null
+++ b/site/content/tutorial/17-module-context/01-sharing-code/app-b/App.svelte
@@ -0,0 +1,43 @@
+<script>
+	import AudioPlayer from './AudioPlayer.svelte';
+</script>
+
+<!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/strauss.mp3"
+	title="The Blue Danube Waltz"
+	composer="Johann Strauss"
+	performer="European Archive"
+/>
+
+<!-- https://musopen.org/music/43775-the-planets-op-32/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/holst.mp3"
+	title="Mars, the Bringer of War"
+	composer="Gustav Holst"
+	performer="USAF Heritage of America Band"
+/>
+
+<!-- https://musopen.org/music/8010-3-gymnopedies/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/satie.mp3"
+	title="Gymnopédie no. 1"
+	composer="Erik Satie"
+	performer="Prodigal Procrastinator"
+/>
+
+<!-- https://musopen.org/music/2567-symphony-no-5-in-c-minor-op-67/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/beethoven.mp3"
+	title="Symphony no. 5 in Cm, Op. 67 - I. Allegro con brio"
+	composer="Ludwig van Beethoven"
+	performer="European Archive"
+/>
+
+<!-- https://musopen.org/music/43683-requiem-in-d-minor-k-626/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/mozart.mp3"
+	title="Requiem in D minor, K. 626 - III. Sequence - Lacrymosa"
+	composer="Wolfgang Amadeus Mozart"
+	performer="Markus Staab"
+/>
diff --git a/site/content/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte b/site/content/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
new file mode 100644
index 0000000000..3352074a2c
--- /dev/null
+++ b/site/content/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
@@ -0,0 +1,46 @@
+<script context="module">
+	let current;
+</script>
+
+<script>
+	export let src;
+	export let title;
+	export let composer;
+	export let performer;
+
+	let audio;
+	let paused = true;
+
+	function stopOthers() {
+		if (current && current !== audio) current.pause();
+		current = audio;
+	}
+</script>
+
+<article class:playing={!paused}>
+	<h2>{title}</h2>
+	<p><strong>{composer}</strong> / performed by {performer}</p>
+
+	<audio
+		bind:this={audio}
+		bind:paused
+		on:play={stopOthers}
+		controls
+		{src}
+	></audio>
+</article>
+
+<style>
+	article {
+		margin: 0 0 1em 0; max-width: 800px;
+	}
+	h2, p {
+		margin: 0 0 0.3em 0;
+	}
+	audio {
+		width: 100%; margin: 0.5em 0 1em 0;
+	}
+	.playing {
+		color: #ff3e00;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/17-module-context/01-sharing-code/text.md b/site/content/tutorial/17-module-context/01-sharing-code/text.md
new file mode 100644
index 0000000000..3529544fed
--- /dev/null
+++ b/site/content/tutorial/17-module-context/01-sharing-code/text.md
@@ -0,0 +1,24 @@
+---
+title: Sharing code
+---
+
+In all the examples we've seen so far, the `<script>` block contains code that runs when each component instance is initialised. For the vast majority of components, that's all you'll ever need.
+
+Very occasionally, you'll need to run some code outside of an individual component instance. For example, you can play all five of these audio players simultaneously; it would be better if playing one stopped all the others.
+
+We can do that by declaring a `<script context="module">` block. Code contained inside it will run once, when the module first evaluates, rather than when a component is instantiated. Place this at the top of `AudioPlayer.svelte`:
+
+```html
+<script context="module">
+	let current;
+</script>
+```
+
+It's now possible for the components to 'talk' to each other without any state management:
+
+```js
+function stopOthers() {
+	if (current && current !== audio) current.pause();
+	current = audio;
+}
+```
diff --git a/site/content/tutorial/17-module-context/02-module-exports/app-a/App.svelte b/site/content/tutorial/17-module-context/02-module-exports/app-a/App.svelte
new file mode 100644
index 0000000000..1550db6a09
--- /dev/null
+++ b/site/content/tutorial/17-module-context/02-module-exports/app-a/App.svelte
@@ -0,0 +1,47 @@
+<script>
+	import AudioPlayer from './AudioPlayer.svelte';
+</script>
+
+<button>
+	stop all audio
+</button>
+
+<!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/strauss.mp3"
+	title="The Blue Danube Waltz"
+	composer="Johann Strauss"
+	performer="European Archive"
+/>
+
+<!-- https://musopen.org/music/43775-the-planets-op-32/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/holst.mp3"
+	title="Mars, the Bringer of War"
+	composer="Gustav Holst"
+	performer="USAF Heritage of America Band"
+/>
+
+<!-- https://musopen.org/music/8010-3-gymnopedies/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/satie.mp3"
+	title="Gymnopédie no. 1"
+	composer="Erik Satie"
+	performer="Prodigal Procrastinator"
+/>
+
+<!-- https://musopen.org/music/2567-symphony-no-5-in-c-minor-op-67/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/beethoven.mp3"
+	title="Symphony no. 5 in Cm, Op. 67 - I. Allegro con brio"
+	composer="Ludwig van Beethoven"
+	performer="European Archive"
+/>
+
+<!-- https://musopen.org/music/43683-requiem-in-d-minor-k-626/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/mozart.mp3"
+	title="Requiem in D minor, K. 626 - III. Sequence - Lacrymosa"
+	composer="Wolfgang Amadeus Mozart"
+	performer="Markus Staab"
+/>
diff --git a/site/content/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte b/site/content/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
new file mode 100644
index 0000000000..90f3c67551
--- /dev/null
+++ b/site/content/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
@@ -0,0 +1,54 @@
+<script context="module">
+	const elements = new Set();
+</script>
+
+<script>
+	import { onMount } from 'svelte';
+
+	export let src;
+	export let title;
+	export let composer;
+	export let performer;
+
+	let audio;
+	let paused = true;
+
+	onMount(() => {
+		elements.add(audio);
+		return () => elements.delete(audio);
+	});
+
+	function stopOthers() {
+		elements.forEach(element => {
+			if (element !== audio) element.pause();
+		});
+	}
+</script>
+
+<article class:playing={!paused}>
+	<h2>{title}</h2>
+	<p><strong>{composer}</strong> / performed by {performer}</p>
+
+	<audio
+		bind:this={audio}
+		bind:paused
+		on:play={stopOthers}
+		controls
+		{src}
+	></audio>
+</article>
+
+<style>
+	article {
+		margin: 0 0 1em 0; max-width: 800px;
+	}
+	h2, p {
+		margin: 0 0 0.3em 0;
+	}
+	audio {
+		width: 100%; margin: 0.5em 0 1em 0;
+	}
+	.playing {
+		color: #ff3e00;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/17-module-context/02-module-exports/app-b/App.svelte b/site/content/tutorial/17-module-context/02-module-exports/app-b/App.svelte
new file mode 100644
index 0000000000..1d5d94b5d1
--- /dev/null
+++ b/site/content/tutorial/17-module-context/02-module-exports/app-b/App.svelte
@@ -0,0 +1,47 @@
+<script>
+	import AudioPlayer, { stopAll } from './AudioPlayer.svelte';
+</script>
+
+<button on:click={stopAll}>
+	stop all audio
+</button>
+
+<!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/strauss.mp3"
+	title="The Blue Danube Waltz"
+	composer="Johann Strauss"
+	performer="European Archive"
+/>
+
+<!-- https://musopen.org/music/43775-the-planets-op-32/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/holst.mp3"
+	title="Mars, the Bringer of War"
+	composer="Gustav Holst"
+	performer="USAF Heritage of America Band"
+/>
+
+<!-- https://musopen.org/music/8010-3-gymnopedies/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/satie.mp3"
+	title="Gymnopédie no. 1"
+	composer="Erik Satie"
+	performer="Prodigal Procrastinator"
+/>
+
+<!-- https://musopen.org/music/2567-symphony-no-5-in-c-minor-op-67/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/beethoven.mp3"
+	title="Symphony no. 5 in Cm, Op. 67 - I. Allegro con brio"
+	composer="Ludwig van Beethoven"
+	performer="European Archive"
+/>
+
+<!-- https://musopen.org/music/43683-requiem-in-d-minor-k-626/ -->
+<AudioPlayer
+	src="https://sveltejs.github.io/assets/music/mozart.mp3"
+	title="Requiem in D minor, K. 626 - III. Sequence - Lacrymosa"
+	composer="Wolfgang Amadeus Mozart"
+	performer="Markus Staab"
+/>
diff --git a/site/content/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte b/site/content/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
new file mode 100644
index 0000000000..f28e8b0c7f
--- /dev/null
+++ b/site/content/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
@@ -0,0 +1,60 @@
+<script context="module">
+	const elements = new Set();
+
+	export function stopAll() {
+		elements.forEach(element => {
+			element.pause();
+		});
+	}
+</script>
+
+<script>
+	import { onMount } from 'svelte';
+
+	export let src;
+	export let title;
+	export let composer;
+	export let performer;
+
+	let audio;
+	let paused = true;
+
+	onMount(() => {
+		elements.add(audio);
+		return () => elements.delete(audio);
+	});
+
+	function stopOthers() {
+		elements.forEach(element => {
+			if (element !== audio) element.pause();
+		});
+	}
+</script>
+
+<article class:playing={!paused}>
+	<h2>{title}</h2>
+	<p><strong>{composer}</strong> / performed by {performer}</p>
+
+	<audio
+		bind:this={audio}
+		bind:paused
+		on:play={stopOthers}
+		controls
+		{src}
+	></audio>
+</article>
+
+<style>
+	article {
+		margin: 0 0 1em 0; max-width: 800px;
+	}
+	h2, p {
+		margin: 0 0 0.3em 0;
+	}
+	audio {
+		width: 100%; margin: 0.5em 0 1em 0;
+	}
+	.playing {
+		color: #ff3e00;
+	}
+</style>
\ No newline at end of file
diff --git a/site/content/tutorial/17-module-context/02-module-exports/text.md b/site/content/tutorial/17-module-context/02-module-exports/text.md
new file mode 100644
index 0000000000..ec8364da22
--- /dev/null
+++ b/site/content/tutorial/17-module-context/02-module-exports/text.md
@@ -0,0 +1,35 @@
+---
+title: Exports
+---
+
+Anything exported from a `context="module"` script block becomes an export from the module itself. If we export a `stopAll` function from `AudioPlayer.svelte`...
+
+```html
+<script context="module">
+	const elements = new Set();
+
+	export function stopAll() {
+		elements.forEach(element => {
+			element.pause();
+		});
+	}
+</script>
+```
+
+...we can then import it in `App.svelte`...
+
+```html
+<script>
+	import AudioPlayer, { stopAll } from './AudioPlayer.svelte';
+</script>
+```
+
+...and use it in an event handler:
+
+```html
+<button on:click={stopAll}>
+	stop all audio
+</button>
+```
+
+> You can't have a default export, because the component *is* the default export.
diff --git a/site/content/tutorial/17-module-context/meta.json b/site/content/tutorial/17-module-context/meta.json
new file mode 100644
index 0000000000..1a8720e2ce
--- /dev/null
+++ b/site/content/tutorial/17-module-context/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Module context"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/18-debugging/01-debug/app-a/App.svelte b/site/content/tutorial/18-debugging/01-debug/app-a/App.svelte
new file mode 100644
index 0000000000..dd2243d7ae
--- /dev/null
+++ b/site/content/tutorial/18-debugging/01-debug/app-a/App.svelte
@@ -0,0 +1,13 @@
+<script>
+	let user = {
+		firstname: 'Ada',
+		lastname: 'Lovelace'
+	};
+</script>
+
+<input bind:value={user.firstname}>
+<input bind:value={user.lastname}>
+
+{(console.log(user), '')}
+
+<h1>Hello {user.firstname}!</h1>
\ No newline at end of file
diff --git a/site/content/tutorial/18-debugging/01-debug/app-b/App.svelte b/site/content/tutorial/18-debugging/01-debug/app-b/App.svelte
new file mode 100644
index 0000000000..1b91ac740b
--- /dev/null
+++ b/site/content/tutorial/18-debugging/01-debug/app-b/App.svelte
@@ -0,0 +1,13 @@
+<script>
+	let user = {
+		firstname: 'Ada',
+		lastname: 'Lovelace'
+	};
+</script>
+
+<input bind:value={user.firstname}>
+<input bind:value={user.lastname}>
+
+{@debug user}
+
+<h1>Hello {user.firstname}!</h1>
\ No newline at end of file
diff --git a/site/content/tutorial/18-debugging/01-debug/text.md b/site/content/tutorial/18-debugging/01-debug/text.md
new file mode 100644
index 0000000000..76fa77805e
--- /dev/null
+++ b/site/content/tutorial/18-debugging/01-debug/text.md
@@ -0,0 +1,15 @@
+---
+title: The @debug tag
+---
+
+Occasionally, it's useful to inspect a piece of data as it flows through your app.
+
+One approach is to use `console.log(...)` inside your markup. If you want to pause execution, though, you can use the `{@debug ...}` tag with a comma-separated list of values you want to inspect:
+
+```html
+{@debug user}
+
+<h1>Hello {user.firstname}!</h1>
+```
+
+If you now open your devtools and start interacting with the `<input>` elements, you'll trigger the debugger as the value of `user` changes.
diff --git a/site/content/tutorial/18-debugging/meta.json b/site/content/tutorial/18-debugging/meta.json
new file mode 100644
index 0000000000..5eeed281d3
--- /dev/null
+++ b/site/content/tutorial/18-debugging/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Debugging"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/19-next-steps/01-congratulations/app-a/App.svelte b/site/content/tutorial/19-next-steps/01-congratulations/app-a/App.svelte
new file mode 100644
index 0000000000..9ce2dd648d
--- /dev/null
+++ b/site/content/tutorial/19-next-steps/01-congratulations/app-a/App.svelte
@@ -0,0 +1,50 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let characters = ['🥳', '🎉', '✨'];
+
+	let confetti = new Array(100).fill()
+		.map((_, i) => {
+			return {
+				character: characters[i % characters.length],
+				x: Math.random() * 100,
+				y: -20 - Math.random() * 100,
+				r: 0.1 + Math.random() * 1
+			};
+		})
+		.sort((a, b) => a.r - b.r);
+
+	onMount(() => {
+		let frame;
+
+		function loop() {
+			frame = requestAnimationFrame(loop);
+
+			confetti = confetti.map(emoji => {
+				emoji.y += 0.7 * emoji.r;
+				if (emoji.y > 120) emoji.y = -20;
+				return emoji;
+			});
+		}
+
+		loop();
+
+		return () => cancelAnimationFrame(frame);
+	});
+</script>
+
+{#each confetti as c}
+	<span style="left: {c.x}%; top: {c.y}%; transform: scale({c.r})">{c.character}</span>
+{/each}
+
+<style>
+	:global(body) {
+		overflow: hidden;
+	}
+
+	span {
+		position: absolute;
+		font-size: 5vw;
+		user-select: none;
+	}
+</style>
diff --git a/site/content/tutorial/19-next-steps/01-congratulations/text.md b/site/content/tutorial/19-next-steps/01-congratulations/text.md
new file mode 100644
index 0000000000..5b8256463e
--- /dev/null
+++ b/site/content/tutorial/19-next-steps/01-congratulations/text.md
@@ -0,0 +1,11 @@
+---
+title: Congratulations!
+---
+
+You've now finished the Svelte tutorial and are ready to start building apps. You can refer back to individual chapters at any time (click the title above to reveal a dropdown) or continue your learning via the [API reference](/docs), [Examples](/examples) and [Blog](/blog). If you're a Twitter user, you can get updates via [@sveltejs](https://twitter.com/sveltejs).
+
+To get set up in your local development environment, check out [the quickstart guide](/blog/the-easiest-way-to-get-started).
+
+If you're looking for a more expansive framework that includes routing, server-side rendering and everything else, take a look at [SvelteKit](https://kit.svelte.dev).
+
+Most importantly: since you're now a member of the Svelte community, you should [join our friendly Discord chatroom](https://svelte.dev/chat). That's where you'll find fellow Svelte users, and it's where we plan the future of the framework.
diff --git a/site/content/tutorial/19-next-steps/meta.json b/site/content/tutorial/19-next-steps/meta.json
new file mode 100644
index 0000000000..efaafe4deb
--- /dev/null
+++ b/site/content/tutorial/19-next-steps/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Next steps"
+}
\ No newline at end of file
diff --git a/src/compiler/Stats.ts b/src/compiler/Stats.ts
new file mode 100644
index 0000000000..200fa448e9
--- /dev/null
+++ b/src/compiler/Stats.ts
@@ -0,0 +1,73 @@
+const now = (typeof process !== 'undefined' && process.hrtime)
+	? () => {
+		const t = process.hrtime();
+		return t[0] * 1e3 + t[1] / 1e6;
+	}
+	: () => self.performance.now();
+
+interface Timing {
+	label: string;
+	start: number;
+	end: number;
+	children: Timing[];
+}
+
+function collapse_timings(timings) {
+	const result = {};
+	timings.forEach(timing => {
+		result[timing.label] = Object.assign({
+			total: timing.end - timing.start
+		}, timing.children && collapse_timings(timing.children));
+	});
+	return result;
+}
+
+export default class Stats {
+	start_time: number;
+	current_timing: Timing;
+	current_children: Timing[];
+	timings: Timing[];
+	stack: Timing[];
+
+	constructor() {
+		this.start_time = now();
+		this.stack = [];
+		this.current_children = this.timings = [];
+	}
+
+	start(label) {
+		const timing = {
+			label,
+			start: now(),
+			end: null,
+			children: []
+		};
+
+		this.current_children.push(timing);
+		this.stack.push(timing);
+
+		this.current_timing = timing;
+		this.current_children = timing.children;
+	}
+
+	stop(label) {
+		if (label !== this.current_timing.label) {
+			throw new Error(`Mismatched timing labels (expected ${this.current_timing.label}, got ${label})`);
+		}
+
+		this.current_timing.end = now();
+		this.stack.pop();
+		this.current_timing = this.stack[this.stack.length - 1];
+		this.current_children = this.current_timing ? this.current_timing.children : this.timings;
+	}
+
+	render() {
+		const timings = Object.assign({
+			total: now() - this.start_time
+		}, collapse_timings(this.timings));
+
+		return {
+			timings
+		};
+	}
+}
diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts
new file mode 100644
index 0000000000..63c62a256a
--- /dev/null
+++ b/src/compiler/compile/Component.ts
@@ -0,0 +1,1589 @@
+import { walk } from 'estree-walker';
+import { getLocator } from 'locate-character';
+import Stats from '../Stats';
+import { globals, reserved, is_valid } from '../utils/names';
+import { namespaces, valid_namespaces } from '../utils/namespaces';
+import create_module from './create_module';
+import {
+	create_scopes,
+	extract_names,
+	Scope,
+	extract_identifiers
+} from './utils/scope';
+import Stylesheet from './css/Stylesheet';
+import { test } from '../config';
+import Fragment from './nodes/Fragment';
+import internal_exports from './internal_exports';
+import { Ast, CompileOptions, Var, Warning, CssResult } from '../interfaces';
+import error from '../utils/error';
+import get_code_frame from '../utils/get_code_frame';
+import flatten_reference from './utils/flatten_reference';
+import is_used_as_reference from './utils/is_used_as_reference';
+import is_reference, { NodeWithPropertyDefinition } from 'is-reference';
+import TemplateScope from './nodes/shared/TemplateScope';
+import fuzzymatch from '../utils/fuzzymatch';
+import get_object from './utils/get_object';
+import Slot from './nodes/Slot';
+import { Node, ImportDeclaration, ExportNamedDeclaration, Identifier, ExpressionStatement, AssignmentExpression, Literal, Property, RestElement, ExportDefaultDeclaration, ExportAllDeclaration, FunctionDeclaration, FunctionExpression } from 'estree';
+import add_to_set from './utils/add_to_set';
+import check_graph_for_cycles from './utils/check_graph_for_cycles';
+import { print, b } from 'code-red';
+import { is_reserved_keyword } from './utils/reserved_keywords';
+import { apply_preprocessor_sourcemap } from '../utils/mapped_code';
+import Element from './nodes/Element';
+import { DecodedSourceMap, RawSourceMap } from '@ampproject/remapping/dist/types/types';
+import { clone } from '../utils/clone';
+import compiler_warnings from './compiler_warnings';
+import compiler_errors from './compiler_errors';
+import { extract_ignores_above_position, extract_svelte_ignore_from_comments } from '../utils/extract_svelte_ignore';
+import check_enable_sourcemap from './utils/check_enable_sourcemap';
+
+interface ComponentOptions {
+	namespace?: string;
+	tag?: string;
+	immutable?: boolean;
+	accessors?: boolean;
+	preserveWhitespace?: boolean;
+}
+
+export default class Component {
+	stats: Stats;
+	warnings: Warning[];
+	ignores: Set<string>;
+	ignore_stack: Array<Set<string>> = [];
+
+	ast: Ast;
+	original_ast: Ast;
+	source: string;
+	name: Identifier;
+	compile_options: CompileOptions;
+	fragment: Fragment;
+	module_scope: Scope;
+	instance_scope: Scope;
+	instance_scope_map: WeakMap<Node, Scope>;
+
+	component_options: ComponentOptions;
+	namespace: string;
+	tag: string;
+	accessors: boolean;
+
+	vars: Var[] = [];
+	var_lookup: Map<string, Var> = new Map();
+
+	imports: ImportDeclaration[] = [];
+	exports_from: ExportNamedDeclaration[] = [];
+	instance_exports_from: ExportNamedDeclaration[] = [];
+
+	hoistable_nodes: Set<Node> = new Set();
+	node_for_declaration: Map<string, Node> = new Map();
+	partly_hoisted: Array<(Node | Node[])> = [];
+	fully_hoisted: Array<(Node | Node[])> = [];
+	reactive_declarations: Array<{
+		assignees: Set<string>;
+		dependencies: Set<string>;
+		node: Node;
+		declaration: Node;
+	}> = [];
+	reactive_declaration_nodes: Set<Node> = new Set();
+	has_reactive_assignments = false;
+	injected_reactive_declaration_vars: Set<string> = new Set();
+	helpers: Map<string, Identifier> = new Map();
+	globals: Map<string, Identifier> = new Map();
+
+	indirect_dependencies: Map<string, Set<string>> = new Map();
+
+	file: string;
+	locate: (c: number) => { line: number; column: number };
+
+	elements: Element[] = [];
+	stylesheet: Stylesheet;
+
+	aliases: Map<string, Identifier> = new Map();
+	used_names: Set<string> = new Set();
+	globally_used_names: Set<string> = new Set();
+
+	slots: Map<string, Slot> = new Map();
+	slot_outlets: Set<string> = new Set();
+
+	constructor(
+		ast: Ast,
+		source: string,
+		name: string,
+		compile_options: CompileOptions,
+		stats: Stats,
+		warnings: Warning[]
+	) {
+		this.name = { type: 'Identifier', name };
+
+		this.stats = stats;
+		this.warnings = warnings;
+		this.ast = ast;
+		this.source = source;
+		this.compile_options = compile_options;
+
+		// the instance JS gets mutated, so we park
+		// a copy here for later. TODO this feels gross
+		this.original_ast = clone({
+			html: ast.html,
+			css: ast.css,
+			instance: ast.instance,
+			module: ast.module
+		});
+
+		this.file =
+			compile_options.filename &&
+			(typeof process !== 'undefined'
+				? compile_options.filename
+					.replace(process.cwd(), '')
+					.replace(/^[/\\]/, '')
+				: compile_options.filename);
+		this.locate = getLocator(this.source, { offsetLine: 1 });
+
+		// styles
+		this.stylesheet = new Stylesheet({
+			source,
+			ast,
+			filename: compile_options.filename,
+			component_name: name,
+			dev: compile_options.dev,
+			get_css_hash: compile_options.cssHash
+		});
+		this.stylesheet.validate(this);
+
+		this.component_options = process_component_options(
+			this,
+			this.ast.html.children
+		);
+		this.namespace =
+			namespaces[this.component_options.namespace] ||
+			this.component_options.namespace;
+
+		if (compile_options.customElement) {
+			if (
+				this.component_options.tag === undefined &&
+				compile_options.tag === undefined
+			) {
+				const svelteOptions = ast.html.children.find(
+					child => child.name === 'svelte:options'
+				) || { start: 0, end: 0 };
+				this.warn(svelteOptions, compiler_warnings.custom_element_no_tag);
+			}
+			this.tag = this.component_options.tag || compile_options.tag;
+		} else {
+			this.tag = this.name.name;
+		}
+
+		this.walk_module_js();
+
+		this.push_ignores(this.ast.instance ? extract_ignores_above_position(this.ast.instance.start, this.ast.html.children) : []);
+		this.walk_instance_js_pre_template();
+		this.pop_ignores();
+
+		this.fragment = new Fragment(this, ast.html);
+		this.name = this.get_unique_name(name);
+
+		this.push_ignores(this.ast.instance ? extract_ignores_above_position(this.ast.instance.start, this.ast.html.children) : []);
+		this.walk_instance_js_post_template();
+		this.pop_ignores();
+
+		this.elements.forEach(element => this.stylesheet.apply(element));
+		if (!compile_options.customElement) this.stylesheet.reify();
+		this.stylesheet.warn_on_unused_selectors(this);
+	}
+
+	add_var(node: Node, variable: Var, add_to_lookup = true) {
+		this.vars.push(variable);
+
+		if (add_to_lookup) {
+			if (this.var_lookup.has(variable.name)) {
+				const exists_var = this.var_lookup.get(variable.name);
+				if (exists_var.module && exists_var.imported) {
+					this.error(node as any, compiler_errors.illegal_variable_declaration);
+				}
+			}
+			this.var_lookup.set(variable.name, variable);
+		}
+	}
+
+	add_reference(node: Node, name: string) {
+		const variable = this.var_lookup.get(name);
+
+		if (variable) {
+			variable.referenced = true;
+		} else if (is_reserved_keyword(name)) {
+			this.add_var(node, {
+				name,
+				injected: true,
+				referenced: true
+			});
+		} else if (name[0] === '$') {
+			this.add_var(node, {
+				name,
+				injected: true,
+				referenced: true,
+				mutated: true,
+				writable: true
+			});
+
+			const subscribable_name = name.slice(1);
+
+			const variable = this.var_lookup.get(subscribable_name);
+			if (variable) {
+				variable.referenced = true;
+				variable.subscribable = true;
+			}
+		} else {
+			if (this.compile_options.varsReport === 'full') {
+				this.add_var(node, { name, referenced: true }, false);
+			}
+
+			this.used_names.add(name);
+		}
+	}
+
+	alias(name: string) {
+		if (!this.aliases.has(name)) {
+			this.aliases.set(name, this.get_unique_name(name));
+		}
+
+		return this.aliases.get(name);
+	}
+
+	apply_stylesheet(element: Element) {
+		this.elements.push(element);
+	}
+
+	global(name: string) {
+		const alias = this.alias(name);
+		this.globals.set(name, alias);
+		return alias;
+	}
+
+	generate(result?: { js: Node[]; css: CssResult }) {
+		let js = null;
+		let css = null;
+
+		if (result) {
+			const { compile_options, name } = this;
+			const { format = 'esm' } = compile_options;
+
+			const banner = `${this.file ? `${this.file} ` : ''}generated by Svelte v${'__VERSION__'}`;
+
+			const program: any = { type: 'Program', body: result.js };
+
+			walk(program, {
+				enter: (node: Node, parent: Node, key) => {
+					if (node.type === 'Identifier') {
+						if (node.name[0] === '@') {
+							if (node.name[1] === '_') {
+								const alias = this.global(node.name.slice(2));
+								node.name = alias.name;
+							} else {
+								let name = node.name.slice(1);
+
+								if (compile_options.hydratable) {
+									if (internal_exports.has(`${name}_hydration`)) {
+										name += '_hydration';
+									} else if (internal_exports.has(`${name}Hydration`)) {
+										name += 'Hydration';
+									}
+								}
+
+								if (compile_options.dev) {
+									if (internal_exports.has(`${name}_dev`)) {
+										name += '_dev';
+									} else if (internal_exports.has(`${name}Dev`)) {
+										name += 'Dev';
+									}
+								}
+
+								const alias = this.alias(name);
+								this.helpers.set(name, alias);
+								node.name = alias.name;
+							}
+						} else if (node.name[0] !== '#' && !is_valid(node.name)) {
+							// this hack allows x`foo.${bar}` where bar could be invalid
+							const literal: Literal = { type: 'Literal', value: node.name };
+
+							if (parent.type === 'Property' && key === 'key') {
+								parent.key = literal;
+							} else if (parent.type === 'MemberExpression' && key === 'property') {
+								parent.property = literal;
+								parent.computed = true;
+							}
+						}
+					}
+				}
+			});
+
+			const referenced_globals = Array.from(
+				this.globals,
+				([name, alias]) => name !== alias.name && { name, alias }
+			).filter(Boolean);
+			if (referenced_globals.length) {
+				this.helpers.set('globals', this.alias('globals'));
+			}
+			const imported_helpers = Array.from(this.helpers, ([name, alias]) => ({
+				name,
+				alias
+			}));
+
+			create_module(
+				program,
+				format,
+				name,
+				banner,
+				compile_options.sveltePath,
+				imported_helpers,
+				referenced_globals,
+				this.imports,
+				this.vars
+					.filter(variable => variable.module && variable.export_name)
+					.map(variable => ({
+						name: variable.name,
+						as: variable.export_name
+					})),
+				this.exports_from
+			);
+
+			css = compile_options.customElement
+				? { code: null, map: null }
+				: result.css;
+
+			const js_sourcemap_enabled = check_enable_sourcemap(compile_options.enableSourcemap, 'js');
+
+			if (!js_sourcemap_enabled) {
+				js = print(program);
+				js.map = null;
+			} else {
+				const sourcemap_source_filename = get_sourcemap_source_filename(compile_options);
+
+				js = print(program, {
+					sourceMapSource: sourcemap_source_filename
+				});
+
+				js.map.sources = [
+					sourcemap_source_filename
+				];
+
+				js.map.sourcesContent = [
+					this.source
+				];
+
+				js.map = apply_preprocessor_sourcemap(sourcemap_source_filename, js.map, compile_options.sourcemap as (string | RawSourceMap | DecodedSourceMap));
+			}
+		}
+
+		return {
+			js,
+			css,
+			ast: this.original_ast,
+			warnings: this.warnings,
+			vars: this.get_vars_report(),
+			stats: this.stats.render()
+		};
+	}
+
+	get_unique_name(name: string, scope?: Scope): Identifier {
+		if (test) name = `${name}$`;
+		let alias = name;
+		for (
+			let i = 1;
+			reserved.has(alias) ||
+			this.var_lookup.has(alias) ||
+			this.used_names.has(alias) ||
+			this.globally_used_names.has(alias) ||
+			(scope && scope.has(alias));
+			alias = `${name}_${i++}`
+		);
+		this.used_names.add(alias);
+		return { type: 'Identifier', name: alias };
+	}
+
+	get_unique_name_maker() {
+		const local_used_names = new Set();
+
+		function add(name: string) {
+			local_used_names.add(name);
+		}
+
+		reserved.forEach(add);
+		internal_exports.forEach(add);
+		this.var_lookup.forEach((_value, key) => add(key));
+
+		return (name: string): Identifier => {
+			if (test) name = `${name}$`;
+			let alias = name;
+			for (
+				let i = 1;
+				this.used_names.has(alias) || local_used_names.has(alias);
+				alias = `${name}_${i++}`
+			);
+			local_used_names.add(alias);
+			this.globally_used_names.add(alias);
+
+			return {
+				type: 'Identifier',
+				name: alias
+			};
+		};
+	}
+
+	get_vars_report(): Var[] {
+		const { compile_options, vars } = this;
+
+		const vars_report = compile_options.varsReport === false
+			? []
+			: compile_options.varsReport === 'full'
+				? vars
+				: vars.filter(v => !v.global && !v.internal);
+
+		return vars_report.map(v => ({
+			name: v.name,
+			export_name: v.export_name || null,
+			injected: v.injected || false,
+			module: v.module || false,
+			mutated: v.mutated || false,
+			reassigned: v.reassigned || false,
+			referenced: v.referenced || false,
+			writable: v.writable || false,
+			referenced_from_script: v.referenced_from_script || false
+		}));
+	}
+
+	error(
+		pos: {
+			start: number;
+			end: number;
+		},
+		e: {
+			code: string;
+			message: string;
+		}
+	) {
+		if (this.compile_options.errorMode === 'warn') {
+			this.warn(pos, e);
+		} else {
+			error(e.message, {
+				name: 'ValidationError',
+				code: e.code,
+				source: this.source,
+				start: pos.start,
+				end: pos.end,
+				filename: this.compile_options.filename
+			});
+		}
+	}
+
+	warn(
+		pos: {
+			start: number;
+			end: number;
+		},
+		warning: {
+			code: string;
+			message: string;
+		}
+	) {
+		if (this.ignores && this.ignores.has(warning.code)) {
+			return;
+		}
+
+		const start = this.locate(pos.start);
+		const end = this.locate(pos.end);
+
+		const frame = get_code_frame(this.source, start.line - 1, start.column);
+
+		this.warnings.push({
+			code: warning.code,
+			message: warning.message,
+			frame,
+			start,
+			end,
+			pos: pos.start,
+			filename: this.compile_options.filename,
+			toString: () =>
+				`${warning.message} (${start.line}:${start.column})\n${frame}`
+		});
+	}
+
+	extract_imports(node) {
+		this.imports.push(node);
+	}
+
+	extract_exports(node, module_script = false) {
+		const ignores = extract_svelte_ignore_from_comments(node);
+		if (ignores.length) this.push_ignores(ignores);
+		const result = this._extract_exports(node, module_script);
+		if (ignores.length) this.pop_ignores();
+		return result;
+	}
+
+	private _extract_exports(node: ExportDefaultDeclaration | ExportNamedDeclaration | ExportAllDeclaration, module_script: boolean) {
+		if (node.type === 'ExportDefaultDeclaration') {
+			return this.error(node as any, compiler_errors.default_export);
+		}
+
+		if (node.type === 'ExportNamedDeclaration') {
+			if (node.source) {
+				if (module_script) {
+					this.exports_from.push(node);
+				} else {
+					this.instance_exports_from.push(node);
+				}
+				return null;
+			}
+			if (node.declaration) {
+				if (node.declaration.type === 'VariableDeclaration') {
+					node.declaration.declarations.forEach(declarator => {
+						extract_names(declarator.id).forEach(name => {
+							const variable = this.var_lookup.get(name);
+							variable.export_name = name;
+							if (!module_script && variable.writable && !(variable.referenced || variable.referenced_from_script || variable.subscribable)) {
+								this.warn(declarator as any, compiler_warnings.unused_export_let(this.name.name, name));
+							}
+						});
+					});
+				} else {
+					const { name } = node.declaration.id;
+
+					const variable = this.var_lookup.get(name);
+					variable.export_name = name;
+				}
+
+				return node.declaration;
+			} else {
+				node.specifiers.forEach(specifier => {
+					const variable = this.var_lookup.get(specifier.local.name);
+
+					if (variable) {
+						variable.export_name = specifier.exported.name;
+
+						if (!module_script && variable.writable && !(variable.referenced || variable.referenced_from_script || variable.subscribable)) {
+							this.warn(specifier as any, compiler_warnings.unused_export_let(this.name.name, specifier.exported.name));
+						}
+					}
+				});
+
+				return null;
+			}
+		}
+	}
+
+	extract_javascript(script) {
+		if (!script) return null;
+
+		return script.content.body.filter(node => {
+			if (!node) return false;
+			if (this.hoistable_nodes.has(node)) return false;
+			if (this.reactive_declaration_nodes.has(node)) return false;
+			if (node.type === 'ImportDeclaration') return false;
+			if (node.type === 'ExportDeclaration' && node.specifiers.length > 0) return false;
+			return true;
+		});
+	}
+
+	walk_module_js() {
+		const component = this;
+		const script = this.ast.module;
+		if (!script) return;
+
+		walk(script.content, {
+			enter(node: Node) {
+				if (node.type === 'LabeledStatement' && node.label.name === '$') {
+					component.warn(node as any, compiler_warnings.module_script_reactive_declaration);
+				}
+			}
+		});
+
+		const { scope, globals } = create_scopes(script.content);
+		this.module_scope = scope;
+
+		scope.declarations.forEach((node, name) => {
+			if (name[0] === '$') {
+				return this.error(node as any, compiler_errors.illegal_declaration);
+			}
+
+			const writable = node.type === 'VariableDeclaration' && (node.kind === 'var' || node.kind === 'let');
+			const imported = node.type.startsWith('Import');
+
+			this.add_var(node, {
+				name,
+				module: true,
+				hoistable: true,
+				writable,
+				imported
+			});
+		});
+
+		globals.forEach((node, name) => {
+			if (name[0] === '$') {
+				return this.error(node as any, compiler_errors.illegal_subscription);
+			} else {
+				this.add_var(node, {
+					name,
+					global: true,
+					hoistable: true
+				});
+			}
+		});
+
+		const { body } = script.content;
+		let i = body.length;
+		while (--i >= 0) {
+			const node = body[i];
+			if (node.type === 'ImportDeclaration') {
+				this.extract_imports(node);
+				body.splice(i, 1);
+			}
+
+			if (/^Export/.test(node.type)) {
+				const replacement = this.extract_exports(node, true);
+				if (replacement) {
+					body[i] = replacement;
+				} else {
+					body.splice(i, 1);
+				}
+			}
+		}
+	}
+
+	walk_instance_js_pre_template() {
+		const script = this.ast.instance;
+		if (!script) return;
+
+		// inject vars for reactive declarations
+		script.content.body.forEach(node => {
+			if (node.type !== 'LabeledStatement') return;
+			if (node.body.type !== 'ExpressionStatement') return;
+
+			const { expression } = node.body;
+			if (expression.type !== 'AssignmentExpression') return;
+			if (expression.left.type === 'MemberExpression') return;
+
+			extract_names(expression.left).forEach(name => {
+				if (!this.var_lookup.has(name) && name[0] !== '$') {
+					this.injected_reactive_declaration_vars.add(name);
+				}
+			});
+		});
+
+		const { scope: instance_scope, map, globals } = create_scopes(
+			script.content
+		);
+		this.instance_scope = instance_scope;
+		this.instance_scope_map = map;
+
+		instance_scope.declarations.forEach((node, name) => {
+			if (name[0] === '$') {
+				return this.error(node as any, compiler_errors.illegal_declaration);
+			}
+
+			const writable = node.type === 'VariableDeclaration' && (node.kind === 'var' || node.kind === 'let');
+			const imported = node.type.startsWith('Import');
+
+			this.add_var(node, {
+				name,
+				initialised: instance_scope.initialised_declarations.has(name),
+				writable,
+				imported
+			});
+
+			this.node_for_declaration.set(name, node);
+		});
+
+		// NOTE: add store variable first, then only $store value
+		// as `$store` will mark `store` variable as referenced and subscribable
+		const global_keys = Array.from(globals.keys());
+		const sorted_globals = [
+			...global_keys.filter(key => key[0] !== '$'),
+			...global_keys.filter(key => key[0] === '$')
+		];
+
+		sorted_globals.forEach(name => {
+			if (this.var_lookup.has(name)) return;
+			const node = globals.get(name);
+
+			if (this.injected_reactive_declaration_vars.has(name)) {
+				this.add_var(node, {
+					name,
+					injected: true,
+					writable: true,
+					reassigned: true,
+					initialised: true
+				});
+			} else if (is_reserved_keyword(name)) {
+				this.add_var(node, {
+					name,
+					injected: true
+				});
+			} else if (name[0] === '$') {
+				if (name === '$' || name[1] === '$') {
+					return this.error(node as any, compiler_errors.illegal_global(name));
+				}
+
+				this.add_var(node, {
+					name,
+					injected: true,
+					mutated: true,
+					writable: true
+				});
+
+				this.add_reference(node, name.slice(1));
+
+				const variable = this.var_lookup.get(name.slice(1));
+				if (variable) {
+					variable.subscribable = true;
+					variable.referenced_from_script = true;
+				}
+			} else {
+				this.add_var(node, {
+					name,
+					global: true,
+					hoistable: true
+				});
+			}
+		});
+
+		this.track_references_and_mutations();
+	}
+
+	walk_instance_js_post_template() {
+		const script = this.ast.instance;
+		if (!script) return;
+
+		this.post_template_walk();
+
+		this.hoist_instance_declarations();
+		this.extract_reactive_declarations();
+	}
+
+	post_template_walk() {
+		const script = this.ast.instance;
+		if (!script) return;
+
+		const component = this;
+		const { content } = script;
+		const { instance_scope, instance_scope_map: map } = this;
+
+		let scope = instance_scope;
+
+		const to_remove = [];
+		const remove = (parent, prop, index) => {
+			to_remove.unshift([parent, prop, index]);
+		};
+		let scope_updated = false;
+
+		const current_function_stack = [];
+		let current_function: FunctionDeclaration | FunctionExpression = null;
+
+		walk(content, {
+			enter(node: Node, parent: Node, prop, index) {
+				if ((node.type === 'FunctionDeclaration' || node.type === 'FunctionExpression')) {
+					current_function_stack.push(current_function = node);
+				}
+
+				if (map.has(node)) {
+					scope = map.get(node);
+				}
+
+				if (node.type === 'ImportDeclaration') {
+					component.extract_imports(node);
+					// TODO: to use actual remove
+					remove(parent, prop, index);
+					return this.skip();
+				}
+
+				if (/^Export/.test(node.type)) {
+					const replacement = component.extract_exports(node);
+					if (replacement) {
+						this.replace(replacement);
+					} else {
+						// TODO: to use actual remove
+						remove(parent, prop, index);
+					}
+					return this.skip();
+				}
+
+				component.warn_on_undefined_store_value_references(node, parent, prop, scope);
+			},
+
+			leave(node: Node) {
+				if ((node.type === 'FunctionDeclaration' || node.type === 'FunctionExpression')) {
+					current_function_stack.pop();
+					current_function = current_function_stack[current_function_stack.length - 1];
+				}
+
+				// do it on leave, to prevent infinite loop
+				if (component.compile_options.dev && component.compile_options.loopGuardTimeout > 0 && (!current_function || (!current_function.generator && !current_function.async))) {
+					const to_replace_for_loop_protect = component.loop_protect(node, scope, component.compile_options.loopGuardTimeout);
+					if (to_replace_for_loop_protect) {
+						this.replace(to_replace_for_loop_protect);
+						scope_updated = true;
+					}
+				}
+
+				if (map.has(node)) {
+					scope = scope.parent;
+				}
+			}
+		});
+
+		for (const [parent, prop, index] of to_remove) {
+			if (parent) {
+				if (index !== null) {
+					parent[prop].splice(index, 1);
+				} else {
+					delete parent[prop];
+				}
+			}
+		}
+
+		if (scope_updated) {
+			const { scope, map } = create_scopes(script.content);
+			this.instance_scope = scope;
+			this.instance_scope_map = map;
+		}
+	}
+
+	track_references_and_mutations() {
+		const script = this.ast.instance;
+		if (!script) return;
+
+		const component = this;
+		const { content } = script;
+		const { instance_scope, module_scope, instance_scope_map: map } = this;
+
+		let scope = instance_scope;
+
+		walk(content, {
+			enter(node: Node, parent: Node) {
+				if (map.has(node)) {
+					scope = map.get(node);
+				}
+
+				if (node.type === 'AssignmentExpression' || node.type === 'UpdateExpression') {
+					const assignee = node.type === 'AssignmentExpression' ? node.left : node.argument;
+					const names = extract_names(assignee as Node);
+
+					const deep = assignee.type === 'MemberExpression';
+
+					names.forEach(name => {
+						const scope_owner = scope.find_owner(name);
+						if (
+							scope_owner !== null
+								? scope_owner === instance_scope
+								: module_scope && module_scope.has(name)
+						) {
+							const variable = component.var_lookup.get(name);
+							variable[deep ? 'mutated' : 'reassigned'] = true;
+						}
+					});
+				}
+
+				if (is_used_as_reference(node, parent)) {
+					const object = get_object(node);
+					if (scope.find_owner(object.name) === instance_scope) {
+						const variable = component.var_lookup.get(object.name);
+						variable.referenced_from_script = true;
+					}
+				}
+			},
+
+			leave(node: Node) {
+				if (map.has(node)) {
+					scope = scope.parent;
+				}
+			}
+		});
+	}
+
+	warn_on_undefined_store_value_references(node: Node, parent: Node, prop: string, scope: Scope) {
+		if (
+			node.type === 'LabeledStatement' &&
+			node.label.name === '$' &&
+			parent.type !== 'Program'
+		) {
+			this.warn(node as any, compiler_warnings.non_top_level_reactive_declaration);
+		}
+
+		if (is_reference(node as NodeWithPropertyDefinition, parent as NodeWithPropertyDefinition)) {
+			const object = get_object(node);
+			const { name } = object;
+
+			if (name[0] === '$') {
+				if (!scope.has(name)) {
+					this.warn_if_undefined(name, object, null);
+				}
+
+				if (name[1] !== '$' && scope.has(name.slice(1)) && scope.find_owner(name.slice(1)) !== this.instance_scope) {
+					if (!((/Function/.test(parent.type) && prop === 'params') || (parent.type === 'VariableDeclarator' && prop === 'id'))) {
+						return this.error(node as any, compiler_errors.contextual_store);
+					}
+				}
+			}
+		}
+	}
+
+	loop_protect(node, scope: Scope, timeout: number): Node | null {
+		if (node.type === 'WhileStatement' ||
+			node.type === 'ForStatement' ||
+			node.type === 'DoWhileStatement') {
+			const guard = this.get_unique_name('guard', scope);
+			this.used_names.add(guard.name);
+
+			const before = b`const ${guard} = @loop_guard(${timeout})`;
+			const inside = b`${guard}();`;
+
+			// wrap expression statement with BlockStatement
+			if (node.body.type !== 'BlockStatement') {
+				node.body = {
+					type: 'BlockStatement',
+					body: [node.body]
+				};
+			}
+			node.body.body.push(inside[0]);
+
+			return {
+				type: 'BlockStatement',
+				body: [
+					before[0],
+					node
+				]
+			};
+		}
+		return null;
+	}
+
+	rewrite_props(get_insert: (variable: Var) => Node[]) {
+		if (!this.ast.instance) return;
+
+		const component = this;
+		const { instance_scope, instance_scope_map: map } = this;
+		let scope = instance_scope;
+
+		walk(this.ast.instance.content, {
+			enter(node: Node) {
+				if (/Function/.test(node.type)) {
+					return this.skip();
+				}
+
+				if (map.has(node)) {
+					scope = map.get(node);
+				}
+
+				if (node.type === 'ExportNamedDeclaration' && node.declaration) {
+					return this.replace(node.declaration);
+				}
+
+				if (node.type === 'VariableDeclaration') {
+					// NOTE: `var` does not follow block scoping
+					if (node.kind === 'var' || scope === instance_scope) {
+						const inserts = [];
+						const props = [];
+
+						function add_new_props(exported, local, default_value) {
+							props.push({
+								type: 'Property',
+								method: false,
+								shorthand: false,
+								computed: false,
+								kind: 'init',
+								key: exported,
+								value: default_value
+									? {
+										type: 'AssignmentPattern',
+										left: local,
+										right: default_value
+									}
+									: local
+							});
+						}
+
+						// transform
+						// ```
+						// export let { x, y = 123 } = OBJ, z = 456
+						// ```
+						// into
+						// ```
+						// let { x: x$, y: y$ = 123 } = OBJ;
+						// let { x = x$, y = y$, z = 456 } = $$props;
+						// ```
+						for (let index = 0; index < node.declarations.length; index++) {
+							const declarator = node.declarations[index];
+							if (declarator.id.type !== 'Identifier') {
+								function get_new_name(local) {
+									const variable = component.var_lookup.get(local.name);
+									if (variable.subscribable) {
+										inserts.push(get_insert(variable));
+									}
+
+									if (variable.export_name && variable.writable) {
+										const alias_name = component.get_unique_name(local.name);
+										add_new_props({ type: 'Identifier', name: variable.export_name }, local, alias_name);
+										return alias_name;
+									}
+									return local;
+								}
+
+								function rename_identifiers(param: Node) {
+									switch (param.type) {
+										case 'ObjectPattern': {
+											const handle_prop = (prop: Property | RestElement) => {
+												if (prop.type === 'RestElement') {
+													rename_identifiers(prop);
+												} else if (prop.value.type === 'Identifier') {
+													prop.value = get_new_name(prop.value);
+												} else {
+													rename_identifiers(prop.value);
+												}
+											};
+
+											param.properties.forEach(handle_prop);
+											break;
+										}
+										case 'ArrayPattern': {
+											const handle_element = (element: Node, index: number, array: Node[]) => {
+												if (element) {
+													if (element.type === 'Identifier') {
+														array[index] = get_new_name(element);
+													} else {
+														rename_identifiers(element);
+													}
+												}
+											};
+
+											param.elements.forEach(handle_element);
+											break;
+										}
+
+										case 'RestElement':
+											param.argument = get_new_name(param.argument);
+											break;
+
+										case 'AssignmentPattern':
+											if (param.left.type === 'Identifier') {
+												param.left = get_new_name(param.left);
+											} else {
+												rename_identifiers(param.left);
+											}
+											break;
+									}
+								}
+
+								rename_identifiers(declarator.id);
+							} else {
+								const { name } = declarator.id;
+								const variable = component.var_lookup.get(name);
+								const is_props = variable.export_name && variable.writable;
+								if (is_props) {
+									add_new_props({ type: 'Identifier', name: variable.export_name }, declarator.id, declarator.init);
+									node.declarations.splice(index--, 1);
+								}
+								if (variable.subscribable && (is_props || declarator.init)) {
+									inserts.push(get_insert(variable));
+								}
+							}
+						}
+
+						this.replace(b`
+							${node.declarations.length ? node : null}
+							${ props.length > 0 && b`let { ${ props } } = $$props;`}
+							${inserts}
+						` as any);
+						return this.skip();
+					}
+				}
+			},
+
+			leave(node: Node) {
+				if (map.has(node)) {
+					scope = scope.parent;
+				}
+			}
+		});
+	}
+
+	hoist_instance_declarations() {
+		// we can safely hoist variable declarations that are
+		// initialised to literals, and functions that don't
+		// reference instance variables other than other
+		// hoistable functions. TODO others?
+
+		const {
+			hoistable_nodes,
+			var_lookup,
+			injected_reactive_declaration_vars,
+			imports
+		} = this;
+
+		const top_level_function_declarations = new Map();
+
+		const { body } = this.ast.instance.content;
+
+		for (let i = 0; i < body.length; i += 1) {
+			const node = body[i];
+
+			if (node.type === 'VariableDeclaration') {
+				const all_hoistable = node.declarations.every(d => {
+					if (!d.init) return false;
+					if (d.init.type !== 'Literal') return false;
+
+					// everything except const values can be changed by e.g. svelte devtools
+					// which means we can't hoist it
+					if (node.kind !== 'const' && this.compile_options.dev) return false;
+
+					const { name } = d.id as Identifier;
+
+					const v = this.var_lookup.get(name);
+					if (v.reassigned) return false;
+					if (v.export_name) return false;
+
+					if (this.var_lookup.get(name).reassigned) return false;
+					if (
+						this.vars.find(
+							variable => variable.name === name && variable.module
+						)
+					) {
+						return false;
+					}
+
+					return true;
+				});
+
+				if (all_hoistable) {
+					node.declarations.forEach(d => {
+						const variable = this.var_lookup.get((d.id as Identifier).name);
+						variable.hoistable = true;
+					});
+
+					hoistable_nodes.add(node);
+
+					body.splice(i--, 1);
+					this.fully_hoisted.push(node);
+				}
+			}
+
+			if (
+				node.type === 'ExportNamedDeclaration' &&
+				node.declaration &&
+				node.declaration.type === 'FunctionDeclaration'
+			) {
+				top_level_function_declarations.set(node.declaration.id.name, node);
+			}
+
+			if (node.type === 'FunctionDeclaration') {
+				top_level_function_declarations.set(node.id.name, node);
+			}
+		}
+
+		const checked = new Set();
+		const walking = new Set();
+
+		const is_hoistable = fn_declaration => {
+			if (fn_declaration.type === 'ExportNamedDeclaration') {
+				fn_declaration = fn_declaration.declaration;
+			}
+
+			const instance_scope = this.instance_scope;
+			let scope = this.instance_scope;
+			const map = this.instance_scope_map;
+
+			let hoistable = true;
+
+			// handle cycles
+			walking.add(fn_declaration);
+
+			walk(fn_declaration, {
+				enter(node: Node, parent) {
+					if (!hoistable) return this.skip();
+
+					if (map.has(node)) {
+						scope = map.get(node);
+					}
+
+					if (is_reference(node as NodeWithPropertyDefinition, parent as NodeWithPropertyDefinition)) {
+						const { name } = flatten_reference(node);
+						const owner = scope.find_owner(name);
+
+						if (injected_reactive_declaration_vars.has(name)) {
+							hoistable = false;
+						} else if (name[0] === '$' && !owner) {
+							hoistable = false;
+						} else if (owner === instance_scope) {
+							const variable = var_lookup.get(name);
+
+							if (variable.reassigned || variable.mutated) hoistable = false;
+
+							if (name === fn_declaration.id.name) return;
+
+							if (variable.hoistable) return;
+
+							if (top_level_function_declarations.has(name)) {
+								const other_declaration = top_level_function_declarations.get(
+									name
+								);
+
+								if (walking.has(other_declaration)) {
+									hoistable = false;
+								} else if (
+									other_declaration.type === 'ExportNamedDeclaration' &&
+									walking.has(other_declaration.declaration)
+								) {
+									hoistable = false;
+								} else if (!is_hoistable(other_declaration)) {
+									hoistable = false;
+								}
+							} else {
+								hoistable = false;
+							}
+						}
+
+						this.skip();
+					}
+				},
+
+				leave(node: Node) {
+					if (map.has(node)) {
+						scope = scope.parent;
+					}
+				}
+			});
+
+			checked.add(fn_declaration);
+			walking.delete(fn_declaration);
+
+			return hoistable;
+		};
+
+		for (const [name, node] of top_level_function_declarations) {
+			if (is_hoistable(node)) {
+				const variable = this.var_lookup.get(name);
+				variable.hoistable = true;
+				hoistable_nodes.add(node);
+
+				const i = body.indexOf(node);
+				body.splice(i, 1);
+				this.fully_hoisted.push(node);
+			}
+		}
+
+		for (const { specifiers } of imports) {
+			for (const specifier of specifiers) {
+				const variable = var_lookup.get(specifier.local.name);
+
+				if (!variable.mutated || variable.subscribable) {
+					variable.hoistable = true;
+				}
+			}
+		}
+	}
+
+	extract_reactive_declarations() {
+		const component = this;
+
+		const unsorted_reactive_declarations: Array<{
+			assignees: Set<string>;
+			dependencies: Set<string>;
+			node: Node;
+			declaration: Node;
+		}> = [];
+
+		this.ast.instance.content.body.forEach(node => {
+			const ignores = extract_svelte_ignore_from_comments(node);
+			if (ignores.length) this.push_ignores(ignores);
+
+			if (node.type === 'LabeledStatement' && node.label.name === '$') {
+				this.reactive_declaration_nodes.add(node);
+
+				const assignees = new Set<string>();
+				const assignee_nodes = new Set();
+				const dependencies = new Set<string>();
+				const module_dependencies = new Set<string>();
+
+				let scope = this.instance_scope;
+				const map = this.instance_scope_map;
+
+				walk(node.body, {
+					enter(node: Node, parent) {
+						if (map.has(node)) {
+							scope = map.get(node);
+						}
+
+						if (node.type === 'AssignmentExpression') {
+							const left = get_object(node.left);
+
+							extract_identifiers(left).forEach(node => {
+								assignee_nodes.add(node);
+								assignees.add(node.name);
+							});
+
+							if (node.operator !== '=') {
+								dependencies.add(left.name);
+							}
+						} else if (node.type === 'UpdateExpression') {
+							const identifier = get_object(node.argument);
+							assignees.add(identifier.name);
+						} else if (is_reference(node as NodeWithPropertyDefinition, parent as NodeWithPropertyDefinition)) {
+							const identifier = get_object(node);
+							if (!assignee_nodes.has(identifier)) {
+								const { name } = identifier;
+								const owner = scope.find_owner(name);
+								const variable = component.var_lookup.get(name);
+								let should_add_as_dependency = true;
+
+								if (variable) {
+									variable.is_reactive_dependency = true;
+									if (variable.module && variable.writable) {
+										should_add_as_dependency = false;
+										module_dependencies.add(name);
+									}
+								}
+								const is_writable_or_mutated =
+									variable && (variable.writable || variable.mutated);
+								if (
+									should_add_as_dependency &&
+									(!owner || owner === component.instance_scope) &&
+									(name[0] === '$' || is_writable_or_mutated)
+								) {
+									dependencies.add(name);
+								}
+							}
+
+							this.skip();
+						}
+					},
+
+					leave(node: Node) {
+						if (map.has(node)) {
+							scope = scope.parent;
+						}
+					}
+				});
+
+				if (module_dependencies.size > 0 && dependencies.size === 0) {
+					component.warn(node.body as any, compiler_warnings.module_script_variable_reactive_declaration(Array.from(module_dependencies)));
+				}
+
+				const { expression } = node.body as ExpressionStatement;
+				const declaration = expression && (expression as AssignmentExpression).left;
+
+				unsorted_reactive_declarations.push({
+					assignees,
+					dependencies,
+					node,
+					declaration
+				});
+			}
+
+			if (ignores.length) this.pop_ignores();
+		});
+
+		const lookup = new Map();
+
+		unsorted_reactive_declarations.forEach(declaration => {
+			declaration.assignees.forEach(name => {
+				if (!lookup.has(name)) {
+					lookup.set(name, []);
+				}
+
+				// TODO warn or error if a name is assigned to in
+				// multiple reactive declarations?
+				lookup.get(name).push(declaration);
+			});
+		});
+
+		const cycle = check_graph_for_cycles(unsorted_reactive_declarations.reduce((acc, declaration) => {
+			declaration.assignees.forEach(v => {
+				declaration.dependencies.forEach(w => {
+					if (!declaration.assignees.has(w)) {
+						acc.push([v, w]);
+					}
+				});
+			});
+			return acc;
+		}, []));
+
+		if (cycle && cycle.length) {
+			const declarationList = lookup.get(cycle[0]);
+			const declaration = declarationList[0];
+			return this.error(declaration.node, compiler_errors.cyclical_reactive_declaration(cycle));
+		}
+
+		const add_declaration = declaration => {
+			if (this.reactive_declarations.includes(declaration)) return;
+
+			declaration.dependencies.forEach(name => {
+				if (declaration.assignees.has(name)) return;
+				const earlier_declarations = lookup.get(name);
+				if (earlier_declarations) {
+					earlier_declarations.forEach(add_declaration);
+				}
+			});
+
+			this.reactive_declarations.push(declaration);
+		};
+
+		unsorted_reactive_declarations.forEach(add_declaration);
+	}
+
+	warn_if_undefined(name: string, node, template_scope: TemplateScope) {
+		if (name[0] === '$') {
+			if (name === '$' || name[1] === '$' && !is_reserved_keyword(name)) {
+				return this.error(node, compiler_errors.illegal_global(name));
+			}
+
+			this.has_reactive_assignments = true; // TODO does this belong here?
+
+			if (is_reserved_keyword(name)) return;
+
+			name = name.slice(1);
+		}
+
+		if (this.var_lookup.has(name) && !this.var_lookup.get(name).global) return;
+		if (template_scope && template_scope.names.has(name)) return;
+		if (globals.has(name) && node.type !== 'InlineComponent') return;
+
+		this.warn(node, compiler_warnings.missing_declaration(name, !!this.ast.instance));
+	}
+
+	push_ignores(ignores) {
+		this.ignores = new Set(this.ignores || []);
+		add_to_set(this.ignores, ignores);
+		this.ignore_stack.push(this.ignores);
+	}
+
+	pop_ignores() {
+		this.ignore_stack.pop();
+		this.ignores = this.ignore_stack[this.ignore_stack.length - 1];
+	}
+}
+
+function process_component_options(component: Component, nodes) {
+	const component_options: ComponentOptions = {
+		immutable: component.compile_options.immutable || false,
+		accessors:
+			'accessors' in component.compile_options
+				? component.compile_options.accessors
+				: !!component.compile_options.customElement,
+		preserveWhitespace: !!component.compile_options.preserveWhitespace,
+		namespace: component.compile_options.namespace
+	};
+
+	const node = nodes.find(node => node.name === 'svelte:options');
+
+	function get_value(attribute, {code, message}) {
+		const { value } = attribute;
+		const chunk = value[0];
+
+		if (!chunk) return true;
+
+		if (value.length > 1) {
+			return component.error(attribute, { code, message });
+		}
+
+		if (chunk.type === 'Text') return chunk.data;
+
+		if (chunk.expression.type !== 'Literal') {
+			return component.error(attribute, { code, message });
+		}
+
+		return chunk.expression.value;
+	}
+
+	if (node) {
+		node.attributes.forEach(attribute => {
+			if (attribute.type === 'Attribute') {
+				const { name } = attribute;
+
+				switch (name) {
+					case 'tag': {
+						const tag = get_value(attribute, compiler_errors.invalid_tag_attribute);
+
+						if (typeof tag !== 'string' && tag !== null) {
+							return component.error(attribute, compiler_errors.invalid_tag_attribute);
+						}
+
+						if (tag && !/^[a-zA-Z][a-zA-Z0-9]*-[a-zA-Z0-9-]+$/.test(tag)) {
+							return component.error(attribute, compiler_errors.invalid_tag_property);
+						}
+
+						if (tag && !component.compile_options.customElement) {
+							component.warn(attribute, compiler_warnings.missing_custom_element_compile_options);
+						}
+
+						component_options.tag = tag;
+						break;
+					}
+
+					case 'namespace': {
+						const ns = get_value(attribute, compiler_errors.invalid_namespace_attribute);
+
+						if (typeof ns !== 'string') {
+							return component.error(attribute, compiler_errors.invalid_namespace_attribute);
+						}
+
+						if (valid_namespaces.indexOf(ns) === -1) {
+							const match = fuzzymatch(ns, valid_namespaces);
+							return component.error(attribute, compiler_errors.invalid_namespace_property(ns, match));
+						}
+
+						component_options.namespace = ns;
+						break;
+					}
+
+					case 'accessors':
+					case 'immutable':
+					case 'preserveWhitespace': {
+						const value = get_value(attribute, compiler_errors.invalid_attribute_value(name));
+
+						if (typeof value !== 'boolean') {
+							return component.error(attribute, compiler_errors.invalid_attribute_value(name));
+						}
+
+						component_options[name] = value;
+						break;
+					}
+
+					default:
+						return component.error(attribute, compiler_errors.invalid_options_attribute_unknown);
+				}
+			} else {
+				return component.error(attribute, compiler_errors.invalid_options_attribute);
+			}
+		});
+	}
+
+	return component_options;
+}
+
+function get_relative_path(from: string, to: string) {
+	const from_parts = from.split(/[/\\]/);
+	const to_parts = to.split(/[/\\]/);
+
+	from_parts.pop(); // get dirname
+
+	while (from_parts[0] === to_parts[0]) {
+		from_parts.shift();
+		to_parts.shift();
+	}
+
+	if (from_parts.length) {
+		let i = from_parts.length;
+		while (i--) from_parts[i] = '..';
+	}
+
+	return from_parts.concat(to_parts).join('/');
+}
+
+function get_basename(filename: string) {
+	return filename.split(/[/\\]/).pop();
+}
+
+function get_sourcemap_source_filename(compile_options: CompileOptions) {
+	if (!compile_options.filename) return null;
+
+	return compile_options.outputFilename
+		? get_relative_path(compile_options.outputFilename, compile_options.filename)
+		: get_basename(compile_options.filename);
+}
diff --git a/src/compiler/compile/compiler_errors.ts b/src/compiler/compile/compiler_errors.ts
new file mode 100644
index 0000000000..ea95c8cbec
--- /dev/null
+++ b/src/compiler/compile/compiler_errors.ts
@@ -0,0 +1,281 @@
+// All compiler errors should be listed and accessed from here
+
+/**
+ * @internal
+ */
+export default {
+	invalid_binding_elements: (element: string, binding: string) => ({
+		code: 'invalid-binding',
+		message: `'${binding}' is not a valid binding on <${element}> elements`
+	}),
+	invalid_binding_element_with: (elements: string, binding: string) => ({
+		code: 'invalid-binding',
+		message: `'${binding}' binding can only be used with ${elements}`
+	}),
+	invalid_binding_on: (binding: string, element: string, post?: string) => ({
+		code: 'invalid-binding',
+		message: `'${binding}' is not a valid binding on ${element}` + (post || '')
+	}),
+	invalid_binding_foreign: (binding: string) => ({
+		code: 'invalid-binding',
+		message: `'${binding}' is not a valid binding. Foreign elements only support bind:this`
+	}),
+	invalid_binding_no_checkbox: (binding: string, is_radio: boolean) => ({
+		code: 'invalid-binding',
+		message: `'${binding}' binding can only be used with <input type="checkbox">` + (is_radio ? ' — for <input type="radio">, use \'group\' binding' : '')
+	}),
+	invalid_binding: (binding: string) => ({
+		code: 'invalid-binding',
+		message: `'${binding}' is not a valid binding`
+	}),
+	invalid_binding_window: (parts: string[]) => ({
+		code: 'invalid-binding',
+		message: `Bindings on <svelte:window> must be to top-level properties, e.g. '${parts[parts.length - 1]}' rather than '${parts.join('.')}'`
+	}),
+	invalid_binding_let: {
+		code: 'invalid-binding',
+		message: 'Cannot bind to a variable declared with the let: directive'
+	},
+	invalid_binding_await: {
+		code: 'invalid-binding',
+		message: 'Cannot bind to a variable declared with {#await ... then} or {:catch} blocks'
+	},
+	invalid_binding_const: {
+		code: 'invalid-binding',
+		message: 'Cannot bind to a variable declared with {@const ...}'
+	},
+	invalid_binding_writibale: {
+		code: 'invalid-binding',
+		message: 'Cannot bind to a variable which is not writable'
+	},
+	binding_undeclared: (name: string) => ({
+		code: 'binding-undeclared',
+		message: `${name} is not declared`
+	}),
+	invalid_type: {
+		code: 'invalid-type',
+		message: '\'type\' attribute cannot be dynamic if input uses two-way binding'
+	},
+	missing_type: {
+		code: 'missing-type',
+		message: '\'type\' attribute must be specified'
+	},
+	dynamic_multiple_attribute: {
+		code: 'dynamic-multiple-attribute',
+		message: '\'multiple\' attribute cannot be dynamic if select uses two-way binding'
+	},
+	missing_contenteditable_attribute: {
+		code: 'missing-contenteditable-attribute',
+		message: '\'contenteditable\' attribute is required for textContent and innerHTML two-way bindings'
+	},
+	dynamic_contenteditable_attribute: {
+		code: 'dynamic-contenteditable-attribute',
+		message: '\'contenteditable\' attribute cannot be dynamic if element uses two-way binding'
+	},
+	invalid_event_modifier_combination: (modifier1: string, modifier2: string) => ({
+		code: 'invalid-event-modifier',
+		message: `The '${modifier1}' and '${modifier2}' modifiers cannot be used together`
+	}),
+	invalid_event_modifier_legacy: (modifier: string) => ({
+		code: 'invalid-event-modifier',
+		message: `The '${modifier}' modifier cannot be used in legacy mode`
+	}),
+	invalid_event_modifier: (valid: string) => ({
+		code: 'invalid-event-modifier',
+		message: `Valid event modifiers are ${valid}`
+	}),
+	invalid_event_modifier_component: {
+		code: 'invalid-event-modifier',
+		message: "Event modifiers other than 'once' can only be used on DOM elements"
+	},
+	textarea_duplicate_value: {
+		code: 'textarea-duplicate-value',
+		message: 'A <textarea> can have either a value attribute or (equivalently) child content, but not both'
+	},
+	illegal_attribute: (name: string) => ({
+		code: 'illegal-attribute',
+		message: `'${name}' is not a valid attribute name`
+	}),
+	invalid_slot_attribute: {
+		code: 'invalid-slot-attribute',
+		message: 'slot attribute cannot have a dynamic value'
+	},
+	duplicate_slot_attribute: (name: string) => ({
+		code: 'duplicate-slot-attribute',
+		message: `Duplicate '${name}' slot`
+	}),
+	invalid_slotted_content: {
+		code: 'invalid-slotted-content',
+		message: 'Element with a slot=\'...\' attribute must be a child of a component or a descendant of a custom element'
+	},
+	invalid_attribute_head: {
+		code: 'invalid-attribute',
+		message: '<svelte:head> should not have any attributes or directives'
+	},
+	invalid_action: {
+		code: 'invalid-action',
+		message: 'Actions can only be applied to DOM elements, not components'
+	},
+	invalid_class: {
+		code: 'invalid-class',
+		message: 'Classes can only be applied to DOM elements, not components'
+	},
+	invalid_transition: {
+		code: 'invalid-transition',
+		message: 'Transitions can only be applied to DOM elements, not components'
+	},
+	invalid_let: {
+		code: 'invalid-let',
+		message: 'let directive value must be an identifier or an object/array pattern'
+	},
+	invalid_slot_directive: {
+		code: 'invalid-slot-directive',
+		message: '<slot> cannot have directives'
+	},
+	dynamic_slot_name: {
+		code: 'dynamic-slot-name',
+		message: '<slot> name cannot be dynamic'
+	},
+	invalid_slot_name: {
+		code: 'invalid-slot-name',
+		message: 'default is a reserved word — it cannot be used as a slot name'
+	},
+	invalid_slot_attribute_value_missing: {
+		code: 'invalid-slot-attribute',
+		message: 'slot attribute value is missing'
+	},
+	invalid_slotted_content_fragment: {
+		code: 'invalid-slotted-content',
+		message: '<svelte:fragment> must be a child of a component'
+	},
+	illegal_attribute_title: {
+		code: 'illegal-attribute',
+		message: '<title> cannot have attributes'
+	},
+	illegal_structure_title: {
+		code: 'illegal-structure',
+		message: '<title> can only contain text and {tags}'
+	},
+	duplicate_transition: (directive: string, parent_directive: string) => {
+		function describe(_directive: string) {
+			return _directive === 'transition'
+				? "a 'transition'"
+				: `an '${_directive}'`;
+		}
+		const message = directive === parent_directive
+			? `An element can only have one '${directive}' directive`
+			: `An element cannot have both ${describe(parent_directive)} directive and ${describe(directive)} directive`;
+		return {
+			code: 'duplicate-transition',
+			message
+		};
+	},
+	contextual_store: {
+		code: 'contextual-store',
+		message: 'Stores must be declared at the top level of the component (this may change in a future version of Svelte)'
+	},
+	default_export: {
+		code: 'default-export',
+		message: 'A component cannot have a default export'
+	},
+	illegal_declaration: {
+		code: 'illegal-declaration',
+		message: 'The $ prefix is reserved, and cannot be used for variable and import names'
+	},
+	illegal_subscription: {
+		code: 'illegal-subscription',
+		message: 'Cannot reference store value inside <script context="module">'
+	},
+	illegal_global: (name: string) => ({
+		code: 'illegal-global',
+		message: `${name} is an illegal variable name`
+	}),
+	illegal_variable_declaration: {
+		code: 'illegal-variable-declaration',
+		message: 'Cannot declare same variable name which is imported inside <script context="module">'
+	},
+	cyclical_reactive_declaration: (cycle: string[]) => ({
+		code: 'cyclical-reactive-declaration',
+		message: `Cyclical dependency detected: ${cycle.join(' → ')}`
+	}),
+	invalid_tag_property: {
+		code: 'invalid-tag-property',
+		message: "tag name must be two or more words joined by the '-' character"
+	},
+	invalid_tag_attribute: {
+		code: 'invalid-tag-attribute',
+		message: "'tag' must be a string literal"
+	},
+	invalid_namespace_property: (namespace: string, suggestion?: string) => ({
+		code: 'invalid-namespace-property',
+		message: `Invalid namespace '${namespace}'` + (suggestion ? ` (did you mean '${suggestion}'?)` : '')
+	}),
+	invalid_namespace_attribute: {
+		code: 'invalid-namespace-attribute',
+		message: "The 'namespace' attribute must be a string literal representing a valid namespace"
+	},
+	invalid_attribute_value: (name: string) => ({
+		code: `invalid-${name}-value`,
+		message: `${name} attribute must be true or false`
+	}),
+	invalid_options_attribute_unknown: {
+		code: 'invalid-options-attribute',
+		message: '<svelte:options> unknown attribute'
+	},
+	invalid_options_attribute: {
+		code: 'invalid-options-attribute',
+		message: "<svelte:options> can only have static 'tag', 'namespace', 'accessors', 'immutable' and 'preserveWhitespace' attributes"
+	},
+	css_invalid_global: {
+		code: 'css-invalid-global',
+		message: ':global(...) can be at the start or end of a selector sequence, but not in the middle'
+	},
+	css_invalid_global_selector: {
+		code: 'css-invalid-global-selector',
+		message: ':global(...) must contain a single selector'
+	},
+	duplicate_animation: {
+		code: 'duplicate-animation',
+		message: "An element can only have one 'animate' directive"
+	},
+	invalid_animation_immediate: {
+		code: 'invalid-animation',
+		message: 'An element that uses the animate directive must be the immediate child of a keyed each block'
+	},
+	invalid_animation_key: {
+		code: 'invalid-animation',
+		message: 'An element that uses the animate directive must be used inside a keyed each block. Did you forget to add a key to your each block?'
+	},
+	invalid_animation_sole: {
+		code: 'invalid-animation',
+		message: 'An element that uses the animate directive must be the sole child of a keyed each block'
+	},
+	invalid_animation_dynamic_element: {
+		code: 'invalid-animation',
+		message: '<svelte:element> cannot have a animate directive'
+	},
+	invalid_directive_value: {
+		code: 'invalid-directive-value',
+		message: 'Can only bind to an identifier (e.g. `foo`) or a member expression (e.g. `foo.bar` or `foo[baz]`)'
+	},
+	invalid_const_placement: {
+		code: 'invalid-const-placement',
+		message: '{@const} must be the immediate child of {#if}, {:else if}, {:else}, {#each}, {:then}, {:catch}, <svelte:fragment> or <Component>'
+	},
+	invalid_const_declaration: (name: string) => ({
+		code: 'invalid-const-declaration',
+		message: `'${name}' has already been declared`
+	}),
+	invalid_const_update: (name: string) => ({
+		code: 'invalid-const-update',
+		message: `'${name}' is declared using {@const ...} and is read-only`
+	}),
+	cyclical_const_tags: (cycle: string[]) => ({
+		code: 'cyclical-const-tags',
+		message: `Cyclical dependency detected: ${cycle.join(' → ')}`
+	}),
+	invalid_component_style_directive: {
+		code: 'invalid-component-style-directive',
+		message: 'Style directives cannot be used on components'
+	}
+};
diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts
new file mode 100644
index 0000000000..86ec98cb8b
--- /dev/null
+++ b/src/compiler/compile/compiler_warnings.ts
@@ -0,0 +1,147 @@
+// All compiler warnings should be listed and accessed from here
+
+/**
+ * @internal
+ */
+export default {
+	custom_element_no_tag: {
+		code: 'custom-element-no-tag',
+		message: 'No custom element \'tag\' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. <svelte:options tag="my-thing"/>. To hide this warning, use <svelte:options tag={null}/>'			
+	},
+	unused_export_let: (component: string, property: string) => ({
+		code: 'unused-export-let',
+		message: `${component} has unused export property '${property}'. If it is for external reference only, please consider using \`export const ${property}\``
+	}),
+	module_script_reactive_declaration: {
+		code: 'module-script-reactive-declaration',
+		message: '$: has no effect in a module script'
+	},
+	non_top_level_reactive_declaration: {
+		code: 'non-top-level-reactive-declaration',
+		message: '$: has no effect outside of the top-level'
+	},
+	module_script_variable_reactive_declaration: (names: string[]) => ({
+		code: 'module-script-reactive-declaration',
+		message: `${names.map(name => `"${name}"`).join(', ')} ${names.length > 1 ? 'are' : 'is'} declared in a module script and will not be reactive`
+	}),
+	missing_declaration: (name: string, has_script: boolean) => ({
+		code: 'missing-declaration',
+		message: `'${name}' is not defined` + (has_script ? '' : `. Consider adding a <script> block with 'export let ${name}' to declare a prop`)
+	}),
+	missing_custom_element_compile_options: {
+		code: 'missing-custom-element-compile-options',
+		message: "The 'tag' option is used when generating a custom element. Did you forget the 'customElement: true' compile option?"
+	},
+	css_unused_selector: (selector: string) => ({
+		code: 'css-unused-selector',
+		message: `Unused CSS selector "${selector}"`
+	}),
+	empty_block: {
+		code: 'empty-block',
+		message: 'Empty block'
+	},
+	reactive_component: (name: string) => ({
+		code: 'reactive-component',
+		message: `<${name}/> will not be reactive if ${name} changes. Use <svelte:component this={${name}}/> if you want this reactivity.`
+	}),
+	component_name_lowercase: (name: string) => ({
+		code: 'component-name-lowercase',
+		message: `<${name}> will be treated as an HTML element unless it begins with a capital letter`
+	}),
+	avoid_is: {
+		code: 'avoid-is',
+		message: 'The \'is\' attribute is not supported cross-browser and should be avoided'
+	},
+	invalid_html_attribute: (name: string, suggestion: string) => ({
+		code: 'invalid-html-attribute',
+		message: `'${name}' is not a valid HTML attribute. Did you mean '${suggestion}'?`
+	}),
+	a11y_aria_attributes: (name: string) => ({
+		code: 'a11y-aria-attributes',
+		message: `A11y: <${name}> should not have aria-* attributes`
+	}),
+	a11y_unknown_aria_attribute: (attribute: string, suggestion?: string) => ({
+		code: 'a11y-unknown-aria-attribute',
+		message: `A11y: Unknown aria attribute 'aria-${attribute}'` + (suggestion ? ` (did you mean '${suggestion}'?)` : '')
+	}),
+	a11y_hidden: (name: string) => ({
+		code: 'a11y-hidden',
+		message: `A11y: <${name}> element should not be hidden`
+	}),
+	a11y_misplaced_role: (name: string) => ({
+		code: 'a11y-misplaced-role',
+		message: `A11y: <${name}> should not have role attribute`
+	}),
+	a11y_unknown_role: (role: string | boolean, suggestion?: string) => ({
+		code: 'a11y-unknown-role',
+		message: `A11y: Unknown role '${role}'` + (suggestion ? ` (did you mean '${suggestion}'?)` : '')
+	}),
+	a11y_no_redundant_roles: (role: string | boolean) => ({
+		code: 'a11y-no-redundant-roles',
+		message: `A11y: Redundant role '${role}'`
+	}),
+	a11y_accesskey: {
+		code: 'a11y-accesskey',
+		message: 'A11y: Avoid using accesskey'
+	},
+	a11y_autofocus: {
+		code: 'a11y-autofocus',
+		message: 'A11y: Avoid using autofocus'
+	},
+	a11y_misplaced_scope: {
+		code: 'a11y-misplaced-scope',
+		message: 'A11y: The scope attribute should only be used with <th> elements'
+	},
+	a11y_positive_tabindex: {
+		code: 'a11y-positive-tabindex',
+		message: 'A11y: avoid tabindex values above zero'
+	},
+	a11y_invalid_attribute: (href_attribute: string, href_value: string) => ({
+		code: 'a11y-invalid-attribute',
+		message: `A11y: '${href_value}' is not a valid ${href_attribute} attribute`
+	}),
+	a11y_missing_attribute: (name: string, article: string, sequence: string) => ({
+		code: 'a11y-missing-attribute',
+		message: `A11y: <${name}> element should have ${article} ${sequence} attribute`
+	}),
+	a11y_img_redundant_alt: {
+		code: 'a11y-img-redundant-alt',
+		message: 'A11y: Screenreaders already announce <img> elements as an image.'
+	},
+	a11y_label_has_associated_control: {
+		code: 'a11y-label-has-associated-control',
+		message: 'A11y: A form label must be associated with a control.'
+	},
+	a11y_media_has_caption: {
+		code: 'a11y-media-has-caption',
+		message: 'A11y: <video> elements must have a <track kind="captions">'
+	},
+	a11y_distracting_elements: (name: string) => ({
+		code: 'a11y-distracting-elements',
+		message: `A11y: Avoid <${name}> elements`
+	}),
+	a11y_structure_immediate: {
+		code: 'a11y-structure',
+		message: 'A11y: <figcaption> must be an immediate child of <figure>'
+	},
+	a11y_structure_first_or_last: {
+		code: 'a11y-structure',
+		message: 'A11y: <figcaption> must be first or last child of <figure>'
+	},
+	a11y_mouse_events_have_key_events: (event: string, accompanied_by: string) => ({
+		code: 'a11y-mouse-events-have-key-events',
+		message: `A11y: on:${event} must be accompanied by on:${accompanied_by}`
+	}),
+	a11y_missing_content: (name: string) => ({
+		code: 'a11y-missing-content',
+		message: `A11y: <${name}> element should have child content`
+	}),
+	redundant_event_modifier_for_touch: {
+		code: 'redundant-event-modifier',
+		message: 'Touch event handlers that don\'t use the \'event\' object are passive by default'
+	},
+	redundant_event_modifier_passive: {
+		code: 'redundant-event-modifier',
+		message: 'The passive modifier only works with wheel and touch events'
+	}
+};
diff --git a/src/compiler/compile/create_module.ts b/src/compiler/compile/create_module.ts
new file mode 100644
index 0000000000..c9f925c4b4
--- /dev/null
+++ b/src/compiler/compile/create_module.ts
@@ -0,0 +1,217 @@
+import list from '../utils/list';
+import { ModuleFormat } from '../interfaces';
+import { b, x } from 'code-red';
+import { Identifier, ImportDeclaration, ExportNamedDeclaration } from 'estree';
+
+const wrappers = { esm, cjs };
+
+interface Export {
+	name: string;
+	as: string;
+}
+
+export default function create_module(
+	program: any,
+	format: ModuleFormat,
+	name: Identifier,
+	banner: string,
+	sveltePath = 'svelte',
+	helpers: Array<{ name: string; alias: Identifier }>,
+	globals: Array<{ name: string; alias: Identifier }>,
+	imports: ImportDeclaration[],
+	module_exports: Export[],
+	exports_from: ExportNamedDeclaration[]
+) {
+	const internal_path = `${sveltePath}/internal`;
+
+	helpers.sort((a, b) => (a.name < b.name) ? -1 : 1);
+	globals.sort((a, b) => (a.name < b.name) ? -1 : 1);
+
+	const formatter = wrappers[format];
+
+	if (!formatter) {
+		throw new Error(`options.format is invalid (must be ${list(Object.keys(wrappers))})`);
+	}
+
+	return formatter(program, name, banner, sveltePath, internal_path, helpers, globals, imports, module_exports, exports_from);
+}
+
+function edit_source(source, sveltePath) {
+	return source === 'svelte' || source.startsWith('svelte/')
+		? source.replace('svelte', sveltePath)
+		: source;
+}
+
+function get_internal_globals(
+	globals: Array<{ name: string; alias: Identifier }>,
+	helpers: Array<{ name: string; alias: Identifier }>
+) {
+	return globals.length > 0 && {
+		type: 'VariableDeclaration',
+		kind: 'const',
+		declarations: [{
+			type: 'VariableDeclarator',
+			id: {
+				type: 'ObjectPattern',
+				properties: globals.map(g => ({
+					type: 'Property',
+					method: false,
+					shorthand: false,
+					computed: false,
+					key: { type: 'Identifier', name: g.name },
+					value: g.alias,
+					kind: 'init'
+				}))
+			},
+			init: helpers.find(({ name }) => name === 'globals').alias
+		}]
+	};
+}
+
+function esm(
+	program: any,
+	name: Identifier,
+	banner: string,
+	sveltePath: string,
+	internal_path: string,
+	helpers: Array<{ name: string; alias: Identifier }>,
+	globals: Array<{ name: string; alias: Identifier }>,
+	imports: ImportDeclaration[],
+	module_exports: Export[],
+	exports_from: ExportNamedDeclaration[]
+) {
+	const import_declaration = {
+		type: 'ImportDeclaration',
+		specifiers: helpers.map(h => ({
+			type: 'ImportSpecifier',
+			local: h.alias,
+			imported: { type: 'Identifier', name: h.name }
+		})),
+		source: { type: 'Literal', value: internal_path }
+	};
+
+	const internal_globals = get_internal_globals(globals, helpers);
+
+	// edit user imports
+	function rewrite_import(node) {
+		const value = edit_source(node.source.value, sveltePath);
+		if (node.source.value !== value) {
+			node.source.value = value;
+			node.source.raw = null;
+		}
+	}
+	imports.forEach(rewrite_import);
+	exports_from.forEach(rewrite_import);
+
+	const exports = module_exports.length > 0 && {
+		type: 'ExportNamedDeclaration',
+		specifiers: module_exports.map(x => ({
+			type: 'Specifier',
+			local: { type: 'Identifier', name: x.name },
+			exported: { type: 'Identifier', name: x.as }
+		}))
+	};
+
+	program.body = b`
+		/* ${banner} */
+
+		${import_declaration}
+		${internal_globals}
+		${imports}
+		${exports_from}
+
+		${program.body}
+
+		export default ${name};
+		${exports}
+	`;
+}
+
+function cjs(
+	program: any,
+	name: Identifier,
+	banner: string,
+	sveltePath: string,
+	internal_path: string,
+	helpers: Array<{ name: string; alias: Identifier }>,
+	globals: Array<{ name: string; alias: Identifier }>,
+	imports: ImportDeclaration[],
+	module_exports: Export[],
+	exports_from: ExportNamedDeclaration[]
+) {
+	const internal_requires = {
+		type: 'VariableDeclaration',
+		kind: 'const',
+		declarations: [{
+			type: 'VariableDeclarator',
+			id: {
+				type: 'ObjectPattern',
+				properties: helpers.map(h => ({
+					type: 'Property',
+					method: false,
+					shorthand: false,
+					computed: false,
+					key: { type: 'Identifier', name: h.name },
+					value: h.alias,
+					kind: 'init'
+				}))
+			},
+			init: x`require("${internal_path}")`
+		}]
+	};
+
+	const internal_globals = get_internal_globals(globals, helpers);
+
+	const user_requires = imports.map(node => {
+		const init = x`require("${edit_source(node.source.value, sveltePath)}")`;
+		if (node.specifiers.length === 0) {
+			return b`${init};`;
+		}
+		return {
+			type: 'VariableDeclaration',
+			kind: 'const',
+			declarations: [{
+				type: 'VariableDeclarator',
+				id: node.specifiers[0].type === 'ImportNamespaceSpecifier'
+					? { type: 'Identifier', name: node.specifiers[0].local.name }
+					: {
+						type: 'ObjectPattern',
+						properties: node.specifiers.map(s => ({
+							type: 'Property',
+							method: false,
+							shorthand: false,
+							computed: false,
+							key: s.type === 'ImportSpecifier' ? s.imported : { type: 'Identifier', name: 'default' },
+							value: s.local,
+							kind: 'init'
+						}))
+					},
+				init
+			}]
+		};
+	});
+
+	const exports = module_exports.map(x => b`exports.${{ type: 'Identifier', name: x.as }} = ${{ type: 'Identifier', name: x.name }};`);
+
+	const user_exports_from = exports_from.map(node => {
+		const init = x`require("${edit_source(node.source.value, sveltePath)}")`;
+		return node.specifiers.map(specifier => {
+			return b`exports.${specifier.exported} = ${init}.${specifier.local};`;
+		});
+	});
+
+	program.body = b`
+		/* ${banner} */
+
+		"use strict";
+		${internal_requires}
+		${internal_globals}
+		${user_requires}
+		${user_exports_from}
+
+		${program.body}
+
+		exports.default = ${name};
+		${exports}
+	`;
+}
diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
new file mode 100644
index 0000000000..b00fbc5548
--- /dev/null
+++ b/src/compiler/compile/css/Selector.ts
@@ -0,0 +1,641 @@
+import MagicString from 'magic-string';
+import Stylesheet from './Stylesheet';
+import { gather_possible_values, UNKNOWN } from './gather_possible_values';
+import { CssNode } from './interfaces';
+import Component from '../Component';
+import Element from '../nodes/Element';
+import { INode } from '../nodes/interfaces';
+import EachBlock from '../nodes/EachBlock';
+import IfBlock from '../nodes/IfBlock';
+import AwaitBlock from '../nodes/AwaitBlock';
+import compiler_errors from '../compiler_errors';
+
+enum BlockAppliesToNode {
+	NotPossible,
+	Possible,
+	UnknownSelectorType
+}
+enum NodeExist {
+	Probably = 1,
+	Definitely = 2,
+}
+
+const whitelist_attribute_selector = new Map([
+	['details', new Set(['open'])],
+	['dialog', new Set(['open'])]
+]);
+
+export default class Selector {
+	node: CssNode;
+	stylesheet: Stylesheet;
+	blocks: Block[];
+	local_blocks: Block[];
+	used: boolean;
+
+	constructor(node: CssNode, stylesheet: Stylesheet) {
+		this.node = node;
+		this.stylesheet = stylesheet;
+
+		this.blocks = group_selectors(node);
+
+		// take trailing :global(...) selectors out of consideration
+		let i = this.blocks.length;
+		while (i > 0) {
+			if (!this.blocks[i - 1].global) break;
+			i -= 1;
+		}
+
+		this.local_blocks = this.blocks.slice(0, i);
+
+		const host_only = this.blocks.length === 1 && this.blocks[0].host;
+		const root_only = this.blocks.length === 1 && this.blocks[0].root;
+
+		this.used = this.local_blocks.length === 0 || host_only || root_only;
+	}
+
+	apply(node: Element) {
+		const to_encapsulate: Array<{ node: Element, block: Block }> = [];
+
+		apply_selector(this.local_blocks.slice(), node, to_encapsulate);
+
+		if (to_encapsulate.length > 0) {
+			to_encapsulate.forEach(({ node, block }) => {
+				this.stylesheet.nodes_with_css_class.add(node);
+				block.should_encapsulate = true;
+			});
+
+			this.used = true;
+		}
+	}
+
+	minify(code: MagicString) {
+		let c: number = null;
+		this.blocks.forEach((block, i) => {
+			if (i > 0) {
+				if (block.start - c > 1) {
+					code.overwrite(c, block.start, block.combinator.name || ' ');
+				}
+			}
+
+			c = block.end;
+		});
+	}
+
+	transform(code: MagicString, attr: string, max_amount_class_specificity_increased: number) {
+		const amount_class_specificity_to_increase = max_amount_class_specificity_increased - this.blocks.filter(block => block.should_encapsulate).length;
+
+		function remove_global_pseudo_class(selector: CssNode) {
+			const first = selector.children[0];
+			const last = selector.children[selector.children.length - 1];
+			code.remove(selector.start, first.start).remove(last.end, selector.end);
+		}
+
+		function encapsulate_block(block: Block, attr: string) {
+			for (const selector of block.selectors) {
+				if (selector.type === 'PseudoClassSelector' && selector.name === 'global') {
+					remove_global_pseudo_class(selector);
+				}
+			}
+
+			let i = block.selectors.length;
+
+			while (i--) {
+				const selector = block.selectors[i];
+				if (selector.type === 'PseudoElementSelector' || selector.type === 'PseudoClassSelector') {
+					if (selector.name !== 'root' && selector.name !== 'host') {
+						if (i === 0) code.prependRight(selector.start, attr);
+					}
+					continue;
+				}
+
+				if (selector.type === 'TypeSelector' && selector.name === '*') {
+					code.overwrite(selector.start, selector.end, attr);
+				} else {
+					code.appendLeft(selector.end, attr);
+				}
+
+				break;
+			}
+		}
+
+		this.blocks.forEach((block, index) => {
+			if (block.global) {
+				remove_global_pseudo_class(block.selectors[0]);
+			}
+			if (block.should_encapsulate) encapsulate_block(block, index === this.blocks.length - 1 ? attr.repeat(amount_class_specificity_to_increase + 1) : attr);
+		});
+	}
+
+	validate(component: Component) {
+		let start = 0;
+		let end = this.blocks.length;
+
+		for (; start < end; start += 1) {
+			if (!this.blocks[start].global) break;
+		}
+
+		for (; end > start; end -= 1) {
+			if (!this.blocks[end - 1].global) break;
+		}
+
+		for (let i = start; i < end; i += 1) {
+			if (this.blocks[i].global) {
+				return component.error(this.blocks[i].selectors[0], compiler_errors.css_invalid_global);
+			}
+		}
+
+		this.validate_global_with_multiple_selectors(component);
+	}
+
+	validate_global_with_multiple_selectors(component: Component) {
+		if (this.blocks.length === 1 && this.blocks[0].selectors.length === 1) {
+			// standalone :global() with multiple selectors is OK
+			return;
+		}
+
+		for (const block of this.blocks) {
+			for (const selector of block.selectors) {
+				if (selector.type === 'PseudoClassSelector' && selector.name === 'global') {
+					if (/[^\\],(?!([^([]+[^\\]|[^([\\])[)\]])/.test(selector.children[0].value)) {
+						component.error(selector, compiler_errors.css_invalid_global_selector);
+					}
+				}
+			}
+		}
+	}
+
+	get_amount_class_specificity_increased() {
+		let count = 0;
+		for (const block of this.blocks) {
+			if (block.should_encapsulate) {
+				count ++;
+			}
+		}
+		return count;
+	}
+}
+
+function apply_selector(blocks: Block[], node: Element, to_encapsulate: Array<{ node: Element, block: Block }>): boolean {
+	const block = blocks.pop();
+	if (!block) return false;
+
+	if (!node) {
+		return (
+			(block.global && blocks.every(block => block.global)) ||
+			(block.host && blocks.length === 0)
+		);
+	}
+
+	switch (block_might_apply_to_node(block, node)) {
+		case BlockAppliesToNode.NotPossible:
+			return false;
+
+		case BlockAppliesToNode.UnknownSelectorType:
+		// bail. TODO figure out what these could be
+			to_encapsulate.push({ node, block });
+			return true;
+	}
+
+	if (block.combinator) {
+		if (block.combinator.type === 'WhiteSpace') {
+			for (const ancestor_block of blocks) {
+				if (ancestor_block.global) {
+					continue;
+				}
+
+				if (ancestor_block.host) {
+					to_encapsulate.push({ node, block });
+					return true;
+				}
+
+				let parent = node;
+				while (parent = get_element_parent(parent)) {
+					if (block_might_apply_to_node(ancestor_block, parent) !== BlockAppliesToNode.NotPossible) {
+						to_encapsulate.push({ node: parent, block: ancestor_block });
+					}
+				}
+
+				if (to_encapsulate.length) {
+					to_encapsulate.push({ node, block });
+					return true;
+				}
+			}
+
+			if (blocks.every(block => block.global)) {
+				to_encapsulate.push({ node, block });
+				return true;
+			}
+
+			return false;
+		} else if (block.combinator.name === '>') {
+			const has_global_parent = blocks.every(block => block.global);
+			if (has_global_parent || apply_selector(blocks, get_element_parent(node), to_encapsulate)) {
+				to_encapsulate.push({ node, block });
+				return true;
+			}
+
+			return false;
+		} else if (block.combinator.name === '+' || block.combinator.name === '~') {
+			const siblings = get_possible_element_siblings(node, block.combinator.name === '+');
+			let has_match = false;
+
+			// NOTE: if we have :global(), we couldn't figure out what is selected within `:global` due to the
+			// css-tree limitation that does not parse the inner selector of :global
+			// so unless we are sure there will be no sibling to match, we will consider it as matched
+			const has_global = blocks.some(block => block.global);
+			if (has_global) {
+				if (siblings.size === 0 && get_element_parent(node) !== null) {
+					return false;
+				}
+				to_encapsulate.push({ node, block });
+				return true;
+			}
+
+			for (const possible_sibling of siblings.keys()) {
+				if (apply_selector(blocks.slice(), possible_sibling, to_encapsulate)) {
+					to_encapsulate.push({ node, block });
+					has_match = true;
+				}
+			}
+			return has_match;
+		}
+
+		// TODO other combinators
+		to_encapsulate.push({ node, block });
+		return true;
+	}
+
+	to_encapsulate.push({ node, block });
+	return true;
+}
+
+function block_might_apply_to_node(block: Block, node: Element): BlockAppliesToNode {
+	let i = block.selectors.length;
+
+	while (i--) {
+		const selector = block.selectors[i];
+		const name = typeof selector.name === 'string' && selector.name.replace(/\\(.)/g, '$1');
+
+		if (selector.type === 'PseudoClassSelector' && (name === 'host' || name === 'root')) {
+			return BlockAppliesToNode.NotPossible;
+		}
+
+		if (block.selectors.length === 1 && selector.type === 'PseudoClassSelector' && name === 'global') {
+			return BlockAppliesToNode.NotPossible;
+		}
+
+		if (selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector') {
+			continue;
+		}
+
+		if (selector.type === 'ClassSelector') {
+			if (!attribute_matches(node, 'class', name, '~=', false) && !node.classes.some(c => c.name === name)) return BlockAppliesToNode.NotPossible;
+		} else if (selector.type === 'IdSelector') {
+			if (!attribute_matches(node, 'id', name, '=', false)) return BlockAppliesToNode.NotPossible;
+		} else if (selector.type === 'AttributeSelector') {
+			if (
+				!(whitelist_attribute_selector.has(node.name.toLowerCase()) && whitelist_attribute_selector.get(node.name.toLowerCase()).has(selector.name.name.toLowerCase())) &&
+				!attribute_matches(node, selector.name.name, selector.value && unquote(selector.value), selector.matcher, selector.flags)) {
+				return BlockAppliesToNode.NotPossible;
+			}
+		} else if (selector.type === 'TypeSelector') {
+			if (node.name.toLowerCase() !== name.toLowerCase() && name !== '*') return BlockAppliesToNode.NotPossible;
+		} else {
+			return BlockAppliesToNode.UnknownSelectorType;
+		}
+	}
+
+	return BlockAppliesToNode.Possible;
+}
+
+function test_attribute(operator, expected_value, case_insensitive, value) {
+	if (case_insensitive) {
+		expected_value = expected_value.toLowerCase();
+		value = value.toLowerCase();
+	}
+	switch (operator) {
+		case '=': return value === expected_value;
+		case '~=': return value.split(/\s/).includes(expected_value);
+		case '|=': return `${value}-`.startsWith(`${expected_value}-`);
+		case '^=': return value.startsWith(expected_value);
+		case '$=': return value.endsWith(expected_value);
+		case '*=': return value.includes(expected_value);
+		default: throw new Error("this shouldn't happen");
+	}
+}
+
+function attribute_matches(node: CssNode, name: string, expected_value: string, operator: string, case_insensitive: boolean) {
+	const spread = node.attributes.find(attr => attr.type === 'Spread');
+	if (spread) return true;
+
+	if (node.bindings.some((binding: CssNode) => binding.name === name)) return true;
+
+	const attr = node.attributes.find((attr: CssNode) => attr.name === name);
+	if (!attr) return false;
+	if (attr.is_true) return operator === null;
+	if (!expected_value) return true;
+
+	if (attr.chunks.length === 1) {
+		const value = attr.chunks[0];
+		if (!value) return false;
+		if (value.type === 'Text') return test_attribute(operator, expected_value, case_insensitive, value.data);
+	}
+
+	const possible_values = new Set();
+
+	let prev_values = [];
+	for (const chunk of attr.chunks) {
+		const current_possible_values = new Set();
+		if (chunk.type === 'Text') {
+			current_possible_values.add(chunk.data);
+		} else {
+			gather_possible_values(chunk.node, current_possible_values);
+		}
+
+		// impossible to find out all combinations
+		if (current_possible_values.has(UNKNOWN)) return true;
+
+		if (prev_values.length > 0) {
+			const start_with_space = [];
+			const remaining = [];
+			current_possible_values.forEach((current_possible_value: string) => {
+				if (/^\s/.test(current_possible_value)) {
+					start_with_space.push(current_possible_value);
+				} else {
+					remaining.push(current_possible_value);
+				}
+			});
+
+			if (remaining.length > 0) {
+				if (start_with_space.length > 0) {
+					prev_values.forEach(prev_value => possible_values.add(prev_value));
+				}
+
+				const combined = [];
+				prev_values.forEach((prev_value: string) => {
+					remaining.forEach((value: string) => {
+						combined.push(prev_value + value);
+					});
+				});
+				prev_values = combined;
+
+				start_with_space.forEach((value: string) => {
+					if (/\s$/.test(value)) {
+						possible_values.add(value);
+					} else {
+						prev_values.push(value);
+					}
+				});
+				continue;
+			} else {
+				prev_values.forEach(prev_value => possible_values.add(prev_value));
+				prev_values = [];
+			}
+		}
+
+		current_possible_values.forEach((current_possible_value: string) => {
+			if (/\s$/.test(current_possible_value)) {
+				possible_values.add(current_possible_value);
+			} else {
+				prev_values.push(current_possible_value);
+			}
+		});
+		if (prev_values.length < current_possible_values.size) {
+			prev_values.push(' ');
+		}
+
+		if (prev_values.length > 20) {
+			// might grow exponentially, bail out
+			return true;
+		}
+	}
+	prev_values.forEach(prev_value => possible_values.add(prev_value));
+
+	if (possible_values.has(UNKNOWN)) return true;
+
+	for (const value of possible_values) {
+		if (test_attribute(operator, expected_value, case_insensitive, value)) return true;
+	}
+
+	return false;
+}
+
+function unquote(value: CssNode) {
+	if (value.type === 'Identifier') return value.name;
+	const str = value.value;
+	if (str[0] === str[str.length - 1] && str[0] === "'" || str[0] === '"') {
+		return str.slice(1, str.length - 1);
+	}
+	return str;
+}
+
+function get_element_parent(node: Element): Element | null {
+	let parent: INode = node;
+	while ((parent = parent.parent) && parent.type !== 'Element');
+	return parent as Element | null;
+}
+
+function get_possible_element_siblings(node: INode, adjacent_only: boolean): Map<Element, NodeExist> {
+	const result: Map<Element, NodeExist> = new Map();
+	let prev: INode = node;
+	while (prev = prev.prev) {
+		if (prev.type === 'Element') {
+			if (!prev.attributes.find(attr => attr.type === 'Attribute' && attr.name.toLowerCase() === 'slot')) {
+				result.set(prev, NodeExist.Definitely);
+			}
+
+			if (adjacent_only) {
+				break;
+			}
+		} else if (prev.type === 'EachBlock' || prev.type === 'IfBlock' || prev.type === 'AwaitBlock') {
+			const possible_last_child = get_possible_last_child(prev, adjacent_only);
+
+			add_to_map(possible_last_child, result);
+			if (adjacent_only && has_definite_elements(possible_last_child)) {
+				return result;
+			}
+		}
+	}
+
+	if (!prev || !adjacent_only) {
+		let parent: INode = node;
+		let skip_each_for_last_child = node.type === 'ElseBlock';
+		while ((parent = parent.parent) && (parent.type === 'EachBlock' || parent.type === 'IfBlock' || parent.type === 'ElseBlock' || parent.type === 'AwaitBlock')) {
+			const possible_siblings = get_possible_element_siblings(parent, adjacent_only);
+			add_to_map(possible_siblings, result);
+
+			if (parent.type === 'EachBlock') {
+				// first child of each block can select the last child of each block as previous sibling
+				if (skip_each_for_last_child) {
+					skip_each_for_last_child = false;
+				} else {
+					add_to_map(get_possible_last_child(parent, adjacent_only), result);
+				}
+			} else if (parent.type === 'ElseBlock') {
+				skip_each_for_last_child = true;
+				parent = parent.parent;
+			}
+
+			if (adjacent_only && has_definite_elements(possible_siblings)) {
+				break;
+			}
+		}
+	}
+
+	return result;
+}
+
+function get_possible_last_child(block: EachBlock | IfBlock | AwaitBlock, adjacent_only: boolean): Map<Element, NodeExist> {
+	const result: Map<Element, NodeExist> = new Map();
+
+	if (block.type === 'EachBlock') {
+		const each_result: Map<Element, NodeExist> = loop_child(block.children, adjacent_only);
+		const else_result: Map<Element, NodeExist> = block.else ? loop_child(block.else.children, adjacent_only) : new Map();
+
+		const not_exhaustive = !has_definite_elements(else_result);
+
+		if (not_exhaustive) {
+			mark_as_probably(each_result);
+			mark_as_probably(else_result);
+		}
+		add_to_map(each_result, result);
+		add_to_map(else_result, result);
+	} else if (block.type === 'IfBlock') {
+		const if_result: Map<Element, NodeExist> = loop_child(block.children, adjacent_only);
+		const else_result: Map<Element, NodeExist> = block.else ? loop_child(block.else.children, adjacent_only) : new Map();
+
+		const not_exhaustive = !has_definite_elements(if_result) || !has_definite_elements(else_result);
+
+		if (not_exhaustive) {
+			mark_as_probably(if_result);
+			mark_as_probably(else_result);
+		}
+
+		add_to_map(if_result, result);
+		add_to_map(else_result, result);
+	} else if (block.type === 'AwaitBlock') {
+		const pending_result: Map<Element, NodeExist> = block.pending ? loop_child(block.pending.children, adjacent_only) : new Map();
+		const then_result: Map<Element, NodeExist> = block.then ? loop_child(block.then.children, adjacent_only) : new Map();
+		const catch_result: Map<Element, NodeExist> = block.catch ? loop_child(block.catch.children, adjacent_only) : new Map();
+
+		const not_exhaustive = !has_definite_elements(pending_result) || !has_definite_elements(then_result) || !has_definite_elements(catch_result);
+
+		if (not_exhaustive) {
+			mark_as_probably(pending_result);
+			mark_as_probably(then_result);
+			mark_as_probably(catch_result);
+		}
+
+		add_to_map(pending_result, result);
+		add_to_map(then_result, result);
+		add_to_map(catch_result, result);
+	}
+
+	return result;
+}
+
+function has_definite_elements(result: Map<Element, NodeExist>): boolean {
+	if (result.size === 0) return false;
+	for (const exist of result.values()) {
+		if (exist === NodeExist.Definitely) {
+			return true;
+		}
+	}
+	return false;
+}
+
+function add_to_map(from: Map<Element, NodeExist>, to: Map<Element, NodeExist>) {
+	from.forEach((exist, element) => {
+		to.set(element, higher_existence(exist, to.get(element)));
+	});
+}
+
+function higher_existence(exist1: NodeExist | null, exist2: NodeExist | null): NodeExist {
+	if (exist1 === undefined || exist2 === undefined) return exist1 || exist2;
+	return exist1 > exist2 ? exist1 : exist2;
+}
+
+function mark_as_probably(result: Map<Element, NodeExist>) {
+	for (const key of result.keys()) {
+		result.set(key, NodeExist.Probably);
+	}
+}
+
+function loop_child(children: INode[], adjacent_only: boolean) {
+	const result: Map<Element, NodeExist> = new Map();
+	for (let i = children.length - 1; i >= 0; i--) {
+		const child = children[i];
+		if (child.type === 'Element') {
+			result.set(child, NodeExist.Definitely);
+			if (adjacent_only) {
+				break;
+			}
+		} else if (child.type === 'EachBlock' || child.type === 'IfBlock' || child.type === 'AwaitBlock') {
+			const child_result = get_possible_last_child(child, adjacent_only);
+			add_to_map(child_result, result);
+			if (adjacent_only && has_definite_elements(child_result)) {
+				break;
+			}
+		}
+	}
+	return result;
+}
+
+class Block {
+	host: boolean;
+	root: boolean;
+	combinator: CssNode;
+	selectors: CssNode[];
+	start: number;
+	end: number;
+	should_encapsulate: boolean;
+
+	constructor(combinator: CssNode) {
+		this.combinator = combinator;
+		this.host = false;
+		this.root = false;
+		this.selectors = [];
+
+		this.start = null;
+		this.end = null;
+
+		this.should_encapsulate = false;
+	}
+
+	add(selector: CssNode) {
+		if (this.selectors.length === 0) {
+			this.start = selector.start;
+			this.host = selector.type === 'PseudoClassSelector' && selector.name === 'host';
+		}
+		this.root = this.root || selector.type === 'PseudoClassSelector' && selector.name === 'root';
+
+		this.selectors.push(selector);
+		this.end = selector.end;
+	}
+
+	get global() {
+		return (
+			this.selectors.length >= 1 &&
+			this.selectors[0].type === 'PseudoClassSelector' &&
+			this.selectors[0].name === 'global' &&
+			this.selectors.every((selector) => selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector')
+		);
+	}
+}
+
+function group_selectors(selector: CssNode) {
+	let block: Block = new Block(null);
+
+	const blocks = [block];
+
+	selector.children.forEach((child: CssNode) => {
+		if (child.type === 'WhiteSpace' || child.type === 'Combinator') {
+			block = new Block(child);
+			blocks.push(block);
+		} else {
+			block.add(child);
+		}
+	});
+
+	return blocks;
+}
diff --git a/src/compiler/compile/css/Stylesheet.ts b/src/compiler/compile/css/Stylesheet.ts
new file mode 100644
index 0000000000..0a3098db6d
--- /dev/null
+++ b/src/compiler/compile/css/Stylesheet.ts
@@ -0,0 +1,465 @@
+import MagicString from 'magic-string';
+import { walk } from 'estree-walker';
+import Selector from './Selector';
+import Element from '../nodes/Element';
+import { Ast, CssHashGetter } from '../../interfaces';
+import Component from '../Component';
+import { CssNode } from './interfaces';
+import hash from '../utils/hash';
+import compiler_warnings from '../compiler_warnings';
+import { extract_ignores_above_position } from '../../utils/extract_svelte_ignore';
+import { push_array } from '../../utils/push_array';
+
+function remove_css_prefix(name: string): string {
+	return name.replace(/^-((webkit)|(moz)|(o)|(ms))-/, '');
+}
+
+const is_keyframes_node = (node: CssNode) =>
+	remove_css_prefix(node.name) === 'keyframes';
+
+const at_rule_has_declaration = ({ block }: CssNode): true =>
+	block &&
+	block.children &&
+	block.children.find((node: CssNode) => node.type === 'Declaration');
+
+function minify_declarations(
+	code: MagicString,
+	start: number,
+	declarations: Declaration[]
+): number {
+	let c = start;
+
+	declarations.forEach((declaration, i) => {
+		const separator = i > 0 ? ';' : '';
+		if ((declaration.node.start - c) > separator.length) {
+			code.overwrite(c, declaration.node.start, separator);
+		}
+		declaration.minify(code);
+		c = declaration.node.end;
+	});
+
+	return c;
+}
+
+class Rule {
+	selectors: Selector[];
+	declarations: Declaration[];
+	node: CssNode;
+	parent: Atrule;
+
+	constructor(node: CssNode, stylesheet, parent?: Atrule) {
+		this.node = node;
+		this.parent = parent;
+		this.selectors = node.prelude.children.map((node: CssNode) => new Selector(node, stylesheet));
+		this.declarations = node.block.children.map((node: CssNode) => new Declaration(node));
+	}
+
+	apply(node: Element) {
+		this.selectors.forEach(selector => selector.apply(node)); // TODO move the logic in here?
+	}
+
+	is_used(dev: boolean) {
+		if (this.parent && this.parent.node.type === 'Atrule' && is_keyframes_node(this.parent.node)) return true;
+		if (this.declarations.length === 0) return dev;
+		return this.selectors.some(s => s.used);
+	}
+
+	minify(code: MagicString, _dev: boolean) {
+		let c = this.node.start;
+		let started = false;
+
+		this.selectors.forEach((selector) => {
+			if (selector.used) {
+				const separator = started ? ',' : '';
+				if ((selector.node.start - c) > separator.length) {
+					code.overwrite(c, selector.node.start, separator);
+				}
+
+				selector.minify(code);
+				c = selector.node.end;
+
+				started = true;
+			}
+		});
+
+		code.remove(c, this.node.block.start);
+
+		c = this.node.block.start + 1;
+		c = minify_declarations(code, c, this.declarations);
+
+		code.remove(c, this.node.block.end - 1);
+	}
+
+	transform(code: MagicString, id: string, keyframes: Map<string, string>, max_amount_class_specificity_increased: number) {
+		if (this.parent && this.parent.node.type === 'Atrule' && is_keyframes_node(this.parent.node)) return true;
+
+		const attr = `.${id}`;
+
+		this.selectors.forEach(selector => selector.transform(code, attr, max_amount_class_specificity_increased));
+		this.declarations.forEach(declaration => declaration.transform(code, keyframes));
+	}
+
+	validate(component: Component) {
+		this.selectors.forEach(selector => {
+			selector.validate(component);
+		});
+	}
+
+	warn_on_unused_selector(handler: (selector: Selector) => void) {
+		this.selectors.forEach(selector => {
+			if (!selector.used) handler(selector);
+		});
+	}
+
+	get_max_amount_class_specificity_increased() {
+		return Math.max(...this.selectors.map(selector => selector.get_amount_class_specificity_increased()));
+	}
+}
+
+class Declaration {
+	node: CssNode;
+
+	constructor(node: CssNode) {
+		this.node = node;
+	}
+
+	transform(code: MagicString, keyframes: Map<string, string>) {
+		const property = this.node.property && remove_css_prefix(this.node.property.toLowerCase());
+		if (property === 'animation' || property === 'animation-name') {
+			this.node.value.children.forEach((block: CssNode) => {
+				if (block.type === 'Identifier') {
+					const name = block.name;
+					if (keyframes.has(name)) {
+						code.overwrite(block.start, block.end, keyframes.get(name));
+					}
+				}
+			});
+		}
+	}
+
+	minify(code: MagicString) {
+		if (!this.node.property) return; // @apply, and possibly other weird cases?
+
+		const c = this.node.start + this.node.property.length;
+		const first = this.node.value.children
+			? this.node.value.children[0]
+			: this.node.value;
+
+		// Don't minify whitespace in custom properties, since some browsers (Chromium < 99)
+		// treat --foo: ; and --foo:; differently
+		if (first.type === 'Raw' && /^\s+$/.test(first.value)) return;
+
+		let start = first.start;
+		while (/\s/.test(code.original[start])) start += 1;
+
+		if (start - c > 1) {
+			code.overwrite(c, start, ':');
+		}
+	}
+}
+
+class Atrule {
+	node: CssNode;
+	children: Array<Atrule | Rule>;
+	declarations: Declaration[];
+
+	constructor(node: CssNode) {
+		this.node = node;
+		this.children = [];
+		this.declarations = [];
+	}
+
+	apply(node: Element) {
+		if (this.node.name === 'media' || this.node.name === 'supports') {
+			this.children.forEach(child => {
+				child.apply(node);
+			});
+		} else if (is_keyframes_node(this.node)) {
+			this.children.forEach((rule: Rule) => {
+				rule.selectors.forEach(selector => {
+					selector.used = true;
+				});
+			});
+		}
+	}
+
+	is_used(_dev: boolean) {
+		return true; // TODO
+	}
+
+	minify(code: MagicString, dev: boolean) {
+		if (this.node.name === 'media') {
+			const expression_char = code.original[this.node.prelude.start];
+			let c = this.node.start + (expression_char === '(' ? 6 : 7);
+			if (this.node.prelude.start > c) code.remove(c, this.node.prelude.start);
+
+			this.node.prelude.children.forEach((query: CssNode) => {
+				// TODO minify queries
+				c = query.end;
+			});
+
+			code.remove(c, this.node.block.start);
+		} else if (this.node.name === 'supports') {
+			let c = this.node.start + 9;
+			if (this.node.prelude.start - c > 1) code.overwrite(c, this.node.prelude.start, ' ');
+			this.node.prelude.children.forEach((query: CssNode) => {
+				// TODO minify queries
+				c = query.end;
+			});
+			code.remove(c, this.node.block.start);
+		} else {
+			let c = this.node.start + this.node.name.length + 1;
+			if (this.node.prelude) {
+				if (this.node.prelude.start - c > 1) code.overwrite(c, this.node.prelude.start, ' ');
+				c = this.node.prelude.end;
+			}
+			if (this.node.block && this.node.block.start - c > 0) {
+				code.remove(c, this.node.block.start);
+			}
+		}
+
+		// TODO other atrules
+
+		if (this.node.block) {
+			let c = this.node.block.start + 1;
+			if (this.declarations.length) {
+				c = minify_declarations(code, c, this.declarations);
+				// if the atrule has children, leave the last declaration semicolon alone
+				if (this.children.length) c++;
+			}
+
+			this.children.forEach(child => {
+				if (child.is_used(dev)) {
+					code.remove(c, child.node.start);
+					child.minify(code, dev);
+					c = child.node.end;
+				}
+			});
+
+			code.remove(c, this.node.block.end - 1);
+		}
+	}
+
+	transform(code: MagicString, id: string, keyframes: Map<string, string>, max_amount_class_specificity_increased: number) {
+		if (is_keyframes_node(this.node)) {
+			this.node.prelude.children.forEach(({ type, name, start, end }: CssNode) => {
+				if (type === 'Identifier') {
+					if (name.startsWith('-global-')) {
+						code.remove(start, start + 8);
+						this.children.forEach((rule: Rule) => {
+							rule.selectors.forEach(selector => {
+								selector.used = true;
+							});
+						});
+					} else {
+						code.overwrite(start, end, keyframes.get(name));
+					}
+				}
+			});
+		}
+
+		this.children.forEach(child => {
+			child.transform(code, id, keyframes, max_amount_class_specificity_increased);
+		});
+	}
+
+	validate(component: Component) {
+		this.children.forEach(child => {
+			child.validate(component);
+		});
+	}
+
+	warn_on_unused_selector(handler: (selector: Selector) => void) {
+		if (this.node.name !== 'media') return;
+
+		this.children.forEach(child => {
+			child.warn_on_unused_selector(handler);
+		});
+	}
+
+	get_max_amount_class_specificity_increased() {
+		return Math.max(...this.children.map(rule => rule.get_max_amount_class_specificity_increased()));
+	}
+}
+
+const get_default_css_hash: CssHashGetter = ({ css, hash }) => {
+	return `svelte-${hash(css)}`;
+};
+
+export default class Stylesheet {
+	source: string;
+	ast: Ast;
+	filename: string;
+	dev: boolean;
+
+	has_styles: boolean;
+	id: string;
+
+	children: Array<Rule | Atrule> = [];
+	keyframes: Map<string, string> = new Map();
+
+	nodes_with_css_class: Set<CssNode> = new Set();
+
+	constructor({
+		source,
+		ast,
+		component_name,
+		filename,
+		dev,
+		get_css_hash = get_default_css_hash
+	}: {
+		source: string;
+		ast: Ast;
+		filename: string | undefined;
+		component_name: string | undefined;
+		dev: boolean;
+		get_css_hash: CssHashGetter;
+	}) {
+		this.source = source;
+		this.ast = ast;
+		this.filename = filename;
+		this.dev = dev;
+
+		if (ast.css && ast.css.children.length) {
+			this.id = get_css_hash({
+				filename,
+				name: component_name,
+				css: ast.css.content.styles,
+				hash
+			});
+
+			this.has_styles = true;
+
+			const stack: Atrule[] = [];
+			let depth = 0;
+			let current_atrule: Atrule = null;
+
+			walk(ast.css as any, {
+				enter: (node: any) => {
+					if (node.type === 'Atrule') {
+						const atrule = new Atrule(node);
+						stack.push(atrule);
+
+						if (current_atrule) {
+							current_atrule.children.push(atrule);
+						} else if (depth <= 1) {
+							this.children.push(atrule);
+						}
+
+						if (is_keyframes_node(node)) {
+							node.prelude.children.forEach((expression: CssNode) => {
+								if (expression.type === 'Identifier' && !expression.name.startsWith('-global-')) {
+									this.keyframes.set(expression.name, `${this.id}-${expression.name}`);
+								}
+							});
+						} else if (at_rule_has_declaration(node)) {
+							const at_rule_declarations = node.block.children
+								.filter(node => node.type === 'Declaration')
+								.map(node => new Declaration(node));
+							push_array(atrule.declarations, at_rule_declarations);
+						}
+
+						current_atrule = atrule;
+					}
+
+					if (node.type === 'Rule') {
+						const rule = new Rule(node, this, current_atrule);
+
+						if (current_atrule) {
+							current_atrule.children.push(rule);
+						} else if (depth <= 1) {
+							this.children.push(rule);
+						}
+					}
+
+					depth += 1;
+				},
+
+				leave: (node: any) => {
+					if (node.type === 'Atrule') {
+						stack.pop();
+						current_atrule = stack[stack.length - 1];
+					}
+
+					depth -= 1;
+				}
+			});
+		} else {
+			this.has_styles = false;
+		}
+	}
+
+	apply(node: Element) {
+		if (!this.has_styles) return;
+
+		for (let i = 0; i < this.children.length; i += 1) {
+			const child = this.children[i];
+			child.apply(node);
+		}
+	}
+
+	reify() {
+		this.nodes_with_css_class.forEach((node: Element) => {
+			node.add_css_class();
+		});
+	}
+
+	render(file: string, should_transform_selectors: boolean) {
+		if (!this.has_styles) {
+			return { code: null, map: null };
+		}
+
+		const code = new MagicString(this.source);
+
+		walk(this.ast.css as any, {
+			enter: (node: any) => {
+				code.addSourcemapLocation(node.start);
+				code.addSourcemapLocation(node.end);
+			}
+		});
+
+		if (should_transform_selectors) {
+			const max = Math.max(...this.children.map(rule => rule.get_max_amount_class_specificity_increased()));
+			this.children.forEach((child: (Atrule | Rule)) => {
+				child.transform(code, this.id, this.keyframes, max);
+			});
+		}
+
+		let c = 0;
+		this.children.forEach(child => {
+			if (child.is_used(this.dev)) {
+				code.remove(c, child.node.start);
+				child.minify(code, this.dev);
+				c = child.node.end;
+			}
+		});
+
+		code.remove(c, this.source.length);
+
+		return {
+			code: code.toString(),
+			map: code.generateMap({
+				includeContent: true,
+				source: this.filename,
+				file
+			})
+		};
+	}
+
+	validate(component: Component) {
+		this.children.forEach(child => {
+			child.validate(component);
+		});
+	}
+
+	warn_on_unused_selectors(component: Component) {
+		const ignores = !this.ast.css ? [] : extract_ignores_above_position(this.ast.css.start, this.ast.html.children);
+		component.push_ignores(ignores);
+		this.children.forEach(child => {
+			child.warn_on_unused_selector((selector: Selector) => {
+				component.warn(selector.node, compiler_warnings.css_unused_selector(this.source.slice(selector.node.start, selector.node.end)));
+			});
+		});
+		component.pop_ignores();
+	}
+}
diff --git a/src/compiler/compile/css/gather_possible_values.ts b/src/compiler/compile/css/gather_possible_values.ts
new file mode 100644
index 0000000000..eff39bc720
--- /dev/null
+++ b/src/compiler/compile/css/gather_possible_values.ts
@@ -0,0 +1,14 @@
+import { Node } from 'estree';
+
+export const UNKNOWN = {};
+
+export function gather_possible_values(node: Node, set: Set<string | {}>) {
+	if (node.type === 'Literal') {
+		set.add(node.value);
+	} else if (node.type === 'ConditionalExpression') {
+		gather_possible_values(node.consequent, set);
+		gather_possible_values(node.alternate, set);
+	} else {
+		set.add(UNKNOWN);
+	}
+}
diff --git a/src/compiler/compile/css/interfaces.ts b/src/compiler/compile/css/interfaces.ts
new file mode 100644
index 0000000000..b732186de4
--- /dev/null
+++ b/src/compiler/compile/css/interfaces.ts
@@ -0,0 +1,6 @@
+export interface CssNode {
+	type: string;
+	start: number;
+	end: number;
+	[prop_name: string]: any;
+}
diff --git a/src/compiler/compile/index.ts b/src/compiler/compile/index.ts
new file mode 100644
index 0000000000..afe9c56cf4
--- /dev/null
+++ b/src/compiler/compile/index.ts
@@ -0,0 +1,115 @@
+import Stats from '../Stats';
+import parse from '../parse/index';
+import render_dom from './render_dom/index';
+import render_ssr from './render_ssr/index';
+import { CompileOptions, Warning } from '../interfaces';
+import Component from './Component';
+import fuzzymatch from '../utils/fuzzymatch';
+import get_name_from_filename from './utils/get_name_from_filename';
+import { valid_namespaces } from '../utils/namespaces';
+
+const valid_options = [
+	'format',
+	'name',
+	'filename',
+	'sourcemap',
+	'enableSourcemap',
+	'generate',
+	'errorMode',
+	'varsReport',
+	'outputFilename',
+	'cssOutputFilename',
+	'sveltePath',
+	'dev',
+	'accessors',
+	'immutable',
+	'hydratable',
+	'legacy',
+	'customElement',
+	'namespace',
+	'tag',
+	'css',
+	'loopGuardTimeout',
+	'preserveComments',
+	'preserveWhitespace',
+	'cssHash'
+];
+
+function validate_options(options: CompileOptions, warnings: Warning[]) {
+	const { name, filename, loopGuardTimeout, dev, namespace } = options;
+
+	Object.keys(options).forEach(key => {
+		if (!valid_options.includes(key)) {
+			const match = fuzzymatch(key, valid_options);
+			let message = `Unrecognized option '${key}'`;
+			if (match) message += ` (did you mean '${match}'?)`;
+
+			throw new Error(message);
+		}
+	});
+
+	if (name && !/^[a-zA-Z_$][a-zA-Z_$0-9]*$/.test(name)) {
+		throw new Error(`options.name must be a valid identifier (got '${name}')`);
+	}
+
+	if (name && /^[a-z]/.test(name)) {
+		const message = 'options.name should be capitalised';
+		warnings.push({
+			code: 'options-lowercase-name',
+			message,
+			filename,
+			toString: () => message
+		});
+	}
+
+	if (loopGuardTimeout && !dev) {
+		const message = 'options.loopGuardTimeout is for options.dev = true only';
+		warnings.push({
+			code: 'options-loop-guard-timeout',
+			message,
+			filename,
+			toString: () => message
+		});
+	}
+
+	if (namespace && valid_namespaces.indexOf(namespace) === -1) {
+		const match = fuzzymatch(namespace, valid_namespaces);
+		if (match) {
+			throw new Error(`Invalid namespace '${namespace}' (did you mean '${match}'?)`);
+		} else {
+			throw new Error(`Invalid namespace '${namespace}'`);
+		}
+	}
+}
+
+export default function compile(source: string, options: CompileOptions = {}) {
+	options = Object.assign({ generate: 'dom', dev: false, enableSourcemap: true }, options);
+
+	const stats = new Stats();
+	const warnings = [];
+
+	validate_options(options, warnings);
+
+	stats.start('parse');
+	const ast = parse(source, options);
+	stats.stop('parse');
+
+	stats.start('create component');
+	const component = new Component(
+		ast,
+		source,
+		options.name || get_name_from_filename(options.filename) || 'Component',
+		options,
+		stats,
+		warnings
+	);
+	stats.stop('create component');
+
+	const result = options.generate === false
+		? null
+		: options.generate === 'ssr'
+			? render_ssr(component, options)
+			: render_dom(component, options);
+
+	return component.generate(result);
+}
diff --git a/src/compiler/compile/nodes/Action.ts b/src/compiler/compile/nodes/Action.ts
new file mode 100644
index 0000000000..f0d92f8537
--- /dev/null
+++ b/src/compiler/compile/nodes/Action.ts
@@ -0,0 +1,31 @@
+import Node from './shared/Node';
+import Expression from './shared/Expression';
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
+import { Directive } from '../../interfaces';
+
+export default class Action extends Node {
+	type: 'Action';
+	name: string;
+	expression: Expression;
+	uses_context: boolean;
+	template_scope: TemplateScope;
+
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: Directive) {
+		super(component, parent, scope, info);
+
+		const object = info.name.split('.')[0];
+		component.warn_if_undefined(object, info, scope);
+
+		this.name = info.name;
+		component.add_reference(this as any, object);
+
+		this.expression = info.expression
+			? new Expression(component, this, scope, info.expression)
+			: null;
+
+		this.template_scope = scope;
+
+		this.uses_context = this.expression && this.expression.uses_context;
+	}
+}
diff --git a/src/compiler/compile/nodes/Animation.ts b/src/compiler/compile/nodes/Animation.ts
new file mode 100644
index 0000000000..c05a2d8669
--- /dev/null
+++ b/src/compiler/compile/nodes/Animation.ts
@@ -0,0 +1,46 @@
+import Node from './shared/Node';
+import Expression from './shared/Expression';
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
+import { TemplateNode } from '../../interfaces';
+import Element from './Element';
+import EachBlock from './EachBlock';
+import compiler_errors from '../compiler_errors';
+
+export default class Animation extends Node {
+	type: 'Animation';
+	name: string;
+	expression: Expression;
+
+	constructor(component: Component, parent: Element, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+
+		component.warn_if_undefined(info.name, info, scope);
+
+		this.name = info.name;
+		component.add_reference(this as any, info.name.split('.')[0]);
+
+		if (parent.animation) {
+			component.error(this, compiler_errors.duplicate_animation);
+			return;
+		}
+
+		const block = parent.parent;
+		if (!block || block.type !== 'EachBlock') {
+			// TODO can we relax the 'immediate child' rule?
+			component.error(this, compiler_errors.invalid_animation_immediate);
+			return;
+		}
+
+		if (!block.key) {
+			component.error(this, compiler_errors.invalid_animation_key);
+			return;
+		}
+
+		(block as EachBlock).has_animation = true;
+
+		this.expression = info.expression
+			? new Expression(component, this, scope, info.expression, true)
+			: null;
+	}
+}
diff --git a/src/compiler/compile/nodes/Attribute.ts b/src/compiler/compile/nodes/Attribute.ts
new file mode 100644
index 0000000000..ebed483288
--- /dev/null
+++ b/src/compiler/compile/nodes/Attribute.ts
@@ -0,0 +1,117 @@
+import { string_literal } from '../utils/stringify';
+import add_to_set from '../utils/add_to_set';
+import Component from '../Component';
+import Node from './shared/Node';
+import Element from './Element';
+import Text from './Text';
+import Expression from './shared/Expression';
+import TemplateScope from './shared/TemplateScope';
+import { x } from 'code-red';
+import { TemplateNode } from '../../interfaces';
+
+export default class Attribute extends Node {
+	type: 'Attribute' | 'Spread';
+	start: number;
+	end: number;
+	scope: TemplateScope;
+
+	component: Component;
+	parent: Element;
+	name: string;
+	is_spread: boolean;
+	is_true: boolean;
+	is_static: boolean;
+	expression?: Expression;
+	chunks: Array<Text | Expression>;
+	dependencies: Set<string>;
+
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+		this.scope = scope;
+
+		if (info.type === 'Spread') {
+			this.name = null;
+			this.is_spread = true;
+			this.is_true = false;
+
+			this.expression = new Expression(component, this, scope, info.expression);
+			this.dependencies = this.expression.dependencies;
+			this.chunks = null;
+
+			this.is_static = false;
+		} else {
+			this.name = info.name;
+			this.is_true = info.value === true;
+			this.is_static = true;
+
+			this.dependencies = new Set();
+
+			this.chunks = this.is_true
+				? []
+				: info.value.map(node => {
+					if (node.type === 'Text') return node;
+
+					this.is_static = false;
+
+					const expression = new Expression(component, this, scope, node.expression);
+
+					add_to_set(this.dependencies, expression.dependencies);
+					return expression;
+				});
+		}
+	}
+
+	get_dependencies() {
+		if (this.is_spread) return this.expression.dynamic_dependencies();
+
+		const dependencies: Set<string> = new Set();
+		this.chunks.forEach(chunk => {
+			if (chunk.type === 'Expression') {
+				add_to_set(dependencies, chunk.dynamic_dependencies());
+			}
+		});
+
+		return Array.from(dependencies);
+	}
+
+	get_value(block) {
+		if (this.is_true) return x`true`;
+		if (this.chunks.length === 0) return x`""`;
+
+		if (this.chunks.length === 1) {
+			return this.chunks[0].type === 'Text'
+				? string_literal((this.chunks[0] as Text).data)
+				: (this.chunks[0] as Expression).manipulate(block);
+		}
+
+		let expression = this.chunks
+			.map(chunk => chunk.type === 'Text' ? string_literal(chunk.data) : chunk.manipulate(block))
+			.reduce((lhs, rhs) => x`${lhs} + ${rhs}`);
+
+		if (this.chunks[0].type !== 'Text') {
+			expression = x`"" + ${expression}`;
+		}
+
+		return expression;
+	}
+
+	get_static_value() {
+		if (!this.is_static) return null;
+
+		return this.is_true
+			? true
+			: this.chunks[0]
+				// method should be called only when `is_static = true`
+				? (this.chunks[0] as Text).data
+				: '';
+	}
+
+	should_cache() {
+		return this.is_static
+			? false
+			: this.chunks.length === 1
+				// @ts-ignore todo: probably error
+				? this.chunks[0].node.type !== 'Identifier' || this.scope.names.has(this.chunks[0].node.name)
+				: true;
+	}
+}
diff --git a/src/compiler/compile/nodes/AwaitBlock.ts b/src/compiler/compile/nodes/AwaitBlock.ts
new file mode 100644
index 0000000000..735fdbfff3
--- /dev/null
+++ b/src/compiler/compile/nodes/AwaitBlock.ts
@@ -0,0 +1,48 @@
+import Node from './shared/Node';
+import PendingBlock from './PendingBlock';
+import ThenBlock from './ThenBlock';
+import CatchBlock from './CatchBlock';
+import Expression from './shared/Expression';
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
+import { TemplateNode } from '../../interfaces';
+import { Context, unpack_destructuring } from './shared/Context';
+import { Node as ESTreeNode } from 'estree';
+
+export default class AwaitBlock extends Node {
+	type: 'AwaitBlock';
+	expression: Expression;
+
+	then_contexts: Context[];
+	catch_contexts: Context[];
+
+	then_node: ESTreeNode | null;
+	catch_node: ESTreeNode | null;
+
+	pending: PendingBlock;
+	then: ThenBlock;
+	catch: CatchBlock;
+
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+
+		this.expression = new Expression(component, this, scope, info.expression);
+
+		this.then_node = info.value;
+		this.catch_node = info.error;
+
+		if (this.then_node) {
+			this.then_contexts = [];
+			unpack_destructuring({ contexts: this.then_contexts, node: info.value, scope, component });
+		}
+
+		if (this.catch_node) {
+			this.catch_contexts = [];
+			unpack_destructuring({ contexts: this.catch_contexts, node: info.error, scope, component });
+		}
+
+		this.pending = new PendingBlock(component, this, scope, info.pending);
+		this.then = new ThenBlock(component, this, scope, info.then);
+		this.catch = new CatchBlock(component, this, scope, info.catch);
+	}
+}
diff --git a/src/compiler/compile/nodes/Binding.ts b/src/compiler/compile/nodes/Binding.ts
new file mode 100644
index 0000000000..39f6fa374e
--- /dev/null
+++ b/src/compiler/compile/nodes/Binding.ts
@@ -0,0 +1,102 @@
+import Node from './shared/Node';
+import get_object from '../utils/get_object';
+import Expression from './shared/Expression';
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
+import {dimensions} from '../../utils/patterns';
+import { Node as ESTreeNode } from 'estree';
+import { TemplateNode } from '../../interfaces';
+import Element from './Element';
+import InlineComponent from './InlineComponent';
+import Window from './Window';
+import { clone } from '../../utils/clone';
+import compiler_errors from '../compiler_errors';
+
+// TODO this should live in a specific binding
+const read_only_media_attributes = new Set([
+	'duration',
+	'buffered',
+	'seekable',
+	'played',
+	'seeking',
+	'ended',
+	'videoHeight',
+	'videoWidth'
+]);
+
+export default class Binding extends Node {
+	type: 'Binding';
+	name: string;
+	expression: Expression;
+	raw_expression: ESTreeNode; // TODO exists only for bind:this — is there a more elegant solution?
+	is_contextual: boolean;
+	is_readonly: boolean;
+
+	constructor(component: Component, parent: Element | InlineComponent | Window, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+
+		if (info.expression.type !== 'Identifier' && info.expression.type !== 'MemberExpression') {
+			component.error(info, compiler_errors.invalid_directive_value);
+			return;
+		}
+
+		this.name = info.name;
+		this.expression = new Expression(component, this, scope, info.expression);
+		this.raw_expression = clone(info.expression);
+
+		const { name } = get_object(this.expression.node);
+
+		this.is_contextual = Array.from(this.expression.references).some(name => scope.names.has(name));
+
+		// make sure we track this as a mutable ref
+		if (scope.is_let(name)) {
+			component.error(this, compiler_errors.invalid_binding_let);
+			return;
+		} else if (scope.names.has(name)) {
+			if (scope.is_await(name)) {
+				component.error(this, compiler_errors.invalid_binding_await);
+				return;
+			}
+			if (scope.is_const(name)) {
+				component.error(this, compiler_errors.invalid_binding_const);
+			}
+
+			scope.dependencies_for_name.get(name).forEach(name => {
+				const variable = component.var_lookup.get(name);
+				if (variable) {
+					variable.mutated = true;
+				}
+			});
+		} else {
+			const variable = component.var_lookup.get(name);
+
+			if (!variable || variable.global) {
+				component.error(this.expression.node as any, compiler_errors.binding_undeclared(name));
+				return;
+			}
+
+			variable[this.expression.node.type === 'MemberExpression' ? 'mutated' : 'reassigned'] = true;
+
+			if (info.expression.type === 'Identifier' && !variable.writable) {
+				component.error(this.expression.node as any, compiler_errors.invalid_binding_writibale);
+				return;
+			}
+		}
+
+		const type = parent.get_static_attribute_value('type');
+
+		this.is_readonly =
+			dimensions.test(this.name) ||
+			(isElement(parent) &&
+				((parent.is_media_node() && read_only_media_attributes.has(this.name)) ||
+					(parent.name === 'input' && type === 'file')) /* TODO others? */);
+	}
+
+	is_readonly_media_attribute() {
+		return read_only_media_attributes.has(this.name);
+	}
+}
+
+function isElement(node: Node): node is Element {
+	return !!(node as any).is_media_node;
+}
diff --git a/src/compiler/compile/nodes/Body.ts b/src/compiler/compile/nodes/Body.ts
new file mode 100644
index 0000000000..fc350ca3cd
--- /dev/null
+++ b/src/compiler/compile/nodes/Body.ts
@@ -0,0 +1,26 @@
+import Node from './shared/Node';
+import EventHandler from './EventHandler';
+import Action from './Action';
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
+import { Element } from '../../interfaces';
+
+export default class Body extends Node {
+	type: 'Body';
+	handlers: EventHandler[] = [];
+	actions: Action[] = [];
+
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: Element) {
+		super(component, parent, scope, info);
+
+		info.attributes.forEach((node) => {
+			if (node.type === 'EventHandler') {
+				this.handlers.push(new EventHandler(component, this, scope, node));
+			} else if (node.type === 'Action') {
+				this.actions.push(new Action(component, this, scope, node));
+			} else {
+				// TODO there shouldn't be anything else here...
+			}
+		});
+	}
+}
diff --git a/src/compiler/compile/nodes/CatchBlock.ts b/src/compiler/compile/nodes/CatchBlock.ts
new file mode 100644
index 0000000000..ba6a4b77a6
--- /dev/null
+++ b/src/compiler/compile/nodes/CatchBlock.ts
@@ -0,0 +1,30 @@
+import TemplateScope from './shared/TemplateScope';
+import AbstractBlock from './shared/AbstractBlock';
+import AwaitBlock from './AwaitBlock';
+import Component from '../Component';
+import { TemplateNode } from '../../interfaces';
+import get_const_tags from './shared/get_const_tags';
+import ConstTag from './ConstTag';
+
+export default class CatchBlock extends AbstractBlock {
+	type: 'CatchBlock';
+	scope: TemplateScope;
+	const_tags: ConstTag[];
+
+	constructor(component: Component, parent: AwaitBlock, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+
+		this.scope = scope.child();
+		if (parent.catch_node) {
+			parent.catch_contexts.forEach(context => {
+				this.scope.add(context.key.name, parent.expression.dependencies, this);
+			});
+		}
+
+		([this.const_tags, this.children] = get_const_tags(info.children, component, this, parent));
+
+		if (!info.skip) {
+			this.warn_if_empty_block();
+		}
+	}
+}
diff --git a/src/compiler/compile/nodes/Class.ts b/src/compiler/compile/nodes/Class.ts
new file mode 100644
index 0000000000..d9adbadc54
--- /dev/null
+++ b/src/compiler/compile/nodes/Class.ts
@@ -0,0 +1,21 @@
+import Node from './shared/Node';
+import Expression from './shared/Expression';
+import { TemplateNode } from '../../interfaces';
+import TemplateScope from './shared/TemplateScope';
+import Component from '../Component';
+
+export default class Class extends Node {
+	type: 'Class';
+	name: string;
+	expression: Expression;
+
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+
+		this.name = info.name;
+
+		this.expression = info.expression
+			? new Expression(component, this, scope, info.expression)
+			: null;
+	}
+}
diff --git a/src/compiler/compile/nodes/Comment.ts b/src/compiler/compile/nodes/Comment.ts
new file mode 100644
index 0000000000..79580d0563
--- /dev/null
+++ b/src/compiler/compile/nodes/Comment.ts
@@ -0,0 +1,16 @@
+import { TemplateNode } from '../../interfaces';
+import Component from '../Component';
+import Node from './shared/Node';
+import TemplateScope from './shared/TemplateScope';
+
+export default class Comment extends Node {
+	type: 'Comment';
+	data: string;
+	ignores: string[];
+
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+		this.data = info.data;
+		this.ignores = info.ignores;
+	}
+}
diff --git a/src/compiler/compile/nodes/ConstTag.ts b/src/compiler/compile/nodes/ConstTag.ts
new file mode 100644
index 0000000000..87a9039008
--- /dev/null
+++ b/src/compiler/compile/nodes/ConstTag.ts
@@ -0,0 +1,72 @@
+import Node from './shared/Node';
+import Expression from './shared/Expression';
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
+import { Context, unpack_destructuring } from './shared/Context';
+import { ConstTag as ConstTagType } from '../../interfaces';
+import { INodeAllowConstTag } from './interfaces';
+import { walk } from 'estree-walker';
+import { extract_identifiers } from 'periscopic';
+import is_reference, { NodeWithPropertyDefinition } from 'is-reference';
+import get_object from '../utils/get_object';
+import compiler_errors from '../compiler_errors';
+
+const allowed_parents = new Set(['EachBlock', 'CatchBlock', 'ThenBlock', 'InlineComponent', 'SlotTemplate', 'IfBlock', 'ElseBlock']);
+
+export default class ConstTag extends Node {
+	type: 'ConstTag';
+	expression: Expression;
+	contexts: Context[] = [];
+	node: ConstTagType;
+	scope: TemplateScope;
+
+	assignees: Set<string> = new Set();
+  dependencies: Set<string> = new Set();
+
+	constructor(component: Component, parent: INodeAllowConstTag, scope: TemplateScope, info: ConstTagType) {
+		super(component, parent, scope, info);
+
+		if (!allowed_parents.has(parent.type)) {
+			component.error(info, compiler_errors.invalid_const_placement);
+		}
+		this.node = info;
+		this.scope = scope;
+
+		const { assignees, dependencies } = this;
+
+		extract_identifiers(info.expression.left).forEach(({ name }) => {
+      assignees.add(name);
+			const owner = this.scope.get_owner(name);
+			if (owner === parent) {
+				component.error(info, compiler_errors.invalid_const_declaration(name));
+			}
+    });
+
+    walk(info.expression.right, {
+      enter(node, parent) {
+        if (is_reference(node as NodeWithPropertyDefinition, parent as NodeWithPropertyDefinition)) {
+          const identifier = get_object(node as any);
+          const { name } = identifier;
+          dependencies.add(name);
+        }
+      }
+    });
+	}
+
+	parse_expression() {
+		unpack_destructuring({
+			contexts: this.contexts,
+			node: this.node.expression.left,
+			scope: this.scope,
+			component: this.component
+		});
+		this.expression = new Expression(this.component, this, this.scope, this.node.expression.right);
+		this.contexts.forEach(context => {
+			const owner = this.scope.get_owner(context.key.name);
+			if (owner && owner.type === 'ConstTag' && owner.parent === this.parent) {
+				this.component.error(this.node, compiler_errors.invalid_const_declaration(context.key.name));
+			}
+			this.scope.add(context.key.name, this.expression.dependencies, this);
+		});
+	}
+}
diff --git a/src/compiler/compile/nodes/DebugTag.ts b/src/compiler/compile/nodes/DebugTag.ts
new file mode 100644
index 0000000000..88e8dd90e6
--- /dev/null
+++ b/src/compiler/compile/nodes/DebugTag.ts
@@ -0,0 +1,20 @@
+import Node from './shared/Node';
+import Expression from './shared/Expression';
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
+import { TemplateNode } from '../../interfaces';
+import { INode } from './interfaces';
+import { Node as EsTreeNode } from 'estree';
+
+export default class DebugTag extends Node {
+	type: 'DebugTag';
+	expressions: Expression[];
+
+	constructor(component: Component, parent: INode, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+
+		this.expressions = info.identifiers.map((node: EsTreeNode) => {
+			return new Expression(component, parent, scope, node);
+		});
+	}
+}
diff --git a/src/compiler/compile/nodes/EachBlock.ts b/src/compiler/compile/nodes/EachBlock.ts
new file mode 100644
index 0000000000..bea6fb7910
--- /dev/null
+++ b/src/compiler/compile/nodes/EachBlock.ts
@@ -0,0 +1,88 @@
+import ElseBlock from './ElseBlock';
+import Expression from './shared/Expression';
+import TemplateScope from './shared/TemplateScope';
+import AbstractBlock from './shared/AbstractBlock';
+import Element from './Element';
+import ConstTag from './ConstTag';
+import { Context, unpack_destructuring } from './shared/Context';
+import { Node } from 'estree';
+import Component from '../Component';
+import { TemplateNode } from '../../interfaces';
+import compiler_errors from '../compiler_errors';
+import { INode } from './interfaces';
+import get_const_tags from './shared/get_const_tags';
+
+export default class EachBlock extends AbstractBlock {
+	type: 'EachBlock';
+
+	expression: Expression;
+	context_node: Node;
+
+	iterations: string;
+	index: string;
+	context: string;
+	key: Expression;
+	scope: TemplateScope;
+	contexts: Context[];
+	const_tags: ConstTag[];
+	has_animation: boolean;
+	has_binding = false;
+	has_index_binding = false;
+
+	else?: ElseBlock;
+
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+
+		this.expression = new Expression(component, this, scope, info.expression);
+		this.context = info.context.name || 'each'; // TODO this is used to facilitate binding; currently fails with destructuring
+		this.context_node = info.context;
+		this.index = info.index;
+
+		this.scope = scope.child();
+
+		this.contexts = [];
+		unpack_destructuring({ contexts: this.contexts, node: info.context, scope, component });
+
+		this.contexts.forEach(context => {
+			this.scope.add(context.key.name, this.expression.dependencies, this);
+		});
+
+		if (this.index) {
+			// index can only change if this is a keyed each block
+			const dependencies = info.key ? this.expression.dependencies : new Set([]);
+			this.scope.add(this.index, dependencies, this);
+		}
+
+		this.key = info.key
+			? new Expression(component, this, this.scope, info.key)
+			: null;
+
+		this.has_animation = false;
+
+		([this.const_tags, this.children] = get_const_tags(info.children, component, this, this));
+
+		if (this.has_animation) {
+			this.children = this.children.filter(child => !isEmptyNode(child) && !isCommentNode(child));
+
+			if (this.children.length !== 1) {
+				const child = this.children.find(child => !!(child as Element).animation);
+				component.error((child as Element).animation, compiler_errors.invalid_animation_sole);
+				return;
+			}
+		}
+
+		this.warn_if_empty_block();
+
+		this.else = info.else
+			? new ElseBlock(component, this, this.scope, info.else)
+			: null;
+	}
+}
+
+function isEmptyNode(node: INode) {
+	return node.type === 'Text' && node.data.trim() === '';
+}
+function isCommentNode(node: INode) {
+	return node.type === 'Comment';
+}
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
new file mode 100644
index 0000000000..735562d627
--- /dev/null
+++ b/src/compiler/compile/nodes/Element.ts
@@ -0,0 +1,909 @@
+import { is_void } from '../../../shared/utils/names';
+import Node from './shared/Node';
+import Attribute from './Attribute';
+import Binding from './Binding';
+import EventHandler from './EventHandler';
+import Transition from './Transition';
+import Animation from './Animation';
+import Action from './Action';
+import Class from './Class';
+import StyleDirective from './StyleDirective';
+import Text from './Text';
+import { namespaces } from '../../utils/namespaces';
+import map_children from './shared/map_children';
+import { dimensions, start_newline } from '../../utils/patterns';
+import fuzzymatch from '../../utils/fuzzymatch';
+import list from '../../utils/list';
+import Let from './Let';
+import TemplateScope from './shared/TemplateScope';
+import { INode } from './interfaces';
+import Component from '../Component';
+import Expression from './shared/Expression';
+import { string_literal } from '../utils/stringify';
+import { Literal } from 'estree';
+import compiler_warnings from '../compiler_warnings';
+import compiler_errors from '../compiler_errors';
+
+const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|svg|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/;
+
+const aria_attributes = 'activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby description details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext'.split(' ');
+const aria_attribute_set = new Set(aria_attributes);
+
+const aria_roles = 'alert alertdialog application article banner blockquote button caption cell checkbox code columnheader combobox complementary contentinfo definition deletion dialog directory document emphasis feed figure form generic graphics-document graphics-object graphics-symbol grid gridcell group heading img link list listbox listitem log main marquee math meter menu menubar menuitem menuitemcheckbox menuitemradio navigation none note option paragraph presentation progressbar radio radiogroup region row rowgroup rowheader scrollbar search searchbox separator slider spinbutton status strong subscript superscript switch tab table tablist tabpanel term textbox time timer toolbar tooltip tree treegrid treeitem'.split(' ');
+const aria_role_set = new Set(aria_roles);
+
+const a11y_required_attributes = {
+	a: ['href'],
+	area: ['alt', 'aria-label', 'aria-labelledby'],
+
+	// html-has-lang
+	html: ['lang'],
+
+	// iframe-has-title
+	iframe: ['title'],
+	img: ['alt'],
+	object: ['title', 'aria-label', 'aria-labelledby']
+};
+
+const a11y_distracting_elements = new Set([
+	'blink',
+	'marquee'
+]);
+
+const a11y_required_content = new Set([
+	// anchor-has-content
+	'a',
+
+	// heading-has-content
+	'h1',
+	'h2',
+	'h3',
+	'h4',
+	'h5',
+	'h6'
+]);
+
+const a11y_labelable = new Set([
+	'button',
+	'input',
+	'keygen',
+	'meter',
+	'output',
+	'progress',
+	'select',
+	'textarea'
+]);
+
+const a11y_nested_implicit_semantics = new Map([
+	['header', 'banner'],
+	['footer', 'contentinfo']
+]);
+
+const a11y_implicit_semantics = new Map([
+	['a', 'link'],
+	['aside', 'complementary'],
+	['body', 'document'],
+	['datalist', 'listbox'],
+	['dd', 'definition'],
+	['dfn', 'term'],
+	['details', 'group'],
+	['dt', 'term'],
+	['fieldset', 'group'],
+	['form', 'form'],
+	['h1', 'heading'],
+	['h2', 'heading'],
+	['h3', 'heading'],
+	['h4', 'heading'],
+	['h5', 'heading'],
+	['h6', 'heading'],
+	['hr', 'separator'],
+	['li', 'listitem'],
+	['menu', 'list'],
+	['nav', 'navigation'],
+	['ol', 'list'],
+	['optgroup', 'group'],
+	['output', 'status'],
+	['progress', 'progressbar'],
+	['section', 'region'],
+	['summary', 'button'],
+	['tbody', 'rowgroup'],
+	['textarea', 'textbox'],
+	['tfoot', 'rowgroup'],
+	['thead', 'rowgroup'],
+	['tr', 'row'],
+	['ul', 'list']
+]);
+
+const invisible_elements = new Set(['meta', 'html', 'script', 'style']);
+
+const valid_modifiers = new Set([
+	'preventDefault',
+	'stopPropagation',
+	'capture',
+	'once',
+	'passive',
+	'nonpassive',
+	'self',
+	'trusted'
+]);
+
+const passive_events = new Set([
+	'wheel',
+	'touchstart',
+	'touchmove',
+	'touchend',
+	'touchcancel'
+]);
+
+const react_attributes = new Map([
+	['className', 'class'],
+	['htmlFor', 'for']
+]);
+
+const attributes_to_compact_whitespace = ['class', 'style'];
+
+function is_parent(parent: INode, elements: string[]) {
+	let check = false;
+
+	while (parent) {
+		const parent_name = (parent as Element).name;
+		if (elements.includes(parent_name)) {
+			check = true;
+			break;
+		}
+		if (parent.type === 'Element') {
+			break;
+		}
+		parent = parent.parent;
+	}
+	return check;
+}
+
+function get_namespace(parent: Element, element: Element, explicit_namespace: string) {
+	const parent_element = parent.find_nearest(/^Element/);
+
+	if (!parent_element) {
+		return explicit_namespace || (svg.test(element.name)
+			? namespaces.svg
+			: null);
+	}
+
+	if (parent_element.namespace !== namespaces.foreign) {
+		if (svg.test(element.name.toLowerCase())) return namespaces.svg;
+		if (parent_element.name.toLowerCase() === 'foreignobject') return null;
+	}
+
+	return parent_element.namespace;
+}
+
+export default class Element extends Node {
+	type: 'Element';
+	name: string;
+	scope: TemplateScope;
+	attributes: Attribute[] = [];
+	actions: Action[] = [];
+	bindings: Binding[] = [];
+	classes: Class[] = [];
+	styles: StyleDirective[] = [];
+	handlers: EventHandler[] = [];
+	lets: Let[] = [];
+	intro?: Transition = null;
+	outro?: Transition = null;
+	animation?: Animation = null;
+	children: INode[];
+	namespace: string;
+	needs_manual_style_scoping: boolean;
+	tag_expr: Expression;
+
+	get is_dynamic_element() {
+		return this.name === 'svelte:element';
+	}
+
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: any) {
+		super(component, parent, scope, info);
+		this.name = info.name;
+
+		if (info.name === 'svelte:element') {
+			if (typeof info.tag !== 'string') {
+				this.tag_expr = new Expression(component, this, scope, info.tag);
+			} else {
+				this.tag_expr = new Expression(component, this, scope, string_literal(info.tag) as Literal);
+			}
+		} else {
+			this.tag_expr = new Expression(component, this, scope, string_literal(this.name) as Literal);
+		}
+
+		this.namespace = get_namespace(parent as Element, this, component.namespace);
+
+		if (this.namespace !== namespaces.foreign) {
+			if (this.name === 'pre' || this.name === 'textarea') {
+				const first = info.children[0];
+				if (first && first.type === 'Text') {
+					// The leading newline character needs to be stripped because of a qirk,
+					// it is ignored by browsers if the tag and its contents are set through
+					// innerHTML (NOT if set through the innerHTML of the tag or dynamically).
+					// Therefore strip it here but add it back in the appropriate
+					// places if there's another newline afterwards.
+					// see https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions
+					// see https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element
+					first.data = first.data.replace(start_newline, '');
+				}
+			}
+
+			if (this.name === 'textarea') {
+				if (info.children.length > 0) {
+					const value_attribute = info.attributes.find(node => node.name === 'value');
+					if (value_attribute) {
+						component.error(value_attribute, compiler_errors.textarea_duplicate_value);
+						return;
+					}
+
+					// this is an egregious hack, but it's the easiest way to get <textarea>
+					// children treated the same way as a value attribute
+					info.attributes.push({
+						type: 'Attribute',
+						name: 'value',
+						value: info.children
+					});
+
+					info.children = [];
+				}
+			}
+
+			if (this.name === 'option') {
+				// Special case — treat these the same way:
+				//   <option>{foo}</option>
+				//   <option value={foo}>{foo}</option>
+				const value_attribute = info.attributes.find(attribute => attribute.name === 'value');
+
+				if (!value_attribute) {
+					info.attributes.push({
+						type: 'Attribute',
+						name: 'value',
+						value: info.children,
+						synthetic: true
+					});
+				}
+			}
+		}
+		const has_let = info.attributes.some(node => node.type === 'Let');
+		if (has_let) {
+			scope = scope.child();
+		}
+
+		// Binding relies on Attribute, defer its evaluation
+		const order = ['Binding']; // everything else is -1
+		info.attributes.sort((a, b) => order.indexOf(a.type) - order.indexOf(b.type));
+
+		info.attributes.forEach(node => {
+			switch (node.type) {
+				case 'Action':
+					this.actions.push(new Action(component, this, scope, node));
+					break;
+
+				case 'Attribute':
+				case 'Spread':
+					// special case
+					if (node.name === 'xmlns') this.namespace = node.value[0].data;
+
+					this.attributes.push(new Attribute(component, this, scope, node));
+					break;
+
+				case 'Binding':
+					this.bindings.push(new Binding(component, this, scope, node));
+					break;
+
+				case 'Class':
+					this.classes.push(new Class(component, this, scope, node));
+					break;
+
+				case 'StyleDirective':
+					this.styles.push(new StyleDirective(component, this, scope, node));
+					break;
+
+				case 'EventHandler':
+					this.handlers.push(new EventHandler(component, this, scope, node));
+					break;
+
+				case 'Let': {
+					const l = new Let(component, this, scope, node);
+					this.lets.push(l);
+					const dependencies = new Set([l.name.name]);
+
+					l.names.forEach(name => {
+						scope.add(name, dependencies, this);
+					});
+					break;
+				}
+
+				case 'Transition':
+				{
+					const transition = new Transition(component, this, scope, node);
+					if (node.intro) this.intro = transition;
+					if (node.outro) this.outro = transition;
+					break;
+				}
+
+				case 'Animation':
+					this.animation = new Animation(component, this, scope, node);
+					break;
+
+				default:
+					throw new Error(`Not implemented: ${node.type}`);
+			}
+		});
+
+		this.scope = scope;
+		this.children = map_children(component, this, this.scope, info.children);
+
+		this.validate();
+
+		this.optimise();
+
+		component.apply_stylesheet(this);
+	}
+
+	validate() {
+		if (this.component.var_lookup.has(this.name) && this.component.var_lookup.get(this.name).imported) {
+			this.component.warn(this, compiler_warnings.component_name_lowercase(this.name));
+		}
+
+		this.validate_attributes();
+		this.validate_event_handlers();
+		if (this.namespace === namespaces.foreign) {
+			this.validate_bindings_foreign();
+		} else {
+			this.validate_attributes_a11y();
+			this.validate_special_cases();
+			this.validate_bindings();
+			this.validate_content();
+		}
+
+	}
+
+	validate_attributes() {
+		const { component, parent } = this;
+
+		this.attributes.forEach(attribute => {
+			if (attribute.is_spread) return;
+
+			const name = attribute.name.toLowerCase();
+
+			// Errors
+
+			if (/(^[0-9-.])|[\^$@%&#?!|()[\]{}^*+~;]/.test(name)) {
+				return component.error(attribute, compiler_errors.illegal_attribute(name));
+			}
+
+			if (name === 'slot') {
+				if (!attribute.is_static) {
+					return component.error(attribute, compiler_errors.invalid_slot_attribute);
+				}
+
+				if (component.slot_outlets.has(name)) {
+					return component.error(attribute, compiler_errors.duplicate_slot_attribute(name));
+
+					// this code was unreachable. Still needed?
+					// component.slot_outlets.add(name);
+				}
+
+				if (!(parent.type === 'SlotTemplate' || within_custom_element(parent))) {
+					return component.error(attribute, compiler_errors.invalid_slotted_content);
+				}
+			}
+
+			// Warnings
+
+			if (this.namespace !== namespaces.foreign) {
+				if (name === 'is') {
+					component.warn(attribute, compiler_warnings.avoid_is);
+				}
+
+				if (react_attributes.has(attribute.name)) {
+					component.warn(attribute, compiler_warnings.invalid_html_attribute(attribute.name, react_attributes.get(attribute.name)));
+				}
+			}
+		});
+	}
+
+	validate_attributes_a11y() {
+		const { component } = this;
+
+		this.attributes.forEach(attribute => {
+			if (attribute.is_spread) return;
+
+			const name = attribute.name.toLowerCase();
+
+			// aria-props
+			if (name.startsWith('aria-')) {
+				if (invisible_elements.has(this.name)) {
+					// aria-unsupported-elements
+					component.warn(attribute, compiler_warnings.a11y_aria_attributes(this.name));
+				}
+
+				const type = name.slice(5);
+				if (!aria_attribute_set.has(type)) {
+					const match = fuzzymatch(type, aria_attributes);
+					component.warn(attribute, compiler_warnings.a11y_unknown_aria_attribute(type, match));
+				}
+
+				if (name === 'aria-hidden' && /^h[1-6]$/.test(this.name)) {
+					component.warn(attribute, compiler_warnings.a11y_hidden(this.name));
+				}
+			}
+
+			// aria-role
+			if (name === 'role') {
+				if (invisible_elements.has(this.name)) {
+					// aria-unsupported-elements
+					component.warn(attribute, compiler_warnings.a11y_misplaced_role(this.name));
+				}
+
+				const value = attribute.get_static_value();
+				// @ts-ignore
+				if (value && !aria_role_set.has(value)) {
+					// @ts-ignore
+					const match = fuzzymatch(value, aria_roles);
+					component.warn(attribute, compiler_warnings.a11y_unknown_role(value, match));
+				}
+
+				// no-redundant-roles
+				const has_redundant_role = value === a11y_implicit_semantics.get(this.name);
+
+				if (this.name === value || has_redundant_role) {
+					component.warn(attribute, compiler_warnings.a11y_no_redundant_roles(value));
+				}
+
+				// Footers and headers are special cases, and should not have redundant roles unless they are the children of sections or articles.
+				const is_parent_section_or_article = is_parent(this.parent, ['section', 'article']);
+				if (!is_parent_section_or_article) {
+					const has_nested_redundant_role = value === a11y_nested_implicit_semantics.get(this.name);
+					if (has_nested_redundant_role) {
+						component.warn(attribute, compiler_warnings.a11y_no_redundant_roles(value));
+					}
+				}
+			}
+
+			// no-access-key
+			if (name === 'accesskey') {
+				component.warn(attribute, compiler_warnings.a11y_accesskey);
+			}
+
+			// no-autofocus
+			if (name === 'autofocus') {
+				component.warn(attribute, compiler_warnings.a11y_autofocus);
+			}
+
+			// scope
+			if (name === 'scope' && this.name !== 'th') {
+				component.warn(attribute, compiler_warnings.a11y_misplaced_scope);
+			}
+
+			// tabindex-no-positive
+			if (name === 'tabindex') {
+				const value = attribute.get_static_value();
+				// @ts-ignore todo is tabindex=true correct case?
+				if (!isNaN(value) && +value > 0) {
+					component.warn(attribute, compiler_warnings.a11y_positive_tabindex);
+				}
+			}
+		});
+	}
+
+
+	validate_special_cases() {
+		const { component, attributes, handlers } = this;
+
+		const attribute_map = new Map();
+		const handlers_map = new Map();
+
+		attributes.forEach(attribute => (
+			attribute_map.set(attribute.name, attribute)
+		));
+
+		handlers.forEach(handler => (
+			handlers_map.set(handler.name, handler)
+		));
+
+		if (this.name === 'a') {
+			const href_attribute = attribute_map.get('href') || attribute_map.get('xlink:href');
+			const id_attribute = attribute_map.get('id');
+			const name_attribute = attribute_map.get('name');
+
+			if (href_attribute) {
+				const href_value = href_attribute.get_static_value();
+
+				if (href_value === '' || href_value === '#' || /^\W*javascript:/i.test(href_value)) {
+					component.warn(href_attribute, compiler_warnings.a11y_invalid_attribute(href_attribute.name, href_value));
+				}
+			} else {
+				const id_attribute_valid = id_attribute && id_attribute.get_static_value() !== '';
+				const name_attribute_valid = name_attribute && name_attribute.get_static_value() !== '';
+
+				if (!id_attribute_valid && !name_attribute_valid) {
+					component.warn(this, compiler_warnings.a11y_missing_attribute('a', 'an', 'href'));
+				}
+			}
+		} else {
+			const required_attributes = a11y_required_attributes[this.name];
+			if (required_attributes) {
+				const has_attribute = required_attributes.some(name => attribute_map.has(name));
+
+				if (!has_attribute) {
+					should_have_attribute(this, required_attributes);
+				}
+			}
+		}
+
+		if (this.name === 'input') {
+			const type = attribute_map.get('type');
+			if (type && type.get_static_value() === 'image') {
+				const required_attributes = ['alt', 'aria-label', 'aria-labelledby'];
+				const has_attribute = required_attributes.some(name => attribute_map.has(name));
+
+				if (!has_attribute) {
+					should_have_attribute(this, required_attributes, 'input type="image"');
+				}
+			}
+		}
+
+		if (this.name === 'img') {
+			const alt_attribute = attribute_map.get('alt');
+			const aria_hidden_attribute = attribute_map.get('aria-hidden');
+
+			const aria_hidden_exist = aria_hidden_attribute && aria_hidden_attribute.get_static_value();
+
+			if (alt_attribute && !aria_hidden_exist) {
+				const alt_value = alt_attribute.get_static_value();
+
+				if (/\b(image|picture|photo)\b/i.test(alt_value)) {
+					component.warn(this, compiler_warnings.a11y_img_redundant_alt);
+				}
+			}
+		}
+
+		if (this.name === 'label') {
+			const has_input_child = this.children.some(i => (i instanceof Element && a11y_labelable.has(i.name) ));
+			if (!attribute_map.has('for') && !has_input_child) {
+				component.warn(this, compiler_warnings.a11y_label_has_associated_control);
+			}
+		}
+
+		if (this.name === 'video') {
+			if (attribute_map.has('muted')) {
+				return;
+			}
+
+			let has_caption;
+			const track = this.children.find((i: Element) => i.name === 'track');
+			if (track) {
+				has_caption = track.attributes.find(a => a.name === 'kind' && a.get_static_value() === 'captions');
+			}
+
+			if (!has_caption) {
+				component.warn(this, compiler_warnings.a11y_media_has_caption);
+			}
+		}
+
+		if (a11y_distracting_elements.has(this.name)) {
+			// no-distracting-elements
+			component.warn(this, compiler_warnings.a11y_distracting_elements(this.name));
+		}
+
+		if (this.name === 'figcaption') {
+			let { parent } = this;
+			let is_figure_parent = false;
+
+			while (parent) {
+				if ((parent as Element).name === 'figure') {
+					is_figure_parent = true;
+					break;
+				}
+				if (parent.type === 'Element') {
+					break;
+				}
+				parent = parent.parent;
+			}
+
+			if (!is_figure_parent) {
+				component.warn(this, compiler_warnings.a11y_structure_immediate);
+			}
+		}
+
+		if (this.name === 'figure') {
+			const children = this.children.filter(node => {
+				if (node.type === 'Comment') return false;
+				if (node.type === 'Text') return /\S/.test(node.data);
+				return true;
+			});
+
+			const index = children.findIndex(child => (child as Element).name === 'figcaption');
+
+			if (index !== -1 && (index !== 0 && index !== children.length - 1)) {
+				component.warn(children[index], compiler_warnings.a11y_structure_first_or_last);
+			}
+		}
+
+		if (handlers_map.has('mouseover') && !handlers_map.has('focus')) {
+			component.warn(this, compiler_warnings.a11y_mouse_events_have_key_events('mouseover', 'focus'));
+		}
+
+		if (handlers_map.has('mouseout') && !handlers_map.has('blur')) {
+			component.warn(this, compiler_warnings.a11y_mouse_events_have_key_events('mouseout', 'blur'));
+		}
+	}
+
+	validate_bindings_foreign() {
+		this.bindings.forEach(binding => {
+			if (binding.name !== 'this') {
+				return this.component.error(binding, compiler_errors.invalid_binding_foreign(binding.name));
+			}
+		});
+	}
+
+	validate_bindings() {
+		const { component } = this;
+
+		const check_type_attribute = () => {
+			const attribute = this.attributes.find(
+				(attribute: Attribute) => attribute.name === 'type'
+			);
+
+			if (!attribute) return null;
+
+			if (!attribute.is_static) {
+				return component.error(attribute, compiler_errors.invalid_type);
+			}
+
+			const value = attribute.get_static_value();
+
+			if (value === true) {
+				return component.error(attribute, compiler_errors.missing_type);
+			}
+
+			return value;
+		};
+
+		this.bindings.forEach(binding => {
+			const { name } = binding;
+
+			if (name === 'value') {
+				if (
+					this.name !== 'input' &&
+					this.name !== 'textarea' &&
+					this.name !== 'select'
+				) {
+					return component.error(binding, compiler_errors.invalid_binding_elements(this.name, 'value'));
+				}
+
+				if (this.name === 'select') {
+					const attribute = this.attributes.find(
+						(attribute: Attribute) => attribute.name === 'multiple'
+					);
+
+					if (attribute && !attribute.is_static) {
+						return component.error(attribute, compiler_errors.dynamic_multiple_attribute);
+					}
+				} else {
+					check_type_attribute();
+				}
+			} else if (name === 'checked' || name === 'indeterminate') {
+				if (this.name !== 'input') {
+					return component.error(binding, compiler_errors.invalid_binding_elements(this.name, name));
+				}
+
+				const type = check_type_attribute();
+
+				if (type !== 'checkbox') {
+					return component.error(binding, compiler_errors.invalid_binding_no_checkbox(name, type === 'radio'));
+				}
+			} else if (name === 'group') {
+				if (this.name !== 'input') {
+					return component.error(binding, compiler_errors.invalid_binding_elements(this.name, 'group'));
+				}
+
+				const type = check_type_attribute();
+
+				if (type !== 'checkbox' && type !== 'radio') {
+					return component.error(binding, compiler_errors.invalid_binding_element_with('<input type="checkbox"> or <input type="radio">', 'group'));
+				}
+			} else if (name === 'files') {
+				if (this.name !== 'input') {
+					return component.error(binding, compiler_errors.invalid_binding_elements(this.name, 'files'));
+				}
+
+				const type = check_type_attribute();
+
+				if (type !== 'file') {
+					return component.error(binding, compiler_errors.invalid_binding_element_with('<input type="file">', 'files'));
+				}
+
+			} else if (name === 'open') {
+				if (this.name !== 'details') {
+					return component.error(binding, compiler_errors.invalid_binding_element_with('<details>', name));
+				}
+			} else if (
+				name === 'currentTime' ||
+				name === 'duration' ||
+				name === 'paused' ||
+				name === 'buffered' ||
+				name === 'seekable' ||
+				name === 'played' ||
+				name === 'volume' ||
+				name === 'muted' ||
+				name === 'playbackRate' ||
+				name === 'seeking' ||
+				name === 'ended'
+			) {
+				if (this.name !== 'audio' && this.name !== 'video') {
+					return component.error(binding, compiler_errors.invalid_binding_element_with('audio> or <video>', name));
+				}
+			} else if (
+				name === 'videoHeight' ||
+				name === 'videoWidth'
+			) {
+				if (this.name !== 'video') {
+					return component.error(binding, compiler_errors.invalid_binding_element_with('<video>', name));
+				}
+			} else if (dimensions.test(name)) {
+				if (this.name === 'svg' && (name === 'offsetWidth' || name === 'offsetHeight')) {
+					return component.error(binding, compiler_errors.invalid_binding_on(binding.name, `<svg>. Use '${name.replace('offset', 'client')}' instead`));
+				} else if (svg.test(this.name)) {
+					return component.error(binding, compiler_errors.invalid_binding_on(binding.name, 'SVG elements'));
+				} else if (is_void(this.name)) {
+					return component.error(binding, compiler_errors.invalid_binding_on(binding.name, `void elements like <${this.name}>. Use a wrapper element instead`));
+				}
+			} else if (
+				name === 'textContent' ||
+				name === 'innerHTML'
+			) {
+				const contenteditable = this.attributes.find(
+					(attribute: Attribute) => attribute.name === 'contenteditable'
+				);
+
+				if (!contenteditable) {
+					return component.error(binding, compiler_errors.missing_contenteditable_attribute);
+				} else if (contenteditable && !contenteditable.is_static) {
+					return component.error(contenteditable, compiler_errors.dynamic_contenteditable_attribute);
+				}
+			} else if (name !== 'this') {
+				return component.error(binding, compiler_errors.invalid_binding(binding.name));
+			}
+		});
+	}
+
+	validate_content() {
+		if (!a11y_required_content.has(this.name)) return;
+		if (
+			this.bindings
+				.some((binding) => ['textContent', 'innerHTML'].includes(binding.name))
+		) return;
+
+		if (this.children.length === 0) {
+			this.component.warn(this, compiler_warnings.a11y_missing_content(this.name));
+		}
+	}
+
+	validate_event_handlers() {
+		const { component } = this;
+
+		this.handlers.forEach(handler => {
+			if (handler.modifiers.has('passive') && handler.modifiers.has('preventDefault')) {
+				return component.error(handler, compiler_errors.invalid_event_modifier_combination('passive', 'preventDefault'));
+			}
+
+			if (handler.modifiers.has('passive') && handler.modifiers.has('nonpassive')) {
+				return component.error(handler, compiler_errors.invalid_event_modifier_combination('passive', 'nonpassive'));
+			}
+
+			handler.modifiers.forEach(modifier => {
+				if (!valid_modifiers.has(modifier)) {
+					return component.error(handler, compiler_errors.invalid_event_modifier(list(Array.from(valid_modifiers))));
+				}
+
+				if (modifier === 'passive') {
+					if (passive_events.has(handler.name)) {
+						if (handler.can_make_passive) {
+							component.warn(handler, compiler_warnings.redundant_event_modifier_for_touch);
+						}
+					} else {
+						component.warn(handler, compiler_warnings.redundant_event_modifier_passive);
+					}
+				}
+
+				if (component.compile_options.legacy && (modifier === 'once' || modifier === 'passive')) {
+					// TODO this could be supported, but it would need a few changes to
+					// how event listeners work
+					return component.error(handler, compiler_errors.invalid_event_modifier_legacy(modifier));
+				}
+			});
+
+			if (passive_events.has(handler.name) && handler.can_make_passive && !handler.modifiers.has('preventDefault') && !handler.modifiers.has('nonpassive')) {
+				// touch/wheel events should be passive by default
+				handler.modifiers.add('passive');
+			}
+		});
+	}
+
+	is_media_node() {
+		return this.name === 'audio' || this.name === 'video';
+	}
+
+	add_css_class() {
+		if (this.attributes.some(attr => attr.is_spread)) {
+			this.needs_manual_style_scoping = true;
+			return;
+		}
+
+		const { id } = this.component.stylesheet;
+
+		const class_attribute = this.attributes.find(a => a.name === 'class');
+
+		if (class_attribute && !class_attribute.is_true) {
+			if (class_attribute.chunks.length === 1 && class_attribute.chunks[0].type === 'Text') {
+				(class_attribute.chunks[0] as Text).data += ` ${id}`;
+			} else {
+				(class_attribute.chunks as Node[]).push(
+					new Text(this.component, this, this.scope, {
+						type: 'Text',
+						data: ` ${id}`,
+						synthetic: true
+					} as any)
+				);
+			}
+		} else {
+			this.attributes.push(
+				new Attribute(this.component, this, this.scope, {
+					type: 'Attribute',
+					name: 'class',
+					value: [{ type: 'Text', data: id, synthetic: true }]
+				} as any)
+			);
+		}
+	}
+
+	get slot_template_name() {
+		return this.attributes.find(attribute => attribute.name === 'slot').get_static_value() as string;
+	}
+
+	optimise() {
+		attributes_to_compact_whitespace.forEach(attribute_name => {
+			const attribute = this.attributes.find(a => a.name === attribute_name);
+			if (attribute && !attribute.is_true) {
+				attribute.chunks.forEach((chunk, index) => {
+					if (chunk.type === 'Text') {
+						let data = chunk.data.replace(/[\s\n\t]+/g, ' ');
+						if (index === 0) {
+							data = data.trimLeft();
+						} else if (index === attribute.chunks.length - 1) {
+							data = data.trimRight();
+						}
+						chunk.data = data;
+					}
+				});
+			}
+		});
+	}
+}
+
+function should_have_attribute(
+	node,
+	attributes: string[],
+	name = node.name
+) {
+	const article = /^[aeiou]/.test(attributes[0]) ? 'an' : 'a';
+	const sequence = attributes.length > 1 ?
+		attributes.slice(0, -1).join(', ') + ` or ${attributes[attributes.length - 1]}` :
+		attributes[0];
+
+	node.component.warn(node, compiler_warnings.a11y_missing_attribute(name, article, sequence));
+}
+
+function within_custom_element(parent: INode) {
+	while (parent) {
+		if (parent.type === 'InlineComponent') return false;
+		if (parent.type === 'Element' && /-/.test(parent.name)) return true;
+		parent = parent.parent;
+	}
+	return false;
+}
diff --git a/src/compiler/compile/nodes/ElseBlock.ts b/src/compiler/compile/nodes/ElseBlock.ts
new file mode 100644
index 0000000000..fb3661c7ab
--- /dev/null
+++ b/src/compiler/compile/nodes/ElseBlock.ts
@@ -0,0 +1,22 @@
+import AbstractBlock from './shared/AbstractBlock';
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
+import { TemplateNode } from '../../interfaces';
+import Node from './shared/Node';
+import ConstTag from './ConstTag';
+import get_const_tags from './shared/get_const_tags';
+
+export default class ElseBlock extends AbstractBlock {
+	type: 'ElseBlock';
+	scope: TemplateScope;
+	const_tags: ConstTag[];
+
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+
+		this.scope = scope.child();
+		([this.const_tags, this.children] = get_const_tags(info.children, component, this, this));
+
+		this.warn_if_empty_block();
+	}
+}
diff --git a/src/compiler/compile/nodes/EventHandler.ts b/src/compiler/compile/nodes/EventHandler.ts
new file mode 100644
index 0000000000..1bac53b6af
--- /dev/null
+++ b/src/compiler/compile/nodes/EventHandler.ts
@@ -0,0 +1,64 @@
+import Node from './shared/Node';
+import Expression from './shared/Expression';
+import Component from '../Component';
+import { sanitize } from '../../utils/names';
+import { Identifier } from 'estree';
+import TemplateScope from './shared/TemplateScope';
+import { TemplateNode } from '../../interfaces';
+
+export default class EventHandler extends Node {
+	type: 'EventHandler';
+	name: string;
+	modifiers: Set<string>;
+	expression: Expression;
+	handler_name: Identifier;
+	uses_context = false;
+	can_make_passive = false;
+
+	constructor(component: Component, parent: Node, template_scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, template_scope, info);
+
+		this.name = info.name;
+		this.modifiers = new Set(info.modifiers);
+
+		if (info.expression) {
+			this.expression = new Expression(component, this, template_scope, info.expression);
+			this.uses_context = this.expression.uses_context;
+
+			if (/FunctionExpression/.test(info.expression.type) && info.expression.params.length === 0) {
+				// TODO make this detection more accurate — if `event.preventDefault` isn't called, and
+				// `event` is passed to another function, we can make it passive
+				this.can_make_passive = true;
+			} else if (info.expression.type === 'Identifier') {
+				let node = component.node_for_declaration.get(info.expression.name);
+
+				if (node) {
+					if (node.type === 'VariableDeclaration') {
+						// for `const handleClick = () => {...}`, we want the [arrow] function expression node
+						const declarator = node.declarations.find(d => (d.id as Identifier).name === info.expression.name);
+						node = declarator && declarator.init;
+					}
+
+					if (node && (node.type === 'FunctionExpression' || node.type === 'FunctionDeclaration' || node.type === 'ArrowFunctionExpression') && node.params.length === 0) {
+						this.can_make_passive = true;
+					}
+				}
+			}
+		} else {
+			this.handler_name = component.get_unique_name(`${sanitize(this.name)}_handler`);
+		}
+	}
+
+	get reassigned(): boolean {
+		if (!this.expression) {
+			return false;
+		}
+		const node = this.expression.node;
+
+		if (/FunctionExpression/.test(node.type)) {
+			return false;
+		}
+
+		return this.expression.dynamic_dependencies().length > 0;
+	}
+}
diff --git a/src/compiler/compile/nodes/Fragment.ts b/src/compiler/compile/nodes/Fragment.ts
new file mode 100644
index 0000000000..0e1f5d262b
--- /dev/null
+++ b/src/compiler/compile/nodes/Fragment.ts
@@ -0,0 +1,22 @@
+import Node from './shared/Node';
+import Component from '../Component';
+import map_children from './shared/map_children';
+import Block from '../render_dom/Block';
+import TemplateScope from './shared/TemplateScope';
+import { INode } from './interfaces';
+import { TemplateNode } from '../../interfaces';
+
+export default class Fragment extends Node {
+	type: 'Fragment';
+	block: Block;
+	children: INode[];
+	scope: TemplateScope;
+
+	constructor(component: Component, info: TemplateNode) {
+		const scope = new TemplateScope();
+		super(component, null, scope, info);
+
+		this.scope = scope;
+		this.children = map_children(component, this, scope, info.children);
+	}
+}
diff --git a/src/compiler/compile/nodes/Head.ts b/src/compiler/compile/nodes/Head.ts
new file mode 100644
index 0000000000..fb000e0d5b
--- /dev/null
+++ b/src/compiler/compile/nodes/Head.ts
@@ -0,0 +1,30 @@
+import Node from './shared/Node';
+import map_children from './shared/map_children';
+import hash from '../utils/hash';
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
+import { TemplateNode } from '../../interfaces';
+import compiler_errors from '../compiler_errors';
+
+export default class Head extends Node {
+	type: 'Head';
+	children: any[]; // TODO
+	id: string;
+
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+
+		if (info.attributes.length) {
+			component.error(info.attributes[0], compiler_errors.invalid_attribute_head);
+			return;
+		}
+
+		this.children = map_children(component, parent, scope, info.children.filter(child => {
+			return (child.type !== 'Text' || /\S/.test(child.data));
+		}));
+
+		if (this.children.length > 0) {
+			this.id = `svelte-${hash(this.component.source.slice(this.start, this.end))}`;
+		}
+	}
+}
diff --git a/src/compiler/compile/nodes/IfBlock.ts b/src/compiler/compile/nodes/IfBlock.ts
new file mode 100644
index 0000000000..8351f1e0e2
--- /dev/null
+++ b/src/compiler/compile/nodes/IfBlock.ts
@@ -0,0 +1,31 @@
+import ElseBlock from './ElseBlock';
+import Expression from './shared/Expression';
+import AbstractBlock from './shared/AbstractBlock';
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
+import { TemplateNode } from '../../interfaces';
+import Node from './shared/Node';
+import ConstTag from './ConstTag';
+import get_const_tags from './shared/get_const_tags';
+
+export default class IfBlock extends AbstractBlock {
+	type: 'IfBlock';
+	expression: Expression;
+	else: ElseBlock;
+	scope: TemplateScope;
+	const_tags: ConstTag[];
+
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+		this.scope = scope.child();
+
+		this.expression = new Expression(component, this, this.scope, info.expression);
+		([this.const_tags, this.children] = get_const_tags(info.children, component, this, this));
+
+		this.else = info.else
+			? new ElseBlock(component, this, scope, info.else)
+			: null;
+
+		this.warn_if_empty_block();
+	}
+}
diff --git a/src/compiler/compile/nodes/InlineComponent.ts b/src/compiler/compile/nodes/InlineComponent.ts
new file mode 100644
index 0000000000..13fb13c278
--- /dev/null
+++ b/src/compiler/compile/nodes/InlineComponent.ts
@@ -0,0 +1,167 @@
+import Node from './shared/Node';
+import Attribute from './Attribute';
+import map_children from './shared/map_children';
+import Binding from './Binding';
+import EventHandler from './EventHandler';
+import Expression from './shared/Expression';
+import Component from '../Component';
+import Let from './Let';
+import TemplateScope from './shared/TemplateScope';
+import { INode } from './interfaces';
+import { TemplateNode } from '../../interfaces';
+import compiler_errors from '../compiler_errors';
+
+export default class InlineComponent extends Node {
+	type: 'InlineComponent';
+	name: string;
+	expression: Expression;
+	attributes: Attribute[] = [];
+	bindings: Binding[] = [];
+	handlers: EventHandler[] = [];
+	lets: Let[] = [];
+	css_custom_properties: Attribute[] = [];
+	children: INode[];
+	scope: TemplateScope;
+
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+
+		if (info.name !== 'svelte:component' && info.name !== 'svelte:self') {
+			const name = info.name.split('.')[0]; // accommodate namespaces
+			component.warn_if_undefined(name, info, scope);
+			component.add_reference(this as any, name);
+		}
+
+		this.name = info.name;
+
+		this.expression = this.name === 'svelte:component'
+			? new Expression(component, this, scope, info.expression)
+			: null;
+
+		info.attributes.forEach(node => {
+			/* eslint-disable no-fallthrough */
+			switch (node.type) {
+				case 'Action':
+					return component.error(node, compiler_errors.invalid_action);
+
+				case 'Attribute':
+					if (node.name.startsWith('--')) {
+						this.css_custom_properties.push(new Attribute(component, this, scope, node));
+						break;
+					}
+					// fallthrough
+				case 'Spread':
+					this.attributes.push(new Attribute(component, this, scope, node));
+					break;
+
+				case 'Binding':
+					this.bindings.push(new Binding(component, this, scope, node));
+					break;
+
+				case 'Class':
+					return component.error(node, compiler_errors.invalid_class);
+
+				case 'EventHandler':
+					this.handlers.push(new EventHandler(component, this, scope, node));
+					break;
+
+				case 'Let':
+					this.lets.push(new Let(component, this, scope, node));
+					break;
+
+				case 'Transition':
+					return component.error(node, compiler_errors.invalid_transition);
+				
+				case 'StyleDirective':
+					return component.error(node, compiler_errors.invalid_component_style_directive);
+	
+				default:
+					throw new Error(`Not implemented: ${node.type}`);
+			}
+			/* eslint-enable no-fallthrough */
+		});
+
+		if (this.lets.length > 0) {
+			this.scope = scope.child();
+
+			this.lets.forEach(l => {
+				const dependencies = new Set([l.name.name]);
+
+				l.names.forEach(name => {
+					this.scope.add(name, dependencies, this);
+				});
+			});
+		} else {
+			this.scope = scope;
+		}
+
+		this.handlers.forEach(handler => {
+			handler.modifiers.forEach(modifier => {
+				if (modifier !== 'once') {
+					return component.error(handler, compiler_errors.invalid_event_modifier_component);
+				}
+			});
+		});
+
+		const children = [];
+		for (let i = info.children.length - 1; i >= 0; i--) {
+			const child = info.children[i];
+			if (child.type === 'SlotTemplate') {
+				children.push(child);
+				info.children.splice(i, 1);
+			} else if ((child.type === 'Element' || child.type === 'InlineComponent' || child.type === 'Slot') && child.attributes.find(attribute => attribute.name === 'slot')) {
+				const slot_template = {
+					start: child.start,
+					end: child.end,
+					type: 'SlotTemplate',
+					name: 'svelte:fragment',
+					attributes: [],
+					children: [child]
+				};
+
+				// transfer attributes
+				for (let i = child.attributes.length - 1; i >= 0; i--) {
+					const attribute = child.attributes[i];
+					if (attribute.type === 'Let') {
+						slot_template.attributes.push(attribute);
+						child.attributes.splice(i, 1);
+					} else if (attribute.type === 'Attribute' && attribute.name === 'slot') {
+						slot_template.attributes.push(attribute);
+					}
+				}
+				// transfer const
+				for (let i = child.children.length - 1; i >= 0; i--) {
+					const child_child = child.children[i];
+					if (child_child.type === 'ConstTag') {
+						slot_template.children.push(child_child);
+						child.children.splice(i, 1);
+					}
+				}
+
+				children.push(slot_template);
+				info.children.splice(i, 1);
+			}
+		}
+
+		if (info.children.some(node => not_whitespace_text(node))) {
+			children.push({
+				start: info.start,
+				end: info.end,
+				type: 'SlotTemplate',
+				name: 'svelte:fragment',
+				attributes: [],
+				children: info.children
+			});
+		}
+
+		this.children = map_children(component, this, this.scope, children);
+	}
+
+	get slot_template_name() {
+		return this.attributes.find(attribute => attribute.name === 'slot').get_static_value() as string;
+	}
+}
+
+function not_whitespace_text(node) {
+	return !(node.type === 'Text' && /^\s+$/.test(node.data));
+}
diff --git a/src/compiler/compile/nodes/KeyBlock.ts b/src/compiler/compile/nodes/KeyBlock.ts
new file mode 100644
index 0000000000..5261e14e0a
--- /dev/null
+++ b/src/compiler/compile/nodes/KeyBlock.ts
@@ -0,0 +1,23 @@
+import Expression from './shared/Expression';
+import map_children from './shared/map_children';
+import AbstractBlock from './shared/AbstractBlock';
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
+import { TemplateNode } from '../../interfaces';
+import Node from './shared/Node';
+
+export default class KeyBlock extends AbstractBlock {
+	type: 'KeyBlock';
+
+	expression: Expression;
+
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+
+		this.expression = new Expression(component, this, scope, info.expression);
+
+		this.children = map_children(component, this, scope, info.children);
+
+		this.warn_if_empty_block();
+	}
+}
diff --git a/src/compiler/compile/nodes/Let.ts b/src/compiler/compile/nodes/Let.ts
new file mode 100644
index 0000000000..4be90812ca
--- /dev/null
+++ b/src/compiler/compile/nodes/Let.ts
@@ -0,0 +1,51 @@
+import Node from './shared/Node';
+import Component from '../Component';
+import { walk } from 'estree-walker';
+import { BasePattern, Identifier } from 'estree';
+import TemplateScope from './shared/TemplateScope';
+import { TemplateNode } from '../../interfaces';
+import compiler_errors from '../compiler_errors';
+
+const applicable = new Set(['Identifier', 'ObjectExpression', 'ArrayExpression', 'Property']);
+
+export default class Let extends Node {
+	type: 'Let';
+	name: Identifier;
+	value: Identifier;
+	names: string[] = [];
+
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+
+		this.name = { type: 'Identifier', name: info.name };
+
+		const { names } = this;
+
+		if (info.expression) {
+			this.value = info.expression;
+
+			walk(info.expression, {
+				enter(node: Identifier | BasePattern) {
+					if (!applicable.has(node.type)) {
+						return component.error(node as any, compiler_errors.invalid_let);
+					}
+
+					if (node.type === 'Identifier') {
+						names.push((node as Identifier).name);
+					}
+
+					// slightly unfortunate hack
+					if (node.type === 'ArrayExpression') {
+						node.type = 'ArrayPattern';
+					}
+
+					if (node.type === 'ObjectExpression') {
+						node.type = 'ObjectPattern';
+					}
+				}
+			});
+		} else {
+			names.push(this.name.name);
+		}
+	}
+}
diff --git a/src/compiler/compile/nodes/MustacheTag.ts b/src/compiler/compile/nodes/MustacheTag.ts
new file mode 100644
index 0000000000..ac6688d503
--- /dev/null
+++ b/src/compiler/compile/nodes/MustacheTag.ts
@@ -0,0 +1,5 @@
+import Tag from './shared/Tag';
+
+export default class MustacheTag extends Tag {
+	type: 'MustacheTag';
+}
diff --git a/src/compiler/compile/nodes/Options.ts b/src/compiler/compile/nodes/Options.ts
new file mode 100644
index 0000000000..613587604e
--- /dev/null
+++ b/src/compiler/compile/nodes/Options.ts
@@ -0,0 +1,5 @@
+import Node from './shared/Node';
+
+export default class Options extends Node {
+	type: 'Options';
+}
diff --git a/src/compiler/compile/nodes/PendingBlock.ts b/src/compiler/compile/nodes/PendingBlock.ts
new file mode 100644
index 0000000000..4f789e268f
--- /dev/null
+++ b/src/compiler/compile/nodes/PendingBlock.ts
@@ -0,0 +1,18 @@
+import map_children from './shared/map_children';
+import AbstractBlock from './shared/AbstractBlock';
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
+import { TemplateNode } from '../../interfaces';
+import Node from './shared/Node';
+
+export default class PendingBlock extends AbstractBlock {
+	type: 'PendingBlock';
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+		this.children = map_children(component, parent, scope, info.children);
+
+		if (!info.skip) {
+			this.warn_if_empty_block();
+		}
+	}
+}
diff --git a/src/compiler/compile/nodes/RawMustacheTag.ts b/src/compiler/compile/nodes/RawMustacheTag.ts
new file mode 100644
index 0000000000..816ef8d7c5
--- /dev/null
+++ b/src/compiler/compile/nodes/RawMustacheTag.ts
@@ -0,0 +1,5 @@
+import Tag from './shared/Tag';
+
+export default class RawMustacheTag extends Tag {
+	type: 'RawMustacheTag';
+}
diff --git a/src/compiler/compile/nodes/Slot.ts b/src/compiler/compile/nodes/Slot.ts
new file mode 100644
index 0000000000..c21a48f5d6
--- /dev/null
+++ b/src/compiler/compile/nodes/Slot.ts
@@ -0,0 +1,64 @@
+import Element from './Element';
+import Attribute from './Attribute';
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
+import { INode } from './interfaces';
+import { TemplateNode } from '../../interfaces';
+import compiler_errors from '../compiler_errors';
+
+export default class Slot extends Element {
+	type: 'Element';
+	name: string;
+	children: INode[];
+	slot_name: string;
+	values: Map<string, Attribute> = new Map();
+
+	constructor(component: Component, parent: INode, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+
+		info.attributes.forEach(attr => {
+			if (attr.type !== 'Attribute' && attr.type !== 'Spread') {
+				return component.error(attr, compiler_errors.invalid_slot_directive);
+			}
+
+			if (attr.name === 'name') {
+				if (attr.value.length !== 1 || attr.value[0].type !== 'Text') {
+					return component.error(attr, compiler_errors.dynamic_slot_name);
+				}
+
+				this.slot_name = attr.value[0].data;
+				if (this.slot_name === 'default') {
+					return component.error(attr, compiler_errors.invalid_slot_name);
+				}
+			}
+
+			this.values.set(attr.name, new Attribute(component, this, scope, attr));
+		});
+
+		if (!this.slot_name) this.slot_name = 'default';
+
+		if (this.slot_name === 'default') {
+			// if this is the default slot, add our dependencies to any
+			// other slots (which inherit our slot values) that were
+			// previously encountered
+			component.slots.forEach((slot) => {
+				this.values.forEach((attribute, name) => {
+					if (!slot.values.has(name)) {
+						slot.values.set(name, attribute);
+					}
+				});
+			});
+		} else if (component.slots.has('default')) {
+			// otherwise, go the other way — inherit values from
+			// a previously encountered default slot
+			const default_slot = component.slots.get('default');
+			default_slot.values.forEach((attribute, name) => {
+				if (!this.values.has(name)) {
+					this.values.set(name, attribute);
+				}
+			});
+		}
+
+		component.slots.set(this.slot_name, this);
+	}
+}
diff --git a/src/compiler/compile/nodes/SlotTemplate.ts b/src/compiler/compile/nodes/SlotTemplate.ts
new file mode 100644
index 0000000000..90299c8e39
--- /dev/null
+++ b/src/compiler/compile/nodes/SlotTemplate.ts
@@ -0,0 +1,73 @@
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
+import Node from './shared/Node';
+import Let from './Let';
+import Attribute from './Attribute';
+import { INode } from './interfaces';
+import compiler_errors from '../compiler_errors';
+import get_const_tags from './shared/get_const_tags';
+import ConstTag from './ConstTag';
+
+export default class SlotTemplate extends Node {
+	type: 'SlotTemplate';
+	scope: TemplateScope;
+	children: INode[];
+	lets: Let[] = [];
+	const_tags: ConstTag[];
+	slot_attribute: Attribute;
+	slot_template_name: string = 'default';
+
+	constructor(
+		component: Component,
+		parent: INode,
+		scope: TemplateScope,
+		info: any
+	) {
+		super(component, parent, scope, info);
+
+		this.validate_slot_template_placement();
+
+		scope = scope.child();
+
+		info.attributes.forEach((node) => {
+			switch (node.type) {
+				case 'Let': {
+					const l = new Let(component, this, scope, node);
+					this.lets.push(l);
+					const dependencies = new Set([l.name.name]);
+
+					l.names.forEach((name) => {
+						scope.add(name, dependencies, this);
+					});
+					break;
+				}
+				case 'Attribute': {
+					if (node.name === 'slot') {
+						this.slot_attribute = new Attribute(component, this, scope, node);
+						if (!this.slot_attribute.is_static) {
+							return component.error(node, compiler_errors.invalid_slot_attribute);
+						}
+						const value = this.slot_attribute.get_static_value();
+						if (typeof value === 'boolean') {
+							return component.error(node, compiler_errors.invalid_slot_attribute_value_missing);
+						}
+						this.slot_template_name = value as string;
+						break;
+					}
+					throw new Error(`Invalid attribute '${node.name}' in <svelte:fragment>`);
+				}
+				default:
+					throw new Error(`Not implemented: ${node.type}`);
+			}
+		});
+
+		this.scope = scope;
+		([this.const_tags, this.children] = get_const_tags(info.children, component, this, this));
+	}
+
+	validate_slot_template_placement() {
+		if (this.parent.type !== 'InlineComponent') {
+			return this.component.error(this, compiler_errors.invalid_slotted_content_fragment);
+		}
+	}
+}
diff --git a/src/compiler/compile/nodes/StyleDirective.ts b/src/compiler/compile/nodes/StyleDirective.ts
new file mode 100644
index 0000000000..ea340cf2dc
--- /dev/null
+++ b/src/compiler/compile/nodes/StyleDirective.ts
@@ -0,0 +1,39 @@
+import { TemplateNode } from '../../interfaces';
+import Component from '../Component';
+import { nodes_to_template_literal } from '../utils/nodes_to_template_literal';
+import Expression from './shared/Expression';
+import Node from './shared/Node';
+import TemplateScope from './shared/TemplateScope';
+
+export default class StyleDirective extends Node {
+	type: 'StyleDirective';
+	name: string;
+	expression: Expression;
+	should_cache: boolean;
+
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+
+		this.name = info.name;
+
+		// Convert the value array to an expression so it's easier to handle
+		// the StyleDirective going forward.
+		if (info.value === true || (info.value.length === 1 && info.value[0].type === 'MustacheTag')) {
+			const identifier = info.value === true
+				? {
+					type: 'Identifier',
+					start: info.end - info.name.length,
+					end: info.end,
+					name: info.name
+				} as any
+				: info.value[0].expression;
+			this.expression = new Expression(component, this, scope, identifier);
+			this.should_cache = false;
+		} else {
+			const raw_expression = nodes_to_template_literal(info.value);
+			this.expression = new Expression(component, this, scope, raw_expression);
+			this.should_cache = raw_expression.expressions.length > 0;
+		}
+
+	}
+}
diff --git a/src/compiler/compile/nodes/Text.ts b/src/compiler/compile/nodes/Text.ts
new file mode 100644
index 0000000000..347beb9c23
--- /dev/null
+++ b/src/compiler/compile/nodes/Text.ts
@@ -0,0 +1,63 @@
+import Node from './shared/Node';
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
+import { INode } from './interfaces';
+import { TemplateNode } from '../../interfaces';
+
+// Whitespace inside one of these elements will not result in
+// a whitespace node being created in any circumstances. (This
+// list is almost certainly very incomplete)
+const elements_without_text = new Set([
+	'audio',
+	'datalist',
+	'dl',
+	'optgroup',
+	'select',
+	'video'
+]);
+
+export default class Text extends Node {
+	type: 'Text';
+	data: string;
+	synthetic: boolean;
+
+	constructor(component: Component, parent: INode, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+		this.data = info.data;
+		this.synthetic = info.synthetic || false;
+	}
+
+	should_skip() {
+		if (/\S/.test(this.data)) return false;
+
+		const parent_element = this.find_nearest(/(?:Element|InlineComponent|SlotTemplate|Head)/);
+		if (!parent_element) return false;
+
+		if (parent_element.type === 'Head') return true;
+		if (parent_element.type === 'InlineComponent') return parent_element.children.length === 1 && this === parent_element.children[0];
+
+		// svg namespace exclusions
+		if (/svg$/.test(parent_element.namespace)) {
+			if (this.prev && this.prev.type === 'Element' && this.prev.name === 'tspan') return false;
+		}
+
+		return parent_element.namespace || elements_without_text.has(parent_element.name);
+	}
+
+	keep_space(): boolean {
+		if (this.component.component_options.preserveWhitespace) return true;
+		return this.within_pre();
+	}
+
+	within_pre(): boolean {
+		let node = this.parent;
+		while (node) {
+			if (node.type === 'Element' && node.name === 'pre') {
+				return true;
+			}
+			node = node.parent;
+		}
+
+		return false;
+	}
+}
diff --git a/src/compiler/compile/nodes/ThenBlock.ts b/src/compiler/compile/nodes/ThenBlock.ts
new file mode 100644
index 0000000000..6aee3f916f
--- /dev/null
+++ b/src/compiler/compile/nodes/ThenBlock.ts
@@ -0,0 +1,30 @@
+import TemplateScope from './shared/TemplateScope';
+import AbstractBlock from './shared/AbstractBlock';
+import AwaitBlock from './AwaitBlock';
+import Component from '../Component';
+import { TemplateNode } from '../../interfaces';
+import get_const_tags from './shared/get_const_tags';
+import ConstTag from './ConstTag';
+
+export default class ThenBlock extends AbstractBlock {
+	type: 'ThenBlock';
+	scope: TemplateScope;
+	const_tags: ConstTag[];
+
+	constructor(component: Component, parent: AwaitBlock, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+
+		this.scope = scope.child();
+		if (parent.then_node) {
+			parent.then_contexts.forEach(context => {
+				this.scope.add(context.key.name, parent.expression.dependencies, this);
+			});
+		}
+
+		([this.const_tags, this.children] = get_const_tags(info.children, component, this, parent));
+
+		if (!info.skip) {
+			this.warn_if_empty_block();
+		}
+	}
+}
diff --git a/src/compiler/compile/nodes/Title.ts b/src/compiler/compile/nodes/Title.ts
new file mode 100644
index 0000000000..0abedb2afc
--- /dev/null
+++ b/src/compiler/compile/nodes/Title.ts
@@ -0,0 +1,35 @@
+import Node from './shared/Node';
+import map_children, { Children } from './shared/map_children';
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
+import { TemplateNode } from '../../interfaces';
+import compiler_errors from '../compiler_errors';
+
+export default class Title extends Node {
+	type: 'Title';
+	children: Children;
+	should_cache: boolean;
+
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+		this.children = map_children(component, parent, scope, info.children);
+
+		if (info.attributes.length > 0) {
+			component.error(info.attributes[0], compiler_errors.illegal_attribute_title);
+			return;
+		}
+
+		info.children.forEach(child => {
+			if (child.type !== 'Text' && child.type !== 'MustacheTag') {
+				return component.error(child, compiler_errors.illegal_structure_title);
+			}
+		});
+
+		this.should_cache = info.children.length === 1
+			? (
+				info.children[0].type !== 'Identifier' ||
+				scope.names.has(info.children[0].name)
+			)
+			: true;
+	}
+}
diff --git a/src/compiler/compile/nodes/Transition.ts b/src/compiler/compile/nodes/Transition.ts
new file mode 100644
index 0000000000..3a4c5a04a7
--- /dev/null
+++ b/src/compiler/compile/nodes/Transition.ts
@@ -0,0 +1,37 @@
+import Node from './shared/Node';
+import Expression from './shared/Expression';
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
+import { TemplateNode } from '../../interfaces';
+import Element from './Element';
+import compiler_errors from '../compiler_errors';
+
+export default class Transition extends Node {
+	type: 'Transition';
+	name: string;
+	directive: string;
+	expression: Expression;
+	is_local: boolean;
+
+	constructor(component: Component, parent: Element, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+
+		component.warn_if_undefined(info.name, info, scope);
+
+		this.name = info.name;
+		component.add_reference(this as any, info.name.split('.')[0]);
+
+		this.directive = info.intro && info.outro ? 'transition' : info.intro ? 'in' : 'out';
+		this.is_local = info.modifiers.includes('local');
+
+		if ((info.intro && parent.intro) || (info.outro && parent.outro)) {
+			const parent_transition = (parent.intro || parent.outro);
+			component.error(info, compiler_errors.duplicate_transition(this.directive, parent_transition.directive));
+			return;
+		}
+
+		this.expression = info.expression
+			? new Expression(component, this, scope, info.expression)
+			: null;
+	}
+}
diff --git a/src/compiler/compile/nodes/Window.ts b/src/compiler/compile/nodes/Window.ts
new file mode 100644
index 0000000000..c5bec0acd3
--- /dev/null
+++ b/src/compiler/compile/nodes/Window.ts
@@ -0,0 +1,65 @@
+import Node from './shared/Node';
+import Binding from './Binding';
+import EventHandler from './EventHandler';
+import flatten_reference from '../utils/flatten_reference';
+import fuzzymatch from '../../utils/fuzzymatch';
+import list from '../../utils/list';
+import Action from './Action';
+import Component from '../Component';
+import TemplateScope from './shared/TemplateScope';
+import { TemplateNode } from '../../interfaces';
+import compiler_errors from '../compiler_errors';
+
+const valid_bindings = [
+	'innerWidth',
+	'innerHeight',
+	'outerWidth',
+	'outerHeight',
+	'scrollX',
+	'scrollY',
+	'online'
+];
+
+export default class Window extends Node {
+	type: 'Window';
+	handlers: EventHandler[] = [];
+	bindings: Binding[] = [];
+	actions: Action[] = [];
+
+	constructor(component: Component, parent: Node, scope: TemplateScope, info: TemplateNode) {
+		super(component, parent, scope, info);
+
+		info.attributes.forEach(node => {
+			if (node.type === 'EventHandler') {
+				this.handlers.push(new EventHandler(component, this, scope, node));
+			} else if (node.type === 'Binding') {
+				if (node.expression.type !== 'Identifier') {
+					const { parts } = flatten_reference(node.expression);
+
+					// TODO is this constraint necessary?
+					return component.error(node.expression, compiler_errors.invalid_binding_window(parts));
+				}
+
+				if (!~valid_bindings.indexOf(node.name)) {
+					const match = (
+						node.name === 'width' ? 'innerWidth' :
+							node.name === 'height' ? 'innerHeight' :
+								fuzzymatch(node.name, valid_bindings)
+					);
+
+					if (match) {
+						return component.error(node, compiler_errors.invalid_binding_on(node.name, '<svelte:window>', ` (did you mean '${match}'?)`));
+					} else {
+						return component.error(node, compiler_errors.invalid_binding_on(node.name, '<svelte:window>', ` — valid bindings are ${list(valid_bindings)}`));
+					}
+				}
+
+				this.bindings.push(new Binding(component, this, scope, node));
+			} else if (node.type === 'Action') {
+				this.actions.push(new Action(component, this, scope, node));
+			} else {
+				// TODO there shouldn't be anything else here...
+			}
+		});
+	}
+}
diff --git a/src/compiler/compile/nodes/interfaces.ts b/src/compiler/compile/nodes/interfaces.ts
new file mode 100644
index 0000000000..f023cad25c
--- /dev/null
+++ b/src/compiler/compile/nodes/interfaces.ts
@@ -0,0 +1,81 @@
+import Tag from './shared/Tag';
+
+import Action from './Action';
+import Animation from './Animation';
+import Attribute from './Attribute';
+import AwaitBlock from './AwaitBlock';
+import Binding from './Binding';
+import Body from './Body';
+import CatchBlock from './CatchBlock';
+import Class from './Class';
+import StyleDirective from './StyleDirective';
+import Comment from './Comment';
+import ConstTag from './ConstTag';
+import DebugTag from './DebugTag';
+import EachBlock from './EachBlock';
+import Element from './Element';
+import ElseBlock from './ElseBlock';
+import EventHandler from './EventHandler';
+import Fragment from './Fragment';
+import Head from './Head';
+import IfBlock from './IfBlock';
+import InlineComponent from './InlineComponent';
+import KeyBlock from './KeyBlock';
+import Let from './Let';
+import MustacheTag from './MustacheTag';
+import Options from './Options';
+import PendingBlock from './PendingBlock';
+import RawMustacheTag from './RawMustacheTag';
+import Slot from './Slot';
+import SlotTemplate from './SlotTemplate';
+import Text from './Text';
+import ThenBlock from './ThenBlock';
+import Title from './Title';
+import Transition from './Transition';
+import Window from './Window';
+
+// note: to write less types each of types in union below should have type defined as literal
+// https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#discriminating-unions
+export type INode = Action
+| Animation
+| Attribute
+| AwaitBlock
+| Binding
+| Body
+| CatchBlock
+| Class
+| Comment
+| ConstTag
+| DebugTag
+| EachBlock
+| Element
+| ElseBlock
+| EventHandler
+| Fragment
+| Head
+| IfBlock
+| InlineComponent
+| KeyBlock
+| Let
+| MustacheTag
+| Options
+| PendingBlock
+| RawMustacheTag
+| Slot
+| SlotTemplate
+| StyleDirective
+| Tag
+| Text
+| ThenBlock
+| Title
+| Transition
+| Window;
+
+export type INodeAllowConstTag =
+| IfBlock
+| ElseBlock
+| EachBlock
+| CatchBlock
+| ThenBlock
+| InlineComponent
+| SlotTemplate;
diff --git a/src/compiler/compile/nodes/shared/AbstractBlock.ts b/src/compiler/compile/nodes/shared/AbstractBlock.ts
new file mode 100644
index 0000000000..04917f5a6b
--- /dev/null
+++ b/src/compiler/compile/nodes/shared/AbstractBlock.ts
@@ -0,0 +1,24 @@
+import Block from '../../render_dom/Block';
+import Component from '../../Component';
+import Node from './Node';
+import { INode } from '../interfaces';
+import compiler_warnings from '../../compiler_warnings';
+
+export default class AbstractBlock extends Node {
+	block: Block;
+	children: INode[];
+
+	constructor(component: Component, parent, scope, info: any) {
+		super(component, parent, scope, info);
+	}
+
+	warn_if_empty_block() {
+		if (!this.children || this.children.length > 1) return;
+
+		const child = this.children[0];
+
+		if (!child || (child.type === 'Text' && !/[^ \r\n\f\v\t]/.test(child.data))) {
+			this.component.warn(this, compiler_warnings.empty_block);
+		}
+	}
+}
diff --git a/src/compiler/compile/nodes/shared/Context.ts b/src/compiler/compile/nodes/shared/Context.ts
new file mode 100644
index 0000000000..670f0531e6
--- /dev/null
+++ b/src/compiler/compile/nodes/shared/Context.ts
@@ -0,0 +1,195 @@
+import { x } from 'code-red';
+import { Node, Identifier, Expression } from 'estree';
+import { walk } from 'estree-walker';
+import is_reference, { NodeWithPropertyDefinition } from 'is-reference';
+import { clone } from '../../../utils/clone';
+import Component from '../../Component';
+import flatten_reference from '../../utils/flatten_reference';
+import TemplateScope from './TemplateScope';
+
+export interface Context {
+	key: Identifier;
+	name?: string;
+	modifier: (node: Node) => Node;
+	default_modifier: (node: Node, to_ctx: (name: string) => Node) => Node;
+}
+
+export function unpack_destructuring({
+	contexts,
+	node,
+	modifier = (node) => node,
+	default_modifier = (node) => node,
+	scope,
+	component
+}: {
+	contexts: Context[];
+	node: Node;
+	modifier?: Context['modifier'];
+	default_modifier?: Context['default_modifier'];
+	scope: TemplateScope;
+	component: Component;
+}) {
+	if (!node) return;
+
+	if (node.type === 'Identifier') {
+		contexts.push({
+			key: node as Identifier,
+			modifier,
+			default_modifier
+		});
+	} else if (node.type === 'RestElement') {
+		contexts.push({
+			key: node.argument as Identifier,
+			modifier,
+			default_modifier
+		});
+	} else if (node.type === 'ArrayPattern') {
+		node.elements.forEach((element, i) => {
+			if (element && element.type === 'RestElement') {
+				unpack_destructuring({
+					contexts,
+					node: element,
+					modifier: (node) => x`${modifier(node)}.slice(${i})` as Node,
+					default_modifier,
+					scope,
+					component
+				});
+			} else if (element && element.type === 'AssignmentPattern') {
+				const n = contexts.length;
+				mark_referenced(element.right, scope, component);
+
+				unpack_destructuring({
+					contexts,
+					node: element.left,
+					modifier: (node) => x`${modifier(node)}[${i}]`,
+					default_modifier: (node, to_ctx) =>
+						x`${node} !== undefined ? ${node} : ${update_reference(
+							contexts,
+							n,
+							element.right,
+							to_ctx
+						)}` as Node,
+					scope,
+					component
+				});
+			} else {
+				unpack_destructuring({
+					contexts,
+					node: element,
+					modifier: (node) => x`${modifier(node)}[${i}]` as Node,
+					default_modifier,
+					scope,
+					component
+				});
+			}
+		});
+	} else if (node.type === 'ObjectPattern') {
+		const used_properties = [];
+
+		node.properties.forEach((property) => {
+			if (property.type === 'RestElement') {
+				unpack_destructuring({
+					contexts,
+					node: property.argument,
+					modifier: (node) =>
+						x`@object_without_properties(${modifier(
+							node
+						)}, [${used_properties}])` as Node,
+					default_modifier,
+					scope,
+					component
+				});
+			} else {
+				const key = property.key as Identifier;
+				const value = property.value;
+
+				used_properties.push(x`"${key.name}"`);
+				if (value.type === 'AssignmentPattern') {
+					const n = contexts.length;
+
+					mark_referenced(value.right, scope, component);
+
+					unpack_destructuring({
+						contexts,
+						node: value.left,
+						modifier: (node) => x`${modifier(node)}.${key.name}`,
+						default_modifier: (node, to_ctx) =>
+							x`${node} !== undefined ? ${node} : ${update_reference(
+								contexts,
+								n,
+								value.right,
+								to_ctx
+							)}` as Node,
+						scope,
+						component
+					});
+				} else {
+					unpack_destructuring({
+						contexts,
+						node: value,
+						modifier: (node) => x`${modifier(node)}.${key.name}` as Node,
+						default_modifier,
+						scope,
+						component
+					});
+				}
+			}
+		});
+	}
+}
+
+function update_reference(
+	contexts: Context[],
+	n: number,
+	expression: Expression,
+	to_ctx: (name: string) => Node
+): Node {
+	const find_from_context = (node: Identifier) => {
+		for (let i = n; i < contexts.length; i++) {
+			const { key } = contexts[i];
+			if (node.name === key.name) {
+				throw new Error(`Cannot access '${node.name}' before initialization`);
+			}
+		}
+		return to_ctx(node.name);
+	};
+
+	if (expression.type === 'Identifier') {
+		return find_from_context(expression);
+	}
+
+	// NOTE: avoid unnecessary deep clone?
+	expression = clone(expression) as Expression;
+	walk(expression, {
+		enter(node, parent: Node) {
+			if (
+				is_reference(
+					node as NodeWithPropertyDefinition,
+					parent as NodeWithPropertyDefinition
+				)
+			) {
+				this.replace(find_from_context(node as Identifier));
+				this.skip();
+			}
+		}
+	});
+
+	return expression;
+}
+
+function mark_referenced(
+	node: Node,
+	scope: TemplateScope,
+	component: Component
+) {
+	walk(node, {
+		enter(node: any, parent: any) {
+			if (is_reference(node, parent)) {
+				const { name } = flatten_reference(node);
+				if (!scope.is_let(name) && !scope.names.has(name)) {
+					component.add_reference(node, name);
+				}
+			}
+		}
+	});
+}
diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts
new file mode 100644
index 0000000000..a773355e31
--- /dev/null
+++ b/src/compiler/compile/nodes/shared/Expression.ts
@@ -0,0 +1,430 @@
+import Component from '../../Component';
+import { walk } from 'estree-walker';
+import is_reference from 'is-reference';
+import flatten_reference from '../../utils/flatten_reference';
+import { create_scopes, Scope, extract_names } from '../../utils/scope';
+import { sanitize } from '../../../utils/names';
+import TemplateScope from './TemplateScope';
+import get_object from '../../utils/get_object';
+import Block from '../../render_dom/Block';
+import is_dynamic from '../../render_dom/wrappers/shared/is_dynamic';
+import { b } from 'code-red';
+import { invalidate } from '../../render_dom/invalidate';
+import { Node, FunctionExpression, Identifier } from 'estree';
+import { INode } from '../interfaces';
+import { is_reserved_keyword } from '../../utils/reserved_keywords';
+import replace_object from '../../utils/replace_object';
+import is_contextual from './is_contextual';
+import EachBlock from '../EachBlock';
+import { clone } from '../../../utils/clone';
+import compiler_errors from '../../compiler_errors';
+
+type Owner = INode;
+
+export default class Expression {
+	type: 'Expression' = 'Expression';
+	component: Component;
+	owner: Owner;
+	node: Node;
+	references: Set<string> = new Set();
+	dependencies: Set<string> = new Set();
+	contextual_dependencies: Set<string> = new Set();
+
+	template_scope: TemplateScope;
+	scope: Scope;
+	scope_map: WeakMap<Node, Scope>;
+
+	declarations: Array<(Node | Node[])> = [];
+	uses_context = false;
+
+	manipulated: Node;
+
+	constructor(component: Component, owner: Owner, template_scope: TemplateScope, info: Node, lazy?: boolean) {
+		// TODO revert to direct property access in prod?
+		Object.defineProperties(this, {
+			component: {
+				value: component
+			}
+		});
+
+		this.node = info;
+		this.template_scope = template_scope;
+		this.owner = owner;
+
+		const { dependencies, contextual_dependencies, references } = this;
+
+		let { map, scope } = create_scopes(info);
+		this.scope = scope;
+		this.scope_map = map;
+
+		const expression = this;
+		let function_expression;
+
+		// discover dependencies, but don't change the code yet
+		walk(info, {
+			enter(node: any, parent: any, key: string) {
+				// don't manipulate shorthand props twice
+				if (key === 'key' && parent.shorthand) return;
+				// don't manipulate `import.meta`, `new.target`
+				if (node.type === 'MetaProperty') return this.skip();
+
+				if (map.has(node)) {
+					scope = map.get(node);
+				}
+
+				if (!function_expression && /FunctionExpression/.test(node.type)) {
+					function_expression = node;
+				}
+
+				if (is_reference(node, parent)) {
+					const { name, nodes } = flatten_reference(node);
+					references.add(name);
+
+					if (scope.has(name)) return;
+
+					if (name[0] === '$') {
+						const store_name = name.slice(1);
+						if (template_scope.names.has(store_name) || scope.has(store_name)) {
+							return component.error(node, compiler_errors.contextual_store);
+						}
+					}
+
+					if (template_scope.is_let(name)) {
+						if (!lazy) {
+							contextual_dependencies.add(name);
+							dependencies.add(name);
+						}
+					} else if (template_scope.names.has(name)) {
+						expression.uses_context = true;
+
+						contextual_dependencies.add(name);
+
+						const owner = template_scope.get_owner(name);
+						const is_index = owner.type === 'EachBlock' && owner.key && name === owner.index;
+
+						if (!lazy || is_index) {
+							template_scope.dependencies_for_name.get(name).forEach(name => dependencies.add(name));
+						}
+					} else {
+						if (!lazy) {
+							dependencies.add(name);
+						}
+
+						component.add_reference(node, name);
+						component.warn_if_undefined(name, nodes[0], template_scope);
+					}
+
+					this.skip();
+				}
+
+				// track any assignments from template expressions as mutable
+				let names;
+				let deep = false;
+
+				if (function_expression) {
+					if (node.type === 'AssignmentExpression') {
+						deep = node.left.type === 'MemberExpression';
+						names = extract_names(deep ? get_object(node.left) : node.left);
+					} else if (node.type === 'UpdateExpression') {
+						names = extract_names(get_object(node.argument));
+					}
+				}
+
+				if (names) {
+					names.forEach(name => {
+						if (template_scope.names.has(name)) {
+							if (template_scope.is_const(name)) {
+								component.error(node, compiler_errors.invalid_const_update(name));
+							}
+
+							template_scope.dependencies_for_name.get(name).forEach(name => {
+								const variable = component.var_lookup.get(name);
+								if (variable) variable[deep ? 'mutated' : 'reassigned'] = true;
+							});
+							const each_block = template_scope.get_owner(name);
+							(each_block as EachBlock).has_binding = true;
+						} else {
+							component.add_reference(node, name);
+
+							const variable = component.var_lookup.get(name);
+							if (variable) variable[deep ? 'mutated' : 'reassigned'] = true;
+						}
+					});
+				}
+			},
+
+			leave(node: Node) {
+				if (map.has(node)) {
+					scope = scope.parent;
+				}
+
+				if (node === function_expression) {
+					function_expression = null;
+				}
+			}
+		});
+	}
+
+	dynamic_dependencies() {
+		return Array.from(this.dependencies).filter(name => {
+			if (this.template_scope.is_let(name)) return true;
+			if (is_reserved_keyword(name)) return true;
+
+			const variable = this.component.var_lookup.get(name);
+			return is_dynamic(variable);
+		});
+	}
+
+	// TODO move this into a render-dom wrapper?
+	manipulate(block?: Block, ctx?: string | void) {
+		// TODO ideally we wouldn't end up calling this method
+		// multiple times
+		if (this.manipulated) return this.manipulated;
+
+		const {
+			component,
+			declarations,
+			scope_map: map,
+			template_scope,
+			owner
+		} = this;
+		let scope = this.scope;
+
+		let function_expression;
+
+		let dependencies: Set<string>;
+		let contextual_dependencies: Set<string>;
+
+		const node = walk(this.node, {
+			enter(node: any, parent: any) {
+				if (node.type === 'Property' && node.shorthand) {
+					node.value = clone(node.value);
+					node.shorthand = false;
+				}
+
+				if (map.has(node)) {
+					scope = map.get(node);
+				}
+
+				if (node.type === 'Identifier' && is_reference(node, parent)) {
+					const { name } = flatten_reference(node);
+
+					if (scope.has(name)) return;
+
+					if (function_expression) {
+						if (template_scope.names.has(name)) {
+							contextual_dependencies.add(name);
+
+							template_scope.dependencies_for_name.get(name).forEach(dependency => {
+								dependencies.add(dependency);
+							});
+						} else {
+							dependencies.add(name);
+							component.add_reference(node, name); // TODO is this redundant/misplaced?
+						}
+					} else if (is_contextual(component, template_scope, name)) {
+						const reference = block.renderer.reference(node, ctx);
+						this.replace(reference);
+					}
+
+					this.skip();
+				}
+
+				if (!function_expression) {
+					if (node.type === 'AssignmentExpression') {
+						// TODO should this be a warning/error? `<p>{foo = 1}</p>`
+					}
+
+					if (node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression') {
+						function_expression = node;
+						dependencies = new Set();
+						contextual_dependencies = new Set();
+					}
+				}
+			},
+
+			leave(node: Node, parent: Node) {
+				if (map.has(node)) scope = scope.parent;
+
+				if (node === function_expression) {
+					const id = component.get_unique_name(
+						sanitize(get_function_name(node, owner))
+					);
+
+					const declaration = b`const ${id} = ${node}`;
+
+					if (owner.type === 'ConstTag') {
+						let child_scope = scope;
+						walk(node, {
+							enter(node: Node, parent: any) {
+								if (map.has(node)) child_scope = map.get(node);
+								if (node.type === 'Identifier' && is_reference(node, parent)) {
+									if (child_scope.has(node.name)) return;
+									this.replace(block.renderer.reference(node, ctx));
+								}
+							},
+							leave(node: Node) {
+								if (map.has(node)) child_scope = child_scope.parent;
+							}
+						});
+					} else if (dependencies.size === 0 && contextual_dependencies.size === 0) {
+						// we can hoist this out of the component completely
+						component.fully_hoisted.push(declaration);
+
+						this.replace(id as any);
+
+						component.add_var(node, {
+							name: id.name,
+							internal: true,
+							hoistable: true,
+							referenced: true
+						});
+					} else if (contextual_dependencies.size === 0) {
+						// function can be hoisted inside the component init
+						component.partly_hoisted.push(declaration);
+
+						block.renderer.add_to_context(id.name);
+						this.replace(block.renderer.reference(id));
+					} else {
+						// we need a combo block/init recipe
+						const deps = Array.from(contextual_dependencies);
+						const function_expression = node as FunctionExpression;
+
+						const has_args = function_expression.params.length > 0;
+						function_expression.params = [
+							...deps.map(name => ({ type: 'Identifier', name } as Identifier)),
+							...function_expression.params
+						];
+
+						const context_args = deps.map(name => block.renderer.reference(name));
+
+						component.partly_hoisted.push(declaration);
+
+						block.renderer.add_to_context(id.name);
+						const callee = block.renderer.reference(id);
+
+						this.replace(id as any);
+
+						const func_declaration = has_args
+							? b`function ${id}(...args) {
+								return ${callee}(${context_args}, ...args);
+							}`
+							: b`function ${id}() {
+								return ${callee}(${context_args});
+							}`;
+
+						if (owner.type === 'Attribute' && owner.parent.name === 'slot') {
+							const dep_scopes = new Set<INode>(deps.map(name => template_scope.get_owner(name)));
+							// find the nearest scopes
+							let node: INode = owner.parent;
+							while (node && !dep_scopes.has(node)) {
+								node = node.parent;
+							}
+
+							const func_expression = func_declaration[0];
+
+							if (node.type === 'InlineComponent') {
+								// <Comp let:data />
+								this.replace(func_expression);
+							} else {
+								// {#each}, {#await}
+								const func_id = component.get_unique_name(id.name + '_func');
+								block.renderer.add_to_context(func_id.name, true);
+								// rename #ctx -> child_ctx;
+								walk(func_expression, {
+									enter(node: Node) {
+										if (node.type === 'Identifier' && node.name === '#ctx') {
+											node.name = 'child_ctx';
+										}
+									}
+								});
+								// add to get_xxx_context
+								// child_ctx[x] = function () { ... }
+								(template_scope.get_owner(deps[0]) as EachBlock).contexts.push({
+									key: func_id,
+									modifier: () => func_expression,
+									default_modifier: node => node
+								});
+								this.replace(block.renderer.reference(func_id));
+							}
+						} else {
+							declarations.push(func_declaration);
+						}
+					}
+
+					function_expression = null;
+					dependencies = null;
+					contextual_dependencies = null;
+
+					if (parent && parent.type === 'Property') {
+						parent.method = false;
+					}
+				}
+
+				if (node.type === 'AssignmentExpression' || node.type === 'UpdateExpression') {
+					const assignee = node.type === 'AssignmentExpression' ? node.left : node.argument;
+
+					const object_name = get_object(assignee).name;
+
+					if (scope.has(object_name)) return;
+
+					// normally (`a = 1`, `b.c = 2`), there'll be a single name
+					// (a or b). In destructuring cases (`[d, e] = [e, d]`) there
+					// may be more, in which case we need to tack the extra ones
+					// onto the initial function call
+					const names = new Set(extract_names(assignee as Node));
+
+					const traced: Set<string> = new Set();
+					names.forEach(name => {
+						const dependencies = template_scope.dependencies_for_name.get(name);
+						if (dependencies) {
+							dependencies.forEach(name => traced.add(name));
+						} else {
+							traced.add(name);
+						}
+					});
+
+					const context = block.bindings.get(object_name);
+
+					if (context) {
+						// for `{#each array as item}`
+						// replace `item = 1` to `each_array[each_index] = 1`, this allow us to mutate the array
+						// rather than mutating the local `item` variable
+						const { snippet, object, property } = context;
+						const replaced: any = replace_object(assignee, snippet);
+						if (node.type === 'AssignmentExpression') {
+							node.left = replaced;
+						} else {
+							node.argument = replaced;
+						}
+						contextual_dependencies.add(object.name);
+						contextual_dependencies.add(property.name);
+					}
+
+					this.replace(invalidate(block.renderer, scope, node, traced));
+				}
+			}
+		});
+
+		if (declarations.length > 0) {
+			block.maintain_context = true;
+			declarations.forEach(declaration => {
+				block.chunks.init.push(declaration);
+			});
+		}
+
+		return (this.manipulated = node as Node);
+	}
+}
+
+function get_function_name(_node, parent) {
+	if (parent.type === 'EventHandler') {
+		return `${parent.name}_handler`;
+	}
+
+	if (parent.type === 'Action') {
+		return `${parent.name}_function`;
+	}
+
+	return 'func';
+}
diff --git a/src/compiler/compile/nodes/shared/Node.ts b/src/compiler/compile/nodes/shared/Node.ts
new file mode 100644
index 0000000000..3c39f6d9d3
--- /dev/null
+++ b/src/compiler/compile/nodes/shared/Node.ts
@@ -0,0 +1,72 @@
+import Attribute from '../Attribute';
+import Component from '../../Component';
+import { INode } from '../interfaces';
+import Text from '../Text';
+import { TemplateNode } from '../../../interfaces';
+
+export default class Node {
+	readonly start: number;
+	readonly end: number;
+	readonly component: Component;
+	readonly parent: INode;
+	readonly type: string;
+
+	prev?: INode;
+	next?: INode;
+
+	can_use_innerhtml: boolean;
+	var: string;
+	attributes: Attribute[];
+
+	constructor(component: Component, parent: Node, _scope, info: TemplateNode) {
+		this.start = info.start;
+		this.end = info.end;
+		this.type = info.type;
+
+		// this makes properties non-enumerable, which makes logging
+		// bearable. might have a performance cost. TODO remove in prod?
+		Object.defineProperties(this, {
+			component: {
+				value: component
+			},
+			parent: {
+				value: parent
+			}
+		});
+	}
+
+	cannot_use_innerhtml() {
+		if (this.can_use_innerhtml !== false) {
+			this.can_use_innerhtml = false;
+			if (this.parent) this.parent.cannot_use_innerhtml();
+		}
+	}
+
+	find_nearest(selector: RegExp) {
+		if (selector.test(this.type)) return this;
+		if (this.parent) return this.parent.find_nearest(selector);
+	}
+
+	get_static_attribute_value(name: string) {
+		const attribute = this.attributes && this.attributes.find(
+			(attr: Attribute) => attr.type === 'Attribute' && attr.name.toLowerCase() === name
+		);
+
+		if (!attribute) return null;
+
+		if (attribute.is_true) return true;
+		if (attribute.chunks.length === 0) return '';
+
+		if (attribute.chunks.length === 1 && attribute.chunks[0].type === 'Text') {
+			return (attribute.chunks[0] as Text).data;
+		}
+
+		return null;
+	}
+
+	has_ancestor(type: string) {
+		return this.parent ?
+			this.parent.type === type || this.parent.has_ancestor(type) :
+			false;
+	}
+}
diff --git a/src/compiler/compile/nodes/shared/Tag.ts b/src/compiler/compile/nodes/shared/Tag.ts
new file mode 100644
index 0000000000..bc826458d9
--- /dev/null
+++ b/src/compiler/compile/nodes/shared/Tag.ts
@@ -0,0 +1,18 @@
+import Node from './Node';
+import Expression from './Expression';
+
+export default class Tag extends Node {
+	type: 'MustacheTag' | 'RawMustacheTag';
+	expression: Expression;
+	should_cache: boolean;
+
+	constructor(component, parent, scope, info) {
+		super(component, parent, scope, info);
+		this.expression = new Expression(component, this, scope, info.expression);
+
+		this.should_cache = (
+			info.expression.type !== 'Identifier' ||
+			(this.expression.dependencies.size && scope.names.has(info.expression.name))
+		);
+	}
+}
diff --git a/src/compiler/compile/nodes/shared/TemplateScope.ts b/src/compiler/compile/nodes/shared/TemplateScope.ts
new file mode 100644
index 0000000000..eae8640ca0
--- /dev/null
+++ b/src/compiler/compile/nodes/shared/TemplateScope.ts
@@ -0,0 +1,57 @@
+import EachBlock from '../EachBlock';
+import ThenBlock from '../ThenBlock';
+import CatchBlock from '../CatchBlock';
+import InlineComponent from '../InlineComponent';
+import Element from '../Element';
+import SlotTemplate from '../SlotTemplate';
+import ConstTag from '../ConstTag';
+
+type NodeWithScope = EachBlock | ThenBlock | CatchBlock | InlineComponent | Element | SlotTemplate | ConstTag;
+
+export default class TemplateScope {
+	names: Set<string>;
+	dependencies_for_name: Map<string, Set<string>>;
+	owners: Map<string, NodeWithScope> = new Map();
+	parent?: TemplateScope;
+
+	constructor(parent?: TemplateScope) {
+		this.parent = parent;
+		this.names = new Set(parent ? parent.names : []);
+		this.dependencies_for_name = new Map(parent ? parent.dependencies_for_name : []);
+	}
+
+	add(name, dependencies: Set<string>, owner) {
+		this.names.add(name);
+		this.dependencies_for_name.set(name, dependencies);
+		this.owners.set(name, owner);
+		return this;
+	}
+
+	child() {
+		const child = new TemplateScope(this);
+		return child;
+	}
+
+	is_top_level(name: string) {
+		return !this.parent || !this.names.has(name) && this.parent.is_top_level(name);
+	}
+
+	get_owner(name: string): NodeWithScope {
+		return this.owners.get(name) || (this.parent && this.parent.get_owner(name));
+	}
+
+	is_let(name: string) {
+		const owner = this.get_owner(name);
+		return owner && (owner.type === 'Element' || owner.type === 'InlineComponent' || owner.type === 'SlotTemplate');
+	}
+
+	is_await(name: string) {
+		const owner = this.get_owner(name);
+		return owner && (owner.type === 'ThenBlock' || owner.type === 'CatchBlock');
+	}
+
+	is_const(name: string) {
+		const owner = this.get_owner(name);
+		return owner && owner.type === 'ConstTag';
+	}
+}
diff --git a/src/compiler/compile/nodes/shared/get_const_tags.ts b/src/compiler/compile/nodes/shared/get_const_tags.ts
new file mode 100644
index 0000000000..77bc26fe9c
--- /dev/null
+++ b/src/compiler/compile/nodes/shared/get_const_tags.ts
@@ -0,0 +1,91 @@
+import { TemplateNode, ConstTag as ConstTagType } from '../../../interfaces';
+import Component from '../../Component';
+import ConstTag from '../ConstTag';
+import map_children from './map_children';
+import { INodeAllowConstTag, INode } from '../interfaces';
+import check_graph_for_cycles from '../../utils/check_graph_for_cycles';
+import compiler_errors from '../../compiler_errors';
+
+export default function get_const_tags(children: TemplateNode[], component: Component, node: INodeAllowConstTag, parent: INode): [ConstTag[], Array<Exclude<INode, ConstTag>>] {
+  const const_tags: ConstTagType[] = [];
+  const others: Array<Exclude<TemplateNode, ConstTagType>> = [];
+
+  for (const child of children) {
+    if (child.type === 'ConstTag') {
+      const_tags.push(child as ConstTagType);
+    } else {
+      others.push(child);
+    }
+  }
+
+  const consts_nodes = const_tags.map(tag => new ConstTag(component, node, node.scope, tag));
+  const sorted_consts_nodes = sort_consts_nodes(consts_nodes, component);
+  sorted_consts_nodes.forEach(node => node.parse_expression());
+
+  const children_nodes = map_children(component, parent, node.scope, others);
+
+  return [sorted_consts_nodes, children_nodes as Array<Exclude<INode, ConstTag>>];
+}
+
+function sort_consts_nodes(consts_nodes: ConstTag[], component: Component) {
+  type ConstNode = {
+    assignees: Set<string>;
+    dependencies: Set<string>;
+    node: ConstTag;
+  };
+  const sorted_consts_nodes: ConstNode[] = [];
+
+  const unsorted_consts_nodes: ConstNode[] = consts_nodes.map(node => {
+    return {
+      assignees: node.assignees,
+      dependencies: node.dependencies,
+      node
+    };
+  });
+
+  const lookup = new Map();
+
+  unsorted_consts_nodes.forEach(node => {
+    node.assignees.forEach(name => {
+      if (!lookup.has(name)) {
+        lookup.set(name, []);
+      }
+      lookup.get(name).push(node);
+    });
+  });
+
+  const cycle = check_graph_for_cycles(unsorted_consts_nodes.reduce((acc, node) => {
+    node.assignees.forEach(v => {
+      node.dependencies.forEach(w => {
+        if (!node.assignees.has(w)) {
+          acc.push([v, w]);
+        }
+      });
+    });
+    return acc;
+  }, []));
+
+  if (cycle && cycle.length) {
+    const nodeList = lookup.get(cycle[0]);
+    const node = nodeList[0];
+    component.error(node.node, compiler_errors.cyclical_const_tags(cycle));
+  }
+
+  const add_node = (node: ConstNode) => {
+    if (sorted_consts_nodes.includes(node)) return;
+
+    node.dependencies.forEach(name => {
+      if (node.assignees.has(name)) return;
+      const earlier_nodes = lookup.get(name);
+      if (earlier_nodes) {
+        earlier_nodes.forEach(add_node);
+      }
+    });
+
+    sorted_consts_nodes.push(node);
+  };
+
+  unsorted_consts_nodes.forEach(add_node);
+
+  return sorted_consts_nodes.map(node => node.node);
+}
diff --git a/src/compiler/compile/nodes/shared/is_contextual.ts b/src/compiler/compile/nodes/shared/is_contextual.ts
new file mode 100644
index 0000000000..b1ef398237
--- /dev/null
+++ b/src/compiler/compile/nodes/shared/is_contextual.ts
@@ -0,0 +1,18 @@
+import Component from '../../Component';
+import TemplateScope from './TemplateScope';
+import { is_reserved_keyword } from '../../utils/reserved_keywords';
+
+export default function is_contextual(component: Component, scope: TemplateScope, name: string) {
+	if (is_reserved_keyword(name)) return true;
+
+	// if it's a name below root scope, it's contextual
+	if (!scope.is_top_level(name)) return true;
+
+	const variable = component.var_lookup.get(name);
+
+	// hoistables, module declarations, and imports are non-contextual
+	if (!variable || variable.hoistable) return false;
+
+	// assume contextual
+	return true;
+}
diff --git a/src/compiler/compile/nodes/shared/map_children.ts b/src/compiler/compile/nodes/shared/map_children.ts
new file mode 100644
index 0000000000..e6ad1d7f6e
--- /dev/null
+++ b/src/compiler/compile/nodes/shared/map_children.ts
@@ -0,0 +1,73 @@
+import AwaitBlock from '../AwaitBlock';
+import Body from '../Body';
+import ConstTag from '../ConstTag';
+import Comment from '../Comment';
+import EachBlock from '../EachBlock';
+import Element from '../Element';
+import Head from '../Head';
+import IfBlock from '../IfBlock';
+import InlineComponent from '../InlineComponent';
+import KeyBlock from '../KeyBlock';
+import MustacheTag from '../MustacheTag';
+import Options from '../Options';
+import RawMustacheTag from '../RawMustacheTag';
+import DebugTag from '../DebugTag';
+import Slot from '../Slot';
+import SlotTemplate from '../SlotTemplate';
+import Text from '../Text';
+import Title from '../Title';
+import Window from '../Window';
+import { TemplateNode } from '../../../interfaces';
+import { push_array } from '../../../utils/push_array';
+
+export type Children = ReturnType<typeof map_children>;
+
+function get_constructor(type) {
+	switch (type) {
+		case 'AwaitBlock': return AwaitBlock;
+		case 'Body': return Body;
+		case 'Comment': return Comment;
+		case 'ConstTag': return ConstTag;
+		case 'EachBlock': return EachBlock;
+		case 'Element': return Element;
+		case 'Head': return Head;
+		case 'IfBlock': return IfBlock;
+		case 'InlineComponent': return InlineComponent;
+		case 'KeyBlock': return KeyBlock;
+		case 'MustacheTag': return MustacheTag;
+		case 'Options': return Options;
+		case 'RawMustacheTag': return RawMustacheTag;
+		case 'DebugTag': return DebugTag;
+		case 'Slot': return Slot;
+		case 'SlotTemplate': return SlotTemplate;
+		case 'Text': return Text;
+		case 'Title': return Title;
+		case 'Window': return Window;
+		default: throw new Error(`Not implemented: ${type}`);
+	}
+}
+
+export default function map_children(component, parent, scope, children: TemplateNode[]) {
+	let last = null;
+	let ignores = [];
+
+	return children.map(child => {
+		const constructor = get_constructor(child.type);
+
+		const use_ignores = child.type !== 'Text' && child.type !== 'Comment' && ignores.length;
+
+		if (use_ignores) component.push_ignores(ignores);
+		const node = new constructor(component, parent, scope, child);
+		if (use_ignores) component.pop_ignores(), ignores = [];
+
+		if (node.type === 'Comment' && node.ignores.length) {
+			push_array(ignores, node.ignores);
+		}
+
+		if (last) last.next = node;
+		node.prev = last;
+		last = node;
+
+		return node;
+	});
+}
diff --git a/src/compiler/compile/render_dom/Block.ts b/src/compiler/compile/render_dom/Block.ts
new file mode 100644
index 0000000000..34c4774804
--- /dev/null
+++ b/src/compiler/compile/render_dom/Block.ts
@@ -0,0 +1,502 @@
+import Renderer from './Renderer';
+import Wrapper from './wrappers/shared/Wrapper';
+import { b, x } from 'code-red';
+import { Node, Identifier, ArrayPattern } from 'estree';
+import { is_head } from './wrappers/shared/is_head';
+
+export interface Bindings {
+	object: Identifier;
+	property: Identifier;
+	snippet: Node;
+	store: string;
+	modifier: (node: Node) => Node;
+}
+
+export interface BlockOptions {
+	parent?: Block;
+	name: Identifier;
+	type: string;
+	renderer?: Renderer;
+	comment?: string;
+	key?: Identifier;
+	bindings?: Map<string, Bindings>;
+	dependencies?: Set<string>;
+}
+
+export default class Block {
+	parent?: Block;
+	renderer: Renderer;
+	name: Identifier;
+	type: string;
+	comment?: string;
+
+	wrappers: Wrapper[];
+
+	key: Identifier;
+	first: Identifier;
+
+	dependencies: Set<string> = new Set();
+
+	bindings: Map<string, Bindings>;
+	binding_group_initialised: Set<string> = new Set();
+
+	chunks: {
+		declarations: Array<Node | Node[]>;
+		init: Array<Node | Node[]>;
+		create: Array<Node | Node[]>;
+		claim: Array<Node | Node[]>;
+		hydrate: Array<Node | Node[]>;
+		mount: Array<Node | Node[]>;
+		measure: Array<Node | Node[]>;
+		restore_measurements: Array<Node | Node[]>;
+		fix: Array<Node | Node[]>;
+		animate: Array<Node | Node[]>;
+		intro: Array<Node | Node[]>;
+		update: Array<Node | Node[]>;
+		outro: Array<Node | Node[]>;
+		destroy: Array<Node | Node[]>;
+	};
+
+	event_listeners: Node[] = [];
+
+	maintain_context: boolean;
+	has_animation: boolean;
+	has_intros: boolean;
+	has_outros: boolean;
+	has_intro_method: boolean; // could have the method without the transition, due to siblings
+	has_outro_method: boolean;
+	outros: number;
+
+	aliases: Map<string, Identifier>;
+	variables: Map<string, { id: Identifier; init?: Node }> = new Map();
+	get_unique_name: (name: string) => Identifier;
+
+	has_update_method = false;
+	autofocus?: { element_var: string, condition_expression?: any };
+
+	constructor(options: BlockOptions) {
+		this.parent = options.parent;
+		this.renderer = options.renderer;
+		this.name = options.name;
+		this.type = options.type;
+		this.comment = options.comment;
+
+		this.wrappers = [];
+
+		// for keyed each blocks
+		this.key = options.key;
+		this.first = null;
+
+		this.bindings = options.bindings;
+
+		this.chunks = {
+			declarations: [],
+			init: [],
+			create: [],
+			claim: [],
+			hydrate: [],
+			mount: [],
+			measure: [],
+			restore_measurements: [],
+			fix: [],
+			animate: [],
+			intro: [],
+			update: [],
+			outro: [],
+			destroy: []
+		};
+
+		this.has_animation = false;
+		this.has_intro_method = false; // a block could have an intro method but not intro transitions, e.g. if a sibling block has intros
+		this.has_outro_method = false;
+		this.outros = 0;
+
+		this.get_unique_name = this.renderer.component.get_unique_name_maker();
+
+		this.aliases = new Map();
+		if (this.key) this.aliases.set('key', this.get_unique_name('key'));
+	}
+
+	assign_variable_names() {
+		const seen: Set<string> = new Set();
+		const dupes: Set<string> = new Set();
+
+		let i = this.wrappers.length;
+
+		while (i--) {
+			const wrapper = this.wrappers[i];
+
+			if (!wrapper.var) continue;
+
+			if (seen.has(wrapper.var.name)) {
+				dupes.add(wrapper.var.name);
+			}
+
+			seen.add(wrapper.var.name);
+		}
+
+		const counts = new Map();
+		i = this.wrappers.length;
+
+		while (i--) {
+			const wrapper = this.wrappers[i];
+
+			if (!wrapper.var) continue;
+
+			let suffix = '';
+			if (dupes.has(wrapper.var.name)) {
+				const i = counts.get(wrapper.var.name) || 0;
+				counts.set(wrapper.var.name, i + 1);
+				suffix = i;
+			}
+			wrapper.var.name = this.get_unique_name(wrapper.var.name + suffix).name;
+		}
+	}
+
+	add_dependencies(dependencies: Set<string>) {
+		dependencies.forEach(dependency => {
+			this.dependencies.add(dependency);
+		});
+
+		this.has_update_method = true;
+		if (this.parent) {
+			this.parent.add_dependencies(dependencies);
+		}
+	}
+
+	add_element(
+		id: Identifier,
+		render_statement: Node,
+		claim_statement: Node,
+		parent_node: Node,
+		no_detach?: boolean
+	) {
+		this.add_variable(id);
+		this.chunks.create.push(b`${id} = ${render_statement};`);
+
+		if (this.renderer.options.hydratable) {
+			this.chunks.claim.push(b`${id} = ${claim_statement || render_statement};`);
+		}
+
+		if (parent_node) {
+			this.chunks.mount.push(b`@append(${parent_node}, ${id});`);
+			if (is_head(parent_node) && !no_detach) this.chunks.destroy.push(b`@detach(${id});`);
+		} else {
+			this.chunks.mount.push(b`@insert(#target, ${id}, #anchor);`);
+			if (!no_detach) this.chunks.destroy.push(b`if (detaching) @detach(${id});`);
+		}
+	}
+
+	add_intro(local?: boolean) {
+		this.has_intros = this.has_intro_method = true;
+		if (!local && this.parent) this.parent.add_intro();
+	}
+
+	add_outro(local?: boolean) {
+		this.has_outros = this.has_outro_method = true;
+		this.outros += 1;
+		if (!local && this.parent) this.parent.add_outro();
+	}
+
+	add_animation() {
+		this.has_animation = true;
+	}
+
+	add_variable(id: Identifier, init?: Node) {
+		if (this.variables.has(id.name)) {
+			throw new Error(
+				`Variable '${id.name}' already initialised with a different value`
+			);
+		}
+
+		this.variables.set(id.name, { id, init });
+	}
+
+	alias(name: string) {
+		if (!this.aliases.has(name)) {
+			this.aliases.set(name, this.get_unique_name(name));
+		}
+
+		return this.aliases.get(name);
+	}
+
+	child(options: BlockOptions) {
+		return new Block(Object.assign({}, this, { key: null }, options, { parent: this }));
+	}
+
+	get_contents(key?: any) {
+		const { dev } = this.renderer.options;
+
+		if (this.has_outros) {
+			this.add_variable({ type: 'Identifier', name: '#current' });
+
+			if (this.chunks.intro.length > 0) {
+				this.chunks.intro.push(b`#current = true;`);
+				this.chunks.mount.push(b`#current = true;`);
+			}
+
+			if (this.chunks.outro.length > 0) {
+				this.chunks.outro.push(b`#current = false;`);
+			}
+		}
+
+		if (this.autofocus) {
+			if (this.autofocus.condition_expression) {
+				this.chunks.mount.push(b`if (${this.autofocus.condition_expression}) ${this.autofocus.element_var}.focus();`);
+			} else {
+				this.chunks.mount.push(b`${this.autofocus.element_var}.focus();`);
+			}
+		}
+
+		this.render_listeners();
+
+		const properties: Record<string, any> = {};
+
+		const noop = x`@noop`;
+
+		properties.key = key;
+
+		if (this.first) {
+			properties.first = x`null`;
+			this.chunks.hydrate.push(b`this.first = ${this.first};`);
+		}
+
+		if (this.chunks.create.length === 0 && this.chunks.hydrate.length === 0) {
+			properties.create = noop;
+		} else {
+			const hydrate = this.chunks.hydrate.length > 0 && (
+				this.renderer.options.hydratable
+					? b`this.h();`
+					: this.chunks.hydrate
+			);
+
+			properties.create = x`function #create() {
+				${this.chunks.create}
+				${hydrate}
+			}`;
+		}
+
+		if (this.renderer.options.hydratable || this.chunks.claim.length > 0) {
+			if (this.chunks.claim.length === 0 && this.chunks.hydrate.length === 0) {
+				properties.claim = noop;
+			} else {
+				properties.claim = x`function #claim(#nodes) {
+					${this.chunks.claim}
+					${this.renderer.options.hydratable && this.chunks.hydrate.length > 0 && b`this.h();`}
+				}`;
+			}
+		}
+
+		if (this.renderer.options.hydratable && this.chunks.hydrate.length > 0) {
+			properties.hydrate = x`function #hydrate() {
+				${this.chunks.hydrate}
+			}`;
+		}
+
+		if (this.chunks.mount.length === 0) {
+			properties.mount = noop;
+		} else if (this.event_listeners.length === 0) {
+			properties.mount = x`function #mount(#target, #anchor) {
+				${this.chunks.mount}
+			}`;
+		} else {
+			properties.mount = x`function #mount(#target, #anchor) {
+				${this.chunks.mount}
+			}`;
+		}
+
+		if (this.has_update_method || this.maintain_context) {
+			if (this.chunks.update.length === 0 && !this.maintain_context) {
+				properties.update = noop;
+			} else {
+				const ctx = this.maintain_context ? x`#new_ctx` : x`#ctx`;
+
+				let dirty: Identifier | ArrayPattern = { type: 'Identifier', name: '#dirty' };
+				if (!this.renderer.context_overflow && !this.parent) {
+					dirty = { type: 'ArrayPattern', elements: [dirty] };
+				}
+
+				properties.update = x`function #update(${ctx}, ${dirty}) {
+					${this.maintain_context && b`#ctx = ${ctx};`}
+					${this.chunks.update}
+				}`;
+			}
+		}
+
+		if (this.has_animation) {
+			properties.measure = x`function #measure() {
+				${this.chunks.measure}
+			}`;
+
+			if (this.chunks.restore_measurements.length) {
+				properties.restore_measurements = x`function #restore_measurements(#measurement) {
+					${this.chunks.restore_measurements}
+				}`;
+			}
+
+			properties.fix = x`function #fix() {
+				${this.chunks.fix}
+			}`;
+
+			properties.animate = x`function #animate() {
+				${this.chunks.animate}
+			}`;
+		}
+
+		if (this.has_intro_method || this.has_outro_method) {
+			if (this.chunks.intro.length === 0) {
+				properties.intro = noop;
+			} else {
+				properties.intro = x`function #intro(#local) {
+					${this.has_outros && b`if (#current) return;`}
+					${this.chunks.intro}
+				}`;
+			}
+
+			if (this.chunks.outro.length === 0) {
+				properties.outro = noop;
+			} else {
+				properties.outro = x`function #outro(#local) {
+					${this.chunks.outro}
+				}`;
+			}
+		}
+
+		if (this.chunks.destroy.length === 0) {
+			properties.destroy = noop;
+		} else {
+			properties.destroy = x`function #destroy(detaching) {
+				${this.chunks.destroy}
+			}`;
+		}
+
+		if (!this.renderer.component.compile_options.dev) {
+			// allow shorthand names
+			for (const name in properties) {
+				const property = properties[name];
+				if (property) property.id = null;
+			}
+		}
+
+		const return_value: any = x`{
+			key: ${properties.key},
+			first: ${properties.first},
+			c: ${properties.create},
+			l: ${properties.claim},
+			h: ${properties.hydrate},
+			m: ${properties.mount},
+			p: ${properties.update},
+			r: ${properties.measure},
+			s: ${properties.restore_measurements},
+			f: ${properties.fix},
+			a: ${properties.animate},
+			i: ${properties.intro},
+			o: ${properties.outro},
+			d: ${properties.destroy}
+		}`;
+
+		const block = dev && this.get_unique_name('block');
+
+		const body = b`
+			${this.chunks.declarations}
+
+			${Array.from(this.variables.values()).map(({ id, init }) => {
+				return init
+					? b`let ${id} = ${init}`
+					: b`let ${id}`;
+			})}
+
+			${this.chunks.init}
+
+			${dev
+				? b`
+					const ${block} = ${return_value};
+					@dispatch_dev("SvelteRegisterBlock", {
+						block: ${block},
+						id: ${this.name || 'create_fragment'}.name,
+						type: "${this.type}",
+						source: "${this.comment ? this.comment.replace(/"/g, '\\"') : ''}",
+						ctx: #ctx
+					});
+					return ${block};`
+				: b`
+					return ${return_value};`
+			}
+		`;
+
+		return body;
+	}
+
+	has_content(): boolean {
+		return !!this.first ||
+			this.event_listeners.length > 0 ||
+			this.chunks.intro.length > 0 ||
+			this.chunks.outro.length > 0  ||
+			this.chunks.create.length > 0 ||
+			this.chunks.hydrate.length > 0 ||
+			this.chunks.claim.length > 0 ||
+			this.chunks.mount.length > 0 ||
+			this.chunks.update.length > 0 ||
+			this.chunks.destroy.length > 0 ||
+			this.has_animation;
+	}
+
+	render() {
+		const key = this.key && this.get_unique_name('key');
+
+		const args: any[] = [x`#ctx`];
+		if (key) args.unshift(key);
+
+		const fn = b`function ${this.name}(${args}) {
+			${this.get_contents(key)}
+		}`;
+
+		return this.comment
+			? b`
+				// ${this.comment}
+				${fn}`
+			: fn;
+	}
+
+	render_listeners(chunk: string = '') {
+		if (this.event_listeners.length > 0) {
+			this.add_variable({ type: 'Identifier', name: '#mounted' });
+			this.chunks.destroy.push(b`#mounted = false`);
+
+			const dispose: Identifier = {
+				type: 'Identifier',
+				name: `#dispose${chunk}`
+			};
+
+			this.add_variable(dispose);
+
+			if (this.event_listeners.length === 1) {
+				this.chunks.mount.push(
+					b`
+						if (!#mounted) {
+							${dispose} = ${this.event_listeners[0]};
+							#mounted = true;
+						}
+					`
+				);
+
+				this.chunks.destroy.push(
+					b`${dispose}();`
+				);
+			} else {
+				this.chunks.mount.push(b`
+					if (!#mounted) {
+						${dispose} = [
+							${this.event_listeners}
+						];
+						#mounted = true;
+					}
+				`);
+
+				this.chunks.destroy.push(
+					b`@run_all(${dispose});`
+				);
+			}
+		}
+	}
+}
diff --git a/src/compiler/compile/render_dom/Renderer.ts b/src/compiler/compile/render_dom/Renderer.ts
new file mode 100644
index 0000000000..179fc0c956
--- /dev/null
+++ b/src/compiler/compile/render_dom/Renderer.ts
@@ -0,0 +1,285 @@
+import Block from './Block';
+import { CompileOptions, Var } from '../../interfaces';
+import Component from '../Component';
+import FragmentWrapper from './wrappers/Fragment';
+import { x } from 'code-red';
+import { Node, Identifier, MemberExpression, Literal, Expression, BinaryExpression, UnaryExpression, ArrayExpression } from 'estree';
+import flatten_reference from '../utils/flatten_reference';
+import { reserved_keywords } from '../utils/reserved_keywords';
+import { renderer_invalidate } from './invalidate';
+
+interface ContextMember {
+	name: string;
+	index: Literal;
+	is_contextual: boolean;
+	is_non_contextual: boolean;
+	variable: Var;
+	priority: number;
+}
+
+type BitMasks = Array<{
+	n: number;
+	names: string[];
+}>;
+
+export default class Renderer {
+	component: Component; // TODO Maybe Renderer shouldn't know about Component?
+	options: CompileOptions;
+
+	context: ContextMember[] = [];
+	initial_context: ContextMember[] = [];
+	context_lookup: Map<string, ContextMember> = new Map();
+	context_overflow: boolean;
+	blocks: Array<Block | Node | Node[]> = [];
+	readonly: Set<string> = new Set();
+	meta_bindings: Array<Node | Node[]> = []; // initial values for e.g. window.innerWidth, if there's a <svelte:window> meta tag
+	binding_groups: Map<string, { binding_group: (to_reference?: boolean) => Node; is_context: boolean; contexts: string[]; index: number; keypath: string }> = new Map();
+
+	block: Block;
+	fragment: FragmentWrapper;
+
+	file_var: Identifier;
+	locate: (c: number) => { line: number; column: number };
+
+	constructor(component: Component, options: CompileOptions) {
+		this.component = component;
+		this.options = options;
+		this.locate = component.locate; // TODO messy
+
+		this.file_var = options.dev && this.component.get_unique_name('file');
+
+		component.vars.filter(v => !v.hoistable || (v.export_name && !v.module)).forEach(v => this.add_to_context(v.name));
+
+		// ensure store values are included in context
+		component.vars.filter(v => v.subscribable).forEach(v => this.add_to_context(`$${v.name}`));
+
+		reserved_keywords.forEach(keyword => {
+			if (component.var_lookup.has(keyword)) {
+				this.add_to_context(keyword);
+			}
+		});
+
+		if (component.slots.size > 0) {
+			this.add_to_context('$$scope');
+			this.add_to_context('#slots');
+		}
+
+		if (this.binding_groups.size > 0) {
+			this.add_to_context('$$binding_groups');
+		}
+
+		// main block
+		this.block = new Block({
+			renderer: this,
+			name: null,
+			type: 'component',
+			key: null,
+
+			bindings: new Map(),
+
+			dependencies: new Set()
+		});
+
+		this.block.has_update_method = true;
+
+		this.fragment = new FragmentWrapper(
+			this,
+			this.block,
+			component.fragment.children,
+			null,
+			true,
+			null
+		);
+
+		// TODO messy
+		this.blocks.forEach(block => {
+			if (block instanceof Block) {
+				block.assign_variable_names();
+			}
+		});
+
+		this.block.assign_variable_names();
+
+		this.fragment.render(this.block, null, x`#nodes` as Identifier);
+
+		this.context_overflow = this.context.length > 31;
+
+		this.context.forEach(member => {
+			const { variable } = member;
+			if (variable) {
+				member.priority += 2;
+				if (variable.mutated || variable.reassigned) member.priority += 4;
+
+				// these determine whether variable is included in initial context
+				// array, so must have the highest priority
+				if (variable.is_reactive_dependency && (variable.mutated || variable.reassigned)) member.priority += 16;
+				if (variable.export_name) member.priority += 32;
+				if (variable.referenced) member.priority += 64;
+			} else if (member.is_non_contextual) {
+				// determine whether variable is included in initial context
+				// array, so must have the highest priority
+				member.priority += 8;
+			}
+
+			if (!member.is_contextual) {
+				member.priority += 1;
+			}
+		});
+
+		this.context.sort((a, b) => (b.priority - a.priority) || ((a.index.value as number) - (b.index.value as number)));
+		this.context.forEach((member, i) => member.index.value = i);
+
+		let i = this.context.length;
+		while (i--) {
+			const member = this.context[i];
+			if (member.variable) {
+				if (member.variable.referenced || member.variable.export_name || (member.variable.is_reactive_dependency && (member.variable.mutated || member.variable.reassigned))) break;
+			} else if (member.is_non_contextual) {
+				break;
+			}
+		}
+		this.initial_context = this.context.slice(0, i + 1);
+	}
+
+	add_to_context(name: string, contextual = false) {
+		if (!this.context_lookup.has(name)) {
+			const member: ContextMember = {
+				name,
+				index: { type: 'Literal', value: this.context.length }, // index is updated later, but set here to preserve order within groups
+				is_contextual: false,
+				is_non_contextual: false, // shadowed vars could be contextual and non-contextual
+				variable: null,
+				priority: 0
+			};
+
+			this.context_lookup.set(name, member);
+			this.context.push(member);
+		}
+
+		const member = this.context_lookup.get(name);
+
+		if (contextual) {
+			member.is_contextual = true;
+		} else {
+			member.is_non_contextual = true;
+			member.variable = this.component.var_lookup.get(name);
+		}
+
+		return member;
+	}
+
+	invalidate(name: string, value?, main_execution_context: boolean = false) {
+		return renderer_invalidate(this, name, value, main_execution_context);
+	}
+
+	dirty(names: string[], is_reactive_declaration = false): Expression {
+		const renderer = this;
+
+		const dirty = (is_reactive_declaration
+			? x`$$self.$$.dirty`
+			: x`#dirty`) as Identifier | MemberExpression;
+
+		const get_bitmask = () => {
+			const bitmask: BitMasks = [];
+			names.forEach((name) => {
+				const member = renderer.context_lookup.get(name);
+
+				if (!member) return;
+
+				if (member.index.value === -1) {
+					throw new Error('unset index');
+				}
+
+				const value = member.index.value as number;
+				const i = (value / 31) | 0;
+				const n = 1 << (value % 31);
+
+				if (!bitmask[i]) bitmask[i] = { n: 0, names: [] };
+
+				bitmask[i].n |= n;
+				bitmask[i].names.push(name);
+			});
+			return bitmask;
+		};
+
+		// TODO: context-overflow make it less gross
+		return {
+			// Using a ParenthesizedExpression allows us to create
+			// the expression lazily. TODO would be better if
+			// context was determined before rendering, so that
+			// this indirection was unnecessary
+			type: 'ParenthesizedExpression',
+			get expression() {
+				const bitmask = get_bitmask();
+
+				if (!bitmask.length) {
+					return x`${dirty} & /*${names.join(', ')}*/ 0` as BinaryExpression;
+				}
+
+				if (renderer.context_overflow) {
+					return bitmask
+						.map((b, i) => ({ b, i }))
+						.filter(({ b }) => b)
+						.map(({ b, i }) => x`${dirty}[${i}] & /*${b.names.join(', ')}*/ ${b.n}`)
+						.reduce((lhs, rhs) => x`${lhs} | ${rhs}`);
+				}
+
+				return x`${dirty} & /*${names.join(', ')}*/ ${bitmask[0].n}` as BinaryExpression;
+			}
+		} as any;
+	}
+
+	// NOTE: this method may be called before this.context_overflow / this.context is fully defined
+	// therefore, they can only be evaluated later in a getter function
+	get_initial_dirty(): UnaryExpression | ArrayExpression {
+		const _this = this;
+		// TODO: context-overflow make it less gross
+		const val: UnaryExpression = x`-1` as UnaryExpression;
+		return {
+			get type() {
+				return _this.context_overflow ? 'ArrayExpression' : 'UnaryExpression';
+			},
+			// as [-1]
+			get elements() {
+				const elements = [];
+				for (let i = 0; i < _this.context.length; i += 31) {
+					elements.push(val);
+				}
+				return elements;
+			},
+			// as -1
+			operator: val.operator,
+			prefix: val.prefix,
+			argument: val.argument
+		};
+	}
+
+	reference(node: string | Identifier | MemberExpression, ctx: string | void = '#ctx') {
+		if (typeof node === 'string') {
+			node = { type: 'Identifier', name: node };
+		}
+
+		const { name, nodes } = flatten_reference(node);
+		const member = this.context_lookup.get(name);
+
+		// TODO is this correct?
+		if (this.component.var_lookup.get(name)) {
+			this.component.add_reference(node, name);
+		}
+
+		if (member !== undefined) {
+			const replacement = x`/*${member.name}*/ ${ctx}[${member.index}]` as MemberExpression;
+
+			if (nodes[0].loc) replacement.object.loc = nodes[0].loc;
+			nodes[0] = replacement;
+
+			return nodes.reduce((lhs, rhs) => x`${lhs}.${rhs}`);
+		}
+
+		return node;
+	}
+
+	remove_block(block: Block | Node | Node[]) {
+		this.blocks.splice(this.blocks.indexOf(block), 1);
+	}
+}
diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
new file mode 100644
index 0000000000..9d9699bdbf
--- /dev/null
+++ b/src/compiler/compile/render_dom/index.ts
@@ -0,0 +1,609 @@
+import { b, x, p } from 'code-red';
+import Component from '../Component';
+import Renderer from './Renderer';
+import { CompileOptions, CssResult } from '../../interfaces';
+import { walk } from 'estree-walker';
+import { extract_names, Scope } from 'periscopic';
+import { invalidate } from './invalidate';
+import Block from './Block';
+import { ImportDeclaration, ClassDeclaration, FunctionExpression, Node, Statement, ObjectExpression, Expression } from 'estree';
+import { apply_preprocessor_sourcemap } from '../../utils/mapped_code';
+import { RawSourceMap, DecodedSourceMap } from '@ampproject/remapping/dist/types/types';
+import { flatten } from '../../utils/flatten';
+import check_enable_sourcemap from '../utils/check_enable_sourcemap';
+import { push_array } from '../../utils/push_array';
+
+export default function dom(
+	component: Component,
+	options: CompileOptions
+): { js: Node[]; css: CssResult } {
+	const { name } = component;
+
+	const renderer = new Renderer(component, options);
+	const { block } = renderer;
+
+	block.has_outro_method = true;
+
+	// prevent fragment being created twice (#1063)
+	if (options.customElement) block.chunks.create.push(b`this.c = @noop;`);
+
+	const body = [];
+
+	if (renderer.file_var) {
+		const file = component.file ? x`"${component.file}"` : x`undefined`;
+		body.push(b`const ${renderer.file_var} = ${file};`);
+	}
+
+	const css = component.stylesheet.render(options.filename, !options.customElement);
+
+	const css_sourcemap_enabled = check_enable_sourcemap(options.enableSourcemap, 'css');
+
+	if (css_sourcemap_enabled) {
+		css.map = apply_preprocessor_sourcemap(options.filename, css.map, options.sourcemap as string | RawSourceMap | DecodedSourceMap);
+	} else {
+		css.map = null;
+	}
+
+	const styles = css_sourcemap_enabled && component.stylesheet.has_styles && options.dev
+		? `${css.code}\n/*# sourceMappingURL=${css.map.toUrl()} */`
+		: css.code;
+
+	const add_css = component.get_unique_name('add_css');
+
+	const should_add_css = (
+		!options.customElement &&
+		!!styles &&
+		options.css !== false
+	);
+
+	if (should_add_css) {
+		body.push(b`
+			function ${add_css}(target) {
+				@append_styles(target, "${component.stylesheet.id}", "${styles}");
+			}
+		`);
+	}
+
+	// fix order
+	// TODO the deconflicted names of blocks are reversed... should set them here
+	const blocks = renderer.blocks.slice().reverse();
+
+	push_array(body, blocks.map(block => {
+		// TODO this is a horrible mess — renderer.blocks
+		// contains a mixture of Blocks and Nodes
+		if ((block as Block).render) return (block as Block).render();
+		return block;
+	}));
+
+	if (options.dev && !options.hydratable) {
+		block.chunks.claim.push(
+			b`throw new @_Error("options.hydrate only works if the component was compiled with the \`hydratable: true\` option");`
+		);
+	}
+
+	const uses_slots = component.var_lookup.has('$$slots');
+	let compute_slots;
+	if (uses_slots) {
+		compute_slots = b`
+			const $$slots = @compute_slots(#slots);
+		`;
+	}
+
+
+	const uses_props = component.var_lookup.has('$$props');
+	const uses_rest = component.var_lookup.has('$$restProps');
+	const $$props = uses_props || uses_rest ? '$$new_props' : '$$props';
+	const props = component.vars.filter(variable => !variable.module && variable.export_name);
+	const writable_props = props.filter(variable => variable.writable);
+
+	const omit_props_names = component.get_unique_name('omit_props_names');
+	const compute_rest = x`@compute_rest_props($$props, ${omit_props_names.name})`;
+	const rest = uses_rest ? b`
+		const ${omit_props_names.name} = [${props.map(prop => `"${prop.export_name}"`).join(',')}];
+		let $$restProps = ${compute_rest};
+	` : null;
+
+	const set = (uses_props || uses_rest || writable_props.length > 0 || component.slots.size > 0)
+		? x`
+			${$$props} => {
+				${uses_props && renderer.invalidate('$$props', x`$$props = @assign(@assign({}, $$props), @exclude_internal_props($$new_props))`)}
+				${uses_rest && !uses_props && x`$$props = @assign(@assign({}, $$props), @exclude_internal_props($$new_props))`}
+				${uses_rest && renderer.invalidate('$$restProps', x`$$restProps = ${compute_rest}`)}
+				${writable_props.map(prop =>
+					b`if ('${prop.export_name}' in ${$$props}) ${renderer.invalidate(prop.name, x`${prop.name} = ${$$props}.${prop.export_name}`)};`
+				)}
+				${component.slots.size > 0 &&
+				b`if ('$$scope' in ${$$props}) ${renderer.invalidate('$$scope', x`$$scope = ${$$props}.$$scope`)};`}
+			}
+		`
+		: null;
+
+	const accessors = [];
+
+	const not_equal = component.component_options.immutable ? x`@not_equal` : x`@safe_not_equal`;
+	let dev_props_check: Node[] | Node;
+	let inject_state: Expression;
+	let capture_state: Expression;
+	let props_inject: Node[] | Node;
+
+	props.forEach(prop => {
+		const variable = component.var_lookup.get(prop.name);
+
+		if (!variable.writable || component.component_options.accessors) {
+			accessors.push({
+				type: 'MethodDefinition',
+				kind: 'get',
+				key: { type: 'Identifier', name: prop.export_name },
+				value: x`function() {
+					return ${prop.hoistable ? prop.name : x`this.$$.ctx[${renderer.context_lookup.get(prop.name).index}]`}
+				}`
+			});
+		} else if (component.compile_options.dev) {
+			accessors.push({
+				type: 'MethodDefinition',
+				kind: 'get',
+				key: { type: 'Identifier', name: prop.export_name },
+				value: x`function() {
+					throw new @_Error("<${component.tag}>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+				}`
+			});
+		}
+
+		if (component.component_options.accessors) {
+			if (variable.writable && !renderer.readonly.has(prop.name)) {
+				accessors.push({
+					type: 'MethodDefinition',
+					kind: 'set',
+					key: { type: 'Identifier', name: prop.export_name },
+					value: x`function(${prop.name}) {
+						this.$$set({ ${prop.export_name}: ${prop.name} });
+						@flush();
+					}`
+				});
+			} else if (component.compile_options.dev) {
+				accessors.push({
+					type: 'MethodDefinition',
+					kind: 'set',
+					key: { type: 'Identifier', name: prop.export_name },
+					value: x`function(value) {
+						throw new @_Error("<${component.tag}>: Cannot set read-only property '${prop.export_name}'");
+					}`
+				});
+			}
+		} else if (component.compile_options.dev) {
+			accessors.push({
+				type: 'MethodDefinition',
+				kind: 'set',
+				key: { type: 'Identifier', name: prop.export_name },
+				value: x`function(value) {
+					throw new @_Error("<${component.tag}>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+				}`
+			});
+		}
+	});
+
+	component.instance_exports_from.forEach(exports_from => {
+		const import_declaration = {
+			...exports_from,
+			type: 'ImportDeclaration',
+			specifiers: [],
+			source: exports_from.source
+		};
+		component.imports.push(import_declaration as ImportDeclaration);
+
+		exports_from.specifiers.forEach(specifier => {
+			if (component.component_options.accessors) {
+				const name = component.get_unique_name(specifier.exported.name);
+				import_declaration.specifiers.push({
+					...specifier,
+					type: 'ImportSpecifier',
+					imported: specifier.local,
+					local: name
+				});
+
+				accessors.push({
+					type: 'MethodDefinition',
+					kind: 'get',
+					key: { type: 'Identifier', name: specifier.exported.name },
+					value: x`function() {
+						return ${name}
+					}`
+				});
+			} else if (component.compile_options.dev) {
+				accessors.push({
+					type: 'MethodDefinition',
+					kind: 'get',
+					key: { type: 'Identifier', name: specifier.exported.name },
+					value: x`function() {
+						throw new @_Error("<${component.tag}>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+					}`
+				});
+			}
+		});
+	});
+
+	if (component.compile_options.dev) {
+		// checking that expected ones were passed
+		const expected = props.filter(prop => prop.writable && !prop.initialised);
+
+		if (expected.length) {
+			dev_props_check = b`
+				const { ctx: #ctx } = this.$$;
+				const props = ${options.customElement ? x`this.attributes` : x`options.props || {}`};
+				${expected.map(prop => b`
+				if (${renderer.reference(prop.name)} === undefined && !('${prop.export_name}' in props)) {
+					@_console.warn("<${component.tag}> was created without expected prop '${prop.export_name}'");
+				}`)}
+			`;
+		}
+
+		const capturable_vars = component.vars.filter(v => !v.internal && !v.global && !v.name.startsWith('$$'));
+
+		if (capturable_vars.length > 0) {
+			capture_state = x`() => ({ ${capturable_vars.map(prop => p`${prop.name}`)} })`;
+		}
+
+		const injectable_vars = capturable_vars.filter(v => !v.module && v.writable && v.name[0] !== '$');
+
+		if (uses_props || injectable_vars.length > 0) {
+			inject_state = x`
+				${$$props} => {
+					${uses_props && renderer.invalidate('$$props', x`$$props = @assign(@assign({}, $$props), $$new_props)`)}
+					${injectable_vars.map(
+						v => b`if ('${v.name}' in $$props) ${renderer.invalidate(v.name, x`${v.name} = ${$$props}.${v.name}`)};`
+					)}
+				}
+			`;
+
+			props_inject = b`
+				if ($$props && "$$inject" in $$props) {
+					$$self.$inject_state($$props.$$inject);
+				}
+			`;
+		}
+	}
+
+	// instrument assignments
+	if (component.ast.instance) {
+		let scope = component.instance_scope;
+		const map = component.instance_scope_map;
+		let execution_context: Node | null = null;
+
+		walk(component.ast.instance.content, {
+			enter(node: Node) {
+				if (map.has(node)) {
+					scope = map.get(node) as Scope;
+
+					if (!execution_context && !scope.block) {
+						execution_context = node;
+					}
+				} else if (!execution_context && node.type === 'LabeledStatement' && node.label.name === '$') {
+					execution_context = node;
+				}
+			},
+
+			leave(node: Node) {
+				if (map.has(node)) {
+					scope = scope.parent;
+				}
+
+				if (execution_context === node) {
+					execution_context = null;
+				}
+
+				if (node.type === 'AssignmentExpression' || node.type === 'UpdateExpression') {
+					const assignee = node.type === 'AssignmentExpression' ? node.left : node.argument;
+
+					// normally (`a = 1`, `b.c = 2`), there'll be a single name
+					// (a or b). In destructuring cases (`[d, e] = [e, d]`) there
+					// may be more, in which case we need to tack the extra ones
+					// onto the initial function call
+					const names = new Set(extract_names(assignee as Node));
+
+					this.replace(invalidate(renderer, scope, node, names, execution_context === null));
+				}
+			}
+		});
+
+		component.rewrite_props(({ name, reassigned, export_name }) => {
+			const value = `$${name}`;
+			const i = renderer.context_lookup.get(`$${name}`).index;
+
+			const insert = (reassigned || export_name)
+				? b`${`$$subscribe_${name}`}()`
+				: b`@component_subscribe($$self, ${name}, #value => $$invalidate(${i}, ${value} = #value))`;
+
+			if (component.compile_options.dev) {
+				return b`@validate_store(${name}, '${name}'); ${insert}`;
+			}
+
+			return insert;
+		});
+	}
+
+	const args = [x`$$self`];
+	const has_invalidate = props.length > 0 ||
+		component.has_reactive_assignments ||
+		component.slots.size > 0 ||
+		capture_state ||
+		inject_state;
+	if (has_invalidate) {
+		args.push(x`$$props`, x`$$invalidate`);
+	} else if (component.compile_options.dev) {
+		// $$props arg is still needed for unknown prop check
+		args.push(x`$$props`);
+	}
+
+	const has_create_fragment = component.compile_options.dev || block.has_content();
+	if (has_create_fragment) {
+		body.push(b`
+			function create_fragment(#ctx) {
+				${block.get_contents()}
+			}
+		`);
+	}
+
+	body.push(b`
+		${component.extract_javascript(component.ast.module)}
+
+		${component.fully_hoisted}
+	`);
+
+	const filtered_props = props.filter(prop => {
+		const variable = component.var_lookup.get(prop.name);
+
+		if (variable.hoistable) return false;
+		return prop.name[0] !== '$';
+	});
+
+	const reactive_stores = component.vars.filter(variable => variable.name[0] === '$' && variable.name[1] !== '$');
+
+	const instance_javascript = component.extract_javascript(component.ast.instance);
+
+	const has_definition = (
+		component.compile_options.dev ||
+		(instance_javascript && instance_javascript.length > 0) ||
+		filtered_props.length > 0 ||
+		uses_props ||
+		component.partly_hoisted.length > 0 ||
+		renderer.initial_context.length > 0 ||
+		component.reactive_declarations.length > 0 ||
+		capture_state ||
+		inject_state
+	);
+
+	const definition = has_definition
+		? component.alias('instance')
+		: { type: 'Literal', value: null };
+
+	const reactive_store_subscriptions = reactive_stores
+		.filter(store => {
+			const variable = component.var_lookup.get(store.name.slice(1));
+			return !variable || variable.hoistable;
+		})
+		.map(({ name }) => b`
+			${component.compile_options.dev && b`@validate_store(${name.slice(1)}, '${name.slice(1)}');`}
+			@component_subscribe($$self, ${name.slice(1)}, $$value => $$invalidate(${renderer.context_lookup.get(name).index}, ${name} = $$value));
+		`);
+
+	const resubscribable_reactive_store_unsubscribers = reactive_stores
+		.filter(store => {
+			const variable = component.var_lookup.get(store.name.slice(1));
+			return variable && (variable.reassigned || variable.export_name);
+		})
+		.map(({ name }) => b`$$self.$$.on_destroy.push(() => ${`$$unsubscribe_${name.slice(1)}`}());`);
+
+	if (has_definition) {
+		const reactive_declarations: (Node | Node[]) = [];
+		const fixed_reactive_declarations = []; // not really 'reactive' but whatever
+
+		component.reactive_declarations.forEach(d => {
+			const dependencies = Array.from(d.dependencies);
+			const uses_rest_or_props = !!dependencies.find(n => n === '$$props' || n === '$$restProps');
+
+			const writable = dependencies.filter(n => {
+				const variable = component.var_lookup.get(n);
+				return variable && (variable.export_name || variable.mutated || variable.reassigned);
+			});
+
+			const condition = !uses_rest_or_props && writable.length > 0 && renderer.dirty(writable, true);
+
+			let statement = d.node; // TODO remove label (use d.node.body) if it's not referenced
+
+			if (condition) statement = b`if (${condition}) { ${statement} }`[0] as Statement;
+
+			if (condition || uses_rest_or_props) {
+				reactive_declarations.push(statement);
+			} else {
+				fixed_reactive_declarations.push(statement);
+			}
+		});
+
+		const injected = Array.from(component.injected_reactive_declaration_vars).filter(name => {
+			const variable = component.var_lookup.get(name);
+			return variable.injected && variable.name[0] !== '$';
+		});
+
+		const reactive_store_declarations = reactive_stores.map(variable => {
+			const $name = variable.name;
+			const name = $name.slice(1);
+
+			const store = component.var_lookup.get(name);
+			if (store && (store.reassigned || store.export_name)) {
+				const unsubscribe = `$$unsubscribe_${name}`;
+				const subscribe = `$$subscribe_${name}`;
+				const i = renderer.context_lookup.get($name).index;
+
+				return b`let ${$name}, ${unsubscribe} = @noop, ${subscribe} = () => (${unsubscribe}(), ${unsubscribe} = @subscribe(${name}, $$value => $$invalidate(${i}, ${$name} = $$value)), ${name})`;
+			}
+
+			return b`let ${$name};`;
+		});
+
+		let unknown_props_check;
+		if (component.compile_options.dev && !(uses_props || uses_rest)) {
+			unknown_props_check = b`
+				const writable_props = [${writable_props.map(prop => x`'${prop.export_name}'`)}];
+				@_Object.keys($$props).forEach(key => {
+					if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') @_console.warn(\`<${component.tag}> was created with unknown prop '\${key}'\`);
+				});
+			`;
+		}
+
+		const return_value = {
+			type: 'ArrayExpression',
+			elements: renderer.initial_context.map(member => ({
+				type: 'Identifier',
+				name: member.name
+			}) as Expression)
+		};
+
+		body.push(b`
+			function ${definition}(${args}) {
+				${injected.map(name => b`let ${name};`)}
+
+				${rest}
+
+				${reactive_store_declarations}
+
+				${reactive_store_subscriptions}
+
+				${resubscribable_reactive_store_unsubscribers}
+
+				${component.slots.size || component.compile_options.dev || uses_slots ? b`let { $$slots: #slots = {}, $$scope } = $$props;` : null}
+				${component.compile_options.dev && b`@validate_slots('${component.tag}', #slots, [${[...component.slots.keys()].map(key => `'${key}'`).join(',')}]);`}
+				${compute_slots}
+
+				${instance_javascript}
+
+				${unknown_props_check}
+
+				${renderer.binding_groups.size > 0 && b`const $$binding_groups = [${[...renderer.binding_groups.keys()].map(_ => x`[]`)}];`}
+
+				${component.partly_hoisted}
+
+				${set && b`$$self.$$set = ${set};`}
+
+				${capture_state && b`$$self.$capture_state = ${capture_state};`}
+
+				${inject_state && b`$$self.$inject_state = ${inject_state};`}
+
+				${/* before reactive declarations */ props_inject}
+
+				${reactive_declarations.length > 0 && b`
+				$$self.$$.update = () => {
+					${reactive_declarations}
+				};
+				`}
+
+				${fixed_reactive_declarations}
+
+				${uses_props && b`$$props = @exclude_internal_props($$props);`}
+
+				return ${return_value};
+			}
+		`);
+	}
+
+	const prop_indexes = x`{
+		${props.filter(v => v.export_name && !v.module).map(v => p`${v.export_name}: ${renderer.context_lookup.get(v.name).index}`)}
+	}` as ObjectExpression;
+
+	let dirty;
+	if (renderer.context_overflow) {
+		dirty = x`[]`;
+		for (let i = 0; i < renderer.context.length; i += 31) {
+			dirty.elements.push(x`-1`);
+		}
+	}
+
+	if (options.customElement) {
+
+		let init_props = x`@attribute_to_object(this.attributes)`;
+		if (uses_slots) {
+			init_props = x`{ ...${init_props}, $$slots: @get_custom_elements_slots(this) }`;
+		}
+
+		const declaration = b`
+			class ${name} extends @SvelteElement {
+				constructor(options) {
+					super();
+
+					${css.code && b`this.shadowRoot.innerHTML = \`<style>${css.code.replace(/\\/g, '\\\\')}${css_sourcemap_enabled && options.dev ? `\n/*# sourceMappingURL=${css.map.toUrl()} */` : ''}</style>\`;`}
+
+					@init(this, { target: this.shadowRoot, props: ${init_props}, customElement: true }, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, null, ${dirty});
+
+					${dev_props_check}
+
+					if (options) {
+						if (options.target) {
+							@insert(options.target, this, options.anchor);
+						}
+
+						${(props.length > 0 || uses_props || uses_rest) && b`
+						if (options.props) {
+							this.$set(options.props);
+							@flush();
+						}`}
+					}
+				}
+			}
+		`[0] as ClassDeclaration;
+
+		if (props.length > 0) {
+			declaration.body.body.push({
+				type: 'MethodDefinition',
+				kind: 'get',
+				static: true,
+				computed: false,
+				key: { type: 'Identifier', name: 'observedAttributes' },
+				value: x`function() {
+					return [${props.map(prop => x`"${prop.export_name}"`)}];
+				}` as FunctionExpression
+			});
+		}
+
+		push_array(declaration.body.body, accessors);
+
+		body.push(declaration);
+
+		if (component.tag != null) {
+			body.push(b`
+				@_customElements.define("${component.tag}", ${name});
+			`);
+		}
+	} else {
+		const superclass = {
+			type: 'Identifier',
+			name: options.dev ? '@SvelteComponentDev' : '@SvelteComponent'
+		};
+
+		const optional_parameters = [];
+		if (should_add_css) {
+			optional_parameters.push(add_css);
+		} else if (dirty) {
+			optional_parameters.push(x`null`);
+		}
+		if (dirty) {
+			optional_parameters.push(dirty);
+		}
+
+		const declaration = b`
+			class ${name} extends ${superclass} {
+				constructor(options) {
+					super(${options.dev && 'options'});
+					@init(this, options, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, ${optional_parameters});
+					${options.dev && b`@dispatch_dev("SvelteRegisterComponent", { component: this, tagName: "${name.name}", options, id: create_fragment.name });`}
+
+					${dev_props_check}
+				}
+			}
+		`[0] as ClassDeclaration;
+
+		push_array(declaration.body.body, accessors);
+
+		body.push(declaration);
+	}
+
+	return { js: flatten(body), css };
+}
diff --git a/src/compiler/compile/render_dom/invalidate.ts b/src/compiler/compile/render_dom/invalidate.ts
new file mode 100644
index 0000000000..7eeb34a894
--- /dev/null
+++ b/src/compiler/compile/render_dom/invalidate.ts
@@ -0,0 +1,144 @@
+import { nodes_match } from '../../utils/nodes_match';
+import { Scope } from 'periscopic';
+import { x } from 'code-red';
+import { Node, Expression } from 'estree';
+import Renderer from './Renderer';
+import { Var } from '../../interfaces';
+
+export function invalidate(renderer: Renderer, scope: Scope, node: Node, names: Set<string>, main_execution_context: boolean = false) {
+	const { component } = renderer;
+
+	const [head, ...tail] = Array.from(names)
+		.filter(name => {
+			const owner = scope.find_owner(name);
+			return !owner || owner === component.instance_scope;
+		})
+		.map(name => component.var_lookup.get(name))
+		.filter(variable =>	{
+			return variable && (
+				!variable.hoistable &&
+				!variable.global &&
+				!variable.module &&
+				(
+					variable.referenced ||
+					variable.subscribable ||
+					variable.is_reactive_dependency ||
+					variable.export_name ||
+					variable.name[0] === '$'
+				)
+			);
+		}) as Var[];
+
+	function get_invalidated(variable: Var, node?: Expression) {
+		if (main_execution_context && !variable.subscribable && variable.name[0] !== '$') {
+			return node;
+		}
+		return renderer_invalidate(renderer, variable.name, undefined, main_execution_context);
+	}
+
+	if (!head) {
+		return node;
+	}
+
+	component.has_reactive_assignments = true;
+
+	if (node.type === 'AssignmentExpression' && node.operator === '=' && nodes_match(node.left, node.right) && tail.length === 0) {
+		return get_invalidated(head, node);
+	}
+
+	const is_store_value = head.name[0] === '$' && head.name[1] !== '$';
+	const extra_args = tail.map(variable => get_invalidated(variable)).filter(Boolean);
+
+	if (is_store_value) {
+		return x`@set_store_value(${head.name.slice(1)}, ${node}, ${head.name}, ${extra_args})`;
+	}
+
+	let invalidate;
+	if (!main_execution_context) {
+		const pass_value = (
+			extra_args.length > 0 ||
+			(node.type === 'AssignmentExpression' && node.left.type !== 'Identifier') ||
+			(node.type === 'UpdateExpression' && (!node.prefix || node.argument.type !== 'Identifier'))
+		);
+		if (pass_value) {
+			extra_args.unshift({
+				type: 'Identifier',
+				name: head.name
+			});
+		}
+		invalidate = x`$$invalidate(${renderer.context_lookup.get(head.name).index}, ${node}, ${extra_args})`;
+	} else {
+		// skip `$$invalidate` if it is in the main execution context
+		invalidate = extra_args.length ? [node, ...extra_args] : node;
+	}
+
+	if (head.subscribable && head.reassigned) {
+		const subscribe = `$$subscribe_${head.name}`;
+		invalidate = x`${subscribe}(${invalidate})`;
+	}
+
+	return invalidate;
+}
+
+export function renderer_invalidate(renderer: Renderer, name: string, value?, main_execution_context: boolean = false) {
+	const variable = renderer.component.var_lookup.get(name);
+
+	if (variable && (variable.subscribable && (variable.reassigned || variable.export_name))) {
+		if (main_execution_context) {
+			return x`${`$$subscribe_${name}`}(${value || name})`;
+		} else {
+			const member = renderer.context_lookup.get(name);
+			return x`${`$$subscribe_${name}`}($$invalidate(${member.index}, ${value || name}))`;
+		}
+	}
+
+	if (name[0] === '$' && name[1] !== '$') {
+		return x`${name.slice(1)}.set(${value || name})`;
+	}
+
+	if (
+		variable && (
+			variable.module || (
+				!variable.referenced &&
+				!variable.is_reactive_dependency &&
+				!variable.export_name &&
+				!name.startsWith('$$')
+			)
+		)
+	) {
+		return value || name;
+	}
+
+	if (value) {
+		if (main_execution_context) {
+			return x`${value}`;
+		} else {
+			const member = renderer.context_lookup.get(name);
+			return x`$$invalidate(${member.index}, ${value})`;
+		}
+	}
+
+	if (main_execution_context) return;
+
+	// if this is a reactive declaration, invalidate dependencies recursively
+	const deps = new Set([name]);
+
+	deps.forEach(name => {
+		const reactive_declarations = renderer.component.reactive_declarations.filter(x =>
+			x.assignees.has(name)
+		);
+		reactive_declarations.forEach(declaration => {
+			declaration.dependencies.forEach(name => {
+				deps.add(name);
+			});
+		});
+	});
+
+	// TODO ideally globals etc wouldn't be here in the first place
+	const filtered = Array.from(deps).filter(n => renderer.context_lookup.has(n));
+	if (!filtered.length) return null;
+
+	return filtered
+		.map(n => x`$$invalidate(${renderer.context_lookup.get(n).index}, ${n})`)
+		.reduce((lhs, rhs) => x`${lhs}, ${rhs}`);
+}
diff --git a/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts b/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts
new file mode 100644
index 0000000000..9c07267223
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts
@@ -0,0 +1,300 @@
+import Wrapper from './shared/Wrapper';
+import Renderer from '../Renderer';
+import Block from '../Block';
+import AwaitBlock from '../../nodes/AwaitBlock';
+import create_debugging_comment from './shared/create_debugging_comment';
+import { b, x } from 'code-red';
+import FragmentWrapper from './Fragment';
+import PendingBlock from '../../nodes/PendingBlock';
+import ThenBlock from '../../nodes/ThenBlock';
+import CatchBlock from '../../nodes/CatchBlock';
+import { Context } from '../../nodes/shared/Context';
+import { Identifier, Literal, Node } from 'estree';
+import { add_const_tags, add_const_tags_context } from './shared/add_const_tags';
+
+type Status = 'pending' | 'then' | 'catch';
+
+class AwaitBlockBranch extends Wrapper {
+	parent: AwaitBlockWrapper;
+	node: PendingBlock | ThenBlock | CatchBlock;
+	block: Block;
+	fragment: FragmentWrapper;
+	is_dynamic: boolean;
+
+	var = null;
+	status: Status;
+
+	value: string;
+	value_index: Literal;
+	value_contexts: Context[];
+	is_destructured: boolean;
+
+	constructor(
+		status: Status,
+		renderer: Renderer,
+		block: Block,
+		parent: AwaitBlockWrapper,
+		node: PendingBlock | ThenBlock | CatchBlock,
+		strip_whitespace: boolean,
+		next_sibling: Wrapper
+	) {
+		super(renderer, block, parent, node);
+		this.status = status;
+
+		this.block = block.child({
+			comment: create_debugging_comment(node, this.renderer.component),
+			name: this.renderer.component.get_unique_name(`create_${status}_block`),
+			type: status
+		});
+
+		this.add_context(parent.node[status + '_node'], parent.node[status + '_contexts']);
+
+		this.fragment = new FragmentWrapper(
+			renderer,
+			this.block,
+			this.node.children,
+			parent,
+			strip_whitespace,
+			next_sibling
+		);
+
+		this.is_dynamic = this.block.dependencies.size > 0;
+	}
+
+	add_context(node: Node | null, contexts: Context[]) {
+		if (!node) return;
+
+		if (node.type === 'Identifier') {
+			this.value = node.name;
+			this.renderer.add_to_context(this.value, true);
+		} else {
+			contexts.forEach(context => {
+				this.renderer.add_to_context(context.key.name, true);
+			});
+			this.value = this.block.parent.get_unique_name('value').name;
+			this.value_contexts = contexts;
+			this.renderer.add_to_context(this.value, true);
+			this.is_destructured = true;
+		}
+		this.value_index = this.renderer.context_lookup.get(this.value).index;
+
+		if (this.has_consts(this.node)) {
+			add_const_tags_context(this.renderer, this.node.const_tags);
+		}
+	}
+
+	has_consts(node: PendingBlock | ThenBlock | CatchBlock): node is ThenBlock | CatchBlock {
+		return node instanceof ThenBlock || node instanceof CatchBlock;
+	}
+
+	render(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
+		this.fragment.render(block, parent_node, parent_nodes);
+
+		if (this.is_destructured || (this.has_consts(this.node) && this.node.const_tags.length > 0)) {
+			this.render_get_context();
+		}
+	}
+
+	render_get_context() {
+		const props = this.is_destructured ? this.value_contexts.map(prop => b`#ctx[${this.block.renderer.context_lookup.get(prop.key.name).index}] = ${prop.default_modifier(prop.modifier(x`#ctx[${this.value_index}]`), name => this.renderer.reference(name))};`) : null;
+
+		const const_tags_props = this.has_consts(this.node) ? add_const_tags(this.block, this.node.const_tags, '#ctx') : null;
+
+		const get_context = this.block.renderer.component.get_unique_name(`get_${this.status}_context`);
+		this.block.renderer.blocks.push(b`
+			function ${get_context}(#ctx) {
+				${props}
+				${const_tags_props}
+			}
+		`);
+		this.block.chunks.declarations.push(b`${get_context}(#ctx)`);
+		if (this.block.has_update_method) {
+			this.block.chunks.update.unshift(b`${get_context}(#ctx)`);
+		}
+	}
+}
+
+export default class AwaitBlockWrapper extends Wrapper {
+	node: AwaitBlock;
+
+	pending: AwaitBlockBranch;
+	then: AwaitBlockBranch;
+	catch: AwaitBlockBranch;
+
+	var: Identifier = { type: 'Identifier', name: 'await_block' };
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: AwaitBlock,
+		strip_whitespace: boolean,
+		next_sibling: Wrapper
+	) {
+		super(renderer, block, parent, node);
+
+		this.cannot_use_innerhtml();
+		this.not_static_content();
+
+		block.add_dependencies(this.node.expression.dependencies);
+
+		let is_dynamic = false;
+		let has_intros = false;
+		let has_outros = false;
+
+		['pending', 'then', 'catch'].forEach((status: Status) => {
+			const child = this.node[status];
+
+			const branch = new AwaitBlockBranch(
+				status,
+				renderer,
+				block,
+				this,
+				child,
+				strip_whitespace,
+				next_sibling
+			);
+
+			renderer.blocks.push(branch.block);
+
+			if (branch.is_dynamic) {
+				is_dynamic = true;
+				// TODO should blocks update their own parents?
+				block.add_dependencies(branch.block.dependencies);
+			}
+
+			if (branch.block.has_intros) has_intros = true;
+			if (branch.block.has_outros) has_outros = true;
+
+			this[status] = branch;
+		});
+
+		['pending', 'then', 'catch'].forEach(status => {
+			this[status].block.has_update_method = is_dynamic;
+			this[status].block.has_intro_method = has_intros;
+			this[status].block.has_outro_method = has_outros;
+		});
+
+		if (has_outros) {
+			block.add_outro();
+		}
+	}
+
+	render(
+		block: Block,
+		parent_node: Identifier,
+		parent_nodes: Identifier
+	) {
+		const anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
+		const update_mount_node = this.get_update_mount_node(anchor);
+
+		const snippet = this.node.expression.manipulate(block);
+
+		const info = block.get_unique_name('info');
+		const promise = block.get_unique_name('promise');
+
+		block.add_variable(promise);
+
+		block.maintain_context = true;
+
+		const info_props: any = x`{
+			ctx: #ctx,
+			current: null,
+			token: null,
+			hasCatch: ${this.catch.node.start !== null ? 'true' : 'false'},
+			pending: ${this.pending.block.name},
+			then: ${this.then.block.name},
+			catch: ${this.catch.block.name},
+			value: ${this.then.value_index},
+			error: ${this.catch.value_index},
+			blocks: ${this.pending.block.has_outro_method && x`[,,,]`}
+		}`;
+
+		block.chunks.init.push(b`
+			let ${info} = ${info_props};
+		`);
+
+		block.chunks.init.push(b`
+			@handle_promise(${promise} = ${snippet}, ${info});
+		`);
+
+		block.chunks.create.push(b`
+			${info}.block.c();
+		`);
+
+		if (parent_nodes && this.renderer.options.hydratable) {
+			block.chunks.claim.push(b`
+				${info}.block.l(${parent_nodes});
+			`);
+		}
+
+		const initial_mount_node = parent_node || '#target';
+		const anchor_node = parent_node ? 'null' : '#anchor';
+
+		const has_transitions = this.pending.block.has_intro_method || this.pending.block.has_outro_method;
+
+		block.chunks.mount.push(b`
+			${info}.block.m(${initial_mount_node}, ${info}.anchor = ${anchor_node});
+			${info}.mount = () => ${update_mount_node};
+			${info}.anchor = ${anchor};
+		`);
+
+		if (has_transitions) {
+			block.chunks.intro.push(b`@transition_in(${info}.block);`);
+		}
+
+		const dependencies = this.node.expression.dynamic_dependencies();
+
+		const update_await_block_branch = b`@update_await_block_branch(${info}, #ctx, #dirty)`;
+
+		if (dependencies.length > 0) {
+			const condition = x`
+				${block.renderer.dirty(dependencies)} &&
+				${promise} !== (${promise} = ${snippet}) &&
+				@handle_promise(${promise}, ${info})`;
+
+			block.chunks.update.push(
+				b`${info}.ctx = #ctx;`
+			);
+
+			if (this.pending.block.has_update_method) {
+				block.chunks.update.push(b`
+					if (${condition}) {
+
+					} else {
+						${update_await_block_branch}
+					}
+				`);
+			} else {
+				block.chunks.update.push(b`
+					${condition}
+				`);
+			}
+		} else {
+			if (this.pending.block.has_update_method) {
+				block.chunks.update.push(b`
+					${update_await_block_branch}
+				`);
+			}
+		}
+
+		if (this.pending.block.has_outro_method) {
+			block.chunks.outro.push(b`
+				for (let #i = 0; #i < 3; #i += 1) {
+					const block = ${info}.blocks[#i];
+					@transition_out(block);
+				}
+			`);
+		}
+
+		block.chunks.destroy.push(b`
+			${info}.block.d(${parent_node ? null : 'detaching'});
+			${info}.token = null;
+			${info} = null;
+		`);
+
+		[this.pending, this.then, this.catch].forEach(branch => {
+			branch.render(branch.block, null, x`#nodes` as Identifier);
+		});
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/Body.ts b/src/compiler/compile/render_dom/wrappers/Body.ts
new file mode 100644
index 0000000000..0e82fca79f
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/Body.ts
@@ -0,0 +1,25 @@
+import Block from '../Block';
+import Wrapper from './shared/Wrapper';
+import { x } from 'code-red';
+import Body from '../../nodes/Body';
+import { Identifier } from 'estree';
+import EventHandler from './Element/EventHandler';
+import add_event_handlers from './shared/add_event_handlers';
+import { TemplateNode } from '../../../interfaces';
+import Renderer from '../Renderer';
+import add_actions from './shared/add_actions';
+
+export default class BodyWrapper extends Wrapper {
+	node: Body;
+	handlers: EventHandler[];
+
+	constructor(renderer: Renderer, block: Block, parent: Wrapper, node: TemplateNode) {
+		super(renderer, block, parent, node);
+		this.handlers = this.node.handlers.map(handler => new EventHandler(handler, this));
+	}
+
+	render(block: Block, _parent_node: Identifier, _parent_nodes: Identifier) {
+		add_event_handlers(block, x`@_document.body`, this.handlers);
+		add_actions(block, x`@_document.body`, this.node.actions);
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/DebugTag.ts b/src/compiler/compile/render_dom/wrappers/DebugTag.ts
new file mode 100644
index 0000000000..c3ba550a3c
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/DebugTag.ts
@@ -0,0 +1,86 @@
+import Renderer from '../Renderer';
+import Wrapper from './shared/Wrapper';
+import Block from '../Block';
+import DebugTag from '../../nodes/DebugTag';
+import add_to_set from '../../utils/add_to_set';
+import { b, p } from 'code-red';
+import { Identifier, DebuggerStatement } from 'estree';
+
+export default class DebugTagWrapper extends Wrapper {
+	node: DebugTag;
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: DebugTag,
+		_strip_whitespace: boolean,
+		_next_sibling: Wrapper
+	) {
+		super(renderer, block, parent, node);
+	}
+
+	render(block: Block, _parent_node: Identifier, _parent_nodes: Identifier) {
+		const { renderer } = this;
+		const { component } = renderer;
+
+		if (!renderer.options.dev) return;
+
+		const { var_lookup } = component;
+
+		const start = component.locate(this.node.start + 1);
+		const end = { line: start.line, column: start.column + 6 };
+
+		const loc = { start, end };
+
+		const debug: DebuggerStatement = {
+			type: 'DebuggerStatement',
+			loc
+		};
+
+		if (this.node.expressions.length === 0) {
+			// Debug all
+			block.chunks.create.push(debug);
+			block.chunks.update.push(debug);
+		} else {
+			const log: Identifier = {
+				type: 'Identifier',
+				name: 'log',
+				loc
+			};
+
+			const dependencies: Set<string> = new Set();
+			this.node.expressions.forEach(expression => {
+				add_to_set(dependencies, expression.dependencies);
+			});
+
+			const contextual_identifiers = this.node.expressions
+				.filter(e => {
+					const variable = var_lookup.get((e.node as Identifier).name);
+					return !(variable && variable.hoistable);
+				})
+				.map(e => (e.node as Identifier).name);
+
+			const logged_identifiers = this.node.expressions.map(e => p`${(e.node as Identifier).name}`);
+
+			const debug_statements = b`
+				${contextual_identifiers.map(name => b`const ${name} = ${renderer.reference(name)};`)}
+				@_console.${log}({ ${logged_identifiers} });
+				debugger;`;
+
+			if (dependencies.size) {
+				const condition = renderer.dirty(Array.from(dependencies));
+
+				block.chunks.update.push(b`
+					if (${condition}) {
+						${debug_statements}
+					}
+				`);
+			}
+
+			block.chunks.create.push(b`{
+				${debug_statements}
+			}`);
+		}
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/EachBlock.ts b/src/compiler/compile/render_dom/wrappers/EachBlock.ts
new file mode 100644
index 0000000000..d4648954ca
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/EachBlock.ts
@@ -0,0 +1,642 @@
+import Renderer from '../Renderer';
+import Block from '../Block';
+import Wrapper from './shared/Wrapper';
+import create_debugging_comment from './shared/create_debugging_comment';
+import EachBlock from '../../nodes/EachBlock';
+import FragmentWrapper from './Fragment';
+import { b, x } from 'code-red';
+import ElseBlock from '../../nodes/ElseBlock';
+import { Identifier, Node } from 'estree';
+import get_object from '../../utils/get_object';
+import { add_const_tags, add_const_tags_context } from './shared/add_const_tags';
+
+export class ElseBlockWrapper extends Wrapper {
+	node: ElseBlock;
+	block: Block;
+	fragment: FragmentWrapper;
+	is_dynamic: boolean;
+
+	var = null;
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: ElseBlock,
+		strip_whitespace: boolean,
+		next_sibling: Wrapper
+	) {
+		super(renderer, block, parent, node);
+		add_const_tags_context(renderer, this.node.const_tags);
+
+		this.block = block.child({
+			comment: create_debugging_comment(node, this.renderer.component),
+			name: this.renderer.component.get_unique_name('create_else_block'),
+			type: 'else'
+		});
+
+		this.fragment = new FragmentWrapper(
+			renderer,
+			this.block,
+			this.node.children,
+			parent,
+			strip_whitespace,
+			next_sibling
+		);
+
+		this.is_dynamic = this.block.dependencies.size > 0;
+	}
+}
+
+export default class EachBlockWrapper extends Wrapper {
+	block: Block;
+	node: EachBlock;
+	fragment: FragmentWrapper;
+	else?: ElseBlockWrapper;
+	vars: {
+		create_each_block: Identifier;
+		each_block_value: Identifier;
+		get_each_context: Identifier;
+		iterations: Identifier;
+		fixed_length: number;
+		data_length: Node | number;
+		view_length: Node | number;
+	};
+
+	context_props: Array<Node | Node[]>;
+	index_name: Identifier;
+	updates: Array<Node | Node[]> = [];
+	dependencies: Set<string>;
+
+	var: Identifier = { type: 'Identifier', name: 'each' };
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: EachBlock,
+		strip_whitespace: boolean,
+		next_sibling: Wrapper
+	) {
+		super(renderer, block, parent, node);
+		this.cannot_use_innerhtml();
+		this.not_static_content();
+
+		const { dependencies } = node.expression;
+		block.add_dependencies(dependencies);
+
+		this.node.contexts.forEach(context => {
+			renderer.add_to_context(context.key.name, true);
+		});
+		add_const_tags_context(renderer, this.node.const_tags);
+
+		this.block = block.child({
+			comment: create_debugging_comment(this.node, this.renderer.component),
+			name: renderer.component.get_unique_name('create_each_block'),
+			type: 'each',
+			// @ts-ignore todo: probably error
+			key: node.key as string,
+
+			bindings: new Map(block.bindings)
+		});
+
+		// TODO this seems messy
+		this.block.has_animation = this.node.has_animation;
+
+		this.index_name = this.node.index
+			? { type: 'Identifier', name: this.node.index }
+			: renderer.component.get_unique_name(`${this.node.context}_index`);
+
+		const fixed_length =
+			node.expression.node.type === 'ArrayExpression' &&
+			node.expression.node.elements.every(element => element.type !== 'SpreadElement')
+				? node.expression.node.elements.length
+				: null;
+
+		// hack the sourcemap, so that if data is missing the bug
+		// is easy to find
+		let c = this.node.start + 2;
+		while (renderer.component.source[c] !== 'e') c += 1;
+		const start = renderer.component.locate(c);
+		const end = { line: start.line, column: start.column + 4 };
+		const length = {
+			type: 'Identifier',
+			name: 'length',
+			loc: { start, end }
+		};
+
+		const each_block_value = renderer.component.get_unique_name(`${this.var.name}_value`);
+		const iterations = block.get_unique_name(`${this.var.name}_blocks`);
+
+		renderer.add_to_context(each_block_value.name, true);
+		renderer.add_to_context(this.index_name.name, true);
+
+		this.vars = {
+			create_each_block: this.block.name,
+			each_block_value,
+			get_each_context: renderer.component.get_unique_name(`get_${this.var.name}_context`),
+			iterations,
+
+			// optimisation for array literal
+			fixed_length,
+			data_length: fixed_length === null ? x`${each_block_value}.${length}` : fixed_length,
+			view_length: fixed_length === null ? x`${iterations}.length` : fixed_length
+		};
+
+		const object = get_object(node.expression.node);
+		const store = object.type === 'Identifier' && object.name[0] === '$' ? object.name.slice(1) : null;
+
+		node.contexts.forEach(prop => {
+			this.block.bindings.set(prop.key.name, {
+				object: this.vars.each_block_value,
+				property: this.index_name,
+				modifier: prop.modifier,
+				snippet: prop.modifier(x`${this.vars.each_block_value}[${this.index_name}]` as Node),
+				store
+			});
+		});
+
+		if (this.node.index) {
+			this.block.get_unique_name(this.node.index); // this prevents name collisions (#1254)
+		}
+
+		renderer.blocks.push(this.block);
+
+		this.fragment = new FragmentWrapper(renderer, this.block, node.children, this, strip_whitespace, next_sibling);
+
+		if (this.node.else) {
+			this.else = new ElseBlockWrapper(
+				renderer,
+				block,
+				this,
+				this.node.else,
+				strip_whitespace,
+				next_sibling
+			);
+
+			renderer.blocks.push(this.else.block);
+
+			if (this.else.is_dynamic) {
+				this.block.add_dependencies(this.else.block.dependencies);
+			}
+		}
+
+		block.add_dependencies(this.block.dependencies);
+
+		if (this.block.has_outros || (this.else && this.else.block.has_outros)) {
+			block.add_outro();
+		}
+	}
+
+	render(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
+		if (this.fragment.nodes.length === 0) return;
+
+		const { renderer } = this;
+		const { component } = renderer;
+
+		const needs_anchor = this.next
+			? !this.next.is_dom_node() :
+			!parent_node || !this.parent.is_dom_node();
+
+		const snippet = this.node.expression.manipulate(block);
+
+		block.chunks.init.push(b`let ${this.vars.each_block_value} = ${snippet};`);
+		if (this.renderer.options.dev) {
+			block.chunks.init.push(b`@validate_each_argument(${this.vars.each_block_value});`);
+		}
+
+		const initial_anchor_node: Identifier = { type: 'Identifier', name: parent_node ? 'null' : '#anchor' };
+		const initial_mount_node: Identifier = parent_node || { type: 'Identifier', name: '#target' };
+		const update_anchor_node = needs_anchor
+			? block.get_unique_name(`${this.var.name}_anchor`)
+			: (this.next && this.next.var) || { type: 'Identifier', name: 'null' };
+		const update_mount_node: Identifier = this.get_update_mount_node((update_anchor_node as Identifier));
+
+		const args = {
+			block,
+			parent_node,
+			parent_nodes,
+			snippet,
+			initial_anchor_node,
+			initial_mount_node,
+			update_anchor_node,
+			update_mount_node
+		};
+
+		const all_dependencies = new Set(this.block.dependencies); // TODO should be dynamic deps only
+		this.node.expression.dynamic_dependencies().forEach((dependency: string) => {
+			all_dependencies.add(dependency);
+		});
+		if (this.node.key) {
+			this.node.key.dynamic_dependencies().forEach((dependency: string) => {
+				all_dependencies.add(dependency);
+			});
+		}
+		this.dependencies = all_dependencies;
+
+		if (this.node.key) {
+			this.render_keyed(args);
+		} else {
+			this.render_unkeyed(args);
+		}
+
+		if (this.block.has_intro_method || this.block.has_outro_method) {
+			block.chunks.intro.push(b`
+				for (let #i = 0; #i < ${this.vars.data_length}; #i += 1) {
+					@transition_in(${this.vars.iterations}[#i]);
+				}
+			`);
+		}
+
+		if (needs_anchor) {
+			block.add_element(
+				update_anchor_node as Identifier,
+				x`@empty()`,
+				parent_nodes && x`@empty()`,
+				parent_node
+			);
+		}
+
+		if (this.else) {
+			let else_ctx = x`#ctx`;
+			if (this.else.node.const_tags.length > 0) {
+				const get_ctx_name = this.renderer.component.get_unique_name('get_else_ctx');
+				this.renderer.blocks.push(b`
+					function ${get_ctx_name}(#ctx) {
+						const child_ctx = #ctx.slice();
+						${add_const_tags(block, this.else.node.const_tags, 'child_ctx')}
+						return child_ctx;
+					}
+				`);
+				else_ctx = x`${get_ctx_name}(#ctx)`;
+			}
+			const each_block_else = component.get_unique_name(`${this.var.name}_else`);
+
+			block.chunks.init.push(b`let ${each_block_else} = null;`);
+
+			// TODO neaten this up... will end up with an empty line in the block
+			block.chunks.init.push(b`
+				if (!${this.vars.data_length}) {
+					${each_block_else} = ${this.else.block.name}(${else_ctx});
+				}
+			`);
+
+			block.chunks.create.push(b`
+				if (${each_block_else}) {
+					${each_block_else}.c();
+				}
+			`);
+
+			if (this.renderer.options.hydratable) {
+				block.chunks.claim.push(b`
+					if (${each_block_else}) {
+						${each_block_else}.l(${parent_nodes});
+					}
+				`);
+			}
+
+			block.chunks.mount.push(b`
+				if (${each_block_else}) {
+					${each_block_else}.m(${initial_mount_node}, ${initial_anchor_node});
+				}
+			`);
+
+			const has_transitions = !!(this.else.block.has_intro_method || this.else.block.has_outro_method);
+
+			const destroy_block_else = this.else.block.has_outro_method
+				? b`
+					@group_outros();
+					@transition_out(${each_block_else}, 1, 1, () => {
+						${each_block_else} = null;
+					});
+					@check_outros();`
+				: b`
+					${each_block_else}.d(1);
+					${each_block_else} = null;`;
+
+			if (this.else.block.has_update_method) {
+				this.updates.push(b`
+					if (!${this.vars.data_length} && ${each_block_else}) {
+						${each_block_else}.p(${else_ctx}, #dirty);
+					} else if (!${this.vars.data_length}) {
+						${each_block_else} = ${this.else.block.name}(${else_ctx});
+						${each_block_else}.c();
+						${has_transitions && b`@transition_in(${each_block_else}, 1);`}
+						${each_block_else}.m(${update_mount_node}, ${update_anchor_node});
+					} else if (${each_block_else}) {
+						${destroy_block_else};
+					}
+				`);
+			} else {
+				this.updates.push(b`
+					if (${this.vars.data_length}) {
+						if (${each_block_else}) {
+							${destroy_block_else};
+						}
+					} else if (!${each_block_else}) {
+						${each_block_else} = ${this.else.block.name}(${else_ctx});
+						${each_block_else}.c();
+						${has_transitions && b`@transition_in(${each_block_else}, 1);`}
+						${each_block_else}.m(${update_mount_node}, ${update_anchor_node});
+					}
+				`);
+			}
+
+			block.chunks.destroy.push(b`
+				if (${each_block_else}) ${each_block_else}.d(${parent_node ? '' : 'detaching'});
+			`);
+		}
+
+		if (this.updates.length) {
+			block.chunks.update.push(b`
+				if (${block.renderer.dirty(Array.from(all_dependencies))}) {
+					${this.updates}
+				}
+			`);
+		}
+
+		this.fragment.render(this.block, null, x`#nodes` as Identifier);
+
+		if (this.else) {
+			this.else.fragment.render(this.else.block, null, x`#nodes` as Identifier);
+		}
+
+		this.context_props = this.node.contexts.map(prop => b`child_ctx[${renderer.context_lookup.get(prop.key.name).index}] = ${prop.default_modifier(prop.modifier(x`list[i]`), name => renderer.context_lookup.has(name) ? x`child_ctx[${renderer.context_lookup.get(name).index}]` : { type: 'Identifier', name })};`);
+
+		if (this.node.has_binding) this.context_props.push(b`child_ctx[${renderer.context_lookup.get(this.vars.each_block_value.name).index}] = list;`);
+		if (this.node.has_binding || this.node.has_index_binding || this.node.index) this.context_props.push(b`child_ctx[${renderer.context_lookup.get(this.index_name.name).index}] = i;`);
+
+		// TODO which is better — Object.create(array) or array.slice()?
+		renderer.blocks.push(b`
+			function ${this.vars.get_each_context}(#ctx, list, i) {
+				const child_ctx = #ctx.slice();
+				${this.context_props}
+				${add_const_tags(this.block, this.node.const_tags, 'child_ctx')}
+				return child_ctx;
+			}
+		`);
+	}
+
+	render_keyed({
+		block,
+		parent_node,
+		parent_nodes,
+		snippet,
+		initial_anchor_node,
+		initial_mount_node,
+		update_anchor_node,
+		update_mount_node
+	}: {
+		block: Block;
+		parent_node: Identifier;
+		parent_nodes: Identifier;
+		snippet: Node;
+		initial_anchor_node: Identifier;
+		initial_mount_node: Identifier;
+		update_anchor_node: Identifier;
+		update_mount_node: Identifier;
+	}) {
+		const {
+			create_each_block,
+			iterations,
+			data_length,
+			view_length
+		} = this.vars;
+
+		const get_key = block.get_unique_name('get_key');
+		const lookup = block.get_unique_name(`${this.var.name}_lookup`);
+
+		block.add_variable(iterations, x`[]`);
+		block.add_variable(lookup, x`new @_Map()`);
+
+		if (this.fragment.nodes[0].is_dom_node()) {
+			this.block.first = this.fragment.nodes[0].var;
+		} else {
+			this.block.first = this.block.get_unique_name('first');
+			this.block.add_element(
+				this.block.first,
+				x`@empty()`,
+				parent_nodes && x`@empty()`,
+				null
+			);
+		}
+
+		block.chunks.init.push(b`
+			const ${get_key} = #ctx => ${this.node.key.manipulate(block)};
+
+			${this.renderer.options.dev && b`@validate_each_keys(#ctx, ${this.vars.each_block_value}, ${this.vars.get_each_context}, ${get_key});`}
+			for (let #i = 0; #i < ${data_length}; #i += 1) {
+				let child_ctx = ${this.vars.get_each_context}(#ctx, ${this.vars.each_block_value}, #i);
+				let key = ${get_key}(child_ctx);
+				${lookup}.set(key, ${iterations}[#i] = ${create_each_block}(key, child_ctx));
+			}
+		`);
+
+		block.chunks.create.push(b`
+			for (let #i = 0; #i < ${view_length}; #i += 1) {
+				${iterations}[#i].c();
+			}
+		`);
+
+		if (parent_nodes && this.renderer.options.hydratable) {
+			block.chunks.claim.push(b`
+				for (let #i = 0; #i < ${view_length}; #i += 1) {
+					${iterations}[#i].l(${parent_nodes});
+				}
+			`);
+		}
+
+		block.chunks.mount.push(b`
+			for (let #i = 0; #i < ${view_length}; #i += 1) {
+				${iterations}[#i].m(${initial_mount_node}, ${initial_anchor_node});
+			}
+		`);
+
+		const dynamic = this.block.has_update_method;
+
+		const destroy = this.node.has_animation
+			? (this.block.has_outros
+				? '@fix_and_outro_and_destroy_block'
+				: '@fix_and_destroy_block')
+			: this.block.has_outros
+				? '@outro_and_destroy_block'
+				: '@destroy_block';
+
+		if (this.dependencies.size) {
+			this.block.maintain_context = true;
+
+			this.updates.push(b`
+				${this.vars.each_block_value} = ${snippet};
+				${this.renderer.options.dev && b`@validate_each_argument(${this.vars.each_block_value});`}
+
+				${this.block.has_outros && b`@group_outros();`}
+				${this.node.has_animation && b`for (let #i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].r();`}
+				${this.renderer.options.dev && b`@validate_each_keys(#ctx, ${this.vars.each_block_value}, ${this.vars.get_each_context}, ${get_key});`}
+				${iterations} = @update_keyed_each(${iterations}, #dirty, ${get_key}, ${dynamic ? 1 : 0}, #ctx, ${this.vars.each_block_value}, ${lookup}, ${update_mount_node}, ${destroy}, ${create_each_block}, ${update_anchor_node}, ${this.vars.get_each_context});
+				${this.node.has_animation && b`for (let #i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].a();`}
+				${this.block.has_outros && b`@check_outros();`}
+			`);
+		}
+
+		if (this.block.has_outros) {
+			block.chunks.outro.push(b`
+				for (let #i = 0; #i < ${view_length}; #i += 1) {
+					@transition_out(${iterations}[#i]);
+				}
+			`);
+		}
+
+		block.chunks.destroy.push(b`
+			for (let #i = 0; #i < ${view_length}; #i += 1) {
+				${iterations}[#i].d(${parent_node ? null : 'detaching'});
+			}
+		`);
+	}
+
+	render_unkeyed({
+		block,
+		parent_nodes,
+		snippet,
+		initial_anchor_node,
+		initial_mount_node,
+		update_anchor_node,
+		update_mount_node
+	}: {
+		block: Block;
+		parent_nodes: Identifier;
+		snippet: Node;
+		initial_anchor_node: Identifier;
+		initial_mount_node: Identifier;
+		update_anchor_node: Identifier;
+		update_mount_node: Identifier;
+	}) {
+		const {
+			create_each_block,
+			iterations,
+			fixed_length,
+			data_length,
+			view_length
+		} = this.vars;
+
+		block.chunks.init.push(b`
+			let ${iterations} = [];
+
+			for (let #i = 0; #i < ${data_length}; #i += 1) {
+				${iterations}[#i] = ${create_each_block}(${this.vars.get_each_context}(#ctx, ${this.vars.each_block_value}, #i));
+			}
+		`);
+
+		block.chunks.create.push(b`
+			for (let #i = 0; #i < ${view_length}; #i += 1) {
+				${iterations}[#i].c();
+			}
+		`);
+
+		if (parent_nodes && this.renderer.options.hydratable) {
+			block.chunks.claim.push(b`
+				for (let #i = 0; #i < ${view_length}; #i += 1) {
+					${iterations}[#i].l(${parent_nodes});
+				}
+			`);
+		}
+
+		block.chunks.mount.push(b`
+			for (let #i = 0; #i < ${view_length}; #i += 1) {
+				${iterations}[#i].m(${initial_mount_node}, ${initial_anchor_node});
+			}
+		`);
+
+		if (this.dependencies.size) {
+			const has_transitions = !!(this.block.has_intro_method || this.block.has_outro_method);
+
+			const for_loop_body = this.block.has_update_method
+				? b`
+					if (${iterations}[#i]) {
+						${iterations}[#i].p(child_ctx, #dirty);
+						${has_transitions && b`@transition_in(${this.vars.iterations}[#i], 1);`}
+					} else {
+						${iterations}[#i] = ${create_each_block}(child_ctx);
+						${iterations}[#i].c();
+						${has_transitions && b`@transition_in(${this.vars.iterations}[#i], 1);`}
+						${iterations}[#i].m(${update_mount_node}, ${update_anchor_node});
+					}
+				`
+				: has_transitions
+					? b`
+						if (${iterations}[#i]) {
+							@transition_in(${this.vars.iterations}[#i], 1);
+						} else {
+							${iterations}[#i] = ${create_each_block}(child_ctx);
+							${iterations}[#i].c();
+							@transition_in(${this.vars.iterations}[#i], 1);
+							${iterations}[#i].m(${update_mount_node}, ${update_anchor_node});
+						}
+					`
+					: b`
+						if (!${iterations}[#i]) {
+							${iterations}[#i] = ${create_each_block}(child_ctx);
+							${iterations}[#i].c();
+							${iterations}[#i].m(${update_mount_node}, ${update_anchor_node});
+						}
+					`;
+
+			const start = this.block.has_update_method ? 0 : '#old_length';
+
+			let remove_old_blocks;
+
+			if (this.block.has_outros) {
+				const out = block.get_unique_name('out');
+
+				block.chunks.init.push(b`
+					const ${out} = i => @transition_out(${iterations}[i], 1, 1, () => {
+						${iterations}[i] = null;
+					});
+				`);
+				remove_old_blocks = b`
+					@group_outros();
+					for (#i = ${data_length}; #i < ${view_length}; #i += 1) {
+						${out}(#i);
+					}
+					@check_outros();
+				`;
+			} else {
+				remove_old_blocks = b`
+					for (${this.block.has_update_method ? null : x`#i = ${data_length}`}; #i < ${this.block.has_update_method ? view_length : '#old_length'}; #i += 1) {
+						${iterations}[#i].d(1);
+					}
+					${!fixed_length && b`${view_length} = ${data_length};`}
+				`;
+			}
+
+			// We declare `i` as block scoped here, as the `remove_old_blocks` code
+			// may rely on continuing where this iteration stopped.
+			const update = b`
+				${!this.block.has_update_method && b`const #old_length = ${this.vars.each_block_value}.length;`}
+				${this.vars.each_block_value} = ${snippet};
+				${this.renderer.options.dev && b`@validate_each_argument(${this.vars.each_block_value});`}
+
+				let #i;
+				for (#i = ${start}; #i < ${data_length}; #i += 1) {
+					const child_ctx = ${this.vars.get_each_context}(#ctx, ${this.vars.each_block_value}, #i);
+
+					${for_loop_body}
+				}
+
+				${remove_old_blocks}
+			`;
+
+			this.updates.push(update);
+		}
+
+		if (this.block.has_outros) {
+			block.chunks.outro.push(b`
+				${iterations} = ${iterations}.filter(@_Boolean);
+				for (let #i = 0; #i < ${view_length}; #i += 1) {
+					@transition_out(${iterations}[#i]);
+				}
+			`);
+		}
+
+		block.chunks.destroy.push(b`@destroy_each(${iterations}, detaching);`);
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
new file mode 100644
index 0000000000..7b6aed0d5a
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
@@ -0,0 +1,421 @@
+import Attribute from '../../../nodes/Attribute';
+import Block from '../../Block';
+import fix_attribute_casing from './fix_attribute_casing';
+import ElementWrapper from './index';
+import { string_literal } from '../../../utils/stringify';
+import { b, x } from 'code-red';
+import Expression from '../../../nodes/shared/Expression';
+import Text from '../../../nodes/Text';
+import handle_select_value_binding from './handle_select_value_binding';
+import { Identifier, Node } from 'estree';
+import { namespaces } from '../../../../utils/namespaces';
+
+const non_textlike_input_types = new Set([
+	'button',
+	'checkbox',
+	'color',
+	'date',
+	'datetime-local',
+	'file',
+	'hidden',
+	'image',
+	'radio',
+	'range',
+	'reset',
+	'submit'
+]);
+
+export class BaseAttributeWrapper {
+	node: Attribute;
+	parent: ElementWrapper;
+
+	constructor(parent: ElementWrapper, block: Block, node: Attribute) {
+		this.node = node;
+		this.parent = parent;
+
+		if (node.dependencies.size > 0) {
+			parent.cannot_use_innerhtml();
+			parent.not_static_content();
+
+			block.add_dependencies(node.dependencies);
+		}
+	}
+
+	render(_block: Block) {}
+}
+
+export default class AttributeWrapper extends BaseAttributeWrapper {
+	node: Attribute;
+	parent: ElementWrapper;
+	metadata: any;
+	name: string;
+	property_name: string;
+	is_indirectly_bound_value: boolean;
+	is_src: boolean;
+	is_select_value_attribute: boolean;
+	is_input_value: boolean;
+	should_cache: boolean;
+	last: Identifier;
+
+	constructor(parent: ElementWrapper, block: Block, node: Attribute) {
+		super(parent, block, node);
+
+		if (node.dependencies.size > 0) {
+			// special case — <option value={foo}> — see below
+			if (this.parent.node.name === 'option' && node.name === 'value') {
+				let select: ElementWrapper = this.parent;
+				while (select && (select.node.type !== 'Element' || select.node.name !== 'select')) {
+					// @ts-ignore todo: doublecheck this, but looks to be correct
+					select = select.parent;
+				}
+
+				if (select && select.select_binding_dependencies) {
+					select.select_binding_dependencies.forEach(prop => {
+						this.node.dependencies.forEach((dependency: string) => {
+							this.parent.renderer.component.indirect_dependencies.get(prop).add(dependency);
+						});
+					});
+				}
+			}
+
+			if (node.name === 'value') {
+				handle_select_value_binding(this, node.dependencies);
+			}
+		}
+
+		if (this.parent.node.namespace == namespaces.foreign) {
+			// leave attribute case alone for elements in the "foreign" namespace
+			this.name = this.node.name;
+			this.metadata = this.get_metadata();
+			this.is_indirectly_bound_value = false;
+			this.property_name = null;
+			this.is_select_value_attribute = false;
+			this.is_input_value = false;
+		} else {
+			this.name = fix_attribute_casing(this.node.name);
+			this.metadata = this.get_metadata();
+			this.is_indirectly_bound_value = is_indirectly_bound_value(this);
+			this.property_name = this.is_indirectly_bound_value
+				? '__value'
+				: this.metadata && this.metadata.property_name;
+			this.is_select_value_attribute = this.name === 'value' && this.parent.node.name === 'select';
+			this.is_input_value = this.name === 'value' && this.parent.node.name === 'input';
+		}
+
+		// TODO retire this exception in favour of https://github.com/sveltejs/svelte/issues/3750
+		this.is_src = this.name === 'src' && (!this.parent.node.namespace || this.parent.node.namespace === namespaces.html);
+		this.should_cache = should_cache(this);
+	}
+
+	render(block: Block) {
+		const element = this.parent;
+		const { name, property_name, should_cache, is_indirectly_bound_value } = this;
+
+		// xlink is a special case... we could maybe extend this to generic
+		// namespaced attributes but I'm not sure that's applicable in
+		// HTML5?
+		const method = /-/.test(element.node.name)
+			? '@set_custom_element_data'
+			: name.slice(0, 6) === 'xlink:'
+				? '@xlink_attr'
+				: '@attr';
+
+		const is_legacy_input_type = element.renderer.component.compile_options.legacy && name === 'type' && this.parent.node.name === 'input';
+
+		const dependencies = this.get_dependencies();
+		const value = this.get_value(block);
+
+		let updater;
+		const init = this.get_init(block, value);
+
+		if (is_legacy_input_type) {
+			block.chunks.hydrate.push(
+				b`@set_input_type(${element.var}, ${init});`
+			);
+			updater = b`@set_input_type(${element.var}, ${should_cache ? this.last : value});`;
+		} else if (this.is_select_value_attribute) {
+			// annoying special case
+			const is_multiple_select = element.node.get_static_attribute_value('multiple');
+
+			if (is_multiple_select) {
+				updater = b`@select_options(${element.var}, ${value});`;
+			} else {
+				updater = b`@select_option(${element.var}, ${value});`;
+			}
+
+			block.chunks.mount.push(b`
+				${updater}
+			`);
+		} else if (this.is_src) {
+			block.chunks.hydrate.push(
+				b`if (!@src_url_equal(${element.var}.src, ${init})) ${method}(${element.var}, "${name}", ${this.last});`
+			);
+			updater = b`${method}(${element.var}, "${name}", ${should_cache ? this.last : value});`;
+		} else if (property_name) {
+			block.chunks.hydrate.push(
+				b`${element.var}.${property_name} = ${init};`
+			);
+			updater = block.renderer.options.dev
+				? b`@prop_dev(${element.var}, "${property_name}", ${should_cache ? this.last : value});`
+				: b`${element.var}.${property_name} = ${should_cache ? this.last : value};`;
+		} else {
+			block.chunks.hydrate.push(
+				b`${method}(${element.var}, "${name}", ${init});`
+			);
+			updater = b`${method}(${element.var}, "${name}", ${should_cache ? this.last : value});`;
+		}
+
+		if (is_indirectly_bound_value) {
+			const update_value = b`${element.var}.value = ${element.var}.__value;`;
+			block.chunks.hydrate.push(update_value);
+
+			updater = b`
+				${updater}
+				${update_value};
+			`;
+		}
+
+		if (dependencies.length > 0) {
+			const condition = this.get_dom_update_conditions(block, block.renderer.dirty(dependencies));
+
+			block.chunks.update.push(b`
+				if (${condition}) {
+					${updater}
+				}`);
+		}
+
+		// special case – autofocus. has to be handled in a bit of a weird way
+		if (name === 'autofocus') {
+			block.autofocus = {
+				element_var: element.var,
+				condition_expression: this.node.is_true ? undefined : value
+			};
+		}
+	}
+
+	get_init(block: Block, value) {
+		this.last = this.should_cache && block.get_unique_name(
+			`${this.parent.var.name}_${this.name.replace(/[^a-zA-Z_$]/g, '_')}_value`
+		);
+
+		if (this.should_cache) block.add_variable(this.last);
+
+		return this.should_cache ? x`${this.last} = ${value}` : value;
+	}
+
+	get_dom_update_conditions(block: Block, dependency_condition: Node) {
+		const { property_name, should_cache, last } = this;
+		const element = this.parent;
+		const value = this.get_value(block);
+
+		let condition = dependency_condition;
+
+		if (should_cache) {
+			condition = this.is_src
+				? x`${condition} && (!@src_url_equal(${element.var}.src, (${last} = ${value})))`
+				: x`${condition} && (${last} !== (${last} = ${value}))`;
+		}
+
+		if (this.is_input_value) {
+			const type = element.node.get_static_attribute_value('type');
+			if (type !== true && !non_textlike_input_types.has(type)) {
+				condition = x`${condition} && ${element.var}.${property_name} !== ${should_cache ? last : value}`;
+			}
+		}
+
+		if (block.has_outros) {
+			condition = x`!#current || ${condition}`;
+		}
+
+		return condition;
+	}
+
+	get_dependencies() {
+		const node_dependencies = this.node.get_dependencies();
+		const dependencies = new Set(node_dependencies);
+
+		node_dependencies.forEach((prop: string) => {
+			const indirect_dependencies = this.parent.renderer.component.indirect_dependencies.get(prop);
+			if (indirect_dependencies) {
+				indirect_dependencies.forEach(indirect_dependency => {
+					dependencies.add(indirect_dependency);
+				});
+			}
+		});
+
+		return Array.from(dependencies);
+	}
+
+	get_metadata() {
+		if (this.parent.node.namespace) return null;
+		const metadata = attribute_lookup[this.name];
+		if (metadata && metadata.applies_to && !metadata.applies_to.includes(this.parent.node.name)) return null;
+		return metadata;
+	}
+
+	get_value(block) {
+		if (this.node.is_true) {
+			if (this.metadata && boolean_attribute.has(this.metadata.property_name.toLowerCase())) {
+				return x`true`;
+			}
+			return x`""`;
+		}
+		if (this.node.chunks.length === 0) return x`""`;
+
+		// TODO some of this code is repeated in Tag.ts — would be good to
+		// DRY it out if that's possible without introducing crazy indirection
+		if (this.node.chunks.length === 1) {
+			return this.node.chunks[0].type === 'Text'
+				? string_literal((this.node.chunks[0] as Text).data)
+				: (this.node.chunks[0] as Expression).manipulate(block);
+		}
+
+		let value = this.node.name === 'class'
+			? this.get_class_name_text(block)
+			: this.render_chunks(block).reduce((lhs, rhs) => x`${lhs} + ${rhs}`);
+
+		// '{foo} {bar}' — treat as string concatenation
+		if (this.node.chunks[0].type !== 'Text') {
+			value = x`"" + ${value}`;
+		}
+
+		return value;
+	}
+
+	get_class_name_text(block) {
+		const scoped_css = this.node.chunks.some((chunk: Text) => chunk.synthetic);
+		const rendered = this.render_chunks(block);
+
+		if (scoped_css && rendered.length === 2) {
+			// we have a situation like class={possiblyUndefined}
+			rendered[0] = x`@null_to_empty(${rendered[0]})`;
+		}
+
+		return rendered.reduce((lhs, rhs) => x`${lhs} + ${rhs}`);
+	}
+
+	render_chunks(block: Block) {
+		return this.node.chunks.map((chunk) => {
+			if (chunk.type === 'Text') {
+				return string_literal(chunk.data);
+			}
+
+			return chunk.manipulate(block);
+		});
+	}
+
+	stringify() {
+		if (this.node.is_true) return '';
+
+		const value = this.node.chunks;
+		if (value.length === 0) return '=""';
+
+		return `="${value.map(chunk => {
+			return chunk.type === 'Text'
+				? chunk.data.replace(/"/g, '\\"')
+				: `\${${chunk.manipulate()}}`;
+		}).join('')}"`;
+	}
+}
+
+// source: https://html.spec.whatwg.org/multipage/indices.html
+const attribute_lookup = {
+	allowfullscreen: { property_name: 'allowFullscreen', applies_to: ['iframe'] },
+	allowpaymentrequest: { property_name: 'allowPaymentRequest', applies_to: ['iframe'] },
+	async: { applies_to: ['script'] },
+	autofocus: { applies_to: ['button', 'input', 'keygen', 'select', 'textarea'] },
+	autoplay: { applies_to: ['audio', 'video'] },
+	checked: { applies_to: ['input'] },
+	controls: { applies_to: ['audio', 'video'] },
+	default: { applies_to: ['track'] },
+	defer: { applies_to: ['script'] },
+	disabled: {
+		applies_to: [
+			'button',
+			'fieldset',
+			'input',
+			'keygen',
+			'optgroup',
+			'option',
+			'select',
+			'textarea'
+		]
+	},
+	formnovalidate: { property_name: 'formNoValidate', applies_to: ['button', 'input'] },
+	hidden: {},
+	indeterminate: { applies_to: ['input'] },
+	ismap: { property_name: 'isMap', applies_to: ['img'] },
+	loop: { applies_to: ['audio', 'bgsound', 'video'] },
+	multiple: { applies_to: ['input', 'select'] },
+	muted: { applies_to: ['audio', 'video'] },
+	nomodule: { property_name: 'noModule', applies_to: ['script'] },
+	novalidate: { property_name: 'noValidate', applies_to: ['form'] },
+	open: { applies_to: ['details', 'dialog'] },
+	playsinline: { property_name: 'playsInline', applies_to: ['video'] },
+	readonly: { property_name: 'readOnly', applies_to: ['input', 'textarea'] },
+	required: { applies_to: ['input', 'select', 'textarea'] },
+	reversed: { applies_to: ['ol'] },
+	selected: { applies_to: ['option'] },
+	value: {
+		applies_to: [
+			'button',
+			'option',
+			'input',
+			'li',
+			'meter',
+			'progress',
+			'param',
+			'select',
+			'textarea'
+		]
+	}
+};
+
+Object.keys(attribute_lookup).forEach(name => {
+	const metadata = attribute_lookup[name];
+	if (!metadata.property_name) metadata.property_name = name;
+});
+
+// source: https://html.spec.whatwg.org/multipage/indices.html
+const boolean_attribute = new Set([
+	'allowfullscreen',
+	'allowpaymentrequest',
+	'async',
+	'autofocus',
+	'autoplay',
+	'checked',
+	'controls',
+	'default',
+	'defer',
+	'disabled',
+	'formnovalidate',
+	'hidden',
+	'ismap',
+	'itemscope',
+	'loop',
+	'multiple',
+	'muted',
+	'nomodule',
+	'novalidate',
+	'open',
+	'playsinline',
+	'readonly',
+	'required',
+	'reversed',
+	'selected'
+]);
+
+function should_cache(attribute: AttributeWrapper) {
+	return attribute.is_src || attribute.node.should_cache();
+}
+
+function is_indirectly_bound_value(attribute: AttributeWrapper) {
+	const element = attribute.parent;
+	return attribute.name === 'value' &&
+		(element.node.name === 'option' || // TODO check it's actually bound
+			(element.node.name === 'input' &&
+				element.node.bindings.some(
+					(binding) =>
+						/checked|group/.test(binding.name)
+				)));
+}
diff --git a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
new file mode 100644
index 0000000000..bc218a510b
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
@@ -0,0 +1,447 @@
+import { b, x } from 'code-red';
+import Binding from '../../../nodes/Binding';
+import ElementWrapper from '../Element';
+import InlineComponentWrapper from '../InlineComponent';
+import get_object from '../../../utils/get_object';
+import replace_object from '../../../utils/replace_object';
+import Block from '../../Block';
+import Renderer from '../../Renderer';
+import flatten_reference from '../../../utils/flatten_reference';
+import { Node, Identifier } from 'estree';
+import add_to_set from '../../../utils/add_to_set';
+import mark_each_block_bindings from '../shared/mark_each_block_bindings';
+import handle_select_value_binding from './handle_select_value_binding';
+
+export default class BindingWrapper {
+	node: Binding;
+	parent: ElementWrapper | InlineComponentWrapper;
+
+	object: string;
+	handler: {
+		uses_context: boolean;
+		mutation: (Node | Node[]);
+		contextual_dependencies: Set<string>;
+		lhs?: Node;
+	};
+	snippet: Node;
+	is_readonly: boolean;
+	needs_lock: boolean;
+
+	constructor(block: Block, node: Binding, parent: ElementWrapper | InlineComponentWrapper) {
+		this.node = node;
+		this.parent = parent;
+
+		const { dependencies } = this.node.expression;
+
+		block.add_dependencies(dependencies);
+
+		// TODO does this also apply to e.g. `<input type='checkbox' bind:group='foo'>`?
+
+		handle_select_value_binding(this, dependencies);
+
+		if (node.is_contextual) {
+			mark_each_block_bindings(this.parent, this.node);
+		}
+
+		this.object = get_object(this.node.expression.node).name;
+
+		// view to model
+		this.handler = get_event_handler(this, parent.renderer, block, this.object, this.node.raw_expression);
+
+		this.snippet = this.node.expression.manipulate(block);
+
+		this.is_readonly = this.node.is_readonly;
+
+		this.needs_lock = this.node.name === 'currentTime';  // TODO others?
+	}
+
+	get_dependencies() {
+		const dependencies = new Set(this.node.expression.dependencies);
+
+		this.node.expression.dependencies.forEach((prop: string) => {
+			const indirect_dependencies = this.parent.renderer.component.indirect_dependencies.get(prop);
+			if (indirect_dependencies) {
+				indirect_dependencies.forEach(indirect_dependency => {
+					dependencies.add(indirect_dependency);
+				});
+			}
+		});
+
+		return dependencies;
+	}
+
+	get_update_dependencies() {
+		const object = this.object;
+		const dependencies = new Set<string>();
+		if (this.node.expression.template_scope.names.has(object)) {
+			this.node.expression.template_scope.dependencies_for_name
+				.get(object)
+				.forEach((name) => dependencies.add(name));
+		} else {
+			dependencies.add(object);
+		}
+
+		const result = new Set(dependencies);
+		dependencies.forEach((dependency) => {
+			const indirect_dependencies = this.parent.renderer.component.indirect_dependencies.get(dependency);
+			if (indirect_dependencies) {
+				indirect_dependencies.forEach(indirect_dependency => {
+					result.add(indirect_dependency);
+				});
+			}
+		});
+
+		return result;
+	}
+
+	is_readonly_media_attribute() {
+		return this.node.is_readonly_media_attribute();
+	}
+
+	render(block: Block, lock: Identifier) {
+		if (this.is_readonly) return;
+
+		const { parent } = this;
+
+		const update_conditions: any[] = this.needs_lock ? [x`!${lock}`] : [];
+		const mount_conditions: any[] = [];
+
+		const dependency_array = Array.from(this.get_dependencies());
+
+		if (dependency_array.length > 0) {
+			update_conditions.push(block.renderer.dirty(dependency_array));
+		}
+
+		if (parent.node.name === 'input') {
+			const type = parent.node.get_static_attribute_value('type');
+
+			if (
+				type === null ||
+				type === '' ||
+				type === 'text' ||
+				type === 'email' ||
+				type === 'password'
+			) {
+				update_conditions.push(
+					x`${parent.var}.${this.node.name} !== ${this.snippet}`
+				);
+			} else if (type === 'number') {
+				update_conditions.push(
+					x`@to_number(${parent.var}.${this.node.name}) !== ${this.snippet}`
+				);
+			}
+		}
+
+		// model to view
+		let update_dom = get_dom_updater(parent, this);
+		let mount_dom = update_dom;
+
+		// special cases
+		switch (this.node.name) {
+			case 'group':
+			{
+				const { binding_group, is_context, contexts, index, keypath } = get_binding_group(parent.renderer, this.node, block);
+
+				block.renderer.add_to_context('$$binding_groups');
+
+				if (is_context && !block.binding_group_initialised.has(keypath)) {
+					if (contexts.length > 1) {
+						let binding_group = x`${block.renderer.reference('$$binding_groups')}[${index}]`;
+						for (const name of contexts.slice(0, -1)) {
+							binding_group = x`${binding_group}[${block.renderer.reference(name)}]`;
+							block.chunks.init.push(
+								b`${binding_group} = ${binding_group} || [];`
+							);
+						}
+					}
+					block.chunks.init.push(
+						b`${binding_group(true)} = [];`
+					);
+					block.binding_group_initialised.add(keypath);
+				}
+
+				block.chunks.hydrate.push(
+					b`${binding_group(true)}.push(${parent.var});`
+				);
+
+				block.chunks.destroy.push(
+					b`${binding_group(true)}.splice(${binding_group(true)}.indexOf(${parent.var}), 1);`
+				);
+				break;
+			}
+
+			case 'textContent':
+				update_conditions.push(x`${this.snippet} !== ${parent.var}.textContent`);
+				mount_conditions.push(x`${this.snippet} !== void 0`);
+				break;
+
+			case 'innerHTML':
+				update_conditions.push(x`${this.snippet} !== ${parent.var}.innerHTML`);
+				mount_conditions.push(x`${this.snippet} !== void 0`);
+				break;
+
+			case 'currentTime':
+				update_conditions.push(x`!@_isNaN(${this.snippet})`);
+				mount_dom = null;
+				break;
+
+			case 'playbackRate':
+			case 'volume':
+				update_conditions.push(x`!@_isNaN(${this.snippet})`);
+				mount_conditions.push(x`!@_isNaN(${this.snippet})`);
+				break;
+
+			case 'paused':
+			{
+				// this is necessary to prevent audio restarting by itself
+				const last = block.get_unique_name(`${parent.var.name}_is_paused`);
+				block.add_variable(last, x`true`);
+
+				update_conditions.push(x`${last} !== (${last} = ${this.snippet})`);
+				update_dom = b`${parent.var}[${last} ? "pause" : "play"]();`;
+				mount_dom = null;
+				break;
+			}
+
+			case 'value':
+				if (parent.node.get_static_attribute_value('type') === 'file') {
+					update_dom = null;
+					mount_dom = null;
+				}
+		}
+
+		if (update_dom) {
+			if (update_conditions.length > 0) {
+				const condition = update_conditions.reduce((lhs, rhs) => x`${lhs} && ${rhs}`);
+
+				block.chunks.update.push(b`
+					if (${condition}) {
+						${update_dom}
+					}
+				`);
+			} else {
+				block.chunks.update.push(update_dom);
+			}
+		}
+
+		if (mount_dom) {
+			if (mount_conditions.length > 0) {
+				const condition = mount_conditions.reduce((lhs, rhs) => x`${lhs} && ${rhs}`);
+
+				block.chunks.mount.push(b`
+					if (${condition}) {
+						${mount_dom}
+					}
+				`);
+			} else {
+				block.chunks.mount.push(mount_dom);
+			}
+		}
+	}
+}
+
+function get_dom_updater(
+	element: ElementWrapper | InlineComponentWrapper,
+	binding: BindingWrapper
+) {
+	const { node } = element;
+
+	if (binding.is_readonly_media_attribute()) {
+		return null;
+	}
+
+	if (binding.node.name === 'this') {
+		return null;
+	}
+
+	if (node.name === 'select') {
+		return node.get_static_attribute_value('multiple') === true ?
+			b`@select_options(${element.var}, ${binding.snippet})` :
+			b`@select_option(${element.var}, ${binding.snippet})`;
+	}
+
+	if (binding.node.name === 'group') {
+		const type = node.get_static_attribute_value('type');
+
+		const condition = type === 'checkbox'
+			? x`~${binding.snippet}.indexOf(${element.var}.__value)`
+			: x`${element.var}.__value === ${binding.snippet}`;
+
+		return b`${element.var}.checked = ${condition};`;
+	}
+
+	if (binding.node.name === 'value') {
+		return b`@set_input_value(${element.var}, ${binding.snippet});`;
+	}
+
+	return b`${element.var}.${binding.node.name} = ${binding.snippet};`;
+}
+
+function get_binding_group(renderer: Renderer, value: Binding, block: Block) {
+	const { parts } = flatten_reference(value.raw_expression);
+	let keypath = parts.join('.');
+
+	const contexts = [];
+	const contextual_dependencies = new Set<string>();
+	const { template_scope } = value.expression;
+	const add_contextual_dependency = (dep: string) => {
+		contextual_dependencies.add(dep);
+		const owner = template_scope.get_owner(dep);
+		if (owner.type === 'EachBlock') {
+			for (const dep of owner.expression.contextual_dependencies) {
+				add_contextual_dependency(dep);
+			}
+		}
+	};
+	for (const dep of value.expression.contextual_dependencies) {
+		add_contextual_dependency(dep);
+	}
+
+	for (const dep of contextual_dependencies) {
+		const context = block.bindings.get(dep);
+		let key;
+		let name;
+		if (context) {
+			key = context.object.name;
+			name = context.property.name;
+		} else {
+			key = dep;
+			name = dep;
+		}
+		keypath = `${key}@${keypath}`;
+		contexts.push(name);
+	}
+
+	if (!renderer.binding_groups.has(keypath)) {
+		const index = renderer.binding_groups.size;
+
+		contexts.forEach(context => {
+			renderer.add_to_context(context, true);
+		});
+
+		renderer.binding_groups.set(keypath, {
+			binding_group: (to_reference: boolean = false) => {
+				let binding_group = '$$binding_groups';
+				let _secondary_indexes = contexts;
+
+				if (to_reference) {
+					binding_group = block.renderer.reference(binding_group);
+					_secondary_indexes = _secondary_indexes.map(name => block.renderer.reference(name));
+				}
+
+				if (_secondary_indexes.length > 0) {
+					let obj = x`${binding_group}[${index}]`;
+					_secondary_indexes.forEach(secondary_index => {
+						obj = x`${obj}[${secondary_index}]`;
+					});
+					return obj;
+				} else {
+					return x`${binding_group}[${index}]`;
+				}
+			},
+			is_context: contexts.length > 0,
+			contexts,
+			index,
+			keypath
+		});
+	}
+
+	return renderer.binding_groups.get(keypath);
+}
+
+function get_event_handler(
+	binding: BindingWrapper,
+	renderer: Renderer,
+	block: Block,
+	name: string,
+	lhs: Node
+): {
+	uses_context: boolean;
+	mutation: (Node | Node[]);
+	contextual_dependencies: Set<string>;
+	lhs?: Node;
+} {
+	const contextual_dependencies = new Set<string>(binding.node.expression.contextual_dependencies);
+
+	const context = block.bindings.get(name);
+	let set_store;
+
+	if (context) {
+		const { object, property, store, snippet } = context;
+		lhs = replace_object(lhs, snippet);
+		contextual_dependencies.add(object.name);
+		contextual_dependencies.add(property.name);
+		contextual_dependencies.delete(name);
+
+		if (store) {
+			set_store = b`${store}.set(${`$${store}`});`;
+		}
+	} else {
+		const object = get_object(lhs);
+		if (object.name[0] === '$') {
+			const store = object.name.slice(1);
+			set_store = b`${store}.set(${object.name});`;
+		}
+	}
+
+	const value = get_value_from_dom(renderer, binding.parent, binding, block, contextual_dependencies);
+
+	const mutation = b`
+		${lhs} = ${value};
+		${set_store}
+	`;
+
+	return {
+		uses_context: binding.node.is_contextual || binding.node.expression.uses_context, // TODO this is messy
+		mutation,
+		contextual_dependencies,
+		lhs
+	};
+}
+
+function get_value_from_dom(
+	renderer: Renderer,
+	element: ElementWrapper | InlineComponentWrapper,
+	binding: BindingWrapper,
+	block: Block,
+	contextual_dependencies: Set<string>
+) {
+	const { node } = element;
+	const { name } = binding.node;
+
+	if (name === 'this') {
+		return x`$$value`;
+	}
+
+	// <select bind:value='selected>
+	if (node.name === 'select') {
+		return node.get_static_attribute_value('multiple') === true ?
+			x`@select_multiple_value(this)` :
+			x`@select_value(this)`;
+	}
+
+	const type = node.get_static_attribute_value('type');
+
+	// <input type='checkbox' bind:group='foo'>
+	if (name === 'group') {
+		if (type === 'checkbox') {
+			const { binding_group, contexts } = get_binding_group(renderer, binding.node, block);
+			add_to_set(contextual_dependencies, contexts);
+			return x`@get_binding_group_value(${binding_group()}, this.__value, this.checked)`;
+		}
+
+		return x`this.__value`;
+	}
+
+	// <input type='range|number' bind:value>
+	if (type === 'range' || type === 'number') {
+		return x`@to_number(this.${name})`;
+	}
+
+	if ((name === 'buffered' || name === 'seekable' || name === 'played')) {
+		return x`@time_ranges_to_array(this.${name})`;
+	}
+
+	// everything else
+	return x`this.${name}`;
+}
diff --git a/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts b/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts
new file mode 100644
index 0000000000..fc65a9aa5e
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts
@@ -0,0 +1,73 @@
+import EventHandler from '../../../nodes/EventHandler';
+import Wrapper from '../shared/Wrapper';
+import Block from '../../Block';
+import { b, x, p } from 'code-red';
+import { Expression } from 'estree';
+
+const TRUE = x`true`;
+const FALSE = x`false`;
+
+export default class EventHandlerWrapper {
+	node: EventHandler;
+	parent: Wrapper;
+
+	constructor(node: EventHandler, parent: Wrapper) {
+		this.node = node;
+		this.parent = parent;
+
+		if (!node.expression) {
+			this.parent.renderer.add_to_context(node.handler_name.name);
+
+			this.parent.renderer.component.partly_hoisted.push(b`
+				function ${node.handler_name.name}(event) {
+					@bubble.call(this, $$self, event);
+				}
+			`);
+		}
+	}
+
+	get_snippet(block) {
+		const snippet = this.node.expression ? this.node.expression.manipulate(block) : block.renderer.reference(this.node.handler_name);
+
+		if (this.node.reassigned) {
+			block.maintain_context = true;
+			return x`function () { if (@is_function(${snippet})) ${snippet}.apply(this, arguments); }`;
+		}
+		return snippet;
+	}
+
+	render(block: Block, target: string | Expression) {
+		let snippet = this.get_snippet(block);
+
+		if (this.node.modifiers.has('preventDefault')) snippet = x`@prevent_default(${snippet})`;
+		if (this.node.modifiers.has('stopPropagation')) snippet = x`@stop_propagation(${snippet})`;
+		if (this.node.modifiers.has('self')) snippet = x`@self(${snippet})`;
+		if (this.node.modifiers.has('trusted')) snippet = x`@trusted(${snippet})`;
+
+		const args = [];
+
+		const opts = ['nonpassive', 'passive', 'once', 'capture'].filter(mod => this.node.modifiers.has(mod));
+		if (opts.length) {
+			if (opts.length === 1 && opts[0] === 'capture') {
+				args.push(TRUE);
+			} else {
+				args.push(x`{ ${ opts.map(opt =>
+					opt === 'nonpassive'
+						? p`passive: false`
+						: p`${opt}: true`
+				) } }`);
+			}
+		} else if (block.renderer.options.dev) {
+			args.push(FALSE);
+		}
+
+		if (block.renderer.options.dev) {
+			args.push(this.node.modifiers.has('preventDefault') ? TRUE : FALSE);
+			args.push(this.node.modifiers.has('stopPropagation') ? TRUE : FALSE);
+		}
+
+		block.event_listeners.push(
+			x`@listen(${target}, "${this.node.name}", ${snippet}, ${args})`
+		);
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/Element/SpreadAttribute.ts b/src/compiler/compile/render_dom/wrappers/Element/SpreadAttribute.ts
new file mode 100644
index 0000000000..2be346c15a
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/Element/SpreadAttribute.ts
@@ -0,0 +1,3 @@
+import { BaseAttributeWrapper } from './Attribute';
+
+export default class SpreadAttributeWrapper extends BaseAttributeWrapper {}
diff --git a/src/compiler/compile/render_dom/wrappers/Element/StyleAttribute.ts b/src/compiler/compile/render_dom/wrappers/Element/StyleAttribute.ts
new file mode 100644
index 0000000000..ac7f66b6ac
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/Element/StyleAttribute.ts
@@ -0,0 +1,190 @@
+import { b, x } from 'code-red';
+import Attribute from '../../../nodes/Attribute';
+import Block from '../../Block';
+import AttributeWrapper from './Attribute';
+import ElementWrapper from '../Element';
+import { string_literal } from '../../../utils/stringify';
+import add_to_set from '../../../utils/add_to_set';
+import Expression from '../../../nodes/shared/Expression';
+import Text from '../../../nodes/Text';
+
+export interface StyleProp {
+	key: string;
+	value: Array<Text | Expression>;
+	important: boolean;
+}
+
+export default class StyleAttributeWrapper extends AttributeWrapper {
+	node: Attribute;
+	parent: ElementWrapper;
+
+	render(block: Block) {
+		const style_props = optimize_style(this.node.chunks);
+		if (!style_props) return super.render(block);
+
+		style_props.forEach((prop: StyleProp) => {
+			let value;
+
+			if (is_dynamic(prop.value)) {
+				const prop_dependencies: Set<string> = new Set();
+
+				value = prop.value
+					.map(chunk => {
+						if (chunk.type === 'Text') {
+							return string_literal(chunk.data);
+						} else {
+							add_to_set(prop_dependencies, chunk.dynamic_dependencies());
+							return chunk.manipulate(block);
+						}
+					})
+					.reduce((lhs, rhs) => x`${lhs} + ${rhs}`);
+
+				// TODO is this necessary? style.setProperty always treats value as string, no?
+				// if (prop.value.length === 1 || prop.value[0].type !== 'Text') {
+				// 	value = x`"" + ${value}`;
+				// }
+
+				if (prop_dependencies.size) {
+					let condition = block.renderer.dirty(Array.from(prop_dependencies));
+
+					if (block.has_outros) {
+						condition = x`!#current || ${condition}`;
+					}
+
+					const update = b`
+						if (${condition}) {
+							@set_style(${this.parent.var}, "${prop.key}", ${value}, ${prop.important ? 1 : null});
+						}`;
+
+					block.chunks.update.push(update);
+				}
+			} else {
+				value = string_literal((prop.value[0] as Text).data);
+			}
+
+			block.chunks.hydrate.push(
+				b`@set_style(${this.parent.var}, "${prop.key}", ${value}, ${prop.important ? 1 : null});`
+			);
+		});
+	}
+}
+
+function optimize_style(value: Array<Text | Expression>) {
+	const props: StyleProp[] = [];
+	let chunks = value.slice();
+
+	while (chunks.length) {
+		const chunk = chunks[0];
+
+		if (chunk.type !== 'Text') return null;
+
+		const key_match = /^\s*([\w-]+):\s*/.exec(chunk.data);
+		if (!key_match) return null;
+
+		const key = key_match[1];
+
+		const offset = key_match.index + key_match[0].length;
+		const remaining_data = chunk.data.slice(offset);
+
+		if (remaining_data) {
+			chunks[0] = {
+				start: chunk.start + offset,
+				end: chunk.end,
+				type: 'Text',
+				data: remaining_data
+			} as Text;
+		} else {
+			chunks.shift();
+		}
+
+		const result = get_style_value(chunks);
+
+		props.push({ key, value: result.value, important: result.important });
+		chunks = result.chunks;
+	}
+
+	return props;
+}
+
+function get_style_value(chunks: Array<Text | Expression>) {
+	const value: Array<Text | Expression> = [];
+
+	let in_url = false;
+	let quote_mark = null;
+	let escaped = false;
+	let closed = false;
+
+	while (chunks.length && !closed) {
+		const chunk = chunks.shift();
+
+		if (chunk.type === 'Text') {
+			let c = 0;
+			while (c < chunk.data.length) {
+				const char = chunk.data[c];
+
+				if (escaped) {
+					escaped = false;
+				} else if (char === '\\') {
+					escaped = true;
+				} else if (char === quote_mark) {
+					quote_mark = null;
+				} else if (char === '"' || char === "'") {
+					quote_mark = char;
+				} else if (char === ')' && in_url) {
+					in_url = false;
+				} else if (char === 'u' && chunk.data.slice(c, c + 4) === 'url(') {
+					in_url = true;
+				} else if (char === ';' && !in_url && !quote_mark) {
+					closed = true;
+					break;
+				}
+
+				c += 1;
+			}
+
+			if (c > 0) {
+				value.push({
+					type: 'Text',
+					start: chunk.start,
+					end: chunk.start + c,
+					data: chunk.data.slice(0, c)
+				} as Text);
+			}
+
+			while (/[;\s]/.test(chunk.data[c])) c += 1;
+			const remaining_data = chunk.data.slice(c);
+
+			if (remaining_data) {
+				chunks.unshift({
+					start: chunk.start + c,
+					end: chunk.end,
+					type: 'Text',
+					data: remaining_data
+				} as Text);
+
+				break;
+			}
+		} else {
+			value.push(chunk);
+		}
+	}
+
+	let important = false;
+
+	const last_chunk = value[value.length - 1];
+	if (last_chunk && last_chunk.type === 'Text' && /\s*!important\s*$/.test(last_chunk.data)) {
+		important = true;
+		last_chunk.data = last_chunk.data.replace(/\s*!important\s*$/, '');
+		if (!last_chunk.data) value.pop();
+	}
+
+	return {
+		chunks,
+		value,
+		important
+	};
+}
+
+function is_dynamic(value: Array<Text | Expression>) {
+	return value.length > 1 || value[0].type !== 'Text';
+}
diff --git a/src/compiler/compile/render_dom/wrappers/Element/fix_attribute_casing.ts b/src/compiler/compile/render_dom/wrappers/Element/fix_attribute_casing.ts
new file mode 100644
index 0000000000..7044d5d7b3
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/Element/fix_attribute_casing.ts
@@ -0,0 +1,12 @@
+const svg_attributes = 'accent-height accumulate additive alignment-baseline allowReorder alphabetic amplitude arabic-form ascent attributeName attributeType autoReverse azimuth baseFrequency baseline-shift baseProfile bbox begin bias by calcMode cap-height class clip clipPathUnits clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering contentScriptType contentStyleType cursor cx cy d decelerate descent diffuseConstant direction display divisor dominant-baseline dur dx dy edgeMode elevation enable-background end exponent externalResourcesRequired fill fill-opacity fill-rule filter filterRes filterUnits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphRef gradientTransform gradientUnits hanging height href horiz-adv-x horiz-origin-x id ideographic image-rendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength kerning keyPoints keySplines keyTimes lang lengthAdjust letter-spacing lighting-color limitingConeAngle local marker-end marker-mid marker-start markerHeight markerUnits markerWidth mask maskContentUnits maskUnits mathematical max media method min mode name numOctaves offset onabort onactivate onbegin onclick onend onerror onfocusin onfocusout onload onmousedown onmousemove onmouseout onmouseover onmouseup onrepeat onresize onscroll onunload opacity operator order orient orientation origin overflow overline-position overline-thickness panose-1 paint-order pathLength patternContentUnits patternTransform patternUnits pointer-events points pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits r radius refX refY rendering-intent repeatCount repeatDur requiredExtensions requiredFeatures restart result rotate rx ry scale seed shape-rendering slope spacing specularConstant specularExponent speed spreadMethod startOffset stdDeviation stemh stemv stitchTiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style surfaceScale systemLanguage tabindex tableValues target targetX targetY text-anchor text-decoration text-rendering textLength to transform type u1 u2 underline-position underline-thickness unicode unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical values version vert-adv-y vert-origin-x vert-origin-y viewBox viewTarget visibility width widths word-spacing writing-mode x x-height x1 x2 xChannelSelector xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type xml:base xml:lang xml:space y y1 y2 yChannelSelector z zoomAndPan'.split(' ');
+
+const svg_attribute_lookup = new Map();
+
+svg_attributes.forEach(name => {
+	svg_attribute_lookup.set(name.toLowerCase(), name);
+});
+
+export default function fix_attribute_casing(name) {
+	name = name.toLowerCase();
+	return svg_attribute_lookup.get(name) || name;
+}
diff --git a/src/compiler/compile/render_dom/wrappers/Element/handle_select_value_binding.ts b/src/compiler/compile/render_dom/wrappers/Element/handle_select_value_binding.ts
new file mode 100644
index 0000000000..ff6e0a39ee
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/Element/handle_select_value_binding.ts
@@ -0,0 +1,16 @@
+import AttributeWrapper from './Attribute';
+import BindingWrapper from './Binding';
+import ElementWrapper from './index';
+
+export default function handle_select_value_binding(
+	attr: AttributeWrapper | BindingWrapper,
+	dependencies: Set<string>
+) {
+	const { parent } = attr;
+	if (parent.node.name === 'select') {
+		(parent as ElementWrapper).select_binding_dependencies = dependencies;
+		dependencies.forEach((prop: string) => {
+			parent.renderer.component.indirect_dependencies.set(prop, new Set());
+		});
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
new file mode 100644
index 0000000000..eed7c6f4ee
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -0,0 +1,1217 @@
+import Renderer from '../../Renderer';
+import Element from '../../../nodes/Element';
+import Wrapper from '../shared/Wrapper';
+import Block from '../../Block';
+import { is_void } from '../../../../../shared/utils/names';
+import FragmentWrapper from '../Fragment';
+import { escape_html, string_literal } from '../../../utils/stringify';
+import TextWrapper from '../Text';
+import fix_attribute_casing from './fix_attribute_casing';
+import { b, x, p } from 'code-red';
+import { namespaces } from '../../../../utils/namespaces';
+import AttributeWrapper from './Attribute';
+import StyleAttributeWrapper from './StyleAttribute';
+import SpreadAttributeWrapper from './SpreadAttribute';
+import { dimensions, start_newline } from '../../../../utils/patterns';
+import Binding from './Binding';
+import add_to_set from '../../../utils/add_to_set';
+import { add_event_handler } from '../shared/add_event_handlers';
+import { add_action } from '../shared/add_actions';
+import bind_this from '../shared/bind_this';
+import { is_head } from '../shared/is_head';
+import { Identifier, ExpressionStatement, CallExpression } from 'estree';
+import EventHandler from './EventHandler';
+import { extract_names } from 'periscopic';
+import Action from '../../../nodes/Action';
+import MustacheTagWrapper from '../MustacheTag';
+import RawMustacheTagWrapper from '../RawMustacheTag';
+import is_dynamic from '../shared/is_dynamic';
+import create_debugging_comment from '../shared/create_debugging_comment';
+import { push_array } from '../../../../utils/push_array';
+
+interface BindingGroup {
+	events: string[];
+	bindings: Binding[];
+}
+
+const events = [
+	{
+		event_names: ['input'],
+		filter: (node: Element, _name: string) =>
+			node.name === 'textarea' ||
+			node.name === 'input' && !/radio|checkbox|range|file/.test(node.get_static_attribute_value('type') as string)
+	},
+	{
+		event_names: ['input'],
+		filter: (node: Element, name: string) =>
+			(name === 'textContent' || name === 'innerHTML') &&
+			node.attributes.some(attribute => attribute.name === 'contenteditable')
+	},
+	{
+		event_names: ['change'],
+		filter: (node: Element, _name: string) =>
+			node.name === 'select' ||
+			node.name === 'input' && /radio|checkbox|file/.test(node.get_static_attribute_value('type') as string)
+	},
+	{
+		event_names: ['change', 'input'],
+		filter: (node: Element, _name: string) =>
+			node.name === 'input' && node.get_static_attribute_value('type') === 'range'
+	},
+
+	{
+		event_names: ['elementresize'],
+		filter: (_node: Element, name: string) =>
+			dimensions.test(name)
+	},
+
+	// media events
+	{
+		event_names: ['timeupdate'],
+		filter: (node: Element, name: string) =>
+			node.is_media_node() &&
+			(name === 'currentTime' || name === 'played' || name === 'ended')
+	},
+	{
+		event_names: ['durationchange'],
+		filter: (node: Element, name: string) =>
+			node.is_media_node() &&
+			name === 'duration'
+	},
+	{
+		event_names: ['play', 'pause'],
+		filter: (node: Element, name: string) =>
+			node.is_media_node() &&
+			name === 'paused'
+	},
+	{
+		event_names: ['progress'],
+		filter: (node: Element, name: string) =>
+			node.is_media_node() &&
+			name === 'buffered'
+	},
+	{
+		event_names: ['loadedmetadata'],
+		filter: (node: Element, name: string) =>
+			node.is_media_node() &&
+			(name === 'buffered' || name === 'seekable')
+	},
+	{
+		event_names: ['volumechange'],
+		filter: (node: Element, name: string) =>
+			node.is_media_node() &&
+			(name === 'volume' || name === 'muted')
+	},
+	{
+		event_names: ['ratechange'],
+		filter: (node: Element, name: string) =>
+			node.is_media_node() &&
+			name === 'playbackRate'
+	},
+	{
+		event_names: ['seeking', 'seeked'],
+		filter: (node: Element, name: string) =>
+			node.is_media_node() &&
+			(name === 'seeking')
+	},
+	{
+		event_names: ['ended'],
+		filter: (node: Element, name: string) =>
+			node.is_media_node() &&
+			name === 'ended'
+	},
+	{
+		event_names: ['resize'],
+		filter: (node: Element, name: string) =>
+			node.is_media_node() &&
+			(name === 'videoHeight' || name === 'videoWidth')
+	},
+
+	// details event
+	{
+		event_names: ['toggle'],
+		filter: (node: Element, _name: string) =>
+			node.name === 'details'
+	}
+];
+
+const CHILD_DYNAMIC_ELEMENT_BLOCK = 'child_dynamic_element';
+
+export default class ElementWrapper extends Wrapper {
+	node: Element;
+	fragment: FragmentWrapper;
+	attributes: Array<AttributeWrapper | StyleAttributeWrapper | SpreadAttributeWrapper>;
+	bindings: Binding[];
+	event_handlers: EventHandler[];
+	class_dependencies: string[];
+
+	select_binding_dependencies?: Set<string>;
+
+	var: any;
+	void: boolean;
+
+	child_dynamic_element_block?: Block = null;
+	child_dynamic_element?: ElementWrapper = null;
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: Element,
+		strip_whitespace: boolean,
+		next_sibling: Wrapper
+	) {
+		super(renderer, block, parent, node);
+
+		if (node.is_dynamic_element && block.type !== CHILD_DYNAMIC_ELEMENT_BLOCK) {
+			this.child_dynamic_element_block = block.child({
+				comment: create_debugging_comment(node, renderer.component),
+				name: renderer.component.get_unique_name('create_dynamic_element'),
+				type: CHILD_DYNAMIC_ELEMENT_BLOCK
+			});
+			renderer.blocks.push(this.child_dynamic_element_block);
+			this.child_dynamic_element = new ElementWrapper(
+				renderer,
+				this.child_dynamic_element_block,
+				parent,
+				node,
+				strip_whitespace,
+				next_sibling
+			);
+		}
+
+		this.var = {
+			type: 'Identifier',
+			name: node.name.replace(/[^a-zA-Z0-9_$]/g, '_')
+		};
+
+		this.void = is_void(node.name);
+
+		this.class_dependencies = [];
+
+		if (this.node.children.length) {
+			this.node.lets.forEach(l => {
+				extract_names(l.value || l.name).forEach(name => {
+					renderer.add_to_context(name, true);
+				});
+			});
+		}
+
+		this.attributes = this.node.attributes.map(attribute => {
+			if (attribute.name === 'style') {
+				return new StyleAttributeWrapper(this, block, attribute);
+			}
+			if (attribute.type === 'Spread') {
+				return new SpreadAttributeWrapper(this, block, attribute);
+			}
+			return new AttributeWrapper(this, block, attribute);
+		});
+
+		// ordinarily, there'll only be one... but we need to handle
+		// the rare case where an element can have multiple bindings,
+		// e.g. <audio bind:paused bind:currentTime>
+		this.bindings = this.node.bindings.map(binding => new Binding(block, binding, this));
+
+		this.event_handlers = this.node.handlers.map(event_handler => new EventHandler(event_handler, this));
+
+		if (node.intro || node.outro) {
+			if (node.intro) block.add_intro(node.intro.is_local);
+			if (node.outro) block.add_outro(node.outro.is_local);
+		}
+
+		if (node.animation) {
+			block.add_animation();
+		}
+
+		block.add_dependencies(node.tag_expr.dependencies);
+
+		// add directive and handler dependencies
+		[node.animation, node.outro, ...node.actions, ...node.classes, ...node.styles].forEach(directive => {
+			if (directive && directive.expression) {
+				block.add_dependencies(directive.expression.dependencies);
+			}
+		});
+
+		node.handlers.forEach(handler => {
+			if (handler.expression) {
+				block.add_dependencies(handler.expression.dependencies);
+			}
+		});
+
+		if (this.parent) {
+			if (node.actions.length > 0 ||
+				node.animation ||
+				node.bindings.length > 0 ||
+				node.classes.length > 0 ||
+				node.intro || node.outro ||
+				node.handlers.length > 0 ||
+				node.styles.length > 0 ||
+				this.node.name === 'option' ||
+				node.tag_expr.dynamic_dependencies().length ||
+				renderer.options.dev
+			) {
+				this.parent.cannot_use_innerhtml(); // need to use add_location
+				this.parent.not_static_content();
+			}
+		}
+
+		this.fragment = new FragmentWrapper(renderer, block, node.children, this, strip_whitespace, next_sibling);
+	}
+
+	render(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
+		if (this.child_dynamic_element) {
+			this.render_dynamic_element(block, parent_node, parent_nodes);
+		} else {
+			this.render_element(block, parent_node, parent_nodes);
+		}
+	}
+
+	render_dynamic_element(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
+		this.child_dynamic_element.render(
+			this.child_dynamic_element_block,
+			null,
+			(x`#nodes` as unknown) as Identifier
+		);
+
+		const previous_tag = block.get_unique_name('previous_tag');
+		const tag = this.node.tag_expr.manipulate(block);
+		block.add_variable(previous_tag, tag);
+
+		block.chunks.init.push(b`
+			${this.renderer.options.dev && b`@validate_dynamic_element(${tag});`}
+			${this.renderer.options.dev && this.node.children.length > 0 && b`@validate_void_dynamic_element(${tag});`}
+			let ${this.var} = ${tag} && ${this.child_dynamic_element_block.name}(#ctx);
+		`);
+
+		block.chunks.create.push(b`
+			if (${this.var}) ${this.var}.c();
+		`);
+
+		if (this.renderer.options.hydratable) {
+			block.chunks.claim.push(b`
+				if (${this.var}) ${this.var}.l(${parent_nodes});
+			`);
+		}
+
+		block.chunks.mount.push(b`
+			if (${this.var}) ${this.var}.m(${parent_node || '#target'}, ${parent_node ? 'null' : '#anchor'});
+		`);
+
+		const anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
+		const has_transitions = !!(this.node.intro || this.node.outro);
+		const not_equal = this.renderer.component.component_options.immutable ? x`@not_equal` : x`@safe_not_equal`;
+
+		block.chunks.update.push(b`
+			if (${tag}) {
+				if (!${previous_tag}) {
+					${this.var} = ${this.child_dynamic_element_block.name}(#ctx);
+					${this.var}.c();
+					${has_transitions && b`@transition_in(${this.var})`}
+					${this.var}.m(${this.get_update_mount_node(anchor)}, ${anchor});
+				} else if (${not_equal}(${previous_tag}, ${tag})) {
+					${this.var}.d(1);
+					${this.renderer.options.dev && b`@validate_dynamic_element(${tag});`}
+					${this.renderer.options.dev && this.node.children.length > 0 && b`@validate_void_dynamic_element(${tag});`}
+					${this.var} = ${this.child_dynamic_element_block.name}(#ctx);
+					${this.var}.c();
+					${this.var}.m(${this.get_update_mount_node(anchor)}, ${anchor});
+				} else {
+					${this.var}.p(#ctx, #dirty);
+				}
+			} else if (${previous_tag}) {
+				${
+					has_transitions
+						? b`
+							@group_outros();
+							@transition_out(${this.var}, 1, 1, () => {
+								${this.var} = null;
+							});
+							@check_outros();
+						`
+						: b`
+							${this.var}.d(1);
+							${this.var} = null;
+						`
+				}
+			}
+			${previous_tag} = ${tag};
+		`);
+
+		if (this.child_dynamic_element_block.has_intros) {
+			block.chunks.intro.push(b`@transition_in(${this.var});`);
+		}
+
+		if (this.child_dynamic_element_block.has_outros) {
+			block.chunks.outro.push(b`@transition_out(${this.var});`);
+		}
+
+		block.chunks.destroy.push(b`if (${this.var}) ${this.var}.d(detaching)`);
+
+		if (this.node.animation) {
+			const measurements = block.get_unique_name('measurements');
+			block.add_variable(measurements);
+			block.chunks.measure.push(b`${measurements} = ${this.var}.r()`);
+			block.chunks.fix.push(b`${this.var}.f();`);
+			block.chunks.animate.push(b`
+				${this.var}.s(${measurements});
+				${this.var}.a()
+			`);
+		}
+	}
+
+	is_dom_node() {
+		return super.is_dom_node() && !this.child_dynamic_element;
+	}
+
+	render_element(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
+
+		const { renderer } = this;
+
+		if (this.node.name === 'noscript') return;
+
+		const node = this.var;
+		const nodes = parent_nodes && block.get_unique_name(`${this.var.name}_nodes`); // if we're in unclaimable territory, i.e. <head>, parent_nodes is null
+		const children = x`@children(${this.node.name === 'template' ? x`${node}.content` : node})`;
+
+		block.add_variable(node);
+		const render_statement = this.get_render_statement(block);
+		block.chunks.create.push(
+			b`${node} = ${render_statement};`
+		);
+
+		if (renderer.options.hydratable) {
+			if (parent_nodes) {
+				block.chunks.claim.push(b`
+					${node} = ${this.get_claim_statement(block, parent_nodes)};
+				`);
+
+				if (!this.void && this.node.children.length > 0) {
+					block.chunks.claim.push(b`
+						var ${nodes} = ${children};
+					`);
+				}
+			} else {
+				block.chunks.claim.push(
+					b`${node} = ${render_statement};`
+				);
+			}
+		}
+
+		if (parent_node) {
+			const append = b`@append(${parent_node}, ${node});`;
+			((append[0] as ExpressionStatement).expression as CallExpression).callee.loc = {
+				start: this.renderer.locate(this.node.start),
+				end: this.renderer.locate(this.node.end)
+			};
+			block.chunks.mount.push(append);
+
+			if (is_head(parent_node)) {
+				block.chunks.destroy.push(b`@detach(${node});`);
+			}
+		} else {
+			const insert = b`@insert(#target, ${node}, #anchor);`;
+			((insert[0] as ExpressionStatement).expression as CallExpression).callee.loc = {
+				start: this.renderer.locate(this.node.start),
+				end: this.renderer.locate(this.node.end)
+			};
+			block.chunks.mount.push(insert);
+
+			// TODO we eventually need to consider what happens to elements
+			// that belong to the same outgroup as an outroing element...
+			block.chunks.destroy.push(b`if (detaching) @detach(${node});`);
+		}
+
+		// insert static children with textContent or innerHTML
+		// skip textcontent for <template>.  append nodes to TemplateElement.content instead
+		const can_use_textcontent = this.can_use_textcontent();
+		const is_template = this.node.name === 'template';
+		const is_template_with_text_content = is_template && can_use_textcontent;
+
+		if (!is_template_with_text_content && !this.node.namespace && (this.can_use_innerhtml || can_use_textcontent) && this.fragment.nodes.length > 0) {
+			if (this.fragment.nodes.length === 1 && this.fragment.nodes[0].node.type === 'Text') {
+				block.chunks.create.push(
+					b`${node}.textContent = ${string_literal((this.fragment.nodes[0] as TextWrapper).data)};`
+				);
+			} else {
+				const state = {
+					quasi: {
+						type: 'TemplateElement',
+						value: { raw: '' }
+					}
+				};
+
+				const literal = {
+					type: 'TemplateLiteral',
+					expressions: [],
+					quasis: []
+				};
+
+				const can_use_raw_text = !this.can_use_innerhtml && can_use_textcontent;
+				to_html((this.fragment.nodes as unknown as Array<ElementWrapper | TextWrapper>), block, literal, state, can_use_raw_text);
+				literal.quasis.push(state.quasi);
+
+				block.chunks.create.push(
+					b`${node}.${this.can_use_innerhtml ? 'innerHTML' : 'textContent'} = ${literal};`
+				);
+			}
+		} else {
+			this.fragment.nodes.forEach((child: Wrapper) => {
+				child.render(
+					block,
+					is_template ? x`${node}.content` : node,
+					nodes
+				);
+			});
+		}
+
+		const event_handler_or_binding_uses_context = (
+			this.bindings.some(binding => binding.handler.uses_context) ||
+			this.node.handlers.some(handler => handler.uses_context) ||
+			this.node.actions.some(action => action.uses_context)
+		);
+
+		if (event_handler_or_binding_uses_context) {
+			block.maintain_context = true;
+		}
+
+		this.add_attributes(block);
+		this.add_directives_in_order(block);
+		this.add_transitions(block);
+		this.add_animation(block);
+		this.add_classes(block);
+		this.add_styles(block);
+		this.add_manual_style_scoping(block);
+
+		if (nodes && this.renderer.options.hydratable && !this.void) {
+			block.chunks.claim.push(
+				b`${this.node.children.length > 0 ? nodes : children}.forEach(@detach);`
+			);
+		}
+
+		if (renderer.options.dev) {
+			const loc = renderer.locate(this.node.start);
+			block.chunks.hydrate.push(
+				b`@add_location(${this.var}, ${renderer.file_var}, ${loc.line - 1}, ${loc.column}, ${this.node.start});`
+			);
+		}
+
+		block.renderer.dirty(this.node.tag_expr.dynamic_dependencies());
+	}
+
+	can_use_textcontent() {
+		return this.is_static_content && this.fragment.nodes.every(node => node.node.type === 'Text' || node.node.type === 'MustacheTag');
+	}
+
+	get_render_statement(block: Block) {
+		const { name, namespace, tag_expr } = this.node;
+
+		if (namespace === namespaces.svg) {
+			return x`@svg_element("${name}")`;
+		}
+
+		if (namespace) {
+			return x`@_document.createElementNS("${namespace}", "${name}")`;
+		}
+
+		const is: AttributeWrapper = this.attributes.find(attr => attr.node.name === 'is') as any;
+		if (is) {
+			return x`@element_is("${name}", ${is.render_chunks(block).reduce((lhs, rhs) => x`${lhs} + ${rhs}`)})`;
+		}
+
+		const reference = tag_expr.manipulate(block);
+		return x`@element(${reference})`;
+	}
+
+	get_claim_statement(block: Block, nodes: Identifier) {
+		const attributes = this.attributes
+			.filter((attr) => !(attr instanceof SpreadAttributeWrapper) && !attr.property_name)
+			.map((attr) => p`${(attr as StyleAttributeWrapper | AttributeWrapper).name}: true`);
+
+		let reference;
+		if (this.node.tag_expr.node.type === 'Literal') {
+			if (this.node.namespace) {
+				reference = `"${this.node.tag_expr.node.value}"`;
+			} else {
+				reference = `"${(this.node.tag_expr.node.value as String || '').toUpperCase()}"`;
+			}
+		} else if (this.node.namespace) {
+			reference = x`${this.node.tag_expr.manipulate(block)}`;
+		} else {
+			reference = x`(${this.node.tag_expr.manipulate(block)} || 'null').toUpperCase()`;
+		}
+
+		if (this.node.namespace === namespaces.svg) {
+			return x`@claim_svg_element(${nodes}, ${reference}, { ${attributes} })`;
+		} else {
+			return x`@claim_element(${nodes}, ${reference}, { ${attributes} })`;
+		}
+	}
+
+	add_directives_in_order (block: Block) {
+		type OrderedAttribute = EventHandler | BindingGroup | Binding | Action;
+
+		const binding_groups = events
+			.map(event => ({
+				events: event.event_names,
+				bindings: this.bindings
+					.filter(binding => binding.node.name !== 'this')
+					.filter(binding => event.filter(this.node, binding.node.name))
+			}))
+			.filter(group => group.bindings.length);
+
+		const this_binding = this.bindings.find(b => b.node.name === 'this');
+
+		function getOrder (item: OrderedAttribute) {
+			if (item instanceof EventHandler) {
+				return item.node.start;
+			} else if (item instanceof Binding) {
+				return item.node.start;
+			} else if (item instanceof Action) {
+				return item.start;
+			} else {
+				return item.bindings[0].node.start;
+			}
+		}
+
+		([
+			...binding_groups,
+			...this.event_handlers,
+			this_binding,
+			...this.node.actions
+		] as OrderedAttribute[])
+			.filter(Boolean)
+			.sort((a, b) => getOrder(a) - getOrder(b))
+			.forEach(item => {
+				if (item instanceof EventHandler) {
+					add_event_handler(block, this.var, item);
+				} else if (item instanceof Binding) {
+					this.add_this_binding(block, item);
+				} else if (item instanceof Action) {
+					add_action(block, this.var, item);
+				} else {
+					this.add_bindings(block, item);
+				}
+			});
+	}
+
+	add_bindings(block: Block, binding_group: BindingGroup) {
+		const { renderer } = this;
+
+		if (binding_group.bindings.length === 0) return;
+
+		renderer.component.has_reactive_assignments = true;
+
+		const lock = binding_group.bindings.some(binding => binding.needs_lock) ?
+			block.get_unique_name(`${this.var.name}_updating`) :
+			null;
+
+		if (lock) block.add_variable(lock, x`false`);
+
+		const handler = renderer.component.get_unique_name(`${this.var.name}_${binding_group.events.join('_')}_handler`);
+		renderer.add_to_context(handler.name);
+
+		// TODO figure out how to handle locks
+		const needs_lock = binding_group.bindings.some(binding => binding.needs_lock);
+
+		const dependencies: Set<string> = new Set();
+		const contextual_dependencies: Set<string> = new Set();
+
+		binding_group.bindings.forEach(binding => {
+			// TODO this is a mess
+			add_to_set(dependencies, binding.get_update_dependencies());
+			add_to_set(contextual_dependencies, binding.handler.contextual_dependencies);
+
+			binding.render(block, lock);
+		});
+
+		// media bindings — awkward special case. The native timeupdate events
+		// fire too infrequently, so we need to take matters into our
+		// own hands
+		let animation_frame;
+		if (binding_group.events[0] === 'timeupdate') {
+			animation_frame = block.get_unique_name(`${this.var.name}_animationframe`);
+			block.add_variable(animation_frame);
+		}
+
+		const has_local_function = contextual_dependencies.size > 0 || needs_lock || animation_frame;
+
+		let callee = renderer.reference(handler);
+
+		// TODO dry this out — similar code for event handlers and component bindings
+		if (has_local_function) {
+			const args = Array.from(contextual_dependencies).map(name => renderer.reference(name));
+
+			// need to create a block-local function that calls an instance-level function
+			if (animation_frame) {
+				block.chunks.init.push(b`
+					function ${handler}() {
+						@_cancelAnimationFrame(${animation_frame});
+						if (!${this.var}.paused) {
+							${animation_frame} = @raf(${handler});
+							${needs_lock && b`${lock} = true;`}
+						}
+						${callee}.call(${this.var}, ${args});
+					}
+				`);
+			} else {
+				block.chunks.init.push(b`
+					function ${handler}() {
+						${needs_lock && b`${lock} = true;`}
+						${callee}.call(${this.var}, ${args});
+					}
+				`);
+			}
+
+			callee = handler;
+		}
+
+		const params = Array.from(contextual_dependencies).map(name => ({
+			type: 'Identifier',
+			name
+		}));
+
+		this.renderer.component.partly_hoisted.push(b`
+			function ${handler}(${params}) {
+				${binding_group.bindings.map(b => b.handler.mutation)}
+				${Array.from(dependencies)
+					.filter(dep => dep[0] !== '$')
+					.filter(dep => !contextual_dependencies.has(dep))
+					.map(dep => b`${this.renderer.invalidate(dep)};`)}
+			}
+		`);
+
+		binding_group.events.forEach(name => {
+			if (name === 'elementresize') {
+				// special case
+				const resize_listener = block.get_unique_name(`${this.var.name}_resize_listener`);
+				block.add_variable(resize_listener);
+
+				block.chunks.mount.push(
+					b`${resize_listener} = @add_resize_listener(${this.var}, ${callee}.bind(${this.var}));`
+				);
+
+				block.chunks.destroy.push(
+					b`${resize_listener}();`
+				);
+			} else {
+				block.event_listeners.push(
+					x`@listen(${this.var}, "${name}", ${callee})`
+				);
+			}
+		});
+
+		const some_initial_state_is_undefined = binding_group.bindings
+			.map(binding => x`${binding.snippet} === void 0`)
+			.reduce((lhs, rhs) => x`${lhs} || ${rhs}`);
+
+		const should_initialise = (
+			this.node.name === 'select' ||
+			binding_group.bindings.find(binding => {
+				return (
+					binding.node.name === 'indeterminate' ||
+					binding.node.name === 'textContent' ||
+					binding.node.name === 'innerHTML' ||
+					binding.is_readonly_media_attribute()
+				);
+			})
+		);
+
+		if (should_initialise) {
+			const callback = has_local_function ? handler : x`() => ${callee}.call(${this.var})`;
+			block.chunks.hydrate.push(
+				b`if (${some_initial_state_is_undefined}) @add_render_callback(${callback});`
+			);
+		}
+
+		if (binding_group.events[0] === 'elementresize') {
+			block.chunks.hydrate.push(
+				b`@add_render_callback(() => ${callee}.call(${this.var}));`
+			);
+		}
+
+		if (lock) {
+			block.chunks.update.push(b`${lock} = false;`);
+		}
+	}
+
+	add_this_binding(block: Block, this_binding: Binding) {
+		const { renderer } = this;
+
+		renderer.component.has_reactive_assignments = true;
+
+		const binding_callback = bind_this(renderer.component, block, this_binding, this.var);
+		block.chunks.mount.push(binding_callback);
+	}
+
+	add_attributes(block: Block) {
+		// Get all the class dependencies first
+		this.attributes.forEach((attribute) => {
+			if (attribute.node.name === 'class') {
+				const dependencies = attribute.node.get_dependencies();
+				push_array(this.class_dependencies, dependencies);
+			}
+		});
+
+		if (this.node.attributes.some(attr => attr.is_spread) || this.node.is_dynamic_element) {
+			this.add_spread_attributes(block);
+			return;
+		}
+
+		this.attributes.forEach((attribute) => {
+			attribute.render(block);
+		});
+	}
+
+	add_spread_attributes(block: Block) {
+		const levels = block.get_unique_name(`${this.var.name}_levels`);
+		const data = block.get_unique_name(`${this.var.name}_data`);
+
+		const initial_props = [];
+		const updates = [];
+
+		this.attributes
+			.forEach(attr => {
+				const dependencies = attr.node.get_dependencies();
+
+				const condition = dependencies.length > 0
+					? block.renderer.dirty(dependencies)
+					: null;
+
+				if (attr instanceof SpreadAttributeWrapper) {
+					const snippet = attr.node.expression.manipulate(block);
+
+					initial_props.push(snippet);
+
+					updates.push(condition ? x`${condition} && ${snippet}` : snippet);
+				} else {
+					const name = attr.property_name || attr.name;
+					initial_props.push(x`{ ${name}: ${attr.get_init(block, attr.get_value(block))} }`);
+					const snippet = x`{ ${name}: ${attr.should_cache ? attr.last : attr.get_value(block)} }`;
+
+					updates.push(condition ? x`${attr.get_dom_update_conditions(block, condition)} && ${snippet}` : snippet);
+				}
+			});
+
+		block.chunks.init.push(b`
+			let ${levels} = [${initial_props}];
+
+			let ${data} = {};
+			for (let #i = 0; #i < ${levels}.length; #i += 1) {
+				${data} = @assign(${data}, ${levels}[#i]);
+			}
+		`);
+
+		const fn = this.node.namespace === namespaces.svg ? x`@set_svg_attributes` : x`@set_attributes`;
+
+		block.chunks.hydrate.push(
+			b`${fn}(${this.var}, ${data});`
+		);
+
+		block.chunks.update.push(b`
+			${fn}(${this.var}, ${data} = @get_spread_update(${levels}, [
+				${updates}
+			]));
+		`);
+
+		// handle edge cases for elements
+		if (this.node.name === 'select') {
+			const dependencies = new Set<string>();
+			for (const attr of this.attributes) {
+				for (const dep of attr.node.dependencies) {
+					dependencies.add(dep);
+				}
+			}
+
+			block.chunks.mount.push(b`
+				(${data}.multiple ? @select_options : @select_option)(${this.var}, ${data}.value);
+			`);
+			block.chunks.update.push(b`
+				if (${block.renderer.dirty(Array.from(dependencies))} && 'value' in ${data}) (${data}.multiple ? @select_options : @select_option)(${this.var}, ${data}.value);
+			`);
+		} else if (this.node.name === 'input' && this.attributes.find(attr => attr.node.name === 'value')) {
+			const type = this.node.get_static_attribute_value('type');
+			if (type === null || type === '' || type === 'text' || type === 'email' || type === 'password') {
+				block.chunks.mount.push(b`
+					${this.var}.value = ${data}.value;
+				`);
+				block.chunks.update.push(b`
+					if ('value' in ${data}) {
+						${this.var}.value = ${data}.value;
+					}
+				`);
+			}
+		}
+
+		if (['button', 'input', 'keygen', 'select', 'textarea'].includes(this.node.name)) {
+			block.chunks.mount.push(b`
+				if (${this.var}.autofocus) ${this.var}.focus();
+			`);
+		}
+	}
+
+	add_transitions(
+		block: Block
+	) {
+		const { intro, outro } = this.node;
+		if (!intro && !outro) return;
+
+		if (intro === outro) {
+			// bidirectional transition
+			const name = block.get_unique_name(`${this.var.name}_transition`);
+			const snippet = intro.expression
+				? intro.expression.manipulate(block)
+				: x`{}`;
+
+			block.add_variable(name);
+
+			const fn = this.renderer.reference(intro.name);
+
+			const intro_block = b`
+				@add_render_callback(() => {
+					if (!${name}) ${name} = @create_bidirectional_transition(${this.var}, ${fn}, ${snippet}, true);
+					${name}.run(1);
+				});
+			`;
+
+			const outro_block = b`
+				if (!${name}) ${name} = @create_bidirectional_transition(${this.var}, ${fn}, ${snippet}, false);
+				${name}.run(0);
+			`;
+
+			if (intro.is_local) {
+				block.chunks.intro.push(b`
+					if (#local) {
+						${intro_block}
+					}
+				`);
+
+				block.chunks.outro.push(b`
+					if (#local) {
+						${outro_block}
+					}
+				`);
+			} else {
+				block.chunks.intro.push(intro_block);
+				block.chunks.outro.push(outro_block);
+			}
+
+			block.chunks.destroy.push(b`if (detaching && ${name}) ${name}.end();`);
+		} else {
+			const intro_name = intro && block.get_unique_name(`${this.var.name}_intro`);
+			const outro_name = outro && block.get_unique_name(`${this.var.name}_outro`);
+
+			if (intro) {
+				block.add_variable(intro_name);
+				const snippet = intro.expression
+					? intro.expression.manipulate(block)
+					: x`{}`;
+
+				const fn = this.renderer.reference(intro.name);
+
+				let intro_block;
+
+				if (outro) {
+					intro_block = b`
+						@add_render_callback(() => {
+							if (${outro_name}) ${outro_name}.end(1);
+							${intro_name} = @create_in_transition(${this.var}, ${fn}, ${snippet});
+							${intro_name}.start();
+						});
+					`;
+
+					block.chunks.outro.push(b`if (${intro_name}) ${intro_name}.invalidate();`);
+				} else {
+					intro_block = b`
+						if (!${intro_name}) {
+							@add_render_callback(() => {
+								${intro_name} = @create_in_transition(${this.var}, ${fn}, ${snippet});
+								${intro_name}.start();
+							});
+						}
+					`;
+				}
+
+				if (intro.is_local) {
+					intro_block = b`
+						if (#local) {
+							${intro_block}
+						}
+					`;
+				}
+
+				block.chunks.intro.push(intro_block);
+			}
+
+			if (outro) {
+				block.add_variable(outro_name);
+				const snippet = outro.expression
+					? outro.expression.manipulate(block)
+					: x`{}`;
+
+				const fn = this.renderer.reference(outro.name);
+
+				if (!intro) {
+					block.chunks.intro.push(b`
+						if (${outro_name}) ${outro_name}.end(1);
+					`);
+				}
+
+				// TODO hide elements that have outro'd (unless they belong to a still-outroing
+				// group) prior to their removal from the DOM
+				let outro_block = b`
+					${outro_name} = @create_out_transition(${this.var}, ${fn}, ${snippet});
+				`;
+
+				if (outro.is_local) {
+					outro_block = b`
+						if (#local) {
+							${outro_block}
+						}
+					`;
+				}
+
+				block.chunks.outro.push(outro_block);
+
+				block.chunks.destroy.push(b`if (detaching && ${outro_name}) ${outro_name}.end();`);
+			}
+		}
+
+		if ((intro && intro.expression && intro.expression.dependencies.size) || (outro && outro.expression && outro.expression.dependencies.size)) {
+			block.maintain_context = true;
+		}
+	}
+
+	add_animation(block: Block) {
+		if (!this.node.animation) return;
+
+		const { outro } = this.node;
+
+		const rect = block.get_unique_name('rect');
+		const stop_animation = block.get_unique_name('stop_animation');
+
+		block.add_variable(rect);
+		block.add_variable(stop_animation, x`@noop`);
+
+		block.chunks.measure.push(b`
+			${rect} = ${this.var}.getBoundingClientRect();
+		`);
+
+		if (block.type === CHILD_DYNAMIC_ELEMENT_BLOCK) {
+			block.chunks.measure.push(b`return ${rect}`);
+			block.chunks.restore_measurements.push(b`${rect} = #measurement;`);
+		}
+
+		block.chunks.fix.push(b`
+			@fix_position(${this.var});
+			${stop_animation}();
+			${outro && b`@add_transform(${this.var}, ${rect});`}
+		`);
+
+		let params;
+		if (this.node.animation.expression) {
+			params = this.node.animation.expression.manipulate(block);
+
+			if (this.node.animation.expression.dynamic_dependencies().length) {
+				// if `params` is dynamic, calculate params ahead of time in the `.r()` method
+				const params_var = block.get_unique_name('params');
+				block.add_variable(params_var);
+
+				block.chunks.measure.push(b`${params_var} = ${params};`);
+				params = params_var;
+			}
+		} else {
+			params = x`{}`;
+		}
+
+		const name = this.renderer.reference(this.node.animation.name);
+
+		block.chunks.animate.push(b`
+			${stop_animation}();
+			${stop_animation} = @create_animation(${this.var}, ${rect}, ${name}, ${params});
+		`);
+	}
+
+	add_classes(block: Block) {
+		const has_spread = this.node.attributes.some(attr => attr.is_spread);
+		this.node.classes.forEach(class_directive => {
+			const { expression, name } = class_directive;
+			let snippet;
+			let dependencies;
+			if (expression) {
+				snippet = expression.manipulate(block);
+				dependencies = expression.dependencies;
+			} else {
+				snippet = name;
+				dependencies = new Set([name]);
+			}
+			const updater = b`@toggle_class(${this.var}, "${name}", ${snippet});`;
+
+			block.chunks.hydrate.push(updater);
+
+			if (has_spread || this.node.is_dynamic_element) {
+				block.chunks.update.push(updater);
+			} else if ((dependencies && dependencies.size > 0) || this.class_dependencies.length) {
+				const all_dependencies = this.class_dependencies.concat(...dependencies);
+				const condition = block.renderer.dirty(all_dependencies);
+
+				// If all of the dependencies are non-dynamic (don't get updated) then there is no reason
+				// to add an updater for this.
+				const any_dynamic_dependencies = all_dependencies.some((dep) => {
+					const variable = this.renderer.component.var_lookup.get(dep);
+					return !variable || is_dynamic(variable);
+				});
+				if (any_dynamic_dependencies) {
+					block.chunks.update.push(b`
+						if (${condition}) {
+							${updater}
+						}
+					`);
+				}
+			}
+		});
+	}
+
+	add_styles(block: Block) {
+		const has_spread = this.node.attributes.some(attr => attr.is_spread);
+		this.node.styles.forEach((style_directive) => {
+			const { name, expression, should_cache } = style_directive;
+
+			const snippet = expression.manipulate(block);
+			let cached_snippet;
+			if (should_cache) {
+				cached_snippet = block.get_unique_name(`style_${name.replace(/-/g, '_')}`);
+				block.add_variable(cached_snippet, snippet);
+			}
+
+			const updater = b`@set_style(${this.var}, "${name}", ${should_cache ? cached_snippet : snippet}, false)`;
+
+			block.chunks.hydrate.push(updater);
+
+			const dependencies = expression.dynamic_dependencies();
+			if (has_spread) {
+				block.chunks.update.push(updater);
+			} else if (dependencies.length > 0) {
+				if (should_cache) {
+					block.chunks.update.push(b`
+							if (${block.renderer.dirty(dependencies)} && (${cached_snippet} !== (${cached_snippet} = ${snippet}))) {
+								${updater}
+							}
+					`);
+				} else {
+					block.chunks.update.push(b`
+						if (${block.renderer.dirty(dependencies)}) {
+							${updater}
+						}
+					`);
+				}
+			}
+		});
+	}
+
+	add_manual_style_scoping(block) {
+		if (this.node.needs_manual_style_scoping) {
+			const updater = b`@toggle_class(${this.var}, "${this.node.component.stylesheet.id}", true);`;
+			block.chunks.hydrate.push(updater);
+			block.chunks.update.push(updater);
+		}
+	}
+}
+
+function to_html(wrappers: Array<ElementWrapper | TextWrapper | MustacheTagWrapper | RawMustacheTagWrapper>, block: Block, literal: any, state: any, can_use_raw_text?: boolean) {
+	wrappers.forEach(wrapper => {
+		if (wrapper instanceof TextWrapper) {
+			// Don't add the <pre>/<textare> newline logic here because pre/textarea.innerHTML
+			// would keep the leading newline, too, only someParent.innerHTML = '..<pre/textarea>..' won't
+
+			if ((wrapper as TextWrapper).use_space()) state.quasi.value.raw += ' ';
+
+			const parent = wrapper.node.parent as Element;
+
+			const raw = parent && (
+				parent.name === 'script' ||
+				parent.name === 'style' ||
+				can_use_raw_text
+			);
+
+			state.quasi.value.raw += (raw ? wrapper.data : escape_html(wrapper.data))
+				.replace(/\\/g, '\\\\')
+				.replace(/`/g, '\\`')
+				.replace(/\$/g, '\\$');
+		} else if (wrapper instanceof MustacheTagWrapper || wrapper instanceof RawMustacheTagWrapper) {
+			literal.quasis.push(state.quasi);
+			literal.expressions.push(wrapper.node.expression.manipulate(block));
+			state.quasi = {
+				type: 'TemplateElement',
+				value: { raw: '' }
+			};
+		} else if (wrapper.node.name === 'noscript') {
+			// do nothing
+		} else {
+			// element
+			state.quasi.value.raw += `<${wrapper.node.name}`;
+
+			const is_empty_textarea = wrapper.node.name === 'textarea' && wrapper.fragment.nodes.length === 0;
+
+			(wrapper as ElementWrapper).attributes.forEach((attr: AttributeWrapper) => {
+				if (is_empty_textarea && attr.node.name === 'value') {
+					// The value attribute of <textarea> renders as content.
+					return;
+				}
+				state.quasi.value.raw += ` ${fix_attribute_casing(attr.node.name)}="`;
+
+				to_html_for_attr_value(attr, block, literal, state);
+
+				state.quasi.value.raw += '"';
+			});
+
+			if (!wrapper.void) {
+				state.quasi.value.raw += '>';
+
+				if (wrapper.node.name === 'pre') {
+					// Two or more leading newlines are required to restore the leading newline immediately after `<pre>`.
+					// see https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element
+					const first = wrapper.fragment.nodes[0];
+					if (first && first.node.type === 'Text' && start_newline.test(first.node.data)) {
+						state.quasi.value.raw += '\n';
+					}
+				}
+
+				if (is_empty_textarea) {
+					// The <textarea> renders the value attribute as content because the content is stored in the value attribute.
+					const value_attribute = wrapper.attributes.find(attr => attr.node.name === 'value');
+					if (value_attribute) {
+						// Two or more leading newlines are required to restore the leading newline immediately after `<textarea>`.
+						// see https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions
+						const first = value_attribute.node.chunks[0];
+						if (first && first.type === 'Text' && start_newline.test(first.data)) {
+							state.quasi.value.raw += '\n';
+						}
+						to_html_for_attr_value(value_attribute, block, literal, state);
+					}
+				}
+
+				to_html(wrapper.fragment.nodes as Array<ElementWrapper | TextWrapper>, block, literal, state);
+
+				state.quasi.value.raw += `</${wrapper.node.name}>`;
+			} else {
+				state.quasi.value.raw += '/>';
+			}
+		}
+	});
+}
+
+function to_html_for_attr_value(attr: AttributeWrapper | StyleAttributeWrapper | SpreadAttributeWrapper, block: Block, literal: any, state: any) {
+	attr.node.chunks.forEach(chunk => {
+		if (chunk.type === 'Text') {
+			state.quasi.value.raw += escape_html(chunk.data);
+		} else {
+			literal.quasis.push(state.quasi);
+			literal.expressions.push(chunk.manipulate(block));
+
+			state.quasi = {
+				type: 'TemplateElement',
+				value: { raw: '' }
+			};
+		}
+	});
+}
diff --git a/src/compiler/compile/render_dom/wrappers/Fragment.ts b/src/compiler/compile/render_dom/wrappers/Fragment.ts
new file mode 100644
index 0000000000..87ce775ca9
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/Fragment.ts
@@ -0,0 +1,154 @@
+import Wrapper from './shared/Wrapper';
+import AwaitBlock from './AwaitBlock';
+import Body from './Body';
+import DebugTag from './DebugTag';
+import EachBlock from './EachBlock';
+import Element from './Element/index';
+import Head from './Head';
+import IfBlock from './IfBlock';
+import KeyBlock from './KeyBlock';
+import InlineComponent from './InlineComponent/index';
+import MustacheTag from './MustacheTag';
+import RawMustacheTag from './RawMustacheTag';
+import Slot from './Slot';
+import SlotTemplate from './SlotTemplate';
+import Text from './Text';
+import Title from './Title';
+import Window from './Window';
+import { INode } from '../../nodes/interfaces';
+import Renderer from '../Renderer';
+import Block from '../Block';
+import { trim_start, trim_end } from '../../../utils/trim';
+import { link } from '../../../utils/link';
+import { Identifier } from 'estree';
+
+const wrappers = {
+	AwaitBlock,
+	Body,
+	Comment: null,
+	DebugTag,
+	EachBlock,
+	Element,
+	Head,
+	IfBlock,
+	InlineComponent,
+	KeyBlock,
+	MustacheTag,
+	Options: null,
+	RawMustacheTag,
+	Slot,
+	SlotTemplate,
+	Text,
+	Title,
+	Window
+};
+
+function trimmable_at(child: INode, next_sibling: Wrapper): boolean {
+	// Whitespace is trimmable if one of the following is true:
+	// The child and its sibling share a common nearest each block (not at an each block boundary)
+	// The next sibling's previous node is an each block
+	return (next_sibling.node.find_nearest(/EachBlock/) === child.find_nearest(/EachBlock/)) || next_sibling.node.prev.type === 'EachBlock';
+}
+
+export default class FragmentWrapper {
+	nodes: Wrapper[];
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		nodes: INode[],
+		parent: Wrapper,
+		strip_whitespace: boolean,
+		next_sibling: Wrapper
+	) {
+		this.nodes = [];
+
+		let last_child: Wrapper;
+		let window_wrapper;
+
+		let i = nodes.length;
+		while (i--) {
+			const child = nodes[i];
+
+			if (!child.type) {
+				throw new Error('missing type');
+			}
+
+			if (!(child.type in wrappers)) {
+				throw new Error(`TODO implement ${child.type}`);
+			}
+
+			// special case — this is an easy way to remove whitespace surrounding
+			// <svelte:window/>. lil hacky but it works
+			if (child.type === 'Window') {
+				window_wrapper = new Window(renderer, block, parent, child);
+				continue;
+			}
+
+			if (child.type === 'Text') {
+				let { data } = child;
+
+				// We want to remove trailing whitespace inside an element/component/block,
+				// *unless* there is no whitespace between this node and its next sibling
+				if (this.nodes.length === 0) {
+					const should_trim = (
+						next_sibling ? (next_sibling.node.type === 'Text' && /^\s/.test(next_sibling.node.data) && trimmable_at(child, next_sibling)) : !child.has_ancestor('EachBlock')
+					);
+
+					if (should_trim && !child.keep_space()) {
+						data = trim_end(data);
+						if (!data) continue;
+					}
+				}
+
+				// glue text nodes (which could e.g. be separated by comments) together
+				if (last_child && last_child.node.type === 'Text') {
+					(last_child as Text).data = data + (last_child as Text).data;
+					continue;
+				}
+
+				const wrapper = new Text(renderer, block, parent, child, data);
+				if (wrapper.skip) continue;
+
+				this.nodes.unshift(wrapper);
+
+				link(last_child, last_child = wrapper);
+			} else {
+				const Wrapper = wrappers[child.type];
+				if (!Wrapper) continue;
+
+				const wrapper = new Wrapper(renderer, block, parent, child, strip_whitespace, last_child || next_sibling);
+				this.nodes.unshift(wrapper);
+
+				link(last_child, last_child = wrapper);
+			}
+		}
+
+		if (strip_whitespace) {
+			const first = this.nodes[0] as Text;
+
+			if (first && first.node.type === 'Text' && !first.node.keep_space()) {
+				first.data = trim_start(first.data);
+				if (!first.data) {
+					first.var = null;
+					this.nodes.shift();
+
+					if (this.nodes[0]) {
+						this.nodes[0].prev = null;
+					}
+				}
+			}
+		}
+
+		if (window_wrapper) {
+			this.nodes.unshift(window_wrapper);
+			link(last_child, window_wrapper);
+		}
+	}
+
+	render(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
+		for (let i = 0; i < this.nodes.length; i += 1) {
+			this.nodes[i].render(block, parent_node, parent_nodes);
+		}
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/Head.ts b/src/compiler/compile/render_dom/wrappers/Head.ts
new file mode 100644
index 0000000000..e0b723d6dd
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/Head.ts
@@ -0,0 +1,50 @@
+import Wrapper from './shared/Wrapper';
+import Renderer from '../Renderer';
+import Block from '../Block';
+import Head from '../../nodes/Head';
+import FragmentWrapper from './Fragment';
+import { x, b } from 'code-red';
+import { Identifier } from 'estree';
+
+export default class HeadWrapper extends Wrapper {
+	fragment: FragmentWrapper;
+	node: Head;
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: Head,
+		strip_whitespace: boolean,
+		next_sibling: Wrapper
+	) {
+		super(renderer, block, parent, node);
+
+		this.can_use_innerhtml = false;
+
+		this.fragment = new FragmentWrapper(
+			renderer,
+			block,
+			node.children,
+			this,
+			strip_whitespace,
+			next_sibling
+		);
+	}
+
+	render(block: Block, _parent_node: Identifier, _parent_nodes: Identifier) {
+		let nodes;
+		if (this.renderer.options.hydratable && this.fragment.nodes.length) {
+			nodes = block.get_unique_name('head_nodes');
+			block.chunks.claim.push(b`const ${nodes} = @query_selector_all('[data-svelte="${this.node.id}"]', @_document.head);`);
+		}
+
+		this.fragment.render(block, x`@_document.head` as unknown as Identifier, nodes);
+
+		if (nodes && this.renderer.options.hydratable) {
+			block.chunks.claim.push(
+				b`${nodes}.forEach(@detach);`
+			);
+		}
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/IfBlock.ts b/src/compiler/compile/render_dom/wrappers/IfBlock.ts
new file mode 100644
index 0000000000..d74ce270bf
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/IfBlock.ts
@@ -0,0 +1,679 @@
+import Wrapper from './shared/Wrapper';
+import Renderer from '../Renderer';
+import Block from '../Block';
+import EachBlock from '../../nodes/EachBlock';
+import IfBlock from '../../nodes/IfBlock';
+import create_debugging_comment from './shared/create_debugging_comment';
+import ElseBlock from '../../nodes/ElseBlock';
+import FragmentWrapper from './Fragment';
+import { b, x } from 'code-red';
+import { walk } from 'estree-walker';
+import { is_head } from './shared/is_head';
+import { Identifier, Node } from 'estree';
+import { push_array } from '../../../utils/push_array';
+import { add_const_tags, add_const_tags_context } from './shared/add_const_tags';
+
+function is_else_if(node: ElseBlock) {
+	return (
+		node && node.children.length === 1 && node.children[0].type === 'IfBlock'
+	);
+}
+
+class IfBlockBranch extends Wrapper {
+	block: Block;
+	fragment: FragmentWrapper;
+	dependencies?: string[];
+	condition?: any;
+	snippet?: Node;
+	is_dynamic: boolean;
+	node: IfBlock | ElseBlock;
+
+	var = null;
+	get_ctx_name: Node | undefined;
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: IfBlockWrapper,
+		node: IfBlock | ElseBlock,
+		strip_whitespace: boolean,
+		next_sibling: Wrapper
+	) {
+		super(renderer, block, parent, node);
+
+		const { expression } = (node as IfBlock);
+		const is_else = !expression;
+
+		if (expression) {
+			this.dependencies = expression.dynamic_dependencies();
+
+			// TODO is this the right rule? or should any non-reference count?
+			// const should_cache = !is_reference(expression.node, null) && dependencies.length > 0;
+			let should_cache = false;
+			walk(expression.node, {
+				enter(node) {
+					if (node.type === 'CallExpression' || node.type === 'NewExpression') {
+						should_cache = true;
+					}
+				}
+			});
+
+			if (should_cache) {
+				this.condition = block.get_unique_name('show_if');
+				this.snippet = (expression.manipulate(block) as Node);
+			} else {
+				this.condition = expression.manipulate(block);
+			}
+		}
+
+		add_const_tags_context(renderer, this.node.const_tags);
+
+		this.block = block.child({
+			comment: create_debugging_comment(node, parent.renderer.component),
+			name: parent.renderer.component.get_unique_name(
+				is_else ? 'create_else_block' : 'create_if_block'
+			),
+			type: (node as IfBlock).expression ? 'if' : 'else'
+		});
+
+		this.fragment = new FragmentWrapper(renderer, this.block, node.children, parent, strip_whitespace, next_sibling);
+
+		this.is_dynamic = this.block.dependencies.size > 0;
+
+		if (node.const_tags.length > 0) {
+			this.get_ctx_name = parent.renderer.component.get_unique_name(is_else ? 'get_else_ctx' : 'get_if_ctx');
+		}
+	}
+}
+
+export default class IfBlockWrapper extends Wrapper {
+	node: IfBlock;
+	branches: IfBlockBranch[];
+	needs_update = false;
+
+	var: Identifier = { type: 'Identifier', name: 'if_block' };
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: EachBlock,
+		strip_whitespace: boolean,
+		next_sibling: Wrapper
+	) {
+		super(renderer, block, parent, node);
+
+		this.cannot_use_innerhtml();
+		this.not_static_content();
+
+		this.branches = [];
+
+		const blocks: Block[] = [];
+		let is_dynamic = false;
+		let has_intros = false;
+		let has_outros = false;
+
+		const create_branches = (node: IfBlock) => {
+			const branch = new IfBlockBranch(
+				renderer,
+				block,
+				this,
+				node,
+				strip_whitespace,
+				next_sibling
+			);
+
+			this.branches.push(branch);
+
+			blocks.push(branch.block);
+			block.add_dependencies(node.expression.dependencies);
+
+			if (branch.block.dependencies.size > 0) {
+				// the condition, or its contents, is dynamic
+				is_dynamic = true;
+				block.add_dependencies(branch.block.dependencies);
+			}
+
+			if (branch.dependencies && branch.dependencies.length > 0) {
+				// the condition itself is dynamic
+				this.needs_update = true;
+			}
+
+			if (branch.block.has_intros) has_intros = true;
+			if (branch.block.has_outros) has_outros = true;
+
+			if (is_else_if(node.else)) {
+				create_branches(node.else.children[0] as IfBlock);
+			} else if (node.else) {
+				const branch = new IfBlockBranch(
+					renderer,
+					block,
+					this,
+					node.else,
+					strip_whitespace,
+					next_sibling
+				);
+
+				this.branches.push(branch);
+
+				blocks.push(branch.block);
+
+				if (branch.block.dependencies.size > 0) {
+					is_dynamic = true;
+					block.add_dependencies(branch.block.dependencies);
+				}
+
+				if (branch.block.has_intros) has_intros = true;
+				if (branch.block.has_outros) has_outros = true;
+			}
+		};
+
+		create_branches(this.node);
+
+		blocks.forEach(block => {
+			block.has_update_method = is_dynamic;
+			block.has_intro_method = has_intros;
+			block.has_outro_method = has_outros;
+		});
+
+		push_array(renderer.blocks, blocks);
+	}
+
+	render(
+		block: Block,
+		parent_node: Identifier,
+		parent_nodes: Identifier
+	) {
+		const name = this.var;
+
+		const needs_anchor = this.next ? !this.next.is_dom_node() : !parent_node || !this.parent.is_dom_node();
+		const anchor = needs_anchor
+			? block.get_unique_name(`${this.var.name}_anchor`)
+			: (this.next && this.next.var) || 'null';
+
+		const has_else = !(this.branches[this.branches.length - 1].condition);
+		const if_exists_condition = has_else ? null : name;
+
+		const dynamic = this.branches[0].block.has_update_method; // can use [0] as proxy for all, since they necessarily have the same value
+		const has_intros = this.branches[0].block.has_intro_method;
+		const has_outros = this.branches[0].block.has_outro_method;
+		const has_transitions = has_intros || has_outros;
+
+		this.branches.forEach(branch => {
+			if (branch.get_ctx_name) {
+				this.renderer.blocks.push(b`
+				function ${branch.get_ctx_name}(#ctx) {
+					const child_ctx = #ctx.slice();
+					${add_const_tags(block, branch.node.const_tags, 'child_ctx')}
+					return child_ctx;
+				}
+				`);
+			}
+		});
+
+		const vars = { name, anchor, if_exists_condition, has_else, has_transitions };
+
+		const detaching = parent_node && !is_head(parent_node) ? null : 'detaching';
+
+		if (this.node.else) {
+			this.branches.forEach(branch => {
+				if (branch.snippet) block.add_variable(branch.condition);
+			});
+
+			if (has_outros) {
+				this.render_compound_with_outros(block, parent_node, parent_nodes, dynamic, vars, detaching);
+
+				block.chunks.outro.push(b`@transition_out(${name});`);
+			} else {
+				this.render_compound(block, parent_node, parent_nodes, dynamic, vars, detaching);
+			}
+		} else {
+			this.render_simple(block, parent_node, parent_nodes, dynamic, vars, detaching);
+
+			if (has_outros) {
+				block.chunks.outro.push(b`@transition_out(${name});`);
+			}
+		}
+
+		if (if_exists_condition) {
+			block.chunks.create.push(b`if (${if_exists_condition}) ${name}.c();`);
+		} else {
+			block.chunks.create.push(b`${name}.c();`);
+		}
+
+		if (parent_nodes && this.renderer.options.hydratable) {
+			if (if_exists_condition) {
+				block.chunks.claim.push(
+					b`if (${if_exists_condition}) ${name}.l(${parent_nodes});`
+				);
+			} else {
+				block.chunks.claim.push(
+					b`${name}.l(${parent_nodes});`
+				);
+			}
+		}
+
+		if (has_intros || has_outros) {
+			block.chunks.intro.push(b`@transition_in(${name});`);
+		}
+
+		if (needs_anchor) {
+			block.add_element(
+				anchor as Identifier,
+				x`@empty()`,
+				parent_nodes && x`@empty()`,
+				parent_node
+			);
+		}
+
+		this.branches.forEach(branch => {
+			branch.fragment.render(branch.block, null, x`#nodes` as unknown as Identifier);
+		});
+	}
+
+	render_compound(
+		block: Block,
+		parent_node: Identifier,
+		_parent_nodes: Identifier,
+		dynamic,
+		{ name, anchor, has_else, if_exists_condition, has_transitions },
+		detaching
+	) {
+		const select_block_type = this.renderer.component.get_unique_name('select_block_type');
+		const current_block_type = block.get_unique_name('current_block_type');
+		const need_select_block_ctx = this.branches.some(branch => branch.get_ctx_name);
+		const select_block_ctx = need_select_block_ctx ? block.get_unique_name('select_block_ctx') : null;
+		const if_ctx = select_block_ctx ? x`${select_block_ctx}(#ctx, ${current_block_type})` : x`#ctx`;
+
+		const get_block = has_else
+			? x`${current_block_type}(${if_ctx})`
+			: x`${current_block_type} && ${current_block_type}(${if_ctx})`;
+
+		if (this.needs_update) {
+			block.chunks.init.push(b`
+				function ${select_block_type}(#ctx, #dirty) {
+					${this.branches.map(({ dependencies, condition, snippet }) => {
+						return b`${snippet && dependencies.length > 0 ? b`if (${block.renderer.dirty(dependencies)}) ${condition} = null;` : null}`;
+					})}
+					${this.branches.map(({ condition, snippet, block }) => condition
+						? b`
+								${snippet && b`if (${condition} == null) ${condition} = !!${snippet}`}
+								if (${condition}) return ${block.name};`
+						: b`return ${block.name};`
+					)}
+				}
+			`);
+		} else {
+			block.chunks.init.push(b`
+				function ${select_block_type}(#ctx, #dirty) {
+					${this.branches.map(({ condition, snippet, block }) => condition
+				? b`if (${snippet || condition}) return ${block.name};`
+				: b`return ${block.name};`)}
+				}
+			`);
+		}
+
+		if (need_select_block_ctx) {
+			// if all branches needs create a context
+			if (this.branches.every(branch => branch.get_ctx_name)) {
+				block.chunks.init.push(b`
+					function ${select_block_ctx}(#ctx, #type) {
+						${this.branches.map(({ condition, get_ctx_name, block }) => {
+							return condition
+								? b`if (#type === ${block.name}) return ${get_ctx_name}(#ctx);`
+								: b`return ${get_ctx_name}(#ctx);`;
+						}).filter(Boolean)}
+					}
+				`);
+			} else {
+				// when not all branches need to create a new context,
+				// this code is simpler
+				block.chunks.init.push(b`
+					function ${select_block_ctx}(#ctx, #type) {
+						${this.branches.map(({ get_ctx_name, block }) => {
+							return get_ctx_name
+								? b`if (#type === ${block.name}) return ${get_ctx_name}(#ctx);`
+								: null;
+						}).filter(Boolean)}
+						return #ctx;
+					}
+				`);
+			}
+		}
+
+		block.chunks.init.push(b`
+			let ${current_block_type} = ${select_block_type}(#ctx, ${this.renderer.get_initial_dirty()});
+			let ${name} = ${get_block};
+		`);
+
+		const initial_mount_node = parent_node || '#target';
+		const anchor_node = parent_node ? 'null' : '#anchor';
+
+		if (if_exists_condition) {
+			block.chunks.mount.push(
+				b`if (${if_exists_condition}) ${name}.m(${initial_mount_node}, ${anchor_node});`
+			);
+		} else {
+			block.chunks.mount.push(
+				b`${name}.m(${initial_mount_node}, ${anchor_node});`
+			);
+		}
+
+		if (this.needs_update) {
+			const update_mount_node = this.get_update_mount_node(anchor);
+
+			const change_block = b`
+				${if_exists_condition ? b`if (${if_exists_condition}) ${name}.d(1)` : b`${name}.d(1)`};
+				${name} = ${get_block};
+				if (${name}) {
+					${name}.c();
+					${has_transitions && b`@transition_in(${name}, 1);`}
+					${name}.m(${update_mount_node}, ${anchor});
+				}
+			`;
+
+			if (dynamic) {
+				block.chunks.update.push(b`
+					if (${current_block_type} === (${current_block_type} = ${select_block_type}(#ctx, #dirty)) && ${name}) {
+						${name}.p(${if_ctx}, #dirty);
+					} else {
+						${change_block}
+					}
+				`);
+			} else {
+				block.chunks.update.push(b`
+					if (${current_block_type} !== (${current_block_type} = ${select_block_type}(#ctx, #dirty))) {
+						${change_block}
+					}
+				`);
+			}
+		} else if (dynamic) {
+			if (if_exists_condition) {
+				block.chunks.update.push(b`if (${if_exists_condition}) ${name}.p(${if_ctx}, #dirty);`);
+			} else {
+				block.chunks.update.push(b`${name}.p(${if_ctx}, #dirty);`);
+			}
+		}
+
+		if (if_exists_condition) {
+			block.chunks.destroy.push(b`
+				if (${if_exists_condition}) {
+					${name}.d(${detaching});
+				}
+			`);
+		} else {
+			block.chunks.destroy.push(b`
+				${name}.d(${detaching});
+			`);
+		}
+	}
+
+	// if any of the siblings have outros, we need to keep references to the blocks
+	// (TODO does this only apply to bidi transitions?)
+	render_compound_with_outros(
+		block: Block,
+		parent_node: Identifier,
+		_parent_nodes: Identifier,
+		dynamic,
+		{ name, anchor, has_else, has_transitions, if_exists_condition },
+		detaching
+	) {
+		const select_block_type = this.renderer.component.get_unique_name('select_block_type');
+		const current_block_type_index = block.get_unique_name('current_block_type_index');
+		const previous_block_index = block.get_unique_name('previous_block_index');
+		const if_block_creators = block.get_unique_name('if_block_creators');
+		const if_blocks = block.get_unique_name('if_blocks');
+		const need_select_block_ctx = this.branches.some(branch => branch.get_ctx_name);
+		const select_block_ctx = need_select_block_ctx ? block.get_unique_name('select_block_ctx') : null;
+		const if_ctx = select_block_ctx ? x`${select_block_ctx}(#ctx, ${current_block_type_index})` : x`#ctx`;
+
+		const if_current_block_type_index = has_else
+			? nodes => nodes
+			: nodes => b`if (~${current_block_type_index}) { ${nodes} }`;
+
+		block.add_variable(current_block_type_index);
+		block.add_variable(name);
+
+		block.chunks.init.push(b`
+			const ${if_block_creators} = [
+				${this.branches.map(branch => branch.block.name)}
+			];
+
+			const ${if_blocks} = [];
+
+			${this.needs_update
+				? b`
+					function ${select_block_type}(#ctx, #dirty) {
+						${this.branches.map(({ dependencies, condition, snippet }) => {
+							return b`${snippet && dependencies.length > 0 ? b`if (${block.renderer.dirty(dependencies)}) ${condition} = null;` : null}`;
+						})}
+						${this.branches.map(({ condition, snippet }, i) => condition
+							? b`
+								${snippet && b`if (${condition} == null) ${condition} = !!${snippet}`}
+								if (${condition}) return ${i};`
+							: b`return ${i};`)}
+								${!has_else && b`return -1;`}
+							}
+						`
+				: b`
+					function ${select_block_type}(#ctx, #dirty) {
+						${this.branches.map(({ condition, snippet }, i) => condition
+							? b`if (${snippet || condition}) return ${i};`
+							: b`return ${i};`)}
+						${!has_else && b`return -1;`}
+					}
+				`}
+		`);
+
+		if (need_select_block_ctx) {
+			// if all branches needs create a context
+			if (this.branches.every(branch => branch.get_ctx_name)) {
+				block.chunks.init.push(b`
+					function ${select_block_ctx}(#ctx, #index) {
+						${this.branches.map(({ condition, get_ctx_name }, i) => {
+							return condition
+								? b`if (#index === ${i}) return ${get_ctx_name}(#ctx);`
+								: b`return ${get_ctx_name}(#ctx);`;
+						}).filter(Boolean)}
+					}
+				`);
+			} else {
+				// when not all branches need to create a new context,
+				// this code is simpler
+				block.chunks.init.push(b`
+					function ${select_block_ctx}(#ctx, #index) {
+						${this.branches.map(({ get_ctx_name }, i) => {
+							return get_ctx_name
+								? b`if (#index === ${i}) return ${get_ctx_name}(#ctx);`
+								: null;
+						}).filter(Boolean)}
+						return #ctx;
+					}
+				`);
+			}
+		}
+
+		if (has_else) {
+			block.chunks.init.push(b`
+				${current_block_type_index} = ${select_block_type}(#ctx, ${this.renderer.get_initial_dirty()});
+				${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](${if_ctx});
+			`);
+		} else {
+			block.chunks.init.push(b`
+				if (~(${current_block_type_index} = ${select_block_type}(#ctx, ${this.renderer.get_initial_dirty()}))) {
+					${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](${if_ctx});
+				}
+			`);
+		}
+
+		const initial_mount_node = parent_node || '#target';
+		const anchor_node = parent_node ? 'null' : '#anchor';
+
+		block.chunks.mount.push(
+			if_current_block_type_index(
+				b`${if_blocks}[${current_block_type_index}].m(${initial_mount_node}, ${anchor_node});`
+			)
+		);
+
+		if (this.needs_update) {
+			const update_mount_node = this.get_update_mount_node(anchor);
+
+			const destroy_old_block = b`
+				@group_outros();
+				@transition_out(${if_blocks}[${previous_block_index}], 1, 1, () => {
+					${if_blocks}[${previous_block_index}] = null;
+				});
+				@check_outros();
+			`;
+
+			const create_new_block = b`
+				${name} = ${if_blocks}[${current_block_type_index}];
+				if (!${name}) {
+					${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](${if_ctx});
+					${name}.c();
+				} else {
+					${dynamic && b`${name}.p(${if_ctx}, #dirty);`}
+				}
+				${has_transitions && b`@transition_in(${name}, 1);`}
+				${name}.m(${update_mount_node}, ${anchor});
+			`;
+
+			const change_block = has_else
+				? b`
+					${destroy_old_block}
+
+					${create_new_block}
+				`
+				: b`
+					if (${name}) {
+						${destroy_old_block}
+					}
+
+					if (~${current_block_type_index}) {
+						${create_new_block}
+					} else {
+						${name} = null;
+					}
+				`;
+
+			block.chunks.update.push(b`
+				let ${previous_block_index} = ${current_block_type_index};
+				${current_block_type_index} = ${select_block_type}(#ctx, #dirty);
+			`);
+
+			if (dynamic) {
+				block.chunks.update.push(b`
+					if (${current_block_type_index} === ${previous_block_index}) {
+						${if_current_block_type_index(b`${if_blocks}[${current_block_type_index}].p(${if_ctx}, #dirty);`)}
+					} else {
+						${change_block}
+					}
+				`);
+			} else {
+				block.chunks.update.push(b`
+					if (${current_block_type_index} !== ${previous_block_index}) {
+						${change_block}
+					}
+				`);
+			}
+		} else if (dynamic) {
+			if (if_exists_condition) {
+				block.chunks.update.push(b`if (${if_exists_condition}) ${name}.p(${if_ctx}, #dirty);`);
+			} else {
+				block.chunks.update.push(b`${name}.p(${if_ctx}, #dirty);`);
+			}
+		}
+
+		block.chunks.destroy.push(
+			if_current_block_type_index(b`${if_blocks}[${current_block_type_index}].d(${detaching});`)
+		);
+	}
+
+	render_simple(
+		block: Block,
+		parent_node: Identifier,
+		_parent_nodes: Identifier,
+		dynamic,
+		{ name, anchor, if_exists_condition, has_transitions },
+		detaching
+	) {
+		const branch = this.branches[0];
+		const if_ctx = branch.get_ctx_name ? x`${branch.get_ctx_name}(#ctx)` : x`#ctx`;
+
+		if (branch.snippet) block.add_variable(branch.condition, branch.snippet);
+
+		block.chunks.init.push(b`
+			let ${name} = ${branch.condition} && ${branch.block.name}(${if_ctx});
+		`);
+
+		const initial_mount_node = parent_node || '#target';
+		const anchor_node = parent_node ? 'null' : '#anchor';
+
+		block.chunks.mount.push(
+			b`if (${name}) ${name}.m(${initial_mount_node}, ${anchor_node});`
+		);
+
+		if (branch.dependencies.length > 0) {
+			const update_mount_node = this.get_update_mount_node(anchor);
+
+			const enter = b`
+				if (${name}) {
+					${dynamic && b`${name}.p(${if_ctx}, #dirty);`}
+					${has_transitions &&
+						b`if (${block.renderer.dirty(branch.dependencies)}) {
+									@transition_in(${name}, 1);
+								}`
+						}
+				} else {
+					${name} = ${branch.block.name}(${if_ctx});
+					${name}.c();
+					${has_transitions && b`@transition_in(${name}, 1);`}
+					${name}.m(${update_mount_node}, ${anchor});
+				}
+			`;
+
+			if (branch.snippet) {
+				block.chunks.update.push(b`if (${block.renderer.dirty(branch.dependencies)}) ${branch.condition} = ${branch.snippet}`);
+			}
+
+			// no `p()` here — we don't want to update outroing nodes,
+			// as that will typically result in glitching
+			if (branch.block.has_outro_method) {
+				block.chunks.update.push(b`
+					if (${branch.condition}) {
+						${enter}
+					} else if (${name}) {
+						@group_outros();
+						@transition_out(${name}, 1, 1, () => {
+							${name} = null;
+						});
+						@check_outros();
+					}
+				`);
+			} else {
+				block.chunks.update.push(b`
+					if (${branch.condition}) {
+						${enter}
+					} else if (${name}) {
+						${name}.d(1);
+						${name} = null;
+					}
+				`);
+			}
+		} else if (dynamic) {
+			block.chunks.update.push(b`
+				if (${branch.condition}) ${name}.p(${if_ctx}, #dirty);
+			`);
+		}
+
+		if (if_exists_condition) {
+			block.chunks.destroy.push(b`
+				if (${if_exists_condition}) ${name}.d(${detaching});
+			`);
+		} else {
+			block.chunks.destroy.push(b`
+				${name}.d(${detaching});
+			`);
+		}
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
new file mode 100644
index 0000000000..e6eab33fbd
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
@@ -0,0 +1,582 @@
+import Wrapper from '../shared/Wrapper';
+import BindingWrapper from '../Element/Binding';
+import Renderer from '../../Renderer';
+import Block from '../../Block';
+import InlineComponent from '../../../nodes/InlineComponent';
+import FragmentWrapper from '../Fragment';
+import SlotTemplateWrapper from '../SlotTemplate';
+import { sanitize } from '../../../../utils/names';
+import add_to_set from '../../../utils/add_to_set';
+import { b, x, p } from 'code-red';
+import Attribute from '../../../nodes/Attribute';
+import TemplateScope from '../../../nodes/shared/TemplateScope';
+import is_dynamic from '../shared/is_dynamic';
+import bind_this from '../shared/bind_this';
+import { Node, Identifier, ObjectExpression } from 'estree';
+import EventHandler from '../Element/EventHandler';
+import { extract_names } from 'periscopic';
+import mark_each_block_bindings from '../shared/mark_each_block_bindings';
+import { string_to_member_expression } from '../../../utils/string_to_member_expression';
+import SlotTemplate from '../../../nodes/SlotTemplate';
+import { is_head } from '../shared/is_head';
+import compiler_warnings from '../../../compiler_warnings';
+
+type SlotDefinition = { block: Block; scope: TemplateScope; get_context?: Node; get_changes?: Node };
+
+export default class InlineComponentWrapper extends Wrapper {
+	var: Identifier;
+	slots: Map<string, SlotDefinition> = new Map();
+	node: InlineComponent;
+	fragment: FragmentWrapper;
+	children: Array<Wrapper | FragmentWrapper> = [];
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: InlineComponent,
+		strip_whitespace: boolean,
+		next_sibling: Wrapper
+	) {
+		super(renderer, block, parent, node);
+
+		this.cannot_use_innerhtml();
+		this.not_static_content();
+
+		if (this.node.expression) {
+			block.add_dependencies(this.node.expression.dependencies);
+		}
+
+		this.node.attributes.forEach(attr => {
+			block.add_dependencies(attr.dependencies);
+		});
+
+		this.node.bindings.forEach(binding => {
+			if (binding.is_contextual) {
+				mark_each_block_bindings(this, binding);
+			}
+
+			block.add_dependencies(binding.expression.dependencies);
+		});
+
+		this.node.handlers.forEach(handler => {
+			if (handler.expression) {
+				block.add_dependencies(handler.expression.dependencies);
+			}
+		});
+
+		this.node.css_custom_properties.forEach(attr => {
+			block.add_dependencies(attr.dependencies);
+		});
+
+		this.var = {
+			type: 'Identifier',
+			name: (
+				this.node.name === 'svelte:self' ? renderer.component.name.name :
+					this.node.name === 'svelte:component' ? 'switch_instance' :
+						sanitize(this.node.name)
+			).toLowerCase()
+		};
+
+		if (this.node.children.length) {
+			this.node.lets.forEach(l => {
+				extract_names(l.value || l.name).forEach(name => {
+					renderer.add_to_context(name, true);
+				});
+			});
+
+			this.children = this.node.children.map(child => new SlotTemplateWrapper(renderer, block, this, child as SlotTemplate, strip_whitespace, next_sibling));
+		}
+
+		block.add_outro();
+	}
+
+	set_slot(name: string, slot_definition: SlotDefinition) {
+		if (this.slots.has(name)) {
+			if (name === 'default') {
+				throw new Error('Found elements without slot attribute when using slot="default"');
+			}
+			throw new Error(`Duplicate slot name "${name}" in <${this.node.name}>`);
+		}
+		this.slots.set(name, slot_definition);
+	}
+
+	warn_if_reactive() {
+		const { name } = this.node;
+		const variable = this.renderer.component.var_lookup.get(name);
+		if (!variable) {
+			return;
+		}
+
+		if (variable.reassigned || variable.export_name || variable.is_reactive_dependency) {
+			this.renderer.component.warn(this.node, compiler_warnings.reactive_component(name));
+		}
+	}
+
+	render(
+		block: Block,
+		parent_node: Identifier,
+		parent_nodes: Identifier
+	) {
+		this.warn_if_reactive();
+
+		const { renderer } = this;
+		const { component } = renderer;
+
+		const name = this.var;
+		block.add_variable(name);
+
+		const component_opts = x`{}` as ObjectExpression;
+
+		const statements: Array<Node | Node[]> = [];
+		const updates: Array<Node | Node[]> = [];
+
+		this.children.forEach((child) => {
+			this.renderer.add_to_context('$$scope', true);
+			child.render(block, null, x`#nodes` as Identifier);
+		});
+
+		let props;
+		const name_changes = block.get_unique_name(`${name.name}_changes`);
+
+		const uses_spread = !!this.node.attributes.find(a => a.is_spread);
+
+		// removing empty slot
+		for (const slot of this.slots.keys()) {
+			if (!this.slots.get(slot).block.has_content()) {
+				this.renderer.remove_block(this.slots.get(slot).block);
+				this.slots.delete(slot);
+			}
+		}
+
+		const has_css_custom_properties = this.node.css_custom_properties.length > 0;
+		const css_custom_properties_wrapper = has_css_custom_properties ? block.get_unique_name('div') : null;
+		if (has_css_custom_properties) {
+			block.add_variable(css_custom_properties_wrapper);
+		}
+
+		const initial_props = this.slots.size > 0
+			? [
+				p`$$slots: {
+					${Array.from(this.slots).map(([name, slot]) => {
+						return p`${name}: [${slot.block.name}, ${slot.get_context || null}, ${slot.get_changes || null}]`;
+					})}
+				}`,
+				p`$$scope: {
+					ctx: #ctx
+				}`
+			]
+			: [];
+
+		const attribute_object = uses_spread
+			? x`{ ${initial_props} }`
+			: x`{
+				${this.node.attributes.map(attr => p`${attr.name}: ${attr.get_value(block)}`)},
+				${initial_props}
+			}`;
+
+		if (this.node.attributes.length || this.node.bindings.length || initial_props.length) {
+			if (!uses_spread && this.node.bindings.length === 0) {
+				component_opts.properties.push(p`props: ${attribute_object}`);
+			} else {
+				props = block.get_unique_name(`${name.name}_props`);
+				component_opts.properties.push(p`props: ${props}`);
+			}
+		}
+
+		if (component.compile_options.dev) {
+			// TODO this is a terrible hack, but without it the component
+			// will complain that options.target is missing. This would
+			// work better if components had separate public and private
+			// APIs
+			component_opts.properties.push(p`$$inline: true`);
+		}
+
+		const fragment_dependencies = new Set(this.slots.size ? ['$$scope'] : []);
+		this.slots.forEach(slot => {
+			slot.block.dependencies.forEach(name => {
+				const is_let = slot.scope.is_let(name);
+				const variable = renderer.component.var_lookup.get(name);
+
+				if (is_let || is_dynamic(variable)) fragment_dependencies.add(name);
+			});
+		});
+
+		const dynamic_attributes = this.node.attributes.filter(a => a.get_dependencies().length > 0);
+
+		if (!uses_spread && (dynamic_attributes.length > 0 || this.node.bindings.length > 0 || fragment_dependencies.size > 0)) {
+			updates.push(b`const ${name_changes} = {};`);
+		}
+
+		if (this.node.attributes.length) {
+			if (uses_spread) {
+				const levels = block.get_unique_name(`${this.var.name}_spread_levels`);
+
+				const initial_props = [];
+				const changes = [];
+
+				const all_dependencies: Set<string> = new Set();
+
+				this.node.attributes.forEach(attr => {
+					add_to_set(all_dependencies, attr.dependencies);
+				});
+
+				this.node.attributes.forEach((attr, i) => {
+					const { name, dependencies } = attr;
+
+					const condition = dependencies.size > 0 && (dependencies.size !== all_dependencies.size)
+						? renderer.dirty(Array.from(dependencies))
+						: null;
+					const unchanged = dependencies.size === 0;
+
+					let change_object;
+					if (attr.is_spread) {
+						const value = attr.expression.manipulate(block);
+						initial_props.push(value);
+
+						let value_object = value;
+						if (attr.expression.node.type !== 'ObjectExpression') {
+							value_object = x`@get_spread_object(${value})`;
+						}
+						change_object = value_object;
+					} else {
+						const obj = x`{ ${name}: ${attr.get_value(block)} }`;
+						initial_props.push(obj);
+						change_object = obj;
+					}
+
+					changes.push(
+						unchanged
+							? x`${levels}[${i}]`
+							: condition
+							? x`${condition} && ${change_object}`
+							: change_object
+					);
+				});
+
+				block.chunks.init.push(b`
+					const ${levels} = [
+						${initial_props}
+					];
+				`);
+
+				statements.push(b`
+					for (let #i = 0; #i < ${levels}.length; #i += 1) {
+						${props} = @assign(${props}, ${levels}[#i]);
+					}
+				`);
+
+				if (all_dependencies.size) {
+					const condition = renderer.dirty(Array.from(all_dependencies));
+
+					updates.push(b`
+						const ${name_changes} = ${condition} ? @get_spread_update(${levels}, [
+							${changes}
+						]) : {}
+					`);
+				} else {
+					updates.push(b`
+						const ${name_changes} = {};
+					`);
+				}
+			} else {
+				dynamic_attributes.forEach((attribute: Attribute) => {
+					const dependencies = attribute.get_dependencies();
+					if (dependencies.length > 0) {
+						const condition = renderer.dirty(dependencies);
+
+						updates.push(b`
+							if (${condition}) ${name_changes}.${attribute.name} = ${attribute.get_value(block)};
+						`);
+					}
+				});
+			}
+		}
+
+		if (fragment_dependencies.size > 0) {
+			updates.push(b`
+				if (${renderer.dirty(Array.from(fragment_dependencies))}) {
+					${name_changes}.$$scope = { dirty: #dirty, ctx: #ctx };
+				}`);
+		}
+
+		const munged_bindings = this.node.bindings.map(binding => {
+			component.has_reactive_assignments = true;
+
+			if (binding.name === 'this') {
+				return bind_this(component, block, new BindingWrapper(block, binding, this), this.var);
+			}
+
+			const id = component.get_unique_name(`${this.var.name}_${binding.name}_binding`);
+			renderer.add_to_context(id.name);
+			const callee = renderer.reference(id);
+
+			const updating = block.get_unique_name(`updating_${binding.name}`);
+			block.add_variable(updating);
+
+			const snippet = binding.expression.manipulate(block);
+
+			statements.push(b`
+				if (${snippet} !== void 0) {
+					${props}.${binding.name} = ${snippet};
+				}`
+			);
+
+			updates.push(b`
+				if (!${updating} && ${renderer.dirty(Array.from(binding.expression.dependencies))}) {
+					${updating} = true;
+					${name_changes}.${binding.name} = ${snippet};
+					@add_flush_callback(() => ${updating} = false);
+				}
+			`);
+
+			const contextual_dependencies = Array.from(binding.expression.contextual_dependencies);
+			const dependencies = Array.from(binding.expression.dependencies);
+
+			let lhs = binding.raw_expression;
+
+			if (binding.is_contextual && binding.expression.node.type === 'Identifier') {
+				// bind:x={y} — we can't just do `y = x`, we need to
+				// to `array[index] = x;
+				const { name } = binding.expression.node;
+				const { object, property, snippet } = block.bindings.get(name);
+				lhs = snippet;
+				contextual_dependencies.push(object.name, property.name);
+			}
+
+			const params: Identifier[] = [x`#value` as Identifier];
+			const args = [x`#value`];
+			if (contextual_dependencies.length > 0) {
+
+				contextual_dependencies.forEach(name => {
+					params.push({
+						type: 'Identifier',
+						name
+					});
+
+					renderer.add_to_context(name, true);
+					args.push(renderer.reference(name));
+				});
+
+
+				block.maintain_context = true; // TODO put this somewhere more logical
+			}
+
+			block.chunks.init.push(b`
+				function ${id}(#value) {
+					${callee}(${args});
+				}
+			`);
+
+			let invalidate_binding = b`
+				${lhs} = #value;
+				${renderer.invalidate(dependencies[0])};
+			`;
+			if (binding.expression.node.type === 'MemberExpression') {
+				invalidate_binding = b`
+					if ($$self.$$.not_equal(${lhs}, #value)) {
+						${invalidate_binding}
+					}
+				`;
+			}
+
+			const body = b`
+				function ${id}(${params}) {
+					${invalidate_binding}
+				}
+			`;
+
+			component.partly_hoisted.push(body);
+
+			return b`@binding_callbacks.push(() => @bind(${this.var}, '${binding.name}', ${id}));`;
+		});
+
+		const munged_handlers = this.node.handlers.map(handler => {
+			const event_handler = new EventHandler(handler, this);
+			let snippet = event_handler.get_snippet(block);
+			if (handler.modifiers.has('once')) snippet = x`@once(${snippet})`;
+
+			return b`${name}.$on("${handler.name}", ${snippet});`;
+		});
+
+		if (this.node.name === 'svelte:component') {
+			const switch_value = block.get_unique_name('switch_value');
+			const switch_props = block.get_unique_name('switch_props');
+
+			const snippet = this.node.expression.manipulate(block);
+
+			block.chunks.init.push(b`
+				var ${switch_value} = ${snippet};
+
+				function ${switch_props}(#ctx) {
+					${(this.node.attributes.length > 0 || this.node.bindings.length > 0) && b`
+					${props && b`let ${props} = ${attribute_object};`}`}
+					${statements}
+					return ${component_opts};
+				}
+
+				if (${switch_value}) {
+					${name} = new ${switch_value}(${switch_props}(#ctx));
+
+					${munged_bindings}
+					${munged_handlers}
+				}
+			`);
+
+			block.chunks.create.push(
+				b`if (${name}) @create_component(${name}.$$.fragment);`
+			);
+
+			if (parent_nodes && this.renderer.options.hydratable) {
+				block.chunks.claim.push(
+					b`if (${name}) @claim_component(${name}.$$.fragment, ${parent_nodes});`
+				);
+			}
+
+			block.chunks.mount.push(b`
+				if (${name}) {
+					@mount_component(${name}, ${parent_node || '#target'}, ${parent_node ? 'null' : '#anchor'});
+				}
+			`);
+
+			const anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
+			const update_mount_node = this.get_update_mount_node(anchor);
+
+			if (updates.length) {
+				block.chunks.update.push(b`
+					${updates}
+				`);
+			}
+
+			block.chunks.update.push(b`
+				if (${switch_value} !== (${switch_value} = ${snippet})) {
+					if (${name}) {
+						@group_outros();
+						const old_component = ${name};
+						@transition_out(old_component.$$.fragment, 1, 0, () => {
+							@destroy_component(old_component, 1);
+						});
+						@check_outros();
+					}
+
+					if (${switch_value}) {
+						${name} = new ${switch_value}(${switch_props}(#ctx));
+
+						${munged_bindings}
+						${munged_handlers}
+
+						@create_component(${name}.$$.fragment);
+						@transition_in(${name}.$$.fragment, 1);
+						@mount_component(${name}, ${update_mount_node}, ${anchor});
+					} else {
+						${name} = null;
+					}
+				} else if (${switch_value}) {
+					${updates.length > 0 && b`${name}.$set(${name_changes});`}
+				}
+			`);
+
+			block.chunks.intro.push(b`
+				if (${name}) @transition_in(${name}.$$.fragment, #local);
+			`);
+
+			block.chunks.outro.push(
+				b`if (${name}) @transition_out(${name}.$$.fragment, #local);`
+			);
+
+			block.chunks.destroy.push(b`if (${name}) @destroy_component(${name}, ${parent_node ? null : 'detaching'});`);
+		} else {
+			const expression = this.node.name === 'svelte:self'
+				? component.name
+				: this.renderer.reference(string_to_member_expression(this.node.name));
+
+			block.chunks.init.push(b`
+				${(this.node.attributes.length > 0 || this.node.bindings.length > 0) && b`
+				${props && b`let ${props} = ${attribute_object};`}`}
+				${statements}
+				${name} = new ${expression}(${component_opts});
+
+				${munged_bindings}
+				${munged_handlers}
+			`);
+
+			if (has_css_custom_properties) {
+				block.chunks.create.push(b`${css_custom_properties_wrapper} = @element("div");`);
+				block.chunks.hydrate.push(b`@set_style(${css_custom_properties_wrapper}, "display", "contents");`);
+				this.node.css_custom_properties.forEach(attr => {
+					const dependencies = attr.get_dependencies();
+					const should_cache = attr.should_cache();
+					const last = should_cache && block.get_unique_name(`${attr.name.replace(/[^a-zA-Z_$]/g, '_')}_last`);
+					if (should_cache) block.add_variable(last);
+					const value = attr.get_value(block);
+					const init = should_cache ? x`${last} = ${value}` : value;
+
+					block.chunks.hydrate.push(b`@set_style(${css_custom_properties_wrapper}, "${attr.name}", ${init});`);
+					if (dependencies.length > 0) {
+						let condition = block.renderer.dirty(dependencies);
+						if (should_cache) condition = x`${condition} && (${last} !== (${last} = ${value}))`;
+
+						block.chunks.update.push(b`
+							if (${condition}) {
+								@set_style(${css_custom_properties_wrapper}, "${attr.name}", ${should_cache ? last : value});
+							}
+						`);
+					}
+				});
+			}
+			block.chunks.create.push(b`@create_component(${name}.$$.fragment);`);
+
+			if (parent_nodes && this.renderer.options.hydratable) {
+				let nodes = parent_nodes;
+				if (has_css_custom_properties) {
+					nodes = block.get_unique_name(`${css_custom_properties_wrapper.name}_nodes`);
+					block.chunks.claim.push(b`
+						${css_custom_properties_wrapper} = @claim_element(${parent_nodes}, "DIV", { style: true })
+						var ${nodes} = @children(${css_custom_properties_wrapper});
+					`);
+				}
+				block.chunks.claim.push(
+					b`@claim_component(${name}.$$.fragment, ${nodes});`
+				);
+			}
+
+			if (has_css_custom_properties) {
+				if (parent_node) {
+					block.chunks.mount.push(b`@append(${parent_node}, ${css_custom_properties_wrapper})`);
+					if (is_head(parent_node)) {
+						block.chunks.destroy.push(b`@detach(${css_custom_properties_wrapper});`);
+					}
+				} else {
+					block.chunks.mount.push(b`@insert(#target, ${css_custom_properties_wrapper}, #anchor);`);
+					// TODO we eventually need to consider what happens to elements
+					// that belong to the same outgroup as an outroing element...
+					block.chunks.destroy.push(b`if (detaching) @detach(${css_custom_properties_wrapper});`);
+				}
+				block.chunks.mount.push(b`@mount_component(${name}, ${css_custom_properties_wrapper}, null);`);
+			} else {
+				block.chunks.mount.push(
+					b`@mount_component(${name}, ${parent_node || '#target'}, ${parent_node ? 'null' : '#anchor'});`
+				);
+			}
+
+			block.chunks.intro.push(b`
+				@transition_in(${name}.$$.fragment, #local);
+			`);
+
+			if (updates.length) {
+				block.chunks.update.push(b`
+					${updates}
+					${name}.$set(${name_changes});
+				`);
+			}
+
+			block.chunks.destroy.push(b`
+				@destroy_component(${name}, ${parent_node ? null : 'detaching'});
+			`);
+
+			block.chunks.outro.push(
+				b`@transition_out(${name}.$$.fragment, #local);`
+			);
+		}
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/KeyBlock.ts b/src/compiler/compile/render_dom/wrappers/KeyBlock.ts
new file mode 100644
index 0000000000..6a67f73c62
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/KeyBlock.ts
@@ -0,0 +1,136 @@
+import Wrapper from './shared/Wrapper';
+import Renderer from '../Renderer';
+import Block from '../Block';
+import KeyBlock from '../../nodes/KeyBlock';
+import create_debugging_comment from './shared/create_debugging_comment';
+import FragmentWrapper from './Fragment';
+import { b, x } from 'code-red';
+import { Identifier } from 'estree';
+
+export default class KeyBlockWrapper extends Wrapper {
+	node: KeyBlock;
+	fragment: FragmentWrapper;
+	block: Block;
+	dependencies: string[];
+	var: Identifier = { type: 'Identifier', name: 'key_block' };
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: KeyBlock,
+		strip_whitespace: boolean,
+		next_sibling: Wrapper
+	) {
+		super(renderer, block, parent, node);
+
+		this.cannot_use_innerhtml();
+		this.not_static_content();
+
+		this.dependencies = node.expression.dynamic_dependencies();
+
+		if (this.dependencies.length) {
+			block = block.child({
+				comment: create_debugging_comment(node, renderer.component),
+				name: renderer.component.get_unique_name('create_key_block'),
+				type: 'key'
+			});
+			block.add_dependencies(node.expression.dependencies);
+			renderer.blocks.push(block);
+		}
+
+		this.block = block;
+		this.fragment = new FragmentWrapper(
+			renderer,
+			this.block,
+			node.children,
+			this,
+			strip_whitespace,
+			next_sibling
+		);
+	}
+
+	render(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
+		if (this.dependencies.length === 0) {
+			this.render_static_key(block, parent_node, parent_nodes);
+		} else {
+			this.render_dynamic_key(block, parent_node, parent_nodes);
+		}
+	}
+
+	render_static_key(_block: Block, parent_node: Identifier, parent_nodes: Identifier) {
+		this.fragment.render(this.block, parent_node, parent_nodes);
+	}
+
+	render_dynamic_key(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
+		this.fragment.render(
+			this.block,
+			null,
+			(x`#nodes` as unknown) as Identifier
+		);
+
+		const has_transitions = !!(
+			this.block.has_intro_method || this.block.has_outro_method
+		);
+		const dynamic = this.block.has_update_method;
+
+		const previous_key = block.get_unique_name('previous_key');
+		const snippet = this.node.expression.manipulate(block);
+		block.add_variable(previous_key, snippet);
+
+		const not_equal = this.renderer.component.component_options.immutable ? x`@not_equal` : x`@safe_not_equal`;
+		const condition = x`${this.renderer.dirty(this.dependencies)} && ${not_equal}(${previous_key}, ${previous_key} = ${snippet})`;
+
+		block.chunks.init.push(b`
+			let ${this.var} = ${this.block.name}(#ctx);
+		`);
+		block.chunks.create.push(b`${this.var}.c();`);
+		if (this.renderer.options.hydratable) {
+			block.chunks.claim.push(b`${this.var}.l(${parent_nodes});`);
+		}
+		block.chunks.mount.push(
+			b`${this.var}.m(${parent_node || '#target'}, ${
+				parent_node ? 'null' : '#anchor'
+			});`
+		);
+		const anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
+		const body = b`
+			${
+				has_transitions
+					? b`
+						@group_outros();
+						@transition_out(${this.var}, 1, 1, @noop);
+						@check_outros();
+					`
+					: b`${this.var}.d(1);`
+			}
+			${this.var} = ${this.block.name}(#ctx);
+			${this.var}.c();
+			${has_transitions && b`@transition_in(${this.var}, 1)`}
+			${this.var}.m(${this.get_update_mount_node(anchor)}, ${anchor});
+		`;
+
+		if (dynamic) {
+			block.chunks.update.push(b`
+				if (${condition}) {
+					${body}
+				} else {
+					${this.var}.p(#ctx, #dirty);
+				}
+			`);
+		} else {
+			block.chunks.update.push(b`
+				if (${condition}) {
+					${body}
+				}
+			`);
+		}
+
+		if (has_transitions) {
+			block.chunks.intro.push(b`@transition_in(${this.var})`);
+			block.chunks.outro.push(b`@transition_out(${this.var})`);
+		}
+
+		block.chunks.destroy.push(b`${this.var}.d(detaching)`);
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/MustacheTag.ts b/src/compiler/compile/render_dom/wrappers/MustacheTag.ts
new file mode 100644
index 0000000000..ea6634ec80
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/MustacheTag.ts
@@ -0,0 +1,30 @@
+import Renderer from '../Renderer';
+import Block from '../Block';
+import Tag from './shared/Tag';
+import Wrapper from './shared/Wrapper';
+import MustacheTag from '../../nodes/MustacheTag';
+import RawMustacheTag from '../../nodes/RawMustacheTag';
+import { x } from 'code-red';
+import { Identifier } from 'estree';
+
+export default class MustacheTagWrapper extends Tag {
+	var: Identifier = { type: 'Identifier', name: 't' };
+
+	constructor(renderer: Renderer, block: Block, parent: Wrapper, node: MustacheTag | RawMustacheTag) {
+		super(renderer, block, parent, node);
+	}
+
+	render(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
+		const { init } = this.rename_this_method(
+			block,
+			value => x`@set_data(${this.var}, ${value})`
+		);
+
+		block.add_element(
+			this.var,
+			x`@text(${init})`,
+			parent_nodes && x`@claim_text(${parent_nodes}, ${init})`,
+			parent_node
+		);
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
new file mode 100644
index 0000000000..7810d8f099
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
@@ -0,0 +1,75 @@
+import { namespaces } from './../../../utils/namespaces';
+import { b, x } from 'code-red';
+import Renderer from '../Renderer';
+import Block from '../Block';
+import Tag from './shared/Tag';
+import Wrapper from './shared/Wrapper';
+import Element from '../../nodes/Element';
+import MustacheTag from '../../nodes/MustacheTag';
+import RawMustacheTag from '../../nodes/RawMustacheTag';
+import { is_head } from './shared/is_head';
+import { Identifier } from 'estree';
+
+export default class RawMustacheTagWrapper extends Tag {
+	var: Identifier = { type: 'Identifier', name: 'raw' };
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: MustacheTag | RawMustacheTag
+	) {
+		super(renderer, block, parent, node);
+		this.cannot_use_innerhtml();
+		this.not_static_content();
+	}
+
+	render(block: Block, parent_node: Identifier, _parent_nodes: Identifier) {
+		const in_head = is_head(parent_node);
+
+		const can_use_innerhtml = !in_head && parent_node && !this.prev && !this.next;
+
+		if (can_use_innerhtml) {
+			const insert = content => b`${parent_node}.innerHTML = ${content};`[0];
+
+			const { init } = this.rename_this_method(
+				block,
+				content => insert(content)
+			);
+
+			block.chunks.mount.push(insert(init));
+		} else {
+			const needs_anchor = in_head || (this.next ? !this.next.is_dom_node() : (!this.parent || !this.parent.is_dom_node()));
+
+			const html_tag = block.get_unique_name('html_tag');
+			const html_anchor = needs_anchor && block.get_unique_name('html_anchor');
+
+			block.add_variable(html_tag);
+
+			const { init } = this.rename_this_method(
+				block,
+				content => x`${html_tag}.p(${content})`
+			);
+
+			const update_anchor = needs_anchor ? html_anchor : this.next ? this.next.var : 'null';
+
+			const parent_element = this.node.find_nearest(/^Element/) as Element;
+			const is_svg = parent_element && parent_element.namespace === namespaces.svg;
+			block.chunks.create.push(b`${html_tag} = new @HtmlTag(${is_svg ? 'true' : 'false'});`);
+
+			if (this.renderer.options.hydratable) {
+				block.chunks.claim.push(b`${html_tag} = @claim_html_tag(${_parent_nodes}, ${is_svg ? 'true' : 'false'});`);
+			}
+			block.chunks.hydrate.push(b`${html_tag}.a = ${update_anchor};`);
+			block.chunks.mount.push(b`${html_tag}.m(${init}, ${parent_node || '#target'}, ${parent_node ? null : '#anchor'});`);
+
+			if (needs_anchor) {
+				block.add_element(html_anchor, x`@empty()`, x`@empty()`, parent_node);
+			}
+
+			if (!parent_node || in_head) {
+				block.chunks.destroy.push(b`if (detaching) ${html_tag}.d();`);
+			}
+		}
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/Slot.ts b/src/compiler/compile/render_dom/wrappers/Slot.ts
new file mode 100644
index 0000000000..5a778ba5fb
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/Slot.ts
@@ -0,0 +1,237 @@
+import Wrapper from './shared/Wrapper';
+import Renderer from '../Renderer';
+import Block from '../Block';
+import Slot from '../../nodes/Slot';
+import FragmentWrapper from './Fragment';
+import { b, p, x } from 'code-red';
+import { sanitize } from '../../../utils/names';
+import add_to_set from '../../utils/add_to_set';
+import get_slot_data from '../../utils/get_slot_data';
+import { is_reserved_keyword } from '../../utils/reserved_keywords';
+import is_dynamic from './shared/is_dynamic';
+import { Identifier, ObjectExpression } from 'estree';
+import create_debugging_comment from './shared/create_debugging_comment';
+
+export default class SlotWrapper extends Wrapper {
+	node: Slot;
+	fragment: FragmentWrapper;
+	fallback: Block | null = null;
+	slot_block: Block;
+
+	var: Identifier = { type: 'Identifier', name: 'slot' };
+	dependencies: Set<string> = new Set(['$$scope']);
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: Slot,
+		strip_whitespace: boolean,
+		next_sibling: Wrapper
+	) {
+		super(renderer, block, parent, node);
+		this.cannot_use_innerhtml();
+		this.not_static_content();
+
+		if (this.node.children.length) {
+			this.fallback = block.child({
+				comment: create_debugging_comment(this.node.children[0], this.renderer.component),
+				name: this.renderer.component.get_unique_name('fallback_block'),
+				type: 'fallback'
+			});
+			renderer.blocks.push(this.fallback);
+		}
+
+		this.fragment = new FragmentWrapper(
+			renderer,
+			this.fallback,
+			node.children,
+			this,
+			strip_whitespace,
+			next_sibling
+		);
+
+		this.node.values.forEach(attribute => {
+			add_to_set(this.dependencies, attribute.dependencies);
+		});
+
+		block.add_dependencies(this.dependencies);
+
+		// we have to do this, just in case
+		block.add_intro();
+		block.add_outro();
+	}
+
+	render(
+		block: Block,
+		parent_node: Identifier,
+		parent_nodes: Identifier
+	) {
+		const { renderer } = this;
+
+		const { slot_name } = this.node;
+
+		if (this.slot_block) {
+			block = this.slot_block;
+		}
+
+		let get_slot_changes_fn;
+		let get_slot_spread_changes_fn;
+		let get_slot_context_fn;
+
+		if (this.node.values.size > 0) {
+			get_slot_changes_fn = renderer.component.get_unique_name(`get_${sanitize(slot_name)}_slot_changes`);
+			get_slot_context_fn = renderer.component.get_unique_name(`get_${sanitize(slot_name)}_slot_context`);
+
+			const changes = x`{}` as ObjectExpression;
+
+			const spread_dynamic_dependencies = new Set<string>();
+
+			this.node.values.forEach(attribute => {
+				if (attribute.type === 'Spread') {
+					add_to_set(spread_dynamic_dependencies, Array.from(attribute.dependencies).filter((name) => this.is_dependency_dynamic(name)));
+				} else {
+					const dynamic_dependencies = Array.from(attribute.dependencies).filter((name) => this.is_dependency_dynamic(name));
+
+					if (dynamic_dependencies.length > 0) {
+						changes.properties.push(p`${attribute.name}: ${renderer.dirty(dynamic_dependencies)}`);
+					}
+				}
+			});
+
+			renderer.blocks.push(b`
+				const ${get_slot_changes_fn} = #dirty => ${changes};
+				const ${get_slot_context_fn} = #ctx => ${get_slot_data(this.node.values, block)};
+			`);
+
+			if (spread_dynamic_dependencies.size) {
+				get_slot_spread_changes_fn = renderer.component.get_unique_name(`get_${sanitize(slot_name)}_slot_spread_changes`);
+				renderer.blocks.push(b`
+					const ${get_slot_spread_changes_fn} = #dirty => ${renderer.dirty(Array.from(spread_dynamic_dependencies))};
+				`);
+			}
+		} else {
+			get_slot_changes_fn = 'null';
+			get_slot_context_fn = 'null';
+		}
+
+		let has_fallback = !!this.fallback;
+		if (this.fallback) {
+			this.fragment.render(this.fallback, null, x`#nodes` as Identifier);
+			has_fallback = this.fallback.has_content();
+			if (!has_fallback) {
+				renderer.remove_block(this.fallback);
+			}
+		}
+
+		const slot = block.get_unique_name(`${sanitize(slot_name)}_slot`);
+		const slot_definition = block.get_unique_name(`${sanitize(slot_name)}_slot_template`);
+		const slot_or_fallback = has_fallback ? block.get_unique_name(`${sanitize(slot_name)}_slot_or_fallback`) : slot;
+
+		block.chunks.init.push(b`
+			const ${slot_definition} = ${renderer.reference('#slots')}.${slot_name};
+			const ${slot} = @create_slot(${slot_definition}, #ctx, ${renderer.reference('$$scope')}, ${get_slot_context_fn});
+			${has_fallback ? b`const ${slot_or_fallback} = ${slot} || ${this.fallback.name}(#ctx);` : null}
+		`);
+
+		block.chunks.create.push(
+			b`if (${slot_or_fallback}) ${slot_or_fallback}.c();`
+		);
+
+		if (renderer.options.hydratable) {
+			block.chunks.claim.push(
+				b`if (${slot_or_fallback}) ${slot_or_fallback}.l(${parent_nodes});`
+			);
+		}
+
+		block.chunks.mount.push(b`
+			if (${slot_or_fallback}) {
+				${slot_or_fallback}.m(${parent_node || '#target'}, ${parent_node ? 'null' : '#anchor'});
+			}
+		`);
+
+		block.chunks.intro.push(
+			b`@transition_in(${slot_or_fallback}, #local);`
+		);
+
+		block.chunks.outro.push(
+			b`@transition_out(${slot_or_fallback}, #local);`
+		);
+
+		const dynamic_dependencies = Array.from(this.dependencies).filter((name) => this.is_dependency_dynamic(name));
+
+		const fallback_dynamic_dependencies = has_fallback
+			? Array.from(this.fallback.dependencies).filter((name) => this.is_dependency_dynamic(name))
+			: [];
+
+		let condition = renderer.dirty(dynamic_dependencies);
+		if (block.has_outros) {
+			condition = x`!#current || ${condition}`;
+		}
+
+		// conditions to treat everything as dirty
+		const all_dirty_conditions = [
+			get_slot_spread_changes_fn ? x`${get_slot_spread_changes_fn}(#dirty)` : null,
+			block.has_outros ? x`!#current` : null
+		].filter(Boolean);
+		const all_dirty_condition = all_dirty_conditions.length ? all_dirty_conditions.reduce((condition1, condition2) => x`${condition1} || ${condition2}`) : null;
+
+		let slot_update;
+		if (all_dirty_condition) {
+			const dirty = x`${all_dirty_condition} ? @get_all_dirty_from_scope(${renderer.reference('$$scope')}) : @get_slot_changes(${slot_definition}, ${renderer.reference('$$scope')}, #dirty, ${get_slot_changes_fn})`;
+
+			slot_update = b`
+				if (${slot}.p && ${condition}) {
+					@update_slot_base(${slot}, ${slot_definition}, #ctx, ${renderer.reference('$$scope')}, ${dirty}, ${get_slot_context_fn});
+				}
+			`;
+		} else {
+			slot_update = b`
+				if (${slot}.p && ${condition}) {
+					@update_slot(${slot}, ${slot_definition}, #ctx, ${renderer.reference('$$scope')}, #dirty, ${get_slot_changes_fn}, ${get_slot_context_fn});
+				}
+			`;
+		}
+
+		let fallback_condition = renderer.dirty(fallback_dynamic_dependencies);
+		let fallback_dirty = x`#dirty`;
+		if (block.has_outros) {
+			fallback_condition = x`!#current || ${fallback_condition}`;
+			fallback_dirty = x`!#current ? ${renderer.get_initial_dirty()} : ${fallback_dirty}`;
+		}
+
+		const fallback_update = has_fallback && fallback_dynamic_dependencies.length > 0 && b`
+			if (${slot_or_fallback} && ${slot_or_fallback}.p && ${fallback_condition}) {
+				${slot_or_fallback}.p(#ctx, ${fallback_dirty});
+			}
+		`;
+
+		if (fallback_update) {
+			block.chunks.update.push(b`
+				if (${slot}) {
+					${slot_update}
+				} else {
+					${fallback_update}
+				}
+			`);
+		} else {
+			block.chunks.update.push(b`
+				if (${slot}) {
+					${slot_update}
+				}
+			`);
+		}
+
+		block.chunks.destroy.push(
+			b`if (${slot_or_fallback}) ${slot_or_fallback}.d(detaching);`
+		);
+	}
+
+	is_dependency_dynamic(name: string) {
+		if (name === '$$scope') return true;
+		if (this.node.scope.is_let(name)) return true;
+		if (is_reserved_keyword(name)) return true;
+		const variable = this.renderer.component.var_lookup.get(name);
+		return is_dynamic(variable);
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/SlotTemplate.ts b/src/compiler/compile/render_dom/wrappers/SlotTemplate.ts
new file mode 100644
index 0000000000..a50f74fc04
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/SlotTemplate.ts
@@ -0,0 +1,91 @@
+import Wrapper from './shared/Wrapper';
+import Renderer from '../Renderer';
+import Block from '../Block';
+import FragmentWrapper from './Fragment';
+import create_debugging_comment from './shared/create_debugging_comment';
+import { get_slot_definition } from './shared/get_slot_definition';
+import { b, x } from 'code-red';
+import { sanitize } from '../../../utils/names';
+import { Identifier } from 'estree';
+import InlineComponentWrapper from './InlineComponent';
+import { extract_names } from 'periscopic';
+import SlotTemplate from '../../nodes/SlotTemplate';
+import { add_const_tags, add_const_tags_context } from './shared/add_const_tags';
+
+export default class SlotTemplateWrapper extends Wrapper {
+	node: SlotTemplate;
+	fragment: FragmentWrapper;
+	block: Block;
+	parent: InlineComponentWrapper;
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: SlotTemplate,
+		strip_whitespace: boolean,
+		next_sibling: Wrapper
+	) {
+		super(renderer, block, parent, node);
+
+		const { scope, lets, const_tags, slot_template_name } = this.node;
+
+		lets.forEach(l => {
+			extract_names(l.value || l.name).forEach(name => {
+				renderer.add_to_context(name, true);
+			});
+		});
+
+		add_const_tags_context(renderer, const_tags);
+
+		this.block = block.child({
+			comment: create_debugging_comment(this.node, this.renderer.component),
+			name: this.renderer.component.get_unique_name(
+				`create_${sanitize(slot_template_name)}_slot`
+			),
+			type: 'slot'
+		});
+		this.renderer.blocks.push(this.block);
+
+		const seen = new Set(lets.map(l => l.name.name));
+		this.parent.node.lets.forEach(l => {
+			if (!seen.has(l.name.name)) lets.push(l);
+		});
+
+		this.parent.set_slot(
+			slot_template_name,
+			get_slot_definition(this.block, scope, lets)
+		);
+
+		this.fragment = new FragmentWrapper(
+			renderer,
+			this.block,
+			node.type === 'SlotTemplate' ? node.children : [node],
+			this,
+			strip_whitespace,
+			next_sibling
+		);
+
+		this.block.parent.add_dependencies(this.block.dependencies);
+	}
+
+	render() {
+		this.fragment.render(this.block, null, x`#nodes` as Identifier);
+
+		if (this.node.const_tags.length > 0) {
+			this.render_get_context();
+		}
+	}
+	render_get_context() {
+		const get_context = this.block.renderer.component.get_unique_name('get_context');
+		this.block.renderer.blocks.push(b`
+			function ${get_context}(#ctx) {
+				${add_const_tags(this.block, this.node.const_tags, '#ctx')}
+			}
+		`);
+		this.block.chunks.declarations.push(b`${get_context}(#ctx)`);
+		if (this.block.has_update_method) {
+			this.block.chunks.update.unshift(b`${get_context}(#ctx)`);
+		}
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/Text.ts b/src/compiler/compile/render_dom/wrappers/Text.ts
new file mode 100644
index 0000000000..2a342b5678
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/Text.ts
@@ -0,0 +1,55 @@
+import Renderer from '../Renderer';
+import Block from '../Block';
+import Text from '../../nodes/Text';
+import Wrapper from './shared/Wrapper';
+import { x } from 'code-red';
+import { Identifier } from 'estree';
+
+export default class TextWrapper extends Wrapper {
+	node: Text;
+	data: string;
+	skip: boolean;
+	var: Identifier;
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: Text,
+		data: string
+	) {
+		super(renderer, block, parent, node);
+
+		this.skip = this.node.should_skip();
+		this.data = data;
+		this.var = (this.skip ? null : x`t`) as unknown as Identifier;
+	}
+
+	use_space() {
+		if (this.renderer.component.component_options.preserveWhitespace) return false;
+		if (/[\S\u00A0]/.test(this.data)) return false;
+
+		return !this.node.within_pre();
+	}
+
+	render(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
+		if (this.skip) return;
+		const use_space = this.use_space();
+
+		const string_literal = {
+			type: 'Literal',
+			value: this.data,
+			loc: {
+				start: this.renderer.locate(this.node.start),
+				end: this.renderer.locate(this.node.end)
+			}
+		};
+
+		block.add_element(
+			this.var,
+			use_space ? x`@space()` : x`@text(${string_literal})`,
+			parent_nodes && (use_space ? x`@claim_space(${parent_nodes})` : x`@claim_text(${parent_nodes}, ${string_literal})`),
+			parent_node as Identifier
+		);
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/Title.ts b/src/compiler/compile/render_dom/wrappers/Title.ts
new file mode 100644
index 0000000000..808384fabb
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/Title.ts
@@ -0,0 +1,101 @@
+import { b, x } from 'code-red';
+import Wrapper from './shared/Wrapper';
+import Renderer from '../Renderer';
+import Block from '../Block';
+import Title from '../../nodes/Title';
+import { string_literal } from '../../utils/stringify';
+import add_to_set from '../../utils/add_to_set';
+import Text from '../../nodes/Text';
+import { Identifier } from 'estree';
+import MustacheTag from '../../nodes/MustacheTag';
+
+export default class TitleWrapper extends Wrapper {
+	node: Title;
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: Title,
+		_strip_whitespace: boolean,
+		_next_sibling: Wrapper
+	) {
+		super(renderer, block, parent, node);
+	}
+
+	render(block: Block, _parent_node: Identifier, _parent_nodes: Identifier) {
+		const is_dynamic = !!this.node.children.find(node => node.type !== 'Text');
+
+		if (is_dynamic) {
+			let value;
+
+			const all_dependencies: Set<string> = new Set();
+
+			// TODO some of this code is repeated in Tag.ts — would be good to
+			// DRY it out if that's possible without introducing crazy indirection
+			if (this.node.children.length === 1) {
+				// single {tag} — may be a non-string
+				// @ts-ignore todo: check this
+				const { expression } = this.node.children[0];
+				value = expression.manipulate(block);
+				add_to_set(all_dependencies, expression.dependencies);
+			} else {
+				// '{foo} {bar}' — treat as string concatenation
+				value = this.node.children
+					.map(chunk => {
+						if (chunk.type === 'Text') return string_literal(chunk.data);
+
+						(chunk as MustacheTag).expression.dependencies.forEach(d => {
+							all_dependencies.add(d);
+						});
+
+						return (chunk as MustacheTag).expression.manipulate(block);
+					})
+					.reduce((lhs, rhs) => x`${lhs} + ${rhs}`);
+
+				if (this.node.children[0].type !== 'Text') {
+					value = x`"" + ${value}`;
+				}
+			}
+
+			const last = this.node.should_cache && block.get_unique_name(
+				'title_value'
+			);
+
+			if (this.node.should_cache) block.add_variable(last);
+
+			const init = this.node.should_cache ? x`${last} = ${value}` : value;
+
+			block.chunks.init.push(
+				b`@_document.title = ${init};`
+			);
+
+			const updater = b`@_document.title = ${this.node.should_cache ? last : value};`;
+
+			if (all_dependencies.size) {
+				const dependencies = Array.from(all_dependencies);
+
+				let condition = block.renderer.dirty(dependencies);
+
+				if (block.has_outros) {
+					condition = x`!#current || ${condition}`;
+				}
+
+				if (this.node.should_cache) {
+					condition = x`${condition} && (${last} !== (${last} = ${value}))`;
+				}
+
+				block.chunks.update.push(b`
+					if (${condition}) {
+						${updater}
+					}`);
+			}
+		} else {
+			const value = this.node.children.length > 0
+				? string_literal((this.node.children[0] as Text).data)
+				: x`""`;
+
+			block.chunks.hydrate.push(b`@_document.title = ${value};`);
+		}
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/Window.ts b/src/compiler/compile/render_dom/wrappers/Window.ts
new file mode 100644
index 0000000000..3c55680446
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/Window.ts
@@ -0,0 +1,186 @@
+import Renderer from '../Renderer';
+import Block from '../Block';
+import Wrapper from './shared/Wrapper';
+import { b, x } from 'code-red';
+import add_event_handlers from './shared/add_event_handlers';
+import Window from '../../nodes/Window';
+import add_actions from './shared/add_actions';
+import { Identifier } from 'estree';
+import { TemplateNode } from '../../../interfaces';
+import EventHandler from './Element/EventHandler';
+
+const associated_events = {
+	innerWidth: 'resize',
+	innerHeight: 'resize',
+	outerWidth: 'resize',
+	outerHeight: 'resize',
+
+	scrollX: 'scroll',
+	scrollY: 'scroll'
+};
+
+const properties = {
+	scrollX: 'pageXOffset',
+	scrollY: 'pageYOffset'
+};
+
+const readonly = new Set([
+	'innerWidth',
+	'innerHeight',
+	'outerWidth',
+	'outerHeight',
+	'online'
+]);
+
+export default class WindowWrapper extends Wrapper {
+	node: Window;
+	handlers: EventHandler[];
+
+	constructor(renderer: Renderer, block: Block, parent: Wrapper, node: TemplateNode) {
+		super(renderer, block, parent, node);
+		this.handlers = this.node.handlers.map(handler => new EventHandler(handler, this));
+	}
+
+	render(block: Block, _parent_node: Identifier, _parent_nodes: Identifier) {
+		const { renderer } = this;
+		const { component } = renderer;
+
+		const events = {};
+		const bindings: Record<string, string> = {};
+
+		add_actions(block, '@_window', this.node.actions);
+		add_event_handlers(block, '@_window', this.handlers);
+
+		this.node.bindings.forEach(binding => {
+			// TODO: what if it's a MemberExpression?
+			const binding_name = (binding.expression.node as Identifier).name;
+
+			// in dev mode, throw if read-only values are written to
+			if (readonly.has(binding.name)) {
+				renderer.readonly.add(binding_name);
+			}
+
+			bindings[binding.name] = binding_name;
+
+			// bind:online is a special case, we need to listen for two separate events
+			if (binding.name === 'online') return;
+
+			const associated_event = associated_events[binding.name];
+			const property = properties[binding.name] || binding.name;
+
+			if (!events[associated_event]) events[associated_event] = [];
+			events[associated_event].push({
+				name: binding_name,
+				value: property
+			});
+		});
+
+		const scrolling = block.get_unique_name('scrolling');
+		const clear_scrolling = block.get_unique_name('clear_scrolling');
+		const scrolling_timeout = block.get_unique_name('scrolling_timeout');
+
+		Object.keys(events).forEach(event => {
+			const id = block.get_unique_name(`onwindow${event}`);
+			const props = events[event];
+
+			renderer.add_to_context(id.name);
+			const fn = renderer.reference(id.name);
+
+			if (event === 'scroll') {
+				// TODO other bidirectional bindings...
+				block.add_variable(scrolling, x`false`);
+				block.add_variable(clear_scrolling, x`() => { ${scrolling} = false }`);
+				block.add_variable(scrolling_timeout);
+
+				const condition = bindings.scrollX && bindings.scrollY
+					? x`"${bindings.scrollX}" in this._state || "${bindings.scrollY}" in this._state`
+					: x`"${bindings.scrollX || bindings.scrollY}" in this._state`;
+
+				const scrollX = bindings.scrollX && x`this._state.${bindings.scrollX}`;
+				const scrollY = bindings.scrollY && x`this._state.${bindings.scrollY}`;
+
+				renderer.meta_bindings.push(b`
+					if (${condition}) {
+						@_scrollTo(${scrollX || '@_window.pageXOffset'}, ${scrollY || '@_window.pageYOffset'});
+					}
+					${scrollX && `${scrollX} = @_window.pageXOffset;`}
+					${scrollY && `${scrollY} = @_window.pageYOffset;`}
+				`);
+
+				block.event_listeners.push(x`
+					@listen(@_window, "${event}", () => {
+						${scrolling} = true;
+						@_clearTimeout(${scrolling_timeout});
+						${scrolling_timeout} = @_setTimeout(${clear_scrolling}, 100);
+						${fn}();
+					})
+				`);
+			} else {
+				props.forEach(prop => {
+					renderer.meta_bindings.push(
+						b`this._state.${prop.name} = @_window.${prop.value};`
+					);
+				});
+
+				block.event_listeners.push(x`
+					@listen(@_window, "${event}", ${fn})
+				`);
+			}
+
+			component.partly_hoisted.push(b`
+				function ${id}() {
+					${props.map(prop => renderer.invalidate(prop.name, x`${prop.name} = @_window.${prop.value}`))}
+				}
+			`);
+
+			block.chunks.init.push(b`
+				@add_render_callback(${fn});
+			`);
+
+			component.has_reactive_assignments = true;
+		});
+
+		// special case... might need to abstract this out if we add more special cases
+		if (bindings.scrollX || bindings.scrollY) {
+			const condition = renderer.dirty([bindings.scrollX, bindings.scrollY].filter(Boolean));
+
+			const scrollX = bindings.scrollX ? renderer.reference(bindings.scrollX) : x`@_window.pageXOffset`;
+			const scrollY = bindings.scrollY ? renderer.reference(bindings.scrollY) : x`@_window.pageYOffset`;
+
+			block.chunks.update.push(b`
+				if (${condition} && !${scrolling}) {
+					${scrolling} = true;
+					@_clearTimeout(${scrolling_timeout});
+					@_scrollTo(${scrollX}, ${scrollY});
+					${scrolling_timeout} = @_setTimeout(${clear_scrolling}, 100);
+				}
+			`);
+		}
+
+		// another special case. (I'm starting to think these are all special cases.)
+		if (bindings.online) {
+			const id = block.get_unique_name('onlinestatuschanged');
+			const name = bindings.online;
+
+			renderer.add_to_context(id.name);
+			const reference = renderer.reference(id.name);
+
+			component.partly_hoisted.push(b`
+				function ${id}() {
+					${renderer.invalidate(name, x`${name} = @_navigator.onLine`)}
+				}
+			`);
+
+			block.chunks.init.push(b`
+				@add_render_callback(${reference});
+			`);
+
+			block.event_listeners.push(
+				x`@listen(@_window, "online", ${reference})`,
+				x`@listen(@_window, "offline", ${reference})`
+			);
+
+			component.has_reactive_assignments = true;
+		}
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/shared/Tag.ts b/src/compiler/compile/render_dom/wrappers/shared/Tag.ts
new file mode 100644
index 0000000000..8d73b0329d
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/shared/Tag.ts
@@ -0,0 +1,59 @@
+import { b, x } from 'code-red';
+import Wrapper from './Wrapper';
+import Renderer from '../../Renderer';
+import Block from '../../Block';
+import MustacheTag from '../../../nodes/MustacheTag';
+import RawMustacheTag from '../../../nodes/RawMustacheTag';
+import { Node } from 'estree';
+
+export default class Tag extends Wrapper {
+	node: MustacheTag | RawMustacheTag;
+
+	constructor(renderer: Renderer, block: Block, parent: Wrapper, node: MustacheTag | RawMustacheTag) {
+		super(renderer, block, parent, node);
+
+		this.cannot_use_innerhtml();
+		if (!this.is_dependencies_static()) {
+			this.not_static_content();
+		}
+
+		block.add_dependencies(node.expression.dependencies);
+	}
+
+	is_dependencies_static() {
+		return this.node.expression.contextual_dependencies.size === 0 && this.node.expression.dynamic_dependencies().length === 0;
+	}
+
+	rename_this_method(
+		block: Block,
+		update: ((value: Node) => (Node | Node[]))
+	) {
+		const dependencies = this.node.expression.dynamic_dependencies();
+		let snippet = this.node.expression.manipulate(block);
+
+		const value = this.node.should_cache && block.get_unique_name(`${this.var.name}_value`);
+		const content = this.node.should_cache ? value : snippet;
+
+		snippet = x`${snippet} + ""`;
+
+		if (this.node.should_cache) block.add_variable(value, snippet); // TODO may need to coerce snippet to string
+
+		if (dependencies.length > 0) {
+			let condition = block.renderer.dirty(dependencies);
+
+			if (block.has_outros) {
+				condition = x`!#current || ${condition}`;
+			}
+
+			const update_cached_value = x`${value} !== (${value} = ${snippet})`;
+
+			if (this.node.should_cache) {
+				condition = x`${condition} && ${update_cached_value}`;
+			}
+
+			block.chunks.update.push(b`if (${condition}) ${update(content as Node)}`);
+		}
+
+		return { init: content };
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/shared/Wrapper.ts b/src/compiler/compile/render_dom/wrappers/shared/Wrapper.ts
new file mode 100644
index 0000000000..4bf8c20bd8
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/shared/Wrapper.ts
@@ -0,0 +1,91 @@
+import Renderer from '../../Renderer';
+import Block from '../../Block';
+import { x } from 'code-red';
+import { TemplateNode } from '../../../../interfaces';
+import { Identifier } from 'estree';
+
+export default class Wrapper {
+	renderer: Renderer;
+	parent: Wrapper;
+	node: TemplateNode;
+
+	prev: Wrapper | null;
+	next: Wrapper | null;
+
+	var: Identifier;
+	can_use_innerhtml: boolean;
+	is_static_content: boolean;
+
+	constructor(
+		renderer: Renderer,
+		block: Block,
+		parent: Wrapper,
+		node: TemplateNode
+	) {
+		this.node = node;
+
+		// make these non-enumerable so that they can be logged sensibly
+		// (TODO in dev only?)
+		Object.defineProperties(this, {
+			renderer: {
+				value: renderer
+			},
+			parent: {
+				value: parent
+			}
+		});
+
+		this.can_use_innerhtml = !renderer.options.hydratable;
+		this.is_static_content = !renderer.options.hydratable;
+
+		block.wrappers.push(this);
+	}
+
+	cannot_use_innerhtml() {
+		this.can_use_innerhtml = false;
+		if (this.parent) this.parent.cannot_use_innerhtml();
+	}
+
+	not_static_content() {
+		this.is_static_content = false;
+		if (this.parent) this.parent.not_static_content();
+	}
+
+	get_or_create_anchor(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
+		// TODO use this in EachBlock and IfBlock — tricky because
+		// children need to be created first
+		const needs_anchor = this.next ? !this.next.is_dom_node() : !parent_node || !this.parent.is_dom_node();
+		const anchor = needs_anchor
+			? block.get_unique_name(`${this.var.name}_anchor`)
+			: (this.next && this.next.var) || { type: 'Identifier', name: 'null' };
+
+		if (needs_anchor) {
+			block.add_element(
+				anchor,
+				x`@empty()`,
+				parent_nodes && x`@empty()`,
+				parent_node as Identifier
+			);
+		}
+
+		return anchor;
+	}
+
+	get_update_mount_node(anchor: Identifier): Identifier {
+		return ((this.parent && this.parent.is_dom_node())
+			? this.parent.var
+			: x`${anchor}.parentNode`) as Identifier;
+	}
+
+	is_dom_node() {
+		return (
+			this.node.type === 'Element' ||
+			this.node.type === 'Text' ||
+			this.node.type === 'MustacheTag'
+		);
+	}
+
+	render(_block: Block, _parent_node: Identifier, _parent_nodes: Identifier) {
+		throw Error('Wrapper class is not renderable');
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/shared/add_actions.ts b/src/compiler/compile/render_dom/wrappers/shared/add_actions.ts
new file mode 100644
index 0000000000..6429f18928
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/shared/add_actions.ts
@@ -0,0 +1,59 @@
+import { b, x } from 'code-red';
+import Block from '../../Block';
+import Action from '../../../nodes/Action';
+import { Expression } from 'estree';
+import is_contextual from '../../../nodes/shared/is_contextual';
+
+export default function add_actions(
+	block: Block,
+	target: string | Expression,
+	actions: Action[]
+) {
+	actions.forEach(action => add_action(block, target, action));
+}
+
+export function add_action(block: Block, target: string | Expression, action: Action) {
+	const { expression, template_scope } = action;
+	let snippet;
+	let dependencies;
+
+	if (expression) {
+		snippet = expression.manipulate(block);
+		dependencies = expression.dynamic_dependencies();
+	}
+
+	const id = block.get_unique_name(
+		`${action.name.replace(/[^a-zA-Z0-9_$]/g, '_')}_action`
+	);
+
+	block.add_variable(id);
+
+	const [obj, ...properties] = action.name.split('.');
+
+	const fn = is_contextual(action.component, template_scope, obj)
+		? block.renderer.reference(obj)
+		: obj;
+
+	if (properties.length) {
+		const member_expression = properties.reduce((lhs, rhs) => x`${lhs}.${rhs}`, fn);
+		block.event_listeners.push(
+			x`@action_destroyer(${id} = ${member_expression}(${target}, ${snippet}))`
+		);
+	} else {
+		block.event_listeners.push(
+			x`@action_destroyer(${id} = ${fn}.call(null, ${target}, ${snippet}))`
+		);
+	}
+
+	if (dependencies && dependencies.length > 0) {
+		let condition = x`${id} && @is_function(${id}.update)`;
+
+		if (dependencies.length > 0) {
+			condition = x`${condition} && ${block.renderer.dirty(dependencies)}`;
+		}
+
+		block.chunks.update.push(
+			b`if (${condition}) ${id}.update.call(null, ${snippet});`
+		);
+	}
+}
diff --git a/src/compiler/compile/render_dom/wrappers/shared/add_const_tags.ts b/src/compiler/compile/render_dom/wrappers/shared/add_const_tags.ts
new file mode 100644
index 0000000000..cd4dc7f033
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/shared/add_const_tags.ts
@@ -0,0 +1,24 @@
+import ConstTag from '../../../nodes/ConstTag';
+import Block from '../../Block';
+import { b, x } from 'code-red';
+import Renderer from '../../Renderer';
+
+export function add_const_tags(block: Block, const_tags: ConstTag[], ctx: string) {
+  const const_tags_props = [];
+  const_tags.forEach((const_tag, i) => {
+    const name = `#constants_${i}`;
+    const_tags_props.push(b`const ${name} = ${const_tag.expression.manipulate(block, ctx)}`);
+    const_tag.contexts.forEach(context => {
+      const_tags_props.push(b`${ctx}[${block.renderer.context_lookup.get(context.key.name).index}] = ${context.default_modifier(context.modifier({ type: 'Identifier', name }), name => block.renderer.context_lookup.has(name) ? x`${ctx}[${block.renderer.context_lookup.get(name).index}]` : { type: 'Identifier', name })};`);
+    });
+  });
+  return const_tags_props;
+}
+
+export function add_const_tags_context(renderer: Renderer, const_tags: ConstTag[]) {
+  const_tags.forEach(const_tag => {
+    const_tag.contexts.forEach(context => {
+      renderer.add_to_context(context.key.name, true);
+    });
+  });
+}
diff --git a/src/compiler/compile/render_dom/wrappers/shared/add_event_handlers.ts b/src/compiler/compile/render_dom/wrappers/shared/add_event_handlers.ts
new file mode 100644
index 0000000000..99b8080b17
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/shared/add_event_handlers.ts
@@ -0,0 +1,19 @@
+import Block from '../../Block';
+import EventHandler from '../Element/EventHandler';
+import { Expression } from 'estree';
+
+export default function add_event_handlers(
+	block: Block,
+	target: string | Expression,
+	handlers: EventHandler[]
+) {
+	handlers.forEach(handler => add_event_handler(block, target, handler));
+}
+
+export function add_event_handler(
+	block: Block,
+	target: string | Expression,
+	handler: EventHandler
+) {
+	handler.render(block, target);
+}
diff --git a/src/compiler/compile/render_dom/wrappers/shared/bind_this.ts b/src/compiler/compile/render_dom/wrappers/shared/bind_this.ts
new file mode 100644
index 0000000000..af440b6341
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/shared/bind_this.ts
@@ -0,0 +1,97 @@
+import { b, x } from 'code-red';
+import Component from '../../../Component';
+import Block from '../../Block';
+import BindingWrapper from '../Element/Binding';
+import { Identifier } from 'estree';
+import { compare_node } from '../../../utils/compare_node';
+
+export default function bind_this(component: Component, block: Block, binding: BindingWrapper, variable: Identifier) {
+	const fn = component.get_unique_name(`${variable.name}_binding`);
+
+	block.renderer.add_to_context(fn.name);
+	const callee = block.renderer.reference(fn.name);
+
+	const { contextual_dependencies, mutation } = binding.handler;
+	const dependencies = binding.get_update_dependencies();
+
+	const body = b`
+		${mutation}
+		${Array.from(dependencies)
+			.filter(dep => dep[0] !== '$')
+			.filter(dep => !contextual_dependencies.has(dep))
+			.map(dep => b`${block.renderer.invalidate(dep)};`)}
+	`;
+
+	if (contextual_dependencies.size) {
+		const params: Identifier[] = Array.from(contextual_dependencies).map(name => ({
+			type: 'Identifier',
+			name
+		}));
+		component.partly_hoisted.push(b`
+			function ${fn}($$value, ${params}) {
+				@binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+					${body}
+				});
+			}
+		`);
+
+		const alias_map = new Map();
+		const args = [];
+		for (let id of params) {
+			const value = block.renderer.reference(id.name);
+			let found = false;
+			if (block.variables.has(id.name)) {
+				let alias = id.name;
+				for (
+					let i = 1;
+					block.variables.has(alias) && !compare_node(block.variables.get(alias).init, value);
+					alias = `${id.name}_${i++}`
+				);
+				alias_map.set(alias, id.name);
+				id = { type: 'Identifier', name: alias };
+				found = block.variables.has(alias);
+			}
+			args.push(id);
+			if (!found) {
+				block.add_variable(id, value);
+			}
+		}
+
+		const assign = block.get_unique_name(`assign_${variable.name}`);
+		const unassign = block.get_unique_name(`unassign_${variable.name}`);
+
+		block.chunks.init.push(b`
+			const ${assign} = () => ${callee}(${variable}, ${args});
+			const ${unassign} = () => ${callee}(null, ${args});
+		`);
+
+		const condition = Array.from(args)
+			.map(name => x`${name} !== ${block.renderer.reference(alias_map.get(name.name) || name.name)}`)
+			.reduce((lhs, rhs) => x`${lhs} || ${rhs}`);
+
+		// we push unassign and unshift assign so that references are
+		// nulled out before they're created, to avoid glitches
+		// with shifting indices
+		block.chunks.update.push(b`
+			if (${condition}) {
+				${unassign}();
+				${args.map(a => b`${a} = ${block.renderer.reference(alias_map.get(a.name) || a.name)}`)};
+				${assign}();
+			}`
+		);
+
+		block.chunks.destroy.push(b`${unassign}();`);
+		return b`${assign}();`;
+	}
+
+	component.partly_hoisted.push(b`
+		function ${fn}($$value) {
+			@binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+				${body}
+			});
+		}
+	`);
+
+	block.chunks.destroy.push(b`${callee}(null);`);
+	return b`${callee}(${variable});`;
+}
diff --git a/src/compiler/compile/render_dom/wrappers/shared/create_debugging_comment.ts b/src/compiler/compile/render_dom/wrappers/shared/create_debugging_comment.ts
new file mode 100644
index 0000000000..8e9f7fab37
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/shared/create_debugging_comment.ts
@@ -0,0 +1,40 @@
+import Component from '../../../Component';
+import { INode } from '../../../nodes/interfaces';
+
+export default function create_debugging_comment(
+	node: INode,
+	component: Component
+) {
+	const { locate, source } = component;
+
+	let c = node.start;
+	if (node.type === 'ElseBlock') {
+		while (source[c - 1] !== '{') c -= 1;
+		while (source[c - 1] === '{') c -= 1;
+	}
+
+	let d;
+
+	if (node.type === 'InlineComponent' || node.type === 'Element' || node.type === 'SlotTemplate') {
+		if (node.children.length) {
+			d = node.children[0].start;
+			while (source[d - 1] !== '>') d -= 1;
+		} else {
+			d = node.start;
+			while (source[d] !== '>') d += 1;
+			d += 1;
+		}
+	} else if (node.type === 'Text' || node.type === 'Comment') {
+		d = node.end;
+	} else {
+		// @ts-ignore
+		d = node.expression ? node.expression.node.end : c;
+		while (source[d] !== '}' && d <= source.length) d += 1;
+		while (source[d] === '}') d += 1;
+	}
+
+	const start = locate(c);
+	const loc = `(${start.line}:${start.column})`;
+
+	return `${loc} ${source.slice(c, d)}`.replace(/\s/g, ' ');
+}
diff --git a/src/compiler/compile/render_dom/wrappers/shared/get_slot_definition.ts b/src/compiler/compile/render_dom/wrappers/shared/get_slot_definition.ts
new file mode 100644
index 0000000000..2279c7c845
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/shared/get_slot_definition.ts
@@ -0,0 +1,115 @@
+import Let from '../../../nodes/Let';
+import { x, p } from 'code-red';
+import Block from '../../Block';
+import TemplateScope from '../../../nodes/shared/TemplateScope';
+import { BinaryExpression } from 'estree';
+
+export function get_slot_definition(block: Block, scope: TemplateScope, lets: Let[]) {
+	if (lets.length === 0) return { block, scope };
+
+	const context_input = {
+		type: 'ObjectPattern',
+		properties: lets.map(l => ({
+			type: 'Property',
+			kind: 'init',
+			key: l.name,
+			value: l.value || l.name
+		}))
+	};
+
+	const properties = [];
+	const value_map = new Map();
+
+	lets.forEach(l => {
+		let value;
+		if (l.names.length > 1) {
+			// more than one, probably destructuring
+			const unique_name = block.get_unique_name(l.names.join('_')).name;
+			value_map.set(l.value, unique_name);
+			value = { type: 'Identifier', name: unique_name };
+		} else {
+			value = l.value || l.name;
+		}
+		properties.push({
+			type: 'Property',
+			kind: 'init',
+			key: l.name,
+			value
+		});
+	});
+
+	const changes_input = {
+		type: 'ObjectPattern',
+		properties
+	};
+
+	const names: Set<string> = new Set();
+	const names_lookup: Map<string, string> = new Map();
+
+	lets.forEach(l => {
+		l.names.forEach(name => {
+			names.add(name);
+			if (value_map.has(l.value)) {
+				names_lookup.set(name, value_map.get(l.value));
+			}
+		});
+	});
+
+	const context = {
+		type: 'ObjectExpression',
+		properties: Array.from(names).map(name => p`${block.renderer.context_lookup.get(name).index}: ${name}`)
+	};
+
+	const { context_lookup } = block.renderer;
+
+	// i am well aware that this code is gross
+	// TODO: context-overflow make it less gross
+	const changes = {
+		type: 'ParenthesizedExpression',
+		get expression() {
+			if (block.renderer.context_overflow) {
+				const grouped = [];
+
+				Array.from(names).forEach(name => {
+					const i = context_lookup.get(name).index.value as number;
+					const g = Math.floor(i / 31);
+
+					const lookup_name = names_lookup.has(name) ? names_lookup.get(name) : name;
+
+					if (!grouped[g]) grouped[g] = [];
+					grouped[g].push({ name: lookup_name, n: i % 31 });
+				});
+
+				const elements = [];
+
+				for (let g = 0; g < grouped.length; g += 1) {
+					elements[g] = grouped[g]
+						? grouped[g]
+							.map(({ name, n }) => x`${name} ? ${1 << n} : 0`)
+							.reduce((lhs, rhs) => x`${lhs} | ${rhs}`)
+						: x`0`;
+				}
+
+				return {
+					type: 'ArrayExpression',
+					elements
+				};
+			}
+
+			return Array.from(names)
+				.map(name => {
+					const lookup_name = names_lookup.has(name) ? names_lookup.get(name) : name;
+					const i = context_lookup.get(name).index.value as number;
+					return x`${lookup_name} ? ${1 << i} : 0`;
+				})
+				.reduce((lhs, rhs) => x`${lhs} | ${rhs}`) as BinaryExpression;
+		}
+	};
+
+	return {
+		block,
+		scope,
+		get_context: x`${context_input} => ${context}`,
+		get_changes: x`${changes_input} => ${changes}`
+	};
+}
diff --git a/src/compiler/compile/render_dom/wrappers/shared/is_dynamic.ts b/src/compiler/compile/render_dom/wrappers/shared/is_dynamic.ts
new file mode 100644
index 0000000000..01283943d4
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/shared/is_dynamic.ts
@@ -0,0 +1,12 @@
+import { Var } from '../../../../interfaces';
+import { is_reserved_keyword } from '../../../utils/reserved_keywords';
+
+export default function is_dynamic(variable: Var) {
+	if (variable) {
+		if (variable.mutated || variable.reassigned) return true; // dynamic internal state
+		if (!variable.module && variable.writable && variable.export_name) return true; // writable props
+		if (is_reserved_keyword(variable.name)) return true;
+	}
+
+	return false;
+}
diff --git a/src/compiler/compile/render_dom/wrappers/shared/is_head.ts b/src/compiler/compile/render_dom/wrappers/shared/is_head.ts
new file mode 100644
index 0000000000..36bf571aad
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/shared/is_head.ts
@@ -0,0 +1,3 @@
+export function is_head(node) {
+	return node && node.type === 'MemberExpression' && node.object.name === '@_document' && node.property.name === 'head';
+}
diff --git a/src/compiler/compile/render_dom/wrappers/shared/mark_each_block_bindings.ts b/src/compiler/compile/render_dom/wrappers/shared/mark_each_block_bindings.ts
new file mode 100644
index 0000000000..df7185bb69
--- /dev/null
+++ b/src/compiler/compile/render_dom/wrappers/shared/mark_each_block_bindings.ts
@@ -0,0 +1,34 @@
+import EachBlock from '../../../nodes/EachBlock';
+import InlineComponentWrapper from '../InlineComponent';
+import ElementWrapper from '../Element';
+import Binding from '../../../nodes/Binding';
+
+export default function mark_each_block_bindings(
+	parent: ElementWrapper | InlineComponentWrapper,
+	binding: Binding
+) {
+	// we need to ensure that the each block creates a context including
+	// the list and the index, if they're not otherwise referenced
+	binding.expression.references.forEach(name => {
+		const each_block = parent.node.scope.get_owner(name);
+		if (each_block) {
+			(each_block as EachBlock).has_binding = true;
+		}
+	});
+
+	if (binding.name === 'group') {
+		const add_index_binding = (name: string) => {
+			const each_block = parent.node.scope.get_owner(name);
+			if (each_block.type === 'EachBlock') {
+				each_block.has_index_binding = true;
+				for (const dep of each_block.expression.contextual_dependencies) {
+					add_index_binding(dep);
+				}
+			}
+		};
+		// for `<input bind:group={} >`, we make sure that all the each blocks creates context with `index`
+		for (const name of binding.expression.contextual_dependencies) {
+			add_index_binding(name);
+		}
+	}
+}
diff --git a/src/compiler/compile/render_ssr/Renderer.ts b/src/compiler/compile/render_ssr/Renderer.ts
new file mode 100644
index 0000000000..64e9ee1f4e
--- /dev/null
+++ b/src/compiler/compile/render_ssr/Renderer.ts
@@ -0,0 +1,123 @@
+import AwaitBlock from './handlers/AwaitBlock';
+import Comment from './handlers/Comment';
+import DebugTag from './handlers/DebugTag';
+import EachBlock from './handlers/EachBlock';
+import Element from './handlers/Element';
+import Head from './handlers/Head';
+import HtmlTag from './handlers/HtmlTag';
+import IfBlock from './handlers/IfBlock';
+import InlineComponent from './handlers/InlineComponent';
+import KeyBlock from './handlers/KeyBlock';
+import Slot from './handlers/Slot';
+import SlotTemplate from './handlers/SlotTemplate';
+import Tag from './handlers/Tag';
+import Text from './handlers/Text';
+import Title from './handlers/Title';
+import { AppendTarget, CompileOptions } from '../../interfaces';
+import { INode } from '../nodes/interfaces';
+import { Expression, TemplateLiteral, Identifier } from 'estree';
+import { escape_template } from '../utils/stringify';
+
+type Handler = (node: any, renderer: Renderer, options: CompileOptions) => void;
+
+function noop() {}
+
+const handlers: Record<string, Handler> = {
+	AwaitBlock,
+	Body: noop,
+	Comment,
+	DebugTag,
+	EachBlock,
+	Element,
+	Head,
+	IfBlock,
+	InlineComponent,
+	KeyBlock,
+	MustacheTag: Tag, // TODO MustacheTag is an anachronism
+	Options: noop,
+	RawMustacheTag: HtmlTag,
+	Slot,
+	SlotTemplate,
+	Text,
+	Title,
+	Window: noop
+};
+
+export interface RenderOptions extends CompileOptions{
+	locate: (c: number) => { line: number; column: number };
+	head_id?: string;
+}
+
+export default class Renderer {
+	has_bindings = false;
+
+	name: Identifier;
+
+	stack: Array<{ current: { value: string }; literal: TemplateLiteral }> = [];
+	current: { value: string }; // TODO can it just be `current: string`?
+	literal: TemplateLiteral;
+
+	targets: AppendTarget[] = [];
+
+	constructor({ name }) {
+		this.name = name;
+		this.push();
+	}
+
+	add_string(str: string) {
+		this.current.value += escape_template(str);
+	}
+
+	add_expression(node: Expression) {
+		this.literal.quasis.push({
+			type: 'TemplateElement',
+			value: { raw: this.current.value, cooked: null },
+			tail: false
+		});
+
+		this.literal.expressions.push(node);
+		this.current.value = '';
+	}
+
+	push() {
+		const current = this.current = { value: '' };
+
+		const literal = this.literal = {
+			type: 'TemplateLiteral',
+			expressions: [],
+			quasis: []
+		};
+
+		this.stack.push({ current, literal });
+	}
+
+	pop() {
+		this.literal.quasis.push({
+			type: 'TemplateElement',
+			value: { raw: this.current.value, cooked: null },
+			tail: true
+		});
+
+		const popped = this.stack.pop();
+		const last = this.stack[this.stack.length - 1];
+
+		if (last) {
+			this.literal = last.literal;
+			this.current = last.current;
+		}
+
+		return popped.literal;
+	}
+
+	render(nodes: INode[], options: RenderOptions) {
+		nodes.forEach(node => {
+			const handler = handlers[node.type];
+
+			if (!handler) {
+				throw new Error(`No handler for '${node.type}' nodes`);
+			}
+
+			handler(node, this, options);
+		});
+	}
+}
diff --git a/src/compiler/compile/render_ssr/handlers/AwaitBlock.ts b/src/compiler/compile/render_ssr/handlers/AwaitBlock.ts
new file mode 100644
index 0000000000..eecc8ddf5b
--- /dev/null
+++ b/src/compiler/compile/render_ssr/handlers/AwaitBlock.ts
@@ -0,0 +1,24 @@
+import Renderer, { RenderOptions } from '../Renderer';
+import AwaitBlock from '../../nodes/AwaitBlock';
+import { x } from 'code-red';
+import { get_const_tags } from './shared/get_const_tags';
+
+export default function(node: AwaitBlock, renderer: Renderer, options: RenderOptions) {
+	renderer.push();
+	renderer.render(node.pending.children, options);
+	const pending = renderer.pop();
+
+	renderer.push();
+	renderer.render(node.then.children, options);
+	const then = renderer.pop();
+
+	renderer.add_expression(x`
+		function(__value) {
+			if (@is_promise(__value)) {
+				__value.then(null, @noop);
+				return ${pending};
+			}
+			return (function(${node.then_node ? node.then_node : ''}) { ${get_const_tags(node.then.const_tags)}; return ${then}; }(__value));
+		}(${node.expression.node})
+	`);
+}
diff --git a/src/compiler/compile/render_ssr/handlers/Comment.ts b/src/compiler/compile/render_ssr/handlers/Comment.ts
new file mode 100644
index 0000000000..2460f8b064
--- /dev/null
+++ b/src/compiler/compile/render_ssr/handlers/Comment.ts
@@ -0,0 +1,8 @@
+import Renderer, { RenderOptions } from '../Renderer';
+import Comment from '../../nodes/Comment';
+
+export default function(node: Comment, renderer: Renderer, options: RenderOptions) {
+	if (options.preserveComments) {
+		renderer.add_string(`<!--${node.data}-->`);
+	}
+}
diff --git a/src/compiler/compile/render_ssr/handlers/DebugTag.ts b/src/compiler/compile/render_ssr/handlers/DebugTag.ts
new file mode 100644
index 0000000000..078f0be2bd
--- /dev/null
+++ b/src/compiler/compile/render_ssr/handlers/DebugTag.ts
@@ -0,0 +1,17 @@
+import DebugTag from '../../nodes/DebugTag';
+import Renderer, { RenderOptions } from '../Renderer';
+import { x, p } from 'code-red';
+import { Identifier } from 'estree';
+
+export default function(node: DebugTag, renderer: Renderer, options: RenderOptions) {
+	if (!options.dev) return;
+
+	const filename = options.filename || null;
+	const { line, column } = options.locate(node.start + 1);
+
+	const obj = x`{
+		${node.expressions.map(e => p`${(e.node as Identifier).name}`)}
+	}`;
+
+	renderer.add_expression(x`@debug(${filename ? x`"${filename}"` : x`null`}, ${line - 1}, ${column}, ${obj})`);
+}
diff --git a/src/compiler/compile/render_ssr/handlers/EachBlock.ts b/src/compiler/compile/render_ssr/handlers/EachBlock.ts
new file mode 100644
index 0000000000..2b9149ffef
--- /dev/null
+++ b/src/compiler/compile/render_ssr/handlers/EachBlock.ts
@@ -0,0 +1,27 @@
+import Renderer, { RenderOptions } from '../Renderer';
+import EachBlock from '../../nodes/EachBlock';
+import { x } from 'code-red';
+import { get_const_tags } from './shared/get_const_tags';
+import { Node } from 'estree';
+
+export default function(node: EachBlock, renderer: Renderer, options: RenderOptions) {
+	const args = [node.context_node];
+	if (node.index) args.push({ type: 'Identifier', name: node.index });
+
+	renderer.push();
+	renderer.render(node.children, options);
+	const result = renderer.pop();
+
+	const consequent = x`@each(${node.expression.node}, (${args}) => { ${get_const_tags(node.const_tags)}; return ${result} })`;
+
+	if (node.else) {
+		renderer.push();
+		renderer.render(node.else.children, options);
+		let alternate: Node = renderer.pop();
+		if (node.else.const_tags.length > 0) alternate = x`(() => { ${get_const_tags(node.else.const_tags)}; return ${alternate} })()`;
+
+		renderer.add_expression(x`${node.expression.node}.length ? ${consequent} : ${alternate}`);
+	} else {
+		renderer.add_expression(consequent);
+	}
+}
diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts
new file mode 100644
index 0000000000..7f7672349e
--- /dev/null
+++ b/src/compiler/compile/render_ssr/handlers/Element.ts
@@ -0,0 +1,237 @@
+import { is_void } from '../../../../shared/utils/names';
+import { get_attribute_expression, get_attribute_value, get_class_attribute_value } from './shared/get_attribute_value';
+import { boolean_attributes } from '../../../../shared/boolean_attributes';
+import Renderer, { RenderOptions } from '../Renderer';
+import Element from '../../nodes/Element';
+import { p, x } from 'code-red';
+import Expression from '../../nodes/shared/Expression';
+import remove_whitespace_children from './utils/remove_whitespace_children';
+import fix_attribute_casing from '../../render_dom/wrappers/Element/fix_attribute_casing';
+import { namespaces } from '../../../utils/namespaces';
+import { start_newline } from '../../../utils/patterns';
+import { Node, Expression as ESExpression } from 'estree';
+
+export default function (node: Element, renderer: Renderer, options: RenderOptions) {
+
+	const children = remove_whitespace_children(node.children, node.next);
+
+	// awkward special case
+	let node_contents;
+
+	const contenteditable = (
+		node.name !== 'textarea' &&
+		node.name !== 'input' &&
+		node.attributes.some((attribute) => attribute.name === 'contenteditable')
+	);
+
+	if (node.is_dynamic_element) {
+		renderer.push();
+	}
+
+	renderer.add_string('<');
+	add_tag_name();
+
+	const class_expression_list = node.classes.map(class_directive => {
+		const { expression, name } = class_directive;
+		const snippet = expression ? expression.node : x`#ctx.${name}`; // TODO is this right?
+		return x`${snippet} ? "${name}" : ""`;
+	});
+	if (node.needs_manual_style_scoping) {
+		class_expression_list.push(x`"${node.component.stylesheet.id}"`);
+	}
+	const class_expression =
+		class_expression_list.length > 0 &&
+		class_expression_list.reduce((lhs, rhs) => x`${lhs} + ' ' + ${rhs}`);
+
+	const style_expression_list = node.styles.map(style_directive => {
+		const { name, expression: { node: expression } } = style_directive;
+		return p`"${name}": ${expression}`;
+	});
+
+	const style_expression =
+		style_expression_list.length > 0 &&
+		x`{ ${style_expression_list} }`;
+
+	if (node.attributes.some(attr => attr.is_spread)) {
+		// TODO dry this out
+		const args = [];
+		node.attributes.forEach(attribute => {
+			if (attribute.is_spread) {
+				args.push(x`@escape_object(${attribute.expression.node})`);
+			} else {
+				const attr_name = node.namespace === namespaces.foreign ? attribute.name : fix_attribute_casing(attribute.name);
+				const name = attribute.name.toLowerCase();
+				if (name === 'value' && node.name.toLowerCase() === 'textarea') {
+					node_contents = get_attribute_value(attribute);
+				} else if (attribute.is_true) {
+					args.push(x`{ ${attr_name}: true }`);
+				} else if (
+					boolean_attributes.has(name) &&
+					attribute.chunks.length === 1 &&
+					attribute.chunks[0].type !== 'Text'
+				) {
+					// a boolean attribute with one non-Text chunk
+					args.push(x`{ ${attr_name}: ${(attribute.chunks[0] as Expression).node} || null }`);
+				} else if (attribute.chunks.length === 1 && attribute.chunks[0].type !== 'Text') {
+					const snippet = (attribute.chunks[0] as Expression).node;
+					args.push(x`{ ${attr_name}: @escape_attribute_value(${snippet}) }`);
+				} else {
+					args.push(x`{ ${attr_name}: ${get_attribute_value(attribute)} }`);
+				}
+			}
+		});
+
+		renderer.add_expression(x`@spread([${args}], { classes: ${class_expression}, styles: ${style_expression} })`);
+	} else {
+		let add_class_attribute = !!class_expression;
+		let add_style_attribute = !!style_expression;
+		node.attributes.forEach(attribute => {
+			const name = attribute.name.toLowerCase();
+			const attr_name = node.namespace === namespaces.foreign ? attribute.name : fix_attribute_casing(attribute.name);
+			if (name === 'value' && node.name.toLowerCase() === 'textarea') {
+				node_contents = get_attribute_value(attribute);
+			} else if (attribute.is_true) {
+				renderer.add_string(` ${attr_name}`);
+			} else if (
+				boolean_attributes.has(name) &&
+				attribute.chunks.length === 1 &&
+				attribute.chunks[0].type !== 'Text'
+			) {
+				// a boolean attribute with one non-Text chunk
+				renderer.add_string(' ');
+				renderer.add_expression(x`${(attribute.chunks[0] as Expression).node} ? "${attr_name}" : ""`);
+			} else if (name === 'class' && class_expression) {
+				add_class_attribute = false;
+				renderer.add_string(` ${attr_name}="`);
+				renderer.add_expression(x`[${get_class_attribute_value(attribute)}, ${class_expression}].join(' ').trim()`);
+				renderer.add_string('"');
+			} else if (name === 'style' && style_expression) {
+				add_style_attribute = false;
+				renderer.add_expression(x`@add_styles(@merge_ssr_styles(${get_attribute_value(attribute)}, ${style_expression}))`);
+			} else if (attribute.chunks.length === 1 && attribute.chunks[0].type !== 'Text') {
+				const snippet = (attribute.chunks[0] as Expression).node;
+				renderer.add_expression(x`@add_attribute("${attr_name}", ${snippet}, ${boolean_attributes.has(name) ? 1 : 0})`);
+			} else {
+				renderer.add_string(` ${attr_name}="`);
+				renderer.add_expression((name === 'class' ? get_class_attribute_value : get_attribute_value)(attribute));
+				renderer.add_string('"');
+			}
+		});
+		if (add_class_attribute) {
+			renderer.add_expression(x`@add_classes((${class_expression}).trim())`);
+		}
+		if (add_style_attribute) {
+			renderer.add_expression(x`@add_styles(${style_expression})`);
+		}
+	}
+
+	node.bindings.forEach(binding => {
+		const { name, expression } = binding;
+
+		if (binding.is_readonly) {
+			return;
+		}
+
+		if (name === 'group') {
+			const value_attribute = node.attributes.find(({ name }) => name === 'value');
+			if (value_attribute) {
+				const value = get_attribute_expression(value_attribute);
+				const type = node.get_static_attribute_value('type');
+				const bound = expression.node;
+				const condition = type === 'checkbox' ? x`~${bound}.indexOf(${value})` : x`${value} === ${bound}`;
+				renderer.add_expression(x`${condition} ? @add_attribute("checked", true, 1) : ""`);
+			}
+		} else if (contenteditable && (name === 'textContent' || name === 'innerHTML')) {
+			node_contents = expression.node;
+
+			// TODO where was this used?
+			// value = name === 'textContent' ? x`@escape($$value)` : x`$$value`;
+		} else if (binding.name === 'value' && node.name === 'textarea') {
+			const snippet = expression.node;
+			node_contents = x`${snippet} || ""`;
+		} else if (binding.name === 'value' && node.name === 'select') {
+			// NOTE: do not add "value" attribute on <select />
+		} else {
+			const snippet = expression.node;
+			renderer.add_expression(x`@add_attribute("${name}", ${snippet}, ${boolean_attributes.has(name) ? 1 : 0})`);
+		}
+	});
+
+	if (options.hydratable && options.head_id) {
+		renderer.add_string(` data-svelte="${options.head_id}"`);
+	}
+
+	renderer.add_string('>');
+
+	if (node_contents !== undefined) {
+		if (contenteditable) {
+			renderer.push();
+			renderer.render(children, options);
+			const result = renderer.pop();
+
+			renderer.add_expression(x`($$value => $$value === void 0 ? ${result} : $$value)(${node_contents})`);
+		} else {
+			if (node.name === 'textarea') {
+				// Two or more leading newlines are required to restore the leading newline immediately after `<textarea>`.
+				// see https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions
+				const value_attribute = node.attributes.find(({ name }) => name === 'value');
+				if (value_attribute) {
+					const first = value_attribute.chunks[0];
+					if (first && first.type === 'Text' && start_newline.test(first.data)) {
+						renderer.add_string('\n');
+					}
+				}
+			}
+			renderer.add_expression(node_contents);
+		}
+
+		add_close_tag();
+	} else {
+		if (node.name === 'pre') {
+			// Two or more leading newlines are required to restore the leading newline immediately after `<pre>`.
+			// see https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element
+			// see https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions
+			const first = children[0];
+			if (first && first.type === 'Text' && start_newline.test(first.data)) {
+				renderer.add_string('\n');
+			}
+		}
+		if (node.is_dynamic_element) renderer.push();
+		renderer.render(children, options);
+		if (node.is_dynamic_element) {
+			const children = renderer.pop();
+			renderer.add_expression(x`@is_void(#tag) ? '' : ${children}`);
+		}
+		add_close_tag();
+	}
+
+	if (node.is_dynamic_element) {
+		let content: Node = renderer.pop();
+		if (options.dev && node.children.length > 0) content = x`(() => { @validate_void_dynamic_element(#tag); return ${content}; })()`;
+		renderer.add_expression(x`((#tag) => {
+			${options.dev && x`@validate_dynamic_element(#tag)`}
+			return #tag ? ${content} : '';
+		})(${node.tag_expr.node})`);
+	}
+
+	function add_close_tag() {
+		if (node.tag_expr.node.type === 'Literal') {
+			if (!is_void(node.tag_expr.node.value as string)) {
+				renderer.add_string('</');
+				add_tag_name();
+				renderer.add_string('>');
+			}
+			return;
+		}
+		renderer.add_expression(x`@is_void(#tag) ? '' : \`</\${#tag}>\``);
+	}
+
+	function add_tag_name() {
+		if (node.tag_expr.node.type === 'Literal') {
+			renderer.add_string(node.tag_expr.node.value as string);
+		} else {
+			renderer.add_expression(node.tag_expr.node as ESExpression);
+		}
+	}
+}
+
diff --git a/src/compiler/compile/render_ssr/handlers/Head.ts b/src/compiler/compile/render_ssr/handlers/Head.ts
new file mode 100644
index 0000000000..cf1e6bd555
--- /dev/null
+++ b/src/compiler/compile/render_ssr/handlers/Head.ts
@@ -0,0 +1,16 @@
+import Renderer, { RenderOptions } from '../Renderer';
+import Head from '../../nodes/Head';
+import { x } from 'code-red';
+
+export default function(node: Head, renderer: Renderer, options: RenderOptions) {
+	const head_options = {
+		...options,
+		head_id: node.id
+	};
+
+	renderer.push();
+	renderer.render(node.children, head_options);
+	const result = renderer.pop();
+
+	renderer.add_expression(x`$$result.head += ${result}, ""`);
+}
diff --git a/src/compiler/compile/render_ssr/handlers/HtmlTag.ts b/src/compiler/compile/render_ssr/handlers/HtmlTag.ts
new file mode 100644
index 0000000000..cd62b95981
--- /dev/null
+++ b/src/compiler/compile/render_ssr/handlers/HtmlTag.ts
@@ -0,0 +1,9 @@
+import Renderer, { RenderOptions } from '../Renderer';
+import RawMustacheTag from '../../nodes/RawMustacheTag';
+import { Expression } from 'estree';
+
+export default function(node: RawMustacheTag, renderer: Renderer, options: RenderOptions) {
+	if (options.hydratable) renderer.add_string('<!-- HTML_TAG_START -->');
+	renderer.add_expression(node.expression.node as Expression);
+	if (options.hydratable) renderer.add_string('<!-- HTML_TAG_END -->');
+}
diff --git a/src/compiler/compile/render_ssr/handlers/IfBlock.ts b/src/compiler/compile/render_ssr/handlers/IfBlock.ts
new file mode 100644
index 0000000000..b242775fe6
--- /dev/null
+++ b/src/compiler/compile/render_ssr/handlers/IfBlock.ts
@@ -0,0 +1,21 @@
+import IfBlock from '../../nodes/IfBlock';
+import Renderer, { RenderOptions } from '../Renderer';
+import { x } from 'code-red';
+import { get_const_tags } from './shared/get_const_tags';
+import { Node } from 'estree';
+
+export default function (node: IfBlock, renderer: Renderer, options: RenderOptions) {
+	const condition = node.expression.node;
+
+	renderer.push();
+	renderer.render(node.children, options);
+	let consequent: Node = renderer.pop();
+	if (node.const_tags.length > 0) consequent = x`(() => { ${get_const_tags(node.const_tags)}; return ${consequent} })()`;
+
+	renderer.push();
+	if (node.else) renderer.render(node.else.children, options);
+	let alternate: Node = renderer.pop();
+	if (node.else && node.else.const_tags.length > 0) alternate = x`(() => { ${get_const_tags(node.else.const_tags)}; return ${alternate} })()`;
+
+	renderer.add_expression(x`${condition} ? ${consequent} : ${alternate}`);
+}
diff --git a/src/compiler/compile/render_ssr/handlers/InlineComponent.ts b/src/compiler/compile/render_ssr/handlers/InlineComponent.ts
new file mode 100644
index 0000000000..626365e3e2
--- /dev/null
+++ b/src/compiler/compile/render_ssr/handlers/InlineComponent.ts
@@ -0,0 +1,105 @@
+import { string_literal } from '../../utils/stringify';
+import { get_attribute_value } from './shared/get_attribute_value';
+import Renderer, { RenderOptions } from '../Renderer';
+import InlineComponent from '../../nodes/InlineComponent';
+import { p, x } from 'code-red';
+
+function get_prop_value(attribute) {
+	if (attribute.is_true) return x`true`;
+	if (attribute.chunks.length === 0) return x`''`;
+
+	return attribute.chunks
+		.map(chunk => {
+			if (chunk.type === 'Text') return string_literal(chunk.data);
+			return chunk.node;
+		})
+		.reduce((lhs, rhs) => x`${lhs} + ${rhs}`);
+}
+
+export default function(node: InlineComponent, renderer: Renderer, options: RenderOptions) {
+	const binding_props = [];
+	const binding_fns = [];
+
+	node.bindings.forEach(binding => {
+		renderer.has_bindings = true;
+
+		// TODO this probably won't work for contextual bindings
+		const snippet = binding.expression.node;
+
+		binding_props.push(p`${binding.name}: ${snippet}`);
+		binding_fns.push(p`${binding.name}: $$value => { ${snippet} = $$value; $$settled = false }`);
+	});
+
+	const uses_spread = node.attributes.find(attr => attr.is_spread);
+
+	let props;
+
+	if (uses_spread) {
+		props = x`@_Object.assign(${
+			node.attributes
+				.map(attribute => {
+					if (attribute.is_spread) {
+						return attribute.expression.node;
+					} else {
+						return x`{ ${attribute.name}: ${get_prop_value(attribute)} }`;
+					}
+				})
+				.concat(binding_props.map(p => x`{ ${p} }`))
+		})`;
+	} else {
+		props = x`{
+			${node.attributes.map(attribute => p`${attribute.name}: ${get_prop_value(attribute)}`)},
+			${binding_props}
+		}`;
+	}
+
+	const bindings = x`{
+		${binding_fns}
+	}`;
+
+	const expression = (
+		node.name === 'svelte:self'
+			? renderer.name
+			: node.name === 'svelte:component'
+				? x`(${node.expression.node}) || @missing_component`
+				: node.name.split('.').reduce(((lhs, rhs) => x`${lhs}.${rhs}`) as any)
+	);
+
+	const slot_fns = [];
+
+	const children = node.children;
+
+	if (children.length) {
+		const slot_scopes = new Map();
+
+		renderer.render(children, Object.assign({}, options, {
+			slot_scopes
+		}));
+
+		slot_scopes.forEach(({ input, output, statements }, name) => {
+			slot_fns.push(
+				p`${name}: (${input}) => { ${statements}; return ${output}; }`
+			);
+		});
+	}
+
+	const slots = x`{
+		${slot_fns}
+	}`;
+
+	if (node.css_custom_properties.length > 0) {
+		renderer.add_string('<div style="display: contents;');
+		node.css_custom_properties.forEach(attr => {
+			renderer.add_string(` ${attr.name}:`);
+			renderer.add_expression(get_attribute_value(attr));
+			renderer.add_string(';');
+		});
+		renderer.add_string('">');
+	}
+
+	renderer.add_expression(x`@validate_component(${expression}, "${node.name}").$$render($$result, ${props}, ${bindings}, ${slots})`);
+
+	if (node.css_custom_properties.length > 0) {
+		renderer.add_string('</div>');
+	}
+}
diff --git a/src/compiler/compile/render_ssr/handlers/KeyBlock.ts b/src/compiler/compile/render_ssr/handlers/KeyBlock.ts
new file mode 100644
index 0000000000..33a6681280
--- /dev/null
+++ b/src/compiler/compile/render_ssr/handlers/KeyBlock.ts
@@ -0,0 +1,6 @@
+import KeyBlock from '../../nodes/KeyBlock';
+import Renderer, { RenderOptions } from '../Renderer';
+
+export default function(node: KeyBlock, renderer: Renderer, options: RenderOptions) {
+	renderer.render(node.children, options);
+}
diff --git a/src/compiler/compile/render_ssr/handlers/Slot.ts b/src/compiler/compile/render_ssr/handlers/Slot.ts
new file mode 100644
index 0000000000..f89b619c46
--- /dev/null
+++ b/src/compiler/compile/render_ssr/handlers/Slot.ts
@@ -0,0 +1,40 @@
+import Renderer, { RenderOptions } from '../Renderer';
+import Slot from '../../nodes/Slot';
+import { x } from 'code-red';
+import get_slot_data from '../../utils/get_slot_data';
+import { get_slot_scope } from './shared/get_slot_scope';
+
+export default function(node: Slot, renderer: Renderer, options: RenderOptions & {
+	slot_scopes: Map<any, any>;
+}) {
+	const slot_data = get_slot_data(node.values);
+	const slot = node.get_static_attribute_value('slot');
+	const nearest_inline_component = node.find_nearest(/InlineComponent/);
+
+	if (slot && nearest_inline_component) {
+		renderer.push();
+	}
+
+	renderer.push();
+	renderer.render(node.children, options);
+	const result = renderer.pop();
+
+	renderer.add_expression(x`
+		#slots.${node.slot_name}
+			? #slots.${node.slot_name}(${slot_data})
+			: ${result}
+	`);
+
+	if (slot && nearest_inline_component) {
+		const lets = node.lets;
+		const seen = new Set(lets.map(l => l.name.name));
+
+		nearest_inline_component.lets.forEach(l => {
+			if (!seen.has(l.name.name)) lets.push(l);
+		});
+		options.slot_scopes.set(slot, {
+			input: get_slot_scope(node.lets),
+			output: renderer.pop()
+		});
+	}
+}
diff --git a/src/compiler/compile/render_ssr/handlers/SlotTemplate.ts b/src/compiler/compile/render_ssr/handlers/SlotTemplate.ts
new file mode 100644
index 0000000000..09f3293301
--- /dev/null
+++ b/src/compiler/compile/render_ssr/handlers/SlotTemplate.ts
@@ -0,0 +1,46 @@
+import Renderer, { RenderOptions } from '../Renderer';
+import SlotTemplate from '../../nodes/SlotTemplate';
+import remove_whitespace_children from './utils/remove_whitespace_children';
+import { get_slot_scope } from './shared/get_slot_scope';
+import InlineComponent from '../../nodes/InlineComponent';
+import { get_const_tags } from './shared/get_const_tags';
+
+export default function(node: SlotTemplate, renderer: Renderer, options: RenderOptions & {
+	slot_scopes: Map<any, any>;
+}) {
+	const parent_inline_component = node.parent as InlineComponent;
+	const children = remove_whitespace_children(node instanceof SlotTemplate ? node.children : [node], node.next);
+
+	renderer.push();
+	renderer.render(children, options);
+
+	const lets = node.lets;
+	const seen = new Set(lets.map(l => l.name.name));
+	parent_inline_component.lets.forEach(l => {
+		if (!seen.has(l.name.name)) lets.push(l);
+	});
+
+	const slot_fragment_content = renderer.pop();
+	if (!is_empty_template_literal(slot_fragment_content)) {
+		if (options.slot_scopes.has(node.slot_template_name)) {
+			if (node.slot_template_name === 'default') {
+				throw new Error('Found elements without slot attribute when using slot="default"');
+			}
+			throw new Error(`Duplicate slot name "${node.slot_template_name}" in <${parent_inline_component.name}>`);
+		}
+
+		options.slot_scopes.set(node.slot_template_name, {
+			input: get_slot_scope(node.lets),
+			output: slot_fragment_content,
+			statements: get_const_tags(node.const_tags)
+		});
+	}
+}
+
+function is_empty_template_literal(template_literal) {
+	return (
+		template_literal.expressions.length === 0 &&
+		template_literal.quasis.length === 1 &&
+		template_literal.quasis[0].value.raw === ''
+	);
+}
diff --git a/src/compiler/compile/render_ssr/handlers/Tag.ts b/src/compiler/compile/render_ssr/handlers/Tag.ts
new file mode 100644
index 0000000000..45c0c19089
--- /dev/null
+++ b/src/compiler/compile/render_ssr/handlers/Tag.ts
@@ -0,0 +1,15 @@
+
+import Renderer, { RenderOptions } from '../Renderer';
+import { x } from 'code-red';
+
+export default function(node, renderer: Renderer, _options: RenderOptions) {
+	const snippet = node.expression.node;
+
+	renderer.add_expression(
+		node.parent &&
+		node.parent.type === 'Element' &&
+		node.parent.name === 'style'
+			? snippet
+			: x`@escape(${snippet})`
+	);
+}
diff --git a/src/compiler/compile/render_ssr/handlers/Text.ts b/src/compiler/compile/render_ssr/handlers/Text.ts
new file mode 100644
index 0000000000..b86b79bdb9
--- /dev/null
+++ b/src/compiler/compile/render_ssr/handlers/Text.ts
@@ -0,0 +1,18 @@
+import { escape_html } from '../../utils/stringify';
+import Renderer, { RenderOptions } from '../Renderer';
+import Text from '../../nodes/Text';
+import Element from '../../nodes/Element';
+
+export default function(node: Text, renderer: Renderer, _options: RenderOptions) {
+	let text = node.data;
+	if (
+		!node.parent ||
+		node.parent.type !== 'Element' ||
+		((node.parent as Element).name !== 'script' && (node.parent as Element).name !== 'style')
+	) {
+		// unless this Text node is inside a <script> or <style> element, escape &,<,>
+		text = escape_html(text);
+	}
+
+	renderer.add_string(text);
+}
diff --git a/src/compiler/compile/render_ssr/handlers/Title.ts b/src/compiler/compile/render_ssr/handlers/Title.ts
new file mode 100644
index 0000000000..9fe48dd1f1
--- /dev/null
+++ b/src/compiler/compile/render_ssr/handlers/Title.ts
@@ -0,0 +1,16 @@
+import Renderer, { RenderOptions } from '../Renderer';
+import Title from '../../nodes/Title';
+import { x } from 'code-red';
+
+export default function(node: Title, renderer: Renderer, options: RenderOptions) {
+	renderer.push();
+
+	renderer.add_string('<title>');
+
+	renderer.render(node.children, options);
+
+	renderer.add_string('</title>');
+	const result = renderer.pop();
+
+	renderer.add_expression(x`$$result.title = ${result}, ""`);
+}
diff --git a/src/compiler/compile/render_ssr/handlers/shared/get_attribute_value.ts b/src/compiler/compile/render_ssr/handlers/shared/get_attribute_value.ts
new file mode 100644
index 0000000000..20d4eddbc5
--- /dev/null
+++ b/src/compiler/compile/render_ssr/handlers/shared/get_attribute_value.ts
@@ -0,0 +1,35 @@
+import Attribute from '../../../nodes/Attribute';
+import { string_literal } from '../../../utils/stringify';
+import Text from '../../../nodes/Text';
+import { x } from 'code-red';
+import Expression from '../../../nodes/shared/Expression';
+import { Expression as ESTreeExpression } from 'estree';
+
+export function get_class_attribute_value(attribute: Attribute): ESTreeExpression {
+	// handle special case — `class={possiblyUndefined}` with scoped CSS
+	if (attribute.chunks.length === 2 && (attribute.chunks[1] as Text).synthetic) {
+		const value = (attribute.chunks[0] as Expression).node;
+		return x`@escape(@null_to_empty(${value}), true) + "${(attribute.chunks[1] as Text).data}"`;
+	}
+
+	return get_attribute_value(attribute);
+}
+
+export function get_attribute_value(attribute: Attribute): ESTreeExpression {
+	if (attribute.chunks.length === 0) return x`""`;
+
+	return attribute.chunks
+		.map((chunk) => {
+			return chunk.type === 'Text'
+				? string_literal(chunk.data.replace(/"/g, '&quot;')) as ESTreeExpression
+				: x`@escape(${chunk.node}, true)`;
+		})
+		.reduce((lhs, rhs) => x`${lhs} + ${rhs}`);
+}
+
+export function get_attribute_expression(attribute: Attribute): ESTreeExpression {
+	if (attribute.chunks.length === 1 && attribute.chunks[0].type === 'Expression') {
+		return (attribute.chunks[0] as Expression).node as ESTreeExpression;
+	}
+	return get_attribute_value(attribute);
+}
diff --git a/src/compiler/compile/render_ssr/handlers/shared/get_const_tags.ts b/src/compiler/compile/render_ssr/handlers/shared/get_const_tags.ts
new file mode 100644
index 0000000000..2c156609cd
--- /dev/null
+++ b/src/compiler/compile/render_ssr/handlers/shared/get_const_tags.ts
@@ -0,0 +1,17 @@
+import ConstTag from '../../../nodes/ConstTag';
+
+export function get_const_tags(const_tags: ConstTag[]) {
+  if (const_tags.length === 0) return null;
+  return {
+    type: 'VariableDeclaration',
+    kind: 'let',
+    declarations: const_tags.map(const_tag => {
+      const assignment = const_tag.node.expression;
+      return {
+        type: 'VariableDeclarator',
+        id: assignment.left,
+        init: assignment.right
+      };
+    })
+  };
+}
diff --git a/src/compiler/compile/render_ssr/handlers/shared/get_slot_scope.ts b/src/compiler/compile/render_ssr/handlers/shared/get_slot_scope.ts
new file mode 100644
index 0000000000..1d1a5412a2
--- /dev/null
+++ b/src/compiler/compile/render_ssr/handlers/shared/get_slot_scope.ts
@@ -0,0 +1,21 @@
+import Let from '../../../nodes/Let';
+import { ObjectPattern } from 'estree';
+
+export function get_slot_scope(lets: Let[]): ObjectPattern {
+	if (lets.length === 0) return null;
+
+	return {
+		type: 'ObjectPattern',
+		properties: lets.map(l => {
+			return {
+				type: 'Property',
+				kind: 'init',
+				method: false,
+				shorthand: false,
+				computed: false,
+				key: l.name,
+				value: l.value || l.name
+			};
+		})
+	};
+}
diff --git a/src/compiler/compile/render_ssr/handlers/utils/remove_whitespace_children.ts b/src/compiler/compile/render_ssr/handlers/utils/remove_whitespace_children.ts
new file mode 100644
index 0000000000..7733c89cb8
--- /dev/null
+++ b/src/compiler/compile/render_ssr/handlers/utils/remove_whitespace_children.ts
@@ -0,0 +1,73 @@
+import { INode } from '../../../nodes/interfaces';
+import { trim_end, trim_start } from '../../../../utils/trim';
+import { link } from '../../../../utils/link';
+
+// similar logic from `compile/render_dom/wrappers/Fragment`
+// We want to remove trailing whitespace inside an element/component/block,
+// *unless* there is no whitespace between this node and its next sibling
+export default function remove_whitespace_children(children: INode[], next?: INode): INode[] {
+	const nodes: INode[] = [];
+	let last_child: INode;
+	let i = children.length;
+	while (i--) {
+		const child = children[i];
+
+		if (child.type === 'Text') {
+			if (child.should_skip()) {
+				continue;
+			}
+
+			let { data } = child;
+
+			if (nodes.length === 0) {
+				const should_trim = next
+					? next.type === 'Text' &&
+					  /^\s/.test(next.data) &&
+					  trimmable_at(child, next)
+					: !child.has_ancestor('EachBlock');
+
+				if (should_trim && !child.keep_space()) {
+					data = trim_end(data);
+					if (!data) continue;
+				}
+			}
+
+			// glue text nodes (which could e.g. be separated by comments) together
+			if (last_child && last_child.type === 'Text') {
+				last_child.data = data + last_child.data;
+				continue;
+			}
+
+			nodes.unshift(child);
+			link(last_child, last_child = child);
+		} else {
+			nodes.unshift(child);
+			link(last_child, last_child = child);
+		}
+	}
+
+	const first = nodes[0];
+	if (first && first.type === 'Text' && !first.keep_space()) {
+		first.data = trim_start(first.data);
+		if (!first.data) {
+			first.var = null;
+			nodes.shift();
+
+			if (nodes[0]) {
+				nodes[0].prev = null;
+			}
+		}
+	}
+
+	return nodes;
+}
+
+function trimmable_at(child: INode, next_sibling: INode): boolean {
+	// Whitespace is trimmable if one of the following is true:
+	// The child and its sibling share a common nearest each block (not at an each block boundary)
+	// The next sibling's previous node is an each block
+	return (
+		next_sibling.find_nearest(/EachBlock/) ===
+			child.find_nearest(/EachBlock/) || next_sibling.prev.type === 'EachBlock'
+	);
+}
diff --git a/src/compiler/compile/render_ssr/index.ts b/src/compiler/compile/render_ssr/index.ts
new file mode 100644
index 0000000000..9d2c1cc60b
--- /dev/null
+++ b/src/compiler/compile/render_ssr/index.ts
@@ -0,0 +1,245 @@
+import { b } from 'code-red';
+import Component from '../Component';
+import { CompileOptions, CssResult } from '../../interfaces';
+import { string_literal } from '../utils/stringify';
+import Renderer from './Renderer';
+import { INode as TemplateNode } from '../nodes/interfaces'; // TODO
+import Text from '../nodes/Text';
+import { LabeledStatement, Statement, Node } from 'estree';
+import { extract_names } from 'periscopic';
+import { walk } from 'estree-walker';
+
+import { invalidate } from '../render_dom/invalidate';
+import check_enable_sourcemap from '../utils/check_enable_sourcemap';
+
+export default function ssr(
+	component: Component,
+	options: CompileOptions
+): {js: Node[]; css: CssResult} {
+	const renderer = new Renderer({
+		name: component.name
+	});
+
+	const { name } = component;
+
+	// create $$render function
+	renderer.render(trim(component.fragment.children), Object.assign({
+		locate: component.locate
+	}, options));
+
+	// TODO put this inside the Renderer class
+	const literal = renderer.pop();
+
+	// TODO concatenate CSS maps
+	const css = options.customElement ?
+		{ code: null, map: null } :
+		component.stylesheet.render(options.filename, true);
+
+	const uses_rest = component.var_lookup.has('$$restProps');
+	const props = component.vars.filter(variable => !variable.module && variable.export_name);
+	const rest = uses_rest ? b`let $$restProps = @compute_rest_props($$props, [${props.map(prop => `"${prop.export_name}"`).join(',')}]);` : null;
+
+	const uses_slots = component.var_lookup.has('$$slots');
+	const slots = uses_slots ? b`let $$slots = @compute_slots(#slots);` : null;
+
+	const reactive_stores = component.vars.filter(variable => variable.name[0] === '$' && variable.name[1] !== '$');
+	const reactive_store_subscriptions = reactive_stores
+		.filter(store => {
+			const variable = component.var_lookup.get(store.name.slice(1));
+			return !variable || variable.hoistable;
+		})
+		.map(({ name }) => {
+			const store_name = name.slice(1);
+			return b`
+				${component.compile_options.dev && b`@validate_store(${store_name}, '${store_name}');`}
+				${`$$unsubscribe_${store_name}`} = @subscribe(${store_name}, #value => ${name} = #value)
+			`;
+		});
+	const reactive_store_unsubscriptions = reactive_stores.map(
+		({ name }) => b`${`$$unsubscribe_${name.slice(1)}`}()`
+	);
+
+	const reactive_store_declarations = reactive_stores
+		.map(({ name }) => {
+			const store_name = name.slice(1);
+			const store = component.var_lookup.get(store_name);
+
+			if (store && store.reassigned) {
+				const unsubscribe = `$$unsubscribe_${store_name}`;
+				const subscribe = `$$subscribe_${store_name}`;
+
+				return b`let ${name}, ${unsubscribe} = @noop, ${subscribe} = () => (${unsubscribe}(), ${unsubscribe} = @subscribe(${store_name}, $$value => ${name} = $$value), ${store_name})`;
+			}
+			return b`let ${name}, ${`$$unsubscribe_${store_name}`};`;
+		});
+
+	// instrument get/set store value
+	if (component.ast.instance) {
+		let scope = component.instance_scope;
+		const map = component.instance_scope_map;
+
+		walk(component.ast.instance.content, {
+			enter(node: Node) {
+				if (map.has(node)) {
+					scope = map.get(node);
+				}
+			},
+			leave(node: Node) {
+				if (map.has(node)) {
+					scope = scope.parent;
+				}
+
+				if (node.type === 'AssignmentExpression' || node.type === 'UpdateExpression') {
+					const assignee = node.type === 'AssignmentExpression' ? node.left : node.argument;
+					const names = new Set(extract_names(assignee as Node));
+					const to_invalidate = new Set<string>();
+
+					for (const name of names) {
+						const variable = component.var_lookup.get(name);
+						if (variable &&
+							!variable.hoistable &&
+							!variable.global &&
+							!variable.module &&
+							(
+								variable.subscribable || variable.name[0] === '$'
+							)) {
+								to_invalidate.add(variable.name);
+							}
+					}
+
+					if (to_invalidate.size) {
+						this.replace(
+							invalidate(
+								{ component } as any,
+								scope,
+								node,
+								to_invalidate,
+								true
+							)
+						);
+					}
+				}
+			}
+		});
+	}
+
+	component.rewrite_props(({ name, reassigned }) => {
+		const value = `$${name}`;
+
+		let insert = reassigned
+			? b`${`$$subscribe_${name}`}()`
+			: b`${`$$unsubscribe_${name}`} = @subscribe(${name}, #value => $${value} = #value)`;
+
+		if (component.compile_options.dev) {
+			insert = b`@validate_store(${name}, '${name}'); ${insert}`;
+		}
+
+		return insert;
+	});
+
+	const instance_javascript = component.extract_javascript(component.ast.instance);
+
+	// TODO only do this for props with a default value
+	const parent_bindings = instance_javascript
+		? component.vars
+			.filter(variable => !variable.module && variable.export_name)
+			.map(prop => {
+				return b`if ($$props.${prop.export_name} === void 0 && $$bindings.${prop.export_name} && ${prop.name} !== void 0) $$bindings.${prop.export_name}(${prop.name});`;
+			})
+		: [];
+
+	const injected = Array.from(component.injected_reactive_declaration_vars).filter(name => {
+		const variable = component.var_lookup.get(name);
+		return variable.injected;
+	});
+
+	const reactive_declarations = component.reactive_declarations.map(d => {
+		const body: Statement = (d.node as LabeledStatement).body;
+
+		let statement = b`${body}`;
+
+		if (!d.declaration) { // TODO do not add label if it's not referenced
+			statement = b`$: { ${statement} }`;
+		}
+
+		return statement;
+	});
+
+	const main = renderer.has_bindings
+		? b`
+			let $$settled;
+			let $$rendered;
+
+			do {
+				$$settled = true;
+
+				${reactive_declarations}
+
+				$$rendered = ${literal};
+			} while (!$$settled);
+
+			${reactive_store_unsubscriptions}
+
+			return $$rendered;
+		`
+		: b`
+			${reactive_declarations}
+
+			${reactive_store_unsubscriptions}
+
+			return ${literal};`;
+
+	const blocks = [
+		...injected.map(name => b`let ${name};`),
+		rest,
+		slots,
+		...reactive_store_declarations,
+		...reactive_store_subscriptions,
+		instance_javascript,
+		...parent_bindings,
+		css.code && b`$$result.css.add(#css);`,
+		main
+	].filter(Boolean);
+
+	const css_sourcemap_enabled = check_enable_sourcemap(options.enableSourcemap, 'css');
+
+	const js = b`
+		${css.code ? b`
+		const #css = {
+			code: "${css.code}",
+			map: ${css_sourcemap_enabled && css.map ? string_literal(css.map.toString()) : 'null'}
+		};` : null}
+
+		${component.extract_javascript(component.ast.module)}
+
+		${component.fully_hoisted}
+
+		const ${name} = @create_ssr_component(($$result, $$props, $$bindings, #slots) => {
+			${blocks}
+		});
+	`;
+
+	return {js, css};
+}
+
+function trim(nodes: TemplateNode[]) {
+	let start = 0;
+	for (; start < nodes.length; start += 1) {
+		const node = nodes[start] as Text;
+		if (node.type !== 'Text') break;
+
+		node.data = node.data.replace(/^\s+/, '');
+		if (node.data) break;
+	}
+
+	let end = nodes.length;
+	for (; end > start; end -= 1) {
+		const node = nodes[end - 1] as Text;
+		if (node.type !== 'Text') break;
+
+		node.data = node.data.replace(/\s+$/, '');
+		if (node.data) break;
+	}
+
+	return nodes.slice(start, end);
+}
diff --git a/src/compiler/compile/utils/__test__.ts b/src/compiler/compile/utils/__test__.ts
new file mode 100644
index 0000000000..7777bc6afb
--- /dev/null
+++ b/src/compiler/compile/utils/__test__.ts
@@ -0,0 +1,16 @@
+import * as assert from 'assert';
+import get_name_from_filename from './get_name_from_filename';
+
+describe('get_name_from_filename', () => {
+	it('uses the basename', () => {
+		assert.equal(get_name_from_filename('path/to/Widget.svelte'), 'Widget');
+	});
+
+	it('uses the directory name, if basename is index', () => {
+		assert.equal(get_name_from_filename('path/to/Widget/index.svelte'), 'Widget');
+	});
+
+	it('handles Windows filenames', () => {
+		assert.equal(get_name_from_filename('path\\to\\Widget.svelte'), 'Widget');
+	});
+});
diff --git a/src/compiler/compile/utils/add_to_set.ts b/src/compiler/compile/utils/add_to_set.ts
new file mode 100644
index 0000000000..530a7fe2ca
--- /dev/null
+++ b/src/compiler/compile/utils/add_to_set.ts
@@ -0,0 +1,6 @@
+export default function add_to_set<T>(a: Set<T>, b: Set<T> | T[]) {
+	// @ts-ignore
+	b.forEach(item => {
+		a.add(item);
+	});
+}
diff --git a/src/compiler/compile/utils/check_enable_sourcemap.ts b/src/compiler/compile/utils/check_enable_sourcemap.ts
new file mode 100644
index 0000000000..51f07c353a
--- /dev/null
+++ b/src/compiler/compile/utils/check_enable_sourcemap.ts
@@ -0,0 +1,10 @@
+import { EnableSourcemap } from '../../interfaces';
+
+export default function check_enable_sourcemap(
+  enable_sourcemap: EnableSourcemap,
+  namespace: keyof Extract<EnableSourcemap, object>
+) {
+  return typeof enable_sourcemap === 'boolean'
+    ? enable_sourcemap
+    : enable_sourcemap[namespace];
+}
diff --git a/src/compiler/compile/utils/check_graph_for_cycles.ts b/src/compiler/compile/utils/check_graph_for_cycles.ts
new file mode 100644
index 0000000000..7606e3214d
--- /dev/null
+++ b/src/compiler/compile/utils/check_graph_for_cycles.ts
@@ -0,0 +1,36 @@
+export default function check_graph_for_cycles(edges: Array<[any, any]>): any[] {
+	const graph: Map<any, any[]> = edges.reduce((g, edge) => {
+		const [u, v] = edge;
+		if (!g.has(u)) g.set(u, []);
+		if (!g.has(v)) g.set(v, []);
+		g.get(u).push(v);
+		return g;
+	}, new Map());
+
+	const visited = new Set();
+	const on_stack = new Set();
+	const cycles = [];
+
+	function visit (v) {
+		visited.add(v);
+		on_stack.add(v);
+
+		graph.get(v).forEach(w => {
+			if (!visited.has(w)) {
+				visit(w);
+			} else if (on_stack.has(w)) {
+				cycles.push([...on_stack, w]);
+			}
+		});
+
+		on_stack.delete(v);
+	}
+
+	graph.forEach((_, v) => {
+		if (!visited.has(v)) {
+			visit(v);
+		}
+	});
+
+	return cycles[0];
+}
diff --git a/src/compiler/compile/utils/compare_node.ts b/src/compiler/compile/utils/compare_node.ts
new file mode 100644
index 0000000000..3cd9321ea9
--- /dev/null
+++ b/src/compiler/compile/utils/compare_node.ts
@@ -0,0 +1,19 @@
+import { Node, Literal, Identifier, MemberExpression } from 'estree';
+
+export function compare_node(a: Node | void, b: Node | void) {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	if (a.type !== b.type) return false;
+	switch (a.type) {
+		case 'Identifier':
+			return a.name === (b as Identifier).name;
+		case 'MemberExpression':
+			return (
+				compare_node(a.object, (b as MemberExpression).object) &&
+				compare_node(a.property, (b as MemberExpression).property) &&
+				a.computed === (b as MemberExpression).computed
+			);
+		case 'Literal':
+			return a.value === (b as Literal).value;
+	}
+}
diff --git a/src/compiler/compile/utils/flatten_reference.ts b/src/compiler/compile/utils/flatten_reference.ts
new file mode 100644
index 0000000000..b95536d76f
--- /dev/null
+++ b/src/compiler/compile/utils/flatten_reference.ts
@@ -0,0 +1,39 @@
+import { Node, Identifier } from 'estree';
+
+export default function flatten_reference(node: Node) {
+	const nodes = [];
+	const parts = [];
+	
+	while (node.type === 'MemberExpression') {
+		nodes.unshift(node.property);
+
+		if (!node.computed) {
+			parts.unshift((node.property as Identifier).name);
+		} else {
+			const computed_property = to_string(node.property);
+			if (computed_property) {
+				parts.unshift(`[${computed_property}]`);
+			}
+		}
+		node = node.object;
+	}
+
+	const name = node.type === 'Identifier'
+		? node.name
+		: node.type === 'ThisExpression' ? 'this' : null;
+
+	nodes.unshift(node);
+
+	parts.unshift(name);
+
+	return { name, nodes, parts };
+}
+
+function to_string(node: Node) {
+	switch (node.type) {
+		case 'Literal':
+			return String(node.value);
+		case 'Identifier':
+			return node.name;
+	}
+}
diff --git a/src/compiler/compile/utils/get_name_from_filename.ts b/src/compiler/compile/utils/get_name_from_filename.ts
new file mode 100644
index 0000000000..b05605b5ee
--- /dev/null
+++ b/src/compiler/compile/utils/get_name_from_filename.ts
@@ -0,0 +1,27 @@
+export default function get_name_from_filename(filename: string) {
+	if (!filename) return null;
+
+	const parts = filename.split(/[/\\]/).map(encodeURI);
+
+	if (parts.length > 1) {
+		const index_match = parts[parts.length - 1].match(/^index(\.\w+)/);
+		if (index_match) {
+			parts.pop();
+			parts[parts.length - 1] += index_match[1];
+		}
+	}
+
+	const base = parts.pop()
+		.replace(/%/g, 'u')
+		.replace(/\.[^.]+$/, '')
+		.replace(/[^a-zA-Z_$0-9]+/g, '_')
+		.replace(/^_/, '')
+		.replace(/_$/, '')
+		.replace(/^(\d)/, '_$1');
+
+	if (!base) {
+		throw new Error(`Could not derive component name from file ${filename}`);
+	}
+
+	return base[0].toUpperCase() + base.slice(1);
+}
diff --git a/src/compiler/compile/utils/get_object.ts b/src/compiler/compile/utils/get_object.ts
new file mode 100644
index 0000000000..863bfb0d61
--- /dev/null
+++ b/src/compiler/compile/utils/get_object.ts
@@ -0,0 +1,6 @@
+import { Node, Identifier } from 'estree';
+
+export default function get_object(node: Node): Identifier {
+	while (node.type === 'MemberExpression') node = node.object;
+	return node as Identifier;
+}
diff --git a/src/compiler/compile/utils/get_slot_data.ts b/src/compiler/compile/utils/get_slot_data.ts
new file mode 100644
index 0000000000..8595f89805
--- /dev/null
+++ b/src/compiler/compile/utils/get_slot_data.ts
@@ -0,0 +1,43 @@
+import Attribute from '../nodes/Attribute';
+import { p, x } from 'code-red';
+import { string_literal } from './stringify';
+import Block from '../render_dom/Block';
+
+export default function get_slot_data(values: Map<string, Attribute>, block: Block = null) {
+	return {
+		type: 'ObjectExpression',
+		properties: Array.from(values.values())
+			.filter(attribute => attribute.name !== 'name')
+			.map(attribute => {
+				if (attribute.is_spread) {
+					const argument = get_spread_value(block, attribute);
+					return {
+						type: 'SpreadElement',
+						argument
+					};
+				}
+
+				const value = get_value(block, attribute);
+				return p`${attribute.name}: ${value}`;
+			})
+	};
+}
+
+function get_value(block: Block, attribute: Attribute) {
+	if (attribute.is_true) return x`true`;
+	if (attribute.chunks.length === 0) return x`""`;
+
+	let value = attribute.chunks
+		.map(chunk => chunk.type === 'Text' ? string_literal(chunk.data) : (block ? chunk.manipulate(block) : chunk.node))
+		.reduce((lhs, rhs) => x`${lhs} + ${rhs}`);
+
+	if (attribute.chunks.length > 1 && attribute.chunks[0].type !== 'Text') {
+		value = x`"" + ${value}`;
+	}
+
+	return value;
+}
+
+function get_spread_value(block: Block, attribute: Attribute) {
+	return block ? attribute.expression.manipulate(block) : attribute.expression.node;
+}
diff --git a/src/compiler/compile/utils/hash.ts b/src/compiler/compile/utils/hash.ts
new file mode 100644
index 0000000000..c0ea2b3d88
--- /dev/null
+++ b/src/compiler/compile/utils/hash.ts
@@ -0,0 +1,9 @@
+// https://github.com/darkskyapp/string-hash/blob/master/index.js
+export default function hash(str: string): string {
+	str = str.replace(/\r/g, '');
+	let hash = 5381;
+	let i = str.length;
+
+	while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
+	return (hash >>> 0).toString(36);
+}
diff --git a/src/compiler/compile/utils/is_used_as_reference.ts b/src/compiler/compile/utils/is_used_as_reference.ts
new file mode 100644
index 0000000000..cccb6658e8
--- /dev/null
+++ b/src/compiler/compile/utils/is_used_as_reference.ts
@@ -0,0 +1,34 @@
+import { Node } from 'estree';
+import is_reference, { NodeWithPropertyDefinition } from 'is-reference';
+
+export default function is_used_as_reference(
+	node: Node,
+	parent: Node
+): boolean {
+	if (!is_reference(node as NodeWithPropertyDefinition, parent as NodeWithPropertyDefinition)) {
+		return false;
+	}
+	if (!parent) {
+		return true;
+	}
+
+	/* eslint-disable no-fallthrough */
+	switch (parent.type) {
+		// disregard the `foo` in `const foo = bar`
+		case 'VariableDeclarator':
+			return node !== parent.id;
+		// disregard the `foo`, `bar` in `function foo(bar){}`
+		case 'FunctionDeclaration':
+		// disregard the `foo` in `import { foo } from 'foo'`
+		case 'ImportSpecifier':
+		// disregard the `foo` in `import foo from 'foo'`
+		case 'ImportDefaultSpecifier':
+		// disregard the `foo` in `import * as foo from 'foo'`
+		case 'ImportNamespaceSpecifier':
+		// disregard the `foo` in `export { foo }`
+		case 'ExportSpecifier':
+			return false;
+		default:
+			return true;
+	}
+}
diff --git a/src/compiler/compile/utils/nodes_to_template_literal.ts b/src/compiler/compile/utils/nodes_to_template_literal.ts
new file mode 100644
index 0000000000..46da953261
--- /dev/null
+++ b/src/compiler/compile/utils/nodes_to_template_literal.ts
@@ -0,0 +1,37 @@
+import { TemplateElement, TemplateLiteral } from 'estree';
+import { MustacheTag, Text } from '../../interfaces';
+
+/**
+ * Transforms a list of Text and MustacheTags into a TemplateLiteral expression.
+ * Start/End positions on the elements of the expression are not set.
+ */
+export function nodes_to_template_literal(value: Array<Text | MustacheTag>): TemplateLiteral {
+    const literal: TemplateLiteral  = {
+        type: 'TemplateLiteral',
+        expressions: [],
+        quasis: []
+    };
+
+    let quasi: TemplateElement  = {
+        type: 'TemplateElement',
+        value: { raw: '', cooked: null },
+        tail: false
+    };
+
+    value.forEach((node) => {
+        if (node.type === 'Text') {
+            quasi.value.raw += node.raw;
+        } else if (node.type === 'MustacheTag') {
+            literal.quasis.push(quasi);
+            literal.expressions.push(node.expression as any);
+            quasi = {
+                type: 'TemplateElement',
+                value: { raw: '', cooked: null },
+                tail: false
+            };
+        }
+    });
+    quasi.tail = true;
+    literal.quasis.push(quasi);
+    return literal;
+}
diff --git a/src/compiler/compile/utils/replace_object.ts b/src/compiler/compile/utils/replace_object.ts
new file mode 100644
index 0000000000..2de1dbc24a
--- /dev/null
+++ b/src/compiler/compile/utils/replace_object.ts
@@ -0,0 +1,14 @@
+import { Node } from 'estree';
+
+export default function replace_object(node: Node, replacement: Node) {
+	if (node.type === 'Identifier') return replacement;
+
+	const ancestor = node;
+	let parent;
+	while (node.type === 'MemberExpression') {
+		parent = node;
+		node = node.object;
+	}
+	parent.object = replacement;
+	return ancestor;
+}
diff --git a/src/compiler/compile/utils/reserved_keywords.ts b/src/compiler/compile/utils/reserved_keywords.ts
new file mode 100644
index 0000000000..a68819a493
--- /dev/null
+++ b/src/compiler/compile/utils/reserved_keywords.ts
@@ -0,0 +1,5 @@
+export const reserved_keywords = new Set(['$$props', '$$restProps', '$$slots']);
+
+export function is_reserved_keyword(name) {
+	return reserved_keywords.has(name);
+}
diff --git a/src/compiler/compile/utils/scope.ts b/src/compiler/compile/utils/scope.ts
new file mode 100644
index 0000000000..e103defa4d
--- /dev/null
+++ b/src/compiler/compile/utils/scope.ts
@@ -0,0 +1,8 @@
+import { Node } from 'estree';
+import { analyze, Scope, extract_names, extract_identifiers } from 'periscopic';
+
+export function create_scopes(expression: Node) {
+	return analyze(expression);
+}
+
+export { Scope, extract_names, extract_identifiers };
diff --git a/src/compiler/compile/utils/string_to_member_expression.ts b/src/compiler/compile/utils/string_to_member_expression.ts
new file mode 100644
index 0000000000..783571b035
--- /dev/null
+++ b/src/compiler/compile/utils/string_to_member_expression.ts
@@ -0,0 +1,17 @@
+import { MemberExpression, Identifier } from 'estree';
+
+export function string_to_member_expression(name: string) {
+	const parts = name.split('.');
+	let node: MemberExpression | Identifier = {
+		type: 'Identifier',
+		name: parts[0]
+	};
+	for (let i = 1; i < parts.length; i++) {
+		node = {
+			type: 'MemberExpression',
+			object: node,
+			property: { type: 'Identifier', name: parts[i] }
+		} as MemberExpression;
+	}
+	return node;
+}
diff --git a/src/compiler/compile/utils/stringify.ts b/src/compiler/compile/utils/stringify.ts
new file mode 100644
index 0000000000..aa1c42c512
--- /dev/null
+++ b/src/compiler/compile/utils/stringify.ts
@@ -0,0 +1,28 @@
+export function string_literal(data: string) {
+	return {
+		type: 'Literal',
+		value: data
+	};
+}
+
+export function escape(data: string, { only_escape_at_symbol = false } = {}) {
+	return data.replace(only_escape_at_symbol ? /@+/g : /(@+|#+)/g, (match: string) => {
+		return match + match[0];
+	});
+}
+
+const escaped = {
+	'"': '&quot;',
+	"'": '&#39;',
+	'&': '&amp;',
+	'<': '&lt;',
+	'>': '&gt;'
+};
+
+export function escape_html(html) {
+	return String(html).replace(/["'&<>]/g, match => escaped[match]);
+}
+
+export function escape_template(str) {
+	return str.replace(/(\${|`|\\)/g, '\\$1');
+}
diff --git a/src/compiler/config.ts b/src/compiler/config.ts
new file mode 100644
index 0000000000..e6d0f65a76
--- /dev/null
+++ b/src/compiler/config.ts
@@ -0,0 +1 @@
+export const test = typeof process !== 'undefined' && process.env.TEST;
diff --git a/src/compiler/index.ts b/src/compiler/index.ts
new file mode 100644
index 0000000000..14d55f5470
--- /dev/null
+++ b/src/compiler/index.ts
@@ -0,0 +1,6 @@
+export { default as compile } from './compile/index';
+export { default as parse } from './parse/index';
+export { default as preprocess } from './preprocess/index';
+export { walk } from 'estree-walker';
+
+export const VERSION = '__VERSION__';
diff --git a/src/compiler/interfaces.ts b/src/compiler/interfaces.ts
new file mode 100644
index 0000000000..248175da59
--- /dev/null
+++ b/src/compiler/interfaces.ts
@@ -0,0 +1,230 @@
+import { AssignmentExpression, Node, Program } from 'estree';
+import { SourceMap } from 'magic-string';
+
+interface BaseNode {
+	start: number;
+	end: number;
+	type: string;
+	children?: TemplateNode[];
+	[prop_name: string]: any;
+}
+
+export interface Fragment extends BaseNode {
+	type: 'Fragment';
+	children: TemplateNode[];
+}
+
+export interface Text extends BaseNode {
+	type: 'Text';
+	data: string;
+}
+
+export interface MustacheTag extends BaseNode {
+	type: 'MustacheTag' | 'RawMustacheTag';
+	expression: Node;
+}
+
+export interface Comment extends BaseNode {
+	type: 'Comment';
+	data: string;
+	ignores: string[];
+}
+
+export interface ConstTag extends BaseNode {
+	type: 'ConstTag';
+	expression: AssignmentExpression;
+}
+
+interface DebugTag extends BaseNode {
+	type: 'DebugTag';
+	identifiers: Node[]
+}
+
+export type DirectiveType = 'Action'
+| 'Animation'
+| 'Binding'
+| 'Class'
+| 'StyleDirective'
+| 'EventHandler'
+| 'Let'
+| 'Ref'
+| 'Transition';
+
+interface BaseDirective extends BaseNode {
+	type: DirectiveType;
+	name: string;
+}
+
+interface BaseExpressionDirective extends BaseDirective {
+	type: DirectiveType;
+	expression: null | Node;
+	name: string;
+	modifiers: string[];
+}
+
+export interface Element extends BaseNode {
+	type: 'InlineComponent' | 'SlotTemplate' | 'Title' | 'Slot' | 'Element' | 'Head' | 'Options' | 'Window' | 'Body';
+	attributes: Array<BaseDirective | Attribute | SpreadAttribute>;
+	name: string;
+}
+
+export interface Attribute extends BaseNode {
+	type: 'Attribute';
+	name: string;
+	value: any[];
+}
+
+export interface SpreadAttribute extends BaseNode {
+	type: 'Spread';
+	expression: Node;
+}
+
+export interface Transition extends BaseExpressionDirective {
+	type: 'Transition';
+	intro: boolean;
+	outro: boolean;
+}
+
+export type Directive = BaseDirective | BaseExpressionDirective | Transition;
+
+export type TemplateNode = Text
+| ConstTag
+| DebugTag
+| MustacheTag
+| BaseNode
+| Element
+| Attribute
+| SpreadAttribute
+| Directive
+| Transition
+| Comment;
+
+export interface Parser {
+	readonly template: string;
+	readonly filename?: string;
+
+	index: number;
+	stack: Node[];
+
+	html: Node;
+	css: Node;
+	js: Node;
+	meta_tags: {};
+}
+
+export interface Script extends BaseNode {
+	type: 'Script';
+	context: string;
+	content: Program;
+}
+
+export interface Style extends BaseNode {
+	type: 'Style';
+	attributes: any[]; // TODO
+	children: any[]; // TODO add CSS node types
+	content: {
+		start: number;
+		end: number;
+		styles: string;
+	};
+}
+
+export interface Ast {
+	html: TemplateNode;
+	css?: Style;
+	instance?: Script;
+	module?: Script;
+}
+
+export interface Warning {
+	start?: { line: number; column: number; pos?: number };
+	end?: { line: number; column: number };
+	pos?: number;
+	code: string;
+	message: string;
+	filename?: string;
+	frame?: string;
+	toString: () => string;
+}
+
+export type ModuleFormat = 'esm' | 'cjs';
+
+export type EnableSourcemap = boolean | { js: boolean; css: boolean };
+
+export type CssHashGetter = (args: {
+	name: string;
+	filename: string | undefined;
+	css: string;
+	hash: (input: string) => string;
+}) => string;
+
+export interface CompileOptions {
+	format?: ModuleFormat;
+	name?: string;
+	filename?: string;
+	generate?: 'dom' | 'ssr' | false;
+	errorMode?: 'throw' | 'warn';
+	varsReport?: 'full' | 'strict' | false;
+
+	sourcemap?: object | string;
+	enableSourcemap?: EnableSourcemap;
+	outputFilename?: string;
+	cssOutputFilename?: string;
+	sveltePath?: string;
+
+	dev?: boolean;
+	accessors?: boolean;
+	immutable?: boolean;
+	hydratable?: boolean;
+	legacy?: boolean;
+	customElement?: boolean;
+	tag?: string;
+	css?: boolean;
+	loopGuardTimeout?: number;
+	namespace?: string;
+	cssHash?: CssHashGetter;
+
+	preserveComments?: boolean;
+	preserveWhitespace?: boolean;
+}
+
+export interface ParserOptions {
+	filename?: string;
+	customElement?: boolean;
+}
+
+export interface Visitor {
+	enter: (node: Node) => void;
+	leave?: (node: Node) => void;
+}
+
+export interface AppendTarget {
+	slots: Record<string, string>;
+	slot_stack: string[];
+}
+
+export interface Var {
+	name: string;
+	export_name?: string; // the `bar` in `export { foo as bar }`
+	injected?: boolean;
+	module?: boolean;
+	mutated?: boolean;
+	reassigned?: boolean;
+	referenced?: boolean;  // referenced from template scope
+	referenced_from_script?: boolean;        // referenced from script
+	writable?: boolean;
+
+	// used internally, but not exposed
+	global?: boolean;
+	internal?: boolean; // event handlers, bindings
+	initialised?: boolean;
+	hoistable?: boolean;
+	subscribable?: boolean;
+	is_reactive_dependency?: boolean;
+	imported?: boolean;
+}
+
+export interface CssResult {
+	code: string;
+	map: SourceMap;
+}
diff --git a/src/compiler/parse/acorn.ts b/src/compiler/parse/acorn.ts
new file mode 100644
index 0000000000..bab8de7ce4
--- /dev/null
+++ b/src/compiler/parse/acorn.ts
@@ -0,0 +1,14 @@
+import { Node } from 'acorn';
+import * as code_red from 'code-red';
+
+export const parse = (source: string): Node => code_red.parse(source, {
+	sourceType: 'module',
+	ecmaVersion: 12,
+	locations: true
+});
+
+export const parse_expression_at = (source: string, index: number): Node => code_red.parseExpressionAt(source, index, {
+	sourceType: 'module',
+	ecmaVersion: 12,
+	locations: true
+});
diff --git a/src/compiler/parse/errors.ts b/src/compiler/parse/errors.ts
new file mode 100644
index 0000000000..63bd5b0919
--- /dev/null
+++ b/src/compiler/parse/errors.ts
@@ -0,0 +1,208 @@
+// All parser errors should be listed and accessed from here
+
+import list from '../utils/list';
+
+/**
+ * @internal
+ */
+export default {
+	css_syntax_error: (message) => ({
+		code: 'css-syntax-error',
+		message
+	}),
+	duplicate_attribute: {
+		code: 'duplicate-attribute',
+		message: 'Attributes need to be unique'
+	},
+	duplicate_element: (slug: string, name: string) => ({
+		code: `duplicate-${slug}`,
+		message: `A component can only have one <${name}> tag`
+	}),
+	duplicate_style: {
+		code: 'duplicate-style',
+		message: 'You can only have one top-level <style> tag per component'
+	},
+	empty_attribute_shorthand: {
+		code: 'empty-attribute-shorthand',
+		message: 'Attribute shorthand cannot be empty'
+	},
+	empty_directive_name: (type: string) => ({
+		code: 'empty-directive-name',
+		message: `${type} name cannot be empty`
+	}),
+	empty_global_selector: {
+		code: 'css-syntax-error',
+		message: ':global() must contain a selector'
+	},
+	expected_block_type: {
+		code: 'expected-block-type',
+		message: 'Expected if, each or await'
+	},
+	expected_name: {
+		code: 'expected-name',
+		message: 'Expected name'
+	},
+	invalid_catch_placement_unclosed_block: (block) => ({
+		code: 'invalid-catch-placement',
+		message: `Expected to close ${block} before seeing {:catch} block`
+	}),
+	invalid_catch_placement_without_await: {
+		code: 'invalid-catch-placement',
+		message: 'Cannot have an {:catch} block outside an {#await ...} block'
+	},
+	invalid_component_definition: {
+		code: 'invalid-component-definition',
+		message: 'invalid component definition'
+	},
+	invalid_closing_tag_unopened: (name: string) => ({
+		code: 'invalid-closing-tag',
+		message: `</${name}> attempted to close an element that was not open`
+	}),
+	invalid_closing_tag_autoclosed: (name: string, reason: string) => ({
+		code: 'invalid-closing-tag',
+		message: `</${name}> attempted to close <${name}> that was already automatically closed by <${reason}>`
+	}),
+	invalid_debug_args: {
+		code: 'invalid-debug-args',
+		message:
+			'{@debug ...} arguments must be identifiers, not arbitrary expressions'
+	},
+	invalid_declaration: {
+		code: 'invalid-declaration',
+		message: 'Declaration cannot be empty'
+	},
+	invalid_directive_value: {
+		code: 'invalid-directive-value',
+		message: 'Directive value must be a JavaScript expression enclosed in curly braces'
+	},
+	invalid_elseif: {
+		code: 'invalid-elseif',
+		message: '\'elseif\' should be \'else if\''
+	},
+	invalid_elseif_placement_outside_if: {
+		code: 'invalid-elseif-placement',
+		message: 'Cannot have an {:else if ...} block outside an {#if ...} block'
+	},
+	invalid_elseif_placement_unclosed_block: (block) => ({
+		code: 'invalid-elseif-placement',
+		message: `Expected to close ${block} before seeing {:else if ...} block`
+	}),
+	invalid_else_placement_outside_if: {
+		code: 'invalid-else-placement',
+		message: 'Cannot have an {:else} block outside an {#if ...} or {#each ...} block'
+	},
+	invalid_else_placement_unclosed_block: (block) => ({
+		code: 'invalid-else-placement',
+		message: `Expected to close ${block} before seeing {:else} block`
+	}),
+	invalid_element_content: (slug: string, name: string) => ({
+		code: `invalid-${slug}-content`,
+		message: `<${name}> cannot have children`
+	}),
+	invalid_element_definition: {
+		code: 'invalid-element-definition',
+		message: 'Invalid element definition'
+	},
+	invalid_element_placement: (slug: string, name: string) => ({
+		code: `invalid-${slug}-placement`,
+		message: `<${name}> tags cannot be inside elements or blocks`
+	}),
+	invalid_ref_directive: (name: string) => ({
+		code: 'invalid-ref-directive',
+		message: `The ref directive is no longer supported — use \`bind:this={${name}}\` instead`
+	}),
+	invalid_ref_selector: {
+		code: 'invalid-ref-selector',
+		message: 'ref selectors are no longer supported'
+	},
+	invalid_self_placement: {
+		code: 'invalid-self-placement',
+		message: '<svelte:self> components can only exist inside {#if} blocks, {#each} blocks, or slots passed to components'
+	},
+	invalid_script_instance: {
+		code: 'invalid-script',
+		message: 'A component can only have one instance-level <script> element'
+	},
+	invalid_script_module: {
+		code: 'invalid-script',
+		message: 'A component can only have one <script context="module"> element'
+	},
+	invalid_script_context_attribute: {
+		code: 'invalid-script',
+		message: 'context attribute must be static'
+	},
+	invalid_script_context_value: {
+		code: 'invalid-script',
+		message: 'If the context attribute is supplied, its value must be "module"'
+	},
+	invalid_tag_name: {
+		code: 'invalid-tag-name',
+		message: 'Expected valid tag name'
+	},
+	invalid_tag_name_svelte_element: (tags: string[], match: string) => ({
+		code: 'invalid-tag-name',
+		message: `Valid <svelte:...> tag names are ${list(tags)}${
+			match ? ' (did you mean ' + match + '?)' : ''
+		}`
+	}),
+	invalid_then_placement_unclosed_block: (block) => ({
+		code: 'invalid-then-placement',
+		message: `Expected to close ${block} before seeing {:then} block`
+	}),
+	invalid_then_placement_without_await: {
+		code: 'invalid-then-placement',
+		message: 'Cannot have an {:then} block outside an {#await ...} block'
+	},
+	invalid_void_content: (name: string) => ({
+		code: 'invalid-void-content',
+		message: `<${name}> is a void element and cannot have children, or a closing tag`
+	}),
+	missing_component_definition: {
+		code: 'missing-component-definition',
+		message: '<svelte:component> must have a \'this\' attribute'
+	},
+	missing_attribute_value: {
+		code: 'missing-attribute-value',
+		message: 'Expected value for the attribute'
+	},
+	missing_element_definition: {
+		code: 'missing-element-definition',
+		message: '<svelte:element> must have a \'this\' attribute'
+	},
+	unclosed_script: {
+		code: 'unclosed-script',
+		message: '<script> must have a closing tag'
+	},
+	unclosed_style: {
+		code: 'unclosed-style',
+		message: '<style> must have a closing tag'
+	},
+	unclosed_comment: {
+		code: 'unclosed-comment',
+		message: 'comment was left open, expected -->'
+	},
+	unclosed_attribute_value: (token: string) => ({
+		code: 'unclosed-attribute-value',
+		message: `Expected to close the attribute value with ${token}`
+	}),
+	unexpected_block_close: {
+		code: 'unexpected-block-close',
+		message: 'Unexpected block closing tag'
+	},
+	unexpected_eof: {
+		code: 'unexpected-eof',
+		message: 'Unexpected end of input'
+	},
+	unexpected_eof_token: (token: string) => ({
+		code: 'unexpected-eof',
+		message: `Unexpected ${token}`
+	}),
+	unexpected_token: (token: string) => ({
+		code: 'unexpected-token',
+		message: `Expected ${token}`
+	}),
+	unexpected_token_destructure: {
+		code: 'unexpected-token',
+		message: 'Expected identifier or destructure pattern'
+	}
+};
diff --git a/src/compiler/parse/index.ts b/src/compiler/parse/index.ts
new file mode 100644
index 0000000000..836fb670cf
--- /dev/null
+++ b/src/compiler/parse/index.ts
@@ -0,0 +1,243 @@
+import { isIdentifierStart, isIdentifierChar } from 'acorn';
+import fragment from './state/fragment';
+import { whitespace } from '../utils/patterns';
+import { reserved } from '../utils/names';
+import full_char_code_at from '../utils/full_char_code_at';
+import { TemplateNode, Ast, ParserOptions, Fragment, Style, Script } from '../interfaces';
+import error from '../utils/error';
+import parser_errors from './errors';
+
+type ParserState = (parser: Parser) => (ParserState | void);
+
+interface LastAutoClosedTag {
+	tag: string;
+	reason: string;
+	depth: number;
+}
+
+export class Parser {
+	readonly template: string;
+	readonly filename?: string;
+	readonly customElement: boolean;
+
+	index = 0;
+	stack: TemplateNode[] = [];
+
+	html: Fragment;
+	css: Style[] = [];
+	js: Script[] = [];
+	meta_tags = {};
+	last_auto_closed_tag?: LastAutoClosedTag;
+
+	constructor(template: string, options: ParserOptions) {
+		if (typeof template !== 'string') {
+			throw new TypeError('Template must be a string');
+		}
+
+		this.template = template.replace(/\s+$/, '');
+		this.filename = options.filename;
+		this.customElement = options.customElement;
+
+		this.html = {
+			start: null,
+			end: null,
+			type: 'Fragment',
+			children: []
+		};
+
+		this.stack.push(this.html);
+
+		let state: ParserState = fragment;
+
+		while (this.index < this.template.length) {
+			state = state(this) || fragment;
+		}
+
+		if (this.stack.length > 1) {
+			const current = this.current();
+
+			const type = current.type === 'Element' ? `<${current.name}>` : 'Block';
+			const slug = current.type === 'Element' ? 'element' : 'block';
+
+			this.error({
+				code: `unclosed-${slug}`,
+				message: `${type} was left open`
+			}, current.start);
+		}
+
+		if (state !== fragment) {
+			this.error({
+				code: 'unexpected-eof',
+				message: 'Unexpected end of input'
+			});
+		}
+
+		if (this.html.children.length) {
+			let start = this.html.children[0].start;
+			while (whitespace.test(template[start])) start += 1;
+
+			let end = this.html.children[this.html.children.length - 1].end;
+			while (whitespace.test(template[end - 1])) end -= 1;
+
+			this.html.start = start;
+			this.html.end = end;
+		} else {
+			this.html.start = this.html.end = null;
+		}
+	}
+
+	current() {
+		return this.stack[this.stack.length - 1];
+	}
+
+	acorn_error(err: any) {
+		this.error({
+			code: 'parse-error',
+			message: err.message.replace(/ \(\d+:\d+\)$/, '')
+		}, err.pos);
+	}
+
+	error({ code, message }: { code: string; message: string }, index = this.index) {
+		error(message, {
+			name: 'ParseError',
+			code,
+			source: this.template,
+			start: index,
+			filename: this.filename
+		});
+	}
+
+	eat(str: string, required?: boolean, error?: { code: string, message: string }) {
+		if (this.match(str)) {
+			this.index += str.length;
+			return true;
+		}
+
+		if (required) {
+			this.error(error ||
+				(this.index === this.template.length
+					? parser_errors.unexpected_eof_token(str)
+					: parser_errors.unexpected_token(str))
+			);
+		}
+
+		return false;
+	}
+
+	match(str: string) {
+		return this.template.slice(this.index, this.index + str.length) === str;
+	}
+
+	match_regex(pattern: RegExp) {
+		const match = pattern.exec(this.template.slice(this.index));
+		if (!match || match.index !== 0) return null;
+
+		return match[0];
+	}
+
+	allow_whitespace() {
+		while (
+			this.index < this.template.length &&
+			whitespace.test(this.template[this.index])
+		) {
+			this.index++;
+		}
+	}
+
+	read(pattern: RegExp) {
+		const result = this.match_regex(pattern);
+		if (result) this.index += result.length;
+		return result;
+	}
+
+	read_identifier(allow_reserved = false) {
+		const start = this.index;
+
+		let i = this.index;
+
+		const code = full_char_code_at(this.template, i);
+		if (!isIdentifierStart(code, true)) return null;
+
+		i += code <= 0xffff ? 1 : 2;
+
+		while (i < this.template.length) {
+			const code = full_char_code_at(this.template, i);
+
+			if (!isIdentifierChar(code, true)) break;
+			i += code <= 0xffff ? 1 : 2;
+		}
+
+		const identifier = this.template.slice(this.index, this.index = i);
+
+		if (!allow_reserved && reserved.has(identifier)) {
+			this.error({
+				code: 'unexpected-reserved-word',
+				message: `'${identifier}' is a reserved word in JavaScript and cannot be used here`
+			}, start);
+		}
+
+		return identifier;
+	}
+
+	read_until(pattern: RegExp, error_message?: Parameters<Parser['error']>[0]) {
+		if (this.index >= this.template.length) {
+			this.error(error_message || {
+				code: 'unexpected-eof',
+				message: 'Unexpected end of input'
+			});
+		}
+
+		const start = this.index;
+		const match = pattern.exec(this.template.slice(start));
+
+		if (match) {
+			this.index = start + match.index;
+			return this.template.slice(start, this.index);
+		}
+
+		this.index = this.template.length;
+		return this.template.slice(start);
+	}
+
+	require_whitespace() {
+		if (!whitespace.test(this.template[this.index])) {
+			this.error({
+				code: 'missing-whitespace',
+				message: 'Expected whitespace'
+			});
+		}
+
+		this.allow_whitespace();
+	}
+}
+
+export default function parse(
+	template: string,
+	options: ParserOptions = {}
+): Ast {
+	const parser = new Parser(template, options);
+
+	// TODO we may want to allow multiple <style> tags —
+	// one scoped, one global. for now, only allow one
+	if (parser.css.length > 1) {
+		parser.error(parser_errors.duplicate_style, parser.css[1].start);
+	}
+
+	const instance_scripts = parser.js.filter(script => script.context === 'default');
+	const module_scripts = parser.js.filter(script => script.context === 'module');
+
+	if (instance_scripts.length > 1) {
+		parser.error(parser_errors.invalid_script_instance, instance_scripts[1].start);
+	}
+
+	if (module_scripts.length > 1) {
+		parser.error(parser_errors.invalid_script_module, module_scripts[1].start);
+	}
+
+	return {
+		html: parser.html,
+		css: parser.css[0],
+		instance: instance_scripts[0],
+		module: module_scripts[0]
+	};
+}
diff --git a/src/compiler/parse/read/context.ts b/src/compiler/parse/read/context.ts
new file mode 100644
index 0000000000..1e97baf8a7
--- /dev/null
+++ b/src/compiler/parse/read/context.ts
@@ -0,0 +1,79 @@
+import { Parser } from '../index';
+import { isIdentifierStart } from 'acorn';
+import full_char_code_at from '../../utils/full_char_code_at';
+import {
+	is_bracket_open,
+	is_bracket_close,
+	is_bracket_pair,
+	get_bracket_close
+} from '../utils/bracket';
+import { parse_expression_at } from '../acorn';
+import { Pattern } from 'estree';
+import parser_errors from '../errors';
+
+export default function read_context(
+	parser: Parser
+): Pattern & { start: number; end: number } {
+	const start = parser.index;
+	let i = parser.index;
+
+	const code = full_char_code_at(parser.template, i);
+	if (isIdentifierStart(code, true)) {
+		return {
+			type: 'Identifier',
+			name: parser.read_identifier(),
+			start,
+			end: parser.index
+		};
+	}
+
+	if (!is_bracket_open(code)) {
+		parser.error(parser_errors.unexpected_token_destructure);
+	}
+
+	const bracket_stack = [code];
+	i += code <= 0xffff ? 1 : 2;
+
+	while (i < parser.template.length) {
+		const code = full_char_code_at(parser.template, i);
+		if (is_bracket_open(code)) {
+			bracket_stack.push(code);
+		} else if (is_bracket_close(code)) {
+			if (!is_bracket_pair(bracket_stack[bracket_stack.length - 1], code)) {
+				parser.error(
+					parser_errors.unexpected_token(
+						String.fromCharCode(get_bracket_close(bracket_stack[bracket_stack.length - 1]))
+					)
+				);
+			}
+			bracket_stack.pop();
+			if (bracket_stack.length === 0) {
+				i += code <= 0xffff ? 1 : 2;
+				break;
+			}
+		}
+		i += code <= 0xffff ? 1 : 2;
+	}
+
+	parser.index = i;
+
+	const pattern_string = parser.template.slice(start, i);
+	try {
+		// the length of the `space_with_newline` has to be start - 1
+		// because we added a `(` in front of the pattern_string,
+		// which shifted the entire string to right by 1
+		// so we offset it by removing 1 character in the `space_with_newline`
+		// to achieve that, we remove the 1st space encountered,
+		// so it will not affect the `column` of the node
+		let space_with_newline = parser.template.slice(0, start).replace(/[^\n]/g, ' ');
+		const first_space = space_with_newline.indexOf(' ');
+		space_with_newline = space_with_newline.slice(0, first_space) + space_with_newline.slice(first_space + 1);
+
+		return (parse_expression_at(
+			`${space_with_newline}(${pattern_string} = 1)`,
+			start - 1
+		) as any).left;
+	} catch (error) {
+		parser.acorn_error(error);
+	}
+}
diff --git a/src/compiler/parse/read/expression.ts b/src/compiler/parse/read/expression.ts
new file mode 100644
index 0000000000..5464a950ce
--- /dev/null
+++ b/src/compiler/parse/read/expression.ts
@@ -0,0 +1,36 @@
+import { parse_expression_at } from '../acorn';
+import { Parser } from '../index';
+import { Node } from 'estree';
+import { whitespace } from '../../utils/patterns';
+import parser_errors from '../errors';
+
+export default function read_expression(parser: Parser): Node {
+	try {
+		const node = parse_expression_at(parser.template, parser.index);
+
+		let num_parens = 0;
+
+		for (let i = parser.index; i < node.start; i += 1) {
+			if (parser.template[i] === '(') num_parens += 1;
+		}
+
+		let index = node.end;
+		while (num_parens > 0) {
+			const char = parser.template[index];
+
+			if (char === ')') {
+				num_parens -= 1;
+			} else if (!whitespace.test(char)) {
+				parser.error(parser_errors.unexpected_token(')'), index);
+			}
+
+			index += 1;
+		}
+
+		parser.index = index;
+
+		return node as Node;
+	} catch (err) {
+		parser.acorn_error(err);
+	}
+}
diff --git a/src/compiler/parse/read/script.ts b/src/compiler/parse/read/script.ts
new file mode 100644
index 0000000000..c9ac4ac344
--- /dev/null
+++ b/src/compiler/parse/read/script.ts
@@ -0,0 +1,52 @@
+import * as acorn from '../acorn';
+import { Parser } from '../index';
+import { Script } from '../../interfaces';
+import { Node, Program } from 'estree';
+import parser_errors from '../errors';
+
+function get_context(parser: Parser, attributes: any[], start: number): string {
+	const context = attributes.find(attribute => attribute.name === 'context');
+	if (!context) return 'default';
+
+	if (context.value.length !== 1 || context.value[0].type !== 'Text') {
+		parser.error(parser_errors.invalid_script_context_attribute, start);
+	}
+
+	const value = context.value[0].data;
+
+	if (value !== 'module') {
+		parser.error(parser_errors.invalid_script_context_value, context.start);
+	}
+
+	return value;
+}
+
+export default function read_script(parser: Parser, start: number, attributes: Node[]): Script {
+	const script_start = parser.index;
+	const data = parser.read_until(/<\/script\s*>/, parser_errors.unclosed_script);
+	if (parser.index >= parser.template.length) {
+		parser.error(parser_errors.unclosed_script);
+	}
+
+	const source = parser.template.slice(0, script_start).replace(/[^\n]/g, ' ') + data;
+	parser.read(/<\/script\s*>/);
+
+	let ast: Program;
+
+	try {
+		ast = acorn.parse(source) as any as Program;
+	} catch (err) {
+		parser.acorn_error(err);
+	}
+
+	// TODO is this necessary?
+	(ast as any).start = script_start;
+
+	return {
+		type: 'Script',
+		start,
+		end: parser.index,
+		context: get_context(parser, attributes, start),
+		content: ast
+	};
+}
diff --git a/src/compiler/parse/read/style.ts b/src/compiler/parse/read/style.ts
new file mode 100644
index 0000000000..e4a885a8cc
--- /dev/null
+++ b/src/compiler/parse/read/style.ts
@@ -0,0 +1,95 @@
+import parse from 'css-tree/lib/parser/index.js';
+import { walk } from 'estree-walker';
+import { Parser } from '../index';
+import { Node } from 'estree';
+import { Style } from '../../interfaces';
+import parser_errors from '../errors';
+
+export default function read_style(parser: Parser, start: number, attributes: Node[]): Style {
+	const content_start = parser.index;
+
+	const styles = parser.read_until(/<\/style\s*>/, parser_errors.unclosed_style);
+
+	if (parser.index >= parser.template.length) {
+		parser.error(parser_errors.unclosed_style);
+	}
+
+	const content_end = parser.index;
+
+	let ast;
+
+	try {
+		ast = parse(styles, {
+			positions: true,
+			offset: content_start,
+			onParseError(error) {
+				throw error;
+			}
+		});
+	} catch (err) {
+		if (err.name === 'SyntaxError') {
+			parser.error(parser_errors.css_syntax_error(err.message), err.offset);
+		} else {
+			throw err;
+		}
+	}
+
+	ast = JSON.parse(JSON.stringify(ast));
+
+	// tidy up AST
+	walk(ast, {
+		enter: (node: any) => { // `any` because this isn't an ESTree node
+			// replace `ref:a` nodes
+			if (node.type === 'Selector') {
+				for (let i = 0; i < node.children.length; i += 1) {
+					const a = node.children[i];
+					const b = node.children[i + 1];
+
+					if (is_ref_selector(a, b)) {
+						parser.error(parser_errors.invalid_ref_selector, a.loc.start.offset);
+					}
+				}
+			}
+
+			if (node.type === 'Declaration' && node.value.type === 'Value' && node.value.children.length === 0) {
+				parser.error(parser_errors.invalid_declaration, node.start);
+			}
+
+			if (node.type === 'PseudoClassSelector' && node.name === 'global' && node.children === null) {
+				parser.error(parser_errors.empty_global_selector, node.loc.start.offset);
+			}
+
+			if (node.loc) {
+				node.start = node.loc.start.offset;
+				node.end = node.loc.end.offset;
+				delete node.loc;
+			}
+		}
+	});
+
+	parser.read(/<\/style\s*>/);
+	const end = parser.index;
+
+	return {
+		type: 'Style',
+		start,
+		end,
+		attributes,
+		children: ast.children,
+		content: {
+			start: content_start,
+			end: content_end,
+			styles
+		}
+	};
+}
+
+function is_ref_selector(a: any, b: any) { // TODO add CSS node types
+	if (!b) return false;
+
+	return (
+		a.type === 'TypeSelector' &&
+		a.name === 'ref' &&
+		b.type === 'PseudoClassSelector'
+	);
+}
diff --git a/src/compiler/parse/state/fragment.ts b/src/compiler/parse/state/fragment.ts
new file mode 100644
index 0000000000..41275a1738
--- /dev/null
+++ b/src/compiler/parse/state/fragment.ts
@@ -0,0 +1,16 @@
+import tag from './tag';
+import mustache from './mustache';
+import text from './text';
+import { Parser } from '../index';
+
+export default function fragment(parser: Parser) {
+	if (parser.match('<')) {
+		return tag;
+	}
+
+	if (parser.match('{')) {
+		return mustache;
+	}
+
+	return text;
+}
diff --git a/src/compiler/parse/state/mustache.ts b/src/compiler/parse/state/mustache.ts
new file mode 100644
index 0000000000..da9016a9df
--- /dev/null
+++ b/src/compiler/parse/state/mustache.ts
@@ -0,0 +1,413 @@
+import read_context from '../read/context';
+import read_expression from '../read/expression';
+import { closing_tag_omitted } from '../utils/html';
+import { whitespace } from '../../utils/patterns';
+import { trim_start, trim_end } from '../../utils/trim';
+import { to_string } from '../utils/node';
+import { Parser } from '../index';
+import { TemplateNode } from '../../interfaces';
+import parser_errors from '../errors';
+
+function trim_whitespace(block: TemplateNode, trim_before: boolean, trim_after: boolean) {
+	if (!block.children || block.children.length === 0) return; // AwaitBlock
+
+	const first_child = block.children[0];
+	const last_child = block.children[block.children.length - 1];
+
+	if (first_child.type === 'Text' && trim_before) {
+		first_child.data = trim_start(first_child.data);
+		if (!first_child.data) block.children.shift();
+	}
+
+	if (last_child.type === 'Text' && trim_after) {
+		last_child.data = trim_end(last_child.data);
+		if (!last_child.data) block.children.pop();
+	}
+
+	if (block.else) {
+		trim_whitespace(block.else, trim_before, trim_after);
+	}
+
+	if (first_child.elseif) {
+		trim_whitespace(first_child, trim_before, trim_after);
+	}
+}
+
+export default function mustache(parser: Parser) {
+	const start = parser.index;
+	parser.index += 1;
+
+	parser.allow_whitespace();
+
+	// {/if}, {/each}, {/await} or {/key}
+	if (parser.eat('/')) {
+		let block = parser.current();
+		let expected;
+
+		if (closing_tag_omitted(block.name)) {
+			block.end = start;
+			parser.stack.pop();
+			block = parser.current();
+		}
+
+		if (block.type === 'ElseBlock' || block.type === 'PendingBlock' || block.type === 'ThenBlock' || block.type === 'CatchBlock') {
+			block.end = start;
+			parser.stack.pop();
+			block = parser.current();
+
+			expected = 'await';
+		}
+
+		if (block.type === 'IfBlock') {
+			expected = 'if';
+		} else if (block.type === 'EachBlock') {
+			expected = 'each';
+		} else if (block.type === 'AwaitBlock') {
+			expected = 'await';
+		} else if (block.type === 'KeyBlock') {
+			expected = 'key';
+		} else {
+			parser.error(parser_errors.unexpected_block_close);
+		}
+
+		parser.eat(expected, true);
+		parser.allow_whitespace();
+		parser.eat('}', true);
+
+		while (block.elseif) {
+			block.end = parser.index;
+			parser.stack.pop();
+			block = parser.current();
+
+			if (block.else) {
+				block.else.end = start;
+			}
+		}
+
+		// strip leading/trailing whitespace as necessary
+		const char_before = parser.template[block.start - 1];
+		const char_after = parser.template[parser.index];
+		const trim_before = !char_before || whitespace.test(char_before);
+		const trim_after = !char_after || whitespace.test(char_after);
+
+		trim_whitespace(block, trim_before, trim_after);
+
+		block.end = parser.index;
+		parser.stack.pop();
+	} else if (parser.eat(':else')) {
+		if (parser.eat('if')) {
+			parser.error(parser_errors.invalid_elseif);
+		}
+
+		parser.allow_whitespace();
+
+		// :else if
+		if (parser.eat('if')) {
+			const block = parser.current();
+			if (block.type !== 'IfBlock') {
+				parser.error(
+					parser.stack.some(block => block.type === 'IfBlock') 
+						? parser_errors.invalid_elseif_placement_unclosed_block(to_string(block)) 
+						: parser_errors.invalid_elseif_placement_outside_if
+				);
+			}
+
+			parser.require_whitespace();
+
+			const expression = read_expression(parser);
+
+			parser.allow_whitespace();
+			parser.eat('}', true);
+
+			block.else = {
+				start: parser.index,
+				end: null,
+				type: 'ElseBlock',
+				children: [
+					{
+						start: parser.index,
+						end: null,
+						type: 'IfBlock',
+						elseif: true,
+						expression,
+						children: []
+					}
+				]
+			};
+
+			parser.stack.push(block.else.children[0]);
+		} else {
+			// :else
+			const block = parser.current();
+			if (block.type !== 'IfBlock' && block.type !== 'EachBlock') {
+				parser.error(
+					parser.stack.some(block => block.type === 'IfBlock' || block.type === 'EachBlock') 
+						? parser_errors.invalid_else_placement_unclosed_block(to_string(block)) 
+						: parser_errors.invalid_else_placement_outside_if
+				);
+			}
+
+			parser.allow_whitespace();
+			parser.eat('}', true);
+
+			block.else = {
+				start: parser.index,
+				end: null,
+				type: 'ElseBlock',
+				children: []
+			};
+
+			parser.stack.push(block.else);
+		}
+	} else if (parser.match(':then') || parser.match(':catch')) {
+		const block = parser.current();
+		const is_then = parser.eat(':then') || !parser.eat(':catch');
+
+		if (is_then) {
+			if (block.type !== 'PendingBlock') {
+				parser.error(
+					parser.stack.some(block => block.type === 'PendingBlock')
+						? parser_errors.invalid_then_placement_unclosed_block(to_string(block)) 
+						: parser_errors.invalid_then_placement_without_await 
+				);
+			}
+		} else {
+			if (block.type !== 'ThenBlock' && block.type !== 'PendingBlock') {
+				parser.error(parser.stack.some(block => block.type === 'ThenBlock' || block.type === 'PendingBlock')
+						? parser_errors.invalid_catch_placement_unclosed_block(to_string(block)) 
+						: parser_errors.invalid_catch_placement_without_await 
+				);
+			}
+		}
+
+		block.end = start;
+		parser.stack.pop();
+		const await_block = parser.current();
+
+		if (!parser.eat('}')) {
+			parser.require_whitespace();
+			await_block[is_then ? 'value' : 'error'] = read_context(parser);
+			parser.allow_whitespace();
+			parser.eat('}', true);
+		}
+
+		const new_block: TemplateNode = {
+			start,
+			end: null,
+			type: is_then ? 'ThenBlock' : 'CatchBlock',
+			children: [],
+			skip: false
+		};
+
+		await_block[is_then ? 'then' : 'catch'] = new_block;
+		parser.stack.push(new_block);
+	} else if (parser.eat('#')) {
+		// {#if foo}, {#each foo} or {#await foo}
+		let type;
+
+		if (parser.eat('if')) {
+			type = 'IfBlock';
+		} else if (parser.eat('each')) {
+			type = 'EachBlock';
+		} else if (parser.eat('await')) {
+			type = 'AwaitBlock';
+		} else if (parser.eat('key')) {
+			type = 'KeyBlock';
+		} else {
+			parser.error(parser_errors.expected_block_type);
+		}
+
+		parser.require_whitespace();
+
+		const expression = read_expression(parser);
+
+		const block: TemplateNode = type === 'AwaitBlock' ?
+			{
+				start,
+				end: null,
+				type,
+				expression,
+				value: null,
+				error: null,
+				pending: {
+					start: null,
+					end: null,
+					type: 'PendingBlock',
+					children: [],
+					skip: true
+				},
+				then: {
+					start: null,
+					end: null,
+					type: 'ThenBlock',
+					children: [],
+					skip: true
+				},
+				catch: {
+					start: null,
+					end: null,
+					type: 'CatchBlock',
+					children: [],
+					skip: true
+				}
+			} :
+			{
+				start,
+				end: null,
+				type,
+				expression,
+				children: []
+			};
+
+		parser.allow_whitespace();
+
+		// {#each} blocks must declare a context – {#each list as item}
+		if (type === 'EachBlock') {
+			parser.eat('as', true);
+			parser.require_whitespace();
+
+			block.context = read_context(parser);
+
+			parser.allow_whitespace();
+
+			if (parser.eat(',')) {
+				parser.allow_whitespace();
+				block.index = parser.read_identifier();
+				if (!block.index) parser.error(parser_errors.expected_name);
+
+				parser.allow_whitespace();
+			}
+
+			if (parser.eat('(')) {
+				parser.allow_whitespace();
+
+				block.key = read_expression(parser);
+				parser.allow_whitespace();
+				parser.eat(')', true);
+				parser.allow_whitespace();
+			}
+		}
+
+		const await_block_shorthand = type === 'AwaitBlock' && parser.eat('then');
+		if (await_block_shorthand) {
+			if (parser.match_regex(/\s*}/)) {
+				parser.allow_whitespace();
+			} else {
+				parser.require_whitespace();
+				block.value = read_context(parser);
+				parser.allow_whitespace();
+			}
+		}
+
+		const await_block_catch_shorthand = !await_block_shorthand && type === 'AwaitBlock' && parser.eat('catch');
+		if (await_block_catch_shorthand) {
+			if (parser.match_regex(/\s*}/)) {
+				parser.allow_whitespace();
+			} else {
+				parser.require_whitespace();
+				block.error = read_context(parser);
+				parser.allow_whitespace();
+			}
+		}
+
+		parser.eat('}', true);
+
+		parser.current().children.push(block);
+		parser.stack.push(block);
+
+		if (type === 'AwaitBlock') {
+			let child_block;
+			if (await_block_shorthand) {
+				block.then.skip = false;
+				child_block = block.then;
+			} else if (await_block_catch_shorthand) {
+				block.catch.skip = false;
+				child_block = block.catch;
+			} else {
+				block.pending.skip = false;
+				child_block = block.pending;
+			}
+
+			child_block.start = parser.index;
+			parser.stack.push(child_block);
+		}
+	} else if (parser.eat('@html')) {
+		// {@html content} tag
+		parser.require_whitespace();
+
+		const expression = read_expression(parser);
+
+		parser.allow_whitespace();
+		parser.eat('}', true);
+
+		parser.current().children.push({
+			start,
+			end: parser.index,
+			type: 'RawMustacheTag',
+			expression
+		});
+	} else if (parser.eat('@debug')) {
+		let identifiers;
+
+		// Implies {@debug} which indicates "debug all"
+		if (parser.read(/\s*}/)) {
+			identifiers = [];
+		} else {
+			const expression = read_expression(parser);
+
+			identifiers = expression.type === 'SequenceExpression'
+				? expression.expressions
+				: [expression];
+
+			identifiers.forEach(node => {
+				if (node.type !== 'Identifier') {
+					parser.error(parser_errors.invalid_debug_args, node.start);
+				}
+			});
+
+			parser.allow_whitespace();
+			parser.eat('}', true);
+		}
+
+		parser.current().children.push({
+			start,
+			end: parser.index,
+			type: 'DebugTag',
+			identifiers
+		});
+	} else if (parser.eat('@const')) {
+		// {@const a = b}
+		parser.require_whitespace();
+
+		const expression = read_expression(parser);
+
+		if (!(expression.type === 'AssignmentExpression' && expression.operator === '=')) {
+			parser.error({
+				code: 'invalid-const-args',
+				message: '{@const ...} must be an assignment.'
+			}, start);
+		}
+
+		parser.allow_whitespace();
+		parser.eat('}', true);
+
+		parser.current().children.push({
+			start,
+			end: parser.index,
+			type: 'ConstTag',
+			expression
+		});
+	} else {
+		const expression = read_expression(parser);
+
+		parser.allow_whitespace();
+		parser.eat('}', true);
+
+		parser.current().children.push({
+			start,
+			end: parser.index,
+			type: 'MustacheTag',
+			expression
+		});
+	}
+}
diff --git a/src/compiler/parse/state/tag.ts b/src/compiler/parse/state/tag.ts
new file mode 100644
index 0000000000..efce375b7e
--- /dev/null
+++ b/src/compiler/parse/state/tag.ts
@@ -0,0 +1,551 @@
+import { Directive, DirectiveType, TemplateNode, Text } from '../../interfaces';
+import { extract_svelte_ignore } from '../../utils/extract_svelte_ignore';
+import fuzzymatch from '../../utils/fuzzymatch';
+import { is_void } from '../../../shared/utils/names';
+import parser_errors from '../errors';
+import { Parser } from '../index';
+import read_expression from '../read/expression';
+import read_script from '../read/script';
+import read_style from '../read/style';
+import { closing_tag_omitted, decode_character_references } from '../utils/html';
+
+// eslint-disable-next-line no-useless-escape
+const valid_tag_name = /^\!?[a-zA-Z]{1,}:?[a-zA-Z0-9\-]*/;
+
+const meta_tags = new Map([
+	['svelte:head', 'Head'],
+	['svelte:options', 'Options'],
+	['svelte:window', 'Window'],
+	['svelte:body', 'Body']
+]);
+
+const valid_meta_tags = Array.from(meta_tags.keys()).concat('svelte:self', 'svelte:component', 'svelte:fragment', 'svelte:element');
+
+const specials = new Map([
+	[
+		'script',
+		{
+			read: read_script,
+			property: 'js'
+		}
+	],
+	[
+		'style',
+		{
+			read: read_style,
+			property: 'css'
+		}
+	]
+]);
+
+const SELF = /^svelte:self(?=[\s/>])/;
+const COMPONENT = /^svelte:component(?=[\s/>])/;
+const SLOT = /^svelte:fragment(?=[\s/>])/;
+const ELEMENT = /^svelte:element(?=[\s/>])/;
+
+function parent_is_head(stack) {
+	let i = stack.length;
+	while (i--) {
+		const { type } = stack[i];
+		if (type === 'Head') return true;
+		if (type === 'Element' || type === 'InlineComponent') return false;
+	}
+	return false;
+}
+
+export default function tag(parser: Parser) {
+	const start = parser.index++;
+
+	let parent = parser.current();
+
+	if (parser.eat('!--')) {
+		const data = parser.read_until(/-->/);
+		parser.eat('-->', true, parser_errors.unclosed_comment);
+
+		parser.current().children.push({
+			start,
+			end: parser.index,
+			type: 'Comment',
+			data,
+			ignores: extract_svelte_ignore(data)
+		});
+
+		return;
+	}
+
+	const is_closing_tag = parser.eat('/');
+
+	const name = read_tag_name(parser);
+
+	if (meta_tags.has(name)) {
+		const slug = meta_tags.get(name).toLowerCase();
+		if (is_closing_tag) {
+			if (
+				(name === 'svelte:window' || name === 'svelte:body') &&
+				parser.current().children.length
+			) {
+				parser.error(
+					parser_errors.invalid_element_content(slug, name),
+					parser.current().children[0].start
+				);
+			}
+		} else {
+			if (name in parser.meta_tags) {
+				parser.error(parser_errors.duplicate_element(slug, name), start);
+			}
+
+			if (parser.stack.length > 1) {
+				parser.error(parser_errors.invalid_element_placement(slug, name), start);
+			}
+
+			parser.meta_tags[name] = true;
+		}
+	}
+
+	const type = meta_tags.has(name)
+		? meta_tags.get(name)
+		: (/[A-Z]/.test(name[0]) || name === 'svelte:self' || name === 'svelte:component') ? 'InlineComponent'
+			: name === 'svelte:fragment' ? 'SlotTemplate'
+				: name === 'title' && parent_is_head(parser.stack) ? 'Title'
+					: name === 'slot' && !parser.customElement ? 'Slot' : 'Element';
+
+	const element: TemplateNode = {
+		start,
+		end: null, // filled in later
+		type,
+		name,
+		attributes: [],
+		children: []
+	};
+
+	parser.allow_whitespace();
+
+	if (is_closing_tag) {
+		if (is_void(name)) {
+			parser.error(parser_errors.invalid_void_content(name), start);
+		}
+
+		parser.eat('>', true);
+
+		// close any elements that don't have their own closing tags, e.g. <div><p></div>
+		while (parent.name !== name) {
+			if (parent.type !== 'Element') {
+				const error = parser.last_auto_closed_tag && parser.last_auto_closed_tag.tag === name
+					? parser_errors.invalid_closing_tag_autoclosed(name, parser.last_auto_closed_tag.reason)
+					: parser_errors.invalid_closing_tag_unopened(name);
+				parser.error(error, start);
+			}
+
+			parent.end = start;
+			parser.stack.pop();
+
+			parent = parser.current();
+		}
+
+		parent.end = parser.index;
+		parser.stack.pop();
+
+		if (parser.last_auto_closed_tag && parser.stack.length < parser.last_auto_closed_tag.depth) {
+			parser.last_auto_closed_tag = null;
+		}
+
+		return;
+	} else if (closing_tag_omitted(parent.name, name)) {
+		parent.end = start;
+		parser.stack.pop();
+		parser.last_auto_closed_tag = {
+			tag: parent.name,
+			reason: name,
+			depth: parser.stack.length
+		};
+	}
+
+	const unique_names: Set<string> = new Set();
+
+	let attribute;
+	while ((attribute = read_attribute(parser, unique_names))) {
+		element.attributes.push(attribute);
+		parser.allow_whitespace();
+	}
+
+	if (name === 'svelte:component') {
+		const index = element.attributes.findIndex(attr => attr.type === 'Attribute' && attr.name === 'this');
+		if (index === -1) {
+			parser.error(parser_errors.missing_component_definition, start);
+		}
+
+		const definition = element.attributes.splice(index, 1)[0];
+		if (definition.value === true || definition.value.length !== 1 || definition.value[0].type === 'Text') {
+			parser.error(parser_errors.invalid_component_definition, definition.start);
+		}
+
+		element.expression = definition.value[0].expression;
+	}
+
+	if (name === 'svelte:element') {
+		const index = element.attributes.findIndex(attr => attr.type === 'Attribute' && attr.name === 'this');
+		if (index === -1) {
+			parser.error(parser_errors.missing_element_definition, start);
+		}
+
+		const definition = element.attributes.splice(index, 1)[0];
+		if (definition.value === true) {
+			parser.error(parser_errors.invalid_element_definition, definition.start);
+		}
+		element.tag = definition.value[0].data || definition.value[0].expression;
+	}
+
+	// special cases – top-level <script> and <style>
+	if (specials.has(name) && parser.stack.length === 1) {
+		const special = specials.get(name);
+
+		parser.eat('>', true);
+		const content = special.read(parser, start, element.attributes);
+		if (content) parser[special.property].push(content);
+		return;
+	}
+
+	parser.current().children.push(element);
+
+	const self_closing = parser.eat('/') || is_void(name);
+
+	parser.eat('>', true);
+
+	if (self_closing) {
+		// don't push self-closing elements onto the stack
+		element.end = parser.index;
+	} else if (name === 'textarea') {
+		// special case
+		element.children = read_sequence(
+			parser,
+			() =>
+				/^<\/textarea(\s[^>]*)?>/i.test(parser.template.slice(parser.index))
+		);
+		parser.read(/^<\/textarea(\s[^>]*)?>/i);
+		element.end = parser.index;
+	} else if (name === 'script' || name === 'style') {
+		// special case
+		const start = parser.index;
+		const data = parser.read_until(new RegExp(`</${name}>`));
+		const end = parser.index;
+		element.children.push({ start, end, type: 'Text', data });
+		parser.eat(`</${name}>`, true);
+		element.end = parser.index;
+	} else {
+		parser.stack.push(element);
+	}
+}
+
+function read_tag_name(parser: Parser) {
+	const start = parser.index;
+
+	if (parser.read(SELF)) {
+		// check we're inside a block, otherwise this
+		// will cause infinite recursion
+		let i = parser.stack.length;
+		let legal = false;
+
+		while (i--) {
+			const fragment = parser.stack[i];
+			if (fragment.type === 'IfBlock' || fragment.type === 'EachBlock' || fragment.type === 'InlineComponent') {
+				legal = true;
+				break;
+			}
+		}
+
+		if (!legal) {
+			parser.error(parser_errors.invalid_self_placement, start);
+		}
+
+		return 'svelte:self';
+	}
+
+	if (parser.read(COMPONENT)) return 'svelte:component';
+	if (parser.read(ELEMENT)) return 'svelte:element';
+
+	if (parser.read(SLOT)) return 'svelte:fragment';
+
+	const name = parser.read_until(/(\s|\/|>)/);
+
+	if (meta_tags.has(name)) return name;
+
+	if (name.startsWith('svelte:')) {
+		const match = fuzzymatch(name.slice(7), valid_meta_tags);
+
+		parser.error(
+			parser_errors.invalid_tag_name_svelte_element(valid_meta_tags, match),
+			start
+		);
+	}
+
+	if (!valid_tag_name.test(name)) {
+		parser.error(parser_errors.invalid_tag_name, start);
+	}
+
+	return name;
+}
+
+function read_attribute(parser: Parser, unique_names: Set<string>) {
+	const start = parser.index;
+
+	function check_unique(name: string) {
+		if (unique_names.has(name)) {
+			parser.error(parser_errors.duplicate_attribute, start);
+		}
+		unique_names.add(name);
+	}
+
+	if (parser.eat('{')) {
+		parser.allow_whitespace();
+
+		if (parser.eat('...')) {
+			const expression = read_expression(parser);
+
+			parser.allow_whitespace();
+			parser.eat('}', true);
+
+			return {
+				start,
+				end: parser.index,
+				type: 'Spread',
+				expression
+			};
+		} else {
+			const value_start = parser.index;
+
+			const name = parser.read_identifier();
+			parser.allow_whitespace();
+			parser.eat('}', true);
+
+			if (name === null) {
+				parser.error(parser_errors.empty_attribute_shorthand, start);
+			}
+
+			check_unique(name);
+
+			return {
+				start,
+				end: parser.index,
+				type: 'Attribute',
+				name,
+				value: [{
+					start: value_start,
+					end: value_start + name.length,
+					type: 'AttributeShorthand',
+					expression: {
+						start: value_start,
+						end: value_start + name.length,
+						type: 'Identifier',
+						name
+					}
+				}]
+			};
+		}
+	}
+
+	// eslint-disable-next-line no-useless-escape
+	const name = parser.read_until(/[\s=\/>"']/);
+	if (!name) return null;
+
+	let end = parser.index;
+
+	parser.allow_whitespace();
+
+	const colon_index = name.indexOf(':');
+	const type = colon_index !== -1 && get_directive_type(name.slice(0, colon_index));
+
+	let value: any[] | true = true;
+	if (parser.eat('=')) {
+		parser.allow_whitespace();
+		value = read_attribute_value(parser);
+		end = parser.index;
+	} else if (parser.match_regex(/["']/)) {
+		parser.error(parser_errors.unexpected_token('='), parser.index);
+	}
+
+	if (type) {
+		const [directive_name, ...modifiers] = name.slice(colon_index + 1).split('|');
+
+		if (directive_name === '') {
+			parser.error(parser_errors.empty_directive_name(type), start + colon_index + 1);
+		}
+
+		if (type === 'Binding' && directive_name !== 'this') {
+			check_unique(directive_name);
+		} else if (type !== 'EventHandler' && type !== 'Action') {
+			check_unique(name);
+		}
+
+		if (type === 'Ref') {
+			parser.error(parser_errors.invalid_ref_directive(directive_name), start);
+		}
+
+		if (type === 'StyleDirective') {
+			return {
+				start,
+				end,
+				type,
+				name: directive_name,
+				value
+			};
+		}
+
+		const first_value = value[0];
+		let expression = null;
+
+		if (first_value) {
+			const attribute_contains_text = (value as any[]).length > 1 || first_value.type === 'Text';
+			if (attribute_contains_text) {
+				parser.error(parser_errors.invalid_directive_value, first_value.start);
+			} else {
+				expression = first_value.expression;
+			}
+		}
+
+		const directive: Directive = {
+			start,
+			end,
+			type,
+			name: directive_name,
+			modifiers,
+			expression
+		};
+
+		if (type === 'Transition') {
+			const direction = name.slice(0, colon_index);
+			directive.intro = direction === 'in' || direction === 'transition';
+			directive.outro = direction === 'out' || direction === 'transition';
+		}
+
+		// Directive name is expression, e.g. <p class:isRed />
+		if (!directive.expression && (type === 'Binding' || type === 'Class')) {
+			directive.expression = {
+				start: directive.start + colon_index + 1,
+				end: directive.end,
+				type: 'Identifier',
+				name: directive.name
+			} as any;
+		}
+
+		return directive;
+	}
+
+	check_unique(name);
+
+	return {
+		start,
+		end,
+		type: 'Attribute',
+		name,
+		value
+	};
+}
+
+function get_directive_type(name: string): DirectiveType {
+	if (name === 'use') return 'Action';
+	if (name === 'animate') return 'Animation';
+	if (name === 'bind') return 'Binding';
+	if (name === 'class') return 'Class';
+	if (name === 'style') return 'StyleDirective';
+	if (name === 'on') return 'EventHandler';
+	if (name === 'let') return 'Let';
+	if (name === 'ref') return 'Ref';
+	if (name === 'in' || name === 'out' || name === 'transition') return 'Transition';
+}
+
+function read_attribute_value(parser: Parser) {
+	const quote_mark = parser.eat("'") ? "'" : parser.eat('"') ? '"' : null;
+	if (quote_mark && parser.eat(quote_mark)) {
+		return [{
+			start: parser.index - 1,
+			end: parser.index - 1,
+			type: 'Text',
+			raw: '',
+			data: ''
+		}];
+	}
+
+	const regex = (
+		quote_mark === "'" ? /'/ :
+			quote_mark === '"' ? /"/ :
+				/(\/>|[\s"'=<>`])/
+	);
+
+	let value;
+	try {
+		value = read_sequence(parser, () => !!parser.match_regex(regex));
+	} catch (error) {
+		if (error.code === 'parse-error') {
+			// if the attribute value didn't close + self-closing tag
+			// eg: `<Component test={{a:1} />`
+			// acorn may throw a `Unterminated regular expression` because of `/>`
+			if (parser.template.slice(error.pos - 1, error.pos + 1) === '/>') {
+				parser.index = error.pos;
+				parser.error(parser_errors.unclosed_attribute_value(quote_mark || '}'));
+			}
+		}
+		throw error;
+	}
+
+	if (value.length === 0 && !quote_mark) {
+		parser.error(parser_errors.missing_attribute_value);
+	}
+
+	if (quote_mark) parser.index += 1;
+	return value;
+}
+
+function read_sequence(parser: Parser, done: () => boolean): TemplateNode[] {
+	let current_chunk: Text = {
+		start: parser.index,
+		end: null,
+		type: 'Text',
+		raw: '',
+		data: null
+	};
+
+	const chunks: TemplateNode[] = [];
+
+	function flush(end: number) {
+		if (current_chunk.raw) {
+			current_chunk.data = decode_character_references(current_chunk.raw);
+			current_chunk.end = end;
+			chunks.push(current_chunk);
+		}
+	}
+
+	while (parser.index < parser.template.length) {
+		const index = parser.index;
+
+		if (done()) {
+			flush(parser.index);
+			return chunks;
+		} else if (parser.eat('{')) {
+			flush(parser.index - 1);
+
+			parser.allow_whitespace();
+			const expression = read_expression(parser);
+			parser.allow_whitespace();
+			parser.eat('}', true);
+
+			chunks.push({
+				start: index,
+				end: parser.index,
+				type: 'MustacheTag',
+				expression
+			});
+
+			current_chunk = {
+				start: parser.index,
+				end: null,
+				type: 'Text',
+				raw: '',
+				data: null
+			};
+		} else {
+			current_chunk.raw += parser.template[parser.index++];
+		}
+	}
+
+	parser.error(parser_errors.unexpected_eof);
+}
diff --git a/src/compiler/parse/state/text.ts b/src/compiler/parse/state/text.ts
new file mode 100644
index 0000000000..a2275c9653
--- /dev/null
+++ b/src/compiler/parse/state/text.ts
@@ -0,0 +1,26 @@
+import { decode_character_references } from '../utils/html';
+import { Parser } from '../index';
+
+export default function text(parser: Parser) {
+	const start = parser.index;
+
+	let data = '';
+
+	while (
+		parser.index < parser.template.length &&
+		!parser.match('<') &&
+		!parser.match('{')
+	) {
+		data += parser.template[parser.index++];
+	}
+
+	const node = {
+		start,
+		end: parser.index,
+		type: 'Text',
+		raw: data,
+		data: decode_character_references(data)
+	};
+
+	parser.current().children.push(node);
+}
diff --git a/src/compiler/parse/utils/bracket.ts b/src/compiler/parse/utils/bracket.ts
new file mode 100644
index 0000000000..30e522c305
--- /dev/null
+++ b/src/compiler/parse/utils/bracket.ts
@@ -0,0 +1,28 @@
+const SQUARE_BRACKET_OPEN = '['.charCodeAt(0);
+const SQUARE_BRACKET_CLOSE = ']'.charCodeAt(0);
+const CURLY_BRACKET_OPEN = '{'.charCodeAt(0);
+const CURLY_BRACKET_CLOSE = '}'.charCodeAt(0);
+
+export function is_bracket_open(code) {
+	return code === SQUARE_BRACKET_OPEN || code === CURLY_BRACKET_OPEN;
+}
+
+export function is_bracket_close(code) {
+	return code === SQUARE_BRACKET_CLOSE || code === CURLY_BRACKET_CLOSE;
+}
+
+export function is_bracket_pair(open, close) {
+	return (
+		(open === SQUARE_BRACKET_OPEN && close === SQUARE_BRACKET_CLOSE) ||
+		(open === CURLY_BRACKET_OPEN && close === CURLY_BRACKET_CLOSE)
+	);
+}
+
+export function get_bracket_close(open) {
+	if (open === SQUARE_BRACKET_OPEN) {
+		return SQUARE_BRACKET_CLOSE;
+	}
+	if (open === CURLY_BRACKET_OPEN) {
+		return CURLY_BRACKET_CLOSE;
+	}
+}
diff --git a/src/compiler/parse/utils/entities.ts b/src/compiler/parse/utils/entities.ts
new file mode 100644
index 0000000000..7b43ced2c1
--- /dev/null
+++ b/src/compiler/parse/utils/entities.ts
@@ -0,0 +1,2034 @@
+// https://dev.w3.org/html5/html-author/charref
+export default {
+	CounterClockwiseContourIntegral: 8755,
+	ClockwiseContourIntegral: 8754,
+	DoubleLongLeftRightArrow: 10234,
+	DiacriticalDoubleAcute: 733,
+	NotSquareSupersetEqual: 8931,
+	CloseCurlyDoubleQuote: 8221,
+	DoubleContourIntegral: 8751,
+	FilledVerySmallSquare: 9642,
+	NegativeVeryThinSpace: 8203,
+	NotPrecedesSlantEqual: 8928,
+	NotRightTriangleEqual: 8941,
+	NotSucceedsSlantEqual: 8929,
+	CapitalDifferentialD: 8517,
+	DoubleLeftRightArrow: 8660,
+	DoubleLongRightArrow: 10233,
+	EmptyVerySmallSquare: 9643,
+	NestedGreaterGreater: 8811,
+	NotDoubleVerticalBar: 8742,
+	NotLeftTriangleEqual: 8940,
+	NotSquareSubsetEqual: 8930,
+	OpenCurlyDoubleQuote: 8220,
+	ReverseUpEquilibrium: 10607,
+	DoubleLongLeftArrow: 10232,
+	DownLeftRightVector: 10576,
+	LeftArrowRightArrow: 8646,
+	NegativeMediumSpace: 8203,
+	RightArrowLeftArrow: 8644,
+	SquareSupersetEqual: 8850,
+	leftrightsquigarrow: 8621,
+	DownRightTeeVector: 10591,
+	DownRightVectorBar: 10583,
+	LongLeftRightArrow: 10231,
+	Longleftrightarrow: 10234,
+	NegativeThickSpace: 8203,
+	PrecedesSlantEqual: 8828,
+	ReverseEquilibrium: 8651,
+	RightDoubleBracket: 10215,
+	RightDownTeeVector: 10589,
+	RightDownVectorBar: 10581,
+	RightTriangleEqual: 8885,
+	SquareIntersection: 8851,
+	SucceedsSlantEqual: 8829,
+	blacktriangleright: 9656,
+	longleftrightarrow: 10231,
+	DoubleUpDownArrow: 8661,
+	DoubleVerticalBar: 8741,
+	DownLeftTeeVector: 10590,
+	DownLeftVectorBar: 10582,
+	FilledSmallSquare: 9724,
+	GreaterSlantEqual: 10878,
+	LeftDoubleBracket: 10214,
+	LeftDownTeeVector: 10593,
+	LeftDownVectorBar: 10585,
+	LeftTriangleEqual: 8884,
+	NegativeThinSpace: 8203,
+	NotReverseElement: 8716,
+	NotTildeFullEqual: 8775,
+	RightAngleBracket: 10217,
+	RightUpDownVector: 10575,
+	SquareSubsetEqual: 8849,
+	VerticalSeparator: 10072,
+	blacktriangledown: 9662,
+	blacktriangleleft: 9666,
+	leftrightharpoons: 8651,
+	rightleftharpoons: 8652,
+	twoheadrightarrow: 8608,
+	DiacriticalAcute: 180,
+	DiacriticalGrave: 96,
+	DiacriticalTilde: 732,
+	DoubleRightArrow: 8658,
+	DownArrowUpArrow: 8693,
+	EmptySmallSquare: 9723,
+	GreaterEqualLess: 8923,
+	GreaterFullEqual: 8807,
+	LeftAngleBracket: 10216,
+	LeftUpDownVector: 10577,
+	LessEqualGreater: 8922,
+	NonBreakingSpace: 160,
+	NotRightTriangle: 8939,
+	NotSupersetEqual: 8841,
+	RightTriangleBar: 10704,
+	RightUpTeeVector: 10588,
+	RightUpVectorBar: 10580,
+	UnderParenthesis: 9181,
+	UpArrowDownArrow: 8645,
+	circlearrowright: 8635,
+	downharpoonright: 8642,
+	ntrianglerighteq: 8941,
+	rightharpoondown: 8641,
+	rightrightarrows: 8649,
+	twoheadleftarrow: 8606,
+	vartriangleright: 8883,
+	CloseCurlyQuote: 8217,
+	ContourIntegral: 8750,
+	DoubleDownArrow: 8659,
+	DoubleLeftArrow: 8656,
+	DownRightVector: 8641,
+	LeftRightVector: 10574,
+	LeftTriangleBar: 10703,
+	LeftUpTeeVector: 10592,
+	LeftUpVectorBar: 10584,
+	LowerRightArrow: 8600,
+	NotGreaterEqual: 8817,
+	NotGreaterTilde: 8821,
+	NotLeftTriangle: 8938,
+	OverParenthesis: 9180,
+	RightDownVector: 8642,
+	ShortRightArrow: 8594,
+	UpperRightArrow: 8599,
+	bigtriangledown: 9661,
+	circlearrowleft: 8634,
+	curvearrowright: 8631,
+	downharpoonleft: 8643,
+	leftharpoondown: 8637,
+	leftrightarrows: 8646,
+	nLeftrightarrow: 8654,
+	nleftrightarrow: 8622,
+	ntrianglelefteq: 8940,
+	rightleftarrows: 8644,
+	rightsquigarrow: 8605,
+	rightthreetimes: 8908,
+	straightepsilon: 1013,
+	trianglerighteq: 8885,
+	vartriangleleft: 8882,
+	DiacriticalDot: 729,
+	DoubleRightTee: 8872,
+	DownLeftVector: 8637,
+	GreaterGreater: 10914,
+	HorizontalLine: 9472,
+	InvisibleComma: 8291,
+	InvisibleTimes: 8290,
+	LeftDownVector: 8643,
+	LeftRightArrow: 8596,
+	Leftrightarrow: 8660,
+	LessSlantEqual: 10877,
+	LongRightArrow: 10230,
+	Longrightarrow: 10233,
+	LowerLeftArrow: 8601,
+	NestedLessLess: 8810,
+	NotGreaterLess: 8825,
+	NotLessGreater: 8824,
+	NotSubsetEqual: 8840,
+	NotVerticalBar: 8740,
+	OpenCurlyQuote: 8216,
+	ReverseElement: 8715,
+	RightTeeVector: 10587,
+	RightVectorBar: 10579,
+	ShortDownArrow: 8595,
+	ShortLeftArrow: 8592,
+	SquareSuperset: 8848,
+	TildeFullEqual: 8773,
+	UpperLeftArrow: 8598,
+	ZeroWidthSpace: 8203,
+	curvearrowleft: 8630,
+	doublebarwedge: 8966,
+	downdownarrows: 8650,
+	hookrightarrow: 8618,
+	leftleftarrows: 8647,
+	leftrightarrow: 8596,
+	leftthreetimes: 8907,
+	longrightarrow: 10230,
+	looparrowright: 8620,
+	nshortparallel: 8742,
+	ntriangleright: 8939,
+	rightarrowtail: 8611,
+	rightharpoonup: 8640,
+	trianglelefteq: 8884,
+	upharpoonright: 8638,
+	ApplyFunction: 8289,
+	DifferentialD: 8518,
+	DoubleLeftTee: 10980,
+	DoubleUpArrow: 8657,
+	LeftTeeVector: 10586,
+	LeftVectorBar: 10578,
+	LessFullEqual: 8806,
+	LongLeftArrow: 10229,
+	Longleftarrow: 10232,
+	NotTildeEqual: 8772,
+	NotTildeTilde: 8777,
+	Poincareplane: 8460,
+	PrecedesEqual: 10927,
+	PrecedesTilde: 8830,
+	RightArrowBar: 8677,
+	RightTeeArrow: 8614,
+	RightTriangle: 8883,
+	RightUpVector: 8638,
+	SucceedsEqual: 10928,
+	SucceedsTilde: 8831,
+	SupersetEqual: 8839,
+	UpEquilibrium: 10606,
+	VerticalTilde: 8768,
+	VeryThinSpace: 8202,
+	bigtriangleup: 9651,
+	blacktriangle: 9652,
+	divideontimes: 8903,
+	fallingdotseq: 8786,
+	hookleftarrow: 8617,
+	leftarrowtail: 8610,
+	leftharpoonup: 8636,
+	longleftarrow: 10229,
+	looparrowleft: 8619,
+	measuredangle: 8737,
+	ntriangleleft: 8938,
+	shortparallel: 8741,
+	smallsetminus: 8726,
+	triangleright: 9657,
+	upharpoonleft: 8639,
+	DownArrowBar: 10515,
+	DownTeeArrow: 8615,
+	ExponentialE: 8519,
+	GreaterEqual: 8805,
+	GreaterTilde: 8819,
+	HilbertSpace: 8459,
+	HumpDownHump: 8782,
+	Intersection: 8898,
+	LeftArrowBar: 8676,
+	LeftTeeArrow: 8612,
+	LeftTriangle: 8882,
+	LeftUpVector: 8639,
+	NotCongruent: 8802,
+	NotLessEqual: 8816,
+	NotLessTilde: 8820,
+	Proportional: 8733,
+	RightCeiling: 8969,
+	RoundImplies: 10608,
+	ShortUpArrow: 8593,
+	SquareSubset: 8847,
+	UnderBracket: 9141,
+	VerticalLine: 124,
+	blacklozenge: 10731,
+	exponentiale: 8519,
+	risingdotseq: 8787,
+	triangledown: 9663,
+	triangleleft: 9667,
+	CircleMinus: 8854,
+	CircleTimes: 8855,
+	Equilibrium: 8652,
+	GreaterLess: 8823,
+	LeftCeiling: 8968,
+	LessGreater: 8822,
+	MediumSpace: 8287,
+	NotPrecedes: 8832,
+	NotSucceeds: 8833,
+	OverBracket: 9140,
+	RightVector: 8640,
+	Rrightarrow: 8667,
+	RuleDelayed: 10740,
+	SmallCircle: 8728,
+	SquareUnion: 8852,
+	SubsetEqual: 8838,
+	UpDownArrow: 8597,
+	Updownarrow: 8661,
+	VerticalBar: 8739,
+	backepsilon: 1014,
+	blacksquare: 9642,
+	circledcirc: 8858,
+	circleddash: 8861,
+	curlyeqprec: 8926,
+	curlyeqsucc: 8927,
+	diamondsuit: 9830,
+	eqslantless: 10901,
+	expectation: 8496,
+	nRightarrow: 8655,
+	nrightarrow: 8603,
+	preccurlyeq: 8828,
+	precnapprox: 10937,
+	quaternions: 8461,
+	straightphi: 981,
+	succcurlyeq: 8829,
+	succnapprox: 10938,
+	thickapprox: 8776,
+	updownarrow: 8597,
+	Bernoullis: 8492,
+	CirclePlus: 8853,
+	EqualTilde: 8770,
+	Fouriertrf: 8497,
+	ImaginaryI: 8520,
+	Laplacetrf: 8466,
+	LeftVector: 8636,
+	Lleftarrow: 8666,
+	NotElement: 8713,
+	NotGreater: 8815,
+	Proportion: 8759,
+	RightArrow: 8594,
+	RightFloor: 8971,
+	Rightarrow: 8658,
+	TildeEqual: 8771,
+	TildeTilde: 8776,
+	UnderBrace: 9183,
+	UpArrowBar: 10514,
+	UpTeeArrow: 8613,
+	circledast: 8859,
+	complement: 8705,
+	curlywedge: 8911,
+	eqslantgtr: 10902,
+	gtreqqless: 10892,
+	lessapprox: 10885,
+	lesseqqgtr: 10891,
+	lmoustache: 9136,
+	longmapsto: 10236,
+	mapstodown: 8615,
+	mapstoleft: 8612,
+	nLeftarrow: 8653,
+	nleftarrow: 8602,
+	precapprox: 10935,
+	rightarrow: 8594,
+	rmoustache: 9137,
+	sqsubseteq: 8849,
+	sqsupseteq: 8850,
+	subsetneqq: 10955,
+	succapprox: 10936,
+	supsetneqq: 10956,
+	upuparrows: 8648,
+	varepsilon: 949,
+	varnothing: 8709,
+	Backslash: 8726,
+	CenterDot: 183,
+	CircleDot: 8857,
+	Congruent: 8801,
+	Coproduct: 8720,
+	DoubleDot: 168,
+	DownArrow: 8595,
+	DownBreve: 785,
+	Downarrow: 8659,
+	HumpEqual: 8783,
+	LeftArrow: 8592,
+	LeftFloor: 8970,
+	Leftarrow: 8656,
+	LessTilde: 8818,
+	Mellintrf: 8499,
+	MinusPlus: 8723,
+	NotCupCap: 8813,
+	NotExists: 8708,
+	OverBrace: 9182,
+	PlusMinus: 177,
+	Therefore: 8756,
+	ThinSpace: 8201,
+	TripleDot: 8411,
+	UnionPlus: 8846,
+	backprime: 8245,
+	backsimeq: 8909,
+	bigotimes: 10754,
+	centerdot: 183,
+	checkmark: 10003,
+	complexes: 8450,
+	dotsquare: 8865,
+	downarrow: 8595,
+	gtrapprox: 10886,
+	gtreqless: 8923,
+	heartsuit: 9829,
+	leftarrow: 8592,
+	lesseqgtr: 8922,
+	nparallel: 8742,
+	nshortmid: 8740,
+	nsubseteq: 8840,
+	nsupseteq: 8841,
+	pitchfork: 8916,
+	rationals: 8474,
+	spadesuit: 9824,
+	subseteqq: 10949,
+	subsetneq: 8842,
+	supseteqq: 10950,
+	supsetneq: 8843,
+	therefore: 8756,
+	triangleq: 8796,
+	varpropto: 8733,
+	DDotrahd: 10513,
+	DotEqual: 8784,
+	Integral: 8747,
+	LessLess: 10913,
+	NotEqual: 8800,
+	NotTilde: 8769,
+	PartialD: 8706,
+	Precedes: 8826,
+	RightTee: 8866,
+	Succeeds: 8827,
+	SuchThat: 8715,
+	Superset: 8835,
+	Uarrocir: 10569,
+	UnderBar: 818,
+	andslope: 10840,
+	angmsdaa: 10664,
+	angmsdab: 10665,
+	angmsdac: 10666,
+	angmsdad: 10667,
+	angmsdae: 10668,
+	angmsdaf: 10669,
+	angmsdag: 10670,
+	angmsdah: 10671,
+	angrtvbd: 10653,
+	approxeq: 8778,
+	awconint: 8755,
+	backcong: 8780,
+	barwedge: 8965,
+	bbrktbrk: 9142,
+	bigoplus: 10753,
+	bigsqcup: 10758,
+	biguplus: 10756,
+	bigwedge: 8896,
+	boxminus: 8863,
+	boxtimes: 8864,
+	capbrcup: 10825,
+	circledR: 174,
+	circledS: 9416,
+	cirfnint: 10768,
+	clubsuit: 9827,
+	cupbrcap: 10824,
+	curlyvee: 8910,
+	cwconint: 8754,
+	doteqdot: 8785,
+	dotminus: 8760,
+	drbkarow: 10512,
+	dzigrarr: 10239,
+	elinters: 9191,
+	emptyset: 8709,
+	eqvparsl: 10725,
+	fpartint: 10765,
+	geqslant: 10878,
+	gesdotol: 10884,
+	gnapprox: 10890,
+	hksearow: 10533,
+	hkswarow: 10534,
+	imagline: 8464,
+	imagpart: 8465,
+	infintie: 10717,
+	integers: 8484,
+	intercal: 8890,
+	intlarhk: 10775,
+	laemptyv: 10676,
+	ldrushar: 10571,
+	leqslant: 10877,
+	lesdotor: 10883,
+	llcorner: 8990,
+	lnapprox: 10889,
+	lrcorner: 8991,
+	lurdshar: 10570,
+	mapstoup: 8613,
+	multimap: 8888,
+	naturals: 8469,
+	otimesas: 10806,
+	parallel: 8741,
+	plusacir: 10787,
+	pointint: 10773,
+	precneqq: 10933,
+	precnsim: 8936,
+	profalar: 9006,
+	profline: 8978,
+	profsurf: 8979,
+	raemptyv: 10675,
+	realpart: 8476,
+	rppolint: 10770,
+	rtriltri: 10702,
+	scpolint: 10771,
+	setminus: 8726,
+	shortmid: 8739,
+	smeparsl: 10724,
+	sqsubset: 8847,
+	sqsupset: 8848,
+	subseteq: 8838,
+	succneqq: 10934,
+	succnsim: 8937,
+	supseteq: 8839,
+	thetasym: 977,
+	thicksim: 8764,
+	timesbar: 10801,
+	triangle: 9653,
+	triminus: 10810,
+	trpezium: 9186,
+	ulcorner: 8988,
+	urcorner: 8989,
+	varkappa: 1008,
+	varsigma: 962,
+	vartheta: 977,
+	Because: 8757,
+	Cayleys: 8493,
+	Cconint: 8752,
+	Cedilla: 184,
+	Diamond: 8900,
+	DownTee: 8868,
+	Element: 8712,
+	Epsilon: 917,
+	Implies: 8658,
+	LeftTee: 8867,
+	NewLine: 10,
+	NoBreak: 8288,
+	NotLess: 8814,
+	Omicron: 927,
+	OverBar: 175,
+	Product: 8719,
+	UpArrow: 8593,
+	Uparrow: 8657,
+	Upsilon: 933,
+	alefsym: 8501,
+	angrtvb: 8894,
+	angzarr: 9084,
+	asympeq: 8781,
+	backsim: 8765,
+	because: 8757,
+	bemptyv: 10672,
+	between: 8812,
+	bigcirc: 9711,
+	bigodot: 10752,
+	bigstar: 9733,
+	boxplus: 8862,
+	ccupssm: 10832,
+	cemptyv: 10674,
+	cirscir: 10690,
+	coloneq: 8788,
+	congdot: 10861,
+	cudarrl: 10552,
+	cudarrr: 10549,
+	cularrp: 10557,
+	curarrm: 10556,
+	dbkarow: 10511,
+	ddagger: 8225,
+	ddotseq: 10871,
+	demptyv: 10673,
+	diamond: 8900,
+	digamma: 989,
+	dotplus: 8724,
+	dwangle: 10662,
+	epsilon: 949,
+	eqcolon: 8789,
+	equivDD: 10872,
+	gesdoto: 10882,
+	gtquest: 10876,
+	gtrless: 8823,
+	harrcir: 10568,
+	intprod: 10812,
+	isindot: 8949,
+	larrbfs: 10527,
+	larrsim: 10611,
+	lbrksld: 10639,
+	lbrkslu: 10637,
+	ldrdhar: 10599,
+	lesdoto: 10881,
+	lessdot: 8918,
+	lessgtr: 8822,
+	lesssim: 8818,
+	lotimes: 10804,
+	lozenge: 9674,
+	ltquest: 10875,
+	luruhar: 10598,
+	maltese: 10016,
+	minusdu: 10794,
+	napprox: 8777,
+	natural: 9838,
+	nearrow: 8599,
+	nexists: 8708,
+	notinva: 8713,
+	notinvb: 8951,
+	notinvc: 8950,
+	notniva: 8716,
+	notnivb: 8958,
+	notnivc: 8957,
+	npolint: 10772,
+	nsqsube: 8930,
+	nsqsupe: 8931,
+	nvinfin: 10718,
+	nwarrow: 8598,
+	olcross: 10683,
+	omicron: 959,
+	orderof: 8500,
+	orslope: 10839,
+	pertenk: 8241,
+	planckh: 8462,
+	pluscir: 10786,
+	plussim: 10790,
+	plustwo: 10791,
+	precsim: 8830,
+	quatint: 10774,
+	questeq: 8799,
+	rarrbfs: 10528,
+	rarrsim: 10612,
+	rbrksld: 10638,
+	rbrkslu: 10640,
+	rdldhar: 10601,
+	realine: 8475,
+	rotimes: 10805,
+	ruluhar: 10600,
+	searrow: 8600,
+	simplus: 10788,
+	simrarr: 10610,
+	subedot: 10947,
+	submult: 10945,
+	subplus: 10943,
+	subrarr: 10617,
+	succsim: 8831,
+	supdsub: 10968,
+	supedot: 10948,
+	suphsub: 10967,
+	suplarr: 10619,
+	supmult: 10946,
+	supplus: 10944,
+	swarrow: 8601,
+	topfork: 10970,
+	triplus: 10809,
+	tritime: 10811,
+	uparrow: 8593,
+	upsilon: 965,
+	uwangle: 10663,
+	vzigzag: 10650,
+	zigrarr: 8669,
+	Aacute: 193,
+	Abreve: 258,
+	Agrave: 192,
+	Assign: 8788,
+	Atilde: 195,
+	Barwed: 8966,
+	Bumpeq: 8782,
+	Cacute: 262,
+	Ccaron: 268,
+	Ccedil: 199,
+	Colone: 10868,
+	Conint: 8751,
+	CupCap: 8781,
+	Dagger: 8225,
+	Dcaron: 270,
+	DotDot: 8412,
+	Dstrok: 272,
+	Eacute: 201,
+	Ecaron: 282,
+	Egrave: 200,
+	Exists: 8707,
+	ForAll: 8704,
+	Gammad: 988,
+	Gbreve: 286,
+	Gcedil: 290,
+	HARDcy: 1066,
+	Hstrok: 294,
+	Iacute: 205,
+	Igrave: 204,
+	Itilde: 296,
+	Jsercy: 1032,
+	Kcedil: 310,
+	Lacute: 313,
+	Lambda: 923,
+	Lcaron: 317,
+	Lcedil: 315,
+	Lmidot: 319,
+	Lstrok: 321,
+	Nacute: 323,
+	Ncaron: 327,
+	Ncedil: 325,
+	Ntilde: 209,
+	Oacute: 211,
+	Odblac: 336,
+	Ograve: 210,
+	Oslash: 216,
+	Otilde: 213,
+	Otimes: 10807,
+	Racute: 340,
+	Rarrtl: 10518,
+	Rcaron: 344,
+	Rcedil: 342,
+	SHCHcy: 1065,
+	SOFTcy: 1068,
+	Sacute: 346,
+	Scaron: 352,
+	Scedil: 350,
+	Square: 9633,
+	Subset: 8912,
+	Supset: 8913,
+	Tcaron: 356,
+	Tcedil: 354,
+	Tstrok: 358,
+	Uacute: 218,
+	Ubreve: 364,
+	Udblac: 368,
+	Ugrave: 217,
+	Utilde: 360,
+	Vdashl: 10982,
+	Verbar: 8214,
+	Vvdash: 8874,
+	Yacute: 221,
+	Zacute: 377,
+	Zcaron: 381,
+	aacute: 225,
+	abreve: 259,
+	agrave: 224,
+	andand: 10837,
+	angmsd: 8737,
+	angsph: 8738,
+	apacir: 10863,
+	approx: 8776,
+	atilde: 227,
+	barvee: 8893,
+	barwed: 8965,
+	becaus: 8757,
+	bernou: 8492,
+	bigcap: 8898,
+	bigcup: 8899,
+	bigvee: 8897,
+	bkarow: 10509,
+	bottom: 8869,
+	bowtie: 8904,
+	boxbox: 10697,
+	bprime: 8245,
+	brvbar: 166,
+	bullet: 8226,
+	bumpeq: 8783,
+	cacute: 263,
+	capand: 10820,
+	capcap: 10827,
+	capcup: 10823,
+	capdot: 10816,
+	ccaron: 269,
+	ccedil: 231,
+	circeq: 8791,
+	cirmid: 10991,
+	colone: 8788,
+	commat: 64,
+	compfn: 8728,
+	conint: 8750,
+	coprod: 8720,
+	copysr: 8471,
+	cularr: 8630,
+	cupcap: 10822,
+	cupcup: 10826,
+	cupdot: 8845,
+	curarr: 8631,
+	curren: 164,
+	cylcty: 9005,
+	dagger: 8224,
+	daleth: 8504,
+	dcaron: 271,
+	dfisht: 10623,
+	divide: 247,
+	divonx: 8903,
+	dlcorn: 8990,
+	dlcrop: 8973,
+	dollar: 36,
+	drcorn: 8991,
+	drcrop: 8972,
+	dstrok: 273,
+	eacute: 233,
+	easter: 10862,
+	ecaron: 283,
+	ecolon: 8789,
+	egrave: 232,
+	egsdot: 10904,
+	elsdot: 10903,
+	emptyv: 8709,
+	emsp13: 8196,
+	emsp14: 8197,
+	eparsl: 10723,
+	eqcirc: 8790,
+	equals: 61,
+	equest: 8799,
+	female: 9792,
+	ffilig: 64259,
+	ffllig: 64260,
+	forall: 8704,
+	frac12: 189,
+	frac13: 8531,
+	frac14: 188,
+	frac15: 8533,
+	frac16: 8537,
+	frac18: 8539,
+	frac23: 8532,
+	frac25: 8534,
+	frac34: 190,
+	frac35: 8535,
+	frac38: 8540,
+	frac45: 8536,
+	frac56: 8538,
+	frac58: 8541,
+	frac78: 8542,
+	gacute: 501,
+	gammad: 989,
+	gbreve: 287,
+	gesdot: 10880,
+	gesles: 10900,
+	gtlPar: 10645,
+	gtrarr: 10616,
+	gtrdot: 8919,
+	gtrsim: 8819,
+	hairsp: 8202,
+	hamilt: 8459,
+	hardcy: 1098,
+	hearts: 9829,
+	hellip: 8230,
+	hercon: 8889,
+	homtht: 8763,
+	horbar: 8213,
+	hslash: 8463,
+	hstrok: 295,
+	hybull: 8259,
+	hyphen: 8208,
+	iacute: 237,
+	igrave: 236,
+	iiiint: 10764,
+	iinfin: 10716,
+	incare: 8453,
+	inodot: 305,
+	intcal: 8890,
+	iquest: 191,
+	isinsv: 8947,
+	itilde: 297,
+	jsercy: 1112,
+	kappav: 1008,
+	kcedil: 311,
+	kgreen: 312,
+	lAtail: 10523,
+	lacute: 314,
+	lagran: 8466,
+	lambda: 955,
+	langle: 10216,
+	larrfs: 10525,
+	larrhk: 8617,
+	larrlp: 8619,
+	larrpl: 10553,
+	larrtl: 8610,
+	latail: 10521,
+	lbrace: 123,
+	lbrack: 91,
+	lcaron: 318,
+	lcedil: 316,
+	ldquor: 8222,
+	lesdot: 10879,
+	lesges: 10899,
+	lfisht: 10620,
+	lfloor: 8970,
+	lharul: 10602,
+	llhard: 10603,
+	lmidot: 320,
+	lmoust: 9136,
+	loplus: 10797,
+	lowast: 8727,
+	lowbar: 95,
+	lparlt: 10643,
+	lrhard: 10605,
+	lsaquo: 8249,
+	lsquor: 8218,
+	lstrok: 322,
+	lthree: 8907,
+	ltimes: 8905,
+	ltlarr: 10614,
+	ltrPar: 10646,
+	mapsto: 8614,
+	marker: 9646,
+	mcomma: 10793,
+	midast: 42,
+	midcir: 10992,
+	middot: 183,
+	minusb: 8863,
+	minusd: 8760,
+	mnplus: 8723,
+	models: 8871,
+	mstpos: 8766,
+	nVDash: 8879,
+	nVdash: 8878,
+	nacute: 324,
+	ncaron: 328,
+	ncedil: 326,
+	nearhk: 10532,
+	nequiv: 8802,
+	nesear: 10536,
+	nexist: 8708,
+	nltrie: 8940,
+	nprcue: 8928,
+	nrtrie: 8941,
+	nsccue: 8929,
+	nsimeq: 8772,
+	ntilde: 241,
+	numero: 8470,
+	nvDash: 8877,
+	nvHarr: 10500,
+	nvdash: 8876,
+	nvlArr: 10498,
+	nvrArr: 10499,
+	nwarhk: 10531,
+	nwnear: 10535,
+	oacute: 243,
+	odblac: 337,
+	odsold: 10684,
+	ograve: 242,
+	ominus: 8854,
+	origof: 8886,
+	oslash: 248,
+	otilde: 245,
+	otimes: 8855,
+	parsim: 10995,
+	percnt: 37,
+	period: 46,
+	permil: 8240,
+	phmmat: 8499,
+	planck: 8463,
+	plankv: 8463,
+	plusdo: 8724,
+	plusdu: 10789,
+	plusmn: 177,
+	preceq: 10927,
+	primes: 8473,
+	prnsim: 8936,
+	propto: 8733,
+	prurel: 8880,
+	puncsp: 8200,
+	qprime: 8279,
+	rAtail: 10524,
+	racute: 341,
+	rangle: 10217,
+	rarrap: 10613,
+	rarrfs: 10526,
+	rarrhk: 8618,
+	rarrlp: 8620,
+	rarrpl: 10565,
+	rarrtl: 8611,
+	ratail: 10522,
+	rbrace: 125,
+	rbrack: 93,
+	rcaron: 345,
+	rcedil: 343,
+	rdquor: 8221,
+	rfisht: 10621,
+	rfloor: 8971,
+	rharul: 10604,
+	rmoust: 9137,
+	roplus: 10798,
+	rpargt: 10644,
+	rsaquo: 8250,
+	rsquor: 8217,
+	rthree: 8908,
+	rtimes: 8906,
+	sacute: 347,
+	scaron: 353,
+	scedil: 351,
+	scnsim: 8937,
+	searhk: 10533,
+	seswar: 10537,
+	sfrown: 8994,
+	shchcy: 1097,
+	sigmaf: 962,
+	sigmav: 962,
+	simdot: 10858,
+	smashp: 10803,
+	softcy: 1100,
+	solbar: 9023,
+	spades: 9824,
+	sqsube: 8849,
+	sqsupe: 8850,
+	square: 9633,
+	squarf: 9642,
+	ssetmn: 8726,
+	ssmile: 8995,
+	sstarf: 8902,
+	subdot: 10941,
+	subset: 8834,
+	subsim: 10951,
+	subsub: 10965,
+	subsup: 10963,
+	succeq: 10928,
+	supdot: 10942,
+	supset: 8835,
+	supsim: 10952,
+	supsub: 10964,
+	supsup: 10966,
+	swarhk: 10534,
+	swnwar: 10538,
+	target: 8982,
+	tcaron: 357,
+	tcedil: 355,
+	telrec: 8981,
+	there4: 8756,
+	thetav: 977,
+	thinsp: 8201,
+	thksim: 8764,
+	timesb: 8864,
+	timesd: 10800,
+	topbot: 9014,
+	topcir: 10993,
+	tprime: 8244,
+	tridot: 9708,
+	tstrok: 359,
+	uacute: 250,
+	ubreve: 365,
+	udblac: 369,
+	ufisht: 10622,
+	ugrave: 249,
+	ulcorn: 8988,
+	ulcrop: 8975,
+	urcorn: 8989,
+	urcrop: 8974,
+	utilde: 361,
+	vangrt: 10652,
+	varphi: 966,
+	varrho: 1009,
+	veebar: 8891,
+	vellip: 8942,
+	verbar: 124,
+	wedbar: 10847,
+	wedgeq: 8793,
+	weierp: 8472,
+	wreath: 8768,
+	xoplus: 10753,
+	xotime: 10754,
+	xsqcup: 10758,
+	xuplus: 10756,
+	xwedge: 8896,
+	yacute: 253,
+	zacute: 378,
+	zcaron: 382,
+	zeetrf: 8488,
+	AElig: 198,
+	Acirc: 194,
+	Alpha: 913,
+	Amacr: 256,
+	Aogon: 260,
+	Aring: 197,
+	Breve: 728,
+	Ccirc: 264,
+	Colon: 8759,
+	Cross: 10799,
+	Dashv: 10980,
+	Delta: 916,
+	Ecirc: 202,
+	Emacr: 274,
+	Eogon: 280,
+	Equal: 10869,
+	Gamma: 915,
+	Gcirc: 284,
+	Hacek: 711,
+	Hcirc: 292,
+	IJlig: 306,
+	Icirc: 206,
+	Imacr: 298,
+	Iogon: 302,
+	Iukcy: 1030,
+	Jcirc: 308,
+	Jukcy: 1028,
+	Kappa: 922,
+	OElig: 338,
+	Ocirc: 212,
+	Omacr: 332,
+	Omega: 937,
+	Prime: 8243,
+	RBarr: 10512,
+	Scirc: 348,
+	Sigma: 931,
+	THORN: 222,
+	TRADE: 8482,
+	TSHcy: 1035,
+	Theta: 920,
+	Tilde: 8764,
+	Ubrcy: 1038,
+	Ucirc: 219,
+	Umacr: 362,
+	Union: 8899,
+	Uogon: 370,
+	UpTee: 8869,
+	Uring: 366,
+	VDash: 8875,
+	Vdash: 8873,
+	Wcirc: 372,
+	Wedge: 8896,
+	Ycirc: 374,
+	acirc: 226,
+	acute: 180,
+	aelig: 230,
+	aleph: 8501,
+	alpha: 945,
+	amacr: 257,
+	amalg: 10815,
+	angle: 8736,
+	angrt: 8735,
+	angst: 8491,
+	aogon: 261,
+	aring: 229,
+	asymp: 8776,
+	awint: 10769,
+	bcong: 8780,
+	bdquo: 8222,
+	bepsi: 1014,
+	blank: 9251,
+	blk12: 9618,
+	blk14: 9617,
+	blk34: 9619,
+	block: 9608,
+	boxDL: 9559,
+	boxDR: 9556,
+	boxDl: 9558,
+	boxDr: 9555,
+	boxHD: 9574,
+	boxHU: 9577,
+	boxHd: 9572,
+	boxHu: 9575,
+	boxUL: 9565,
+	boxUR: 9562,
+	boxUl: 9564,
+	boxUr: 9561,
+	boxVH: 9580,
+	boxVL: 9571,
+	boxVR: 9568,
+	boxVh: 9579,
+	boxVl: 9570,
+	boxVr: 9567,
+	boxdL: 9557,
+	boxdR: 9554,
+	boxdl: 9488,
+	boxdr: 9484,
+	boxhD: 9573,
+	boxhU: 9576,
+	boxhd: 9516,
+	boxhu: 9524,
+	boxuL: 9563,
+	boxuR: 9560,
+	boxul: 9496,
+	boxur: 9492,
+	boxvH: 9578,
+	boxvL: 9569,
+	boxvR: 9566,
+	boxvh: 9532,
+	boxvl: 9508,
+	boxvr: 9500,
+	breve: 728,
+	bsemi: 8271,
+	bsime: 8909,
+	bsolb: 10693,
+	bumpE: 10926,
+	bumpe: 8783,
+	caret: 8257,
+	caron: 711,
+	ccaps: 10829,
+	ccirc: 265,
+	ccups: 10828,
+	cedil: 184,
+	check: 10003,
+	clubs: 9827,
+	colon: 58,
+	comma: 44,
+	crarr: 8629,
+	cross: 10007,
+	csube: 10961,
+	csupe: 10962,
+	ctdot: 8943,
+	cuepr: 8926,
+	cuesc: 8927,
+	cupor: 10821,
+	cuvee: 8910,
+	cuwed: 8911,
+	cwint: 8753,
+	dashv: 8867,
+	dblac: 733,
+	ddarr: 8650,
+	delta: 948,
+	dharl: 8643,
+	dharr: 8642,
+	diams: 9830,
+	disin: 8946,
+	doteq: 8784,
+	dtdot: 8945,
+	dtrif: 9662,
+	duarr: 8693,
+	duhar: 10607,
+	eDDot: 10871,
+	ecirc: 234,
+	efDot: 8786,
+	emacr: 275,
+	empty: 8709,
+	eogon: 281,
+	eplus: 10865,
+	epsiv: 949,
+	eqsim: 8770,
+	equiv: 8801,
+	erDot: 8787,
+	erarr: 10609,
+	esdot: 8784,
+	exist: 8707,
+	fflig: 64256,
+	filig: 64257,
+	fllig: 64258,
+	fltns: 9649,
+	forkv: 10969,
+	frasl: 8260,
+	frown: 8994,
+	gamma: 947,
+	gcirc: 285,
+	gescc: 10921,
+	gimel: 8503,
+	gneqq: 8809,
+	gnsim: 8935,
+	grave: 96,
+	gsime: 10894,
+	gsiml: 10896,
+	gtcir: 10874,
+	gtdot: 8919,
+	harrw: 8621,
+	hcirc: 293,
+	hoarr: 8703,
+	icirc: 238,
+	iexcl: 161,
+	iiint: 8749,
+	iiota: 8489,
+	ijlig: 307,
+	imacr: 299,
+	image: 8465,
+	imath: 305,
+	imped: 437,
+	infin: 8734,
+	iogon: 303,
+	iprod: 10812,
+	isinE: 8953,
+	isins: 8948,
+	isinv: 8712,
+	iukcy: 1110,
+	jcirc: 309,
+	jmath: 567,
+	jukcy: 1108,
+	kappa: 954,
+	lAarr: 8666,
+	lBarr: 10510,
+	langd: 10641,
+	laquo: 171,
+	larrb: 8676,
+	lbarr: 10508,
+	lbbrk: 10098,
+	lbrke: 10635,
+	lceil: 8968,
+	ldquo: 8220,
+	lescc: 10920,
+	lhard: 8637,
+	lharu: 8636,
+	lhblk: 9604,
+	llarr: 8647,
+	lltri: 9722,
+	lneqq: 8808,
+	lnsim: 8934,
+	loang: 10220,
+	loarr: 8701,
+	lobrk: 10214,
+	lopar: 10629,
+	lrarr: 8646,
+	lrhar: 8651,
+	lrtri: 8895,
+	lsime: 10893,
+	lsimg: 10895,
+	lsquo: 8216,
+	ltcir: 10873,
+	ltdot: 8918,
+	ltrie: 8884,
+	ltrif: 9666,
+	mDDot: 8762,
+	mdash: 8212,
+	micro: 181,
+	minus: 8722,
+	mumap: 8888,
+	nabla: 8711,
+	napos: 329,
+	natur: 9838,
+	ncong: 8775,
+	ndash: 8211,
+	neArr: 8663,
+	nearr: 8599,
+	ngsim: 8821,
+	nhArr: 8654,
+	nharr: 8622,
+	nhpar: 10994,
+	nlArr: 8653,
+	nlarr: 8602,
+	nless: 8814,
+	nlsim: 8820,
+	nltri: 8938,
+	notin: 8713,
+	notni: 8716,
+	nprec: 8832,
+	nrArr: 8655,
+	nrarr: 8603,
+	nrtri: 8939,
+	nsime: 8772,
+	nsmid: 8740,
+	nspar: 8742,
+	nsube: 8840,
+	nsucc: 8833,
+	nsupe: 8841,
+	numsp: 8199,
+	nwArr: 8662,
+	nwarr: 8598,
+	ocirc: 244,
+	odash: 8861,
+	oelig: 339,
+	ofcir: 10687,
+	ohbar: 10677,
+	olarr: 8634,
+	olcir: 10686,
+	oline: 8254,
+	omacr: 333,
+	omega: 969,
+	operp: 10681,
+	oplus: 8853,
+	orarr: 8635,
+	order: 8500,
+	ovbar: 9021,
+	parsl: 11005,
+	phone: 9742,
+	plusb: 8862,
+	pluse: 10866,
+	pound: 163,
+	prcue: 8828,
+	prime: 8242,
+	prnap: 10937,
+	prsim: 8830,
+	quest: 63,
+	rAarr: 8667,
+	rBarr: 10511,
+	radic: 8730,
+	rangd: 10642,
+	range: 10661,
+	raquo: 187,
+	rarrb: 8677,
+	rarrc: 10547,
+	rarrw: 8605,
+	ratio: 8758,
+	rbarr: 10509,
+	rbbrk: 10099,
+	rbrke: 10636,
+	rceil: 8969,
+	rdquo: 8221,
+	reals: 8477,
+	rhard: 8641,
+	rharu: 8640,
+	rlarr: 8644,
+	rlhar: 8652,
+	rnmid: 10990,
+	roang: 10221,
+	roarr: 8702,
+	robrk: 10215,
+	ropar: 10630,
+	rrarr: 8649,
+	rsquo: 8217,
+	rtrie: 8885,
+	rtrif: 9656,
+	sbquo: 8218,
+	sccue: 8829,
+	scirc: 349,
+	scnap: 10938,
+	scsim: 8831,
+	sdotb: 8865,
+	sdote: 10854,
+	seArr: 8664,
+	searr: 8600,
+	setmn: 8726,
+	sharp: 9839,
+	sigma: 963,
+	simeq: 8771,
+	simgE: 10912,
+	simlE: 10911,
+	simne: 8774,
+	slarr: 8592,
+	smile: 8995,
+	sqcap: 8851,
+	sqcup: 8852,
+	sqsub: 8847,
+	sqsup: 8848,
+	srarr: 8594,
+	starf: 9733,
+	strns: 175,
+	subnE: 10955,
+	subne: 8842,
+	supnE: 10956,
+	supne: 8843,
+	swArr: 8665,
+	swarr: 8601,
+	szlig: 223,
+	theta: 952,
+	thkap: 8776,
+	thorn: 254,
+	tilde: 732,
+	times: 215,
+	trade: 8482,
+	trisb: 10701,
+	tshcy: 1115,
+	twixt: 8812,
+	ubrcy: 1118,
+	ucirc: 251,
+	udarr: 8645,
+	udhar: 10606,
+	uharl: 8639,
+	uharr: 8638,
+	uhblk: 9600,
+	ultri: 9720,
+	umacr: 363,
+	uogon: 371,
+	uplus: 8846,
+	upsih: 978,
+	uring: 367,
+	urtri: 9721,
+	utdot: 8944,
+	utrif: 9652,
+	uuarr: 8648,
+	vBarv: 10985,
+	vDash: 8872,
+	varpi: 982,
+	vdash: 8866,
+	veeeq: 8794,
+	vltri: 8882,
+	vprop: 8733,
+	vrtri: 8883,
+	wcirc: 373,
+	wedge: 8743,
+	xcirc: 9711,
+	xdtri: 9661,
+	xhArr: 10234,
+	xharr: 10231,
+	xlArr: 10232,
+	xlarr: 10229,
+	xodot: 10752,
+	xrArr: 10233,
+	xrarr: 10230,
+	xutri: 9651,
+	ycirc: 375,
+	Aopf: 120120,
+	Ascr: 119964,
+	Auml: 196,
+	Barv: 10983,
+	Beta: 914,
+	Bopf: 120121,
+	Bscr: 8492,
+	CHcy: 1063,
+	COPY: 169,
+	Cdot: 266,
+	Copf: 8450,
+	Cscr: 119966,
+	DJcy: 1026,
+	DScy: 1029,
+	DZcy: 1039,
+	Darr: 8609,
+	Dopf: 120123,
+	Dscr: 119967,
+	Edot: 278,
+	Eopf: 120124,
+	Escr: 8496,
+	Esim: 10867,
+	Euml: 203,
+	Fopf: 120125,
+	Fscr: 8497,
+	GJcy: 1027,
+	Gdot: 288,
+	Gopf: 120126,
+	Gscr: 119970,
+	Hopf: 8461,
+	Hscr: 8459,
+	IEcy: 1045,
+	IOcy: 1025,
+	Idot: 304,
+	Iopf: 120128,
+	Iota: 921,
+	Iscr: 8464,
+	Iuml: 207,
+	Jopf: 120129,
+	Jscr: 119973,
+	KHcy: 1061,
+	KJcy: 1036,
+	Kopf: 120130,
+	Kscr: 119974,
+	LJcy: 1033,
+	Lang: 10218,
+	Larr: 8606,
+	Lopf: 120131,
+	Lscr: 8466,
+	Mopf: 120132,
+	Mscr: 8499,
+	NJcy: 1034,
+	Nopf: 8469,
+	Nscr: 119977,
+	Oopf: 120134,
+	Oscr: 119978,
+	Ouml: 214,
+	Popf: 8473,
+	Pscr: 119979,
+	QUOT: 34,
+	Qopf: 8474,
+	Qscr: 119980,
+	Rang: 10219,
+	Rarr: 8608,
+	Ropf: 8477,
+	Rscr: 8475,
+	SHcy: 1064,
+	Sopf: 120138,
+	Sqrt: 8730,
+	Sscr: 119982,
+	Star: 8902,
+	TScy: 1062,
+	Topf: 120139,
+	Tscr: 119983,
+	Uarr: 8607,
+	Uopf: 120140,
+	Upsi: 978,
+	Uscr: 119984,
+	Uuml: 220,
+	Vbar: 10987,
+	Vert: 8214,
+	Vopf: 120141,
+	Vscr: 119985,
+	Wopf: 120142,
+	Wscr: 119986,
+	Xopf: 120143,
+	Xscr: 119987,
+	YAcy: 1071,
+	YIcy: 1031,
+	YUcy: 1070,
+	Yopf: 120144,
+	Yscr: 119988,
+	Yuml: 376,
+	ZHcy: 1046,
+	Zdot: 379,
+	Zeta: 918,
+	Zopf: 8484,
+	Zscr: 119989,
+	andd: 10844,
+	andv: 10842,
+	ange: 10660,
+	aopf: 120146,
+	apid: 8779,
+	apos: 39,
+	ascr: 119990,
+	auml: 228,
+	bNot: 10989,
+	bbrk: 9141,
+	beta: 946,
+	beth: 8502,
+	bnot: 8976,
+	bopf: 120147,
+	boxH: 9552,
+	boxV: 9553,
+	boxh: 9472,
+	boxv: 9474,
+	bscr: 119991,
+	bsim: 8765,
+	bsol: 92,
+	bull: 8226,
+	bump: 8782,
+	cdot: 267,
+	cent: 162,
+	chcy: 1095,
+	cirE: 10691,
+	circ: 710,
+	cire: 8791,
+	comp: 8705,
+	cong: 8773,
+	copf: 120148,
+	copy: 169,
+	cscr: 119992,
+	csub: 10959,
+	csup: 10960,
+	dArr: 8659,
+	dHar: 10597,
+	darr: 8595,
+	dash: 8208,
+	diam: 8900,
+	djcy: 1106,
+	dopf: 120149,
+	dscr: 119993,
+	dscy: 1109,
+	dsol: 10742,
+	dtri: 9663,
+	dzcy: 1119,
+	eDot: 8785,
+	ecir: 8790,
+	edot: 279,
+	emsp: 8195,
+	ensp: 8194,
+	eopf: 120150,
+	epar: 8917,
+	epsi: 1013,
+	escr: 8495,
+	esim: 8770,
+	euml: 235,
+	euro: 8364,
+	excl: 33,
+	flat: 9837,
+	fnof: 402,
+	fopf: 120151,
+	fork: 8916,
+	fscr: 119995,
+	gdot: 289,
+	geqq: 8807,
+	gjcy: 1107,
+	gnap: 10890,
+	gneq: 10888,
+	gopf: 120152,
+	gscr: 8458,
+	gsim: 8819,
+	gtcc: 10919,
+	hArr: 8660,
+	half: 189,
+	harr: 8596,
+	hbar: 8463,
+	hopf: 120153,
+	hscr: 119997,
+	iecy: 1077,
+	imof: 8887,
+	iocy: 1105,
+	iopf: 120154,
+	iota: 953,
+	iscr: 119998,
+	isin: 8712,
+	iuml: 239,
+	jopf: 120155,
+	jscr: 119999,
+	khcy: 1093,
+	kjcy: 1116,
+	kopf: 120156,
+	kscr: 120000,
+	lArr: 8656,
+	lHar: 10594,
+	lang: 10216,
+	larr: 8592,
+	late: 10925,
+	lcub: 123,
+	ldca: 10550,
+	ldsh: 8626,
+	leqq: 8806,
+	ljcy: 1113,
+	lnap: 10889,
+	lneq: 10887,
+	lopf: 120157,
+	lozf: 10731,
+	lpar: 40,
+	lscr: 120001,
+	lsim: 8818,
+	lsqb: 91,
+	ltcc: 10918,
+	ltri: 9667,
+	macr: 175,
+	male: 9794,
+	malt: 10016,
+	mlcp: 10971,
+	mldr: 8230,
+	mopf: 120158,
+	mscr: 120002,
+	nbsp: 160,
+	ncap: 10819,
+	ncup: 10818,
+	ngeq: 8817,
+	ngtr: 8815,
+	nisd: 8954,
+	njcy: 1114,
+	nldr: 8229,
+	nleq: 8816,
+	nmid: 8740,
+	nopf: 120159,
+	npar: 8742,
+	nscr: 120003,
+	nsim: 8769,
+	nsub: 8836,
+	nsup: 8837,
+	ntgl: 8825,
+	ntlg: 8824,
+	oast: 8859,
+	ocir: 8858,
+	odiv: 10808,
+	odot: 8857,
+	ogon: 731,
+	oint: 8750,
+	omid: 10678,
+	oopf: 120160,
+	opar: 10679,
+	ordf: 170,
+	ordm: 186,
+	oror: 10838,
+	oscr: 8500,
+	osol: 8856,
+	ouml: 246,
+	para: 182,
+	part: 8706,
+	perp: 8869,
+	phiv: 966,
+	plus: 43,
+	popf: 120161,
+	prap: 10935,
+	prec: 8826,
+	prnE: 10933,
+	prod: 8719,
+	prop: 8733,
+	pscr: 120005,
+	qint: 10764,
+	qopf: 120162,
+	qscr: 120006,
+	quot: 34,
+	rArr: 8658,
+	rHar: 10596,
+	race: 10714,
+	rang: 10217,
+	rarr: 8594,
+	rcub: 125,
+	rdca: 10551,
+	rdsh: 8627,
+	real: 8476,
+	rect: 9645,
+	rhov: 1009,
+	ring: 730,
+	ropf: 120163,
+	rpar: 41,
+	rscr: 120007,
+	rsqb: 93,
+	rtri: 9657,
+	scap: 10936,
+	scnE: 10934,
+	sdot: 8901,
+	sect: 167,
+	semi: 59,
+	sext: 10038,
+	shcy: 1096,
+	sime: 8771,
+	simg: 10910,
+	siml: 10909,
+	smid: 8739,
+	smte: 10924,
+	solb: 10692,
+	sopf: 120164,
+	spar: 8741,
+	squf: 9642,
+	sscr: 120008,
+	star: 9734,
+	subE: 10949,
+	sube: 8838,
+	succ: 8827,
+	sung: 9834,
+	sup1: 185,
+	sup2: 178,
+	sup3: 179,
+	supE: 10950,
+	supe: 8839,
+	tbrk: 9140,
+	tdot: 8411,
+	tint: 8749,
+	toea: 10536,
+	topf: 120165,
+	tosa: 10537,
+	trie: 8796,
+	tscr: 120009,
+	tscy: 1094,
+	uArr: 8657,
+	uHar: 10595,
+	uarr: 8593,
+	uopf: 120166,
+	upsi: 965,
+	uscr: 120010,
+	utri: 9653,
+	uuml: 252,
+	vArr: 8661,
+	vBar: 10984,
+	varr: 8597,
+	vert: 124,
+	vopf: 120167,
+	vscr: 120011,
+	wopf: 120168,
+	wscr: 120012,
+	xcap: 8898,
+	xcup: 8899,
+	xmap: 10236,
+	xnis: 8955,
+	xopf: 120169,
+	xscr: 120013,
+	xvee: 8897,
+	yacy: 1103,
+	yicy: 1111,
+	yopf: 120170,
+	yscr: 120014,
+	yucy: 1102,
+	yuml: 255,
+	zdot: 380,
+	zeta: 950,
+	zhcy: 1078,
+	zopf: 120171,
+	zscr: 120015,
+	zwnj: 8204,
+	AMP: 38,
+	Acy: 1040,
+	Afr: 120068,
+	And: 10835,
+	Bcy: 1041,
+	Bfr: 120069,
+	Cap: 8914,
+	Cfr: 8493,
+	Chi: 935,
+	Cup: 8915,
+	Dcy: 1044,
+	Del: 8711,
+	Dfr: 120071,
+	Dot: 168,
+	ENG: 330,
+	ETH: 208,
+	Ecy: 1069,
+	Efr: 120072,
+	Eta: 919,
+	Fcy: 1060,
+	Ffr: 120073,
+	Gcy: 1043,
+	Gfr: 120074,
+	Hat: 94,
+	Hfr: 8460,
+	Icy: 1048,
+	Ifr: 8465,
+	Int: 8748,
+	Jcy: 1049,
+	Jfr: 120077,
+	Kcy: 1050,
+	Kfr: 120078,
+	Lcy: 1051,
+	Lfr: 120079,
+	Lsh: 8624,
+	Map: 10501,
+	Mcy: 1052,
+	Mfr: 120080,
+	Ncy: 1053,
+	Nfr: 120081,
+	Not: 10988,
+	Ocy: 1054,
+	Ofr: 120082,
+	Pcy: 1055,
+	Pfr: 120083,
+	Phi: 934,
+	Psi: 936,
+	Qfr: 120084,
+	REG: 174,
+	Rcy: 1056,
+	Rfr: 8476,
+	Rho: 929,
+	Rsh: 8625,
+	Scy: 1057,
+	Sfr: 120086,
+	Sub: 8912,
+	Sum: 8721,
+	Sup: 8913,
+	Tab: 9,
+	Tau: 932,
+	Tcy: 1058,
+	Tfr: 120087,
+	Ucy: 1059,
+	Ufr: 120088,
+	Vcy: 1042,
+	Vee: 8897,
+	Vfr: 120089,
+	Wfr: 120090,
+	Xfr: 120091,
+	Ycy: 1067,
+	Yfr: 120092,
+	Zcy: 1047,
+	Zfr: 8488,
+	acd: 8767,
+	acy: 1072,
+	afr: 120094,
+	amp: 38,
+	and: 8743,
+	ang: 8736,
+	apE: 10864,
+	ape: 8778,
+	ast: 42,
+	bcy: 1073,
+	bfr: 120095,
+	bot: 8869,
+	cap: 8745,
+	cfr: 120096,
+	chi: 967,
+	cir: 9675,
+	cup: 8746,
+	dcy: 1076,
+	deg: 176,
+	dfr: 120097,
+	die: 168,
+	div: 247,
+	dot: 729,
+	ecy: 1101,
+	efr: 120098,
+	egs: 10902,
+	ell: 8467,
+	els: 10901,
+	eng: 331,
+	eta: 951,
+	eth: 240,
+	fcy: 1092,
+	ffr: 120099,
+	gEl: 10892,
+	gap: 10886,
+	gcy: 1075,
+	gel: 8923,
+	geq: 8805,
+	ges: 10878,
+	gfr: 120100,
+	ggg: 8921,
+	glE: 10898,
+	gla: 10917,
+	glj: 10916,
+	gnE: 8809,
+	gne: 10888,
+	hfr: 120101,
+	icy: 1080,
+	iff: 8660,
+	ifr: 120102,
+	int: 8747,
+	jcy: 1081,
+	jfr: 120103,
+	kcy: 1082,
+	kfr: 120104,
+	lEg: 10891,
+	lap: 10885,
+	lat: 10923,
+	lcy: 1083,
+	leg: 8922,
+	leq: 8804,
+	les: 10877,
+	lfr: 120105,
+	lgE: 10897,
+	lnE: 8808,
+	lne: 10887,
+	loz: 9674,
+	lrm: 8206,
+	lsh: 8624,
+	map: 8614,
+	mcy: 1084,
+	mfr: 120106,
+	mho: 8487,
+	mid: 8739,
+	nap: 8777,
+	ncy: 1085,
+	nfr: 120107,
+	nge: 8817,
+	ngt: 8815,
+	nis: 8956,
+	niv: 8715,
+	nle: 8816,
+	nlt: 8814,
+	not: 172,
+	npr: 8832,
+	nsc: 8833,
+	num: 35,
+	ocy: 1086,
+	ofr: 120108,
+	ogt: 10689,
+	ohm: 8486,
+	olt: 10688,
+	ord: 10845,
+	orv: 10843,
+	par: 8741,
+	pcy: 1087,
+	pfr: 120109,
+	phi: 966,
+	piv: 982,
+	prE: 10931,
+	pre: 10927,
+	psi: 968,
+	qfr: 120110,
+	rcy: 1088,
+	reg: 174,
+	rfr: 120111,
+	rho: 961,
+	rlm: 8207,
+	rsh: 8625,
+	scE: 10932,
+	sce: 10928,
+	scy: 1089,
+	sfr: 120112,
+	shy: 173,
+	sim: 8764,
+	smt: 10922,
+	sol: 47,
+	squ: 9633,
+	sub: 8834,
+	sum: 8721,
+	sup: 8835,
+	tau: 964,
+	tcy: 1090,
+	tfr: 120113,
+	top: 8868,
+	ucy: 1091,
+	ufr: 120114,
+	uml: 168,
+	vcy: 1074,
+	vee: 8744,
+	vfr: 120115,
+	wfr: 120116,
+	xfr: 120117,
+	ycy: 1099,
+	yen: 165,
+	yfr: 120118,
+	zcy: 1079,
+	zfr: 120119,
+	zwj: 8205,
+	DD: 8517,
+	GT: 62,
+	Gg: 8921,
+	Gt: 8811,
+	Im: 8465,
+	LT: 60,
+	Ll: 8920,
+	Lt: 8810,
+	Mu: 924,
+	Nu: 925,
+	Or: 10836,
+	Pi: 928,
+	Pr: 10939,
+	Re: 8476,
+	Sc: 10940,
+	Xi: 926,
+	ac: 8766,
+	af: 8289,
+	ap: 8776,
+	dd: 8518,
+	ee: 8519,
+	eg: 10906,
+	el: 10905,
+	gE: 8807,
+	ge: 8805,
+	gg: 8811,
+	gl: 8823,
+	gt: 62,
+	ic: 8291,
+	ii: 8520,
+	in: 8712,
+	it: 8290,
+	lE: 8806,
+	le: 8804,
+	lg: 8822,
+	ll: 8810,
+	lt: 60,
+	mp: 8723,
+	mu: 956,
+	ne: 8800,
+	ni: 8715,
+	nu: 957,
+	oS: 9416,
+	or: 8744,
+	pi: 960,
+	pm: 177,
+	pr: 8826,
+	rx: 8478,
+	sc: 8827,
+	wp: 8472,
+	wr: 8768,
+	xi: 958
+};
diff --git a/src/compiler/parse/utils/html.ts b/src/compiler/parse/utils/html.ts
new file mode 100644
index 0000000000..0148361929
--- /dev/null
+++ b/src/compiler/parse/utils/html.ts
@@ -0,0 +1,151 @@
+import entities from './entities';
+
+const windows_1252 = [
+	8364,
+	129,
+	8218,
+	402,
+	8222,
+	8230,
+	8224,
+	8225,
+	710,
+	8240,
+	352,
+	8249,
+	338,
+	141,
+	381,
+	143,
+	144,
+	8216,
+	8217,
+	8220,
+	8221,
+	8226,
+	8211,
+	8212,
+	732,
+	8482,
+	353,
+	8250,
+	339,
+	157,
+	382,
+	376
+];
+
+const entity_pattern = new RegExp(
+	`&(#?(?:x[\\w\\d]+|\\d+|${Object.keys(entities).join('|')}))(?:;|\\b)`,
+	'g'
+);
+
+export function decode_character_references(html: string) {
+	return html.replace(entity_pattern, (match, entity) => {
+		let code;
+
+		// Handle named entities
+		if (entity[0] !== '#') {
+			code = entities[entity];
+		} else if (entity[1] === 'x') {
+			code = parseInt(entity.substring(2), 16);
+		} else {
+			code = parseInt(entity.substring(1), 10);
+		}
+
+		if (!code) {
+			return match;
+		}
+
+		return String.fromCodePoint(validate_code(code));
+	});
+}
+
+const NUL = 0;
+
+// some code points are verboten. If we were inserting HTML, the browser would replace the illegal
+// code points with alternatives in some cases - since we're bypassing that mechanism, we need
+// to replace them ourselves
+//
+// Source: http://en.wikipedia.org/wiki/Character_encodings_in_HTML#Illegal_characters
+function validate_code(code: number) {
+	// line feed becomes generic whitespace
+	if (code === 10) {
+		return 32;
+	}
+
+	// ASCII range. (Why someone would use HTML entities for ASCII characters I don't know, but...)
+	if (code < 128) {
+		return code;
+	}
+
+	// code points 128-159 are dealt with leniently by browsers, but they're incorrect. We need
+	// to correct the mistake or we'll end up with missing € signs and so on
+	if (code <= 159) {
+		return windows_1252[code - 128];
+	}
+
+	// basic multilingual plane
+	if (code < 55296) {
+		return code;
+	}
+
+	// UTF-16 surrogate halves
+	if (code <= 57343) {
+		return NUL;
+	}
+
+	// rest of the basic multilingual plane
+	if (code <= 65535) {
+		return code;
+	}
+
+	// supplementary multilingual plane 0x10000 - 0x1ffff
+	if (code >= 65536 && code <= 131071) {
+		return code;
+	}
+
+	// supplementary ideographic plane 0x20000 - 0x2ffff
+	if (code >= 131072 && code <= 196607) {
+		return code;
+	}
+
+	return NUL;
+}
+
+// based on http://developers.whatwg.org/syntax.html#syntax-tag-omission
+const disallowed_contents = new Map([
+	['li', new Set(['li'])],
+	['dt', new Set(['dt', 'dd'])],
+	['dd', new Set(['dt', 'dd'])],
+	[
+		'p',
+		new Set(
+			'address article aside blockquote div dl fieldset footer form h1 h2 h3 h4 h5 h6 header hgroup hr main menu nav ol p pre section table ul'.split(
+				' '
+			)
+		)
+	],
+	['rt', new Set(['rt', 'rp'])],
+	['rp', new Set(['rt', 'rp'])],
+	['optgroup', new Set(['optgroup'])],
+	['option', new Set(['option', 'optgroup'])],
+	['thead', new Set(['tbody', 'tfoot'])],
+	['tbody', new Set(['tbody', 'tfoot'])],
+	['tfoot', new Set(['tbody'])],
+	['tr', new Set(['tr', 'tbody'])],
+	['td', new Set(['td', 'th', 'tr'])],
+	['th', new Set(['td', 'th', 'tr'])]
+]);
+
+// can this be a child of the parent element, or does it implicitly
+// close it, like `<li>one<li>two`?
+export function closing_tag_omitted(current: string, next?: string) {
+	if (disallowed_contents.has(current)) {
+		if (!next || disallowed_contents.get(current).has(next)) {
+			return true;
+		}
+	}
+
+	return false;
+}
diff --git a/src/compiler/parse/utils/node.ts b/src/compiler/parse/utils/node.ts
new file mode 100644
index 0000000000..944bdb4c58
--- /dev/null
+++ b/src/compiler/parse/utils/node.ts
@@ -0,0 +1,32 @@
+import { TemplateNode } from '../../interfaces';
+
+export function to_string(node: TemplateNode) {
+	switch (node.type) {
+		case 'IfBlock':
+			return '{#if} block';
+		case 'ThenBlock':
+			return '{:then} block';
+		case 'ElseBlock':
+			return '{:else} block';
+		case 'PendingBlock':
+		case 'AwaitBlock':
+			return '{#await} block';
+		case 'CatchBlock':
+			return '{:catch} block';
+		case 'EachBlock':
+			return '{#each} block';
+		case 'RawMustacheTag':
+			return '{@html} block';
+		case 'DebugTag':
+			return '{@debug} block';
+		case 'ConstTag':
+			return '{@const} tag';
+		case 'Element':
+		case 'InlineComponent':
+		case 'Slot':
+		case 'Title':
+			return `<${node.name}> tag`;
+		default:
+			return node.type;
+	}
+}
diff --git a/src/compiler/preprocess/decode_sourcemap.ts b/src/compiler/preprocess/decode_sourcemap.ts
new file mode 100644
index 0000000000..c7e13c2853
--- /dev/null
+++ b/src/compiler/preprocess/decode_sourcemap.ts
@@ -0,0 +1,88 @@
+import { decode as decode_mappings } from 'sourcemap-codec';
+import { Processed } from './types';
+
+/**
+ * Import decoded sourcemap from mozilla/source-map/SourceMapGenerator
+ * Forked from source-map/lib/source-map-generator.js
+ * from methods _serializeMappings and toJSON.
+ * We cannot use source-map.d.ts types, because we access hidden properties.
+ */
+function decoded_sourcemap_from_generator(generator: any) {
+	let previous_generated_line = 1;
+	const converted_mappings = [[]];
+	let result_line;
+	let result_segment;
+	let mapping;
+
+	const source_idx = generator._sources.toArray()
+		.reduce((acc, val, idx) => (acc[val] = idx, acc), {});
+
+	const name_idx = generator._names.toArray()
+		.reduce((acc, val, idx) => (acc[val] = idx, acc), {});
+
+	const mappings = generator._mappings.toArray();
+	result_line = converted_mappings[0];
+
+	for (let i = 0, len = mappings.length; i < len; i++) {
+		mapping = mappings[i];
+
+		if (mapping.generatedLine > previous_generated_line) {
+			while (mapping.generatedLine > previous_generated_line) {
+				converted_mappings.push([]);
+				previous_generated_line++;
+			}
+			result_line = converted_mappings[mapping.generatedLine - 1]; // line is one-based
+		} else if (i > 0) {
+			const previous_mapping = mappings[i - 1];
+			if (
+				// sorted by selectivity
+				mapping.generatedColumn === previous_mapping.generatedColumn &&
+				mapping.originalColumn === previous_mapping.originalColumn &&
+				mapping.name === previous_mapping.name &&
+				mapping.generatedLine === previous_mapping.generatedLine &&
+				mapping.originalLine === previous_mapping.originalLine &&
+				mapping.source === previous_mapping.source
+		) {
+				continue;
+			}
+		}
+		result_line.push([mapping.generatedColumn]);
+		result_segment = result_line[result_line.length - 1];
+
+		if (mapping.source != null) {
+			result_segment.push(...[
+				source_idx[mapping.source],
+				mapping.originalLine - 1, // line is one-based
+				mapping.originalColumn
+			]);
+			if (mapping.name != null) {
+				result_segment.push(name_idx[mapping.name]);
+			}
+		}
+	}
+
+	const map = {
+		version: generator._version,
+		sources: generator._sources.toArray(),
+		names: generator._names.toArray(),
+		mappings: converted_mappings
+	};
+	if (generator._file != null) {
+		(map as any).file = generator._file;
+	}
+	// not needed: map.sourcesContent and map.sourceRoot
+	return map;
+}
+
+export function decode_map(processed: Processed) {
+	let decoded_map = typeof processed.map === 'string' ? JSON.parse(processed.map) : processed.map;
+	if (typeof(decoded_map.mappings) === 'string') {
+		decoded_map.mappings = decode_mappings(decoded_map.mappings);
+	}
+	if ((decoded_map as any)._mappings && decoded_map.constructor.name === 'SourceMapGenerator') {
+		// import decoded sourcemap from mozilla/source-map/SourceMapGenerator
+		decoded_map = decoded_sourcemap_from_generator(decoded_map);
+	}
+
+	return decoded_map;
+}
diff --git a/src/compiler/preprocess/index.ts b/src/compiler/preprocess/index.ts
new file mode 100644
index 0000000000..ab2ede29e0
--- /dev/null
+++ b/src/compiler/preprocess/index.ts
@@ -0,0 +1,235 @@
+import { RawSourceMap, DecodedSourceMap } from '@ampproject/remapping/dist/types/types';
+import { getLocator } from 'locate-character';
+import { MappedCode, SourceLocation, parse_attached_sourcemap, sourcemap_add_offset, combine_sourcemaps } from '../utils/mapped_code';
+import { decode_map } from './decode_sourcemap';
+import { replace_in_code, slice_source } from './replace_in_code';
+import { MarkupPreprocessor, Source, Preprocessor, PreprocessorGroup, Processed } from './types';
+
+export * from './types';
+
+interface SourceUpdate {
+	string?: string;
+	map?: DecodedSourceMap;
+	dependencies?: string[];
+}
+
+function get_file_basename(filename: string) {
+	return filename.split(/[/\\]/).pop();
+}
+
+/**
+ * Represents intermediate states of the preprocessing.
+ */
+class PreprocessResult implements Source {
+	// sourcemap_list is sorted in reverse order from last map (index 0) to first map (index -1)
+	// so we use sourcemap_list.unshift() to add new maps
+	// https://github.com/ampproject/remapping#multiple-transformations-of-a-file
+	sourcemap_list: Array<DecodedSourceMap | RawSourceMap> = [];
+	dependencies: string[] = [];
+	file_basename: string;
+
+	get_location: ReturnType<typeof getLocator>;
+
+	constructor(public source: string, public filename?: string) {
+		this.update_source({ string: source });
+
+		// preprocess source must be relative to itself or equal null
+		this.file_basename = filename == null ? null : get_file_basename(filename);
+	}
+
+	update_source({ string: source, map, dependencies }: SourceUpdate) {
+		if (source != null) {
+			this.source = source;
+			this.get_location = getLocator(source);
+		}
+
+		if (map) {
+			this.sourcemap_list.unshift(map);
+		}
+
+		if (dependencies) {
+			this.dependencies.push(...dependencies);
+		}
+	}
+
+	to_processed(): Processed {
+		// Combine all the source maps for each preprocessor function into one
+		const map: RawSourceMap = combine_sourcemaps(this.file_basename, this.sourcemap_list);
+
+		return {
+			// TODO return separated output, in future version where svelte.compile supports it:
+			// style: { code: styleCode, map: styleMap },
+			// script { code: scriptCode, map: scriptMap },
+			// markup { code: markupCode, map: markupMap },
+
+			code: this.source,
+			dependencies: [...new Set(this.dependencies)],
+			map: map as object,
+			toString: () => this.source
+		};
+	}
+}
+
+/**
+ * Convert preprocessor output for the tag content into MappedCode
+ */
+function processed_content_to_code(processed: Processed, location: SourceLocation, file_basename: string): MappedCode {
+	// Convert the preprocessed code and its sourcemap to a MappedCode
+	let decoded_map: DecodedSourceMap;
+	if (processed.map) {
+		decoded_map = decode_map(processed);
+
+		// decoded map may not have sources for empty maps like `{ mappings: '' }`
+		if (decoded_map.sources) {
+			// offset only segments pointing at original component source
+			const source_index = decoded_map.sources.indexOf(file_basename);
+			if (source_index !== -1) {
+				sourcemap_add_offset(decoded_map, location, source_index);
+			}
+		}
+	}
+
+	return MappedCode.from_processed(processed.code, decoded_map);
+}
+
+/**
+ * Given the whole tag including content, return a `MappedCode`
+ * representing the tag content replaced with `processed`.
+ */
+function processed_tag_to_code(
+	processed: Processed,
+	tag_name: 'style' | 'script',
+	attributes: string,
+	source: Source
+): MappedCode {
+	const { file_basename, get_location } = source;
+
+	const build_mapped_code = (code: string, offset: number) =>
+		MappedCode.from_source(slice_source(code, offset, source));
+
+	const tag_open = `<${tag_name}${attributes || ''}>`;
+	const tag_close = `</${tag_name}>`;
+
+	const tag_open_code = build_mapped_code(tag_open, 0);
+	const tag_close_code = build_mapped_code(tag_close, tag_open.length + source.source.length);
+
+	parse_attached_sourcemap(processed, tag_name);
+
+	const content_code = processed_content_to_code(processed, get_location(tag_open.length), file_basename);
+
+	return tag_open_code.concat(content_code).concat(tag_close_code);
+}
+
+function parse_tag_attributes(str: string) {
+	// note: won't work with attribute values containing spaces.
+	return str
+		.split(/\s+/)
+		.filter(Boolean)
+		.reduce((attrs, attr) => {
+			const i = attr.indexOf('=');
+			const [key, value] = i > 0 ? [attr.slice(0, i), attr.slice(i + 1)] : [attr];
+			const [, unquoted] = (value && value.match(/^['"](.*)['"]$/)) || [];
+
+			return { ...attrs, [key]: unquoted ?? value ?? true };
+		}, {});
+}
+
+/**
+ * Calculate the updates required to process all instances of the specified tag.
+ */
+async function process_tag(
+	tag_name: 'style' | 'script',
+	preprocessor: Preprocessor,
+	source: Source
+): Promise<SourceUpdate> {
+	const { filename, source: markup } = source;
+	const tag_regex =
+		tag_name === 'style'
+			? /<!--[^]*?-->|<style(\s[^]*?)?(?:>([^]*?)<\/style>|\/>)/gi
+			: /<!--[^]*?-->|<script(\s[^]*?)?(?:>([^]*?)<\/script>|\/>)/gi;
+
+	const dependencies: string[] = [];
+
+	async function process_single_tag(
+		tag_with_content: string,
+		attributes = '',
+		content = '',
+		tag_offset: number
+	): Promise<MappedCode> {
+		const no_change = () => MappedCode.from_source(slice_source(tag_with_content, tag_offset, source));
+
+		if (!attributes && !content) return no_change();
+
+		const processed = await preprocessor({
+			content: content || '',
+			attributes: parse_tag_attributes(attributes || ''),
+			markup,
+			filename
+		});
+
+		if (!processed) return no_change();
+		if (processed.dependencies) dependencies.push(...processed.dependencies);
+		if (!processed.map && processed.code === content) return no_change();
+
+		return processed_tag_to_code(processed, tag_name, attributes, slice_source(content, tag_offset, source));
+	}
+
+	const { string, map } = await replace_in_code(tag_regex, process_single_tag, source);
+
+	return { string, map, dependencies };
+}
+
+async function process_markup(process: MarkupPreprocessor, source: Source) {
+	const processed = await process({
+		content: source.source,
+		filename: source.filename
+	});
+
+	if (processed) {
+		return {
+			string: processed.code,
+			map: processed.map
+				? // TODO: can we use decode_sourcemap?
+				  typeof processed.map === 'string'
+					? JSON.parse(processed.map)
+					: processed.map
+				: undefined,
+			dependencies: processed.dependencies
+		};
+	} else {
+		return {};
+	}
+}
+
+export default async function preprocess(
+	source: string,
+	preprocessor: PreprocessorGroup | PreprocessorGroup[],
+	options?: { filename?: string }
+): Promise<Processed> {
+	const filename: string | undefined = (options && options.filename) || (preprocessor as any).filename; // legacy
+
+	const preprocessors = preprocessor ? (Array.isArray(preprocessor) ? preprocessor : [preprocessor]) : [];
+
+	const markup = preprocessors.map(p => p.markup).filter(Boolean);
+	const script = preprocessors.map(p => p.script).filter(Boolean);
+	const style = preprocessors.map(p => p.style).filter(Boolean);
+
+	const result = new PreprocessResult(source, filename);
+
+	// TODO keep track: what preprocessor generated what sourcemap?
+	// to make debugging easier = detect low-resolution sourcemaps in fn combine_mappings
+
+	for (const process of markup) {
+		result.update_source(await process_markup(process, result));
+	}
+
+	for (const process of script) {
+		result.update_source(await process_tag('script', process, result));
+	}
+
+	for (const preprocess of style) {
+		result.update_source(await process_tag('style', preprocess, result));
+	}
+
+	return result.to_processed();
+}
diff --git a/src/compiler/preprocess/replace_in_code.ts b/src/compiler/preprocess/replace_in_code.ts
new file mode 100644
index 0000000000..cf0207afc3
--- /dev/null
+++ b/src/compiler/preprocess/replace_in_code.ts
@@ -0,0 +1,75 @@
+import { MappedCode } from '../utils/mapped_code';
+import { Source } from './types';
+
+interface Replacement {
+	offset: number;
+	length: number;
+	replacement: MappedCode;
+}
+
+export function slice_source(
+	code_slice: string,
+	offset: number,
+	{ file_basename, filename, get_location }: Source
+): Source {
+	return {
+		source: code_slice,
+		get_location: (index: number) => get_location(index + offset),
+		file_basename,
+		filename
+	};
+}
+
+function calculate_replacements(
+	re: RegExp,
+	get_replacement: (...match: any[]) => Promise<MappedCode>,
+	source: string
+) {
+	const replacements: Array<Promise<Replacement>> = [];
+
+	source.replace(re, (...match) => {
+		replacements.push(
+			get_replacement(...match).then(
+				replacement => {
+					const matched_string = match[0];
+					const offset = match[match.length - 2];
+
+					return ({ offset, length: matched_string.length, replacement });
+				}
+			)
+		);
+		return '';
+	});
+
+	return Promise.all(replacements);
+}
+
+function perform_replacements(
+	replacements: Replacement[],
+	source: Source
+): MappedCode {
+	const out = new MappedCode();
+	let last_end = 0;
+
+	for (const { offset, length, replacement } of replacements) {
+		const unchanged_prefix = MappedCode.from_source(
+			slice_source(source.source.slice(last_end, offset), last_end, source)
+		);
+		out.concat(unchanged_prefix).concat(replacement);
+		last_end = offset + length;
+	}
+
+	const unchanged_suffix = MappedCode.from_source(slice_source(source.source.slice(last_end), last_end, source));
+
+	return out.concat(unchanged_suffix);
+}
+
+export async function replace_in_code(
+	regex: RegExp,
+	get_replacement: (...match: any[]) => Promise<MappedCode>,
+	location: Source
+): Promise<MappedCode> {
+	const replacements = await calculate_replacements(regex, get_replacement, location.source);
+
+	return perform_replacements(replacements, location);
+}
diff --git a/src/compiler/preprocess/types.ts b/src/compiler/preprocess/types.ts
new file mode 100644
index 0000000000..b1e605238d
--- /dev/null
+++ b/src/compiler/preprocess/types.ts
@@ -0,0 +1,42 @@
+import { Location } from 'locate-character';
+
+/**
+ * @internal
+ */
+export interface Source {
+	source: string;
+	get_location: (search: number) => Location;
+	file_basename: string;
+	filename?: string;
+}
+
+export interface Processed {
+	code: string;
+	map?: string | object; // we are opaque with the type here to avoid dependency on the remapping module for our public types.
+	dependencies?: string[];
+	toString?: () => string;
+}
+
+export type MarkupPreprocessor = (options: {
+	content: string;
+	filename?: string;
+}) => Processed | void | Promise<Processed | void>;
+
+export type Preprocessor = (options: {
+	/**
+	 * The script/style tag content
+	 */
+	content: string;
+	attributes: Record<string, string | boolean>;
+	/**
+	 * The whole Svelte file content
+	 */
+	markup: string;
+	filename?: string;
+}) => Processed | void | Promise<Processed | void>;
+
+export interface PreprocessorGroup {
+	markup?: MarkupPreprocessor;
+	style?: Preprocessor;
+	script?: Preprocessor;
+}
diff --git a/src/compiler/tsconfig.json b/src/compiler/tsconfig.json
new file mode 100644
index 0000000000..c5939a0fdc
--- /dev/null
+++ b/src/compiler/tsconfig.json
@@ -0,0 +1,11 @@
+{
+	"extends": "../../tsconfig.json",
+	"include": ["."],
+
+	"compilerOptions": {
+		"lib": ["es2017", "webworker"]
+
+		// TODO: remove mocha types from the whole project
+		// "types": ["node", "estree"]
+	}
+}
diff --git a/src/compiler/utils/clone.ts b/src/compiler/utils/clone.ts
new file mode 100644
index 0000000000..f11ed94967
--- /dev/null
+++ b/src/compiler/utils/clone.ts
@@ -0,0 +1,33 @@
+// adapted from klona v2.0.4 - https://github.com/lukeed/klona
+// (c) Luke Edwards, under MIT License
+
+// The sole modification is to skip function values in objects when cloning, so we don't break tests.
+
+export function clone(val) {
+	let k, out, tmp;
+
+	if (Array.isArray(val)) {
+		out = Array(k = val.length);
+		while (k--) out[k] = (tmp = val[k]) && typeof tmp === 'object' ? clone(tmp) : tmp;
+		return out;
+	}
+
+	if (Object.prototype.toString.call(val) === '[object Object]') {
+		out = {}; // null
+		for (k in val) {
+			if (k === '__proto__') {
+				Object.defineProperty(out, k, {
+					value: clone(val[k]),
+					configurable: true,
+					enumerable: true,
+					writable: true
+				});
+			} else if (typeof val[k] !== 'function') { // MODIFICATION: skip functions
+				out[k] = (tmp = val[k]) && typeof tmp === 'object' ? clone(tmp) : tmp;
+			}
+		}
+		return out;
+	}
+
+	return val;
+}
diff --git a/src/compiler/utils/error.ts b/src/compiler/utils/error.ts
new file mode 100644
index 0000000000..882ff54ebe
--- /dev/null
+++ b/src/compiler/utils/error.ts
@@ -0,0 +1,40 @@
+import { locate } from 'locate-character';
+import get_code_frame from './get_code_frame';
+
+class CompileError extends Error {
+	code: string;
+	start: { line: number; column: number };
+	end: { line: number; column: number };
+	pos: number;
+	filename: string;
+	frame: string;
+
+	toString() {
+		return `${this.message} (${this.start.line}:${this.start.column})\n${this.frame}`;
+	}
+}
+
+export default function error(message: string, props: {
+	name: string;
+	code: string;
+	source: string;
+	filename: string;
+	start: number;
+	end?: number;
+}): never {
+	const error = new CompileError(message);
+	error.name = props.name;
+
+	const start = locate(props.source, props.start, { offsetLine: 1 });
+	const end = locate(props.source, props.end || props.start, { offsetLine: 1 });
+
+	error.code = props.code;
+	error.start = start;
+	error.end = end;
+	error.pos = props.start;
+	error.filename = props.filename;
+
+	error.frame = get_code_frame(props.source, start.line - 1, start.column);
+
+	throw error;
+}
diff --git a/src/compiler/utils/extract_svelte_ignore.ts b/src/compiler/utils/extract_svelte_ignore.ts
new file mode 100644
index 0000000000..306ba872d6
--- /dev/null
+++ b/src/compiler/utils/extract_svelte_ignore.ts
@@ -0,0 +1,34 @@
+import { TemplateNode } from '../interfaces';
+import { flatten } from './flatten';
+
+const pattern = /^\s*svelte-ignore\s+([\s\S]+)\s*$/m;
+
+export function extract_svelte_ignore(text: string): string[] {
+	const match = pattern.exec(text);
+	return match ? match[1].split(/[^\S]/).map(x => x.trim()).filter(Boolean) : [];
+}
+
+export function extract_svelte_ignore_from_comments<Node extends { leadingComments?: Array<{value: string}> }>(node: Node): string[] {
+	return flatten((node.leadingComments || []).map(comment => extract_svelte_ignore(comment.value)));
+}
+
+export function extract_ignores_above_position(position: number, template_nodes: TemplateNode[]): string[] {
+	const previous_node_idx = template_nodes.findIndex(child => child.end === position);
+	if (previous_node_idx === -1) {
+		return [];
+	}
+
+	for (let i = previous_node_idx; i >= 0; i--) {
+		const node = template_nodes[i];
+		if (node.type !== 'Comment' && node.type !== 'Text') {
+			return [];
+		}
+		if (node.type === 'Comment') {
+			if (node.ignores.length) {
+				return node.ignores;
+			}
+		}
+	}
+
+	return [];
+}
diff --git a/src/compiler/utils/flatten.ts b/src/compiler/utils/flatten.ts
new file mode 100644
index 0000000000..53557a2eee
--- /dev/null
+++ b/src/compiler/utils/flatten.ts
@@ -0,0 +1,14 @@
+export function flatten<T>(nodes: T[][], target?: T[]): T[];
+export function flatten<T>(nodes: T[], target?: T[]): T[];
+export function flatten(nodes: any[], target: any[] = []): any[] {
+	for (let i = 0; i < nodes.length; i += 1) {
+		const node = nodes[i];
+		if (Array.isArray(node)) {
+			flatten(node, target);
+		} else {
+			target.push(node);
+		}
+	}
+
+	return target;
+}
diff --git a/src/compiler/utils/full_char_code_at.ts b/src/compiler/utils/full_char_code_at.ts
new file mode 100644
index 0000000000..0469b537fc
--- /dev/null
+++ b/src/compiler/utils/full_char_code_at.ts
@@ -0,0 +1,10 @@
+// Adapted from https://github.com/acornjs/acorn/blob/6584815dca7440e00de841d1dad152302fdd7ca5/src/tokenize.js
+// Reproduced under MIT License https://github.com/acornjs/acorn/blob/master/LICENSE
+
+export default function full_char_code_at(str: string, i: number): number {
+	const code = str.charCodeAt(i);
+	if (code <= 0xd7ff || code >= 0xe000) return code;
+
+	const next = str.charCodeAt(i + 1);
+	return (code << 10) + next - 0x35fdc00;
+}
diff --git a/src/compiler/utils/fuzzymatch.ts b/src/compiler/utils/fuzzymatch.ts
new file mode 100644
index 0000000000..8b22a4175d
--- /dev/null
+++ b/src/compiler/utils/fuzzymatch.ts
@@ -0,0 +1,237 @@
+export default function fuzzymatch(name: string, names: string[]) {
+	const set = new FuzzySet(names);
+	const matches = set.get(name);
+
+	return matches && matches[0] && matches[0][0] > 0.7 ? matches[0][1] : null;
+}
+
+// adapted from https://github.com/Glench/fuzzyset.js/blob/master/lib/fuzzyset.js
+// BSD Licensed
+
+const GRAM_SIZE_LOWER = 2;
+const GRAM_SIZE_UPPER = 3;
+
+// return an edit distance from 0 to 1
+function _distance(str1: string, str2: string) {
+	if (str1 === null && str2 === null) {
+		throw 'Trying to compare two null values';
+	}
+	if (str1 === null || str2 === null) return 0;
+	str1 = String(str1);
+	str2 = String(str2);
+
+	const distance = levenshtein(str1, str2);
+	if (str1.length > str2.length) {
+		return 1 - distance / str1.length;
+	} else {
+		return 1 - distance / str2.length;
+	}
+}
+
+// helper functions
+function levenshtein(str1: string, str2: string) {
+	const current: number[] = [];
+	let prev;
+	let value;
+
+	for (let i = 0; i <= str2.length; i++) {
+		for (let j = 0; j <= str1.length; j++) {
+			if (i && j) {
+				if (str1.charAt(j - 1) === str2.charAt(i - 1)) {
+					value = prev;
+				} else {
+					value = Math.min(current[j], current[j - 1], prev) + 1;
+				}
+			} else {
+				value = i + j;
+			}
+
+			prev = current[j];
+			current[j] = value;
+		}
+	}
+
+	return current.pop();
+}
+
+const non_word_regex = /[^\w, ]+/;
+
+function iterate_grams(value: string, gram_size = 2) {
+	const simplified = '-' + value.toLowerCase().replace(non_word_regex, '') + '-';
+	const len_diff = gram_size - simplified.length;
+	const results = [];
+
+	if (len_diff > 0) {
+		for (let i = 0; i < len_diff; ++i) {
+			value += '-';
+		}
+	}
+	for (let i = 0; i < simplified.length - gram_size + 1; ++i) {
+		results.push(simplified.slice(i, i + gram_size));
+	}
+	return results;
+}
+
+function gram_counter(value: string, gram_size = 2) {
+	// return an object where key=gram, value=number of occurrences
+	const result = {};
+	const grams = iterate_grams(value, gram_size);
+	let i = 0;
+
+	for (i; i < grams.length; ++i) {
+		if (grams[i] in result) {
+			result[grams[i]] += 1;
+		} else {
+			result[grams[i]] = 1;
+		}
+	}
+	return result;
+}
+
+function sort_descending(a, b) {
+	return b[0] - a[0];
+}
+
+class FuzzySet {
+	exact_set = {};
+	match_dict = {};
+	items = {};
+
+	constructor(arr: string[]) {
+		// initialization
+		for (let i = GRAM_SIZE_LOWER; i < GRAM_SIZE_UPPER + 1; ++i) {
+			this.items[i] = [];
+		}
+
+		// add all the items to the set
+		for (let i = 0; i < arr.length; ++i) {
+			this.add(arr[i]);
+		}
+	}
+
+	add(value: string) {
+		const normalized_value = value.toLowerCase();
+		if (normalized_value in this.exact_set) {
+			return false;
+		}
+
+		let i = GRAM_SIZE_LOWER;
+		for (i; i < GRAM_SIZE_UPPER + 1; ++i) {
+			this._add(value, i);
+		}
+	}
+
+	_add(value: string, gram_size: number) {
+		const normalized_value = value.toLowerCase();
+		const items = this.items[gram_size] || [];
+		const index = items.length;
+
+		items.push(0);
+		const gram_counts = gram_counter(normalized_value, gram_size);
+		let sum_of_square_gram_counts = 0;
+		let gram;
+		let gram_count;
+
+		for (gram in gram_counts) {
+			gram_count = gram_counts[gram];
+			sum_of_square_gram_counts += Math.pow(gram_count, 2);
+			if (gram in this.match_dict) {
+				this.match_dict[gram].push([index, gram_count]);
+			} else {
+				this.match_dict[gram] = [[index, gram_count]];
+			}
+		}
+		const vector_normal = Math.sqrt(sum_of_square_gram_counts);
+		items[index] = [vector_normal, normalized_value];
+		this.items[gram_size] = items;
+		this.exact_set[normalized_value] = value;
+	}
+
+	get(value: string) {
+		const normalized_value = value.toLowerCase();
+		const result = this.exact_set[normalized_value];
+
+		if (result) {
+			return [[1, result]];
+		}
+
+		let results = [];
+		// start with high gram size and if there are no results, go to lower gram sizes
+		for (
+			let gram_size = GRAM_SIZE_UPPER;
+			gram_size >= GRAM_SIZE_LOWER;
+			--gram_size
+		) {
+			results = this.__get(value, gram_size);
+			if (results) {
+				return results;
+			}
+		}
+		return null;
+	}
+
+	__get(value: string, gram_size: number) {
+		const normalized_value = value.toLowerCase();
+		const matches = {};
+		const gram_counts = gram_counter(normalized_value, gram_size);
+		const items = this.items[gram_size];
+		let sum_of_square_gram_counts = 0;
+		let gram;
+		let gram_count;
+		let i;
+		let index;
+		let other_gram_count;
+
+		for (gram in gram_counts) {
+			gram_count = gram_counts[gram];
+			sum_of_square_gram_counts += Math.pow(gram_count, 2);
+			if (gram in this.match_dict) {
+				for (i = 0; i < this.match_dict[gram].length; ++i) {
+					index = this.match_dict[gram][i][0];
+					other_gram_count = this.match_dict[gram][i][1];
+					if (index in matches) {
+						matches[index] += gram_count * other_gram_count;
+					} else {
+						matches[index] = gram_count * other_gram_count;
+					}
+				}
+			}
+		}
+
+		const vector_normal = Math.sqrt(sum_of_square_gram_counts);
+		let results = [];
+		let match_score;
+
+		// build a results list of [score, str]
+		for (const match_index in matches) {
+			match_score = matches[match_index];
+			results.push([
+				match_score / (vector_normal * items[match_index][0]),
+				items[match_index][1]
+			]);
+		}
+
+		results.sort(sort_descending);
+
+		let new_results = [];
+		const end_index = Math.min(50, results.length);
+		// truncate somewhat arbitrarily to 50
+		for (let i = 0; i < end_index; ++i) {
+			new_results.push([
+				_distance(results[i][1], normalized_value),
+				results[i][1]
+			]);
+		}
+		results = new_results;
+		results.sort(sort_descending);
+
+		new_results = [];
+		for (let i = 0; i < results.length; ++i) {
+			if (results[i][0] == results[0][0]) {
+				new_results.push([results[i][0], this.exact_set[results[i][1]]]);
+			}
+		}
+
+		return new_results;
+	}
+}
diff --git a/src/compiler/utils/get_code_frame.ts b/src/compiler/utils/get_code_frame.ts
new file mode 100644
index 0000000000..1097f5b3d2
--- /dev/null
+++ b/src/compiler/utils/get_code_frame.ts
@@ -0,0 +1,31 @@
+function tabs_to_spaces(str: string) {
+	return str.replace(/^\t+/, match => match.split('\t').join('  '));
+}
+
+export default function get_code_frame(
+	source: string,
+	line: number,
+	column: number
+) {
+	const lines = source.split('\n');
+
+	const frame_start = Math.max(0, line - 2);
+	const frame_end = Math.min(line + 3, lines.length);
+
+	const digits = String(frame_end + 1).length;
+
+	return lines
+		.slice(frame_start, frame_end)
+		.map((str, i) => {
+			const isErrorLine = frame_start + i === line;
+			const line_num = String(i + frame_start + 1).padStart(digits, ' ');
+
+			if (isErrorLine) {
+				const indicator = ' '.repeat(digits + 2 + tabs_to_spaces(str.slice(0, column)).length) + '^';
+				return `${line_num}: ${tabs_to_spaces(str)}\n${indicator}`;
+			}
+
+			return `${line_num}: ${tabs_to_spaces(str)}`;
+		})
+		.join('\n');
+}
diff --git a/src/compiler/utils/link.ts b/src/compiler/utils/link.ts
new file mode 100644
index 0000000000..7cdef75d94
--- /dev/null
+++ b/src/compiler/utils/link.ts
@@ -0,0 +1,4 @@
+export function link<T extends { next?: T; prev?: T }>(next: T, prev: T) {
+	prev.next = next;
+	if (next) next.prev = prev;
+}
diff --git a/src/compiler/utils/list.ts b/src/compiler/utils/list.ts
new file mode 100644
index 0000000000..785f006d19
--- /dev/null
+++ b/src/compiler/utils/list.ts
@@ -0,0 +1,6 @@
+export default function list(items: string[], conjunction = 'or') {
+	if (items.length === 1) return items[0];
+	return `${items.slice(0, -1).join(', ')} ${conjunction} ${items[
+		items.length - 1
+	]}`;
+}
diff --git a/src/compiler/utils/mapped_code.ts b/src/compiler/utils/mapped_code.ts
new file mode 100644
index 0000000000..04fa05be9a
--- /dev/null
+++ b/src/compiler/utils/mapped_code.ts
@@ -0,0 +1,326 @@
+import { DecodedSourceMap, RawSourceMap, SourceMapLoader } from '@ampproject/remapping/dist/types/types';
+import remapping from '@ampproject/remapping';
+import { SourceMap } from 'magic-string';
+import { Source, Processed } from '../preprocess/types';
+import { push_array } from './push_array';
+
+export type SourceLocation = {
+	line: number;
+	column: number;
+};
+
+function last_line_length(s: string) {
+	return s.length - s.lastIndexOf('\n') - 1;
+}
+
+// mutate map in-place
+export function sourcemap_add_offset(
+	map: DecodedSourceMap, offset: SourceLocation, source_index: number
+) {
+	if (map.mappings.length == 0) return;
+	for (let line = 0; line < map.mappings.length; line++) {
+		const segment_list = map.mappings[line];
+		for (let segment = 0; segment < segment_list.length; segment++) {
+			const seg = segment_list[segment];
+			// shift only segments that belong to component source file
+			if (seg[1] === source_index) { // also ensures that seg.length >= 4
+				// shift column if it points at the first line
+				if (seg[2] === 0) {
+					seg[3] += offset.column;
+				}
+				// shift line
+				seg[2] += offset.line;
+			}
+		}
+	}
+}
+
+function merge_tables<T>(this_table: T[], other_table: T[]): [T[], number[], boolean, boolean] {
+	const new_table = this_table.slice();
+	const idx_map = [];
+	other_table = other_table || [];
+	let val_changed = false;
+	for (const [other_idx, other_val] of other_table.entries()) {
+		const this_idx = this_table.indexOf(other_val);
+		if (this_idx >= 0) {
+			idx_map[other_idx] = this_idx;
+		} else {
+			const new_idx = new_table.length;
+			new_table[new_idx] = other_val;
+			idx_map[other_idx] = new_idx;
+			val_changed = true;
+		}
+	}
+	let idx_changed = val_changed;
+	if (val_changed) {
+		if (idx_map.find((val, idx) => val != idx) === undefined) {
+			// idx_map is identity map [0, 1, 2, 3, 4, ....]
+			idx_changed = false;
+		}
+	}
+	return [new_table, idx_map, val_changed, idx_changed];
+}
+
+export class MappedCode {
+	string: string;
+	map: DecodedSourceMap;
+
+	constructor(string = '', map: DecodedSourceMap = null) {
+		this.string = string;
+		if (map) {
+			this.map = map as DecodedSourceMap;
+		} else {
+			this.map = {
+				version: 3,
+				mappings: [],
+				sources: [],
+				names: []
+			};
+		}
+	}
+
+	/**
+	 * concat in-place (mutable), return this (chainable)
+	 * will also mutate the `other` object
+	 */
+	concat(other: MappedCode): MappedCode {
+		// noop: if one is empty, return the other
+		if (other.string == '') return this;
+		if (this.string == '') {
+			this.string = other.string;
+			this.map = other.map;
+			return this;
+		}
+
+		// compute last line length before mutating
+		const column_offset = last_line_length(this.string);
+
+		this.string += other.string;
+
+		const m1 = this.map;
+		const m2 = other.map;
+
+		if (m2.mappings.length == 0) return this;
+
+		// combine sources and names
+		const [sources, new_source_idx, sources_changed, sources_idx_changed] = merge_tables(m1.sources, m2.sources);
+		const [names, new_name_idx, names_changed, names_idx_changed] = merge_tables(m1.names, m2.names);
+
+		if (sources_changed) m1.sources = sources;
+		if (names_changed) m1.names = names;
+
+		// unswitched loops are faster
+		if (sources_idx_changed && names_idx_changed) {
+			for (let line = 0; line < m2.mappings.length; line++) {
+				const segment_list = m2.mappings[line];
+				for (let segment = 0; segment < segment_list.length; segment++) {
+					const seg = segment_list[segment];
+					if (seg[1] >= 0) seg[1] = new_source_idx[seg[1]];
+					if (seg[4] >= 0) seg[4] = new_name_idx[seg[4]];
+				}
+			}
+		} else if (sources_idx_changed) {
+			for (let line = 0; line < m2.mappings.length; line++) {
+				const segment_list = m2.mappings[line];
+				for (let segment = 0; segment < segment_list.length; segment++) {
+					const seg = segment_list[segment];
+					if (seg[1] >= 0) seg[1] = new_source_idx[seg[1]];
+				}
+			}
+		} else if (names_idx_changed) {
+			for (let line = 0; line < m2.mappings.length; line++) {
+				const segment_list = m2.mappings[line];
+				for (let segment = 0; segment < segment_list.length; segment++) {
+					const seg = segment_list[segment];
+					if (seg[4] >= 0) seg[4] = new_name_idx[seg[4]];
+				}
+			}
+		}
+
+		// combine the mappings
+
+		// combine
+		// 1. last line of first map
+		// 2. first line of second map
+		// columns of 2 must be shifted
+
+		if (m2.mappings.length > 0 && column_offset > 0) {
+			const first_line = m2.mappings[0];
+			for (let i = 0; i < first_line.length; i++) {
+				first_line[i][0] += column_offset;
+			}
+		}
+
+		// combine last line + first line
+		push_array(m1.mappings[m1.mappings.length - 1], m2.mappings.shift());
+
+		// append other lines
+		push_array(m1.mappings, m2.mappings);
+
+		return this;
+	}
+
+	static from_processed(string: string, map?: DecodedSourceMap): MappedCode {
+		const line_count = string.split('\n').length;
+
+		if (map) {
+			// ensure that count of source map mappings lines
+			// is equal to count of generated code lines
+			// (some tools may produce less)
+			const missing_lines = line_count - map.mappings.length;
+			for (let i = 0; i < missing_lines; i++) {
+				map.mappings.push([]);
+			}
+			return new MappedCode(string, map);
+		}
+
+		if (string == '') return new MappedCode();
+		map = { version: 3, names: [], sources: [], mappings: [] };
+
+		// add empty SourceMapSegment[] for every line
+		for (let i = 0; i < line_count; i++) map.mappings.push([]);
+		return new MappedCode(string, map);
+	}
+
+	static from_source({ source, file_basename, get_location }: Source): MappedCode {
+		let offset: SourceLocation = get_location(0);
+
+		if (!offset) offset = { line: 0, column: 0 };
+		const map: DecodedSourceMap = { version: 3, names: [], sources: [file_basename], mappings: [] };
+		if (source == '') return new MappedCode(source, map);
+
+		// we create a high resolution identity map here,
+		// we know that it will eventually be merged with svelte's map,
+		// at which stage the resolution will decrease.
+		const line_list = source.split('\n');
+		for (let line = 0; line < line_list.length; line++) {
+			map.mappings.push([]);
+			const token_list = line_list[line].split(/([^\d\w\s]|\s+)/g);
+			for (let token = 0, column = 0; token < token_list.length; token++) {
+				if (token_list[token] == '') continue;
+				map.mappings[line].push([column, 0, offset.line + line, column]);
+				column += token_list[token].length;
+			}
+		}
+		// shift columns in first line
+		const segment_list = map.mappings[0];
+		for (let segment = 0; segment < segment_list.length; segment++) {
+			segment_list[segment][3] += offset.column;
+		}
+		return new MappedCode(source, map);
+	}
+}
+
+export function combine_sourcemaps(
+	filename: string,
+	sourcemap_list: Array<DecodedSourceMap | RawSourceMap>
+): RawSourceMap {
+	if (sourcemap_list.length == 0) return null;
+
+	let map_idx = 1;
+	const map: RawSourceMap =
+		sourcemap_list.slice(0, -1)
+			.find(m => m.sources.length !== 1) === undefined
+
+			? remapping( // use array interface
+				// only the oldest sourcemap can have multiple sources
+				sourcemap_list,
+				() => null,
+				true // skip optional field `sourcesContent`
+			)
+
+			: remapping( // use loader interface
+				sourcemap_list[0], // last map
+				function loader(sourcefile) {
+					if (sourcefile === filename && sourcemap_list[map_idx]) {
+						return sourcemap_list[map_idx++]; // idx 1, 2, ...
+						// bundle file = branch node
+					} else {
+						return null; // source file = leaf node
+					}
+				} as SourceMapLoader,
+				true
+			);
+
+	if (!map.file) delete map.file; // skip optional field `file`
+
+	// When source maps are combined and the leading map is empty, sources is not set.
+	// Add the filename to the empty array in this case. 
+	// Further improvements to remapping may help address this as well https://github.com/ampproject/remapping/issues/116
+	if (!map.sources.length) map.sources = [filename];
+
+	return map;
+}
+
+// browser vs node.js
+const b64enc = typeof btoa == 'function' ? btoa : b => Buffer.from(b).toString('base64');
+const b64dec = typeof atob == 'function' ? atob : a => Buffer.from(a, 'base64').toString();
+
+export function apply_preprocessor_sourcemap(filename: string, svelte_map: SourceMap, preprocessor_map_input: string | DecodedSourceMap | RawSourceMap): SourceMap {
+	if (!svelte_map || !preprocessor_map_input) return svelte_map;
+
+	const preprocessor_map = typeof preprocessor_map_input === 'string' ? JSON.parse(preprocessor_map_input) : preprocessor_map_input;
+
+	const result_map = combine_sourcemaps(
+		filename,
+		[
+			svelte_map as RawSourceMap,
+			preprocessor_map
+		]
+	) as RawSourceMap;
+
+	// Svelte expects a SourceMap which includes toUrl and toString. Instead of wrapping our output in a class,
+	// we just tack on the extra properties.
+	Object.defineProperties(result_map, {
+		toString: {
+			enumerable: false,
+			value: function toString() {
+				return JSON.stringify(this);
+			}
+		},
+		toUrl: {
+			enumerable: false,
+			value: function toUrl() {
+				return 'data:application/json;charset=utf-8;base64,' + b64enc(this.toString());
+			}
+		}
+	});
+
+	return result_map as SourceMap;
+}
+
+// parse attached sourcemap in processed.code
+export function parse_attached_sourcemap(processed: Processed, tag_name: 'script' | 'style'): void {
+	const r_in = '[#@]\\s*sourceMappingURL\\s*=\\s*(\\S*)';
+	const regex = (tag_name == 'script')
+		? new RegExp('(?://' + r_in + ')|(?:/\\*' + r_in + '\\s*\\*/)$')
+		: new RegExp('/\\*' + r_in + '\\s*\\*/$');
+	function log_warning(message) {
+		// code_start: help to find preprocessor
+		const code_start = processed.code.length < 100 ? processed.code : (processed.code.slice(0, 100) + ' [...]');
+		console.warn(`warning: ${message}. processed.code = ${JSON.stringify(code_start)}`);
+	}
+	processed.code = processed.code.replace(regex, (_, match1, match2) => {
+		const map_url = (tag_name == 'script') ? (match1 || match2) : match1;
+		const map_data = (map_url.match(/data:(?:application|text)\/json;(?:charset[:=]\S+?;)?base64,(\S*)/) || [])[1];
+		if (map_data) {
+			// sourceMappingURL is data URL
+			if (processed.map) {
+				log_warning('Not implemented. ' +
+					'Found sourcemap in both processed.code and processed.map. ' +
+					'Please update your preprocessor to return only one sourcemap.');
+				// ignore attached sourcemap
+				return '';
+			}
+			processed.map = b64dec(map_data); // use attached sourcemap
+			return ''; // remove from processed.code
+		}
+		// sourceMappingURL is path or URL
+		if (!processed.map) {
+			log_warning(`Found sourcemap path ${JSON.stringify(map_url)} in processed.code, but no sourcemap data. ` +
+				'Please update your preprocessor to return sourcemap data directly.');
+		}
+		// ignore sourcemap path
+		return ''; // remove from processed.code
+	});
+}
diff --git a/src/compiler/utils/names.ts b/src/compiler/utils/names.ts
new file mode 100644
index 0000000000..e091edb19e
--- /dev/null
+++ b/src/compiler/utils/names.ts
@@ -0,0 +1,139 @@
+import { isIdentifierStart, isIdentifierChar } from 'acorn';
+import full_char_code_at from './full_char_code_at';
+
+export const globals = new Set([
+	'alert',
+	'Array',
+	'BigInt',
+	'Boolean',
+	'clearInterval',
+	'clearTimeout',
+	'confirm',
+	'console',
+	'Date',
+	'decodeURI',
+	'decodeURIComponent',
+	'document',
+	'Element',
+	'encodeURI',
+	'encodeURIComponent',
+	'Error',
+	'EvalError',
+	'Event',
+	'EventSource',
+	'fetch',
+	'FormData',
+	'global',
+	'globalThis',
+	'history',
+	'HTMLElement',
+	'Infinity',
+	'InternalError',
+	'Intl',
+	'isFinite',
+	'isNaN',
+	'JSON',
+	'localStorage',
+	'location',
+	'Map',
+	'Math',
+	'NaN',
+	'navigator',
+	'Node',
+	'Number',
+	'Object',
+	'parseFloat',
+	'parseInt',
+	'process',
+	'Promise',
+	'prompt',
+	'RangeError',
+	'ReferenceError',
+	'RegExp',
+	'sessionStorage',
+	'Set',
+	'setInterval',
+	'setTimeout',
+	'String',
+	'SVGElement',
+	'Symbol',
+	'SyntaxError',
+	'TypeError',
+	'undefined',
+	'URIError',
+	'URL',
+	'URLSearchParams',
+	'window'
+]);
+
+export const reserved = new Set([
+	'arguments',
+	'await',
+	'break',
+	'case',
+	'catch',
+	'class',
+	'const',
+	'continue',
+	'debugger',
+	'default',
+	'delete',
+	'do',
+	'else',
+	'enum',
+	'eval',
+	'export',
+	'extends',
+	'false',
+	'finally',
+	'for',
+	'function',
+	'if',
+	'implements',
+	'import',
+	'in',
+	'instanceof',
+	'interface',
+	'let',
+	'new',
+	'null',
+	'package',
+	'private',
+	'protected',
+	'public',
+	'return',
+	'static',
+	'super',
+	'switch',
+	'this',
+	'throw',
+	'true',
+	'try',
+	'typeof',
+	'var',
+	'void',
+	'while',
+	'with',
+	'yield'
+]);
+
+export function is_valid(str: string): boolean {
+	let i = 0;
+
+	while (i < str.length) {
+		const code = full_char_code_at(str, i);
+		if (!(i === 0 ? isIdentifierStart : isIdentifierChar)(code, true)) return false;
+
+		i += code <= 0xffff ? 1 : 2;
+	}
+
+	return true;
+}
+
+export function sanitize(name: string) {
+	return name
+		.replace(/[^a-zA-Z0-9_]+/g, '_')
+		.replace(/^_/, '')
+		.replace(/_$/, '')
+		.replace(/^[0-9]/, '_$&');
+}
diff --git a/src/compiler/utils/namespaces.ts b/src/compiler/utils/namespaces.ts
new file mode 100644
index 0000000000..7da64afc8c
--- /dev/null
+++ b/src/compiler/utils/namespaces.ts
@@ -0,0 +1,28 @@
+// The `foreign` namespace covers all DOM implementations that aren't HTML5.
+// It opts out of HTML5-specific a11y checks and case-insensitive attribute names.
+export const foreign = 'https://svelte.dev/docs#template-syntax-svelte-options';
+export const html = 'http://www.w3.org/1999/xhtml';
+export const mathml = 'http://www.w3.org/1998/Math/MathML';
+export const svg = 'http://www.w3.org/2000/svg';
+export const xlink = 'http://www.w3.org/1999/xlink';
+export const xml = 'http://www.w3.org/XML/1998/namespace';
+export const xmlns = 'http://www.w3.org/2000/xmlns';
+
+export const valid_namespaces = [
+	'foreign',
+	'html',
+	'mathml',
+	'svg',
+	'xlink',
+	'xml',
+	'xmlns',
+	foreign,
+	html,
+	mathml,
+	svg,
+	xlink,
+	xml,
+	xmlns
+];
+
+export const namespaces: Record<string, string> = { foreign, html, mathml, svg, xlink, xml, xmlns };
diff --git a/src/compiler/utils/nodes_match.ts b/src/compiler/utils/nodes_match.ts
new file mode 100644
index 0000000000..ff841d5f02
--- /dev/null
+++ b/src/compiler/utils/nodes_match.ts
@@ -0,0 +1,32 @@
+export function nodes_match(a, b) {
+	if (!!a !== !!b) return false;
+	if (Array.isArray(a) !== Array.isArray(b)) return false;
+
+	if (a && typeof a === 'object') {
+		if (Array.isArray(a)) {
+			if (a.length !== b.length) return false;
+			return a.every((child, i) => nodes_match(child, b[i]));
+		}
+
+		const a_keys = Object.keys(a).sort();
+		const b_keys = Object.keys(b).sort();
+
+		if (a_keys.length !== b_keys.length) return false;
+
+		let i = a_keys.length;
+		while (i--) {
+			const key = a_keys[i];
+			if (b_keys[i] !== key) return false;
+
+			if (key === 'start' || key === 'end') continue;
+
+			if (!nodes_match(a[key], b[key])) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	return a === b;
+}
diff --git a/src/compiler/utils/patterns.ts b/src/compiler/utils/patterns.ts
new file mode 100644
index 0000000000..071abd791f
--- /dev/null
+++ b/src/compiler/utils/patterns.ts
@@ -0,0 +1,6 @@
+export const whitespace = /[ \t\r\n]/;
+export const start_whitespace = /^[ \t\r\n]*/;
+export const end_whitespace = /[ \t\r\n]*$/;
+export const start_newline = /^\r?\n/;
+
+export const dimensions = /^(?:offset|client)(?:Width|Height)$/;
diff --git a/src/compiler/utils/push_array.ts b/src/compiler/utils/push_array.ts
new file mode 100644
index 0000000000..d2c0913c92
--- /dev/null
+++ b/src/compiler/utils/push_array.ts
@@ -0,0 +1,12 @@
+/**
+ * Pushes all `items` into `array` using `push`, therefore mutating the array.
+ * We do this for memory and perf reasons, and because `array.push(...items)` would
+ * run into a "max call stack size exceeded" error with too many items (~65k).
+ * @param array 
+ * @param items 
+ */
+export function push_array<T>(array: T[], items: T[]): void {
+	for (let i = 0; i < items.length; i++) {
+		array.push(items[i]);
+	}
+}
diff --git a/src/compiler/utils/trim.ts b/src/compiler/utils/trim.ts
new file mode 100644
index 0000000000..05af79cc90
--- /dev/null
+++ b/src/compiler/utils/trim.ts
@@ -0,0 +1,9 @@
+import { start_whitespace, end_whitespace } from './patterns';
+
+export function trim_start(str: string) {
+	return str.replace(start_whitespace, '');
+}
+
+export function trim_end(str: string) {
+	return str.replace(end_whitespace, '');
+}
diff --git a/src/runtime/action/index.ts b/src/runtime/action/index.ts
new file mode 100644
index 0000000000..d7cbf04b12
--- /dev/null
+++ b/src/runtime/action/index.ts
@@ -0,0 +1,42 @@
+/**
+ * Actions can return an object containing the two properties defined in this interface. Both are optional.
+ * - update: An action can have a parameter. This method will be called whenever that parameter changes,
+ *   immediately after Svelte has applied updates to the markup.
+ * - destroy: Method that is called after the element is unmounted
+ *
+ * Example usage:
+ * ```ts
+ * export function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter> {
+ *   // ...
+ *   return {
+ *     update: (updatedParameter) => {...},
+ *     destroy: () => {...}
+ *   };
+ * }
+ * ```
+ *
+ * Docs: https://svelte.dev/docs#template-syntax-element-directives-use-action
+ */
+export interface ActionReturn<Parameter = any> {
+	update?: (parameter: Parameter) => void;
+	destroy?: () => void;
+}
+
+/**
+ * Actions are functions that are called when an element is created.
+ * You can use this interface to type such actions.
+ * The following example defines an action that only works on `<div>` elements
+ * and optionally accepts a parameter which it has a default value for:
+ * ```ts
+ * export const myAction: Action<HTMLDivElement, { someProperty: boolean }> = (node, param = { someProperty: true }) => {
+ *   // ...
+ * }
+ * ```
+ * You can return an object with methods `update` and `destroy` from the function.
+ * See interface `ActionReturn` for more details.
+ *
+ * Docs: https://svelte.dev/docs#template-syntax-element-directives-use-action
+ */
+export interface Action<Element = HTMLElement, Parameter = any> {
+	<Node extends Element>(node: Node, parameter?: Parameter): void | ActionReturn<Parameter>;
+}
diff --git a/src/runtime/ambient.ts b/src/runtime/ambient.ts
new file mode 100644
index 0000000000..09cd9b72f2
--- /dev/null
+++ b/src/runtime/ambient.ts
@@ -0,0 +1,3 @@
+declare module '*.svelte' {
+	export { SvelteComponentDev as default } from 'svelte/internal';
+}
diff --git a/src/runtime/animate/index.ts b/src/runtime/animate/index.ts
new file mode 100644
index 0000000000..ff73bbc29e
--- /dev/null
+++ b/src/runtime/animate/index.ts
@@ -0,0 +1,46 @@
+import { cubicOut } from 'svelte/easing';
+import { is_function } from 'svelte/internal';
+
+// todo: same as Transition, should it be shared?
+export interface AnimationConfig {
+	delay?: number;
+	duration?: number;
+	easing?: (t: number) => number;
+	css?: (t: number, u: number) => string;
+	tick?: (t: number, u: number) => void;
+}
+
+export interface FlipParams {
+	delay?: number;
+	duration?: number | ((len: number) => number);
+	easing?: (t: number) => number;
+}
+
+export function flip(node: Element, { from, to }: { from: DOMRect; to: DOMRect }, params: FlipParams = {}): AnimationConfig {
+	const style = getComputedStyle(node);
+	const transform = style.transform === 'none' ? '' : style.transform;
+
+	const [ox, oy] = style.transformOrigin.split(' ').map(parseFloat);
+	const dx = (from.left + from.width * ox / to.width) - (to.left + ox);
+	const dy = (from.top + from.height * oy / to.height) - (to.top + oy);
+
+	const {
+		delay = 0,
+		duration = (d) => Math.sqrt(d) * 120,
+		easing = cubicOut
+	} = params;
+
+	return {
+		delay,
+		duration: is_function(duration) ? duration(Math.sqrt(dx * dx + dy * dy)) : duration,
+		easing,
+		css: (t, u) => {
+			const x = u * dx;
+			const y = u * dy;
+			const sx = t + u * from.width / to.width;
+			const sy = t + u * from.height / to.height;
+
+			return `transform: ${transform} translate(${x}px, ${y}px) scale(${sx}, ${sy});`;
+		}
+	};
+}
diff --git a/src/runtime/easing/index.ts b/src/runtime/easing/index.ts
new file mode 100644
index 0000000000..c23019b320
--- /dev/null
+++ b/src/runtime/easing/index.ts
@@ -0,0 +1,171 @@
+/*
+Adapted from https://github.com/mattdesl
+Distributed under MIT License https://github.com/mattdesl/eases/blob/master/LICENSE.md
+*/
+
+export { identity as linear } from 'svelte/internal';
+
+export function backInOut(t: number) {
+	const s = 1.70158 * 1.525;
+	if ((t *= 2) < 1) return 0.5 * (t * t * ((s + 1) * t - s));
+	return 0.5 * ((t -= 2) * t * ((s + 1) * t + s) + 2);
+}
+
+export function backIn(t: number) {
+	const s = 1.70158;
+	return t * t * ((s + 1) * t - s);
+}
+
+export function backOut(t: number) {
+	const s = 1.70158;
+	return --t * t * ((s + 1) * t + s) + 1;
+}
+
+export function bounceOut(t: number) {
+	const a = 4.0 / 11.0;
+	const b = 8.0 / 11.0;
+	const c = 9.0 / 10.0;
+
+	const ca = 4356.0 / 361.0;
+	const cb = 35442.0 / 1805.0;
+	const cc = 16061.0 / 1805.0;
+
+	const t2 = t * t;
+
+	return t < a
+		? 7.5625 * t2
+		: t < b
+			? 9.075 * t2 - 9.9 * t + 3.4
+			: t < c
+				? ca * t2 - cb * t + cc
+				: 10.8 * t * t - 20.52 * t + 10.72;
+}
+
+export function bounceInOut(t: number) {
+	return t < 0.5
+		? 0.5 * (1.0 - bounceOut(1.0 - t * 2.0))
+		: 0.5 * bounceOut(t * 2.0 - 1.0) + 0.5;
+}
+
+export function bounceIn(t: number) {
+	return 1.0 - bounceOut(1.0 - t);
+}
+
+export function circInOut(t: number) {
+	if ((t *= 2) < 1) return -0.5 * (Math.sqrt(1 - t * t) - 1);
+	return 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1);
+}
+
+export function circIn(t: number) {
+	return 1.0 - Math.sqrt(1.0 - t * t);
+}
+
+export function circOut(t: number) {
+	return Math.sqrt(1 - --t * t);
+}
+
+export function cubicInOut(t: number) {
+	return t < 0.5 ? 4.0 * t * t * t : 0.5 * Math.pow(2.0 * t - 2.0, 3.0) + 1.0;
+}
+
+export function cubicIn(t: number) {
+	return t * t * t;
+}
+
+export function cubicOut(t: number) {
+	const f = t - 1.0;
+	return f * f * f + 1.0;
+}
+
+export function elasticInOut(t: number) {
+	return t < 0.5
+		? 0.5 *
+				Math.sin(((+13.0 * Math.PI) / 2) * 2.0 * t) *
+				Math.pow(2.0, 10.0 * (2.0 * t - 1.0))
+		: 0.5 *
+				Math.sin(((-13.0 * Math.PI) / 2) * (2.0 * t - 1.0 + 1.0)) *
+				Math.pow(2.0, -10.0 * (2.0 * t - 1.0)) +
+				1.0;
+}
+
+export function elasticIn(t: number) {
+	return Math.sin((13.0 * t * Math.PI) / 2) * Math.pow(2.0, 10.0 * (t - 1.0));
+}
+
+export function elasticOut(t: number) {
+	return (
+		Math.sin((-13.0 * (t + 1.0) * Math.PI) / 2) * Math.pow(2.0, -10.0 * t) + 1.0
+	);
+}
+
+export function expoInOut(t: number) {
+	return t === 0.0 || t === 1.0
+		? t
+		: t < 0.5
+			? +0.5 * Math.pow(2.0, 20.0 * t - 10.0)
+			: -0.5 * Math.pow(2.0, 10.0 - t * 20.0) + 1.0;
+}
+
+export function expoIn(t: number) {
+	return t === 0.0 ? t : Math.pow(2.0, 10.0 * (t - 1.0));
+}
+
+export function expoOut(t: number) {
+	return t === 1.0 ? t : 1.0 - Math.pow(2.0, -10.0 * t);
+}
+
+export function quadInOut(t: number) {
+	t /= 0.5;
+	if (t < 1) return 0.5 * t * t;
+	t--;
+	return -0.5 * (t * (t - 2) - 1);
+}
+
+export function quadIn(t: number) {
+	return t * t;
+}
+
+export function quadOut(t: number) {
+	return -t * (t - 2.0);
+}
+
+export function quartInOut(t: number) {
+	return t < 0.5
+		? +8.0 * Math.pow(t, 4.0)
+		: -8.0 * Math.pow(t - 1.0, 4.0) + 1.0;
+}
+
+export function quartIn(t: number) {
+	return Math.pow(t, 4.0);
+}
+
+export function quartOut(t: number) {
+	return Math.pow(t - 1.0, 3.0) * (1.0 - t) + 1.0;
+}
+
+export function quintInOut(t: number) {
+	if ((t *= 2) < 1) return 0.5 * t * t * t * t * t;
+	return 0.5 * ((t -= 2) * t * t * t * t + 2);
+}
+
+export function quintIn(t: number) {
+	return t * t * t * t * t;
+}
+
+export function quintOut(t: number) {
+	return --t * t * t * t * t + 1;
+}
+
+export function sineInOut(t: number) {
+	return -0.5 * (Math.cos(Math.PI * t) - 1);
+}
+
+export function sineIn(t: number) {
+	const v = Math.cos(t * Math.PI * 0.5);
+	if (Math.abs(v) < 1e-14) return 1;
+	else return 1 - v;
+}
+
+export function sineOut(t: number) {
+	return Math.sin((t * Math.PI) / 2);
+}
diff --git a/src/runtime/index.ts b/src/runtime/index.ts
new file mode 100644
index 0000000000..8e12f9f0ee
--- /dev/null
+++ b/src/runtime/index.ts
@@ -0,0 +1,16 @@
+import './ambient';
+
+export {
+	onMount,
+	onDestroy,
+	beforeUpdate,
+	afterUpdate,
+	setContext,
+	getContext,
+	getAllContexts,
+	hasContext,
+	tick,
+	createEventDispatcher,
+	SvelteComponentDev as SvelteComponent,
+	SvelteComponentTyped
+} from 'svelte/internal';
diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts
new file mode 100644
index 0000000000..3e48010547
--- /dev/null
+++ b/src/runtime/internal/Component.ts
@@ -0,0 +1,263 @@
+import { add_render_callback, flush, schedule_update, dirty_components } from './scheduler';
+import { current_component, set_current_component } from './lifecycle';
+import { blank_object, is_empty, is_function, run, run_all, noop } from './utils';
+import { children, detach, start_hydrating, end_hydrating } from './dom';
+import { transition_in } from './transitions';
+
+/**
+ * INTERNAL, DO NOT USE. Code may change at any time.
+ */
+export interface Fragment {
+	key: string | null;
+	first: null;
+	/* create  */ c: () => void;
+	/* claim   */ l: (nodes: any) => void;
+	/* hydrate */ h: () => void;
+	/* mount   */ m: (target: HTMLElement, anchor: any) => void;
+	/* update  */ p: (ctx: any, dirty: any) => void;
+	/* measure */ r: () => void;
+	/* fix     */ f: () => void;
+	/* animate */ a: () => void;
+	/* intro   */ i: (local: any) => void;
+	/* outro   */ o: (local: any) => void;
+	/* destroy */ d: (detaching: 0 | 1) => void;
+}
+interface T$$ {
+	dirty: number[];
+	ctx: null | any;
+	bound: any;
+	update: () => void;
+	callbacks: any;
+	after_update: any[];
+	props: Record<string, 0 | string>;
+	fragment: null | false | Fragment;
+	not_equal: any;
+	before_update: any[];
+	context: Map<any, any>;
+	on_mount: any[];
+	on_destroy: any[];
+	skip_bound: boolean;
+	on_disconnect: any[];
+	root:Element | ShadowRoot
+}
+
+export function bind(component, name, callback) {
+	const index = component.$$.props[name];
+	if (index !== undefined) {
+		component.$$.bound[index] = callback;
+		callback(component.$$.ctx[index]);
+	}
+}
+
+export function create_component(block) {
+	block && block.c();
+}
+
+export function claim_component(block, parent_nodes) {
+	block && block.l(parent_nodes);
+}
+
+export function mount_component(component, target, anchor, customElement) {
+	const { fragment, on_mount, on_destroy, after_update } = component.$$;
+
+	fragment && fragment.m(target, anchor);
+
+	if (!customElement) {
+		// onMount happens before the initial afterUpdate
+		add_render_callback(() => {
+
+			const new_on_destroy = on_mount.map(run).filter(is_function);
+			if (on_destroy) {
+				on_destroy.push(...new_on_destroy);
+			} else {
+				// Edge case - component was destroyed immediately,
+				// most likely as a result of a binding initialising
+				run_all(new_on_destroy);
+			}
+			component.$$.on_mount = [];
+		});
+	}
+
+	after_update.forEach(add_render_callback);
+}
+
+export function destroy_component(component, detaching) {
+	const $$ = component.$$;
+	if ($$.fragment !== null) {
+		run_all($$.on_destroy);
+
+		$$.fragment && $$.fragment.d(detaching);
+
+		// TODO null out other refs, including component.$$ (but need to
+		// preserve final state?)
+		$$.on_destroy = $$.fragment = null;
+		$$.ctx = [];
+	}
+}
+
+function make_dirty(component, i) {
+	if (component.$$.dirty[0] === -1) {
+		dirty_components.push(component);
+		schedule_update();
+		component.$$.dirty.fill(0);
+	}
+	component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));
+}
+
+export function init(component, options, instance, create_fragment, not_equal, props, append_styles, dirty = [-1]) {
+	const parent_component = current_component;
+	set_current_component(component);
+
+	const $$: T$$ = component.$$ = {
+		fragment: null,
+		ctx: null,
+
+		// state
+		props,
+		update: noop,
+		not_equal,
+		bound: blank_object(),
+
+		// lifecycle
+		on_mount: [],
+		on_destroy: [],
+		on_disconnect: [],
+		before_update: [],
+		after_update: [],
+		context: new Map(options.context || (parent_component ? parent_component.$$.context : [])),
+
+		// everything else
+		callbacks: blank_object(),
+		dirty,
+		skip_bound: false,
+		root: options.target || parent_component.$$.root
+	};
+
+	append_styles && append_styles($$.root);
+
+	let ready = false;
+
+	$$.ctx = instance
+		? instance(component, options.props || {}, (i, ret, ...rest) => {
+			const value = rest.length ? rest[0] : ret;
+			if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
+				if (!$$.skip_bound && $$.bound[i]) $$.bound[i](value);
+				if (ready) make_dirty(component, i);
+			}
+			return ret;
+		})
+		: [];
+
+	$$.update();
+	ready = true;
+	run_all($$.before_update);
+
+	// `false` as a special case of no DOM component
+	$$.fragment = create_fragment ? create_fragment($$.ctx) : false;
+
+	if (options.target) {
+		if (options.hydrate) {
+			start_hydrating();
+			const nodes = children(options.target);
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+			$$.fragment && $$.fragment!.l(nodes);
+			nodes.forEach(detach);
+		} else {
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+			$$.fragment && $$.fragment!.c();
+		}
+
+		if (options.intro) transition_in(component.$$.fragment);
+		mount_component(component, options.target, options.anchor, options.customElement);
+		end_hydrating();
+		flush();
+	}
+
+	set_current_component(parent_component);
+}
+
+export let SvelteElement;
+if (typeof HTMLElement === 'function') {
+	SvelteElement = class extends HTMLElement {
+		$$: T$$;
+		$$set?: ($$props: any) => void;
+		constructor() {
+			super();
+			this.attachShadow({ mode: 'open' });
+		}
+
+		connectedCallback() {
+			const { on_mount } = this.$$;
+			this.$$.on_disconnect = on_mount.map(run).filter(is_function);
+
+			// @ts-ignore todo: improve typings
+			for (const key in this.$$.slotted) {
+				// @ts-ignore todo: improve typings
+				this.appendChild(this.$$.slotted[key]);
+			}
+		}
+
+		attributeChangedCallback(attr, _oldValue, newValue) {
+			this[attr] = newValue;
+		}
+
+		disconnectedCallback() {
+			run_all(this.$$.on_disconnect);
+		}
+
+		$destroy() {
+			destroy_component(this, 1);
+			this.$destroy = noop;
+		}
+
+		$on(type, callback) {
+			// TODO should this delegate to addEventListener?
+			const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));
+			callbacks.push(callback);
+
+			return () => {
+				const index = callbacks.indexOf(callback);
+				if (index !== -1) callbacks.splice(index, 1);
+			};
+		}
+
+		$set($$props) {
+			if (this.$$set && !is_empty($$props)) {
+				this.$$.skip_bound = true;
+				this.$$set($$props);
+				this.$$.skip_bound = false;
+			}
+		}
+	};
+}
+
+/**
+ * Base class for Svelte components. Used when dev=false.
+ */
+export class SvelteComponent {
+	$$: T$$;
+	$$set?: ($$props: any) => void;
+
+	$destroy() {
+		destroy_component(this, 1);
+		this.$destroy = noop;
+	}
+
+	$on(type, callback) {
+		const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));
+		callbacks.push(callback);
+
+		return () => {
+			const index = callbacks.indexOf(callback);
+			if (index !== -1) callbacks.splice(index, 1);
+		};
+	}
+
+	$set($$props) {
+		if (this.$$set && !is_empty($$props)) {
+			this.$$.skip_bound = true;
+			this.$$set($$props);
+			this.$$.skip_bound = false;
+		}
+	}
+}
diff --git a/src/runtime/internal/animations.ts b/src/runtime/internal/animations.ts
new file mode 100644
index 0000000000..215fa7d814
--- /dev/null
+++ b/src/runtime/internal/animations.ts
@@ -0,0 +1,103 @@
+import { identity as linear, noop } from './utils';
+import { now } from './environment';
+import { loop } from './loop';
+import { create_rule, delete_rule } from './style_manager';
+import { AnimationConfig } from '../animate';
+
+
+//todo: documentation says it is DOMRect, but in IE it would be ClientRect
+type PositionRect = DOMRect | ClientRect;
+
+type AnimationFn = (node: Element, { from, to }: { from: PositionRect; to: PositionRect }, params: any) => AnimationConfig;
+
+export function create_animation(node: Element & ElementCSSInlineStyle, from: PositionRect, fn: AnimationFn, params) {
+	if (!from) return noop;
+
+	const to = node.getBoundingClientRect();
+	if (from.left === to.left && from.right === to.right && from.top === to.top && from.bottom === to.bottom) return noop;
+
+
+	const {
+		delay = 0,
+		duration = 300,
+		easing = linear,
+		// @ts-ignore todo: should this be separated from destructuring? Or start/end added to public api and documentation?
+		start: start_time = now() + delay,
+		// @ts-ignore todo:
+		end = start_time + duration,
+		tick = noop,
+		css
+	} = fn(node, { from, to }, params);
+
+	let running = true;
+	let started = false;
+	let name;
+
+	function start() {
+		if (css) {
+			name = create_rule(node, 0, 1, duration, delay, easing, css);
+		}
+
+		if (!delay) {
+			started = true;
+		}
+	}
+
+	function stop() {
+		if (css) delete_rule(node, name);
+		running = false;
+	}
+
+	loop(now => {
+		if (!started && now >= start_time) {
+			started = true;
+		}
+
+		if (started && now >= end) {
+			tick(1, 0);
+			stop();
+		}
+
+		if (!running) {
+			return false;
+		}
+
+		if (started) {
+			const p = now - start_time;
+			const t = 0 + 1 * easing(p / duration);
+			tick(t, 1 - t);
+		}
+
+		return true;
+	});
+
+	start();
+
+	tick(0, 1);
+
+	return stop;
+}
+
+export function fix_position(node: Element & ElementCSSInlineStyle) {
+	const style = getComputedStyle(node);
+
+	if (style.position !== 'absolute' && style.position !== 'fixed') {
+		const { width, height } = style;
+		const a = node.getBoundingClientRect();
+		node.style.position = 'absolute';
+		node.style.width = width;
+		node.style.height = height;
+		add_transform(node, a);
+	}
+}
+
+export function add_transform(node: Element & ElementCSSInlineStyle, a: PositionRect) {
+	const b = node.getBoundingClientRect();
+
+	if (a.left !== b.left || a.top !== b.top) {
+		const style = getComputedStyle(node);
+		const transform = style.transform === 'none' ? '' : style.transform;
+
+		node.style.transform = `${transform} translate(${a.left - b.left}px, ${a.top - b.top}px)`;
+	}
+}
diff --git a/src/runtime/internal/await_block.ts b/src/runtime/internal/await_block.ts
new file mode 100644
index 0000000000..ea6e8a187f
--- /dev/null
+++ b/src/runtime/internal/await_block.ts
@@ -0,0 +1,99 @@
+import { is_promise } from './utils';
+import { check_outros, group_outros, transition_in, transition_out } from './transitions';
+import { flush } from './scheduler';
+import { get_current_component, set_current_component } from './lifecycle';
+
+export function handle_promise(promise, info) {
+	const token = info.token = {};
+
+	function update(type, index, key?, value?) {
+		if (info.token !== token) return;
+
+		info.resolved = value;
+
+		let child_ctx = info.ctx;
+
+		if (key !== undefined) {
+			child_ctx = child_ctx.slice();
+			child_ctx[key] = value;
+		}
+
+		const block = type && (info.current = type)(child_ctx);
+
+		let needs_flush = false;
+
+		if (info.block) {
+			if (info.blocks) {
+				info.blocks.forEach((block, i) => {
+					if (i !== index && block) {
+						group_outros();
+						transition_out(block, 1, 1, () => {
+							if (info.blocks[i] === block) {
+								info.blocks[i] = null;
+							}
+						});
+						check_outros();
+					}
+				});
+			} else {
+				info.block.d(1);
+			}
+
+			block.c();
+			transition_in(block, 1);
+			block.m(info.mount(), info.anchor);
+
+			needs_flush = true;
+		}
+
+		info.block = block;
+		if (info.blocks) info.blocks[index] = block;
+
+		if (needs_flush) {
+			flush();
+		}
+	}
+
+	if (is_promise(promise)) {
+		const current_component = get_current_component();
+		promise.then(value => {
+			set_current_component(current_component);
+			update(info.then, 1, info.value, value);
+			set_current_component(null);
+		}, error => {
+			set_current_component(current_component);
+			update(info.catch, 2, info.error, error);
+			set_current_component(null);
+			if (!info.hasCatch) {
+				throw error;
+			}
+		});
+
+		// if we previously had a then/catch block, destroy it
+		if (info.current !== info.pending) {
+			update(info.pending, 0);
+			return true;
+		}
+	} else {
+		if (info.current !== info.then) {
+			update(info.then, 1, info.value, promise);
+			return true;
+		}
+
+		info.resolved = promise;
+	}
+}
+
+export function update_await_block_branch(info, ctx, dirty) {
+	const child_ctx = ctx.slice();
+	const { resolved } = info;
+
+	if (info.current === info.then) {
+		child_ctx[info.value] = resolved;
+	}
+	if (info.current === info.catch) {
+		child_ctx[info.error] = resolved;
+	}
+
+	info.block.p(child_ctx, dirty);
+}
diff --git a/src/runtime/internal/dev.ts b/src/runtime/internal/dev.ts
new file mode 100644
index 0000000000..3144911672
--- /dev/null
+++ b/src/runtime/internal/dev.ts
@@ -0,0 +1,271 @@
+import { custom_event, append, append_hydration, insert, insert_hydration, detach, listen, attr } from './dom';
+import { SvelteComponent } from './Component';
+import { is_void } from '../../shared/utils/names';
+
+export function dispatch_dev<T=any>(type: string, detail?: T) {
+	document.dispatchEvent(custom_event(type, { version: '__VERSION__', ...detail }, { bubbles: true }));
+}
+
+export function append_dev(target: Node, node: Node) {
+	dispatch_dev('SvelteDOMInsert', { target, node });
+	append(target, node);
+}
+
+export function append_hydration_dev(target: Node, node: Node) {
+	dispatch_dev('SvelteDOMInsert', { target, node });
+	append_hydration(target, node);
+}
+
+export function insert_dev(target: Node, node: Node, anchor?: Node) {
+	dispatch_dev('SvelteDOMInsert', { target, node, anchor });
+	insert(target, node, anchor);
+}
+
+export function insert_hydration_dev(target: Node, node: Node, anchor?: Node) {
+	dispatch_dev('SvelteDOMInsert', { target, node, anchor });
+	insert_hydration(target, node, anchor);
+}
+
+export function detach_dev(node: Node) {
+	dispatch_dev('SvelteDOMRemove', { node });
+	detach(node);
+}
+
+export function detach_between_dev(before: Node, after: Node) {
+	while (before.nextSibling && before.nextSibling !== after) {
+		detach_dev(before.nextSibling);
+	}
+}
+
+export function detach_before_dev(after: Node) {
+	while (after.previousSibling) {
+		detach_dev(after.previousSibling);
+	}
+}
+
+export function detach_after_dev(before: Node) {
+	while (before.nextSibling) {
+		detach_dev(before.nextSibling);
+	}
+}
+
+export function listen_dev(node: Node, event: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | EventListenerOptions, has_prevent_default?: boolean, has_stop_propagation?: boolean) {
+	const modifiers = options === true ? [ 'capture' ] : options ? Array.from(Object.keys(options)) : [];
+	if (has_prevent_default) modifiers.push('preventDefault');
+	if (has_stop_propagation) modifiers.push('stopPropagation');
+
+	dispatch_dev('SvelteDOMAddEventListener', { node, event, handler, modifiers });
+
+	const dispose = listen(node, event, handler, options);
+	return () => {
+		dispatch_dev('SvelteDOMRemoveEventListener', { node, event, handler, modifiers });
+		dispose();
+	};
+}
+
+export function attr_dev(node: Element, attribute: string, value?: string) {
+	attr(node, attribute, value);
+
+	if (value == null) dispatch_dev('SvelteDOMRemoveAttribute', { node, attribute });
+	else dispatch_dev('SvelteDOMSetAttribute', { node, attribute, value });
+}
+
+export function prop_dev(node: Element, property: string, value?: any) {
+	node[property] = value;
+
+	dispatch_dev('SvelteDOMSetProperty', { node, property, value });
+}
+
+export function dataset_dev(node: HTMLElement, property: string, value?: any) {
+	node.dataset[property] = value;
+
+	dispatch_dev('SvelteDOMSetDataset', { node, property, value });
+}
+
+export function set_data_dev(text, data) {
+	data = '' + data;
+	if (text.wholeText === data) return;
+
+	dispatch_dev('SvelteDOMSetData', { node: text, data });
+	text.data = data;
+}
+
+export function validate_each_argument(arg) {
+	if (typeof arg !== 'string' && !(arg && typeof arg === 'object' && 'length' in arg)) {
+		let msg = '{#each} only iterates over array-like objects.';
+		if (typeof Symbol === 'function' && arg && Symbol.iterator in arg) {
+			msg += ' You can use a spread to convert this iterable into an array.';
+		}
+		throw new Error(msg);
+	}
+}
+
+export function validate_slots(name, slot, keys) {
+	for (const slot_key of Object.keys(slot)) {
+		if (!~keys.indexOf(slot_key)) {
+			console.warn(`<${name}> received an unexpected slot "${slot_key}".`);
+		}
+	}
+}
+
+export function validate_dynamic_element(tag: unknown) {
+	const is_string = typeof tag === 'string';
+	if (tag && !is_string) {
+		throw new Error('<svelte:element> expects "this" attribute to be a string.');
+	}
+}
+
+export function validate_void_dynamic_element(tag: undefined | string) {
+	if (tag && is_void(tag)) {
+		throw new Error(`<svelte:element this="${tag}"> is self-closing and cannot have content.`);
+	}
+}
+
+type Props = Record<string, any>;
+export interface SvelteComponentDev {
+	$set(props?: Props): void;
+	$on(event: string, callback: (event: any) => void): () => void;
+	$destroy(): void;
+	[accessor: string]: any;
+}
+interface IComponentOptions<Props extends Record<string, any> = Record<string, any>> {
+	target: Element | ShadowRoot;
+	anchor?: Element;
+	props?: Props;
+	context?: Map<any, any>;
+	hydrate?: boolean;
+	intro?: boolean;
+	$$inline?: boolean;
+}
+
+/**
+ * Base class for Svelte components with some minor dev-enhancements. Used when dev=true.
+ */
+export class SvelteComponentDev extends SvelteComponent {
+	/**
+	 * @private
+	 * For type checking capabilities only.
+	 * Does not exist at runtime.
+	 * ### DO NOT USE!
+	 */
+	$$prop_def: Props;
+	/**
+	 * @private
+	 * For type checking capabilities only.
+	 * Does not exist at runtime.
+	 * ### DO NOT USE!
+	 */
+	$$events_def: any;
+	/**
+	 * @private
+	 * For type checking capabilities only.
+	 * Does not exist at runtime.
+	 * ### DO NOT USE!
+	 */
+	$$slot_def: any;
+
+	constructor(options: IComponentOptions) {
+		if (!options || (!options.target && !options.$$inline)) {
+			throw new Error("'target' is a required option");
+		}
+
+		super();
+	}
+
+	$destroy() {
+		super.$destroy();
+		this.$destroy = () => {
+			console.warn('Component was already destroyed'); // eslint-disable-line no-console
+		};
+	}
+
+	$capture_state() {}
+
+	$inject_state() {}
+}
+
+// TODO https://github.com/microsoft/TypeScript/issues/41770 is the reason
+// why we have to split out SvelteComponentTyped to not break existing usage of SvelteComponent.
+// Try to find a better way for Svelte 4.0.
+
+export interface SvelteComponentTyped<
+	Props extends Record<string, any> = any,
+	Events extends Record<string, any> = any,
+	Slots extends Record<string, any> = any // eslint-disable-line @typescript-eslint/no-unused-vars
+> {
+	$set(props?: Partial<Props>): void;
+	$on<K extends Extract<keyof Events, string>>(type: K, callback: (e: Events[K]) => void): () => void;
+	$destroy(): void;
+	[accessor: string]: any;
+}
+/**
+ * Base class to create strongly typed Svelte components.
+ * This only exists for typing purposes and should be used in `.d.ts` files.
+ *
+ * ### Example:
+ *
+ * You have component library on npm called `component-library`, from which
+ * you export a component called `MyComponent`. For Svelte+TypeScript users,
+ * you want to provide typings. Therefore you create a `index.d.ts`:
+ * ```ts
+ * import { SvelteComponentTyped } from "svelte";
+ * export class MyComponent extends SvelteComponentTyped<{foo: string}> {}
+ * ```
+ * Typing this makes it possible for IDEs like VS Code with the Svelte extension
+ * to provide intellisense and to use the component like this in a Svelte file
+ * with TypeScript:
+ * ```svelte
+ * <script lang="ts">
+ * 	import { MyComponent } from "component-library";
+ * </script>
+ * <MyComponent foo={'bar'} />
+ * ```
+ *
+ * #### Why not make this part of `SvelteComponent(Dev)`?
+ * Because
+ * ```ts
+ * class ASubclassOfSvelteComponent extends SvelteComponent<{foo: string}> {}
+ * const component: typeof SvelteComponent = ASubclassOfSvelteComponent;
+ * ```
+ * will throw a type error, so we need to separate the more strictly typed class.
+ */
+export class SvelteComponentTyped<
+	Props extends Record<string, any> = any,
+	Events extends Record<string, any> = any,
+	Slots extends Record<string, any> = any
+> extends SvelteComponentDev {
+	/**
+	 * @private
+	 * For type checking capabilities only.
+	 * Does not exist at runtime.
+	 * ### DO NOT USE!
+	 */
+	$$prop_def: Props;
+	/**
+	 * @private
+	 * For type checking capabilities only.
+	 * Does not exist at runtime.
+	 * ### DO NOT USE!
+	 */
+	$$events_def: Events;
+	/**
+	 * @private
+	 * For type checking capabilities only.
+	 * Does not exist at runtime.
+	 * ### DO NOT USE!
+	 */
+	$$slot_def: Slots;
+
+	constructor(options: IComponentOptions<Props>) {
+		super(options);
+	}
+}
+
+export function loop_guard(timeout) {
+	const start = Date.now();
+	return () => {
+		if (Date.now() - start > timeout) {
+			throw new Error('Infinite loop detected');
+		}
+	};
+}
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
new file mode 100644
index 0000000000..cadc1abbaa
--- /dev/null
+++ b/src/runtime/internal/dom.ts
@@ -0,0 +1,742 @@
+import { has_prop } from './utils';
+
+// Track which nodes are claimed during hydration. Unclaimed nodes can then be removed from the DOM
+// at the end of hydration without touching the remaining nodes.
+let is_hydrating = false;
+
+export function start_hydrating() {
+	is_hydrating = true;
+}
+export function end_hydrating() {
+	is_hydrating = false;
+}
+
+type NodeEx = Node & {
+	claim_order?: number,
+	hydrate_init? : true,
+	actual_end_child?: NodeEx,
+	childNodes: NodeListOf<NodeEx>,
+};
+
+function upper_bound(low: number, high: number, key: (index: number) => number, value: number) {
+	// Return first index of value larger than input value in the range [low, high)
+	while (low < high) {
+		const mid = low + ((high - low) >> 1);
+		if (key(mid) <= value) {
+			low = mid + 1;
+		} else {
+			high = mid;
+		}
+	}
+	return low;
+}
+
+function init_hydrate(target: NodeEx) {
+	if (target.hydrate_init) return;
+	target.hydrate_init = true;
+
+	type NodeEx2 = NodeEx & {claim_order: number};
+
+	// We know that all children have claim_order values since the unclaimed have been detached if target is not <head>
+	let children: ArrayLike<NodeEx2> = target.childNodes as NodeListOf<NodeEx2>;
+
+	// If target is <head>, there may be children without claim_order
+	if (target.nodeName === 'HEAD') {
+		const myChildren = [];
+		for (let i = 0; i < children.length; i++) {
+			const node = children[i];
+			if (node.claim_order !== undefined) {
+				myChildren.push(node);
+			}
+		}
+		children = myChildren;
+	}
+
+	/*
+	* Reorder claimed children optimally.
+	* We can reorder claimed children optimally by finding the longest subsequence of
+	* nodes that are already claimed in order and only moving the rest. The longest
+	* subsequence subsequence of nodes that are claimed in order can be found by
+	* computing the longest increasing subsequence of .claim_order values.
+	*
+	* This algorithm is optimal in generating the least amount of reorder operations
+	* possible.
+	*
+	* Proof:
+	* We know that, given a set of reordering operations, the nodes that do not move
+	* always form an increasing subsequence, since they do not move among each other
+	* meaning that they must be already ordered among each other. Thus, the maximal
+	* set of nodes that do not move form a longest increasing subsequence.
+	*/
+
+	// Compute longest increasing subsequence
+	// m: subsequence length j => index k of smallest value that ends an increasing subsequence of length j
+	const m = new Int32Array(children.length + 1);
+	// Predecessor indices + 1
+	const p = new Int32Array(children.length);
+
+	m[0] = -1;
+	let longest = 0;
+	for (let i = 0; i < children.length; i++) {
+		const current = children[i].claim_order;
+		// Find the largest subsequence length such that it ends in a value less than our current value
+
+		// upper_bound returns first greater value, so we subtract one
+		// with fast path for when we are on the current longest subsequence
+		const seqLen = ((longest > 0 && children[m[longest]].claim_order <= current) ? longest + 1 : upper_bound(1, longest, idx => children[m[idx]].claim_order, current)) - 1;
+
+		p[i] = m[seqLen] + 1;
+
+		const newLen = seqLen + 1;
+
+		// We can guarantee that current is the smallest value. Otherwise, we would have generated a longer sequence.
+		m[newLen] = i;
+
+		longest = Math.max(newLen, longest);
+	}
+
+	// The longest increasing subsequence of nodes (initially reversed)
+	const lis: NodeEx2[] = [];
+	// The rest of the nodes, nodes that will be moved
+	const toMove: NodeEx2[] = [];
+	let last = children.length - 1;
+	for (let cur = m[longest] + 1; cur != 0; cur = p[cur - 1]) {
+		lis.push(children[cur - 1]);
+		for (; last >= cur; last--) {
+			toMove.push(children[last]);
+		}
+		last--;
+	}
+	for (; last >= 0; last--) {
+		toMove.push(children[last]);
+	}
+	lis.reverse();
+
+	// We sort the nodes being moved to guarantee that their insertion order matches the claim order
+	toMove.sort((a, b) => a.claim_order - b.claim_order);
+
+	// Finally, we move the nodes
+	for (let i = 0, j = 0; i < toMove.length; i++) {
+		while (j < lis.length && toMove[i].claim_order >= lis[j].claim_order) {
+			j++;
+		}
+		const anchor = j < lis.length ? lis[j] : null;
+		target.insertBefore(toMove[i], anchor);
+	}
+}
+
+export function append(target: Node, node: Node) {
+	target.appendChild(node);
+}
+
+export function append_styles(
+	target: Node,
+	style_sheet_id: string,
+	styles: string
+) {
+	const append_styles_to = get_root_for_style(target);
+
+	if (!append_styles_to.getElementById(style_sheet_id)) {
+		const style = element('style');
+		style.id = style_sheet_id;
+		style.textContent = styles;
+		append_stylesheet(append_styles_to, style);
+	}
+}
+
+export function get_root_for_style(node: Node): ShadowRoot | Document {
+	if (!node) return document;
+
+	const root = node.getRootNode ? node.getRootNode() : node.ownerDocument;
+	if (root && (root as ShadowRoot).host) {
+		return root as ShadowRoot;
+	}
+	return node.ownerDocument;
+}
+
+export function append_empty_stylesheet(node: Node) {
+	const style_element = element('style') as HTMLStyleElement;
+	append_stylesheet(get_root_for_style(node), style_element);
+	return style_element.sheet as CSSStyleSheet;
+}
+
+function append_stylesheet(node: ShadowRoot | Document, style: HTMLStyleElement) {
+	append((node as Document).head || node, style);
+}
+
+export function append_hydration(target: NodeEx, node: NodeEx) {
+	if (is_hydrating) {
+		init_hydrate(target);
+
+		if ((target.actual_end_child === undefined) || ((target.actual_end_child !== null) && (target.actual_end_child.parentElement !== target))) {
+			target.actual_end_child = target.firstChild;
+		}
+
+		// Skip nodes of undefined ordering
+		while ((target.actual_end_child !== null) && (target.actual_end_child.claim_order === undefined)) {
+			target.actual_end_child = target.actual_end_child.nextSibling;
+		}
+
+		if (node !== target.actual_end_child) {
+			// We only insert if the ordering of this node should be modified or the parent node is not target
+			if (node.claim_order !== undefined || node.parentNode !== target) {
+				target.insertBefore(node, target.actual_end_child);
+			}
+		} else {
+			target.actual_end_child = node.nextSibling;
+		}
+	} else if (node.parentNode !== target || node.nextSibling !== null) {
+		target.appendChild(node);
+	}
+}
+
+export function insert(target: Node, node: Node, anchor?: Node) {
+	target.insertBefore(node, anchor || null);
+}
+
+export function insert_hydration(target: NodeEx, node: NodeEx, anchor?: NodeEx) {
+	if (is_hydrating && !anchor) {
+		append_hydration(target, node);
+	} else if (node.parentNode !== target || node.nextSibling != anchor) {
+		target.insertBefore(node, anchor || null);
+	}
+}
+
+export function detach(node: Node) {
+	node.parentNode.removeChild(node);
+}
+
+export function destroy_each(iterations, detaching) {
+	for (let i = 0; i < iterations.length; i += 1) {
+		if (iterations[i]) iterations[i].d(detaching);
+	}
+}
+
+export function element<K extends keyof HTMLElementTagNameMap>(name: K) {
+	return document.createElement<K>(name);
+}
+
+export function element_is<K extends keyof HTMLElementTagNameMap>(name: K, is: string) {
+	return document.createElement<K>(name, { is });
+}
+
+export function object_without_properties<T, K extends keyof T>(obj: T, exclude: K[]) {
+	const target = {} as Pick<T, Exclude<keyof T, K>>;
+	for (const k in obj) {
+		if (
+			has_prop(obj, k)
+			// @ts-ignore
+			&& exclude.indexOf(k) === -1
+		) {
+			// @ts-ignore
+			target[k] = obj[k];
+		}
+	}
+	return target;
+}
+
+export function svg_element<K extends keyof SVGElementTagNameMap>(name: K): SVGElement {
+	return document.createElementNS<K>('http://www.w3.org/2000/svg', name);
+}
+
+export function text(data: string) {
+	return document.createTextNode(data);
+}
+
+export function space() {
+	return text(' ');
+}
+
+export function empty() {
+	return text('');
+}
+
+export function listen(node: EventTarget, event: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | EventListenerOptions) {
+	node.addEventListener(event, handler, options);
+	return () => node.removeEventListener(event, handler, options);
+}
+
+export function prevent_default(fn) {
+	return function(event) {
+		event.preventDefault();
+		// @ts-ignore
+		return fn.call(this, event);
+	};
+}
+
+export function stop_propagation(fn) {
+	return function(event) {
+		event.stopPropagation();
+		// @ts-ignore
+		return fn.call(this, event);
+	};
+}
+
+export function self(fn) {
+	return function(event) {
+		// @ts-ignore
+		if (event.target === this) fn.call(this, event);
+	};
+}
+
+export function trusted(fn) {
+	return function(event) {
+		// @ts-ignore
+		if (event.isTrusted) fn.call(this, event);
+	};
+}
+
+export function attr(node: Element, attribute: string, value?: string) {
+	if (value == null) node.removeAttribute(attribute);
+	else if (node.getAttribute(attribute) !== value) node.setAttribute(attribute, value);
+}
+
+export function set_attributes(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string }) {
+	// @ts-ignore
+	const descriptors = Object.getOwnPropertyDescriptors(node.__proto__);
+	for (const key in attributes) {
+		if (attributes[key] == null) {
+			node.removeAttribute(key);
+		} else if (key === 'style') {
+			node.style.cssText = attributes[key];
+		} else if (key === '__value') {
+			(node as any).value = node[key] = attributes[key];
+		} else if (descriptors[key] && descriptors[key].set) {
+			node[key] = attributes[key];
+		} else {
+			attr(node, key, attributes[key]);
+		}
+	}
+}
+
+export function set_svg_attributes(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string }) {
+	for (const key in attributes) {
+		attr(node, key, attributes[key]);
+	}
+}
+
+export function set_custom_element_data(node, prop, value) {
+	if (prop in node) {
+		node[prop] = typeof node[prop] === 'boolean' && value === '' ? true : value;
+	} else {
+		attr(node, prop, value);
+	}
+}
+
+export function xlink_attr(node, attribute, value) {
+	node.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value);
+}
+
+export function get_binding_group_value(group, __value, checked) {
+	const value = new Set();
+	for (let i = 0; i < group.length; i += 1) {
+		if (group[i].checked) value.add(group[i].__value);
+	}
+	if (!checked) {
+		value.delete(__value);
+	}
+	return Array.from(value);
+}
+
+export function to_number(value) {
+	return value === '' ? null : +value;
+}
+
+export function time_ranges_to_array(ranges) {
+	const array = [];
+	for (let i = 0; i < ranges.length; i += 1) {
+		array.push({ start: ranges.start(i), end: ranges.end(i) });
+	}
+	return array;
+}
+
+type ChildNodeEx = ChildNode & NodeEx;
+
+type ChildNodeArray = ChildNodeEx[] & {
+	claim_info?: {
+		/**
+		 * The index of the last claimed element
+		 */
+		last_index: number;
+		/**
+		 * The total number of elements claimed
+		 */
+		total_claimed: number;
+	}
+};
+
+export function children(element: Element) {
+	return Array.from(element.childNodes);
+}
+
+function init_claim_info(nodes: ChildNodeArray) {
+	if (nodes.claim_info === undefined) {
+		nodes.claim_info = {last_index: 0, total_claimed: 0};
+	}
+}
+
+function claim_node<R extends ChildNodeEx>(nodes: ChildNodeArray, predicate: (node: ChildNodeEx) => node is R, processNode: (node: ChildNodeEx) => ChildNodeEx | undefined, createNode: () => R, dontUpdateLastIndex: boolean = false) {
+	// Try to find nodes in an order such that we lengthen the longest increasing subsequence
+	init_claim_info(nodes);
+
+	const resultNode = (() => {
+		// We first try to find an element after the previous one
+		for (let i = nodes.claim_info.last_index; i < nodes.length; i++) {
+			const node = nodes[i];
+
+			if (predicate(node)) {
+				const replacement = processNode(node);
+
+				if (replacement === undefined) {
+					nodes.splice(i, 1);
+				} else {
+					nodes[i] = replacement;
+				}
+				if (!dontUpdateLastIndex) {
+					nodes.claim_info.last_index = i;
+				}
+				return node;
+			}
+		}
+
+
+		// Otherwise, we try to find one before
+		// We iterate in reverse so that we don't go too far back
+		for (let i = nodes.claim_info.last_index - 1; i >= 0; i--) {
+			const node = nodes[i];
+
+			if (predicate(node)) {
+				const replacement = processNode(node);
+
+				if (replacement === undefined) {
+					nodes.splice(i, 1);
+				} else {
+					nodes[i] = replacement;
+				}
+				if (!dontUpdateLastIndex) {
+					nodes.claim_info.last_index = i;
+				} else if (replacement === undefined) {
+					// Since we spliced before the last_index, we decrease it
+					nodes.claim_info.last_index--;
+				}
+				return node;
+			}
+		}
+
+		// If we can't find any matching node, we create a new one
+		return createNode();
+	})();
+
+	resultNode.claim_order = nodes.claim_info.total_claimed;
+	nodes.claim_info.total_claimed += 1;
+	return resultNode;
+}
+
+function claim_element_base(nodes: ChildNodeArray, name: string, attributes: { [key: string]: boolean }, create_element: (name: string) => Element | SVGElement) {
+	return claim_node<Element | SVGElement>(
+		nodes,
+		(node: ChildNode): node is Element | SVGElement => node.nodeName === name,
+		(node: Element) => {
+			const remove = [];
+			for (let j = 0; j < node.attributes.length; j++) {
+				const attribute = node.attributes[j];
+				if (!attributes[attribute.name]) {
+					remove.push(attribute.name);
+				}
+			}
+			remove.forEach(v => node.removeAttribute(v));
+			return undefined;
+		},
+		() => create_element(name)
+	);
+}
+
+export function claim_element(nodes: ChildNodeArray, name: string, attributes: { [key: string]: boolean }) {
+	return claim_element_base(nodes, name, attributes, element);
+}
+
+export function claim_svg_element(nodes: ChildNodeArray, name: string, attributes: { [key: string]: boolean }) {
+	return claim_element_base(nodes, name, attributes, svg_element);
+}
+
+export function claim_text(nodes: ChildNodeArray, data) {
+	return claim_node<Text>(
+		nodes,
+		(node: ChildNode): node is Text => node.nodeType === 3,
+		(node: Text) => {
+			const dataStr = '' + data;
+			if (node.data.startsWith(dataStr)) {
+				if (node.data.length !== dataStr.length) {
+					return node.splitText(dataStr.length);
+				}
+			} else {
+				node.data = dataStr;
+			}
+		},
+		() => text(data),
+		true	// Text nodes should not update last index since it is likely not worth it to eliminate an increasing subsequence of actual elements
+	);
+}
+
+export function claim_space(nodes) {
+	return claim_text(nodes, ' ');
+}
+
+function find_comment(nodes, text, start) {
+	for (let i = start; i < nodes.length; i += 1) {
+		const node = nodes[i];
+		if (node.nodeType === 8 /* comment node */ && node.textContent.trim() === text) {
+			return i;
+		}
+	}
+	return nodes.length;
+}
+
+
+export function claim_html_tag(nodes, is_svg: boolean) {
+	// find html opening tag
+	const start_index = find_comment(nodes, 'HTML_TAG_START', 0);
+	const end_index = find_comment(nodes, 'HTML_TAG_END', start_index);
+	if (start_index === end_index) {
+		return new HtmlTagHydration(undefined, is_svg);
+	}
+
+	init_claim_info(nodes);
+	const html_tag_nodes = nodes.splice(start_index, end_index - start_index + 1);
+	detach(html_tag_nodes[0]);
+	detach(html_tag_nodes[html_tag_nodes.length - 1]);
+	const claimed_nodes = html_tag_nodes.slice(1, html_tag_nodes.length - 1);
+	for (const n of claimed_nodes) {
+		n.claim_order = nodes.claim_info.total_claimed;
+		nodes.claim_info.total_claimed += 1;
+	}
+	return new HtmlTagHydration(claimed_nodes, is_svg);
+}
+
+export function set_data(text, data) {
+	data = '' + data;
+	if (text.wholeText !== data) text.data = data;
+}
+
+export function set_input_value(input, value) {
+	input.value = value == null ? '' : value;
+}
+
+export function set_input_type(input, type) {
+	try {
+		input.type = type;
+	} catch (e) {
+		// do nothing
+	}
+}
+
+export function set_style(node, key, value, important) {
+	if (value === null) {
+		node.style.removeProperty(key);
+	} else {
+		node.style.setProperty(key, value, important ? 'important' : '');
+	}
+}
+
+export function select_option(select, value) {
+	for (let i = 0; i < select.options.length; i += 1) {
+		const option = select.options[i];
+
+		if (option.__value === value) {
+			option.selected = true;
+			return;
+		}
+	}
+
+	select.selectedIndex = -1; // no option should be selected
+}
+
+export function select_options(select, value) {
+	for (let i = 0; i < select.options.length; i += 1) {
+		const option = select.options[i];
+		option.selected = ~value.indexOf(option.__value);
+	}
+}
+
+export function select_value(select) {
+	const selected_option = select.querySelector(':checked') || select.options[0];
+	return selected_option && selected_option.__value;
+}
+
+export function select_multiple_value(select) {
+	return [].map.call(select.querySelectorAll(':checked'), option => option.__value);
+}
+
+// unfortunately this can't be a constant as that wouldn't be tree-shakeable
+// so we cache the result instead
+let crossorigin: boolean;
+
+export function is_crossorigin() {
+	if (crossorigin === undefined) {
+		crossorigin = false;
+
+		try {
+			if (typeof window !== 'undefined' && window.parent) {
+				void window.parent.document;
+			}
+		} catch (error) {
+			crossorigin = true;
+		}
+	}
+
+	return crossorigin;
+}
+
+export function add_resize_listener(node: HTMLElement, fn: () => void) {
+	const computed_style = getComputedStyle(node);
+
+	if (computed_style.position === 'static') {
+		node.style.position = 'relative';
+	}
+
+	const iframe = element('iframe');
+	iframe.setAttribute('style',
+		'display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; ' +
+		'overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: -1;'
+	);
+	iframe.setAttribute('aria-hidden', 'true');
+	iframe.tabIndex = -1;
+
+	const crossorigin = is_crossorigin();
+
+	let unsubscribe: () => void;
+
+	if (crossorigin) {
+		iframe.src = "data:text/html,<script>onresize=function(){parent.postMessage(0,'*')}</script>";
+		unsubscribe = listen(window, 'message', (event: MessageEvent) => {
+			if (event.source === iframe.contentWindow) fn();
+		});
+	} else {
+		iframe.src = 'about:blank';
+		iframe.onload = () => {
+			unsubscribe = listen(iframe.contentWindow, 'resize', fn);
+		};
+	}
+
+	append(node, iframe);
+
+	return () => {
+		if (crossorigin) {
+			unsubscribe();
+		} else if (unsubscribe && iframe.contentWindow) {
+			unsubscribe();
+		}
+
+		detach(iframe);
+	};
+}
+
+export function toggle_class(element, name, toggle) {
+	element.classList[toggle ? 'add' : 'remove'](name);
+}
+
+export function custom_event<T=any>(type: string, detail?: T, { bubbles = false, cancelable = false } = {}): CustomEvent<T> {
+	const e: CustomEvent<T> = document.createEvent('CustomEvent');
+	e.initCustomEvent(type, bubbles, cancelable, detail);
+	return e;
+}
+
+export function query_selector_all(selector: string, parent: HTMLElement = document.body) {
+	return Array.from(parent.querySelectorAll(selector)) as ChildNodeArray;
+}
+
+export class HtmlTag {
+	private is_svg = false;
+	// parent for creating node
+	e: HTMLElement | SVGElement;
+	// html tag nodes
+	n: ChildNode[];
+	// target
+	t: HTMLElement | SVGElement;
+	// anchor
+	a: HTMLElement | SVGElement;
+
+	constructor(is_svg: boolean = false) {
+		this.is_svg = is_svg;
+		this.e = this.n = null;
+	}
+
+	c(html: string) {
+		this.h(html);
+	}
+
+	m(
+		html: string,
+		target: HTMLElement | SVGElement,
+		anchor: HTMLElement | SVGElement = null
+	) {
+		if (!this.e) {
+			if (this.is_svg) this.e = svg_element(target.nodeName as keyof SVGElementTagNameMap);
+			else this.e = element(target.nodeName as keyof HTMLElementTagNameMap);
+			this.t = target;
+			this.c(html);
+		}
+
+		this.i(anchor);
+	}
+
+	h(html: string) {
+		this.e.innerHTML = html;
+		this.n = Array.from(this.e.childNodes);
+	}
+
+	i(anchor) {
+		for (let i = 0; i < this.n.length; i += 1) {
+			insert(this.t, this.n[i], anchor);
+		}
+	}
+
+	p(html: string) {
+		this.d();
+		this.h(html);
+		this.i(this.a);
+	}
+
+	d() {
+		this.n.forEach(detach);
+	}
+}
+
+export class HtmlTagHydration extends HtmlTag {
+	// hydration claimed nodes
+	l: ChildNode[] | void;
+
+	constructor(claimed_nodes?: ChildNode[], is_svg: boolean = false) {
+		super(is_svg);
+		this.e = this.n = null;
+		this.l = claimed_nodes;
+	}
+	c(html: string) {
+		if (this.l) {
+			this.n = this.l;
+		} else {
+			super.c(html);
+		}
+	}
+	i(anchor) {
+		for (let i = 0; i < this.n.length; i += 1) {
+			insert_hydration(this.t, this.n[i], anchor);
+		}
+	}
+}
+
+export function attribute_to_object(attributes: NamedNodeMap) {
+	const result = {};
+	for (const attribute of attributes) {
+		result[attribute.name] = attribute.value;
+	}
+	return result;
+}
+
+export function get_custom_elements_slots(element: HTMLElement) {
+	const result = {};
+	element.childNodes.forEach((node: Element) => {
+		result[node.slot || 'default'] = true;
+	});
+	return result;
+}
diff --git a/src/runtime/internal/environment.ts b/src/runtime/internal/environment.ts
new file mode 100644
index 0000000000..7123399180
--- /dev/null
+++ b/src/runtime/internal/environment.ts
@@ -0,0 +1,18 @@
+import { noop } from './utils';
+
+export const is_client = typeof window !== 'undefined';
+
+export let now: () => number = is_client
+	? () => window.performance.now()
+	: () => Date.now();
+
+export let raf = is_client ? cb => requestAnimationFrame(cb) : noop;
+
+// used internally for testing
+export function set_now(fn) {
+	now = fn;
+}
+
+export function set_raf(fn) {
+	raf = fn;
+}
diff --git a/src/runtime/internal/globals.ts b/src/runtime/internal/globals.ts
new file mode 100644
index 0000000000..b97f81ab9f
--- /dev/null
+++ b/src/runtime/internal/globals.ts
@@ -0,0 +1,7 @@
+declare const global: any;
+
+export const globals = (typeof window !== 'undefined'
+	? window
+	: typeof globalThis !== 'undefined'
+	? globalThis
+	: global) as unknown as typeof globalThis;
diff --git a/src/runtime/internal/index.ts b/src/runtime/internal/index.ts
new file mode 100644
index 0000000000..e1dd2a1fcf
--- /dev/null
+++ b/src/runtime/internal/index.ts
@@ -0,0 +1,15 @@
+export * from './animations';
+export * from './await_block';
+export * from './dom';
+export * from './environment';
+export * from './globals';
+export * from './keyed_each';
+export * from './lifecycle';
+export * from './loop';
+export * from './scheduler';
+export * from './spread';
+export * from './ssr';
+export * from './transitions';
+export * from './utils';
+export * from './Component';
+export * from './dev';
diff --git a/src/runtime/internal/keyed_each.ts b/src/runtime/internal/keyed_each.ts
new file mode 100644
index 0000000000..079d5f4499
--- /dev/null
+++ b/src/runtime/internal/keyed_each.ts
@@ -0,0 +1,114 @@
+import { transition_in, transition_out } from './transitions';
+
+export function destroy_block(block, lookup) {
+	block.d(1);
+	lookup.delete(block.key);
+}
+
+export function outro_and_destroy_block(block, lookup) {
+	transition_out(block, 1, 1, () => {
+		lookup.delete(block.key);
+	});
+}
+
+export function fix_and_destroy_block(block, lookup) {
+	block.f();
+	destroy_block(block, lookup);
+}
+
+export function fix_and_outro_and_destroy_block(block, lookup) {
+	block.f();
+	outro_and_destroy_block(block, lookup);
+}
+
+export function update_keyed_each(old_blocks, dirty, get_key, dynamic, ctx, list, lookup, node, destroy, create_each_block, next, get_context) {
+	let o = old_blocks.length;
+	let n = list.length;
+
+	let i = o;
+	const old_indexes = {};
+	while (i--) old_indexes[old_blocks[i].key] = i;
+
+	const new_blocks = [];
+	const new_lookup = new Map();
+	const deltas = new Map();
+
+	i = n;
+	while (i--) {
+		const child_ctx = get_context(ctx, list, i);
+		const key = get_key(child_ctx);
+		let block = lookup.get(key);
+
+		if (!block) {
+			block = create_each_block(key, child_ctx);
+			block.c();
+		} else if (dynamic) {
+			block.p(child_ctx, dirty);
+		}
+
+		new_lookup.set(key, new_blocks[i] = block);
+
+		if (key in old_indexes) deltas.set(key, Math.abs(i - old_indexes[key]));
+	}
+
+	const will_move = new Set();
+	const did_move = new Set();
+
+	function insert(block) {
+		transition_in(block, 1);
+		block.m(node, next);
+		lookup.set(block.key, block);
+		next = block.first;
+		n--;
+	}
+
+	while (o && n) {
+		const new_block = new_blocks[n - 1];
+		const old_block = old_blocks[o - 1];
+		const new_key = new_block.key;
+		const old_key = old_block.key;
+
+		if (new_block === old_block) {
+			// do nothing
+			next = new_block.first;
+			o--;
+			n--;
+		} else if (!new_lookup.has(old_key)) {
+			// remove old block
+			destroy(old_block, lookup);
+			o--;
+		} else if (!lookup.has(new_key) || will_move.has(new_key)) {
+			insert(new_block);
+		} else if (did_move.has(old_key)) {
+			o--;
+
+		} else if (deltas.get(new_key) > deltas.get(old_key)) {
+			did_move.add(new_key);
+			insert(new_block);
+
+		} else {
+			will_move.add(old_key);
+			o--;
+		}
+	}
+
+	while (o--) {
+		const old_block = old_blocks[o];
+		if (!new_lookup.has(old_block.key)) destroy(old_block, lookup);
+	}
+
+	while (n) insert(new_blocks[n - 1]);
+
+	return new_blocks;
+}
+
+export function validate_each_keys(ctx, list, get_context, get_key) {
+	const keys = new Set();
+	for (let i = 0; i < list.length; i++) {
+		const key = get_key(get_context(ctx, list, i));
+		if (keys.has(key)) {
+			throw new Error('Cannot have duplicate keys in a keyed each');
+		}
+		keys.add(key);
+	}
+}
diff --git a/src/runtime/internal/lifecycle.ts b/src/runtime/internal/lifecycle.ts
new file mode 100644
index 0000000000..fbbeca9a67
--- /dev/null
+++ b/src/runtime/internal/lifecycle.ts
@@ -0,0 +1,87 @@
+import { custom_event } from './dom';
+
+export let current_component;
+
+export function set_current_component(component) {
+	current_component = component;
+}
+
+export function get_current_component() {
+	if (!current_component) throw new Error('Function called outside component initialization');
+	return current_component;
+}
+
+export function beforeUpdate(fn: () => any) {
+	get_current_component().$$.before_update.push(fn);
+}
+
+export function onMount(fn: () => any) {
+	get_current_component().$$.on_mount.push(fn);
+}
+
+export function afterUpdate(fn: () => any) {
+	get_current_component().$$.after_update.push(fn);
+}
+
+export function onDestroy(fn: () => any) {
+	get_current_component().$$.on_destroy.push(fn);
+}
+
+export interface DispatchOptions {
+	cancelable?: boolean;
+}
+
+export function createEventDispatcher<EventMap extends {} = any>(): <
+	EventKey extends Extract<keyof EventMap, string>
+>(
+	type: EventKey,
+	detail?: EventMap[EventKey],
+	options?: DispatchOptions
+) => boolean {
+	const component = get_current_component();
+
+	return (type: string, detail?: any, { cancelable = false } = {}): boolean => {
+		const callbacks = component.$$.callbacks[type];
+
+		if (callbacks) {
+			// TODO are there situations where events could be dispatched
+			// in a server (non-DOM) environment?
+			const event = custom_event(type, detail, { cancelable });
+			callbacks.slice().forEach(fn => {
+				fn.call(component, event);
+			});
+			return !event.defaultPrevented;
+		}
+
+		return true;
+	};
+}
+
+export function setContext<T>(key, context: T): T {
+	get_current_component().$$.context.set(key, context);
+	return context;
+}
+
+export function getContext<T>(key): T {
+	return get_current_component().$$.context.get(key);
+}
+
+export function getAllContexts<T extends Map<any, any> = Map<any, any>>(): T {
+	return get_current_component().$$.context;
+}
+
+export function hasContext(key): boolean {
+	return get_current_component().$$.context.has(key);	
+}
+
+// TODO figure out if we still want to support
+// shorthand events, or if we want to implement
+// a real bubbling mechanism
+export function bubble(component, event) {
+	const callbacks = component.$$.callbacks[event.type];
+
+	if (callbacks) {
+		// @ts-ignore
+		callbacks.slice().forEach(fn => fn.call(this, event));
+	}
+}
diff --git a/src/runtime/internal/loop.ts b/src/runtime/internal/loop.ts
new file mode 100644
index 0000000000..33e519732f
--- /dev/null
+++ b/src/runtime/internal/loop.ts
@@ -0,0 +1,45 @@
+import { raf } from './environment';
+
+export interface Task { abort(): void; promise: Promise<void> }
+
+type TaskCallback = (now: number) => boolean | void;
+type TaskEntry = { c: TaskCallback; f: () => void };
+
+const tasks = new Set<TaskEntry>();
+
+function run_tasks(now: number) {
+	tasks.forEach(task => {
+		if (!task.c(now)) {
+			tasks.delete(task);
+			task.f();
+		}
+	});
+
+	if (tasks.size !== 0) raf(run_tasks);
+}
+
+/**
+ * For testing purposes only!
+ */
+export function clear_loops() {
+	tasks.clear();
+}
+
+/**
+ * Creates a new task that runs on each raf frame
+ * until it returns a falsy value or is aborted
+ */
+export function loop(callback: TaskCallback): Task {
+	let task: TaskEntry;
+
+	if (tasks.size === 0) raf(run_tasks);
+
+	return {
+		promise: new Promise(fulfill => {
+			tasks.add(task = { c: callback, f: fulfill });
+		}),
+		abort() {
+			tasks.delete(task);
+		}
+	};
+}
diff --git a/src/runtime/internal/scheduler.ts b/src/runtime/internal/scheduler.ts
new file mode 100644
index 0000000000..c0b8e57b08
--- /dev/null
+++ b/src/runtime/internal/scheduler.ts
@@ -0,0 +1,109 @@
+import { run_all } from './utils';
+import { current_component, set_current_component } from './lifecycle';
+
+export const dirty_components = [];
+export const intros = { enabled: false };
+
+export const binding_callbacks = [];
+const render_callbacks = [];
+const flush_callbacks = [];
+
+const resolved_promise = Promise.resolve();
+let update_scheduled = false;
+
+export function schedule_update() {
+	if (!update_scheduled) {
+		update_scheduled = true;
+		resolved_promise.then(flush);
+	}
+}
+
+export function tick() {
+	schedule_update();
+	return resolved_promise;
+}
+
+export function add_render_callback(fn) {
+	render_callbacks.push(fn);
+}
+
+export function add_flush_callback(fn) {
+	flush_callbacks.push(fn);
+}
+
+// flush() calls callbacks in this order:
+// 1. All beforeUpdate callbacks, in order: parents before children
+// 2. All bind:this callbacks, in reverse order: children before parents.
+// 3. All afterUpdate callbacks, in order: parents before children. EXCEPT
+//    for afterUpdates called during the initial onMount, which are called in
+//    reverse order: children before parents.
+// Since callbacks might update component values, which could trigger another
+// call to flush(), the following steps guard against this:
+// 1. During beforeUpdate, any updated components will be added to the
+//    dirty_components array and will cause a reentrant call to flush(). Because
+//    the flush index is kept outside the function, the reentrant call will pick
+//    up where the earlier call left off and go through all dirty components. The
+//    current_component value is saved and restored so that the reentrant call will
+//    not interfere with the "parent" flush() call.
+// 2. bind:this callbacks cannot trigger new flush() calls.
+// 3. During afterUpdate, any updated components will NOT have their afterUpdate
+//    callback called a second time; the seen_callbacks set, outside the flush()
+//    function, guarantees this behavior.
+const seen_callbacks = new Set();
+let flushidx = 0;  // Do *not* move this inside the flush() function
+export function flush() {
+	const saved_component = current_component;
+
+	do {
+		// first, call beforeUpdate functions
+		// and update components
+		while (flushidx < dirty_components.length) {
+			const component = dirty_components[flushidx];
+			flushidx++;
+			set_current_component(component);
+			update(component.$$);
+		}
+		set_current_component(null);
+
+		dirty_components.length = 0;
+		flushidx = 0;
+
+		while (binding_callbacks.length) binding_callbacks.pop()();
+
+		// then, once components are updated, call
+		// afterUpdate functions. This may cause
+		// subsequent updates...
+		for (let i = 0; i < render_callbacks.length; i += 1) {
+			const callback = render_callbacks[i];
+
+			if (!seen_callbacks.has(callback)) {
+				// ...so guard against infinite loops
+				seen_callbacks.add(callback);
+
+				callback();
+			}
+		}
+
+		render_callbacks.length = 0;
+	} while (dirty_components.length);
+
+	while (flush_callbacks.length) {
+		flush_callbacks.pop()();
+	}
+
+	update_scheduled = false;
+	seen_callbacks.clear();
+	set_current_component(saved_component);
+}
+
+function update($$) {
+	if ($$.fragment !== null) {
+		$$.update();
+		run_all($$.before_update);
+		const dirty = $$.dirty;
+		$$.dirty = [-1];
+		$$.fragment && $$.fragment.p($$.ctx, dirty);
+
+		$$.after_update.forEach(add_render_callback);
+	}
+}
diff --git a/src/runtime/internal/spread.ts b/src/runtime/internal/spread.ts
new file mode 100644
index 0000000000..2acb98fd3f
--- /dev/null
+++ b/src/runtime/internal/spread.ts
@@ -0,0 +1,41 @@
+export function get_spread_update(levels, updates) {
+	const update = {};
+
+	const to_null_out = {};
+	const accounted_for = { $$scope: 1 };
+
+	let i = levels.length;
+	while (i--) {
+		const o = levels[i];
+		const n = updates[i];
+
+		if (n) {
+			for (const key in o) {
+				if (!(key in n)) to_null_out[key] = 1;
+			}
+
+			for (const key in n) {
+				if (!accounted_for[key]) {
+					update[key] = n[key];
+					accounted_for[key] = 1;
+				}
+			}
+
+			levels[i] = n;
+		} else {
+			for (const key in o) {
+				accounted_for[key] = 1;
+			}
+		}
+	}
+
+	for (const key in to_null_out) {
+		if (!(key in update)) update[key] = undefined;
+	}
+
+	return update;
+}
+
+export function get_spread_object(spread_props) {
+	return typeof spread_props === 'object' && spread_props !== null ? spread_props : {};
+}
diff --git a/src/runtime/internal/ssr.ts b/src/runtime/internal/ssr.ts
new file mode 100644
index 0000000000..2c7d24a2cd
--- /dev/null
+++ b/src/runtime/internal/ssr.ts
@@ -0,0 +1,214 @@
+import { set_current_component, current_component } from './lifecycle';
+import { run_all, blank_object } from './utils';
+import { boolean_attributes } from '../../shared/boolean_attributes';
+export { is_void } from '../../shared/utils/names';
+
+export const invalid_attribute_name_character = /[\s'">/=\u{FDD0}-\u{FDEF}\u{FFFE}\u{FFFF}\u{1FFFE}\u{1FFFF}\u{2FFFE}\u{2FFFF}\u{3FFFE}\u{3FFFF}\u{4FFFE}\u{4FFFF}\u{5FFFE}\u{5FFFF}\u{6FFFE}\u{6FFFF}\u{7FFFE}\u{7FFFF}\u{8FFFE}\u{8FFFF}\u{9FFFE}\u{9FFFF}\u{AFFFE}\u{AFFFF}\u{BFFFE}\u{BFFFF}\u{CFFFE}\u{CFFFF}\u{DFFFE}\u{DFFFF}\u{EFFFE}\u{EFFFF}\u{FFFFE}\u{FFFFF}\u{10FFFE}\u{10FFFF}]/u;
+// https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
+// https://infra.spec.whatwg.org/#noncharacter
+
+export function spread(args, attrs_to_add) {
+	const attributes = Object.assign({}, ...args);
+	if (attrs_to_add) {
+		const classes_to_add = attrs_to_add.classes;
+		const styles_to_add = attrs_to_add.styles;
+
+		if (classes_to_add) {
+			if (attributes.class == null) {
+				attributes.class = classes_to_add;
+			} else {
+				attributes.class += ' ' + classes_to_add;
+			}
+		}
+
+		if (styles_to_add) {
+			if (attributes.style == null) {
+				attributes.style = style_object_to_string(styles_to_add);
+			} else {
+				attributes.style = style_object_to_string(merge_ssr_styles(attributes.style, styles_to_add));
+			}
+		}
+	}
+
+	let str = '';
+
+	Object.keys(attributes).forEach(name => {
+		if (invalid_attribute_name_character.test(name)) return;
+
+		const value = attributes[name];
+		if (value === true) str += ' ' + name;
+		else if (boolean_attributes.has(name.toLowerCase())) {
+			if (value) str += ' ' + name;
+		} else if (value != null) {
+			str += ` ${name}="${value}"`;
+		}
+	});
+
+	return str;
+}
+
+export function merge_ssr_styles(style_attribute, style_directive) {
+	const style_object = {};
+	for (const individual_style of style_attribute.split(';')) {
+		const colon_index = individual_style.indexOf(':');
+		const name = individual_style.slice(0, colon_index).trim();
+		const value = individual_style.slice(colon_index + 1).trim();
+		if (!name) continue;
+		style_object[name] = value;
+	}
+
+	for (const name in style_directive) {
+		const value = style_directive[name];
+		if (value) {
+			style_object[name] = value;
+		} else {
+			delete style_object[name];
+		}
+	}
+
+	return style_object;
+}
+
+const ATTR_REGEX = /[&"]/g;
+const CONTENT_REGEX = /[&<]/g;
+
+/**
+ * Note: this method is performance sensitive and has been optimized
+ * https://github.com/sveltejs/svelte/pull/5701
+ */
+export function escape(value: unknown, is_attr = false) {
+	const str = String(value);
+
+	const pattern = is_attr ? ATTR_REGEX : CONTENT_REGEX;
+	pattern.lastIndex = 0;
+
+	let escaped = '';
+	let last = 0;
+
+  while (pattern.test(str)) {
+    const i = pattern.lastIndex - 1;
+    const ch = str[i];
+    escaped += str.substring(last, i) + (ch === '&' ? '&amp;' : (ch === '"' ? '&quot;' : '&lt;'));
+    last = i + 1;
+  }
+
+	return escaped + str.substring(last);
+}
+
+export function escape_attribute_value(value) {
+	return typeof value === 'string' ? escape(value, true) : value;
+}
+
+export function escape_object(obj) {
+	const result = {};
+	for (const key in obj) {
+		result[key] = escape_attribute_value(obj[key]);
+	}
+	return result;
+}
+
+export function each(items, fn) {
+	let str = '';
+	for (let i = 0; i < items.length; i += 1) {
+		str += fn(items[i], i);
+	}
+	return str;
+}
+
+export const missing_component = {
+	$$render: () => ''
+};
+
+export function validate_component(component, name) {
+	if (!component || !component.$$render) {
+		if (name === 'svelte:component') name += ' this={...}';
+		throw new Error(`<${name}> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules`);
+	}
+
+	return component;
+}
+
+export function debug(file, line, column, values) {
+	console.log(`{@debug} ${file ? file + ' ' : ''}(${line}:${column})`); // eslint-disable-line no-console
+	console.log(values); // eslint-disable-line no-console
+	return '';
+}
+
+let on_destroy;
+
+export function create_ssr_component(fn) {
+	function $$render(result, props, bindings, slots, context) {
+		const parent_component = current_component;
+
+		const $$ = {
+			on_destroy,
+			context: new Map(context || (parent_component ? parent_component.$$.context : [])),
+
+			// these will be immediately discarded
+			on_mount: [],
+			before_update: [],
+			after_update: [],
+			callbacks: blank_object()
+		};
+
+		set_current_component({ $$ });
+
+		const html = fn(result, props, bindings, slots);
+
+		set_current_component(parent_component);
+		return html;
+	}
+
+	return {
+		render: (props = {}, { $$slots = {}, context = new Map() } = {}) => {
+			on_destroy = [];
+
+			const result: {
+				title: string;
+				head: string;
+				css: Set<{
+					map: null;
+					code: string;
+				}>;
+			} = { title: '', head: '', css: new Set() };
+
+			const html = $$render(result, props, {}, $$slots, context);
+
+			run_all(on_destroy);
+
+			return {
+				html,
+				css: {
+					code: Array.from(result.css).map(css => css.code).join('\n'),
+					map: null // TODO
+				},
+				head: result.title + result.head
+			};
+		},
+
+		$$render
+	};
+}
+
+export function add_attribute(name, value, boolean) {
+	if (value == null || (boolean && !value)) return '';
+	const assignment = (boolean && value === true) ? '' : `="${escape_attribute_value(value.toString())}"`;
+	return ` ${name}${assignment}`;
+}
+
+export function add_classes(classes) {
+	return classes ? ` class="${classes}"` : '';
+}
+
+function style_object_to_string(style_object) {
+	return Object.keys(style_object)
+		.filter(key => style_object[key])
+		.map(key => `${key}: ${style_object[key]};`)
+		.join(' ');
+}
+
+export function add_styles(style_object) {
+  const styles = style_object_to_string(style_object);
+
+  return styles ? ` style="${styles}"` : '';
+}
diff --git a/src/runtime/internal/style_manager.ts b/src/runtime/internal/style_manager.ts
new file mode 100644
index 0000000000..f1820d60b2
--- /dev/null
+++ b/src/runtime/internal/style_manager.ts
@@ -0,0 +1,118 @@
+import { append_empty_stylesheet, get_root_for_style } from './dom';
+import { raf } from './environment';
+
+interface StyleInformation {
+	stylesheet: CSSStyleSheet;
+	rules: Record<string, true>;
+}
+
+export class StyleSheetTestObj {
+	title: string;
+	type: string;
+	cssRules: any[];
+
+	constructor(title: string, type: string = 'text/css', cssRules: any[] = []) {
+		this.title = title;
+		this.type = type;
+		this.cssRules = cssRules;
+	}
+}
+
+export function get_svelte_style_sheet_index(style_sheet_list: StyleSheetList | StyleSheetTestObj[]) {
+	let svelte_style_sheet_index: number;
+	const svelte_style_sheet_title = 'svelte-stylesheet';
+	
+		for (let i = 0; i < style_sheet_list.length; i++) {
+			if ( style_sheet_list[i].type !== 'text/css') continue;
+			const css = <CSSStyleSheet>style_sheet_list[i];
+			
+		const css_rules = css?.cssRules;
+
+		if (!css_rules) continue;
+
+		if (css.title === svelte_style_sheet_title && css_rules.length === 0) {
+			svelte_style_sheet_index = i;
+			break;
+		}
+	}
+	return svelte_style_sheet_index;
+}
+// we need to store the information for multiple documents because a Svelte application could also contain iframes
+// https://github.com/sveltejs/svelte/issues/3624
+const managed_styles = new Map<Document | ShadowRoot, StyleInformation>();
+let active = 0;
+
+// https://github.com/darkskyapp/string-hash/blob/master/index.js
+function hash(str: string) {
+	let hash = 5381;
+	let i = str.length;
+
+	while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
+	return hash >>> 0;
+}
+
+function create_style_information(doc: Document | ShadowRoot, node: Element & ElementCSSInlineStyle) {
+	
+	let svelte_style_sheet_index: number;
+
+	if (!managed_styles.get(doc)) {
+		svelte_style_sheet_index = get_svelte_style_sheet_index(document.styleSheets);
+	}
+	const info = { stylesheet: (document.styleSheets[svelte_style_sheet_index] as CSSStyleSheet) ?? append_empty_stylesheet(node), rules: {} };
+	managed_styles.set(doc, info);
+	return info;
+}
+
+export function create_rule(node: Element & ElementCSSInlineStyle, a: number, b: number, duration: number, delay: number, ease: (t: number) => number, fn: (t: number, u: number) => string, uid: number = 0) {
+	const step = 16.666 / duration;
+	let keyframes = '{\n';
+
+	for (let p = 0; p <= 1; p += step) {
+		const t = a + (b - a) * ease(p);
+		keyframes += p * 100 + `%{${fn(t, 1 - t)}}\n`;
+	}
+
+	const rule = keyframes + `100% {${fn(b, 1 - b)}}\n}`;
+	const name = `__svelte_${hash(rule)}_${uid}`;
+	const doc = get_root_for_style(node);
+
+	const { stylesheet, rules } = managed_styles.get(doc) ||  create_style_information(doc, node);
+
+	if (!rules[name]) {
+		rules[name] = true;
+		stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length);
+	}
+
+	const animation = node.style.animation || '';
+	node.style.animation = `${animation ? `${animation}, ` : ''}${name} ${duration}ms linear ${delay}ms 1 both`;
+
+	active += 1;
+	return name;
+}
+
+export function delete_rule(node: Element & ElementCSSInlineStyle, name?: string) {
+	const previous = (node.style.animation || '').split(', ');
+	const next = previous.filter(name
+		? anim => anim.indexOf(name) < 0 // remove specific animation
+		: anim => anim.indexOf('__svelte') === -1 // remove all Svelte animations
+	);
+	const deleted = previous.length - next.length;
+	if (deleted) {
+		node.style.animation = next.join(', ');
+		active -= deleted;
+		if (!active) clear_rules();
+	}
+}
+
+export function clear_rules() {
+	raf(() => {
+		if (active) return;
+		managed_styles.forEach(info => {
+			const { stylesheet } = info;
+			let i = stylesheet.cssRules.length;
+			while (i--) stylesheet.deleteRule(i);
+			info.rules = {};
+		});
+		managed_styles.clear();
+	});
+}
diff --git a/src/runtime/internal/transitions.ts b/src/runtime/internal/transitions.ts
new file mode 100644
index 0000000000..a0134668ef
--- /dev/null
+++ b/src/runtime/internal/transitions.ts
@@ -0,0 +1,387 @@
+import { identity as linear, is_function, noop, run_all } from './utils';
+import { now } from './environment';
+import { loop } from './loop';
+import { create_rule, delete_rule } from './style_manager';
+import { custom_event } from './dom';
+import { add_render_callback } from './scheduler';
+import { TransitionConfig } from '../transition';
+import { Fragment } from './Component';
+
+let promise: Promise<void> | null;
+type INTRO = 1;
+type OUTRO = 0;
+interface Outro {
+	/**
+	 * remaining outros
+	 */
+	r: number;
+	/**
+	 * callbacks
+	 */
+	c: Function[];
+	/**
+	 * parent outro
+	 */
+	p: Outro;
+}
+
+function wait() {
+	if (!promise) {
+		promise = Promise.resolve();
+		promise.then(() => {
+			promise = null;
+		});
+	}
+
+	return promise;
+}
+
+function dispatch(node: Element, direction: INTRO | OUTRO | boolean, kind: 'start' | 'end') {
+	node.dispatchEvent(custom_event(`${direction ? 'intro' : 'outro'}${kind}`));
+}
+
+const outroing = new Set();
+let outros: Outro;
+
+export function group_outros() {
+	outros = {
+		r: 0,     // remaining outros
+		c: [],    // callbacks
+		p: outros // parent group
+	};
+}
+
+export function check_outros() {
+	if (!outros.r) {
+		run_all(outros.c);
+	}
+	outros = outros.p;
+}
+
+export function transition_in(block: Fragment, local?: 0 | 1) {
+	if (block && block.i) {
+		outroing.delete(block);
+		block.i(local);
+	}
+}
+
+export function transition_out(block: Fragment, local: 0 | 1, detach?: 0 | 1, callback?) {
+	if (block && block.o) {
+		if (outroing.has(block)) return;
+		outroing.add(block);
+
+		outros.c.push(() => {
+			outroing.delete(block);
+			if (callback) {
+				if (detach) block.d(1);
+				callback();
+			}
+		});
+
+		block.o(local);
+	}
+}
+
+const null_transition: TransitionConfig = { duration: 0 };
+
+type TransitionFn = (node: Element, params: any) => TransitionConfig;
+
+export function create_in_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any) {
+	let config = fn(node, params);
+	let running = false;
+	let animation_name;
+	let task;
+	let uid = 0;
+
+	function cleanup() {
+		if (animation_name) delete_rule(node, animation_name);
+	}
+
+	function go() {
+		const {
+			delay = 0,
+			duration = 300,
+			easing = linear,
+			tick = noop,
+			css
+		} = config || null_transition;
+
+		if (css) animation_name = create_rule(node, 0, 1, duration, delay, easing, css, uid++);
+		tick(0, 1);
+
+		const start_time = now() + delay;
+		const end_time = start_time + duration;
+
+		if (task) task.abort();
+		running = true;
+
+		add_render_callback(() => dispatch(node, true, 'start'));
+
+		task = loop(now => {
+			if (running) {
+				if (now >= end_time) {
+					tick(1, 0);
+
+					dispatch(node, true, 'end');
+
+					cleanup();
+					return running = false;
+				}
+
+				if (now >= start_time) {
+					const t = easing((now - start_time) / duration);
+					tick(t, 1 - t);
+				}
+			}
+
+			return running;
+		});
+	}
+
+	let started = false;
+
+	return {
+		start() {
+			if (started) return;
+			
+			started = true;
+			delete_rule(node);
+
+			if (is_function(config)) {
+				config = config();
+				wait().then(go);
+			} else {
+				go();
+			}
+		},
+
+		invalidate() {
+			started = false;
+		},
+
+		end() {
+			if (running) {
+				cleanup();
+				running = false;
+			}
+		}
+	};
+}
+
+export function create_out_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any) {
+	let config = fn(node, params);
+	let running = true;
+	let animation_name;
+
+	const group = outros;
+
+	group.r += 1;
+
+	function go() {
+		const {
+			delay = 0,
+			duration = 300,
+			easing = linear,
+			tick = noop,
+			css
+		} = config || null_transition;
+
+		if (css) animation_name = create_rule(node, 1, 0, duration, delay, easing, css);
+
+		const start_time = now() + delay;
+		const end_time = start_time + duration;
+
+		add_render_callback(() => dispatch(node, false, 'start'));
+
+		loop(now => {
+			if (running) {
+				if (now >= end_time) {
+					tick(0, 1);
+
+					dispatch(node, false, 'end');
+
+					if (!--group.r) {
+						// this will result in `end()` being called,
+						// so we don't need to clean up here
+						run_all(group.c);
+					}
+
+					return false;
+				}
+
+				if (now >= start_time) {
+					const t = easing((now - start_time) / duration);
+					tick(1 - t, t);
+				}
+			}
+
+			return running;
+		});
+	}
+
+	if (is_function(config)) {
+		wait().then(() => {
+			// @ts-ignore
+			config = config();
+			go();
+		});
+	} else {
+		go();
+	}
+
+	return {
+		end(reset) {
+			if (reset && config.tick) {
+				config.tick(1, 0);
+			}
+
+			if (running) {
+				if (animation_name) delete_rule(node, animation_name);
+				running = false;
+			}
+		}
+	};
+}
+
+interface PendingProgram {
+	start: number;
+	b: INTRO | OUTRO;
+	group?: Outro;
+}
+interface Program {
+	a: number;
+	b: INTRO | OUTRO;
+	/**
+	 * direction
+	 */
+	d: 1 | -1;
+	duration: number;
+	start: number;
+	end: number;
+	group?: Outro;
+}
+
+export function create_bidirectional_transition(node: Element & ElementCSSInlineStyle, fn: TransitionFn, params: any, intro: boolean) {
+	let config = fn(node, params);
+
+	let t = intro ? 0 : 1;
+
+	let running_program: Program | null = null;
+	let pending_program: PendingProgram | null = null;
+	let animation_name = null;
+
+	function clear_animation() {
+		if (animation_name) delete_rule(node, animation_name);
+	}
+
+	function init(program: PendingProgram, duration: number): Program {
+		const d = (program.b - t) as Program['d'];
+		duration *= Math.abs(d);
+
+		return {
+			a: t,
+			b: program.b,
+			d,
+			duration,
+			start: program.start,
+			end: program.start + duration,
+			group: program.group
+		};
+	}
+
+	function go(b: INTRO | OUTRO) {
+		const {
+			delay = 0,
+			duration = 300,
+			easing = linear,
+			tick = noop,
+			css
+		} = config || null_transition;
+
+		const program: PendingProgram = {
+			start: now() + delay,
+			b
+		};
+
+		if (!b) {
+			// @ts-ignore todo: improve typings
+			program.group = outros;
+			outros.r += 1;
+		}
+
+		if (running_program || pending_program) {
+			pending_program = program;
+		} else {
+			// if this is an intro, and there's a delay, we need to do
+			// an initial tick and/or apply CSS animation immediately
+			if (css) {
+				clear_animation();
+				animation_name = create_rule(node, t, b, duration, delay, easing, css);
+			}
+
+			if (b) tick(0, 1);
+
+			running_program = init(program, duration);
+			add_render_callback(() => dispatch(node, b, 'start'));
+
+			loop(now => {
+				if (pending_program && now > pending_program.start) {
+					running_program = init(pending_program, duration);
+					pending_program = null;
+
+					dispatch(node, running_program.b, 'start');
+
+					if (css) {
+						clear_animation();
+						animation_name = create_rule(node, t, running_program.b, running_program.duration, 0, easing, config.css);
+					}
+				}
+
+				if (running_program) {
+					if (now >= running_program.end) {
+						tick(t = running_program.b, 1 - t);
+						dispatch(node, running_program.b, 'end');
+
+						if (!pending_program) {
+							// we're done
+							if (running_program.b) {
+								// intro — we can tidy up immediately
+								clear_animation();
+							} else {
+								// outro — needs to be coordinated
+								if (!--running_program.group.r) run_all(running_program.group.c);
+							}
+						}
+
+						running_program = null;
+					} else if (now >= running_program.start) {
+						const p = now - running_program.start;
+						t = running_program.a + running_program.d * easing(p / running_program.duration);
+						tick(t, 1 - t);
+					}
+				}
+
+				return !!(running_program || pending_program);
+			});
+		}
+	}
+
+	return {
+		run(b: INTRO | OUTRO) {
+			if (is_function(config)) {
+				wait().then(() => {
+					// @ts-ignore
+					config = config();
+					go(b);
+				});
+			} else {
+				go(b);
+			}
+		},
+
+		end() {
+			clear_animation();
+			running_program = pending_program = null;
+		}
+	};
+}
diff --git a/src/runtime/internal/utils.ts b/src/runtime/internal/utils.ts
new file mode 100644
index 0000000000..8868e38ee2
--- /dev/null
+++ b/src/runtime/internal/utils.ts
@@ -0,0 +1,189 @@
+import { Readable } from 'svelte/store';
+
+export function noop() {}
+
+export const identity = x => x;
+
+export function assign<T, S>(tar: T, src: S): T & S {
+	// @ts-ignore
+	for (const k in src) tar[k] = src[k];
+	return tar as T & S;
+}
+
+export function is_promise<T = any>(value: any): value is PromiseLike<T> {
+	return value && typeof value === 'object' && typeof value.then === 'function';
+}
+
+export function add_location(element, file, line, column, char) {
+	element.__svelte_meta = {
+		loc: { file, line, column, char }
+	};
+}
+
+export function run(fn) {
+	return fn();
+}
+
+export function blank_object() {
+	return Object.create(null);
+}
+
+export function run_all(fns: Function[]) {
+	fns.forEach(run);
+}
+
+export function is_function(thing: any): thing is Function {
+	return typeof thing === 'function';
+}
+
+export function safe_not_equal(a, b) {
+	return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
+}
+
+let src_url_equal_anchor;
+
+export function src_url_equal(element_src, url) {
+	if (!src_url_equal_anchor) {
+		src_url_equal_anchor = document.createElement('a');
+	}
+	src_url_equal_anchor.href = url;
+	return element_src === src_url_equal_anchor.href;
+}
+
+export function not_equal(a, b) {
+	return a != a ? b == b : a !== b;
+}
+
+export function is_empty(obj) {
+	return Object.keys(obj).length === 0;
+}
+
+export function validate_store(store, name) {
+	if (store != null && typeof store.subscribe !== 'function') {
+		throw new Error(`'${name}' is not a store with a 'subscribe' method`);
+	}
+}
+
+export function subscribe(store, ...callbacks) {
+	if (store == null) {
+		return noop;
+	}
+	const unsub = store.subscribe(...callbacks);
+	return unsub.unsubscribe ? () => unsub.unsubscribe() : unsub;
+}
+
+export function get_store_value<T>(store: Readable<T>): T {
+	let value;
+	subscribe(store, _ => value = _)();
+	return value;
+}
+
+export function component_subscribe(component, store, callback) {
+	component.$$.on_destroy.push(subscribe(store, callback));
+}
+
+export function create_slot(definition, ctx, $$scope, fn) {
+	if (definition) {
+		const slot_ctx = get_slot_context(definition, ctx, $$scope, fn);
+		return definition[0](slot_ctx);
+	}
+}
+
+function get_slot_context(definition, ctx, $$scope, fn) {
+	return definition[1] && fn
+		? assign($$scope.ctx.slice(), definition[1](fn(ctx)))
+		: $$scope.ctx;
+}
+
+export function get_slot_changes(definition, $$scope, dirty, fn) {
+	if (definition[2] && fn) {
+		const lets = definition[2](fn(dirty));
+
+		if ($$scope.dirty === undefined) {
+			return lets;
+		}
+
+		if (typeof lets === 'object') {
+			const merged = [];
+			const len = Math.max($$scope.dirty.length, lets.length);
+			for (let i = 0; i < len; i += 1) {
+				merged[i] = $$scope.dirty[i] | lets[i];
+			}
+
+			return merged;
+		}
+
+		return $$scope.dirty | lets;
+	}
+
+	return $$scope.dirty;
+}
+
+export function update_slot_base(slot, slot_definition, ctx, $$scope, slot_changes, get_slot_context_fn) {
+	if (slot_changes) {
+		const slot_context = get_slot_context(slot_definition, ctx, $$scope, get_slot_context_fn);
+		slot.p(slot_context, slot_changes);
+	}
+}
+
+export function update_slot(slot, slot_definition, ctx, $$scope, dirty, get_slot_changes_fn, get_slot_context_fn) {
+	const slot_changes = get_slot_changes(slot_definition, $$scope, dirty, get_slot_changes_fn);
+	update_slot_base(slot, slot_definition, ctx, $$scope, slot_changes, get_slot_context_fn);
+}
+
+export function get_all_dirty_from_scope($$scope) {
+	if ($$scope.ctx.length > 32) {
+		const dirty = [];
+		const length = $$scope.ctx.length / 32;
+		for (let i = 0; i < length; i++) {
+			dirty[i] = -1;
+		}
+		return dirty;
+	}
+	return -1;
+}
+
+export function exclude_internal_props(props) {
+	const result = {};
+	for (const k in props) if (k[0] !== '$') result[k] = props[k];
+	return result;
+}
+
+export function compute_rest_props(props, keys) {
+	const rest = {};
+	keys = new Set(keys);
+	for (const k in props) if (!keys.has(k) && k[0] !== '$') rest[k] = props[k];
+	return rest;
+}
+
+export function compute_slots(slots) {
+	const result = {};
+	for (const key in slots) {
+		result[key] = true;
+	}
+	return result;
+}
+
+export function once(fn) {
+	let ran = false;
+	return function(this: any, ...args) {
+		if (ran) return;
+		ran = true;
+		fn.call(this, ...args);
+	};
+}
+
+export function null_to_empty(value) {
+	return value == null ? '' : value;
+}
+
+export function set_store_value(store, ret, value) {
+	store.set(value);
+	return ret;
+}
+
+export const has_prop = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+
+export function action_destroyer(action_result) {
+	return action_result && is_function(action_result.destroy) ? action_result.destroy : noop;
+}
diff --git a/src/runtime/motion/index.ts b/src/runtime/motion/index.ts
new file mode 100644
index 0000000000..ea6c646dd9
--- /dev/null
+++ b/src/runtime/motion/index.ts
@@ -0,0 +1,2 @@
+export * from './spring';
+export * from './tweened';
diff --git a/src/runtime/motion/spring.ts b/src/runtime/motion/spring.ts
new file mode 100644
index 0000000000..64d17a058b
--- /dev/null
+++ b/src/runtime/motion/spring.ts
@@ -0,0 +1,149 @@
+import { Readable, writable } from 'svelte/store';
+import { loop, now, Task } from 'svelte/internal';
+import { is_date } from './utils';
+
+interface TickContext<T> {
+	inv_mass: number;
+	dt: number;
+	opts: Spring<T>;
+	settled: boolean;
+}
+
+function tick_spring<T>(ctx: TickContext<T>, last_value: T, current_value: T, target_value: T): T {
+	if (typeof current_value === 'number' || is_date(current_value)) {
+		// @ts-ignore
+		const delta = target_value - current_value;
+		// @ts-ignore
+		const velocity = (current_value - last_value) / (ctx.dt || 1 / 60); // guard div by 0
+		const spring = ctx.opts.stiffness * delta;
+		const damper = ctx.opts.damping * velocity;
+		const acceleration = (spring - damper) * ctx.inv_mass;
+		const d = (velocity + acceleration) * ctx.dt;
+
+		if (Math.abs(d) < ctx.opts.precision && Math.abs(delta) < ctx.opts.precision) {
+			return target_value; // settled
+		} else {
+			ctx.settled = false; // signal loop to keep ticking
+			// @ts-ignore
+			return is_date(current_value) ?
+				new Date(current_value.getTime() + d) : current_value + d;
+		}
+	} else if (Array.isArray(current_value)) {
+		// @ts-ignore
+		return current_value.map((_, i) =>
+			tick_spring(ctx, last_value[i], current_value[i], target_value[i]));
+	} else if (typeof current_value === 'object') {
+		const next_value = {};
+		for (const k in current_value) {
+			// @ts-ignore
+			next_value[k] = tick_spring(ctx, last_value[k], current_value[k], target_value[k]);
+		}
+		// @ts-ignore
+		return next_value;
+	} else {
+		throw new Error(`Cannot spring ${typeof current_value} values`);
+	}
+}
+
+interface SpringOpts {
+	stiffness?: number;
+	damping?: number;
+	precision?: number;
+}
+
+interface SpringUpdateOpts {
+	hard?: any;
+	soft?: string | number | boolean;
+}
+
+type Updater<T> = (target_value: T, value: T) => T;
+
+export interface Spring<T> extends Readable<T>{
+	set: (new_value: T, opts?: SpringUpdateOpts) => Promise<void>;
+	update: (fn: Updater<T>, opts?: SpringUpdateOpts) => Promise<void>;
+	precision: number;
+	damping: number;
+	stiffness: number;
+}
+
+export function spring<T=any>(value?: T, opts: SpringOpts = {}): Spring<T> {
+	const store = writable(value);
+	const { stiffness = 0.15, damping = 0.8, precision = 0.01 } = opts;
+
+	let last_time: number;
+	let task: Task;
+	let current_token: object;
+	let last_value: T = value;
+	let target_value: T = value;
+
+	let inv_mass = 1;
+	let inv_mass_recovery_rate = 0;
+	let cancel_task = false;
+
+	function set(new_value: T, opts: SpringUpdateOpts = {}): Promise<void> {
+		target_value = new_value;
+		const token = current_token = {};
+
+		if (value == null || opts.hard || (spring.stiffness >= 1 && spring.damping >= 1)) {
+			cancel_task = true; // cancel any running animation
+			last_time = now();
+			last_value = new_value;
+			store.set(value = target_value);
+			return Promise.resolve();
+		} else if (opts.soft) {
+			const rate = opts.soft === true ? .5 : +opts.soft;
+			inv_mass_recovery_rate = 1 / (rate * 60);
+			inv_mass = 0; // infinite mass, unaffected by spring forces
+		}
+
+		if (!task) {
+			last_time = now();
+			cancel_task = false;
+
+			task = loop(now => {
+
+				if (cancel_task) {
+					cancel_task = false;
+					task = null;
+					return false;
+				}
+
+				inv_mass = Math.min(inv_mass + inv_mass_recovery_rate, 1);
+
+				const ctx: TickContext<T> = {
+					inv_mass,
+					opts: spring,
+					settled: true, // tick_spring may signal false
+					dt: (now - last_time) * 60 / 1000
+				};
+				const next_value = tick_spring(ctx, last_value, value, target_value);
+
+				last_time = now;
+				last_value = value;
+				store.set(value = next_value);
+
+				if (ctx.settled) {
+					task = null;
+				}
+				return !ctx.settled;
+			});
+		}
+
+		return new Promise(fulfil => {
+			task.promise.then(() => {
+				if (token === current_token) fulfil();
+			});
+		});
+	}
+
+	const spring: Spring<T> = {
+		set,
+		update: (fn, opts: SpringUpdateOpts) => set(fn(target_value, value), opts),
+		subscribe: store.subscribe,
+		stiffness,
+		damping,
+		precision
+	};
+
+	return spring;
+}
diff --git a/src/runtime/motion/tweened.ts b/src/runtime/motion/tweened.ts
new file mode 100644
index 0000000000..f0ede9add7
--- /dev/null
+++ b/src/runtime/motion/tweened.ts
@@ -0,0 +1,143 @@
+import { Readable, writable } from 'svelte/store';
+import { assign, loop, now, Task } from 'svelte/internal';
+import { linear } from 'svelte/easing';
+import { is_date } from './utils';
+
+function get_interpolator(a, b) {
+	if (a === b || a !== a) return () => a;
+
+	const type = typeof a;
+
+	if (type !== typeof b || Array.isArray(a) !== Array.isArray(b)) {
+		throw new Error('Cannot interpolate values of different type');
+	}
+
+	if (Array.isArray(a)) {
+		const arr = b.map((bi, i) => {
+			return get_interpolator(a[i], bi);
+		});
+
+		return t => arr.map(fn => fn(t));
+	}
+
+	if (type === 'object') {
+		if (!a || !b) throw new Error('Object cannot be null');
+
+		if (is_date(a) && is_date(b)) {
+			a = a.getTime();
+			b = b.getTime();
+			const delta = b - a;
+			return t => new Date(a + t * delta);
+		}
+
+		const keys = Object.keys(b);
+		const interpolators = {};
+
+		keys.forEach(key => {
+			interpolators[key] = get_interpolator(a[key], b[key]);
+		});
+
+		return t => {
+			const result = {};
+			keys.forEach(key => {
+				result[key] = interpolators[key](t);
+			});
+			return result;
+		};
+	}
+
+	if (type === 'number') {
+		const delta = b - a;
+		return t => a + t * delta;
+	}
+
+	throw new Error(`Cannot interpolate ${type} values`);
+}
+
+interface Options<T> {
+	delay?: number;
+	duration?: number | ((from: T, to: T) => number);
+	easing?: (t: number) => number;
+	interpolate?: (a: T, b: T) => (t: number) => T;
+}
+
+type Updater<T> = (target_value: T, value: T) => T;
+
+export interface Tweened<T> extends Readable<T> {
+	set(value: T, opts?: Options<T>): Promise<void>;
+
+	update(updater: Updater<T>, opts?: Options<T>): Promise<void>;
+}
+
+export function tweened<T>(value?: T, defaults: Options<T> = {}): Tweened<T> {
+	const store = writable(value);
+
+	let task: Task;
+	let target_value = value;
+
+	function set(new_value: T, opts?: Options<T>) {
+		if (value == null) {
+			store.set(value = new_value);
+			return Promise.resolve();
+		}
+
+		target_value = new_value;
+
+		let previous_task = task;
+		let started = false;
+
+		let {
+			delay = 0,
+			duration = 400,
+			easing = linear,
+			interpolate = get_interpolator
+		} = assign(assign({}, defaults), opts);
+
+		if (duration === 0) {
+			if (previous_task) {
+				previous_task.abort();
+				previous_task = null;
+			}
+
+			store.set(value = target_value);
+			return Promise.resolve();
+		}
+
+		const start = now() + delay;
+		let fn;
+
+		task = loop(now => {
+			if (now < start) return true;
+
+			if (!started) {
+				fn = interpolate(value, new_value);
+				if (typeof duration === 'function') duration = duration(value, new_value);
+				started = true;
+			}
+
+			if (previous_task) {
+				previous_task.abort();
+				previous_task = null;
+			}
+
+			const elapsed = now - start;
+
+			if (elapsed > duration) {
+				store.set(value = new_value);
+				return false;
+			}
+
+			// @ts-ignore
+			store.set(value = fn(easing(elapsed / duration)));
+			return true;
+		});
+
+		return task.promise;
+	}
+
+	return {
+		set,
+		update: (fn, opts?: Options<T>) => set(fn(target_value, value), opts),
+		subscribe: store.subscribe
+	};
+}
diff --git a/src/runtime/motion/utils.ts b/src/runtime/motion/utils.ts
new file mode 100644
index 0000000000..2eab8baa2f
--- /dev/null
+++ b/src/runtime/motion/utils.ts
@@ -0,0 +1,3 @@
+export function is_date(obj: any): obj is Date {
+	return Object.prototype.toString.call(obj) === '[object Date]';
+}
diff --git a/src/runtime/ssr.ts b/src/runtime/ssr.ts
new file mode 100644
index 0000000000..cbac1f3ef8
--- /dev/null
+++ b/src/runtime/ssr.ts
@@ -0,0 +1,15 @@
+export {
+	onDestroy,
+	setContext,
+	getContext,
+	getAllContexts,
+	hasContext,
+	tick,
+	createEventDispatcher,
+	SvelteComponent,
+	SvelteComponentTyped
+} from './index';
+
+export function onMount() {}
+export function beforeUpdate() {}
+export function afterUpdate() {}
diff --git a/src/runtime/store/index.ts b/src/runtime/store/index.ts
new file mode 100644
index 0000000000..e947fa0740
--- /dev/null
+++ b/src/runtime/store/index.ts
@@ -0,0 +1,214 @@
+import { run_all, subscribe, noop, safe_not_equal, is_function, get_store_value } from 'svelte/internal';
+
+/** Callback to inform of a value updates. */
+export type Subscriber<T> = (value: T) => void;
+
+/** Unsubscribes from value updates. */
+export type Unsubscriber = () => void;
+
+/** Callback to update a value. */
+export type Updater<T> = (value: T) => T;
+
+/** Cleanup logic callback. */
+type Invalidator<T> = (value?: T) => void;
+
+/** Start and stop notification callbacks. */
+export type StartStopNotifier<T> = (set: Subscriber<T>) => Unsubscriber | void;
+
+/** Readable interface for subscribing. */
+export interface Readable<T> {
+	/**
+	 * Subscribe on value changes.
+	 * @param run subscription callback
+	 * @param invalidate cleanup callback
+	 */
+	subscribe(this: void, run: Subscriber<T>, invalidate?: Invalidator<T>): Unsubscriber;
+}
+
+/** Writable interface for both updating and subscribing. */
+export interface Writable<T> extends Readable<T> {
+	/**
+	 * Set value and inform subscribers.
+	 * @param value to set
+	 */
+	set(this: void, value: T): void;
+
+	/**
+	 * Update value using callback and inform subscribers.
+	 * @param updater callback
+	 */
+	update(this: void, updater: Updater<T>): void;
+}
+
+/** Pair of subscriber and invalidator. */
+type SubscribeInvalidateTuple<T> = [Subscriber<T>, Invalidator<T>];
+
+const subscriber_queue = [];
+
+/**
+ * Creates a `Readable` store that allows reading by subscription.
+ * @param value initial value
+ * @param {StartStopNotifier}start start and stop notifications for subscriptions
+ */
+export function readable<T>(value?: T, start?: StartStopNotifier<T>): Readable<T> {
+	return {
+		subscribe: writable(value, start).subscribe
+	};
+}
+
+/**
+ * Create a `Writable` store that allows both updating and reading by subscription.
+ * @param {*=}value initial value
+ * @param {StartStopNotifier=}start start and stop notifications for subscriptions
+ */
+export function writable<T>(value?: T, start: StartStopNotifier<T> = noop): Writable<T> {
+	let stop: Unsubscriber;
+	const subscribers: Set<SubscribeInvalidateTuple<T>> = new Set();
+
+	function set(new_value: T): void {
+		if (safe_not_equal(value, new_value)) {
+			value = new_value;
+			if (stop) { // store is ready
+				const run_queue = !subscriber_queue.length;
+				for (const subscriber of subscribers) {
+					subscriber[1]();
+					subscriber_queue.push(subscriber, value);
+				}
+				if (run_queue) {
+					for (let i = 0; i < subscriber_queue.length; i += 2) {
+						subscriber_queue[i][0](subscriber_queue[i + 1]);
+					}
+					subscriber_queue.length = 0;
+				}
+			}
+		}
+	}
+
+	function update(fn: Updater<T>): void {
+		set(fn(value));
+	}
+
+	function subscribe(run: Subscriber<T>, invalidate: Invalidator<T> = noop): Unsubscriber {
+		const subscriber: SubscribeInvalidateTuple<T> = [run, invalidate];
+		subscribers.add(subscriber);
+		if (subscribers.size === 1) {
+			stop = start(set) || noop;
+		}
+		run(value);
+
+		return () => {
+			subscribers.delete(subscriber);
+			if (subscribers.size === 0) {
+				stop();
+				stop = null;
+			}
+		};
+	}
+
+	return { set, update, subscribe };
+}
+
+/** One or more `Readable`s. */
+type Stores = Readable<any> | [Readable<any>, ...Array<Readable<any>>] | Array<Readable<any>>;
+
+/** One or more values from `Readable` stores. */
+type StoresValues<T> = T extends Readable<infer U> ? U :
+	{ [K in keyof T]: T[K] extends Readable<infer U> ? U : never };
+
+/**
+ * Derived value store by synchronizing one or more readable stores and
+ * applying an aggregation function over its input values.
+ *
+ * @param stores - input stores
+ * @param fn - function callback that aggregates the values
+ * @param initial_value - when used asynchronously
+ */
+export function derived<S extends Stores, T>(
+	stores: S,
+	fn: (values: StoresValues<S>, set: (value: T) => void) => Unsubscriber | void,
+	initial_value?: T
+): Readable<T>;
+
+/**
+ * Derived value store by synchronizing one or more readable stores and
+ * applying an aggregation function over its input values.
+ *
+ * @param stores - input stores
+ * @param fn - function callback that aggregates the values
+ * @param initial_value - initial value
+ */
+export function derived<S extends Stores, T>(
+	stores: S,
+	fn: (values: StoresValues<S>) => T,
+	initial_value?: T
+): Readable<T>;
+
+/**
+ * Derived value store by synchronizing one or more readable stores and
+ * applying an aggregation function over its input values.
+ *
+ * @param stores - input stores
+ * @param fn - function callback that aggregates the values
+ */
+export function derived<S extends Stores, T>(
+	stores: S,
+	fn: (values: StoresValues<S>) => T
+): Readable<T>;
+
+export function derived<T>(stores: Stores, fn: Function, initial_value?: T): Readable<T> {
+	const single = !Array.isArray(stores);
+	const stores_array: Array<Readable<any>> = single
+		? [stores as Readable<any>]
+		: stores as Array<Readable<any>>;
+
+	const auto = fn.length < 2;
+
+	return readable(initial_value, (set) => {
+		let inited = false;
+		const values = [];
+
+		let pending = 0;
+		let cleanup = noop;
+
+		const sync = () => {
+			if (pending) {
+				return;
+			}
+			cleanup();
+			const result = fn(single ? values[0] : values, set);
+			if (auto) {
+				set(result as T);
+			} else {
+				cleanup = is_function(result) ? result as Unsubscriber : noop;
+			}
+		};
+
+		const unsubscribers = stores_array.map((store, i) => subscribe(
+			store,
+			(value) => {
+				values[i] = value;
+				pending &= ~(1 << i);
+				if (inited) {
+					sync();
+				}
+			},
+			() => {
+				pending |= (1 << i);
+			})
+		);
+
+		inited = true;
+		sync();
+
+		return function stop() {
+			run_all(unsubscribers);
+			cleanup();
+		};
+	});
+}
+
+/**
+ * Get the current value from a store by subscribing and immediately unsubscribing.
+ * @param store readable
+ */
+export { get_store_value as get };
diff --git a/src/runtime/transition/index.ts b/src/runtime/transition/index.ts
new file mode 100644
index 0000000000..9315cd77d5
--- /dev/null
+++ b/src/runtime/transition/index.ts
@@ -0,0 +1,289 @@
+import { cubicOut, cubicInOut, linear } from 'svelte/easing';
+import { assign, is_function } from 'svelte/internal';
+
+export type EasingFunction = (t: number) => number;
+
+export interface TransitionConfig {
+	delay?: number;
+	duration?: number;
+	easing?: EasingFunction;
+	css?: (t: number, u: number) => string;
+	tick?: (t: number, u: number) => void;
+}
+
+export interface BlurParams {
+	delay?: number;
+	duration?: number;
+	easing?: EasingFunction;
+	amount?: number;
+	opacity?: number;
+}
+
+export function blur(node: Element, {
+	delay = 0,
+	duration = 400,
+	easing = cubicInOut,
+	amount = 5,
+	opacity = 0
+}: BlurParams = {}): TransitionConfig {
+	const style = getComputedStyle(node);
+	const target_opacity = +style.opacity;
+	const f = style.filter === 'none' ? '' : style.filter;
+
+	const od = target_opacity * (1 - opacity);
+
+	return {
+		delay,
+		duration,
+		easing,
+		css: (_t, u) => `opacity: ${target_opacity - (od * u)}; filter: ${f} blur(${u * amount}px);`
+	};
+}
+
+export interface FadeParams {
+	delay?: number;
+	duration?: number;
+	easing?: EasingFunction;
+}
+
+export function fade(node: Element, {
+	delay = 0,
+	duration = 400,
+	easing = linear
+}: FadeParams = {}): TransitionConfig {
+	const o = +getComputedStyle(node).opacity;
+
+	return {
+		delay,
+		duration,
+		easing,
+		css: t => `opacity: ${t * o}`
+	};
+}
+
+export interface FlyParams {
+	delay?: number;
+	duration?: number;
+	easing?: EasingFunction;
+	x?: number;
+	y?: number;
+	opacity?: number;
+}
+
+export function fly(node: Element, {
+	delay = 0,
+	duration = 400,
+	easing = cubicOut,
+	x = 0,
+	y = 0,
+	opacity = 0
+}: FlyParams = {}): TransitionConfig {
+	const style = getComputedStyle(node);
+	const target_opacity = +style.opacity;
+	const transform = style.transform === 'none' ? '' : style.transform;
+
+	const od = target_opacity * (1 - opacity);
+
+	return {
+		delay,
+		duration,
+		easing,
+		css: (t, u) => `
+			transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px);
+			opacity: ${target_opacity - (od * u)}`
+	};
+}
+
+export interface SlideParams {
+	delay?: number;
+	duration?: number;
+	easing?: EasingFunction;
+}
+
+export function slide(node: Element, {
+	delay = 0,
+	duration = 400,
+	easing = cubicOut
+}: SlideParams = {}): TransitionConfig {
+	const style = getComputedStyle(node);
+	const opacity = +style.opacity;
+	const height = parseFloat(style.height);
+	const padding_top = parseFloat(style.paddingTop);
+	const padding_bottom = parseFloat(style.paddingBottom);
+	const margin_top = parseFloat(style.marginTop);
+	const margin_bottom = parseFloat(style.marginBottom);
+	const border_top_width = parseFloat(style.borderTopWidth);
+	const border_bottom_width = parseFloat(style.borderBottomWidth);
+
+	return {
+		delay,
+		duration,
+		easing,
+		css: t =>
+			'overflow: hidden;' +
+			`opacity: ${Math.min(t * 20, 1) * opacity};` +
+			`height: ${t * height}px;` +
+			`padding-top: ${t * padding_top}px;` +
+			`padding-bottom: ${t * padding_bottom}px;` +
+			`margin-top: ${t * margin_top}px;` +
+			`margin-bottom: ${t * margin_bottom}px;` +
+			`border-top-width: ${t * border_top_width}px;` +
+			`border-bottom-width: ${t * border_bottom_width}px;`
+	};
+}
+
+export interface ScaleParams {
+	delay?: number;
+	duration?: number;
+	easing?: EasingFunction;
+	start?: number;
+	opacity?: number;
+}
+
+export function scale(node: Element, {
+	delay = 0,
+	duration = 400,
+	easing = cubicOut,
+	start = 0,
+	opacity = 0
+}: ScaleParams = {}): TransitionConfig {
+	const style = getComputedStyle(node);
+	const target_opacity = +style.opacity;
+	const transform = style.transform === 'none' ? '' : style.transform;
+
+	const sd = 1 - start;
+	const od = target_opacity * (1 - opacity);
+
+	return {
+		delay,
+		duration,
+		easing,
+		css: (_t, u) => `
+			transform: ${transform} scale(${1 - (sd * u)});
+			opacity: ${target_opacity - (od * u)}
+		`
+	};
+}
+
+export interface DrawParams {
+	delay?: number;
+	speed?: number;
+	duration?: number | ((len: number) => number);
+	easing?: EasingFunction;
+}
+
+export function draw(node: SVGElement & { getTotalLength(): number }, {
+	delay = 0,
+	speed,
+	duration,
+	easing = cubicInOut
+}: DrawParams = {}): TransitionConfig {
+	let len = node.getTotalLength();
+	const style = getComputedStyle(node);
+	if (style.strokeLinecap !== 'butt') {
+		len += parseInt(style.strokeWidth);
+	}
+
+	if (duration === undefined) {
+		if (speed === undefined) {
+			duration = 800;
+		} else {
+			duration = len / speed;
+		}
+	} else if (typeof duration === 'function') {
+		duration = duration(len);
+	}
+
+	return {
+		delay,
+		duration,
+		easing,
+		css: (t, u) => `stroke-dasharray: ${t * len} ${u * len}`
+	};
+}
+
+export interface CrossfadeParams {
+	delay?: number;
+	duration?: number | ((len: number) => number);
+	easing?: EasingFunction;
+}
+
+type ClientRectMap = Map<any, { rect: ClientRect }>;
+
+export function crossfade({ fallback, ...defaults }: CrossfadeParams & {
+	fallback?: (node: Element, params: CrossfadeParams, intro: boolean) => TransitionConfig;
+}): [
+  (
+    node: Element,
+    params: CrossfadeParams & {
+      key: any;
+    }
+  ) => () => TransitionConfig,
+  (
+    node: Element,
+    params: CrossfadeParams & {
+      key: any;
+    }
+  ) => () => TransitionConfig
+] {
+	const to_receive: ClientRectMap = new Map();
+	const to_send: ClientRectMap = new Map();
+
+	function crossfade(from: ClientRect, node: Element, params: CrossfadeParams): TransitionConfig {
+		const {
+			delay = 0,
+			duration = d => Math.sqrt(d) * 30,
+			easing = cubicOut
+		} = assign(assign({}, defaults), params);
+
+		const to = node.getBoundingClientRect();
+		const dx = from.left - to.left;
+		const dy = from.top - to.top;
+		const dw = from.width / to.width;
+		const dh = from.height / to.height;
+		const d = Math.sqrt(dx * dx + dy * dy);
+
+		const style = getComputedStyle(node);
+		const transform = style.transform === 'none' ? '' : style.transform;
+		const opacity = +style.opacity;
+
+		return {
+			delay,
+			duration: is_function(duration) ? duration(d) : duration,
+			easing,
+			css: (t, u) => `
+				opacity: ${t * opacity};
+				transform-origin: top left;
+				transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${t + (1 - t) * dw}, ${t + (1 - t) * dh});
+			`
+		};
+	}
+
+	function transition(items: ClientRectMap, counterparts: ClientRectMap, intro: boolean) {
+		return (node: Element, params: CrossfadeParams & { key: any }) => {
+			items.set(params.key, {
+				rect: node.getBoundingClientRect()
+			});
+
+			return () => {
+				if (counterparts.has(params.key)) {
+					const { rect } = counterparts.get(params.key);
+					counterparts.delete(params.key);
+
+					return crossfade(rect, node, params);
+				}
+
+				// if the node is disappearing altogether
+				// (i.e. wasn't claimed by the other list)
+				// then we need to supply an outro
+				items.delete(params.key);
+				return fallback && fallback(node, params, intro);
+			};
+		};
+	}
+
+	return [
+		transition(to_send, to_receive, false),
+		transition(to_receive, to_send, true)
+	];
+}
diff --git a/src/runtime/tsconfig.json b/src/runtime/tsconfig.json
new file mode 100644
index 0000000000..f3b4691b41
--- /dev/null
+++ b/src/runtime/tsconfig.json
@@ -0,0 +1,15 @@
+{
+	"extends": "../../tsconfig.json",
+	"include": ["."],
+
+	"compilerOptions": {
+		"lib": ["es2015", "dom", "dom.iterable"],
+		"target": "es2015",
+		"types": [],
+
+		"baseUrl": ".",
+		"paths": {
+			"svelte/*": ["*"]
+		}
+	}
+}
diff --git a/src/shared/boolean_attributes.ts b/src/shared/boolean_attributes.ts
new file mode 100644
index 0000000000..4520a2064e
--- /dev/null
+++ b/src/shared/boolean_attributes.ts
@@ -0,0 +1,27 @@
+// source: https://html.spec.whatwg.org/multipage/indices.html
+export const boolean_attributes = new Set([
+	'allowfullscreen',
+	'allowpaymentrequest',
+	'async',
+	'autofocus',
+	'autoplay',
+	'checked',
+	'controls',
+	'default',
+	'defer',
+	'disabled',
+	'formnovalidate',
+	'hidden',
+	'ismap',
+	'loop',
+	'multiple',
+	'muted',
+	'nomodule',
+	'novalidate',
+	'open',
+	'playsinline',
+	'readonly',
+	'required',
+	'reversed',
+	'selected'
+]);
diff --git a/src/shared/utils/names.ts b/src/shared/utils/names.ts
new file mode 100644
index 0000000000..5e13e6cd87
--- /dev/null
+++ b/src/shared/utils/names.ts
@@ -0,0 +1,5 @@
+const void_element_names = /^(?:area|base|br|col|command|embed|hr|img|input|keygen|link|meta|param|source|track|wbr)$/;
+
+export function is_void(name: string) {
+	return void_element_names.test(name) || name.toLowerCase() === '!doctype';
+}
diff --git a/test/.eslintrc.json b/test/.eslintrc.json
new file mode 100644
index 0000000000..fc493fa889
--- /dev/null
+++ b/test/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+  "rules": {
+    "no-console": "off",
+    "@typescript-eslint/no-var-requires": "off"
+  }
+}
diff --git a/test/css/index.ts b/test/css/index.ts
new file mode 100644
index 0000000000..65b43322b1
--- /dev/null
+++ b/test/css/index.ts
@@ -0,0 +1,159 @@
+import * as fs from 'fs';
+import { assert, env, svelte, setupHtmlEqual, shouldUpdateExpected } from '../helpers';
+
+function try_require(file) {
+	try {
+		const mod = require(file);
+		return mod.default || mod;
+	} catch (err) {
+		if (err.code !== 'MODULE_NOT_FOUND') throw err;
+		return null;
+	}
+}
+
+function normalize_warning(warning) {
+	warning.frame = warning.frame
+		.replace(/^\n/, '')
+		.replace(/^\t+/gm, '')
+		.replace(/\s+$/gm, '');
+	delete warning.filename;
+	delete warning.toString;
+	return warning;
+}
+
+function create(code) {
+	const fn = new Function('module', 'exports', 'require', code);
+
+	const module = { exports: {} };
+	fn(module, module.exports, id => {
+		if (id === 'svelte') return require('../../index.js');
+		if (id.startsWith('svelte/')) return require(id.replace('svelte', '../../'));
+
+		return require(id);
+	});
+
+	return module.exports.default;
+}
+
+describe('css', () => {
+	before(() => {
+		setupHtmlEqual();
+	});
+
+	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
+		if (dir[0] === '.') return;
+
+		// add .solo to a sample directory name to only run that test
+		const solo = /\.solo/.test(dir);
+		const skip = /\.skip/.test(dir);
+
+		if (solo && process.env.CI) {
+			throw new Error('Forgot to remove `solo: true` from test');
+		}
+
+		(solo ? it.only : skip ? it.skip : it)(dir, () => {
+			const config = try_require(`./samples/${dir}/_config.js`) || {};
+			const input = fs
+				.readFileSync(`${__dirname}/samples/${dir}/input.svelte`, 'utf-8')
+				.replace(/\s+$/, '')
+				.replace(/\r/g, '');
+
+			const expected_warnings = (config.warnings || []).map(normalize_warning);
+
+			const dom = svelte.compile(
+				input,
+				Object.assign(config.compileOptions || {}, { format: 'cjs' })
+			);
+
+			const ssr = svelte.compile(
+				input,
+				Object.assign(config.compileOptions || {}, { format: 'cjs', generate: 'ssr' })
+			);
+
+			assert.equal(dom.css.code, ssr.css.code);
+
+			const dom_warnings = dom.warnings.map(normalize_warning);
+			const ssr_warnings = ssr.warnings.map(normalize_warning);
+
+			assert.deepEqual(dom_warnings, ssr_warnings);
+			assert.deepEqual(dom_warnings.map(normalize_warning), expected_warnings);
+
+			fs.writeFileSync(`${__dirname}/samples/${dir}/_actual.css`, dom.css.code);
+			const expected = {
+				html: read(`${__dirname}/samples/${dir}/expected.html`),
+				css: read(`${__dirname}/samples/${dir}/expected.css`)
+			};
+
+			const actual_css = dom.css.code.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz');
+			try {
+				assert.equal(actual_css, expected.css);
+			} catch (error) {
+				if (shouldUpdateExpected()) {
+					fs.writeFileSync(`${__dirname}/samples/${dir}/expected.css`, actual_css);
+					console.log(`Updated ${dir}/expected.css.`);
+				} else {
+					throw error;
+				}
+			}
+
+			let ClientComponent;
+			let ServerComponent;
+
+			// we do this here, rather than in the expected.html !== null
+			// block, to verify that valid code was generated
+			try {
+				ClientComponent = create(dom.js.code);
+			} catch (err) {
+				console.log(dom.js.code);
+				throw err;
+			}
+
+			try {
+				ServerComponent = create(ssr.js.code);
+			} catch (err) {
+				console.log(dom.js.code);
+				throw err;
+			}
+
+			// verify that the right elements have scoping selectors
+			if (expected.html !== null) {
+				const window = env();
+
+				// dom
+				try {
+					const target = window.document.querySelector('main');
+
+					new ClientComponent({ target, props: config.props });
+					const html = target.innerHTML;
+
+					fs.writeFileSync(`${__dirname}/samples/${dir}/_actual.html`, html);
+
+					const actual_html = html.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz');
+					assert.htmlEqual(actual_html, expected.html);
+
+					window.document.head.innerHTML = ''; // remove added styles
+				} catch (err) {
+					console.log(dom.js.code);
+					throw err;
+				}
+
+				// ssr
+				try {
+					const actual_ssr = ServerComponent.render(config.props).html.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz');
+					assert.htmlEqual(actual_ssr, expected.html);
+				} catch (err) {
+					console.log(ssr.js.code);
+					throw err;
+				}
+			}
+		});
+	});
+});
+
+function read(file) {
+	try {
+		return fs.readFileSync(file, 'utf-8');
+	} catch (err) {
+		return null;
+	}
+}
diff --git a/test/css/samples/attribute-selector-bind/expected.css b/test/css/samples/attribute-selector-bind/expected.css
new file mode 100644
index 0000000000..20543c5c8e
--- /dev/null
+++ b/test/css/samples/attribute-selector-bind/expected.css
@@ -0,0 +1 @@
+details[open].svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/attribute-selector-bind/input.svelte b/test/css/samples/attribute-selector-bind/input.svelte
new file mode 100644
index 0000000000..eb1d03e762
--- /dev/null
+++ b/test/css/samples/attribute-selector-bind/input.svelte
@@ -0,0 +1,11 @@
+<script>
+	let open = false;
+</script>
+
+<details bind:open>Hello</details>
+
+<style>
+	details[open] {
+		color: red;
+	}
+</style>
diff --git a/test/css/samples/attribute-selector-details-open/expected.css b/test/css/samples/attribute-selector-details-open/expected.css
new file mode 100644
index 0000000000..20543c5c8e
--- /dev/null
+++ b/test/css/samples/attribute-selector-details-open/expected.css
@@ -0,0 +1 @@
+details[open].svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/attribute-selector-details-open/input.svelte b/test/css/samples/attribute-selector-details-open/input.svelte
new file mode 100644
index 0000000000..f8cb70eff7
--- /dev/null
+++ b/test/css/samples/attribute-selector-details-open/input.svelte
@@ -0,0 +1,7 @@
+<details>Hello</details>
+
+<style>
+	details[open] {
+		color: red;
+	}
+</style>
diff --git a/test/css/samples/attribute-selector-dialog-open/expected.css b/test/css/samples/attribute-selector-dialog-open/expected.css
new file mode 100644
index 0000000000..54d85c4ee8
--- /dev/null
+++ b/test/css/samples/attribute-selector-dialog-open/expected.css
@@ -0,0 +1 @@
+dialog[open].svelte-xyz{display:grid}
\ No newline at end of file
diff --git a/test/css/samples/attribute-selector-dialog-open/input.svelte b/test/css/samples/attribute-selector-dialog-open/input.svelte
new file mode 100644
index 0000000000..d90211f1b2
--- /dev/null
+++ b/test/css/samples/attribute-selector-dialog-open/input.svelte
@@ -0,0 +1,7 @@
+<dialog>Hello</dialog>
+
+<style>
+	dialog[open] {
+		display: grid;
+	}
+</style>
diff --git a/test/css/samples/attribute-selector-only-name/expected.css b/test/css/samples/attribute-selector-only-name/expected.css
new file mode 100644
index 0000000000..e2bbf5b48c
--- /dev/null
+++ b/test/css/samples/attribute-selector-only-name/expected.css
@@ -0,0 +1 @@
+[foo].svelte-xyz{color:red}[baz].svelte-xyz{color:blue}
\ No newline at end of file
diff --git a/test/css/samples/attribute-selector-only-name/input.svelte b/test/css/samples/attribute-selector-only-name/input.svelte
new file mode 100644
index 0000000000..bb3d98b6bc
--- /dev/null
+++ b/test/css/samples/attribute-selector-only-name/input.svelte
@@ -0,0 +1,11 @@
+<div foo='bar'></div>
+<div baz></div>
+
+<style>
+	[foo] {
+		color: red;
+	}
+	[baz] {
+		color: blue;
+	}
+</style>
diff --git a/test/css/samples/attribute-selector-unquoted/expected.css b/test/css/samples/attribute-selector-unquoted/expected.css
new file mode 100644
index 0000000000..9f8f88a352
--- /dev/null
+++ b/test/css/samples/attribute-selector-unquoted/expected.css
@@ -0,0 +1 @@
+[foo=bar].svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/attribute-selector-unquoted/input.svelte b/test/css/samples/attribute-selector-unquoted/input.svelte
new file mode 100644
index 0000000000..c3931d79d5
--- /dev/null
+++ b/test/css/samples/attribute-selector-unquoted/input.svelte
@@ -0,0 +1,7 @@
+<div foo='bar'></div>
+
+<style>
+	[foo=bar] {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/attribute-selector-word-arbitrary-whitespace/expected.css b/test/css/samples/attribute-selector-word-arbitrary-whitespace/expected.css
new file mode 100644
index 0000000000..c1c0f3fdf6
--- /dev/null
+++ b/test/css/samples/attribute-selector-word-arbitrary-whitespace/expected.css
@@ -0,0 +1 @@
+.foo.svelte-xyz{color:red}[class~="bar"].svelte-xyz{background:blue}
\ No newline at end of file
diff --git a/test/css/samples/attribute-selector-word-arbitrary-whitespace/input.svelte b/test/css/samples/attribute-selector-word-arbitrary-whitespace/input.svelte
new file mode 100644
index 0000000000..758aa27e0b
--- /dev/null
+++ b/test/css/samples/attribute-selector-word-arbitrary-whitespace/input.svelte
@@ -0,0 +1,13 @@
+<div class="
+foo
+bar
+"></div>
+
+<style>
+	.foo {
+		color: red;
+	}
+	[class~="bar"] {
+		background: blue;
+	}
+</style>
diff --git a/test/css/samples/basic/expected.css b/test/css/samples/basic/expected.css
new file mode 100644
index 0000000000..d466e8df96
--- /dev/null
+++ b/test/css/samples/basic/expected.css
@@ -0,0 +1 @@
+div.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/basic/input.svelte b/test/css/samples/basic/input.svelte
new file mode 100644
index 0000000000..c87862c093
--- /dev/null
+++ b/test/css/samples/basic/input.svelte
@@ -0,0 +1,7 @@
+<div>red</div>
+
+<style>
+	div {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/child-combinator/expected.css b/test/css/samples/child-combinator/expected.css
new file mode 100644
index 0000000000..5d50ae16d7
--- /dev/null
+++ b/test/css/samples/child-combinator/expected.css
@@ -0,0 +1 @@
+main.svelte-xyz button.svelte-xyz.svelte-xyz{background-color:red}main.svelte-xyz div.svelte-xyz>button.svelte-xyz{background-color:blue}
\ No newline at end of file
diff --git a/test/css/samples/child-combinator/input.svelte b/test/css/samples/child-combinator/input.svelte
new file mode 100644
index 0000000000..9d5d8d27e0
--- /dev/null
+++ b/test/css/samples/child-combinator/input.svelte
@@ -0,0 +1,14 @@
+<style>
+  main button {
+    background-color: red;
+  }
+
+  main div > button {
+    background-color: blue;
+  }
+</style>
+<main>
+  <div>
+    <button type="submit">Blue</button>
+  </div>
+</main>
\ No newline at end of file
diff --git a/test/css/samples/combinator-child/expected.css b/test/css/samples/combinator-child/expected.css
new file mode 100644
index 0000000000..bf6d83d42f
--- /dev/null
+++ b/test/css/samples/combinator-child/expected.css
@@ -0,0 +1 @@
+.test.svelte-xyz>div.svelte-xyz{color:#0af}
\ No newline at end of file
diff --git a/test/css/samples/combinator-child/expected.html b/test/css/samples/combinator-child/expected.html
new file mode 100644
index 0000000000..04af5650fe
--- /dev/null
+++ b/test/css/samples/combinator-child/expected.html
@@ -0,0 +1 @@
+<div class="test svelte-xyz"><div class="svelte-xyz">Testing...</div></div>
\ No newline at end of file
diff --git a/test/css/samples/combinator-child/input.svelte b/test/css/samples/combinator-child/input.svelte
new file mode 100644
index 0000000000..90e8fbe488
--- /dev/null
+++ b/test/css/samples/combinator-child/input.svelte
@@ -0,0 +1,11 @@
+<div class="test">
+	<div>
+		Testing...
+	</div>
+</div>
+
+<style>
+	.test > div {
+		color: #0af;
+	}
+</style>
diff --git a/test/css/samples/css-vars/expected.css b/test/css/samples/css-vars/expected.css
new file mode 100644
index 0000000000..d9ff79a2a9
--- /dev/null
+++ b/test/css/samples/css-vars/expected.css
@@ -0,0 +1 @@
+:root{--root-test:20}div.svelte-xyz{--test:10}div.svelte-xyz{--foo: ;--bar: !important}
\ No newline at end of file
diff --git a/test/css/samples/css-vars/input.svelte b/test/css/samples/css-vars/input.svelte
new file mode 100644
index 0000000000..4a969428ab
--- /dev/null
+++ b/test/css/samples/css-vars/input.svelte
@@ -0,0 +1,15 @@
+<div></div>
+
+<style>
+	:root {
+		--root-test: 20;
+	}
+	div {
+		--test: 10;
+	}
+
+	div {
+		--foo: ;
+		--bar: !important;
+	}
+</style>
diff --git a/test/css/samples/custom-css-hash/_config.js b/test/css/samples/custom-css-hash/_config.js
new file mode 100644
index 0000000000..6ee2e02939
--- /dev/null
+++ b/test/css/samples/custom-css-hash/_config.js
@@ -0,0 +1,12 @@
+export default {
+	compileOptions: {
+		filename: 'src/components/FooSwitcher.svelte',
+		cssHash({ hash, css, name, filename }) {
+			const minFilename = filename
+				.split('/')
+				.map(i => i.charAt(0).toLowerCase())
+				.join('');
+			return `sv-${name}-${minFilename}-${hash(css)}`;
+		}
+	}
+};
diff --git a/test/css/samples/custom-css-hash/expected.css b/test/css/samples/custom-css-hash/expected.css
new file mode 100644
index 0000000000..fe710597ea
--- /dev/null
+++ b/test/css/samples/custom-css-hash/expected.css
@@ -0,0 +1 @@
+div.sv-FooSwitcher-scf-bzh57p{color:red}
\ No newline at end of file
diff --git a/test/css/samples/custom-css-hash/input.svelte b/test/css/samples/custom-css-hash/input.svelte
new file mode 100644
index 0000000000..bfe5a23214
--- /dev/null
+++ b/test/css/samples/custom-css-hash/input.svelte
@@ -0,0 +1,7 @@
+<div>red</div>
+
+<style>
+	div {
+		color: red;
+	}
+</style>
diff --git a/test/css/samples/descendant-selector-non-top-level-outer/expected.css b/test/css/samples/descendant-selector-non-top-level-outer/expected.css
new file mode 100644
index 0000000000..3817f75eba
--- /dev/null
+++ b/test/css/samples/descendant-selector-non-top-level-outer/expected.css
@@ -0,0 +1 @@
+p.svelte-xyz span.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/descendant-selector-non-top-level-outer/expected.html b/test/css/samples/descendant-selector-non-top-level-outer/expected.html
new file mode 100644
index 0000000000..733f71343a
--- /dev/null
+++ b/test/css/samples/descendant-selector-non-top-level-outer/expected.html
@@ -0,0 +1 @@
+<div><p class="svelte-xyz"><span class="svelte-xyz">styled</span></p></div>
\ No newline at end of file
diff --git a/test/css/samples/descendant-selector-non-top-level-outer/input.svelte b/test/css/samples/descendant-selector-non-top-level-outer/input.svelte
new file mode 100644
index 0000000000..52c07e4e58
--- /dev/null
+++ b/test/css/samples/descendant-selector-non-top-level-outer/input.svelte
@@ -0,0 +1,11 @@
+<div>
+	<p>
+		<span>styled</span>
+	</p>
+</div>
+
+<style>
+	p span {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/directive-special-character/expected.css b/test/css/samples/directive-special-character/expected.css
new file mode 100644
index 0000000000..8b25d59d2e
--- /dev/null
+++ b/test/css/samples/directive-special-character/expected.css
@@ -0,0 +1 @@
+.foo\:bar.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/directive-special-character/expected.html b/test/css/samples/directive-special-character/expected.html
new file mode 100644
index 0000000000..40eff4ca21
--- /dev/null
+++ b/test/css/samples/directive-special-character/expected.html
@@ -0,0 +1 @@
+<div class="svelte-xyz foo:bar">Hello world</div>
\ No newline at end of file
diff --git a/test/css/samples/directive-special-character/input.svelte b/test/css/samples/directive-special-character/input.svelte
new file mode 100644
index 0000000000..8f95fe1355
--- /dev/null
+++ b/test/css/samples/directive-special-character/input.svelte
@@ -0,0 +1,11 @@
+<script>
+	const enabled = true;
+</script>
+
+<div class:foo:bar={enabled}>Hello world</div>
+
+<style>
+	.foo\:bar {
+		color: red;
+	}
+</style>
diff --git a/test/css/samples/dynamic-element/_config.js b/test/css/samples/dynamic-element/_config.js
new file mode 100644
index 0000000000..344c2c7baa
--- /dev/null
+++ b/test/css/samples/dynamic-element/_config.js
@@ -0,0 +1,21 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			end: {
+				character: 86,
+				column: 8,
+				line: 7
+			},
+			frame:
+				' 5:     color: red;\n 6:   }\n 7:   .unused {\n      ^\n 8:     font-style: italic;\n 9:   }',
+			message: 'Unused CSS selector ".unused"',
+			pos: 79,
+			start: {
+				character: 79,
+				column: 1,
+				line: 7
+			}
+		}
+	]
+};
diff --git a/test/css/samples/dynamic-element/expected.css b/test/css/samples/dynamic-element/expected.css
new file mode 100644
index 0000000000..561f56a975
--- /dev/null
+++ b/test/css/samples/dynamic-element/expected.css
@@ -0,0 +1 @@
+.used.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/dynamic-element/expected.html b/test/css/samples/dynamic-element/expected.html
new file mode 100644
index 0000000000..7b11bf31f4
--- /dev/null
+++ b/test/css/samples/dynamic-element/expected.html
@@ -0,0 +1 @@
+<div class="used svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/dynamic-element/input.svelte b/test/css/samples/dynamic-element/input.svelte
new file mode 100644
index 0000000000..c00410a96d
--- /dev/null
+++ b/test/css/samples/dynamic-element/input.svelte
@@ -0,0 +1,10 @@
+<svelte:element this="div" class="used" />
+
+<style>
+	.used {
+		color: red;
+	}
+	.unused {
+		font-style: italic;
+	}
+</style>
diff --git a/test/css/samples/empty-class/_config.js b/test/css/samples/empty-class/_config.js
new file mode 100644
index 0000000000..ef5c5c1cc5
--- /dev/null
+++ b/test/css/samples/empty-class/_config.js
@@ -0,0 +1,25 @@
+export default {
+	warnings: [{
+		filename: 'SvelteComponent.svelte',
+		code: 'css-unused-selector',
+		message: 'Unused CSS selector ".x"',
+		start: {
+			line: 4,
+			column: 1,
+			character: 31
+		},
+		end: {
+			line: 4,
+			column: 3,
+			character: 33
+		},
+		pos: 31,
+		frame: `
+			2:
+			3: <style>
+			4:   .x {
+			     ^
+			5:     color: red;
+			6:   }`
+	}]
+};
diff --git a/test/css/samples/empty-class/expected.css b/test/css/samples/empty-class/expected.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/test/css/samples/empty-class/input.svelte b/test/css/samples/empty-class/input.svelte
new file mode 100644
index 0000000000..b678a66739
--- /dev/null
+++ b/test/css/samples/empty-class/input.svelte
@@ -0,0 +1,7 @@
+<div class=""></div>
+
+<style>
+	.x {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/empty-rule-dev/_config.js b/test/css/samples/empty-rule-dev/_config.js
new file mode 100644
index 0000000000..5b9d5ecf1a
--- /dev/null
+++ b/test/css/samples/empty-rule-dev/_config.js
@@ -0,0 +1,5 @@
+export default {
+	compileOptions: {
+		dev: true
+	}
+};
diff --git a/test/css/samples/empty-rule-dev/expected.css b/test/css/samples/empty-rule-dev/expected.css
new file mode 100644
index 0000000000..4013e47e5d
--- /dev/null
+++ b/test/css/samples/empty-rule-dev/expected.css
@@ -0,0 +1 @@
+.foo.svelte-xyz{}
\ No newline at end of file
diff --git a/test/css/samples/empty-rule-dev/input.svelte b/test/css/samples/empty-rule-dev/input.svelte
new file mode 100644
index 0000000000..ac2e43dceb
--- /dev/null
+++ b/test/css/samples/empty-rule-dev/input.svelte
@@ -0,0 +1,7 @@
+<div class='foo'></div>
+
+<style>
+	.foo {
+		/* empty */
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/empty-rule/expected.css b/test/css/samples/empty-rule/expected.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/test/css/samples/empty-rule/input.svelte b/test/css/samples/empty-rule/input.svelte
new file mode 100644
index 0000000000..ac2e43dceb
--- /dev/null
+++ b/test/css/samples/empty-rule/input.svelte
@@ -0,0 +1,7 @@
+<div class='foo'></div>
+
+<style>
+	.foo {
+		/* empty */
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-await-not-exhaustive/_config.js b/test/css/samples/general-siblings-combinator-await-not-exhaustive/_config.js
new file mode 100644
index 0000000000..c81f1a9f82
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-await-not-exhaustive/_config.js
@@ -0,0 +1,3 @@
+export default {
+	warnings: []
+};
diff --git a/test/css/samples/general-siblings-combinator-await-not-exhaustive/expected.css b/test/css/samples/general-siblings-combinator-await-not-exhaustive/expected.css
new file mode 100644
index 0000000000..54eefc6088
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-await-not-exhaustive/expected.css
@@ -0,0 +1 @@
+.a.svelte-xyz~.b.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.c.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.e.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.f.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.g.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.h.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.b.svelte-xyz~.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.b.svelte-xyz~.e.svelte-xyz~.f.svelte-xyz~.h.svelte-xyz{color:green}.b.svelte-xyz~.d.svelte-xyz~.h.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.g.svelte-xyz.svelte-xyz.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-await-not-exhaustive/expected.html b/test/css/samples/general-siblings-combinator-await-not-exhaustive/expected.html
new file mode 100644
index 0000000000..de97b02a5e
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-await-not-exhaustive/expected.html
@@ -0,0 +1,4 @@
+<div class="a svelte-xyz"></div>
+<div class="d svelte-xyz"></div>
+<div class="f svelte-xyz"></div>
+<div class="h svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-await-not-exhaustive/input.svelte b/test/css/samples/general-siblings-combinator-await-not-exhaustive/input.svelte
new file mode 100644
index 0000000000..a677077c33
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-await-not-exhaustive/input.svelte
@@ -0,0 +1,41 @@
+<script>
+	let promise = Promise.resolve();
+</script>
+
+<style>
+	.a ~ .b { color: green; }
+	.a ~ .c { color: green; }
+	.a ~ .d { color: green; }
+	.a ~ .e { color: green; }
+	.a ~ .f { color: green; }
+	.a ~ .g { color: green; }
+	.a ~ .h { color: green; }
+	
+	.b ~ .d { color: green; }
+	.c ~ .d { color: green; }
+	.b ~ .e ~ .f ~ .h { color: green; }
+	.b ~ .d ~ .h { color: green; }
+	.c ~ .g { color: green; }
+</style>
+
+<div class="a" />
+
+{#await promise then value}
+	<div class="b" />
+{:catch error}
+	<div class="c" />
+{/await}
+
+{#await promise}
+	<div class="d" />
+{:catch error}
+	<div class="e" />
+{/await}
+
+{#await promise}
+	<div class="f" />
+{:then error}
+	<div class="g" />
+{/await}
+
+<div class="h" />
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-await/_config.js b/test/css/samples/general-siblings-combinator-await/_config.js
new file mode 100644
index 0000000000..5892e32972
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-await/_config.js
@@ -0,0 +1,46 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			frame: `
+				13:
+				14:   /* no match */
+				15:   .b ~ .c { color: green; }
+				      ^
+				16:   .c ~ .d { color: green; }
+				17:   .b ~ .d { color: green; }`,
+			message: 'Unused CSS selector ".b ~ .c"',
+			pos: 269,
+			start: { character: 269, column: 1, line: 15 },
+			end: { character: 276, column: 8, line: 15 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				14:   /* no match */
+				15:   .b ~ .c { color: green; }
+				16:   .c ~ .d { color: green; }
+				      ^
+				17:   .b ~ .d { color: green; }
+				18: </style>`,
+			message: 'Unused CSS selector ".c ~ .d"',
+			pos: 296,
+			start: { character: 296, column: 1, line: 16 },
+			end: { character: 303, column: 8, line: 16 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				15:   .b ~ .c { color: green; }
+				16:   .c ~ .d { color: green; }
+				17:   .b ~ .d { color: green; }
+				      ^
+				18: </style>
+				19:`,
+			message: 'Unused CSS selector ".b ~ .d"',
+			pos: 323,
+			start: { character: 323, column: 1, line: 17 },
+			end: { character: 330, column: 8, line: 17 }
+		}
+	]
+};
diff --git a/test/css/samples/general-siblings-combinator-await/expected.css b/test/css/samples/general-siblings-combinator-await/expected.css
new file mode 100644
index 0000000000..94a5494597
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-await/expected.css
@@ -0,0 +1 @@
+.a.svelte-xyz~.b.svelte-xyz{color:green}.a.svelte-xyz~.c.svelte-xyz{color:green}.a.svelte-xyz~.d.svelte-xyz{color:green}.b.svelte-xyz~.e.svelte-xyz{color:green}.c.svelte-xyz~.e.svelte-xyz{color:green}.d.svelte-xyz~.e.svelte-xyz{color:green}.a.svelte-xyz~.e.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-await/expected.html b/test/css/samples/general-siblings-combinator-await/expected.html
new file mode 100644
index 0000000000..3d8ac9f966
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-await/expected.html
@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="e svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-await/input.svelte b/test/css/samples/general-siblings-combinator-await/input.svelte
new file mode 100644
index 0000000000..8aeadab170
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-await/input.svelte
@@ -0,0 +1,30 @@
+<script>
+	let promise = Promise.resolve();
+</script>
+
+<style>
+	.a ~ .b { color: green; }
+	.a ~ .c { color: green; }
+	.a ~ .d { color: green; }
+	.b ~ .e { color: green; }
+	.c ~ .e { color: green; }
+	.d ~ .e { color: green; }
+	.a ~ .e { color: green; }
+
+	/* no match */
+	.b ~ .c { color: green; }
+	.c ~ .d { color: green; }
+	.b ~ .d { color: green; }
+</style>
+
+<div class="a" />
+
+{#await promise}
+	<div class="b" />
+{:then value}
+	<div class="c" />
+{:catch error}
+	<div class="d" />
+{/await}
+
+<div class="e" />
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-each-2/_config.js b/test/css/samples/general-siblings-combinator-each-2/_config.js
new file mode 100644
index 0000000000..c81f1a9f82
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-each-2/_config.js
@@ -0,0 +1,3 @@
+export default {
+	warnings: []
+};
diff --git a/test/css/samples/general-siblings-combinator-each-2/expected.css b/test/css/samples/general-siblings-combinator-each-2/expected.css
new file mode 100644
index 0000000000..d197058b24
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-each-2/expected.css
@@ -0,0 +1 @@
+.a.svelte-xyz~.b.svelte-xyz{color:green}.c.svelte-xyz~.d.svelte-xyz{color:green}.a.svelte-xyz~.d.svelte-xyz{color:green}.c.svelte-xyz~.b.svelte-xyz{color:green}.b.svelte-xyz~.c.svelte-xyz{color:green}.a.svelte-xyz~.c.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-each-2/expected.html b/test/css/samples/general-siblings-combinator-each-2/expected.html
new file mode 100644
index 0000000000..331a5e4317
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-each-2/expected.html
@@ -0,0 +1,4 @@
+<div class="a svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="c svelte-xyz"></div>
+<div class="d svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-each-2/input.svelte b/test/css/samples/general-siblings-combinator-each-2/input.svelte
new file mode 100644
index 0000000000..5bbdbdef66
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-each-2/input.svelte
@@ -0,0 +1,37 @@
+<script>
+	let array = [1];
+</script>
+
+<style>
+	/* boundary of each */
+	.a ~ .b {
+		color: green;
+	}
+	.c ~ .d {
+		color: green;
+	}
+	/* if array is empty */
+	.a ~ .d {
+		color: green;
+	}
+	/* if array has multiple items */
+	.c ~ .b {
+		color: green;
+	}
+	/* normal sibling */
+	.b ~ .c {
+		color: green;
+	}
+	.a ~ .c {
+		color: green;
+	}
+</style>
+
+<div class="a" />
+
+{#each array as item}
+	<div class="b" />
+	<div class="c" />
+{/each}
+
+<div class="d" />
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-each-else-nested/_config.js b/test/css/samples/general-siblings-combinator-each-else-nested/_config.js
new file mode 100644
index 0000000000..cd5cb14a66
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-each-else-nested/_config.js
@@ -0,0 +1,18 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			frame: `
+				33:
+				34:   /* no match */
+				35:   .e ~ .f { color: green; }
+				      ^
+				36: </style>
+				37:`,
+			message: 'Unused CSS selector ".e ~ .f"',
+			pos: 812,
+			start: { character: 812, column: 1, line: 35 },
+			end: { character: 819, column: 8, line: 35 }
+		}
+	]
+};
diff --git a/test/css/samples/general-siblings-combinator-each-else-nested/expected.css b/test/css/samples/general-siblings-combinator-each-else-nested/expected.css
new file mode 100644
index 0000000000..b055f35ecd
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-each-else-nested/expected.css
@@ -0,0 +1 @@
+.a.svelte-xyz~.e.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.f.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.b.svelte-xyz~.c.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.b.svelte-xyz~.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.e.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.f.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz~.e.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz~.f.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.e.svelte-xyz~.e.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.i.svelte-xyz~.j.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz~.h.svelte-xyz~.j.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz~.i.svelte-xyz~.j.svelte-xyz.svelte-xyz{color:green}.m.svelte-xyz~.m.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.m.svelte-xyz~.l.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.l.svelte-xyz~.m.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.c.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.g.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.b.svelte-xyz~.e.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.g.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.k.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz~.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz~.g.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.h.svelte-xyz~.h.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.i.svelte-xyz~.i.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.j.svelte-xyz~.j.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz~.j.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz~.h.svelte-xyz~.i.svelte-xyz~.j.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-each-else-nested/expected.html b/test/css/samples/general-siblings-combinator-each-else-nested/expected.html
new file mode 100644
index 0000000000..67dd05f677
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-each-else-nested/expected.html
@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="f svelte-xyz"></div>
+<div class="k svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-each-else-nested/input.svelte b/test/css/samples/general-siblings-combinator-each-else-nested/input.svelte
new file mode 100644
index 0000000000..63a1123708
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-each-else-nested/input.svelte
@@ -0,0 +1,77 @@
+<script>
+	let array = [];
+</script>
+
+<style>
+	.a ~ .e { color: green; }
+	.a ~ .f { color: green; }
+	.b ~ .c { color: green; }
+	.b ~ .d { color: green; }
+	.c ~ .e { color: green; }
+	.c ~ .f { color: green; }
+	.d ~ .e { color: green; }
+	.d ~ .f { color: green; }
+	.e ~ .e { color: green; }
+	.i ~ .j { color: green; }
+	.g ~ .h ~ .j { color: green; }
+	.g ~ .i ~ .j { color: green; }
+	.m ~ .m { color: green; }
+	.m ~ .l { color: green; }
+	.l ~ .m { color: green; }
+	.a ~ .c { color: green; }
+	.a ~ .g { color: green; }
+	.b ~ .e { color: green; }
+	.c ~ .g { color: green; }
+	.c ~ .k { color: green; }
+	.d ~ .d { color: green; }
+	.g ~ .g { color: green; }
+	.h ~ .h { color: green; }
+	.i ~ .i { color: green; }
+	.j ~ .j { color: green; }
+	.g ~ .j { color: green; }
+	.g ~ .h ~ .i ~ .j { color: green; }
+
+	/* no match */
+	.e ~ .f { color: green; }
+</style>
+
+<div class="a" />
+
+{#each array as a}
+	<div class="b" />
+	{#each array as b}
+		<div class="c" />
+	{:else}
+		<div class="d" />
+	{/each}
+{/each}
+
+{#each array as c}
+	{#each array as d}
+		<div class="e" />
+	{/each}
+{:else}
+	<div class="f" />
+{/each}
+
+{#each array as x}
+	<div class="g" />
+	{#each array as y}
+		{#each array as z}
+			<div class="h" />
+		{/each}
+	{:else}
+		<div class="i" />
+	{/each}
+	<div class="j" />
+{/each}
+
+<div class="k" />
+
+{#each array as item}
+	{#each array as item}
+		<div class="l" />
+	{:else}
+		<div class="m" />
+	{/each}
+{/each}
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-each-else/_config.js b/test/css/samples/general-siblings-combinator-each-else/_config.js
new file mode 100644
index 0000000000..410a4d0ac7
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-each-else/_config.js
@@ -0,0 +1,18 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			frame: `
+				11:
+				12:   /* no match */
+				13:   .b ~ .c { color: green; }
+				      ^
+				14: </style>
+				15:`,
+			message: 'Unused CSS selector ".b ~ .c"',
+			pos: 199,
+			start: { character: 199, column: 1, line: 13 },
+			end: { character: 206, column: 8, line: 13 }
+		}
+	]
+};
diff --git a/test/css/samples/general-siblings-combinator-each-else/expected.css b/test/css/samples/general-siblings-combinator-each-else/expected.css
new file mode 100644
index 0000000000..31fafa3243
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-each-else/expected.css
@@ -0,0 +1 @@
+.a.svelte-xyz~.b.svelte-xyz{color:green}.a.svelte-xyz~.c.svelte-xyz{color:green}.b.svelte-xyz~.d.svelte-xyz{color:green}.c.svelte-xyz~.d.svelte-xyz{color:green}.a.svelte-xyz~.d.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-each-else/expected.html b/test/css/samples/general-siblings-combinator-each-else/expected.html
new file mode 100644
index 0000000000..fb838a55fd
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-each-else/expected.html
@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="c svelte-xyz"></div>
+<div class="d svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-each-else/input.svelte b/test/css/samples/general-siblings-combinator-each-else/input.svelte
new file mode 100644
index 0000000000..5cd78853ca
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-each-else/input.svelte
@@ -0,0 +1,24 @@
+<script>
+	let array = [];
+</script>
+
+<style>
+	.a ~ .b { color: green; }
+	.a ~ .c { color: green; }
+	.b ~ .d { color: green; }
+	.c ~ .d { color: green; }
+	.a ~ .d { color: green; }
+	
+	/* no match */
+	.b ~ .c { color: green; }
+</style>
+
+<div class="a" />
+
+{#each array as item}
+	<div class="b" />
+{:else}
+	<div class="c" />
+{/each}
+
+<div class="d" />
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-each-nested/_config.js b/test/css/samples/general-siblings-combinator-each-nested/_config.js
new file mode 100644
index 0000000000..c81f1a9f82
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-each-nested/_config.js
@@ -0,0 +1,3 @@
+export default {
+	warnings: []
+};
diff --git a/test/css/samples/general-siblings-combinator-each-nested/expected.css b/test/css/samples/general-siblings-combinator-each-nested/expected.css
new file mode 100644
index 0000000000..5bf1f832ae
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-each-nested/expected.css
@@ -0,0 +1 @@
+.a.svelte-xyz~.d.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.e.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.f.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.g.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.d.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.e.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.f.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.g.svelte-xyz.svelte-xyz{color:green}.j.svelte-xyz~.m.svelte-xyz.svelte-xyz{color:green}.j.svelte-xyz~.n.svelte-xyz.svelte-xyz{color:green}.j.svelte-xyz~.o.svelte-xyz.svelte-xyz{color:green}.k.svelte-xyz~.m.svelte-xyz.svelte-xyz{color:green}.k.svelte-xyz~.n.svelte-xyz.svelte-xyz{color:green}.k.svelte-xyz~.o.svelte-xyz.svelte-xyz{color:green}.l.svelte-xyz~.m.svelte-xyz.svelte-xyz{color:green}.l.svelte-xyz~.n.svelte-xyz.svelte-xyz{color:green}.l.svelte-xyz~.o.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz~.e.svelte-xyz.svelte-xyz{color:green}.e.svelte-xyz~.f.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz~.h.svelte-xyz.svelte-xyz{color:green}.f.svelte-xyz~.d.svelte-xyz.svelte-xyz{color:green}.f.svelte-xyz~.e.svelte-xyz.svelte-xyz{color:green}.f.svelte-xyz~.f.svelte-xyz.svelte-xyz{color:green}.h.svelte-xyz~.g.svelte-xyz.svelte-xyz{color:green}.i.svelte-xyz~.h.svelte-xyz.svelte-xyz{color:green}.i.svelte-xyz~.g.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz~.d.svelte-xyz.svelte-xyz{color:green}.e.svelte-xyz~.e.svelte-xyz.svelte-xyz{color:green}.f.svelte-xyz~.f.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz~.g.svelte-xyz.svelte-xyz{color:green}.h.svelte-xyz~.h.svelte-xyz.svelte-xyz{color:green}.i.svelte-xyz~.i.svelte-xyz.svelte-xyz{color:green}.e.svelte-xyz~.e.svelte-xyz~.f.svelte-xyz{color:green}.e.svelte-xyz~.e.svelte-xyz~.d.svelte-xyz{color:green}.h.svelte-xyz~.h.svelte-xyz~.i.svelte-xyz{color:green}.h.svelte-xyz~.h.svelte-xyz~.g.svelte-xyz{color:green}.a.svelte-xyz~.h.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.i.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.h.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.i.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz~.f.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz~.g.svelte-xyz.svelte-xyz{color:green}.e.svelte-xyz~.g.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz~.i.svelte-xyz.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-each-nested/expected.html b/test/css/samples/general-siblings-combinator-each-nested/expected.html
new file mode 100644
index 0000000000..340d6fc4c8
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-each-nested/expected.html
@@ -0,0 +1,15 @@
+<div class="a svelte-xyz"></div>
+<div class="b"></div>
+<div class="c svelte-xyz"></div>
+<div class="d svelte-xyz"></div>
+<div class="e svelte-xyz"></div>
+<div class="f svelte-xyz"></div>
+<div class="g svelte-xyz"></div>
+<div class="h svelte-xyz"></div>
+<div class="i svelte-xyz"></div>
+<div class="j svelte-xyz"></div>
+<div class="k svelte-xyz"></div>
+<div class="l svelte-xyz"></div>
+<div class="m svelte-xyz"></div>
+<div class="n svelte-xyz"></div>
+<div class="o svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-each-nested/input.svelte b/test/css/samples/general-siblings-combinator-each-nested/input.svelte
new file mode 100644
index 0000000000..b7c7377015
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-each-nested/input.svelte
@@ -0,0 +1,113 @@
+<script>
+	let array = [1];
+</script>
+
+<style>
+	/* boundary of each */
+	.a ~ .d { color: green; }
+	.a ~ .e { color: green; }
+	.a ~ .f { color: green; }
+	.a ~ .g { color: green; }
+	.c ~ .d { color: green; }
+	.c ~ .e { color: green; }
+	.c ~ .f { color: green; }
+	.c ~ .g { color: green; }
+
+	/* nested boundary of each */
+	.j ~ .m { color: green; }
+	.j ~ .n { color: green; }
+	.j ~ .o { color: green; }
+	.k ~ .m { color: green; }
+	.k ~ .n { color: green; }
+	.k ~ .o { color: green; }
+	.l ~ .m { color: green; }
+	.l ~ .n { color: green; }
+	.l ~ .o { color: green; }
+
+	/* parent each */
+	.d ~ .e { color: green; }
+	.e ~ .f { color: green; }
+
+	/* child each */
+	.g ~ .h { color: green; }
+
+	/* wrap around */
+	.f ~ .d { color: green; }
+	.f ~ .e { color: green; }
+	.f ~ .f { color: green; }
+
+	.h ~ .g { color: green; }
+	.i ~ .h { color: green; }
+	.i ~ .g { color: green; }
+
+	/* wrap around self */
+	.d ~ .d { color: green; }
+	.e ~ .e { color: green; }
+	.f ~ .f { color: green; }
+	.g ~ .g { color: green; }
+	.h ~ .h { color: green; }
+	.i ~ .i { color: green; }
+
+	/* wrap around self ~ next */
+	.e ~ .e ~ .f { color: green; }
+	.e ~ .e ~ .d { color: green; }
+	.h ~ .h ~ .i { color: green; }
+	.h ~ .h ~ .g { color: green; }
+
+	/* general siblings */
+	.a ~ .h { color: green; }
+	.a ~ .i { color: green; }
+	.c ~ .h { color: green; }
+	.c ~ .i { color: green; }
+	.d ~ .f { color: green; }
+	.d ~ .g { color: green; }
+	.e ~ .g { color: green; }
+	.g ~ .i { color: green; }
+</style>
+
+<div class="a" />
+
+{#each array as item}
+	<div class="b" />
+	<div class="c" />
+{/each}
+
+{#each array as item}
+	{#each array as item}
+		{#each array as item}
+			<div class="d" />
+		{/each}
+		<div class="e" />
+	{/each}
+	<div class="f" />
+{/each}
+
+{#each array as item}
+	<div class="g" />
+	{#each array as item}
+		<div class="h" />
+		{#each array as item}
+			<div class="i" />
+		{/each}
+	{/each}
+{/each}
+
+{#each array as item}
+	<div class="j" />
+	{#each array as item}
+		<div class="k" />
+		{#each array as item}
+			<div class="l" />
+		{/each}
+	{/each}
+{/each}
+
+{#each array as item}
+	{#each array as item}
+		{#each array as item}
+			<div class="m" />
+		{/each}
+		<div class="n" />
+	{/each}
+	<div class="o" />
+{/each}
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-each/expected.css b/test/css/samples/general-siblings-combinator-each/expected.css
new file mode 100644
index 0000000000..8c48251bdd
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-each/expected.css
@@ -0,0 +1 @@
+div.svelte-xyz~span.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-each/expected.html b/test/css/samples/general-siblings-combinator-each/expected.html
new file mode 100644
index 0000000000..9d0416f01b
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-each/expected.html
@@ -0,0 +1,6 @@
+<div class="svelte-xyz"></div>
+<span class="each svelte-xyz"></span>
+<div class="each svelte-xyz"></div>
+<span class="each svelte-xyz"></span>
+<div class="each svelte-xyz"></div>
+<span class="svelte-xyz"></span>
diff --git a/test/css/samples/general-siblings-combinator-each/input.svelte b/test/css/samples/general-siblings-combinator-each/input.svelte
new file mode 100644
index 0000000000..ce65da109d
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-each/input.svelte
@@ -0,0 +1,20 @@
+<script>
+	let array = [1];
+</script>
+
+<style>
+	div ~ span {
+		color: green;
+	}
+</style>
+
+<div />
+
+{#each array as item}
+	<span class="each" />
+	<div class="each" />
+	<span class="each" />
+	<div class="each" />
+{/each}
+
+<span />
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/_config.js b/test/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/_config.js
new file mode 100644
index 0000000000..a4c915f421
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/_config.js
@@ -0,0 +1,18 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			frame: `
+				16:
+				17:   /* no match */
+				18:   .b ~ .c { color: green; }
+				      ^
+				19: </style>
+				20:`,
+			message: 'Unused CSS selector ".b ~ .c"',
+			pos: 319,
+			start: { character: 319, column: 1, line: 18 },
+			end: { character: 326, column: 8, line: 18 }
+		}
+	]
+};
diff --git a/test/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/expected.css b/test/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/expected.css
new file mode 100644
index 0000000000..e6a974efca
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/expected.css
@@ -0,0 +1 @@
+.a.svelte-xyz~.b.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.c.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.b.svelte-xyz~.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.c.svelte-xyz~.c.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz~.c.svelte-xyz~.d.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.c.svelte-xyz~.c.svelte-xyz~.d.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/expected.html b/test/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/expected.html
new file mode 100644
index 0000000000..fb838a55fd
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/expected.html
@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="c svelte-xyz"></div>
+<div class="d svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/input.svelte b/test/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/input.svelte
new file mode 100644
index 0000000000..2b53f7b5b8
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-if-not-exhaustive-with-each/input.svelte
@@ -0,0 +1,31 @@
+<script>
+	let foo = false;
+	let array = [1];
+</script>
+
+<style>
+	.a ~ .b { color: green; }
+	.a ~ .c { color: green; }
+	.a ~ .d { color: green; }
+	.b ~ .d { color: green; }
+	.c ~ .d { color: green; }
+
+	.a ~ .c ~ .c { color: green; }
+	.c ~ .c ~ .d { color: green; }
+	.a ~ .c ~ .c ~ .d { color: green; }
+
+	/* no match */
+	.b ~ .c { color: green; }
+</style>
+
+<div class="a" />
+
+{#if foo}
+	<div class="b" />
+{:else}
+	{#each array as item}
+		<div class="c" />
+	{/each}
+{/if}
+
+<div class="d" />
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-if-not-exhaustive/_config.js b/test/css/samples/general-siblings-combinator-if-not-exhaustive/_config.js
new file mode 100644
index 0000000000..2f3067b262
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-if-not-exhaustive/_config.js
@@ -0,0 +1,18 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			frame: `
+				12:
+				13:   /* no match */
+				14:   .b ~ .c { color: green; }
+				      ^
+				15: </style>
+				16:`,
+			message: 'Unused CSS selector ".b ~ .c"',
+			pos: 215,
+			start: { character: 215, column: 1, line: 14 },
+			end: { character: 222, column: 8, line: 14 }
+		}
+	]
+};
diff --git a/test/css/samples/general-siblings-combinator-if-not-exhaustive/expected.css b/test/css/samples/general-siblings-combinator-if-not-exhaustive/expected.css
new file mode 100644
index 0000000000..dc7ee1b62b
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-if-not-exhaustive/expected.css
@@ -0,0 +1 @@
+.a.svelte-xyz~.b.svelte-xyz{color:green}.a.svelte-xyz~.c.svelte-xyz{color:green}.a.svelte-xyz~.d.svelte-xyz{color:green}.b.svelte-xyz~.d.svelte-xyz{color:green}.c.svelte-xyz~.d.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-if-not-exhaustive/expected.html b/test/css/samples/general-siblings-combinator-if-not-exhaustive/expected.html
new file mode 100644
index 0000000000..813e778dc6
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-if-not-exhaustive/expected.html
@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="d svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-if-not-exhaustive/input.svelte b/test/css/samples/general-siblings-combinator-if-not-exhaustive/input.svelte
new file mode 100644
index 0000000000..3e5c5af7a2
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-if-not-exhaustive/input.svelte
@@ -0,0 +1,25 @@
+<script>
+	let foo = true;
+	let bar = true;
+</script>
+
+<style>
+	.a ~ .b { color: green; }
+	.a ~ .c { color: green; }
+	.a ~ .d { color: green; }
+	.b ~ .d { color: green; }
+	.c ~ .d { color: green; }
+
+	/* no match */
+	.b ~ .c { color: green; }
+</style>
+
+<div class="a" />
+
+{#if foo}
+	<div class="b" />
+{:else if bar}
+	<div class="c" />
+{/if}
+
+<div class="d" />
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-if/_config.js b/test/css/samples/general-siblings-combinator-if/_config.js
new file mode 100644
index 0000000000..c2eb0503cd
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-if/_config.js
@@ -0,0 +1,46 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			frame: `
+				14:
+				15:   /* no match */
+				16:   .b ~ .c { color: green; }
+				      ^
+				17:   .b ~ .d { color: green; }
+				18:   .c ~ .d { color: green; }`,
+			message: 'Unused CSS selector ".b ~ .c"',
+			pos: 269,
+			start: { character: 269, column: 1, line: 16 },
+			end: { character: 276, column: 8, line: 16 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				15:   /* no match */
+				16:   .b ~ .c { color: green; }
+				17:   .b ~ .d { color: green; }
+				      ^
+				18:   .c ~ .d { color: green; }
+				19: </style>`,
+			message: 'Unused CSS selector ".b ~ .d"',
+			pos: 296,
+			start: { character: 296, column: 1, line: 17 },
+			end: { character: 303, column: 8, line: 17 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				16:   .b ~ .c { color: green; }
+				17:   .b ~ .d { color: green; }
+				18:   .c ~ .d { color: green; }
+				      ^
+				19: </style>
+				20:`,
+			message: 'Unused CSS selector ".c ~ .d"',
+			pos: 323,
+			start: { character: 323, column: 1, line: 18 },
+			end: { character: 330, column: 8, line: 18 }
+		}
+	]
+};
diff --git a/test/css/samples/general-siblings-combinator-if/expected.css b/test/css/samples/general-siblings-combinator-if/expected.css
new file mode 100644
index 0000000000..94a5494597
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-if/expected.css
@@ -0,0 +1 @@
+.a.svelte-xyz~.b.svelte-xyz{color:green}.a.svelte-xyz~.c.svelte-xyz{color:green}.a.svelte-xyz~.d.svelte-xyz{color:green}.b.svelte-xyz~.e.svelte-xyz{color:green}.c.svelte-xyz~.e.svelte-xyz{color:green}.d.svelte-xyz~.e.svelte-xyz{color:green}.a.svelte-xyz~.e.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-if/expected.html b/test/css/samples/general-siblings-combinator-if/expected.html
new file mode 100644
index 0000000000..3d8ac9f966
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-if/expected.html
@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="e svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-if/input.svelte b/test/css/samples/general-siblings-combinator-if/input.svelte
new file mode 100644
index 0000000000..fca5499f2e
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-if/input.svelte
@@ -0,0 +1,31 @@
+<script>
+	let foo = true;
+	let bar = true;
+</script>
+
+<style>
+	.a ~ .b { color: green; }
+	.a ~ .c { color: green; }
+	.a ~ .d { color: green; }
+	.b ~ .e { color: green; }
+	.c ~ .e { color: green; }
+	.d ~ .e { color: green; }
+	.a ~ .e { color: green; }
+
+	/* no match */
+	.b ~ .c { color: green; }
+	.b ~ .d { color: green; }
+	.c ~ .d { color: green; }
+</style>
+
+<div class="a" />
+
+{#if foo}
+	<div class="b" />
+{:else if bar}
+	<div class="c" />
+{:else}
+	<div class="d" />
+{/if}
+
+<div class="e" />
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-slot/_config.js b/test/css/samples/general-siblings-combinator-slot/_config.js
new file mode 100644
index 0000000000..5d8747d4f1
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-slot/_config.js
@@ -0,0 +1,88 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			frame: `
+				 8:
+				 9:   /* no match */
+				10:   .a ~ .b { color: green; }
+				      ^
+				11:   .b ~ .c { color: green; }
+				12:   .c ~ .f { color: green; }`,
+			message: 'Unused CSS selector ".a ~ .b"',
+			pos: 111,
+			start: { character: 111, column: 1, line: 10 },
+			end: { character: 118, column: 8, line: 10 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				 9:   /* no match */
+				10:   .a ~ .b { color: green; }
+				11:   .b ~ .c { color: green; }
+				      ^
+				12:   .c ~ .f { color: green; }
+				13:   .f ~ .g { color: green; }`,
+			message: 'Unused CSS selector ".b ~ .c"',
+			pos: 138,
+			start: { character: 138, column: 1, line: 11 },
+			end: { character: 145, column: 8, line: 11 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				10:   .a ~ .b { color: green; }
+				11:   .b ~ .c { color: green; }
+				12:   .c ~ .f { color: green; }
+				      ^
+				13:   .f ~ .g { color: green; }
+				14:   .b ~ .f { color: green; }`,
+			message: 'Unused CSS selector ".c ~ .f"',
+			pos: 165,
+			start: { character: 165, column: 1, line: 12 },
+			end: { character: 172, column: 8, line: 12 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				11:   .b ~ .c { color: green; }
+				12:   .c ~ .f { color: green; }
+				13:   .f ~ .g { color: green; }
+				      ^
+				14:   .b ~ .f { color: green; }
+				15:   .b ~ .g { color: green; }`,
+			message: 'Unused CSS selector ".f ~ .g"',
+			pos: 192,
+			start: { character: 192, column: 1, line: 13 },
+			end: { character: 199, column: 8, line: 13 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				12:   .c ~ .f { color: green; }
+				13:   .f ~ .g { color: green; }
+				14:   .b ~ .f { color: green; }
+				      ^
+				15:   .b ~ .g { color: green; }
+				16: </style>`,
+			message: 'Unused CSS selector ".b ~ .f"',
+			pos: 219,
+			start: { character: 219, column: 1, line: 14 },
+			end: { character: 226, column: 8, line: 14 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				13:   .f ~ .g { color: green; }
+				14:   .b ~ .f { color: green; }
+				15:   .b ~ .g { color: green; }
+				      ^
+				16: </style>
+				17:`,
+			message: 'Unused CSS selector ".b ~ .g"',
+			pos: 246,
+			start: { character: 246, column: 1, line: 15 },
+			end: { character: 253, column: 8, line: 15 }
+		}
+	]
+};
diff --git a/test/css/samples/general-siblings-combinator-slot/expected.css b/test/css/samples/general-siblings-combinator-slot/expected.css
new file mode 100644
index 0000000000..29325e0cef
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-slot/expected.css
@@ -0,0 +1 @@
+.d.svelte-xyz~.e.svelte-xyz{color:green}.a.svelte-xyz~.g.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-slot/input.svelte b/test/css/samples/general-siblings-combinator-slot/input.svelte
new file mode 100644
index 0000000000..e5af4c0962
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-slot/input.svelte
@@ -0,0 +1,30 @@
+<script>
+	let App;
+</script>
+
+<style>
+	.d ~ .e { color: green; }
+	.a ~ .g { color: green; }
+	
+	/* no match */
+	.a ~ .b { color: green; }
+	.b ~ .c { color: green; }
+	.c ~ .f { color: green; }
+	.f ~ .g { color: green; }
+	.b ~ .f { color: green; }
+	.b ~ .g { color: green; }
+</style>
+
+<div class="a" />
+<App>
+	<div class="b" slot="a" />
+
+	<div class="c" slot="b">
+		<div class="d" />
+		<div class="e" />
+	</div>
+
+	<div class="f" slot="c" />
+</App>
+
+<div class="g" />
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-star/_config.js b/test/css/samples/general-siblings-combinator-star/_config.js
new file mode 100644
index 0000000000..0079310544
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-star/_config.js
@@ -0,0 +1,18 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			frame: `
+				3:     margin-left: 4px;
+				4:   }
+				5:   .not-match > * ~ * {
+				     ^
+				6:     margin-left: 4px;
+				7:   }`,
+			message: 'Unused CSS selector ".not-match > * ~ *"',
+			pos: 50,
+			start: { character: 50, column: 1, line: 5 },
+      end: { character: 68, column: 19, line: 5 }
+		}
+	]
+};
diff --git a/test/css/samples/general-siblings-combinator-star/expected.css b/test/css/samples/general-siblings-combinator-star/expected.css
new file mode 100644
index 0000000000..de947fa47e
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-star/expected.css
@@ -0,0 +1 @@
+.match.svelte-xyz>.svelte-xyz~.svelte-xyz{margin-left:4px}
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-star/expected.html b/test/css/samples/general-siblings-combinator-star/expected.html
new file mode 100644
index 0000000000..1cfae6e6f7
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-star/expected.html
@@ -0,0 +1,7 @@
+<div class="not-match">
+  <div></div>
+</div>
+<div class="match svelte-xyz">
+  <div class="svelte-xyz"></div>
+  <div class="svelte-xyz"></div>
+</div>
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator-star/input.svelte b/test/css/samples/general-siblings-combinator-star/input.svelte
new file mode 100644
index 0000000000..a069685d4f
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator-star/input.svelte
@@ -0,0 +1,17 @@
+<style>
+	.match > * ~ * {
+		margin-left: 4px;
+	}
+	.not-match > * ~ * {
+		margin-left: 4px;
+	}
+</style>
+
+<div class="not-match">
+	<div />
+</div>
+
+<div class="match">
+	<div />
+	<div />
+</div>
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator/_config.js b/test/css/samples/general-siblings-combinator/_config.js
new file mode 100644
index 0000000000..662c01ae6c
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator/_config.js
@@ -0,0 +1,60 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			frame: `
+				10:
+				11:   /* no match */
+				12:   article ~ div { color: green; }
+				      ^
+				13:   span ~ article { color: green; }
+				14:   b ~ article { color: green; }`,
+			message: 'Unused CSS selector "article ~ div"',
+			pos: 275,
+			start: { character: 275, column: 1, line: 12 },
+			end: { character: 288, column: 14, line: 12 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				11:   /* no match */
+				12:   article ~ div { color: green; }
+				13:   span ~ article { color: green; }
+				      ^
+				14:   b ~ article { color: green; }
+				15:   span ~ div { color: green; }`,
+			message: 'Unused CSS selector "span ~ article"',
+			pos: 308,
+			start: { character: 308, column: 1, line: 13 },
+			end: { character: 322, column: 15, line: 13 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				12:   article ~ div { color: green; }
+				13:   span ~ article { color: green; }
+				14:   b ~ article { color: green; }
+				      ^
+				15:   span ~ div { color: green; }
+				16: </style>`,
+			message: 'Unused CSS selector "b ~ article"',
+			pos: 342,
+			start: { character: 342, column: 1, line: 14 },
+			end: { character: 353, column: 12, line: 14 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				13:   span ~ article { color: green; }
+				14:   b ~ article { color: green; }
+				15:   span ~ div { color: green; }
+				      ^
+				16: </style>
+				17:`,
+			message: 'Unused CSS selector "span ~ div"',
+			pos: 373,
+			start: { character: 373, column: 1, line: 15 },
+			end: { character: 383, column: 11, line: 15 }
+		}
+	]
+};
diff --git a/test/css/samples/general-siblings-combinator/expected.css b/test/css/samples/general-siblings-combinator/expected.css
new file mode 100644
index 0000000000..647a53f778
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator/expected.css
@@ -0,0 +1 @@
+div.svelte-xyz~article.svelte-xyz.svelte-xyz{color:green}span.svelte-xyz~b.svelte-xyz.svelte-xyz{color:green}div.svelte-xyz span.svelte-xyz~b.svelte-xyz{color:green}.a.svelte-xyz~article.svelte-xyz.svelte-xyz{color:green}div.svelte-xyz~.b.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~.c.svelte-xyz.svelte-xyz{color:green}article.svelte-xyz~details.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz~details.svelte-xyz.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator/expected.html b/test/css/samples/general-siblings-combinator/expected.html
new file mode 100644
index 0000000000..01fbffcae4
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator/expected.html
@@ -0,0 +1,7 @@
+<div class="a svelte-xyz">
+  <span class="svelte-xyz"></span>
+  <b class="svelte-xyz"></b>
+</div>
+<article class="b svelte-xyz"></article>
+<p class="c svelte-xyz"></p>
+<details class="d svelte-xyz"></details>
\ No newline at end of file
diff --git a/test/css/samples/general-siblings-combinator/input.svelte b/test/css/samples/general-siblings-combinator/input.svelte
new file mode 100644
index 0000000000..533702a3a3
--- /dev/null
+++ b/test/css/samples/general-siblings-combinator/input.svelte
@@ -0,0 +1,24 @@
+<style>
+	div ~ article { color: green; }
+	span ~ b { color: green; }
+	div span ~ b { color: green; }
+	.a ~ article { color: green; }
+	div ~ .b { color: green; }
+	.a ~ .c { color: green; }
+	article ~ details { color: green; }
+	.a ~ details { color: green; }
+
+	/* no match */
+	article ~ div { color: green; }
+	span ~ article { color: green; }
+	b ~ article { color: green; }
+	span ~ div { color: green; }
+</style>
+
+<div class="a">
+	<span />
+	<b />
+</div>
+<article class="b"></article>
+<p class="c"></p>
+<details class="d"></details>
\ No newline at end of file
diff --git a/test/css/samples/global-compound-selector/_config.js b/test/css/samples/global-compound-selector/_config.js
new file mode 100644
index 0000000000..0a95b541c8
--- /dev/null
+++ b/test/css/samples/global-compound-selector/_config.js
@@ -0,0 +1,27 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			frame: `
+				16:   }
+				17:
+				18:   .bar:global(.foo) {
+				      ^
+				19:     color: blue;
+				20:   }
+				`,
+			message: 'Unused CSS selector ".bar:global(.foo)"',
+			pos: 210,
+			start: {
+				character: 210,
+				column: 1,
+				line: 18
+			},
+			end: {
+				character: 227,
+				column: 18,
+				line: 18
+			}
+		}
+	]
+};
diff --git a/test/css/samples/global-compound-selector/expected.css b/test/css/samples/global-compound-selector/expected.css
new file mode 100644
index 0000000000..ff9bed9c34
--- /dev/null
+++ b/test/css/samples/global-compound-selector/expected.css
@@ -0,0 +1 @@
+div.svelte-xyz.svelte-xyz.bar{color:red}.foo.svelte-xyz.svelte-xyz.bar{color:red}.foo.svelte-xyz.bar span.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/global-compound-selector/expected.html b/test/css/samples/global-compound-selector/expected.html
new file mode 100644
index 0000000000..ca16db5456
--- /dev/null
+++ b/test/css/samples/global-compound-selector/expected.html
@@ -0,0 +1,3 @@
+<div class="svelte-xyz">text</div>
+<div class="foo svelte-xyz">text<span class="svelte-xyz">text</span></div>
+<span>text</span>
\ No newline at end of file
diff --git a/test/css/samples/global-compound-selector/input.svelte b/test/css/samples/global-compound-selector/input.svelte
new file mode 100644
index 0000000000..347ae3ac55
--- /dev/null
+++ b/test/css/samples/global-compound-selector/input.svelte
@@ -0,0 +1,21 @@
+<div>text</div>
+<div class='foo'>text<span>text</span></div>
+<span>text</span>
+
+<style>
+	div:global(.bar) {
+		color: red;
+	}
+
+	.foo:global(.bar) {
+		color: red;
+	}
+
+	.foo:global(.bar) span {
+		color: red;
+	}
+
+	.bar:global(.foo) {
+		color: blue;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/global-keyframes-with-no-elements/expected.css b/test/css/samples/global-keyframes-with-no-elements/expected.css
new file mode 100644
index 0000000000..50a57ac471
--- /dev/null
+++ b/test/css/samples/global-keyframes-with-no-elements/expected.css
@@ -0,0 +1 @@
+@keyframes why{0%{color:red}100%{color:blue}}
\ No newline at end of file
diff --git a/test/css/samples/global-keyframes-with-no-elements/input.svelte b/test/css/samples/global-keyframes-with-no-elements/input.svelte
new file mode 100644
index 0000000000..09499df7ee
--- /dev/null
+++ b/test/css/samples/global-keyframes-with-no-elements/input.svelte
@@ -0,0 +1,6 @@
+<style>
+	@keyframes -global-why {
+		0% { color: red; }
+		100% { color: blue; }
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/global-keyframes/expected.css b/test/css/samples/global-keyframes/expected.css
new file mode 100644
index 0000000000..8e716d136d
--- /dev/null
+++ b/test/css/samples/global-keyframes/expected.css
@@ -0,0 +1 @@
+@keyframes why{0%{color:red}100%{color:blue}}.animated.svelte-xyz{animation:why 2s}.also-animated.svelte-xyz{animation:not-defined-here 2s}
\ No newline at end of file
diff --git a/test/css/samples/global-keyframes/input.svelte b/test/css/samples/global-keyframes/input.svelte
new file mode 100644
index 0000000000..3f2d568807
--- /dev/null
+++ b/test/css/samples/global-keyframes/input.svelte
@@ -0,0 +1,17 @@
+<div class='animated'>animated</div>
+<div class='also-animated'>also animated</div>
+
+<style>
+	@keyframes -global-why {
+		0% { color: red; }
+		100% { color: blue; }
+	}
+
+	.animated {
+		animation: why 2s;
+	}
+
+	.also-animated {
+		animation: not-defined-here 2s;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/global-with-child-combinator-2/_config.js b/test/css/samples/global-with-child-combinator-2/_config.js
new file mode 100644
index 0000000000..2286f4fe3c
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator-2/_config.js
@@ -0,0 +1,27 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			end: {
+				character: 111,
+				column: 21,
+				line: 8
+			},
+			frame: `
+			 6:     color: red;
+			 7:   }
+			 8:   a:global(.foo) > div {
+			      ^
+			 9:     color: red;
+			10:   }
+			`,
+			message: 'Unused CSS selector "a:global(.foo) > div"',
+			pos: 91,
+			start: {
+				character: 91,
+				column: 1,
+				line: 8
+			}
+		}
+	]
+};
diff --git a/test/css/samples/global-with-child-combinator-2/expected.css b/test/css/samples/global-with-child-combinator-2/expected.css
new file mode 100644
index 0000000000..3f406244a3
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator-2/expected.css
@@ -0,0 +1 @@
+div>div.svelte-xyz.svelte-xyz{color:red}div.svelte-xyz.foo>div.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/global-with-child-combinator-2/expected.html b/test/css/samples/global-with-child-combinator-2/expected.html
new file mode 100644
index 0000000000..32ff99e34f
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator-2/expected.html
@@ -0,0 +1,3 @@
+<div class="svelte-xyz">
+  <div class="svelte-xyz"></div>
+</div>
\ No newline at end of file
diff --git a/test/css/samples/global-with-child-combinator-2/input.svelte b/test/css/samples/global-with-child-combinator-2/input.svelte
new file mode 100644
index 0000000000..caf7c5869a
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator-2/input.svelte
@@ -0,0 +1,15 @@
+<style>
+	:global(div) > div {
+		color: red;
+	}
+	div:global(.foo) > div {
+		color: red;
+	}
+	a:global(.foo) > div {
+		color: red;
+	}
+</style>
+
+<div>
+	<div />
+</div>
\ No newline at end of file
diff --git a/test/css/samples/global-with-child-combinator-3/_config.js b/test/css/samples/global-with-child-combinator-3/_config.js
new file mode 100644
index 0000000000..c81f1a9f82
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator-3/_config.js
@@ -0,0 +1,3 @@
+export default {
+	warnings: []
+};
diff --git a/test/css/samples/global-with-child-combinator-3/expected.css b/test/css/samples/global-with-child-combinator-3/expected.css
new file mode 100644
index 0000000000..11c60c7147
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator-3/expected.css
@@ -0,0 +1 @@
+a>b>div.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/global-with-child-combinator-3/expected.html b/test/css/samples/global-with-child-combinator-3/expected.html
new file mode 100644
index 0000000000..32ff99e34f
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator-3/expected.html
@@ -0,0 +1,3 @@
+<div class="svelte-xyz">
+  <div class="svelte-xyz"></div>
+</div>
\ No newline at end of file
diff --git a/test/css/samples/global-with-child-combinator-3/input.svelte b/test/css/samples/global-with-child-combinator-3/input.svelte
new file mode 100644
index 0000000000..146f302633
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator-3/input.svelte
@@ -0,0 +1,9 @@
+<style>
+	:global(a) > :global(b) > div {
+		color: red;
+	}
+</style>
+
+<div>
+	<div />
+</div>
\ No newline at end of file
diff --git a/test/css/samples/global-with-child-combinator/_config.js b/test/css/samples/global-with-child-combinator/_config.js
new file mode 100644
index 0000000000..c81f1a9f82
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator/_config.js
@@ -0,0 +1,3 @@
+export default {
+	warnings: []
+};
diff --git a/test/css/samples/global-with-child-combinator/expected.css b/test/css/samples/global-with-child-combinator/expected.css
new file mode 100644
index 0000000000..9d8989b63b
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator/expected.css
@@ -0,0 +1 @@
+div>div.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/global-with-child-combinator/expected.html b/test/css/samples/global-with-child-combinator/expected.html
new file mode 100644
index 0000000000..32ff99e34f
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator/expected.html
@@ -0,0 +1,3 @@
+<div class="svelte-xyz">
+  <div class="svelte-xyz"></div>
+</div>
\ No newline at end of file
diff --git a/test/css/samples/global-with-child-combinator/input.svelte b/test/css/samples/global-with-child-combinator/input.svelte
new file mode 100644
index 0000000000..3b5ff160c3
--- /dev/null
+++ b/test/css/samples/global-with-child-combinator/input.svelte
@@ -0,0 +1,9 @@
+<style>
+	:global(div) > div {
+		color: red;
+	}
+</style>
+
+<div>
+	<div />
+</div>
\ No newline at end of file
diff --git a/test/css/samples/global-with-unused-descendant/_config.js b/test/css/samples/global-with-unused-descendant/_config.js
new file mode 100644
index 0000000000..69a69ad650
--- /dev/null
+++ b/test/css/samples/global-with-unused-descendant/_config.js
@@ -0,0 +1,24 @@
+export default {
+	warnings: [{
+		code: 'css-unused-selector',
+		end: {
+			character: 27,
+			column: 19,
+			line: 2
+		},
+		frame: `
+			1: <style>
+			2:   :global(.foo) .bar {
+			     ^
+			3:     color: red;
+			4:   }
+		`,
+		message: 'Unused CSS selector ":global(.foo) .bar"',
+		pos: 9,
+		start: {
+			character: 9,
+			column: 1,
+			line: 2
+		}
+	}]
+};
diff --git a/test/css/samples/global-with-unused-descendant/expected.css b/test/css/samples/global-with-unused-descendant/expected.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/test/css/samples/global-with-unused-descendant/input.svelte b/test/css/samples/global-with-unused-descendant/input.svelte
new file mode 100644
index 0000000000..ede6eedec3
--- /dev/null
+++ b/test/css/samples/global-with-unused-descendant/input.svelte
@@ -0,0 +1,5 @@
+<style>
+	:global(.foo) .bar {
+		color: red;
+	}
+</style>
diff --git a/test/css/samples/global/expected.css b/test/css/samples/global/expected.css
new file mode 100644
index 0000000000..64891e17fd
--- /dev/null
+++ b/test/css/samples/global/expected.css
@@ -0,0 +1 @@
+div{color:red}div.foo.svelte-xyz{color:blue}div.foo{color:pink}.foo{font-weight:bold}
\ No newline at end of file
diff --git a/test/css/samples/global/input.svelte b/test/css/samples/global/input.svelte
new file mode 100644
index 0000000000..31ac143940
--- /dev/null
+++ b/test/css/samples/global/input.svelte
@@ -0,0 +1,20 @@
+<div>red</div>
+<div class='foo'>bold/blue</div>
+
+<style>
+	:global(div) {
+		color: red;
+	}
+
+	:global(div).foo {
+		color: blue;
+	}
+
+	:global(div.foo) {
+		color: pink;
+	}
+
+	:global(.foo) {
+		font-weight: bold;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/host/_config.js b/test/css/samples/host/_config.js
new file mode 100644
index 0000000000..61539db5bc
--- /dev/null
+++ b/test/css/samples/host/_config.js
@@ -0,0 +1,27 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector ":host > span"',
+			pos: 147,
+			start: {
+				character: 147,
+				column: 1,
+				line: 18
+			},
+			end: {
+				character: 159,
+				column: 13,
+				line: 18
+			},
+			frame: `
+			16:   }
+			17:
+			18:   :host > span {
+			      ^
+			19:     color: red;
+			20:   }
+      `
+		}
+	]
+};
diff --git a/test/css/samples/host/expected.css b/test/css/samples/host/expected.css
new file mode 100644
index 0000000000..d848082f5e
--- /dev/null
+++ b/test/css/samples/host/expected.css
@@ -0,0 +1 @@
+:host h1.svelte-xyz{color:red}:host>h1.svelte-xyz{color:red}:host>.svelte-xyz{color:red}:host span.svelte-xyz{color:red}:host{color:red}
\ No newline at end of file
diff --git a/test/css/samples/host/input.svelte b/test/css/samples/host/input.svelte
new file mode 100644
index 0000000000..85db1617ef
--- /dev/null
+++ b/test/css/samples/host/input.svelte
@@ -0,0 +1,31 @@
+<style>
+  :host h1 {
+    color: red;
+  }
+
+  :host > h1 {
+    color: red;
+  }
+
+  :host > * {
+    color: red;
+	}
+
+	:host span {
+		color: red;
+	}
+		
+	:host > span {
+		color: red;
+	}
+
+  :host {
+    color: red;
+  }
+</style>
+
+<h1>Hello!</h1>
+
+<div>
+  <span>World!</span>
+</div>
diff --git a/test/css/samples/keyframes-autoprefixed/expected.css b/test/css/samples/keyframes-autoprefixed/expected.css
new file mode 100644
index 0000000000..d9866778a9
--- /dev/null
+++ b/test/css/samples/keyframes-autoprefixed/expected.css
@@ -0,0 +1 @@
+@keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}@-webkit-keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}@-moz-keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}@-o-keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}.animated.svelte-xyz{-webkit-animation:svelte-xyz-why 2s;animation:svelte-xyz-why 2s}.also-animated.svelte-xyz{-webkit-animation:not-defined-here 2s;animation:not-defined-here 2s}
\ No newline at end of file
diff --git a/test/css/samples/keyframes-autoprefixed/input.svelte b/test/css/samples/keyframes-autoprefixed/input.svelte
new file mode 100644
index 0000000000..1c0e1bc630
--- /dev/null
+++ b/test/css/samples/keyframes-autoprefixed/input.svelte
@@ -0,0 +1,34 @@
+<div class='animated'>animated</div>
+<div class='also-animated'>also animated</div>
+
+<style>
+	@keyframes why {
+		0% { color: red; }
+		100% { color: blue; }
+	}
+
+	@-webkit-keyframes why {
+		0% { color: red; }
+		100% { color: blue; }
+	}
+
+	@-moz-keyframes why {
+		0% { color: red; }
+		100% { color: blue; }
+	}
+
+	@-o-keyframes why {
+		0% { color: red; }
+		100% { color: blue; }
+	}
+
+	.animated {
+		-webkit-animation: why 2s;
+		animation: why 2s;
+	}
+
+	.also-animated {
+		-webkit-animation: not-defined-here 2s;
+		animation: not-defined-here 2s;
+	}
+</style>
diff --git a/test/css/samples/keyframes-from-to/expected.css b/test/css/samples/keyframes-from-to/expected.css
new file mode 100644
index 0000000000..c8ee60194c
--- /dev/null
+++ b/test/css/samples/keyframes-from-to/expected.css
@@ -0,0 +1 @@
+@keyframes svelte-xyz-why{from{color:red}to{color:blue}}.animated.svelte-xyz{animation:svelte-xyz-why 2s}
\ No newline at end of file
diff --git a/test/css/samples/keyframes-from-to/input.svelte b/test/css/samples/keyframes-from-to/input.svelte
new file mode 100644
index 0000000000..e2a31bcbdd
--- /dev/null
+++ b/test/css/samples/keyframes-from-to/input.svelte
@@ -0,0 +1,12 @@
+<div class='animated'>animated</div>
+
+<style>
+	@keyframes why {
+		from { color: red; }
+		to { color: blue; }
+	}
+
+	.animated {
+		animation: why 2s;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/keyframes/expected.css b/test/css/samples/keyframes/expected.css
new file mode 100644
index 0000000000..a6a1176dae
--- /dev/null
+++ b/test/css/samples/keyframes/expected.css
@@ -0,0 +1 @@
+@keyframes svelte-xyz-why{0%{color:red}100%{color:blue}}.animated.svelte-xyz{animation:svelte-xyz-why 2s}.also-animated.svelte-xyz{animation:not-defined-here 2s}
\ No newline at end of file
diff --git a/test/css/samples/keyframes/input.svelte b/test/css/samples/keyframes/input.svelte
new file mode 100644
index 0000000000..ba220a5e22
--- /dev/null
+++ b/test/css/samples/keyframes/input.svelte
@@ -0,0 +1,17 @@
+<div class='animated'>animated</div>
+<div class='also-animated'>also animated</div>
+
+<style>
+	@keyframes why {
+		0% { color: red; }
+		100% { color: blue; }
+	}
+
+	.animated {
+		animation: why 2s;
+	}
+
+	.also-animated {
+		animation: not-defined-here 2s;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/local-inside-global/expected.css b/test/css/samples/local-inside-global/expected.css
new file mode 100644
index 0000000000..40af67afba
--- /dev/null
+++ b/test/css/samples/local-inside-global/expected.css
@@ -0,0 +1 @@
+div .foo.svelte-xyz{color:red}div>.foo.svelte-xyz{font-weight:bold}
\ No newline at end of file
diff --git a/test/css/samples/local-inside-global/input.svelte b/test/css/samples/local-inside-global/input.svelte
new file mode 100644
index 0000000000..afff8b21e4
--- /dev/null
+++ b/test/css/samples/local-inside-global/input.svelte
@@ -0,0 +1,11 @@
+<p class='foo'>red/bold</p>
+
+<style>
+	:global(div) .foo {
+		color: red;
+	}
+
+	:global(div) > .foo {
+		font-weight: bold;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/media-query-word/expected.css b/test/css/samples/media-query-word/expected.css
new file mode 100644
index 0000000000..d2a288ed72
--- /dev/null
+++ b/test/css/samples/media-query-word/expected.css
@@ -0,0 +1 @@
+@media only screen and (min-width: 400px){div.svelte-xyz{color:red}}
\ No newline at end of file
diff --git a/test/css/samples/media-query-word/input.svelte b/test/css/samples/media-query-word/input.svelte
new file mode 100644
index 0000000000..342b003b62
--- /dev/null
+++ b/test/css/samples/media-query-word/input.svelte
@@ -0,0 +1,9 @@
+<div>hello</div>
+
+<style>
+	@media only screen and (min-width: 400px) {
+		div {
+			color: red;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/media-query/expected.css b/test/css/samples/media-query/expected.css
new file mode 100644
index 0000000000..8ea74bf3b1
--- /dev/null
+++ b/test/css/samples/media-query/expected.css
@@ -0,0 +1 @@
+@media(min-width: 400px){.large-screen.svelte-xyz{display:block}}
\ No newline at end of file
diff --git a/test/css/samples/media-query/input.svelte b/test/css/samples/media-query/input.svelte
new file mode 100644
index 0000000000..d5465ab4f9
--- /dev/null
+++ b/test/css/samples/media-query/input.svelte
@@ -0,0 +1,9 @@
+<div class='large-screen'>animated</div>
+
+<style>
+	@media (min-width: 400px) {
+		.large-screen {
+			display: block;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/nested/_config.js b/test/css/samples/nested/_config.js
new file mode 100644
index 0000000000..5678e73bed
--- /dev/null
+++ b/test/css/samples/nested/_config.js
@@ -0,0 +1,5 @@
+export default {
+	props: {
+		dynamic: 'x'
+	}
+};
diff --git a/test/css/samples/nested/expected.css b/test/css/samples/nested/expected.css
new file mode 100644
index 0000000000..87ca7335f6
--- /dev/null
+++ b/test/css/samples/nested/expected.css
@@ -0,0 +1 @@
+.foo.svelte-xyz{color:red}.bar.svelte-xyz{font-style:italic}
\ No newline at end of file
diff --git a/test/css/samples/nested/expected.html b/test/css/samples/nested/expected.html
new file mode 100644
index 0000000000..7d4198ad35
--- /dev/null
+++ b/test/css/samples/nested/expected.html
@@ -0,0 +1,2 @@
+<span class="foo svelte-xyz"><span class="bar svelte-xyz">text</span></span>
+<span class="foo svelte-xyz"><span class="bar svelte-xyz">x</span></span>
\ No newline at end of file
diff --git a/test/css/samples/nested/input.svelte b/test/css/samples/nested/input.svelte
new file mode 100644
index 0000000000..2f97681c74
--- /dev/null
+++ b/test/css/samples/nested/input.svelte
@@ -0,0 +1,20 @@
+<script>
+	export let dynamic;
+</script>
+
+<span class='foo'>
+	<span class='bar'>text</span>
+</span>
+
+<span class='foo'>
+	<span class='bar'>{dynamic}</span>
+</span>
+
+<style>
+	.foo {
+		color: red;
+	}
+	.bar {
+		font-style: italic;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/not-selector/expected.css b/test/css/samples/not-selector/expected.css
new file mode 100644
index 0000000000..83a819a9e0
--- /dev/null
+++ b/test/css/samples/not-selector/expected.css
@@ -0,0 +1 @@
+.svelte-xyz:not(.foo){color:red}
\ No newline at end of file
diff --git a/test/css/samples/not-selector/input.svelte b/test/css/samples/not-selector/input.svelte
new file mode 100644
index 0000000000..31a880f2bb
--- /dev/null
+++ b/test/css/samples/not-selector/input.svelte
@@ -0,0 +1,8 @@
+<p class="foo">foo</p>
+<p class="bar">bar</p>
+
+<style>
+	:not(.foo) {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css
new file mode 100644
index 0000000000..4d1d8d14ff
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css
@@ -0,0 +1 @@
+[data-foo*='bar'].svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.html b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.html
new file mode 100644
index 0000000000..5f113a0b1d
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.html
@@ -0,0 +1,2 @@
+<div><p class="svelte-xyz" data-foo="foobarbaz">this is styled</p>
+	<p data-foo="fooBARbaz">this is unstyled</p></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-contains/input.svelte b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/input.svelte
new file mode 100644
index 0000000000..ea0d54fe67
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/input.svelte
@@ -0,0 +1,10 @@
+<div>
+	<p data-foo='foobarbaz'>this is styled</p>
+	<p data-foo='fooBARbaz'>this is unstyled</p>
+</div>
+
+<style>
+	[data-foo*='bar'] {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css
new file mode 100644
index 0000000000..80b6feebca
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.css
@@ -0,0 +1 @@
+[data-foo='bar' i].svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.html b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.html
new file mode 100644
index 0000000000..c09c637c8b
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/expected.html
@@ -0,0 +1,2 @@
+<div><p class="svelte-xyz" data-foo="BAR">this is styled</p>
+	<p data-foo="BAZ">this is unstyled</p></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/input.svelte b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/input.svelte
new file mode 100644
index 0000000000..e80da7b707
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-case-insensitive/input.svelte
@@ -0,0 +1,10 @@
+<div>
+	<p data-foo='BAR'>this is styled</p>
+	<p data-foo='BAZ'>this is unstyled</p>
+</div>
+
+<style>
+	[data-foo='bar' i] {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/_config.js b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/_config.js
new file mode 100644
index 0000000000..f0dad3b273
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/_config.js
@@ -0,0 +1,5 @@
+export default {
+	props: {
+		dynamic: 'whatever'
+	}
+};
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css
new file mode 100644
index 0000000000..fd8a9a15ee
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.css
@@ -0,0 +1 @@
+[data-foo='bar'].svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.html b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.html
new file mode 100644
index 0000000000..111d193a89
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/expected.html
@@ -0,0 +1,2 @@
+<div><p class="svelte-xyz" data-foo="whatever">this is styled</p>
+	<p data-foo="baz">this is unstyled</p></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/input.svelte b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/input.svelte
new file mode 100644
index 0000000000..e66777cd08
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals-dynamic/input.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let dynamic;
+</script>
+
+<div>
+	<p data-foo='{dynamic}'>this is styled</p>
+	<p data-foo='baz'>this is unstyled</p>
+</div>
+
+<style>
+	[data-foo='bar'] {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.css
new file mode 100644
index 0000000000..fd8a9a15ee
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.css
@@ -0,0 +1 @@
+[data-foo='bar'].svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.html b/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.html
new file mode 100644
index 0000000000..745d610a6f
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals/expected.html
@@ -0,0 +1,2 @@
+<div><p class="svelte-xyz" data-foo="bar">this is styled</p>
+	<p data-foo="baz">this is unstyled</p></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-equals/input.svelte b/test/css/samples/omit-scoping-attribute-attribute-selector-equals/input.svelte
new file mode 100644
index 0000000000..28e31604f8
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-equals/input.svelte
@@ -0,0 +1,10 @@
+<div>
+	<p data-foo='bar'>this is styled</p>
+	<p data-foo='baz'>this is unstyled</p>
+</div>
+
+<style>
+	[data-foo='bar'] {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css
new file mode 100644
index 0000000000..95f6faeb02
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.css
@@ -0,0 +1 @@
+[data-foo|='bar'].svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.html b/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.html
new file mode 100644
index 0000000000..3045becd3b
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/expected.html
@@ -0,0 +1,3 @@
+<div><p class="svelte-xyz" data-foo="bar">this is styled</p>
+	<p class="svelte-xyz" data-foo="bar-baz">this is styled</p>
+	<p data-foo="baz-bar">this is unstyled</p></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/input.svelte b/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/input.svelte
new file mode 100644
index 0000000000..c7a8b598ec
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-pipe-equals/input.svelte
@@ -0,0 +1,11 @@
+<div>
+	<p data-foo='bar'>this is styled</p>
+	<p data-foo='bar-baz'>this is styled</p>
+	<p data-foo='baz-bar'>this is unstyled</p>
+</div>
+
+<style>
+	[data-foo|='bar'] {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css
new file mode 100644
index 0000000000..3a30f1f017
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.css
@@ -0,0 +1 @@
+[data-foo^='bar'].svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.html b/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.html
new file mode 100644
index 0000000000..7a54f45744
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/expected.html
@@ -0,0 +1,2 @@
+<div><p class="svelte-xyz" data-foo="barbaz">this is styled</p>
+	<p data-foo="bazbar">this is unstyled</p></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/input.svelte b/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/input.svelte
new file mode 100644
index 0000000000..91daf582fd
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-prefix/input.svelte
@@ -0,0 +1,10 @@
+<div>
+	<p data-foo='barbaz'>this is styled</p>
+	<p data-foo='bazbar'>this is unstyled</p>
+</div>
+
+<style>
+	[data-foo^='bar'] {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css
new file mode 100644
index 0000000000..de8d18cc3b
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.css
@@ -0,0 +1 @@
+[data-foo$='bar'].svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.html b/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.html
new file mode 100644
index 0000000000..ba757d0bf2
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/expected.html
@@ -0,0 +1,2 @@
+<div><p data-foo="barbaz">this is unstyled</p>
+	<p class="svelte-xyz" data-foo="bazbar">this is styled</p></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/input.svelte b/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/input.svelte
new file mode 100644
index 0000000000..641d776c6c
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-suffix/input.svelte
@@ -0,0 +1,10 @@
+<div>
+	<p data-foo='barbaz'>this is unstyled</p>
+	<p data-foo='bazbar'>this is styled</p>
+</div>
+
+<style>
+	[data-foo$='bar'] {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.css
new file mode 100644
index 0000000000..fabcbade4d
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.css
@@ -0,0 +1 @@
+[data-foo~='bar'].svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.html b/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.html
new file mode 100644
index 0000000000..49555ef404
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/expected.html
@@ -0,0 +1,2 @@
+<div><p class="svelte-xyz" data-foo="qux bar">this is styled</p>
+	<p data-foo="qux baz">this is unstyled</p></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/input.svelte b/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/input.svelte
new file mode 100644
index 0000000000..026d7d6ed2
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-word-equals/input.svelte
@@ -0,0 +1,10 @@
+<div>
+	<p data-foo='qux bar'>this is styled</p>
+	<p data-foo='qux baz'>this is unstyled</p>
+</div>
+
+<style>
+	[data-foo~='bar'] {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector/expected.css
new file mode 100644
index 0000000000..ddb620207d
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector/expected.css
@@ -0,0 +1 @@
+[autoplay].svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector/expected.html b/test/css/samples/omit-scoping-attribute-attribute-selector/expected.html
new file mode 100644
index 0000000000..f585d6bcdd
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector/expected.html
@@ -0,0 +1,2 @@
+<div><video class="svelte-xyz" autoplay muted></video>
+	<video muted></video></div>
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector/input.svelte b/test/css/samples/omit-scoping-attribute-attribute-selector/input.svelte
new file mode 100644
index 0000000000..af06836d29
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector/input.svelte
@@ -0,0 +1,10 @@
+<div>
+	<video autoplay muted></video>
+	<video muted></video>
+</div>
+
+<style>
+	[autoplay] {
+		color: red;
+	}
+</style>
diff --git a/test/css/samples/omit-scoping-attribute-class-dynamic/expected.css b/test/css/samples/omit-scoping-attribute-class-dynamic/expected.css
new file mode 100644
index 0000000000..431f704106
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-class-dynamic/expected.css
@@ -0,0 +1 @@
+.foo.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-class-dynamic/expected.html b/test/css/samples/omit-scoping-attribute-class-dynamic/expected.html
new file mode 100644
index 0000000000..451140e6e1
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-class-dynamic/expected.html
@@ -0,0 +1,2 @@
+<p class="whatever svelte-xyz">this is styled</p>
+<p class="bar">this is unstyled</p>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-class-dynamic/input.svelte b/test/css/samples/omit-scoping-attribute-class-dynamic/input.svelte
new file mode 100644
index 0000000000..63743b1dae
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-class-dynamic/input.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let unknown = 'whatever';
+</script>
+
+<p class='{unknown}'>this is styled</p>
+<p class='bar'>this is unstyled</p>
+
+<style>
+	.foo {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-class-static/expected.css b/test/css/samples/omit-scoping-attribute-class-static/expected.css
new file mode 100644
index 0000000000..431f704106
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-class-static/expected.css
@@ -0,0 +1 @@
+.foo.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-class-static/expected.html b/test/css/samples/omit-scoping-attribute-class-static/expected.html
new file mode 100644
index 0000000000..7366cb3cfe
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-class-static/expected.html
@@ -0,0 +1,2 @@
+<p class="foo svelte-xyz">this is styled</p>
+<p class="bar">this is unstyled</p>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-class-static/input.svelte b/test/css/samples/omit-scoping-attribute-class-static/input.svelte
new file mode 100644
index 0000000000..6b877fa13e
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-class-static/input.svelte
@@ -0,0 +1,8 @@
+<p class='foo'>this is styled</p>
+<p class='bar'>this is unstyled</p>
+
+<style>
+	.foo {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/_config.js b/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/_config.js
new file mode 100644
index 0000000000..50317168a6
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/_config.js
@@ -0,0 +1,5 @@
+export default {
+	props: {
+		raw: '<p>raw</p>'
+	}
+};
diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.css b/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.css
new file mode 100644
index 0000000000..f3653403a5
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.css
@@ -0,0 +1 @@
+.foo.svelte-xyz .bar{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.html b/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.html
new file mode 100644
index 0000000000..cfad41216e
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/expected.html
@@ -0,0 +1 @@
+<div class="foo svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/input.svelte b/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/input.svelte
new file mode 100644
index 0000000000..c2f6057255
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant-global-inner-class/input.svelte
@@ -0,0 +1,9 @@
+<div class='foo'>
+	<!-- html injected somehow -->
+</div>
+
+<style>
+	.foo :global(.bar) {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/_config.js b/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/_config.js
new file mode 100644
index 0000000000..50317168a6
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/_config.js
@@ -0,0 +1,5 @@
+export default {
+	props: {
+		raw: '<p>raw</p>'
+	}
+};
diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.css b/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.css
new file mode 100644
index 0000000000..74e641549f
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.css
@@ -0,0 +1 @@
+div.svelte-xyz>p>em{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.html b/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.html
new file mode 100644
index 0000000000..be0c650916
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/expected.html
@@ -0,0 +1 @@
+<div class="svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/input.svelte b/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/input.svelte
new file mode 100644
index 0000000000..85baf01a2d
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant-global-inner-multiple/input.svelte
@@ -0,0 +1,9 @@
+<div>
+	<!-- html injected somehow -->
+</div>
+
+<style>
+	div > :global(p) > :global(em) {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-inner/_config.js b/test/css/samples/omit-scoping-attribute-descendant-global-inner/_config.js
new file mode 100644
index 0000000000..50317168a6
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant-global-inner/_config.js
@@ -0,0 +1,5 @@
+export default {
+	props: {
+		raw: '<p>raw</p>'
+	}
+};
diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.css b/test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.css
new file mode 100644
index 0000000000..338c90ab19
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.css
@@ -0,0 +1 @@
+div.svelte-xyz>p{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.html b/test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.html
new file mode 100644
index 0000000000..be0c650916
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant-global-inner/expected.html
@@ -0,0 +1 @@
+<div class="svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-inner/input.svelte b/test/css/samples/omit-scoping-attribute-descendant-global-inner/input.svelte
new file mode 100644
index 0000000000..bad6794f25
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant-global-inner/input.svelte
@@ -0,0 +1,9 @@
+<div>
+	<!-- html injected somehow -->
+</div>
+
+<style>
+	div > :global(p) {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/_config.js b/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/_config.js
new file mode 100644
index 0000000000..50317168a6
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/_config.js
@@ -0,0 +1,5 @@
+export default {
+	props: {
+		raw: '<p>raw</p>'
+	}
+};
diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.css b/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.css
new file mode 100644
index 0000000000..5d1af4c251
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.css
@@ -0,0 +1 @@
+div>section>p.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.html b/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.html
new file mode 100644
index 0000000000..033f341a4b
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/expected.html
@@ -0,0 +1 @@
+<p class="svelte-xyz">this may or may not be styled</p>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/input.svelte b/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/input.svelte
new file mode 100644
index 0000000000..57e227284c
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant-global-outer-multiple/input.svelte
@@ -0,0 +1,7 @@
+<p>this may or may not be styled</p>
+
+<style>
+	:global(div) > :global(section) > p {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-outer/_config.js b/test/css/samples/omit-scoping-attribute-descendant-global-outer/_config.js
new file mode 100644
index 0000000000..50317168a6
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant-global-outer/_config.js
@@ -0,0 +1,5 @@
+export default {
+	props: {
+		raw: '<p>raw</p>'
+	}
+};
diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.css b/test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.css
new file mode 100644
index 0000000000..3666ce8f7f
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.css
@@ -0,0 +1 @@
+div>p.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.html b/test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.html
new file mode 100644
index 0000000000..033f341a4b
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant-global-outer/expected.html
@@ -0,0 +1 @@
+<p class="svelte-xyz">this may or may not be styled</p>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-descendant-global-outer/input.svelte b/test/css/samples/omit-scoping-attribute-descendant-global-outer/input.svelte
new file mode 100644
index 0000000000..e5fb3ba144
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant-global-outer/input.svelte
@@ -0,0 +1,7 @@
+<p>this may or may not be styled</p>
+
+<style>
+	:global(div) > p {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-descendant/_config.js b/test/css/samples/omit-scoping-attribute-descendant/_config.js
new file mode 100644
index 0000000000..4b70a48802
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant/_config.js
@@ -0,0 +1,24 @@
+export default {
+	warnings: [{
+		code: 'css-unused-selector',
+		message: 'Unused CSS selector "div > p"',
+		start: {
+			line: 8,
+			column: 1,
+			character: 74
+		},
+		end: {
+			line: 8,
+			column: 8,
+			character: 81
+		},
+		pos: 74,
+		frame: `
+			 6:
+			 7: <style>
+			 8:   div > p {
+			      ^
+			 9:     color: red;
+			10:   }`
+	}]
+};
diff --git a/test/css/samples/omit-scoping-attribute-descendant/expected.css b/test/css/samples/omit-scoping-attribute-descendant/expected.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/test/css/samples/omit-scoping-attribute-descendant/expected.html b/test/css/samples/omit-scoping-attribute-descendant/expected.html
new file mode 100644
index 0000000000..c3cd49d71e
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant/expected.html
@@ -0,0 +1 @@
+<div><section><p>this is not styled</p></section></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-descendant/input.svelte b/test/css/samples/omit-scoping-attribute-descendant/input.svelte
new file mode 100644
index 0000000000..8af2cc4dd1
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-descendant/input.svelte
@@ -0,0 +1,11 @@
+<div>
+	<section>
+		<p>this is not styled</p>
+	</section>
+</div>
+
+<style>
+	div > p {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-global-children/expected.css b/test/css/samples/omit-scoping-attribute-global-children/expected.css
new file mode 100644
index 0000000000..2a7a510449
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-global-children/expected.css
@@ -0,0 +1 @@
+.root.svelte-xyz p{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-global-children/expected.html b/test/css/samples/omit-scoping-attribute-global-children/expected.html
new file mode 100644
index 0000000000..f7ee02fd83
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-global-children/expected.html
@@ -0,0 +1,4 @@
+<div class="root svelte-xyz">
+	<section class="whatever svelte-xyz">
+	</section>
+</div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-global-children/input.svelte b/test/css/samples/omit-scoping-attribute-global-children/input.svelte
new file mode 100644
index 0000000000..5e52d48738
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-global-children/input.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let unknown1 = 'root';
+	export let unknown2 = 'whatever';
+</script>
+
+<style>
+	.root :global(p) {
+		color: red;
+	}
+</style>
+
+<div class={unknown1}>
+	<section class={unknown2}>
+		<!-- injected somehow -->
+	</section>
+</div>
diff --git a/test/css/samples/omit-scoping-attribute-global-descendants/expected.css b/test/css/samples/omit-scoping-attribute-global-descendants/expected.css
new file mode 100644
index 0000000000..c1fd7da897
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-global-descendants/expected.css
@@ -0,0 +1 @@
+html body .root.svelte-xyz p.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-global-descendants/expected.html b/test/css/samples/omit-scoping-attribute-global-descendants/expected.html
new file mode 100644
index 0000000000..3750091bc7
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-global-descendants/expected.html
@@ -0,0 +1,5 @@
+<div class="root svelte-xyz">
+	<section class="whatever svelte-xyz">
+		<p class="svelte-xyz">hello</p>
+	</section>
+</div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-global-descendants/input.svelte b/test/css/samples/omit-scoping-attribute-global-descendants/input.svelte
new file mode 100644
index 0000000000..7c9782ebad
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-global-descendants/input.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let unknown1 = 'root';
+	export let unknown2 = 'whatever';
+</script>
+
+<style>
+	:global(html) :global(body) .root p {
+		color: red;
+	}
+</style>
+
+<div class={unknown1}>
+	<section class={unknown2}>
+		<p>hello</p>
+	</section>
+</div>
diff --git a/test/css/samples/omit-scoping-attribute-global/_config.js b/test/css/samples/omit-scoping-attribute-global/_config.js
new file mode 100644
index 0000000000..50317168a6
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-global/_config.js
@@ -0,0 +1,5 @@
+export default {
+	props: {
+		raw: '<p>raw</p>'
+	}
+};
diff --git a/test/css/samples/omit-scoping-attribute-global/expected.css b/test/css/samples/omit-scoping-attribute-global/expected.css
new file mode 100644
index 0000000000..6a9013fccd
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-global/expected.css
@@ -0,0 +1 @@
+div{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-global/expected.html b/test/css/samples/omit-scoping-attribute-global/expected.html
new file mode 100644
index 0000000000..281c6866c3
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-global/expected.html
@@ -0,0 +1 @@
+<div></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-global/input.svelte b/test/css/samples/omit-scoping-attribute-global/input.svelte
new file mode 100644
index 0000000000..a85bfa0bb3
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-global/input.svelte
@@ -0,0 +1,7 @@
+<div></div>
+
+<style>
+	:global(div) {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-id/expected.css b/test/css/samples/omit-scoping-attribute-id/expected.css
new file mode 100644
index 0000000000..0e9e9f8b29
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-id/expected.css
@@ -0,0 +1 @@
+#foo.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-id/expected.html b/test/css/samples/omit-scoping-attribute-id/expected.html
new file mode 100644
index 0000000000..ce31b29b6e
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-id/expected.html
@@ -0,0 +1,2 @@
+<div class="svelte-xyz" id="foo"></div>
+<div id="bar"></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-id/input.svelte b/test/css/samples/omit-scoping-attribute-id/input.svelte
new file mode 100644
index 0000000000..9db4995a02
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-id/input.svelte
@@ -0,0 +1,8 @@
+<div id='foo'></div>
+<div id='bar'></div>
+
+<style>
+	#foo {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-multiple-descendants/expected.css b/test/css/samples/omit-scoping-attribute-multiple-descendants/expected.css
new file mode 100644
index 0000000000..5452f68073
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-multiple-descendants/expected.css
@@ -0,0 +1 @@
+.root.svelte-xyz p.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-multiple-descendants/expected.html b/test/css/samples/omit-scoping-attribute-multiple-descendants/expected.html
new file mode 100644
index 0000000000..3750091bc7
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-multiple-descendants/expected.html
@@ -0,0 +1,5 @@
+<div class="root svelte-xyz">
+	<section class="whatever svelte-xyz">
+		<p class="svelte-xyz">hello</p>
+	</section>
+</div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-multiple-descendants/input.svelte b/test/css/samples/omit-scoping-attribute-multiple-descendants/input.svelte
new file mode 100644
index 0000000000..dc77a6c794
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-multiple-descendants/input.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let unknown1 = 'root';
+	export let unknown2 = 'whatever';
+</script>
+
+<style>
+	.root p {
+		color: red;
+	}
+</style>
+
+<div class={unknown1}>
+	<section class={unknown2}>
+		<p>hello</p>
+	</section>
+</div>
diff --git a/test/css/samples/omit-scoping-attribute-whitespace-multiple/expected.css b/test/css/samples/omit-scoping-attribute-whitespace-multiple/expected.css
new file mode 100644
index 0000000000..737870905c
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-whitespace-multiple/expected.css
@@ -0,0 +1 @@
+div.svelte-xyz section p.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-whitespace-multiple/expected.html b/test/css/samples/omit-scoping-attribute-whitespace-multiple/expected.html
new file mode 100644
index 0000000000..53c470b0c1
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-whitespace-multiple/expected.html
@@ -0,0 +1 @@
+<div class="svelte-xyz"><section><p class="svelte-xyz">this is styled</p></section></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-whitespace-multiple/input.svelte b/test/css/samples/omit-scoping-attribute-whitespace-multiple/input.svelte
new file mode 100644
index 0000000000..a3e4b4136a
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-whitespace-multiple/input.svelte
@@ -0,0 +1,11 @@
+<div>
+	<section>
+		<p>this is styled</p>
+	</section>
+</div>
+
+<style>
+	div section p {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-whitespace/expected.css b/test/css/samples/omit-scoping-attribute-whitespace/expected.css
new file mode 100644
index 0000000000..f8ef9ca56c
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-whitespace/expected.css
@@ -0,0 +1 @@
+div.svelte-xyz p.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-whitespace/expected.html b/test/css/samples/omit-scoping-attribute-whitespace/expected.html
new file mode 100644
index 0000000000..53c470b0c1
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-whitespace/expected.html
@@ -0,0 +1 @@
+<div class="svelte-xyz"><section><p class="svelte-xyz">this is styled</p></section></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-whitespace/input.svelte b/test/css/samples/omit-scoping-attribute-whitespace/input.svelte
new file mode 100644
index 0000000000..6d00e91267
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-whitespace/input.svelte
@@ -0,0 +1,11 @@
+<div>
+	<section>
+		<p>this is styled</p>
+	</section>
+</div>
+
+<style>
+	div p {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute/expected.css b/test/css/samples/omit-scoping-attribute/expected.css
new file mode 100644
index 0000000000..5d8d69ac33
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute/expected.css
@@ -0,0 +1 @@
+p.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute/expected.html b/test/css/samples/omit-scoping-attribute/expected.html
new file mode 100644
index 0000000000..1bc4a66f62
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute/expected.html
@@ -0,0 +1 @@
+<div><p class="svelte-xyz">this is styled</p></div>
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute/input.svelte b/test/css/samples/omit-scoping-attribute/input.svelte
new file mode 100644
index 0000000000..69251dc236
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute/input.svelte
@@ -0,0 +1,9 @@
+<div>
+	<p>this is styled</p>
+</div>
+
+<style>
+	p {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/preserve-specificity/expected.css b/test/css/samples/preserve-specificity/expected.css
new file mode 100644
index 0000000000..1d4f54820f
--- /dev/null
+++ b/test/css/samples/preserve-specificity/expected.css
@@ -0,0 +1 @@
+a.svelte-xyz b c span.svelte-xyz{color:red;font-size:2em;font-family:'Comic Sans MS'}.foo.svelte-xyz.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/preserve-specificity/expected.html b/test/css/samples/preserve-specificity/expected.html
new file mode 100644
index 0000000000..171d90d362
--- /dev/null
+++ b/test/css/samples/preserve-specificity/expected.html
@@ -0,0 +1,12 @@
+<a class="svelte-xyz">
+  <b>
+    <c>
+      <span class="svelte-xyz">
+        Big red Comic Sans
+      </span> 
+      <span class="foo svelte-xyz">
+        Big red Comic Sans
+      </span>
+    </c>
+  </b>
+</a>
\ No newline at end of file
diff --git a/test/css/samples/preserve-specificity/input.svelte b/test/css/samples/preserve-specificity/input.svelte
new file mode 100644
index 0000000000..1c0a594145
--- /dev/null
+++ b/test/css/samples/preserve-specificity/input.svelte
@@ -0,0 +1,24 @@
+<!-- svelte-ignore a11y-missing-attribute -->
+<a>
+  <b>
+    <c>
+      <span>
+        Big red Comic Sans
+      </span>
+      <span class='foo'>
+        Big red Comic Sans
+      </span>
+    </c>
+  </b>
+</a>
+
+<style>
+  a b c span {
+    color: red;
+    font-size: 2em;
+    font-family: 'Comic Sans MS';
+  }
+  .foo {
+    color: green;
+  }
+</style>
\ No newline at end of file
diff --git a/test/css/samples/pseudo-element/expected.css b/test/css/samples/pseudo-element/expected.css
new file mode 100644
index 0000000000..bb380d4041
--- /dev/null
+++ b/test/css/samples/pseudo-element/expected.css
@@ -0,0 +1 @@
+span.svelte-xyz::after{content:'i am a pseudo-element'}span.svelte-xyz:first-child{color:red}span.svelte-xyz:last-child::after{color:blue}
\ No newline at end of file
diff --git a/test/css/samples/pseudo-element/input.svelte b/test/css/samples/pseudo-element/input.svelte
new file mode 100644
index 0000000000..16be3071f9
--- /dev/null
+++ b/test/css/samples/pseudo-element/input.svelte
@@ -0,0 +1,15 @@
+<span></span>
+
+<style>
+	span::after {
+		content: 'i am a pseudo-element';
+	}
+
+	span:first-child {
+		color: red;
+	}
+
+	span:last-child::after {
+		color: blue;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/root/_config.js b/test/css/samples/root/_config.js
new file mode 100644
index 0000000000..ff8b4c5632
--- /dev/null
+++ b/test/css/samples/root/_config.js
@@ -0,0 +1 @@
+export default {};
diff --git a/test/css/samples/root/expected.css b/test/css/samples/root/expected.css
new file mode 100644
index 0000000000..ce35d8835f
--- /dev/null
+++ b/test/css/samples/root/expected.css
@@ -0,0 +1 @@
+:root{color:red}.foo:root{color:blue}:root.foo{color:green}
\ No newline at end of file
diff --git a/test/css/samples/root/expected.html b/test/css/samples/root/expected.html
new file mode 100644
index 0000000000..1d90ab5df7
--- /dev/null
+++ b/test/css/samples/root/expected.html
@@ -0,0 +1 @@
+<h1>Hello!</h1>
\ No newline at end of file
diff --git a/test/css/samples/root/input.svelte b/test/css/samples/root/input.svelte
new file mode 100644
index 0000000000..979c9d4f0a
--- /dev/null
+++ b/test/css/samples/root/input.svelte
@@ -0,0 +1,13 @@
+<style>
+  :root {
+    color: red;
+  }
+  .foo:root {
+    color: blue;
+  }
+  :root.foo {
+    color: green;
+  }
+</style>
+
+<h1>Hello!</h1>
diff --git a/test/css/samples/siblings-combinator-await-not-exhaustive/_config.js b/test/css/samples/siblings-combinator-await-not-exhaustive/_config.js
new file mode 100644
index 0000000000..c81f1a9f82
--- /dev/null
+++ b/test/css/samples/siblings-combinator-await-not-exhaustive/_config.js
@@ -0,0 +1,3 @@
+export default {
+	warnings: []
+};
diff --git a/test/css/samples/siblings-combinator-await-not-exhaustive/expected.css b/test/css/samples/siblings-combinator-await-not-exhaustive/expected.css
new file mode 100644
index 0000000000..60bb8e92dc
--- /dev/null
+++ b/test/css/samples/siblings-combinator-await-not-exhaustive/expected.css
@@ -0,0 +1 @@
+.a.svelte-xyz+.b.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.c.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.e.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.f.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.g.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.h.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.b.svelte-xyz+.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz+.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.b.svelte-xyz+.e.svelte-xyz+.f.svelte-xyz+.h.svelte-xyz{color:green}.b.svelte-xyz+.d.svelte-xyz+.h.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz+.g.svelte-xyz.svelte-xyz.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-await-not-exhaustive/expected.html b/test/css/samples/siblings-combinator-await-not-exhaustive/expected.html
new file mode 100644
index 0000000000..de97b02a5e
--- /dev/null
+++ b/test/css/samples/siblings-combinator-await-not-exhaustive/expected.html
@@ -0,0 +1,4 @@
+<div class="a svelte-xyz"></div>
+<div class="d svelte-xyz"></div>
+<div class="f svelte-xyz"></div>
+<div class="h svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-await-not-exhaustive/input.svelte b/test/css/samples/siblings-combinator-await-not-exhaustive/input.svelte
new file mode 100644
index 0000000000..d3345c6edc
--- /dev/null
+++ b/test/css/samples/siblings-combinator-await-not-exhaustive/input.svelte
@@ -0,0 +1,41 @@
+<script>
+	let promise = Promise.resolve();
+</script>
+
+<style>
+	.a + .b { color: green; }
+	.a + .c { color: green; }
+	.a + .d { color: green; }
+	.a + .e { color: green; }
+	.a + .f { color: green; }
+	.a + .g { color: green; }
+	.a + .h { color: green; }
+	
+	.b + .d { color: green; }
+	.c + .d { color: green; }
+	.b + .e + .f + .h { color: green; }
+	.b + .d + .h { color: green; }
+	.c + .g { color: green; }
+</style>
+
+<div class="a" />
+
+{#await promise then value}
+	<div class="b" />
+{:catch error}
+	<div class="c" />
+{/await}
+
+{#await promise}
+	<div class="d" />
+{:catch error}
+	<div class="e" />
+{/await}
+
+{#await promise}
+	<div class="f" />
+{:then error}
+	<div class="g" />
+{/await}
+
+<div class="h" />
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-await/_config.js b/test/css/samples/siblings-combinator-await/_config.js
new file mode 100644
index 0000000000..b51eb7a83e
--- /dev/null
+++ b/test/css/samples/siblings-combinator-await/_config.js
@@ -0,0 +1,60 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			frame: `
+				12:
+				13:   /* no match */
+				14:   .a + .e { color: green; }
+				      ^
+				15:   .b + .c { color: green; }
+				16:   .c + .d { color: green; }`,
+			message: 'Unused CSS selector ".a + .e"',
+			pos: 242,
+			start: { character: 242, column: 1, line: 14 },
+			end: { character: 249, column: 8, line: 14 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				13:   /* no match */
+				14:   .a + .e { color: green; }
+				15:   .b + .c { color: green; }
+				      ^
+				16:   .c + .d { color: green; }
+				17:   .b + .d { color: green; }`,
+			message: 'Unused CSS selector ".b + .c"',
+			pos: 269,
+			start: { character: 269, column: 1, line: 15 },
+			end: { character: 276, column: 8, line: 15 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				14:   .a + .e { color: green; }
+				15:   .b + .c { color: green; }
+				16:   .c + .d { color: green; }
+				      ^
+				17:   .b + .d { color: green; }
+				18: </style>`,
+			message: 'Unused CSS selector ".c + .d"',
+			pos: 296,
+			start: { character: 296, column: 1, line: 16 },
+			end: { character: 303, column: 8, line: 16 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				15:   .b + .c { color: green; }
+				16:   .c + .d { color: green; }
+				17:   .b + .d { color: green; }
+				      ^
+				18: </style>
+				19:`,
+			message: 'Unused CSS selector ".b + .d"',
+			pos: 323,
+			start: { character: 323, column: 1, line: 17 },
+			end: { character: 330, column: 8, line: 17 }
+		}
+	]
+};
diff --git a/test/css/samples/siblings-combinator-await/expected.css b/test/css/samples/siblings-combinator-await/expected.css
new file mode 100644
index 0000000000..5ea39be7c2
--- /dev/null
+++ b/test/css/samples/siblings-combinator-await/expected.css
@@ -0,0 +1 @@
+.a.svelte-xyz+.b.svelte-xyz{color:green}.a.svelte-xyz+.c.svelte-xyz{color:green}.a.svelte-xyz+.d.svelte-xyz{color:green}.b.svelte-xyz+.e.svelte-xyz{color:green}.c.svelte-xyz+.e.svelte-xyz{color:green}.d.svelte-xyz+.e.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-await/expected.html b/test/css/samples/siblings-combinator-await/expected.html
new file mode 100644
index 0000000000..3d8ac9f966
--- /dev/null
+++ b/test/css/samples/siblings-combinator-await/expected.html
@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="e svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-await/input.svelte b/test/css/samples/siblings-combinator-await/input.svelte
new file mode 100644
index 0000000000..07698c2a30
--- /dev/null
+++ b/test/css/samples/siblings-combinator-await/input.svelte
@@ -0,0 +1,30 @@
+<script>
+	let promise = Promise.resolve();
+</script>
+
+<style>
+	.a + .b { color: green; }
+	.a + .c { color: green; }
+	.a + .d { color: green; }
+	.b + .e { color: green; }
+	.c + .e { color: green; }
+	.d + .e { color: green; }
+
+	/* no match */
+	.a + .e { color: green; }
+	.b + .c { color: green; }
+	.c + .d { color: green; }
+	.b + .d { color: green; }
+</style>
+
+<div class="a" />
+
+{#await promise}
+	<div class="b" />
+{:then value}
+	<div class="c" />
+{:catch error}
+	<div class="d" />
+{/await}
+
+<div class="e" />
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-each-2/_config.js b/test/css/samples/siblings-combinator-each-2/_config.js
new file mode 100644
index 0000000000..644fe6a0ee
--- /dev/null
+++ b/test/css/samples/siblings-combinator-each-2/_config.js
@@ -0,0 +1,18 @@
+export default {
+	warnings: [
+		{
+		  code: 'css-unused-selector',
+			frame: `
+				24:   }
+				25:   /* not match */
+				26:   .a + .c {
+				      ^
+				27:     color: green;
+				28:   }`,
+		  message: 'Unused CSS selector ".a + .c"',
+		  pos: 320,
+		  start: { character: 320, column: 1, line: 26 },
+		  end: { character: 327, column: 8, line: 26 }
+		}
+	]
+};
diff --git a/test/css/samples/siblings-combinator-each-2/expected.css b/test/css/samples/siblings-combinator-each-2/expected.css
new file mode 100644
index 0000000000..60fa224269
--- /dev/null
+++ b/test/css/samples/siblings-combinator-each-2/expected.css
@@ -0,0 +1 @@
+.a.svelte-xyz+.b.svelte-xyz{color:green}.c.svelte-xyz+.d.svelte-xyz{color:green}.a.svelte-xyz+.d.svelte-xyz{color:green}.c.svelte-xyz+.b.svelte-xyz{color:green}.b.svelte-xyz+.c.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-each-2/expected.html b/test/css/samples/siblings-combinator-each-2/expected.html
new file mode 100644
index 0000000000..331a5e4317
--- /dev/null
+++ b/test/css/samples/siblings-combinator-each-2/expected.html
@@ -0,0 +1,4 @@
+<div class="a svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="c svelte-xyz"></div>
+<div class="d svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-each-2/input.svelte b/test/css/samples/siblings-combinator-each-2/input.svelte
new file mode 100644
index 0000000000..bbad045fbc
--- /dev/null
+++ b/test/css/samples/siblings-combinator-each-2/input.svelte
@@ -0,0 +1,38 @@
+<script>
+	let array = [1];
+</script>
+
+<style>
+	/* boundary of each */
+	.a + .b {
+		color: green;
+	}
+	.c + .d {
+		color: green;
+	}
+	/* if array is empty */
+	.a + .d {
+		color: green;
+	}
+	/* if array has multiple items */
+	.c + .b {
+		color: green;
+	}
+	/* normal sibling */
+	.b + .c {
+		color: green;
+	}
+	/* not match */
+	.a + .c {
+		color: green;
+	}
+</style>
+
+<div class="a" />
+
+{#each array as item}
+	<div class="b" />
+	<div class="c" />
+{/each}
+
+<div class="d" />
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-each-else-nested/_config.js b/test/css/samples/siblings-combinator-each-else-nested/_config.js
new file mode 100644
index 0000000000..be47c1f049
--- /dev/null
+++ b/test/css/samples/siblings-combinator-each-else-nested/_config.js
@@ -0,0 +1,144 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			frame: `
+				21:
+				22:   /* no match */
+				23:   .a + .c { color: green; }
+				      ^
+				24:   .a + .g { color: green; }
+				25:   .b + .e { color: green; }`,
+			message: 'Unused CSS selector ".a + .c"',
+			pos: 479,
+			start: { character: 479, column: 1, line: 23 },
+			end: { character: 486, column: 8, line: 23 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				22:   /* no match */
+				23:   .a + .c { color: green; }
+				24:   .a + .g { color: green; }
+				      ^
+				25:   .b + .e { color: green; }
+				26:   .c + .g { color: green; }`,
+			message: 'Unused CSS selector ".a + .g"',
+			pos: 506,
+			start: { character: 506, column: 1, line: 24 },
+			end: { character: 513, column: 8, line: 24 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				23:   .a + .c { color: green; }
+				24:   .a + .g { color: green; }
+				25:   .b + .e { color: green; }
+				      ^
+				26:   .c + .g { color: green; }
+				27:   .c + .k { color: green; }`,
+			message: 'Unused CSS selector ".b + .e"',
+			pos: 533,
+			start: { character: 533, column: 1, line: 25 },
+			end: { character: 540, column: 8, line: 25 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				24:   .a + .g { color: green; }
+				25:   .b + .e { color: green; }
+				26:   .c + .g { color: green; }
+				      ^
+				27:   .c + .k { color: green; }
+				28:   .d + .d { color: green; }`,
+			message: 'Unused CSS selector ".c + .g"',
+			pos: 560,
+			start: { character: 560, column: 1, line: 26 },
+			end: { character: 567, column: 8, line: 26 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				25:   .b + .e { color: green; }
+				26:   .c + .g { color: green; }
+				27:   .c + .k { color: green; }
+				      ^
+				28:   .d + .d { color: green; }
+				29:   .e + .f { color: green; }`,
+			message: 'Unused CSS selector ".c + .k"',
+			pos: 587,
+			start: { character: 587, column: 1, line: 27 },
+			end: { character: 594, column: 8, line: 27 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				26:   .c + .g { color: green; }
+				27:   .c + .k { color: green; }
+				28:   .d + .d { color: green; }
+				      ^
+				29:   .e + .f { color: green; }
+				30:   .f + .f { color: green; }`,
+			message: 'Unused CSS selector ".d + .d"',
+			pos: 614,
+			start: { character: 614, column: 1, line: 28 },
+			end: { character: 621, column: 8, line: 28 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				27:   .c + .k { color: green; }
+				28:   .d + .d { color: green; }
+				29:   .e + .f { color: green; }
+				      ^
+				30:   .f + .f { color: green; }
+				31:   .g + .j { color: green; }`,
+			message: 'Unused CSS selector ".e + .f"',
+			pos: 641,
+			start: { character: 641, column: 1, line: 29 },
+			end: { character: 648, column: 8, line: 29 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				28:   .d + .d { color: green; }
+				29:   .e + .f { color: green; }
+				30:   .f + .f { color: green; }
+				      ^
+				31:   .g + .j { color: green; }
+				32:   .g + .h + .i + .j { color: green; }`,
+			message: 'Unused CSS selector ".f + .f"',
+			pos: 668,
+			start: { character: 668, column: 1, line: 30 },
+			end: { character: 675, column: 8, line: 30 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				29:   .e + .f { color: green; }
+				30:   .f + .f { color: green; }
+				31:   .g + .j { color: green; }
+				      ^
+				32:   .g + .h + .i + .j { color: green; }
+				33: </style>`,
+			message: 'Unused CSS selector ".g + .j"',
+			pos: 695,
+			start: { character: 695, column: 1, line: 31 },
+			end: { character: 702, column: 8, line: 31 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				30:   .f + .f { color: green; }
+				31:   .g + .j { color: green; }
+				32:   .g + .h + .i + .j { color: green; }
+				      ^
+				33: </style>
+				34:`,
+			message: 'Unused CSS selector ".g + .h + .i + .j"',
+			pos: 722,
+			start: { character: 722, column: 1, line: 32 },
+			end: { character: 739, column: 18, line: 32 }
+		}
+	]
+};
diff --git a/test/css/samples/siblings-combinator-each-else-nested/expected.css b/test/css/samples/siblings-combinator-each-else-nested/expected.css
new file mode 100644
index 0000000000..aa4e04081d
--- /dev/null
+++ b/test/css/samples/siblings-combinator-each-else-nested/expected.css
@@ -0,0 +1 @@
+.a.svelte-xyz+.e.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.f.svelte-xyz.svelte-xyz{color:green}.b.svelte-xyz+.c.svelte-xyz.svelte-xyz{color:green}.b.svelte-xyz+.d.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz+.e.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz+.f.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz+.e.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz+.f.svelte-xyz.svelte-xyz{color:green}.e.svelte-xyz+.e.svelte-xyz.svelte-xyz{color:green}.i.svelte-xyz+.j.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz+.h.svelte-xyz+.j.svelte-xyz{color:green}.g.svelte-xyz+.i.svelte-xyz+.j.svelte-xyz{color:green}.m.svelte-xyz+.m.svelte-xyz.svelte-xyz{color:green}.m.svelte-xyz+.l.svelte-xyz.svelte-xyz{color:green}.l.svelte-xyz+.m.svelte-xyz.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-each-else-nested/expected.html b/test/css/samples/siblings-combinator-each-else-nested/expected.html
new file mode 100644
index 0000000000..5f25a2d38a
--- /dev/null
+++ b/test/css/samples/siblings-combinator-each-else-nested/expected.html
@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="f svelte-xyz"></div>
+<div class="k"></div>
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-each-else-nested/input.svelte b/test/css/samples/siblings-combinator-each-else-nested/input.svelte
new file mode 100644
index 0000000000..bee9c6b1dc
--- /dev/null
+++ b/test/css/samples/siblings-combinator-each-else-nested/input.svelte
@@ -0,0 +1,74 @@
+<script>
+	let array = [];
+</script>
+
+<style>
+	.a + .e { color: green; }
+	.a + .f { color: green; }
+	.b + .c { color: green; }
+	.b + .d { color: green; }
+	.c + .e { color: green; }
+	.c + .f { color: green; }
+	.d + .e { color: green; }
+	.d + .f { color: green; }
+	.e + .e { color: green; }
+	.i + .j { color: green; }
+	.g + .h + .j { color: green; }
+	.g + .i + .j { color: green; }
+	.m + .m { color: green; }
+	.m + .l { color: green; }
+	.l + .m { color: green; }
+	
+	/* no match */
+	.a + .c { color: green; }
+	.a + .g { color: green; }
+	.b + .e { color: green; }
+	.c + .g { color: green; }
+	.c + .k { color: green; }
+	.d + .d { color: green; }
+	.e + .f { color: green; }
+	.f + .f { color: green; }
+	.g + .j { color: green; }
+	.g + .h + .i + .j { color: green; }
+</style>
+
+<div class="a" />
+
+{#each array as a}
+	<div class="b" />
+	{#each array as b}
+		<div class="c" />
+	{:else}
+		<div class="d" />
+	{/each}
+{/each}
+
+{#each array as c}
+	{#each array as d}
+		<div class="e" />
+	{/each}
+{:else}
+	<div class="f" />
+{/each}
+
+{#each array as item}
+	<div class="g" />
+	{#each array as item}
+		{#each array as item}
+			<div class="h" />
+		{/each}
+	{:else}
+		<div class="i" />
+	{/each}
+	<div class="j" />
+{/each}
+
+<div class="k" />
+
+{#each array as item}
+	{#each array as item}
+		<div class="l" />
+	{:else}
+		<div class="m" />
+	{/each}
+{/each}
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-each-else/_config.js b/test/css/samples/siblings-combinator-each-else/_config.js
new file mode 100644
index 0000000000..89cbd9ef1a
--- /dev/null
+++ b/test/css/samples/siblings-combinator-each-else/_config.js
@@ -0,0 +1,32 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			frame: `
+				10:
+				11:   /* no match */
+				12:   .a + .d { color: green; }
+				      ^
+				13:   .b + .c { color: green; }
+				14: </style>`,
+			message: 'Unused CSS selector ".a + .d"',
+			pos: 172,
+			start: { character: 172, column: 1, line: 12 },
+			end: { character: 179, column: 8, line: 12 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				11:   /* no match */
+				12:   .a + .d { color: green; }
+				13:   .b + .c { color: green; }
+				      ^
+				14: </style>
+				15:`,
+			message: 'Unused CSS selector ".b + .c"',
+			pos: 199,
+			start: { character: 199, column: 1, line: 13 },
+			end: { character: 206, column: 8, line: 13 }
+		}
+	]
+};
diff --git a/test/css/samples/siblings-combinator-each-else/expected.css b/test/css/samples/siblings-combinator-each-else/expected.css
new file mode 100644
index 0000000000..f82bca8215
--- /dev/null
+++ b/test/css/samples/siblings-combinator-each-else/expected.css
@@ -0,0 +1 @@
+.a.svelte-xyz+.b.svelte-xyz{color:green}.a.svelte-xyz+.c.svelte-xyz{color:green}.b.svelte-xyz+.d.svelte-xyz{color:green}.c.svelte-xyz+.d.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-each-else/expected.html b/test/css/samples/siblings-combinator-each-else/expected.html
new file mode 100644
index 0000000000..fb838a55fd
--- /dev/null
+++ b/test/css/samples/siblings-combinator-each-else/expected.html
@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="c svelte-xyz"></div>
+<div class="d svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-each-else/input.svelte b/test/css/samples/siblings-combinator-each-else/input.svelte
new file mode 100644
index 0000000000..ecd48968c2
--- /dev/null
+++ b/test/css/samples/siblings-combinator-each-else/input.svelte
@@ -0,0 +1,24 @@
+<script>
+	let array = [];
+</script>
+
+<style>
+	.a + .b { color: green; }
+	.a + .c { color: green; }
+	.b + .d { color: green; }
+	.c + .d { color: green; }
+	
+	/* no match */
+	.a + .d { color: green; }
+	.b + .c { color: green; }
+</style>
+
+<div class="a" />
+
+{#each array as item}
+	<div class="b" />
+{:else}
+	<div class="c" />
+{/each}
+
+<div class="d" />
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-each-nested/_config.js b/test/css/samples/siblings-combinator-each-nested/_config.js
new file mode 100644
index 0000000000..6d58e6a4ec
--- /dev/null
+++ b/test/css/samples/siblings-combinator-each-nested/_config.js
@@ -0,0 +1,116 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			frame: `
+				56:
+				57:   /* no match */
+				58:   .a + .h { color: green; }
+				      ^
+				59:   .a + .i { color: green; }
+				60:   .c + .h { color: green; }`,
+			message: 'Unused CSS selector ".a + .h"',
+			pos: 1229,
+			start: { character: 1229, column: 1, line: 58 },
+			end: { character: 1236, column: 8, line: 58 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				57:   /* no match */
+				58:   .a + .h { color: green; }
+				59:   .a + .i { color: green; }
+				      ^
+				60:   .c + .h { color: green; }
+				61:   .c + .i { color: green; }`,
+			message: 'Unused CSS selector ".a + .i"',
+			pos: 1256,
+			start: { character: 1256, column: 1, line: 59 },
+			end: { character: 1263, column: 8, line: 59 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				58:   .a + .h { color: green; }
+				59:   .a + .i { color: green; }
+				60:   .c + .h { color: green; }
+				      ^
+				61:   .c + .i { color: green; }
+				62:   .d + .f { color: green; }`,
+			message: 'Unused CSS selector ".c + .h"',
+			pos: 1283,
+			start: { character: 1283, column: 1, line: 60 },
+			end: { character: 1290, column: 8, line: 60 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				59:   .a + .i { color: green; }
+				60:   .c + .h { color: green; }
+				61:   .c + .i { color: green; }
+				      ^
+				62:   .d + .f { color: green; }
+				63:   .d + .g { color: green; }`,
+			message: 'Unused CSS selector ".c + .i"',
+			pos: 1310,
+			start: { character: 1310, column: 1, line: 61 },
+			end: { character: 1317, column: 8, line: 61 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				60:   .c + .h { color: green; }
+				61:   .c + .i { color: green; }
+				62:   .d + .f { color: green; }
+				      ^
+				63:   .d + .g { color: green; }
+				64:   .e + .g { color: green; }`,
+			message: 'Unused CSS selector ".d + .f"',
+			pos: 1337,
+			start: { character: 1337, column: 1, line: 62 },
+			end: { character: 1344, column: 8, line: 62 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				61:   .c + .i { color: green; }
+				62:   .d + .f { color: green; }
+				63:   .d + .g { color: green; }
+				      ^
+				64:   .e + .g { color: green; }
+				65:   .g + .i { color: green; }`,
+			message: 'Unused CSS selector ".d + .g"',
+			pos: 1364,
+			start: { character: 1364, column: 1, line: 63 },
+			end: { character: 1371, column: 8, line: 63 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				62:   .d + .f { color: green; }
+				63:   .d + .g { color: green; }
+				64:   .e + .g { color: green; }
+				      ^
+				65:   .g + .i { color: green; }
+				66: </style>`,
+			message: 'Unused CSS selector ".e + .g"',
+			pos: 1391,
+			start: { character: 1391, column: 1, line: 64 },
+			end: { character: 1398, column: 8, line: 64 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				63:   .d + .g { color: green; }
+				64:   .e + .g { color: green; }
+				65:   .g + .i { color: green; }
+				      ^
+				66: </style>
+				67:`,
+			message: 'Unused CSS selector ".g + .i"',
+			pos: 1418,
+			start: { character: 1418, column: 1, line: 65 },
+			end: { character: 1425, column: 8, line: 65 }
+		}
+	]
+};
diff --git a/test/css/samples/siblings-combinator-each-nested/expected.css b/test/css/samples/siblings-combinator-each-nested/expected.css
new file mode 100644
index 0000000000..616d739670
--- /dev/null
+++ b/test/css/samples/siblings-combinator-each-nested/expected.css
@@ -0,0 +1 @@
+.a.svelte-xyz+.d.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.e.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.f.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.g.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz+.d.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz+.e.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz+.f.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz+.g.svelte-xyz.svelte-xyz{color:green}.j.svelte-xyz+.m.svelte-xyz.svelte-xyz{color:green}.j.svelte-xyz+.n.svelte-xyz.svelte-xyz{color:green}.j.svelte-xyz+.o.svelte-xyz.svelte-xyz{color:green}.k.svelte-xyz+.m.svelte-xyz.svelte-xyz{color:green}.k.svelte-xyz+.n.svelte-xyz.svelte-xyz{color:green}.k.svelte-xyz+.o.svelte-xyz.svelte-xyz{color:green}.l.svelte-xyz+.m.svelte-xyz.svelte-xyz{color:green}.l.svelte-xyz+.n.svelte-xyz.svelte-xyz{color:green}.l.svelte-xyz+.o.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz+.e.svelte-xyz.svelte-xyz{color:green}.e.svelte-xyz+.f.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz+.h.svelte-xyz.svelte-xyz{color:green}.f.svelte-xyz+.d.svelte-xyz.svelte-xyz{color:green}.f.svelte-xyz+.e.svelte-xyz.svelte-xyz{color:green}.f.svelte-xyz+.f.svelte-xyz.svelte-xyz{color:green}.h.svelte-xyz+.g.svelte-xyz.svelte-xyz{color:green}.i.svelte-xyz+.h.svelte-xyz.svelte-xyz{color:green}.i.svelte-xyz+.g.svelte-xyz.svelte-xyz{color:green}.d.svelte-xyz+.d.svelte-xyz.svelte-xyz{color:green}.e.svelte-xyz+.e.svelte-xyz.svelte-xyz{color:green}.f.svelte-xyz+.f.svelte-xyz.svelte-xyz{color:green}.g.svelte-xyz+.g.svelte-xyz.svelte-xyz{color:green}.h.svelte-xyz+.h.svelte-xyz.svelte-xyz{color:green}.i.svelte-xyz+.i.svelte-xyz.svelte-xyz{color:green}.e.svelte-xyz+.e.svelte-xyz+.f.svelte-xyz{color:green}.e.svelte-xyz+.e.svelte-xyz+.d.svelte-xyz{color:green}.h.svelte-xyz+.h.svelte-xyz+.i.svelte-xyz{color:green}.h.svelte-xyz+.h.svelte-xyz+.g.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-each-nested/expected.html b/test/css/samples/siblings-combinator-each-nested/expected.html
new file mode 100644
index 0000000000..340d6fc4c8
--- /dev/null
+++ b/test/css/samples/siblings-combinator-each-nested/expected.html
@@ -0,0 +1,15 @@
+<div class="a svelte-xyz"></div>
+<div class="b"></div>
+<div class="c svelte-xyz"></div>
+<div class="d svelte-xyz"></div>
+<div class="e svelte-xyz"></div>
+<div class="f svelte-xyz"></div>
+<div class="g svelte-xyz"></div>
+<div class="h svelte-xyz"></div>
+<div class="i svelte-xyz"></div>
+<div class="j svelte-xyz"></div>
+<div class="k svelte-xyz"></div>
+<div class="l svelte-xyz"></div>
+<div class="m svelte-xyz"></div>
+<div class="n svelte-xyz"></div>
+<div class="o svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-each-nested/input.svelte b/test/css/samples/siblings-combinator-each-nested/input.svelte
new file mode 100644
index 0000000000..b5b9242675
--- /dev/null
+++ b/test/css/samples/siblings-combinator-each-nested/input.svelte
@@ -0,0 +1,113 @@
+<script>
+	let array = [1];
+</script>
+
+<style>
+	/* boundary of each */
+	.a + .d { color: green; }
+	.a + .e { color: green; }
+	.a + .f { color: green; }
+	.a + .g { color: green; }
+	.c + .d { color: green; }
+	.c + .e { color: green; }
+	.c + .f { color: green; }
+	.c + .g { color: green; }
+
+	/* nested boundary of each */
+	.j + .m { color: green; }
+	.j + .n { color: green; }
+	.j + .o { color: green; }
+	.k + .m { color: green; }
+	.k + .n { color: green; }
+	.k + .o { color: green; }
+	.l + .m { color: green; }
+	.l + .n { color: green; }
+	.l + .o { color: green; }
+
+	/* parent each */
+	.d + .e { color: green; }
+	.e + .f { color: green; }
+
+	/* child each */
+	.g + .h { color: green; }
+
+	/* wrap around */
+	.f + .d { color: green; }
+	.f + .e { color: green; }
+	.f + .f { color: green; }
+
+	.h + .g { color: green; }
+	.i + .h { color: green; }
+	.i + .g { color: green; }
+
+	/* wrap around self */
+	.d + .d { color: green; }
+	.e + .e { color: green; }
+	.f + .f { color: green; }
+	.g + .g { color: green; }
+	.h + .h { color: green; }
+	.i + .i { color: green; }
+
+	/* wrap around self + next */
+	.e + .e + .f { color: green; }
+	.e + .e + .d { color: green; }
+	.h + .h + .i { color: green; }
+	.h + .h + .g { color: green; }
+
+	/* no match */
+	.a + .h { color: green; }
+	.a + .i { color: green; }
+	.c + .h { color: green; }
+	.c + .i { color: green; }
+	.d + .f { color: green; }
+	.d + .g { color: green; }
+	.e + .g { color: green; }
+	.g + .i { color: green; }
+</style>
+
+<div class="a" />
+
+{#each array as item}
+	<div class="b" />
+	<div class="c" />
+{/each}
+
+{#each array as item}
+	{#each array as item}
+		{#each array as item}
+			<div class="d" />
+		{/each}
+		<div class="e" />
+	{/each}
+	<div class="f" />
+{/each}
+
+{#each array as item}
+	<div class="g" />
+	{#each array as item}
+		<div class="h" />
+		{#each array as item}
+			<div class="i" />
+		{/each}
+	{/each}
+{/each}
+
+{#each array as item}
+	<div class="j" />
+	{#each array as item}
+		<div class="k" />
+		{#each array as item}
+			<div class="l" />
+		{/each}
+	{/each}
+{/each}
+
+{#each array as item}
+	{#each array as item}
+		{#each array as item}
+			<div class="m" />
+		{/each}
+		<div class="n" />
+	{/each}
+	<div class="o" />
+{/each}
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-each/expected.css b/test/css/samples/siblings-combinator-each/expected.css
new file mode 100644
index 0000000000..a46fc4ed4e
--- /dev/null
+++ b/test/css/samples/siblings-combinator-each/expected.css
@@ -0,0 +1 @@
+div.svelte-xyz+span.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-each/expected.html b/test/css/samples/siblings-combinator-each/expected.html
new file mode 100644
index 0000000000..9d0416f01b
--- /dev/null
+++ b/test/css/samples/siblings-combinator-each/expected.html
@@ -0,0 +1,6 @@
+<div class="svelte-xyz"></div>
+<span class="each svelte-xyz"></span>
+<div class="each svelte-xyz"></div>
+<span class="each svelte-xyz"></span>
+<div class="each svelte-xyz"></div>
+<span class="svelte-xyz"></span>
diff --git a/test/css/samples/siblings-combinator-each/input.svelte b/test/css/samples/siblings-combinator-each/input.svelte
new file mode 100644
index 0000000000..de77a25180
--- /dev/null
+++ b/test/css/samples/siblings-combinator-each/input.svelte
@@ -0,0 +1,20 @@
+<script>
+	let array = [1];
+</script>
+
+<style>
+	div + span {
+		color: green;
+	}
+</style>
+
+<div />
+
+{#each array as item}
+	<span class="each" />
+	<div class="each" />
+	<span class="each" />
+	<div class="each" />
+{/each}
+
+<span />
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-global/_config.js b/test/css/samples/siblings-combinator-global/_config.js
new file mode 100644
index 0000000000..342c09ce48
--- /dev/null
+++ b/test/css/samples/siblings-combinator-global/_config.js
@@ -0,0 +1,50 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector ":global(input) + span"',
+			pos: 239,
+			start: {
+				character: 239,
+				column: 2,
+				line: 9
+			},
+			end: {
+				character: 260,
+				column: 23,
+				line: 9
+			},
+			frame: `
+				 7:   :global(input) ~ p { color: red; }
+				 8:
+				 9:   :global(input) + span { color: red; }
+				      ^
+				10:   :global(input) ~ span { color: red; }
+				11: </style>
+			`
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector ":global(input) ~ span"',
+			pos: 279,
+			start: {
+				character: 279,
+				column: 2,
+				line: 10
+			},
+			end: {
+				character: 300,
+				column: 23,
+				line: 10
+			},
+			frame: `
+				 8:
+				 9:   :global(input) + span { color: red; }
+				10:   :global(input) ~ span { color: red; }
+				      ^
+				11: </style>
+				12:
+			`
+		}
+	]
+};
diff --git a/test/css/samples/siblings-combinator-global/expected.css b/test/css/samples/siblings-combinator-global/expected.css
new file mode 100644
index 0000000000..83a4713156
--- /dev/null
+++ b/test/css/samples/siblings-combinator-global/expected.css
@@ -0,0 +1 @@
+input+div.svelte-xyz{color:red}input~div.svelte-xyz{color:red}input+h1.svelte-xyz{color:red}input~h1.svelte-xyz{color:red}input+p.svelte-xyz{color:red}input~p.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-global/input.svelte b/test/css/samples/siblings-combinator-global/input.svelte
new file mode 100644
index 0000000000..ec06f3c015
--- /dev/null
+++ b/test/css/samples/siblings-combinator-global/input.svelte
@@ -0,0 +1,21 @@
+<style>
+  :global(input) + div { color: red; }
+  :global(input) ~ div { color: red; }
+  :global(input) + h1 { color: red; }
+  :global(input) ~ h1 { color: red; }
+  :global(input) + p { color: red; }
+  :global(input) ~ p { color: red; }
+
+  :global(input) + span { color: red; }
+  :global(input) ~ span { color: red; }
+</style>
+
+<h1>Hello!</h1>
+
+<div>
+  <span>World!</span>
+</div>
+
+{#each [] as _}
+  <p />
+{/each}
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-if-not-exhaustive-with-each/_config.js b/test/css/samples/siblings-combinator-if-not-exhaustive-with-each/_config.js
new file mode 100644
index 0000000000..6648dec55d
--- /dev/null
+++ b/test/css/samples/siblings-combinator-if-not-exhaustive-with-each/_config.js
@@ -0,0 +1,18 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			frame: `
+				16:
+				17:   /* no match */
+				18:   .b + .c { color: green; }
+				      ^
+				19: </style>
+				20:`,
+			message: 'Unused CSS selector ".b + .c"',
+			pos: 319,
+			start: { character: 319, column: 1, line: 18 },
+			end: { character: 326, column: 8, line: 18 }
+		}
+	]
+};
diff --git a/test/css/samples/siblings-combinator-if-not-exhaustive-with-each/expected.css b/test/css/samples/siblings-combinator-if-not-exhaustive-with-each/expected.css
new file mode 100644
index 0000000000..93cd539f00
--- /dev/null
+++ b/test/css/samples/siblings-combinator-if-not-exhaustive-with-each/expected.css
@@ -0,0 +1 @@
+.a.svelte-xyz+.b.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.c.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.b.svelte-xyz+.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz+.d.svelte-xyz.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.c.svelte-xyz+.c.svelte-xyz.svelte-xyz{color:green}.c.svelte-xyz+.c.svelte-xyz+.d.svelte-xyz.svelte-xyz{color:green}.a.svelte-xyz+.c.svelte-xyz+.c.svelte-xyz+.d.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-if-not-exhaustive-with-each/expected.html b/test/css/samples/siblings-combinator-if-not-exhaustive-with-each/expected.html
new file mode 100644
index 0000000000..fb838a55fd
--- /dev/null
+++ b/test/css/samples/siblings-combinator-if-not-exhaustive-with-each/expected.html
@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="c svelte-xyz"></div>
+<div class="d svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-if-not-exhaustive-with-each/input.svelte b/test/css/samples/siblings-combinator-if-not-exhaustive-with-each/input.svelte
new file mode 100644
index 0000000000..ff9f10dc1c
--- /dev/null
+++ b/test/css/samples/siblings-combinator-if-not-exhaustive-with-each/input.svelte
@@ -0,0 +1,31 @@
+<script>
+	let foo = false;
+	let array = [1];
+</script>
+
+<style>
+	.a + .b { color: green; }
+	.a + .c { color: green; }
+	.a + .d { color: green; }
+	.b + .d { color: green; }
+	.c + .d { color: green; }
+
+	.a + .c + .c { color: green; }
+	.c + .c + .d { color: green; }
+	.a + .c + .c + .d { color: green; }
+
+	/* no match */
+	.b + .c { color: green; }
+</style>
+
+<div class="a" />
+
+{#if foo}
+	<div class="b" />
+{:else}
+	{#each array as item}
+		<div class="c" />
+	{/each}
+{/if}
+
+<div class="d" />
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-if-not-exhaustive/_config.js b/test/css/samples/siblings-combinator-if-not-exhaustive/_config.js
new file mode 100644
index 0000000000..51ca551055
--- /dev/null
+++ b/test/css/samples/siblings-combinator-if-not-exhaustive/_config.js
@@ -0,0 +1,18 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			frame: `
+				12:
+				13:   /* no match */
+				14:   .b + .c { color: green; }
+				      ^
+				15: </style>
+				16:`,
+			message: 'Unused CSS selector ".b + .c"',
+			pos: 215,
+			start: { character: 215, column: 1, line: 14 },
+			end: { character: 222, column: 8, line: 14 }
+		}
+	]
+};
diff --git a/test/css/samples/siblings-combinator-if-not-exhaustive/expected.css b/test/css/samples/siblings-combinator-if-not-exhaustive/expected.css
new file mode 100644
index 0000000000..b1225e36a1
--- /dev/null
+++ b/test/css/samples/siblings-combinator-if-not-exhaustive/expected.css
@@ -0,0 +1 @@
+.a.svelte-xyz+.b.svelte-xyz{color:green}.a.svelte-xyz+.c.svelte-xyz{color:green}.a.svelte-xyz+.d.svelte-xyz{color:green}.b.svelte-xyz+.d.svelte-xyz{color:green}.c.svelte-xyz+.d.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-if-not-exhaustive/expected.html b/test/css/samples/siblings-combinator-if-not-exhaustive/expected.html
new file mode 100644
index 0000000000..813e778dc6
--- /dev/null
+++ b/test/css/samples/siblings-combinator-if-not-exhaustive/expected.html
@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="d svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-if-not-exhaustive/input.svelte b/test/css/samples/siblings-combinator-if-not-exhaustive/input.svelte
new file mode 100644
index 0000000000..4f832b3b47
--- /dev/null
+++ b/test/css/samples/siblings-combinator-if-not-exhaustive/input.svelte
@@ -0,0 +1,25 @@
+<script>
+	let foo = true;
+	let bar = true;
+</script>
+
+<style>
+	.a + .b { color: green; }
+	.a + .c { color: green; }
+	.a + .d { color: green; }
+	.b + .d { color: green; }
+	.c + .d { color: green; }
+
+	/* no match */
+	.b + .c { color: green; }
+</style>
+
+<div class="a" />
+
+{#if foo}
+	<div class="b" />
+{:else if bar}
+	<div class="c" />
+{/if}
+
+<div class="d" />
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-if/_config.js b/test/css/samples/siblings-combinator-if/_config.js
new file mode 100644
index 0000000000..bc8e32f5fd
--- /dev/null
+++ b/test/css/samples/siblings-combinator-if/_config.js
@@ -0,0 +1,60 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			frame: `
+				13:
+				14:   /* no match */
+				15:   .a + .e { color: green; }
+				      ^
+				16:   .b + .c { color: green; }
+				17:   .b + .d { color: green; }`,
+			message: 'Unused CSS selector ".a + .e"',
+			pos: 242,
+			start: { character: 242, column: 1, line: 15 },
+			end: { character: 249, column: 8, line: 15 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				14:   /* no match */
+				15:   .a + .e { color: green; }
+				16:   .b + .c { color: green; }
+				      ^
+				17:   .b + .d { color: green; }
+				18:   .c + .d { color: green; }`,
+			message: 'Unused CSS selector ".b + .c"',
+			pos: 269,
+			start: { character: 269, column: 1, line: 16 },
+			end: { character: 276, column: 8, line: 16 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				15:   .a + .e { color: green; }
+				16:   .b + .c { color: green; }
+				17:   .b + .d { color: green; }
+				      ^
+				18:   .c + .d { color: green; }
+				19: </style>`,
+			message: 'Unused CSS selector ".b + .d"',
+			pos: 296,
+			start: { character: 296, column: 1, line: 17 },
+			end: { character: 303, column: 8, line: 17 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				16:   .b + .c { color: green; }
+				17:   .b + .d { color: green; }
+				18:   .c + .d { color: green; }
+				      ^
+				19: </style>
+				20:`,
+			message: 'Unused CSS selector ".c + .d"',
+			pos: 323,
+			start: { character: 323, column: 1, line: 18 },
+			end: { character: 330, column: 8, line: 18 }
+		}
+	]
+};
diff --git a/test/css/samples/siblings-combinator-if/expected.css b/test/css/samples/siblings-combinator-if/expected.css
new file mode 100644
index 0000000000..5ea39be7c2
--- /dev/null
+++ b/test/css/samples/siblings-combinator-if/expected.css
@@ -0,0 +1 @@
+.a.svelte-xyz+.b.svelte-xyz{color:green}.a.svelte-xyz+.c.svelte-xyz{color:green}.a.svelte-xyz+.d.svelte-xyz{color:green}.b.svelte-xyz+.e.svelte-xyz{color:green}.c.svelte-xyz+.e.svelte-xyz{color:green}.d.svelte-xyz+.e.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-if/expected.html b/test/css/samples/siblings-combinator-if/expected.html
new file mode 100644
index 0000000000..3d8ac9f966
--- /dev/null
+++ b/test/css/samples/siblings-combinator-if/expected.html
@@ -0,0 +1,3 @@
+<div class="a svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="e svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-if/input.svelte b/test/css/samples/siblings-combinator-if/input.svelte
new file mode 100644
index 0000000000..6cfc436876
--- /dev/null
+++ b/test/css/samples/siblings-combinator-if/input.svelte
@@ -0,0 +1,31 @@
+<script>
+	let foo = true;
+	let bar = true;
+</script>
+
+<style>
+	.a + .b { color: green; }
+	.a + .c { color: green; }
+	.a + .d { color: green; }
+	.b + .e { color: green; }
+	.c + .e { color: green; }
+	.d + .e { color: green; }
+
+	/* no match */
+	.a + .e { color: green; }
+	.b + .c { color: green; }
+	.b + .d { color: green; }
+	.c + .d { color: green; }
+</style>
+
+<div class="a" />
+
+{#if foo}
+	<div class="b" />
+{:else if bar}
+	<div class="c" />
+{:else}
+	<div class="d" />
+{/if}
+
+<div class="e" />
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-slot/_config.js b/test/css/samples/siblings-combinator-slot/_config.js
new file mode 100644
index 0000000000..8dbb714bd3
--- /dev/null
+++ b/test/css/samples/siblings-combinator-slot/_config.js
@@ -0,0 +1,46 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			frame: `
+				 7:
+				 8:   /* no match */
+				 9:   .a + .b { color: green; }
+				      ^
+				10:   .b + .c { color: green; }
+				11:   .c + .f { color: green; }`,
+			message: 'Unused CSS selector ".a + .b"',
+			pos: 84,
+			start: { character: 84, column: 1, line: 9 },
+			end: { character: 91, column: 8, line: 9 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				 8:   /* no match */
+				 9:   .a + .b { color: green; }
+				10:   .b + .c { color: green; }
+				      ^
+				11:   .c + .f { color: green; }
+				12: </style>`,
+			message: 'Unused CSS selector ".b + .c"',
+			pos: 111,
+			start: { character: 111, column: 1, line: 10 },
+			end: { character: 118, column: 8, line: 10 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				 9:   .a + .b { color: green; }
+				10:   .b + .c { color: green; }
+				11:   .c + .f { color: green; }
+				      ^
+				12: </style>
+				13:`,
+			message: 'Unused CSS selector ".c + .f"',
+			pos: 138,
+			start: { character: 138, column: 1, line: 11 },
+			end: { character: 145, column: 8, line: 11 }
+		}
+	]
+};
diff --git a/test/css/samples/siblings-combinator-slot/expected.css b/test/css/samples/siblings-combinator-slot/expected.css
new file mode 100644
index 0000000000..bbdd03f274
--- /dev/null
+++ b/test/css/samples/siblings-combinator-slot/expected.css
@@ -0,0 +1 @@
+.d.svelte-xyz+.e.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-slot/input.svelte b/test/css/samples/siblings-combinator-slot/input.svelte
new file mode 100644
index 0000000000..42fe0e4c30
--- /dev/null
+++ b/test/css/samples/siblings-combinator-slot/input.svelte
@@ -0,0 +1,24 @@
+<script>
+	let App;
+</script>
+
+<style>
+	.d + .e { color: green; }
+	
+	/* no match */
+	.a + .b { color: green; }
+	.b + .c { color: green; }
+	.c + .f { color: green; }
+</style>
+
+<div class="a" />
+<App>
+	<div class="b" slot="a" />
+
+	<div class="c" slot="b">
+		<div class="d" />
+		<div class="e" />
+	</div>
+</App>
+
+<div class="f" />
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-star/_config.js b/test/css/samples/siblings-combinator-star/_config.js
new file mode 100644
index 0000000000..687331e41c
--- /dev/null
+++ b/test/css/samples/siblings-combinator-star/_config.js
@@ -0,0 +1,18 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			frame: `
+				3:     margin-left: 4px;
+				4:   }
+				5:   .not-match > * + * {
+				     ^
+				6:     margin-left: 4px;
+				7:   }`,
+			message: 'Unused CSS selector ".not-match > * + *"',
+			pos: 50,
+			start: { character: 50, column: 1, line: 5 },
+      end: { character: 68, column: 19, line: 5 }
+		}
+	]
+};
diff --git a/test/css/samples/siblings-combinator-star/expected.css b/test/css/samples/siblings-combinator-star/expected.css
new file mode 100644
index 0000000000..c1a06945f9
--- /dev/null
+++ b/test/css/samples/siblings-combinator-star/expected.css
@@ -0,0 +1 @@
+.match.svelte-xyz>.svelte-xyz+.svelte-xyz{margin-left:4px}
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-star/expected.html b/test/css/samples/siblings-combinator-star/expected.html
new file mode 100644
index 0000000000..1cfae6e6f7
--- /dev/null
+++ b/test/css/samples/siblings-combinator-star/expected.html
@@ -0,0 +1,7 @@
+<div class="not-match">
+  <div></div>
+</div>
+<div class="match svelte-xyz">
+  <div class="svelte-xyz"></div>
+  <div class="svelte-xyz"></div>
+</div>
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-star/input.svelte b/test/css/samples/siblings-combinator-star/input.svelte
new file mode 100644
index 0000000000..ca837f2239
--- /dev/null
+++ b/test/css/samples/siblings-combinator-star/input.svelte
@@ -0,0 +1,17 @@
+<style>
+	.match > * + * {
+		margin-left: 4px;
+	}
+	.not-match > * + * {
+		margin-left: 4px;
+	}
+</style>
+
+<div class="not-match">
+	<div />
+</div>
+
+<div class="match">
+	<div />
+	<div />
+</div>
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-with-spread/_config.js b/test/css/samples/siblings-combinator-with-spread/_config.js
new file mode 100644
index 0000000000..c81f1a9f82
--- /dev/null
+++ b/test/css/samples/siblings-combinator-with-spread/_config.js
@@ -0,0 +1,3 @@
+export default {
+	warnings: []
+};
diff --git a/test/css/samples/siblings-combinator-with-spread/expected.css b/test/css/samples/siblings-combinator-with-spread/expected.css
new file mode 100644
index 0000000000..aacf6e7db5
--- /dev/null
+++ b/test/css/samples/siblings-combinator-with-spread/expected.css
@@ -0,0 +1 @@
+input.svelte-xyz:focus+div.svelte-xyz{color:red}input.svelte-xyz:focus~div.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-with-spread/expected.html b/test/css/samples/siblings-combinator-with-spread/expected.html
new file mode 100644
index 0000000000..d732739701
--- /dev/null
+++ b/test/css/samples/siblings-combinator-with-spread/expected.html
@@ -0,0 +1,2 @@
+<input placeholder="Text" class="svelte-xyz">
+<div class="svelte-xyz">Should be red, when input is focused</div>
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator-with-spread/input.svelte b/test/css/samples/siblings-combinator-with-spread/input.svelte
new file mode 100644
index 0000000000..45c889c1ae
--- /dev/null
+++ b/test/css/samples/siblings-combinator-with-spread/input.svelte
@@ -0,0 +1,11 @@
+<script>
+	const test = { placeholder: 'Text' };
+</script>
+
+<style>
+	input:focus + div { color: red; }
+	input:focus ~ div { color: red; }
+</style>
+
+<input {...test}>
+<div>Should be red, when input is focused</div>
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator/_config.js b/test/css/samples/siblings-combinator/_config.js
new file mode 100644
index 0000000000..b54cd28190
--- /dev/null
+++ b/test/css/samples/siblings-combinator/_config.js
@@ -0,0 +1,62 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			frame: `
+				3:     color: green;
+				4:   }
+				5:   article + div {
+				     ^
+				6:     color: green;
+				7:   }`,
+			message: 'Unused CSS selector "article + div"',
+			pos: 45,
+			start: { character: 45, column: 1, line: 5 },
+			end: { character: 58, column: 14, line: 5 }
+		},
+		{
+			code: 'css-unused-selector',
+			
+			frame:`
+				 6:     color: green;
+				 7:   }
+				 8:   span + article {
+				      ^
+				 9:     color: green;
+				10:   }`,
+			message: 'Unused CSS selector "span + article"',
+			pos: 81,
+			start: { character: 81, column: 1, line: 8 },
+			end: { character: 95, column: 15, line: 8 }
+		},
+		{
+			code: 'css-unused-selector',
+			
+			frame: `
+				 9:     color: green;
+				10:   }
+				11:   b + article {
+				      ^
+				12:     color: green;
+				13:   }`,
+			message: 'Unused CSS selector "b + article"',
+			pos: 118,
+			start: { character: 118, column: 1, line: 11 },
+			end: { character: 129, column: 12, line: 11 }
+		},
+		{
+			code: 'css-unused-selector',
+			frame: `
+				12:     color: green;
+				13:   }
+				14:   span + div {
+				      ^
+				15:     color: green;
+				16:   }`,
+			message: 'Unused CSS selector "span + div"',
+			pos: 152,
+			start: { character: 152, column: 1, line: 14 },
+			end: { character: 162, column: 11, line: 14 }
+		}
+	]
+};
diff --git a/test/css/samples/siblings-combinator/expected.css b/test/css/samples/siblings-combinator/expected.css
new file mode 100644
index 0000000000..be01048cf1
--- /dev/null
+++ b/test/css/samples/siblings-combinator/expected.css
@@ -0,0 +1 @@
+div.svelte-xyz+article.svelte-xyz.svelte-xyz{color:green}span.svelte-xyz+b.svelte-xyz.svelte-xyz{color:green}div.svelte-xyz span.svelte-xyz+b.svelte-xyz{color:green}.a.svelte-xyz+article.svelte-xyz.svelte-xyz{color:green}div.svelte-xyz+.b.svelte-xyz.svelte-xyz{color:green}
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator/expected.html b/test/css/samples/siblings-combinator/expected.html
new file mode 100644
index 0000000000..f4692365dd
--- /dev/null
+++ b/test/css/samples/siblings-combinator/expected.html
@@ -0,0 +1,5 @@
+<div class="a svelte-xyz">
+  <span class="svelte-xyz"></span>
+  <b class="svelte-xyz"></b>
+</div>
+<article class="b svelte-xyz"></article>
\ No newline at end of file
diff --git a/test/css/samples/siblings-combinator/input.svelte b/test/css/samples/siblings-combinator/input.svelte
new file mode 100644
index 0000000000..3e22076d52
--- /dev/null
+++ b/test/css/samples/siblings-combinator/input.svelte
@@ -0,0 +1,35 @@
+<style>
+	div + article {
+		color: green;
+	}
+	article + div {
+		color: green;
+	}
+	span + article {
+		color: green;
+	}
+	b + article {
+		color: green;
+	}
+	span + div {
+		color: green;
+	}
+	span + b {
+		color: green;
+	}
+	div span + b {
+		color: green;
+	}
+	.a + article {
+		color: green;
+	}
+	div + .b {
+		color: green;
+	}
+</style>
+
+<div class="a">
+	<span />
+	<b />
+</div>
+<article class="b"></article>
\ No newline at end of file
diff --git a/test/css/samples/spread/expected.css b/test/css/samples/spread/expected.css
new file mode 100644
index 0000000000..dc433318e8
--- /dev/null
+++ b/test/css/samples/spread/expected.css
@@ -0,0 +1 @@
+.foo.svelte-xyz{color:red;font-size:2em;font-family:'Comic Sans MS'}
\ No newline at end of file
diff --git a/test/css/samples/spread/input.svelte b/test/css/samples/spread/input.svelte
new file mode 100644
index 0000000000..aa43e4ae11
--- /dev/null
+++ b/test/css/samples/spread/input.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let props;
+</script>
+
+<div {...props} >
+	Big red Comic Sans
+</div>
+
+<style>
+	.foo {
+		color: red;
+		font-size: 2em;
+		font-family: 'Comic Sans MS';
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/supports-charset/expected.css b/test/css/samples/supports-charset/expected.css
new file mode 100644
index 0000000000..55cfd4ea2d
--- /dev/null
+++ b/test/css/samples/supports-charset/expected.css
@@ -0,0 +1 @@
+@charset "utf-8";
\ No newline at end of file
diff --git a/test/css/samples/supports-charset/input.svelte b/test/css/samples/supports-charset/input.svelte
new file mode 100644
index 0000000000..25704d3eb4
--- /dev/null
+++ b/test/css/samples/supports-charset/input.svelte
@@ -0,0 +1,3 @@
+<style>
+	@charset "utf-8";
+</style>
diff --git a/test/css/samples/supports-font-face/expected.css b/test/css/samples/supports-font-face/expected.css
new file mode 100644
index 0000000000..652ecb1dc2
--- /dev/null
+++ b/test/css/samples/supports-font-face/expected.css
@@ -0,0 +1 @@
+@font-face{font-family:MyHelvetica;src:local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), url(MgOpenModernaBold.ttf);font-weight:bold}
\ No newline at end of file
diff --git a/test/css/samples/supports-font-face/input.svelte b/test/css/samples/supports-font-face/input.svelte
new file mode 100644
index 0000000000..3ed82008bf
--- /dev/null
+++ b/test/css/samples/supports-font-face/input.svelte
@@ -0,0 +1,7 @@
+<style>
+	@font-face {
+		font-family: MyHelvetica;
+		src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), url(MgOpenModernaBold.ttf);
+		font-weight: bold;
+	}
+</style>
diff --git a/test/css/samples/supports-import/expected.css b/test/css/samples/supports-import/expected.css
new file mode 100644
index 0000000000..485d9d272f
--- /dev/null
+++ b/test/css/samples/supports-import/expected.css
@@ -0,0 +1 @@
+@import 'custom.css';@import "common.css" screen;@import url(chrome://communicator/skin/);@import url(fineprint.css) print;@import url(landscape.css) screen and (orientation:landscape);@import url(red.css) (min-width:400px);
\ No newline at end of file
diff --git a/test/css/samples/supports-import/input.svelte b/test/css/samples/supports-import/input.svelte
new file mode 100644
index 0000000000..dccfc4cb95
--- /dev/null
+++ b/test/css/samples/supports-import/input.svelte
@@ -0,0 +1,8 @@
+<style>
+	@import 'custom.css';
+	@import "common.css" screen;
+	@import url(chrome://communicator/skin/);
+	@import url(fineprint.css) print;
+	@import url(landscape.css) screen and (orientation:landscape);
+	@import url(red.css) (min-width:400px);
+</style>
diff --git a/test/css/samples/supports-namespace/expected.css b/test/css/samples/supports-namespace/expected.css
new file mode 100644
index 0000000000..7ca9f4f23d
--- /dev/null
+++ b/test/css/samples/supports-namespace/expected.css
@@ -0,0 +1 @@
+@namespace url(http://www.w3.org/1999/xhtml);@namespace svg url(http://www.w3.org/2000/svg);a{color:blue}svg|a{color:green}*|a{color:red}
\ No newline at end of file
diff --git a/test/css/samples/supports-namespace/input.svelte b/test/css/samples/supports-namespace/input.svelte
new file mode 100644
index 0000000000..6322ac6310
--- /dev/null
+++ b/test/css/samples/supports-namespace/input.svelte
@@ -0,0 +1,19 @@
+<style>
+	@namespace url(http://www.w3.org/1999/xhtml);
+	@namespace svg url(http://www.w3.org/2000/svg);
+
+	/* This matches all XHTML <a> elements, as XHTML is the default unprefixed namespace */
+	:global(a) {
+		color: blue;
+	}
+
+	/* This matches all SVG <a> elements */
+	:global(svg|a) {
+		color: green;
+	}
+
+	/* This matches both XHTML and SVG <a> elements */
+	:global(*|a) {
+		color: red;
+	}
+</style>
diff --git a/test/css/samples/supports-nested-page/expected.css b/test/css/samples/supports-nested-page/expected.css
new file mode 100644
index 0000000000..d526b57989
--- /dev/null
+++ b/test/css/samples/supports-nested-page/expected.css
@@ -0,0 +1 @@
+@page vertical{size:A4 portrait;@top-center{content:"Vertical"}}@page :right{@top-center{content:"Preliminary edition"}@bottom-center{content:counter(page)}}@page :first{color:green;font-size:20pt;@top-left{content:"foo";color:blue}@top-right{content:"bar"}}
\ No newline at end of file
diff --git a/test/css/samples/supports-nested-page/input.svelte b/test/css/samples/supports-nested-page/input.svelte
new file mode 100644
index 0000000000..a36c8263ce
--- /dev/null
+++ b/test/css/samples/supports-nested-page/input.svelte
@@ -0,0 +1,32 @@
+<style>
+	@page vertical {
+		size: A4 portrait;
+		@top-center {
+			content: "Vertical";
+		}
+	}
+
+	@page :right {
+		@top-center {
+			content: "Preliminary edition";
+		}
+
+		@bottom-center {
+			content: counter(page);
+		}
+	}
+
+	@page :first {
+		color: green;
+		font-size: 20pt;
+
+		@top-left {
+			content: "foo";
+			color: blue;
+		}
+
+		@top-right {
+			content: "bar";
+		}
+	}
+</style>
diff --git a/test/css/samples/supports-page/expected.css b/test/css/samples/supports-page/expected.css
new file mode 100644
index 0000000000..6978c3ecec
--- /dev/null
+++ b/test/css/samples/supports-page/expected.css
@@ -0,0 +1 @@
+@page{margin:1cm;size:A4;bleed:7pt}
\ No newline at end of file
diff --git a/test/css/samples/supports-page/input.svelte b/test/css/samples/supports-page/input.svelte
new file mode 100644
index 0000000000..70c089c356
--- /dev/null
+++ b/test/css/samples/supports-page/input.svelte
@@ -0,0 +1,7 @@
+<style>
+	@page{
+		margin: 1cm;
+		size: A4;
+		bleed: 7pt;
+	}
+</style>
diff --git a/test/css/samples/supports-query/expected.css b/test/css/samples/supports-query/expected.css
new file mode 100644
index 0000000000..3fdef34d6e
--- /dev/null
+++ b/test/css/samples/supports-query/expected.css
@@ -0,0 +1 @@
+@supports (display: grid){.maybe-grid.svelte-xyz{display:grid}}
\ No newline at end of file
diff --git a/test/css/samples/supports-query/input.svelte b/test/css/samples/supports-query/input.svelte
new file mode 100644
index 0000000000..776a7e9369
--- /dev/null
+++ b/test/css/samples/supports-query/input.svelte
@@ -0,0 +1,9 @@
+<div class='maybe-grid'>something with a nice layout</div>
+
+<style>
+	@supports (display: grid) {
+		.maybe-grid {
+			display: grid;
+		}
+	}
+</style>
diff --git a/test/css/samples/undefined-with-scope/expected.css b/test/css/samples/undefined-with-scope/expected.css
new file mode 100644
index 0000000000..5d8d69ac33
--- /dev/null
+++ b/test/css/samples/undefined-with-scope/expected.css
@@ -0,0 +1 @@
+p.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/undefined-with-scope/expected.html b/test/css/samples/undefined-with-scope/expected.html
new file mode 100644
index 0000000000..ddb9429bc8
--- /dev/null
+++ b/test/css/samples/undefined-with-scope/expected.html
@@ -0,0 +1 @@
+<p class=" svelte-xyz">Foo</p>
\ No newline at end of file
diff --git a/test/css/samples/undefined-with-scope/input.svelte b/test/css/samples/undefined-with-scope/input.svelte
new file mode 100644
index 0000000000..c68fb40dea
--- /dev/null
+++ b/test/css/samples/undefined-with-scope/input.svelte
@@ -0,0 +1,3 @@
+<style>p { color: red; }</style>
+
+<p class={undefined}>Foo</p>
\ No newline at end of file
diff --git a/test/css/samples/universal-selector/expected.css b/test/css/samples/universal-selector/expected.css
new file mode 100644
index 0000000000..3eda95e446
--- /dev/null
+++ b/test/css/samples/universal-selector/expected.css
@@ -0,0 +1 @@
+.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/universal-selector/input.svelte b/test/css/samples/universal-selector/input.svelte
new file mode 100644
index 0000000000..36a65e23e6
--- /dev/null
+++ b/test/css/samples/universal-selector/input.svelte
@@ -0,0 +1,7 @@
+<div></div>
+
+<style>
+	* {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/unknown-at-rule-with-following-rules/expected.css b/test/css/samples/unknown-at-rule-with-following-rules/expected.css
new file mode 100644
index 0000000000..31c3bf9c6f
--- /dev/null
+++ b/test/css/samples/unknown-at-rule-with-following-rules/expected.css
@@ -0,0 +1 @@
+div.svelte-xyz{@apply --funky-div;}
\ No newline at end of file
diff --git a/test/css/samples/unknown-at-rule-with-following-rules/input.svelte b/test/css/samples/unknown-at-rule-with-following-rules/input.svelte
new file mode 100644
index 0000000000..b8947d3545
--- /dev/null
+++ b/test/css/samples/unknown-at-rule-with-following-rules/input.svelte
@@ -0,0 +1,11 @@
+<div></div>
+
+<style>
+	div {
+		@apply --funky-div;
+	}
+
+	div {
+		
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/unknown-at-rule/expected.css b/test/css/samples/unknown-at-rule/expected.css
new file mode 100644
index 0000000000..31c3bf9c6f
--- /dev/null
+++ b/test/css/samples/unknown-at-rule/expected.css
@@ -0,0 +1 @@
+div.svelte-xyz{@apply --funky-div;}
\ No newline at end of file
diff --git a/test/css/samples/unknown-at-rule/input.svelte b/test/css/samples/unknown-at-rule/input.svelte
new file mode 100644
index 0000000000..165a40d9bc
--- /dev/null
+++ b/test/css/samples/unknown-at-rule/input.svelte
@@ -0,0 +1,7 @@
+<div></div>
+
+<style>
+	div {
+		@apply --funky-div;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-child-combinator/_config.js b/test/css/samples/unused-selector-child-combinator/_config.js
new file mode 100644
index 0000000000..603e0d1fd0
--- /dev/null
+++ b/test/css/samples/unused-selector-child-combinator/_config.js
@@ -0,0 +1,45 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector "article > *"',
+			frame: `
+			1: <style>
+			2:   article > * {
+			     ^
+			3:     font-size: 36px;
+			4:   }`,
+			pos: 10,
+			start: { character: 10, column: 1, line: 2 },
+			end: { character: 21, column: 12, line: 2 }
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector "article *"',
+			frame: `
+			4:   }
+			5:
+			6:   article * {
+			     ^
+			7:     font-size: 36px;
+			8:   }`,
+			pos: 49,
+			start: { character: 49, column: 1, line: 6 },
+			end: { character: 58, column: 10, line: 6 }
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector ".article > *"',
+			frame: `
+			 8:   }
+			 9:
+			10:   .article > * {
+			      ^
+			11:     font-size: 48px;
+			12:   }`,
+			pos: 86,
+			start: { character: 86, column: 1, line: 10 },
+			end: { character: 98, column: 13, line: 10 }
+		}
+	]
+};
diff --git a/test/css/samples/unused-selector-child-combinator/expected.css b/test/css/samples/unused-selector-child-combinator/expected.css
new file mode 100644
index 0000000000..68b778844f
--- /dev/null
+++ b/test/css/samples/unused-selector-child-combinator/expected.css
@@ -0,0 +1 @@
+div.svelte-xyz>.svelte-xyz{color:orange}
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-child-combinator/input.svelte b/test/css/samples/unused-selector-child-combinator/input.svelte
new file mode 100644
index 0000000000..33a27e0465
--- /dev/null
+++ b/test/css/samples/unused-selector-child-combinator/input.svelte
@@ -0,0 +1,23 @@
+<style>	
+	article > * {
+		font-size: 36px;
+  }
+
+	article * {
+		font-size: 36px;
+	}
+	
+	.article > * {
+		font-size: 48px;
+	}
+	
+	div > * {
+		color: orange;
+	}
+</style>
+
+<div>
+	<p>
+		Svelte REPLs are svelte.
+	</p>
+</div>
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-leading/_config.js b/test/css/samples/unused-selector-leading/_config.js
new file mode 100644
index 0000000000..8d1c41af1c
--- /dev/null
+++ b/test/css/samples/unused-selector-leading/_config.js
@@ -0,0 +1,51 @@
+export default {
+	warnings: [
+		{
+			filename: 'SvelteComponent.svelte',
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector ".foo"',
+			start: {
+				line: 4,
+				column: 1,
+				character: 34
+			},
+			end: {
+				line: 4,
+				column: 5,
+				character: 38
+			},
+			pos: 34,
+			frame: `
+				2:
+				3: <style>
+				4:   .foo, .bar, .baz {
+				     ^
+				5:     color: red;
+				6:   }`
+		},
+
+		{
+			filename: 'SvelteComponent.svelte',
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector ".baz"',
+			start: {
+				line: 4,
+				column: 13,
+				character: 46
+			},
+			end: {
+				line: 4,
+				column: 17,
+				character: 50
+			},
+			pos: 46,
+			frame: `
+				2:
+				3: <style>
+				4:   .foo, .bar, .baz {
+				                 ^
+				5:     color: red;
+				6:   }`
+		}
+	]
+};
diff --git a/test/css/samples/unused-selector-leading/expected.css b/test/css/samples/unused-selector-leading/expected.css
new file mode 100644
index 0000000000..ff57dc09b9
--- /dev/null
+++ b/test/css/samples/unused-selector-leading/expected.css
@@ -0,0 +1 @@
+.bar.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-leading/expected.html b/test/css/samples/unused-selector-leading/expected.html
new file mode 100644
index 0000000000..3f3d680596
--- /dev/null
+++ b/test/css/samples/unused-selector-leading/expected.html
@@ -0,0 +1 @@
+<div class="bar svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-leading/input.svelte b/test/css/samples/unused-selector-leading/input.svelte
new file mode 100644
index 0000000000..7dd640eea6
--- /dev/null
+++ b/test/css/samples/unused-selector-leading/input.svelte
@@ -0,0 +1,7 @@
+<div class='bar'></div>
+
+<style>
+	.foo, .bar, .baz {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-string-concat/_config.js b/test/css/samples/unused-selector-string-concat/_config.js
new file mode 100644
index 0000000000..78fce87b69
--- /dev/null
+++ b/test/css/samples/unused-selector-string-concat/_config.js
@@ -0,0 +1,143 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector ".fooaa"',
+			frame:
+				` 9: <style>
+				10:   .foo {color: red;}
+				11:   .fooaa {color: red;}
+				      ^
+				12:   .foobb {color: red;}
+				13:   .foocc {color: red;}`,
+			start: { line: 11, column: 2, character: 206 },
+			end: { line: 11, column: 8, character: 212 },
+			pos: 206
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector ".foobb"',
+			frame:
+				`10:   .foo {color: red;}
+				11:   .fooaa {color: red;}
+				12:   .foobb {color: red;}
+				      ^
+				13:   .foocc {color: red;}
+				14:   .foodd {color: red;}`,
+			start: { line: 12, column: 2, character: 229 },
+			end: { line: 12, column: 8, character: 235 },
+			pos: 229
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector ".foodd"',
+			frame:
+				`12:   .foobb {color: red;}
+				13:   .foocc {color: red;}
+				14:   .foodd {color: red;}
+				      ^
+				15:   .aa {color: red;}
+				16:   .bb {color: red;}`,
+			start: { line: 14, column: 2, character: 275 },
+			end: { line: 14, column: 8, character: 281 },
+			pos: 275
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector ".bbbar"',
+			frame:
+				`18:   .dd {color: red;}
+				19:   .aabar {color: red;}
+				20:   .bbbar {color: red;}
+				      ^
+				21:   .ccbar {color: red;}
+				22:   .ddbar {color: red;}`,
+			start: { line: 20, column: 2, character: 401 },
+			end: { line: 20, column: 8, character: 407 },
+			pos: 401
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector ".ccbar"',
+			frame:
+				`19:   .aabar {color: red;}
+				20:   .bbbar {color: red;}
+				21:   .ccbar {color: red;}
+				      ^
+				22:   .ddbar {color: red;}
+				23:   .fooaabar {color: red;}`,
+			start: { line: 21, column: 2, character: 424 },
+			end: { line: 21, column: 8, character: 430 },
+			pos: 424
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector ".ddbar"',
+			frame:
+				`20:   .bbbar {color: red;}
+				21:   .ccbar {color: red;}
+				22:   .ddbar {color: red;}
+				      ^
+				23:   .fooaabar {color: red;}
+				24:   .foobbbar {color: red;}`,
+			start: { line: 22, column: 2, character: 447 },
+			end: { line: 22, column: 8, character: 453 },
+			pos: 447
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector ".fooaabar"',
+			frame:
+				`21:   .ccbar {color: red;}
+				22:   .ddbar {color: red;}
+				23:   .fooaabar {color: red;}
+				      ^
+				24:   .foobbbar {color: red;}
+				25:   .fooccbar {color: red;}`,
+			start: { line: 23, column: 2, character: 470 },
+			end: { line: 23, column: 11, character: 479 },
+			pos: 470
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector ".foobbbar"',
+			frame:
+				`22:   .ddbar {color: red;}
+				23:   .fooaabar {color: red;}
+				24:   .foobbbar {color: red;}
+				      ^
+				25:   .fooccbar {color: red;}
+				26:   .fooddbar {color: red;}`,
+			start: { line: 24, column: 2, character: 496 },
+			end: { line: 24, column: 11, character: 505 },
+			pos: 496
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector ".fooccbar"',
+			frame:
+				`23:   .fooaabar {color: red;}
+				24:   .foobbbar {color: red;}
+				25:   .fooccbar {color: red;}
+				      ^
+				26:   .fooddbar {color: red;}
+				27:   .baz {color: red;}`,
+			start: { line: 25, column: 2, character: 522 },
+			end: { line: 25, column: 11, character: 531 },
+			pos: 522
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector ".unused"',
+			frame:
+				`26:   .fooddbar {color: red;}
+				27:   .baz {color: red;}
+				28:   .unused {color: red;}
+				      ^
+				29: </style>`,
+			start: { line: 28, column: 2, character: 595 },
+			end: { line: 28, column: 9, character: 602 },
+			pos: 595
+		}
+	]
+};
diff --git a/test/css/samples/unused-selector-string-concat/expected.css b/test/css/samples/unused-selector-string-concat/expected.css
new file mode 100644
index 0000000000..756c2eecae
--- /dev/null
+++ b/test/css/samples/unused-selector-string-concat/expected.css
@@ -0,0 +1 @@
+.foo.svelte-xyz{color:red}.foocc.svelte-xyz{color:red}.aa.svelte-xyz{color:red}.bb.svelte-xyz{color:red}.cc.svelte-xyz{color:red}.dd.svelte-xyz{color:red}.aabar.svelte-xyz{color:red}.fooddbar.svelte-xyz{color:red}.baz.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-string-concat/input.svelte b/test/css/samples/unused-selector-string-concat/input.svelte
new file mode 100644
index 0000000000..0f69463e78
--- /dev/null
+++ b/test/css/samples/unused-selector-string-concat/input.svelte
@@ -0,0 +1,29 @@
+<script>
+  export let a, b, c;
+</script>
+
+<div class="foo{a ? ' aa' : b ? ' bb ' : c ? 'cc ' : 'dd'}bar baz {a ? ' aa' : b ? ' bb ' : c ? 'cc ' : 'dd'}">
+  some stuff
+</div>
+
+<style>
+  .foo {color: red;}
+  .fooaa {color: red;}
+  .foobb {color: red;}
+  .foocc {color: red;}
+  .foodd {color: red;}
+  .aa {color: red;}
+  .bb {color: red;}
+  .cc {color: red;}
+  .dd {color: red;}
+  .aabar {color: red;}
+  .bbbar {color: red;}
+  .ccbar {color: red;}
+  .ddbar {color: red;}
+  .fooaabar {color: red;}
+  .foobbbar {color: red;}
+  .fooccbar {color: red;}
+  .fooddbar {color: red;}
+  .baz {color: red;}
+  .unused {color: red;}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-ternary-bailed/_config.js b/test/css/samples/unused-selector-ternary-bailed/_config.js
new file mode 100644
index 0000000000..c81f1a9f82
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary-bailed/_config.js
@@ -0,0 +1,3 @@
+export default {
+	warnings: []
+};
diff --git a/test/css/samples/unused-selector-ternary-bailed/expected.css b/test/css/samples/unused-selector-ternary-bailed/expected.css
new file mode 100644
index 0000000000..042d33f3cc
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary-bailed/expected.css
@@ -0,0 +1 @@
+.thing.svelte-xyz{color:blue}.active.svelte-xyz{color:blue}.thing.active.svelte-xyz{color:blue}.hover.svelte-xyz{color:blue}.hover.unused.svelte-xyz{color:blue}.unused.svelte-xyz{color:blue}
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-ternary-bailed/input.svelte b/test/css/samples/unused-selector-ternary-bailed/input.svelte
new file mode 100644
index 0000000000..f9af44ec8b
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary-bailed/input.svelte
@@ -0,0 +1,18 @@
+<script>
+  export let active;
+  export let hover;
+</script>
+
+<div class="thing {active ? 'active' : hover}">
+  some stuff
+</div>
+
+<style>
+  .thing {color: blue;}
+  .active {color: blue;}
+  .thing.active {color: blue;}
+  .hover { color: blue; }
+  .hover.unused { color: blue; }
+
+  .unused {color: blue;}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-ternary-concat/_config.js b/test/css/samples/unused-selector-ternary-concat/_config.js
new file mode 100644
index 0000000000..c95b76e440
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary-concat/_config.js
@@ -0,0 +1,25 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			end: {
+				character: 205,
+				column: 9,
+				line: 14
+			},
+			frame: `
+				12:   .thing.active {color: blue;}
+				13:
+				14:   .unused {color: blue;}
+				      ^
+				15: </style>`,
+			message: 'Unused CSS selector ".unused"',
+			pos: 198,
+			start: {
+				character: 198,
+				column: 2,
+				line: 14
+			}
+		}
+	]
+};
diff --git a/test/css/samples/unused-selector-ternary-concat/expected.css b/test/css/samples/unused-selector-ternary-concat/expected.css
new file mode 100644
index 0000000000..8142a20e83
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary-concat/expected.css
@@ -0,0 +1 @@
+.thing.svelte-xyz{color:blue}.active.svelte-xyz{color:blue}.thing.active.svelte-xyz{color:blue}
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-ternary-concat/input.svelte b/test/css/samples/unused-selector-ternary-concat/input.svelte
new file mode 100644
index 0000000000..8db417c928
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary-concat/input.svelte
@@ -0,0 +1,15 @@
+<script>
+  export let active;
+</script>
+
+<div class="thing {active ? 'active' : ''}">
+  some stuff
+</div>
+
+<style>
+  .thing {color: blue;}
+  .active {color: blue;}
+  .thing.active {color: blue;}
+
+  .unused {color: blue;}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-ternary-nested/_config.js b/test/css/samples/unused-selector-ternary-nested/_config.js
new file mode 100644
index 0000000000..1898599950
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary-nested/_config.js
@@ -0,0 +1,31 @@
+export default {
+	warnings: [
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector ".hover.unused"',
+			frame: `
+				13:   .thing.active {color: blue;}
+				14:   .hover { color: blue; }
+				15:   .hover.unused { color: blue; }
+				      ^
+				16:
+				17:   .unused {color: blue;}`,
+			start: { line: 15, column: 2, character: 261 },
+			end: { line: 15, column: 15, character: 274 },
+			pos: 261
+		},
+		{
+			code: 'css-unused-selector',
+			message: 'Unused CSS selector ".unused"',
+			frame: `
+				15:   .hover.unused { color: blue; }
+				16:
+				17:   .unused {color: blue;}
+				      ^
+				18: </style>`,
+			start: { line: 17, column: 2, character: 295 },
+			end: { line: 17, column: 9, character: 302 },
+			pos: 295
+		}
+	]
+};
diff --git a/test/css/samples/unused-selector-ternary-nested/expected.css b/test/css/samples/unused-selector-ternary-nested/expected.css
new file mode 100644
index 0000000000..85a95ad23e
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary-nested/expected.css
@@ -0,0 +1 @@
+.thing.svelte-xyz{color:blue}.active.svelte-xyz{color:blue}.thing.active.svelte-xyz{color:blue}.hover.svelte-xyz{color:blue}
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-ternary-nested/input.svelte b/test/css/samples/unused-selector-ternary-nested/input.svelte
new file mode 100644
index 0000000000..a7a8f0e02a
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary-nested/input.svelte
@@ -0,0 +1,18 @@
+<script>
+  export let active;
+  export let hover;
+</script>
+
+<div class="thing {active ? 'active' : hover ? 'hover' : ''}">
+  some stuff
+</div>
+
+<style>
+  .thing {color: blue;}
+  .active {color: blue;}
+  .thing.active {color: blue;}
+  .hover { color: blue; }
+  .hover.unused { color: blue; }
+
+  .unused {color: blue;}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-ternary/_config.js b/test/css/samples/unused-selector-ternary/_config.js
new file mode 100644
index 0000000000..7009e60cc0
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary/_config.js
@@ -0,0 +1,29 @@
+export default {
+	props: {
+		active: true
+	},
+
+	warnings: [{
+		filename: 'SvelteComponent.svelte',
+		code: 'css-unused-selector',
+		message: 'Unused CSS selector ".maybeactive"',
+		start: {
+			line: 16,
+			column: 1,
+			character: 163
+		},
+		end: {
+			line: 16,
+			column: 13,
+			character: 175
+		},
+		pos: 163,
+		frame: `
+			14:   }
+			15:
+			16:   .maybeactive {
+			      ^
+			17:     color: green;
+			18:   }`
+	}]
+};
diff --git a/test/css/samples/unused-selector-ternary/expected.css b/test/css/samples/unused-selector-ternary/expected.css
new file mode 100644
index 0000000000..16fbddce58
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary/expected.css
@@ -0,0 +1 @@
+.active.svelte-xyz{color:red}.inactive.svelte-xyz{color:blue}
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-ternary/expected.html b/test/css/samples/unused-selector-ternary/expected.html
new file mode 100644
index 0000000000..02fc551836
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary/expected.html
@@ -0,0 +1 @@
+<div class="active svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/unused-selector-ternary/input.svelte b/test/css/samples/unused-selector-ternary/input.svelte
new file mode 100644
index 0000000000..f72592834f
--- /dev/null
+++ b/test/css/samples/unused-selector-ternary/input.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let active;
+</script>
+
+<div class='{active ? "active": "inactive"}'></div>
+
+<style>
+	.active {
+		color: red;
+	}
+
+	.inactive {
+		color: blue;
+	}
+
+	.maybeactive {
+		color: green;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/unused-selector/_config.js b/test/css/samples/unused-selector/_config.js
new file mode 100644
index 0000000000..ed1a2032ca
--- /dev/null
+++ b/test/css/samples/unused-selector/_config.js
@@ -0,0 +1,25 @@
+export default {
+	warnings: [{
+		filename: 'SvelteComponent.svelte',
+		code: 'css-unused-selector',
+		message: 'Unused CSS selector ".bar"',
+		start: {
+			line: 8,
+			column: 1,
+			character: 60
+		},
+		end: {
+			line: 8,
+			column: 5,
+			character: 64
+		},
+		pos: 60,
+		frame: `
+			 6:   }
+			 7:
+			 8:   .bar {
+			      ^
+			 9:     color: blue;
+			10:   }`
+	}]
+};
diff --git a/test/css/samples/unused-selector/expected.css b/test/css/samples/unused-selector/expected.css
new file mode 100644
index 0000000000..431f704106
--- /dev/null
+++ b/test/css/samples/unused-selector/expected.css
@@ -0,0 +1 @@
+.foo.svelte-xyz{color:red}
\ No newline at end of file
diff --git a/test/css/samples/unused-selector/expected.html b/test/css/samples/unused-selector/expected.html
new file mode 100644
index 0000000000..cfad41216e
--- /dev/null
+++ b/test/css/samples/unused-selector/expected.html
@@ -0,0 +1 @@
+<div class="foo svelte-xyz"></div>
\ No newline at end of file
diff --git a/test/css/samples/unused-selector/input.svelte b/test/css/samples/unused-selector/input.svelte
new file mode 100644
index 0000000000..1d62e3a675
--- /dev/null
+++ b/test/css/samples/unused-selector/input.svelte
@@ -0,0 +1,11 @@
+<div class='foo'></div>
+
+<style>
+	.foo {
+		color: red;
+	}
+
+	.bar {
+		color: blue;
+	}
+</style>
\ No newline at end of file
diff --git a/test/css/samples/weird-selectors/expected.css b/test/css/samples/weird-selectors/expected.css
new file mode 100644
index 0000000000..d4ead16751
--- /dev/null
+++ b/test/css/samples/weird-selectors/expected.css
@@ -0,0 +1 @@
+.-foo.svelte-xyz{color:red}[title='['].svelte-xyz{color:blue}
\ No newline at end of file
diff --git a/test/css/samples/weird-selectors/input.svelte b/test/css/samples/weird-selectors/input.svelte
new file mode 100644
index 0000000000..65db029bbd
--- /dev/null
+++ b/test/css/samples/weird-selectors/input.svelte
@@ -0,0 +1,12 @@
+<div class='-foo'>foo</div>
+
+<div title='['>bar</div>
+
+<style>
+	.-foo {
+		color: red;
+	}
+	[title='['] {
+		color: blue;
+	}
+</style>
diff --git a/test/custom-elements/assert.js b/test/custom-elements/assert.js
new file mode 100644
index 0000000000..4ee8d9dda0
--- /dev/null
+++ b/test/custom-elements/assert.js
@@ -0,0 +1,54 @@
+export function deepEqual(a, b, message) {
+	if (!is_equal(a, b)) {
+		throw new Error(message || `Expected ${JSON.stringify(a)} to equal ${JSON.stringify(b)}`);
+	}
+}
+
+function is_equal(a, b) {
+	if (a && typeof a === 'object') {
+		const is_array = Array.isArray(a);
+		if (Array.isArray(b) !== is_array) return false;
+
+		if (is_array) {
+			if (a.length !== b.length) return false;
+			return a.every((value, i) => is_equal(value, b[i]));
+		}
+
+		const a_keys = Object.keys(a).sort();
+		const b_keys = Object.keys(b).sort();
+		if (a_keys.join(',') !== b_keys.join(',')) return false;
+
+		return a_keys.every(key => is_equal(a[key], b[key]));
+	}
+
+	return a === b;
+}
+
+export function equal(a, b, message) {
+	if (a != b) throw new Error(message || `Expected ${a} to equal ${b}`);
+}
+
+export function ok(condition, message) {
+	if (!condition) throw new Error(message || `Expected ${condition} to be truthy`);
+}
+
+export function htmlEqual(actual, expected, message) {
+	return deepEqual(
+		normalizeHtml(window, actual),
+		normalizeHtml(window, expected),
+		message
+	);
+}
+
+function normalizeHtml(window, html) {
+	try {
+		const node = window.document.createElement('div');
+		node.innerHTML = html
+			.replace(/<!--.*?-->/g, '')
+			.replace(/>[\s\r\n]+</g, '><')
+			.trim();
+		return node.innerHTML.replace(/<\/?noscript\/?>/g, '');
+	} catch (err) {
+		throw new Error(`Failed to normalize HTML:\n${html}`);
+	}
+}
diff --git a/test/custom-elements/index.ts b/test/custom-elements/index.ts
new file mode 100644
index 0000000000..42b27eebd3
--- /dev/null
+++ b/test/custom-elements/index.ts
@@ -0,0 +1,137 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as http from 'http';
+import { rollup } from 'rollup';
+import virtual from '@rollup/plugin-virtual';
+import puppeteer from 'puppeteer';
+import { addLineNumbers, loadConfig, loadSvelte, retryAsync, executeBrowserTest } from '../helpers';
+import { deepEqual } from 'assert';
+
+const page = `
+<body>
+	<main></main>
+	<script src='/bundle.js'></script>
+</body>
+`;
+
+const assert = fs.readFileSync(`${__dirname}/assert.js`, 'utf-8');
+
+describe('custom-elements', function() {
+	// Note: Increase the timeout in preparation for restarting Chromium due to SIGSEGV.
+	this.timeout(10000);
+	let svelte;
+	let server;
+	let browser;
+	let code;
+
+	function create_server() {
+		return new Promise((fulfil, reject) => {
+			const server = http.createServer((req, res) => {
+				if (req.url === '/') {
+					res.end(page);
+				}
+
+				if (req.url === '/bundle.js') {
+					res.end(code);
+				}
+			});
+
+			server.on('error', reject);
+
+			server.listen('6789', () => {
+				fulfil(server);
+			});
+		});
+	}
+
+	async function launchPuppeteer() {
+		return await retryAsync(() => puppeteer.launch());
+	}
+
+	before(async () => {
+		svelte = loadSvelte();
+		console.log('[custom-element] Loaded Svelte');
+		server = await create_server();
+		console.log('[custom-element] Started server');
+		browser = await launchPuppeteer();
+		console.log('[custom-element] Launched puppeteer browser');
+	});
+
+	after(async () => {
+		if (server) server.close();
+		if (browser) await browser.close();
+	});
+
+	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
+		if (dir[0] === '.') return;
+
+		const solo = /\.solo$/.test(dir);
+		const skip = /\.skip$/.test(dir);
+		const internal = path.resolve('internal/index.mjs');
+		const index = path.resolve('index.mjs');
+		const warnings = [];
+
+		(solo ? it.only : skip ? it.skip : it)(dir, async () => {
+			const config = loadConfig(`${__dirname}/samples/${dir}/_config.js`);
+			const expected_warnings = config.warnings || [];
+
+			const bundle = await rollup({
+				input: `${__dirname}/samples/${dir}/test.js`,
+				plugins: [
+					{
+						resolveId(importee) {
+							if (importee === 'svelte/internal' || importee === './internal') {
+								return internal;
+							}
+
+							if (importee === 'svelte') {
+								return index;
+							}
+						},
+
+						transform(code, id) {
+							if (id.endsWith('.svelte')) {
+								const compiled = svelte.compile(code.replace(/\r/g, ''), {
+									customElement: true,
+									dev: config.dev
+								});
+
+								compiled.warnings.forEach(w => warnings.push(w));
+
+								return compiled.js;
+							}
+						}
+					},
+
+					virtual({
+						assert
+					})
+				]
+			});
+
+			const result = await bundle.generate({ format: 'iife', name: 'test' });
+			code = result.output[0].code;
+
+			function assertWarnings() {
+				if (expected_warnings) {
+					deepEqual(warnings.map(w => ({
+						code: w.code,
+						message: w.message,
+						pos: w.pos,
+						start: w.start,
+						end: w.end
+					})), expected_warnings);
+				}
+			}
+
+			browser = await executeBrowserTest(
+				browser,
+				launchPuppeteer,
+				assertWarnings,
+				() => {
+					console.log(addLineNumbers(code));
+					assertWarnings();
+				});
+		});
+	});
+});
diff --git a/test/custom-elements/samples/$$props/main.svelte b/test/custom-elements/samples/$$props/main.svelte
new file mode 100644
index 0000000000..68931e22db
--- /dev/null
+++ b/test/custom-elements/samples/$$props/main.svelte
@@ -0,0 +1,10 @@
+<svelte:options tag="custom-element"/>
+
+<script>
+	export let name;
+</script>
+
+<p>name: {name}</p>
+<p>$$props: {JSON.stringify($$props)}</p>
+<p>$$restProps: {JSON.stringify($$restProps)}</p>
+
diff --git a/test/custom-elements/samples/$$props/test.js b/test/custom-elements/samples/$$props/test.js
new file mode 100644
index 0000000000..94cad86577
--- /dev/null
+++ b/test/custom-elements/samples/$$props/test.js
@@ -0,0 +1,13 @@
+import * as assert from 'assert';
+import './main.svelte';
+
+export default function (target) {
+	target.innerHTML = '<custom-element name="world" answer="42" test="svelte"></custom-element>';
+	const el = target.querySelector('custom-element');
+
+	assert.htmlEqual(el.shadowRoot.innerHTML, `
+		<p>name: world</p>
+		<p>$$props: {"name":"world","answer":"42","test":"svelte"}</p>
+		<p>$$restProps: {"answer":"42","test":"svelte"}</p>
+	`);
+}
diff --git a/test/custom-elements/samples/$$slot/main.svelte b/test/custom-elements/samples/$$slot/main.svelte
new file mode 100644
index 0000000000..05e1ac3284
--- /dev/null
+++ b/test/custom-elements/samples/$$slot/main.svelte
@@ -0,0 +1,31 @@
+<script>
+	let data = '';
+
+	if ($$slots.b) {
+		data = 'foo';
+	}
+
+	export function getData() {
+		return data;
+	}
+
+	function toString(data) {
+		const result = {};
+		const sortedKeys = Object.keys(data).sort();
+		sortedKeys.forEach(key => result[key] = data[key]);
+		return JSON.stringify(result);
+	}
+</script>
+
+<svelte:options tag="custom-element"/>
+
+<slot></slot>
+<slot name="a"></slot>
+<p>$$slots: {toString($$slots)}</p>
+{#if $$slots.b}
+	<div>
+		<slot name="b"></slot>
+	</div>
+{:else}
+	<p>Slot b is not available</p>
+{/if}
\ No newline at end of file
diff --git a/test/custom-elements/samples/$$slot/test.js b/test/custom-elements/samples/$$slot/test.js
new file mode 100644
index 0000000000..567e93f509
--- /dev/null
+++ b/test/custom-elements/samples/$$slot/test.js
@@ -0,0 +1,28 @@
+import * as assert from 'assert';
+import './main.svelte';
+
+export default function (target) {
+	target.innerHTML = `
+		<custom-element><span slot="a">hello world</span><span>bye</span><span>world</span></custom-element>
+		<custom-element><span slot="a">hello world</span><span slot="b">hello world</span><span>bye world</span></custom-element>
+	`;
+
+	const [a, b] = target.querySelectorAll('custom-element');
+
+	assert.htmlEqual(a.shadowRoot.innerHTML, `
+		<slot></slot>
+		<slot name="a"></slot>
+		<p>$$slots: {"a":true,"default":true}</p>
+		<p>Slot b is not available</p>
+	`);
+
+	assert.htmlEqual(b.shadowRoot.innerHTML, `
+		<slot></slot>
+		<slot name="a"></slot>
+		<p>$$slots: {"a":true,"b":true,"default":true}</p>
+		<div><slot name="b"></slot></div>
+	`);
+
+	assert.equal(a.getData(), '');
+	assert.equal(b.getData(), 'foo');
+}
diff --git a/test/custom-elements/samples/custom-method/main.svelte b/test/custom-elements/samples/custom-method/main.svelte
new file mode 100644
index 0000000000..6a99cd7ed6
--- /dev/null
+++ b/test/custom-elements/samples/custom-method/main.svelte
@@ -0,0 +1,11 @@
+<svelte:options tag="custom-element"/>
+
+<script>
+	export function updateFoo(value) {
+		foo = value;
+	}
+
+	export let foo;
+</script>
+
+<p>{foo}</p>
diff --git a/test/custom-elements/samples/custom-method/test.js b/test/custom-elements/samples/custom-method/test.js
new file mode 100644
index 0000000000..08c58c3383
--- /dev/null
+++ b/test/custom-elements/samples/custom-method/test.js
@@ -0,0 +1,12 @@
+import * as assert from 'assert';
+import './main.svelte';
+
+export default async function (target) {
+	target.innerHTML = '<custom-element></custom-element>';
+	const el = target.querySelector('custom-element');
+
+	await el.updateFoo(42);
+
+	const p = el.shadowRoot.querySelector('p');
+	assert.equal(p.textContent, '42');
+}
diff --git a/test/custom-elements/samples/escaped-css/main.svelte b/test/custom-elements/samples/escaped-css/main.svelte
new file mode 100644
index 0000000000..c465165483
--- /dev/null
+++ b/test/custom-elements/samples/escaped-css/main.svelte
@@ -0,0 +1,9 @@
+<svelte:options tag="custom-element"/>
+
+<span class='icon'></span>
+
+<style>
+	.icon::before {
+		content: '\ff'
+	}
+</style>
diff --git a/test/custom-elements/samples/escaped-css/test.js b/test/custom-elements/samples/escaped-css/test.js
new file mode 100644
index 0000000000..6277ccba32
--- /dev/null
+++ b/test/custom-elements/samples/escaped-css/test.js
@@ -0,0 +1,13 @@
+import * as assert from 'assert';
+import CustomElement from './main.svelte';
+
+export default function (target) {
+	new CustomElement({
+		target
+	});
+
+	const icon = target.querySelector('custom-element').shadowRoot.querySelector('.icon');
+	const before = getComputedStyle(icon, '::before');
+
+	assert.equal(before.content, JSON.stringify(String.fromCharCode(0xff)));
+}
diff --git a/test/custom-elements/samples/extended-builtin/_config.js b/test/custom-elements/samples/extended-builtin/_config.js
new file mode 100644
index 0000000000..932460335f
--- /dev/null
+++ b/test/custom-elements/samples/extended-builtin/_config.js
@@ -0,0 +1,17 @@
+export default {
+	warnings: [{
+		code: 'avoid-is',
+		message: "The 'is' attribute is not supported cross-browser and should be avoided",
+		pos: 98,
+		start: {
+			character: 98,
+			column: 8,
+			line: 7
+		},
+		end: {
+			character: 116,
+			column: 26,
+			line: 7
+		}
+	}]
+};
diff --git a/test/custom-elements/samples/extended-builtin/custom-button.js b/test/custom-elements/samples/extended-builtin/custom-button.js
new file mode 100644
index 0000000000..19fe4aa0e7
--- /dev/null
+++ b/test/custom-elements/samples/extended-builtin/custom-button.js
@@ -0,0 +1,2 @@
+class CustomButton extends HTMLButtonElement {}
+customElements.define('custom-button', CustomButton, { extends: 'button' });
diff --git a/test/custom-elements/samples/extended-builtin/main.svelte b/test/custom-elements/samples/extended-builtin/main.svelte
new file mode 100644
index 0000000000..3f1b59db53
--- /dev/null
+++ b/test/custom-elements/samples/extended-builtin/main.svelte
@@ -0,0 +1,7 @@
+<svelte:options tag="custom-element"/>
+
+<script>
+	import './custom-button.js';
+</script>
+
+<button is="custom-button">click me</button>
\ No newline at end of file
diff --git a/test/custom-elements/samples/extended-builtin/test.js b/test/custom-elements/samples/extended-builtin/test.js
new file mode 100644
index 0000000000..a2f253e5d4
--- /dev/null
+++ b/test/custom-elements/samples/extended-builtin/test.js
@@ -0,0 +1,15 @@
+import * as assert from 'assert';
+import CustomElement from './main.svelte';
+
+export default function (target) {
+	new CustomElement({
+		target
+	});
+
+	assert.equal(target.innerHTML, '<custom-element></custom-element>');
+
+	const el = target.querySelector('custom-element');
+	const button = el.shadowRoot.querySelector('button');
+
+	assert.ok(button instanceof customElements.get('custom-button'));
+}
diff --git a/test/custom-elements/samples/html-slots/main.svelte b/test/custom-elements/samples/html-slots/main.svelte
new file mode 100644
index 0000000000..91f1fb800e
--- /dev/null
+++ b/test/custom-elements/samples/html-slots/main.svelte
@@ -0,0 +1,11 @@
+<svelte:options tag="custom-element"/>
+
+<div>
+	<slot>
+		<p>default fallback content</p>
+	</slot>
+
+	<slot name='foo'>
+		<p>foo fallback content</p>
+	</slot>
+</div>
diff --git a/test/custom-elements/samples/html-slots/test.js b/test/custom-elements/samples/html-slots/test.js
new file mode 100644
index 0000000000..06d18d9944
--- /dev/null
+++ b/test/custom-elements/samples/html-slots/test.js
@@ -0,0 +1,17 @@
+import * as assert from 'assert';
+import './main.svelte';
+
+export default function (target) {
+	target.innerHTML = `
+		<custom-element>
+			<strong>slotted</strong>
+		</custom-element>`;
+
+	const el = target.querySelector('custom-element');
+
+	const div = el.shadowRoot.children[0];
+	const [slot0, slot1] = div.children;
+
+	assert.equal(slot0.assignedNodes()[1], target.querySelector('strong'));
+	assert.equal(slot1.assignedNodes().length, 0);
+}
diff --git a/test/custom-elements/samples/html/main.svelte b/test/custom-elements/samples/html/main.svelte
new file mode 100644
index 0000000000..0931535a18
--- /dev/null
+++ b/test/custom-elements/samples/html/main.svelte
@@ -0,0 +1,7 @@
+<svelte:options tag="custom-element"/>
+
+<script>
+	export let name;
+</script>
+
+<h1>Hello {name}!</h1>
diff --git a/test/custom-elements/samples/html/test.js b/test/custom-elements/samples/html/test.js
new file mode 100644
index 0000000000..4e38fd6c2d
--- /dev/null
+++ b/test/custom-elements/samples/html/test.js
@@ -0,0 +1,12 @@
+import * as assert from 'assert';
+import './main.svelte';
+
+export default function (target) {
+	target.innerHTML = '<custom-element name="world"></custom-element>';
+	const el = target.querySelector('custom-element');
+
+	assert.equal(el.name, 'world');
+
+	const h1 = el.shadowRoot.querySelector('h1');
+	assert.equal(h1.textContent, 'Hello world!');
+}
diff --git a/test/custom-elements/samples/nested.skip/Counter.svelte b/test/custom-elements/samples/nested.skip/Counter.svelte
new file mode 100644
index 0000000000..87cde48466
--- /dev/null
+++ b/test/custom-elements/samples/nested.skip/Counter.svelte
@@ -0,0 +1,7 @@
+<svelte:options tag="my-counter"/>
+
+<script>
+	export let count = 0;
+</script>
+
+<button on:click='{() => count += 1}'>count: {count}</button>
diff --git a/test/custom-elements/samples/nested.skip/main.svelte b/test/custom-elements/samples/nested.skip/main.svelte
new file mode 100644
index 0000000000..cb26008061
--- /dev/null
+++ b/test/custom-elements/samples/nested.skip/main.svelte
@@ -0,0 +1,10 @@
+<svelte:options tag="my-app"/>
+
+<script>
+	import Counter from './Counter.svelte';
+
+	export let count;
+</script>
+
+<Counter bind:count/>
+<p>clicked {count} times</p>
diff --git a/test/custom-elements/samples/nested.skip/test.js b/test/custom-elements/samples/nested.skip/test.js
new file mode 100644
index 0000000000..09edc38f54
--- /dev/null
+++ b/test/custom-elements/samples/nested.skip/test.js
@@ -0,0 +1,17 @@
+import * as assert from 'assert';
+import './main.svelte';
+
+export default async function (target) {
+	target.innerHTML = '<my-app/>';
+	const el = target.querySelector('my-app');
+	const counter = el.shadowRoot.querySelector('my-counter');
+	const button = counter.shadowRoot.querySelector('button');
+
+	assert.equal(counter.count, 0);
+	assert.equal(counter.shadowRoot.innerHTML, '<button>count: 0</button>');
+
+	await button.dispatchEvent(new MouseEvent('click'));
+
+	assert.equal(counter.count, 1);
+	assert.equal(counter.shadowRoot.innerHTML, '<button>count: 1</button>');
+}
diff --git a/test/custom-elements/samples/new-styled/main.svelte b/test/custom-elements/samples/new-styled/main.svelte
new file mode 100644
index 0000000000..e69c6e05b1
--- /dev/null
+++ b/test/custom-elements/samples/new-styled/main.svelte
@@ -0,0 +1,9 @@
+<svelte:options tag="custom-element"/>
+
+<p>styled</p>
+
+<style>
+	p {
+		color: red;
+	}
+</style>
diff --git a/test/custom-elements/samples/new-styled/test.js b/test/custom-elements/samples/new-styled/test.js
new file mode 100644
index 0000000000..72c2cecd10
--- /dev/null
+++ b/test/custom-elements/samples/new-styled/test.js
@@ -0,0 +1,19 @@
+import * as assert from 'assert';
+import CustomElement from './main.svelte';
+
+export default function (target) {
+	target.innerHTML = '<p>unstyled</p>';
+
+	new CustomElement({
+		target
+	});
+
+	const unstyled = target.querySelector('p');
+	const styled = target.querySelector('custom-element').shadowRoot.querySelector('p');
+
+	assert.equal(unstyled.textContent, 'unstyled');
+	assert.equal(styled.textContent, 'styled');
+
+	assert.equal(getComputedStyle(unstyled).color, 'rgb(0, 0, 0)');
+	assert.equal(getComputedStyle(styled).color, 'rgb(255, 0, 0)');
+}
diff --git a/test/custom-elements/samples/new/main.svelte b/test/custom-elements/samples/new/main.svelte
new file mode 100644
index 0000000000..0931535a18
--- /dev/null
+++ b/test/custom-elements/samples/new/main.svelte
@@ -0,0 +1,7 @@
+<svelte:options tag="custom-element"/>
+
+<script>
+	export let name;
+</script>
+
+<h1>Hello {name}!</h1>
diff --git a/test/custom-elements/samples/new/test.js b/test/custom-elements/samples/new/test.js
new file mode 100644
index 0000000000..88ba69ab69
--- /dev/null
+++ b/test/custom-elements/samples/new/test.js
@@ -0,0 +1,18 @@
+import * as assert from 'assert';
+import CustomElement from './main.svelte';
+
+export default function (target) {
+	new CustomElement({
+		target,
+		props: {
+			name: 'world'
+		}
+	});
+
+	assert.equal(target.innerHTML, '<custom-element></custom-element>');
+
+	const el = target.querySelector('custom-element');
+	const h1 = el.shadowRoot.querySelector('h1');
+
+	assert.equal(h1.textContent, 'Hello world!');
+}
diff --git a/test/custom-elements/samples/no-missing-prop-warnings/_config.js b/test/custom-elements/samples/no-missing-prop-warnings/_config.js
new file mode 100644
index 0000000000..083edcd210
--- /dev/null
+++ b/test/custom-elements/samples/no-missing-prop-warnings/_config.js
@@ -0,0 +1,3 @@
+export default {
+	dev: true
+};
diff --git a/test/custom-elements/samples/no-missing-prop-warnings/main.svelte b/test/custom-elements/samples/no-missing-prop-warnings/main.svelte
new file mode 100644
index 0000000000..3ea205e3f3
--- /dev/null
+++ b/test/custom-elements/samples/no-missing-prop-warnings/main.svelte
@@ -0,0 +1,9 @@
+<svelte:options tag="my-app"/>
+
+<script>
+	export let foo;
+	export let bar;
+</script>
+
+<p>foo: {foo}</p>
+<p>bar: {bar}</p>
diff --git a/test/custom-elements/samples/no-missing-prop-warnings/test.js b/test/custom-elements/samples/no-missing-prop-warnings/test.js
new file mode 100644
index 0000000000..6f15b63920
--- /dev/null
+++ b/test/custom-elements/samples/no-missing-prop-warnings/test.js
@@ -0,0 +1,19 @@
+import * as assert from 'assert';
+import './main.svelte';
+
+export default function (target) {
+	const warnings = [];
+	const warn = console.warn;
+
+	console.warn = warning => {
+		warnings.push(warning);
+	};
+
+	target.innerHTML = '<my-app foo=yes />';
+
+	assert.deepEqual(warnings, [
+		"<my-app> was created without expected prop 'bar'"
+	]);
+
+	console.warn = warn;
+}
diff --git a/test/custom-elements/samples/no-svelte-options/_config.js b/test/custom-elements/samples/no-svelte-options/_config.js
new file mode 100644
index 0000000000..98273f767f
--- /dev/null
+++ b/test/custom-elements/samples/no-svelte-options/_config.js
@@ -0,0 +1,17 @@
+export default {
+	warnings: [{
+		code: 'custom-element-no-tag',
+		message: "No custom element 'tag' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. <svelte:options tag=\"my-thing\"/>. To hide this warning, use <svelte:options tag={null}/>",
+		pos: 0,
+		start: {
+			character: 0,
+			column: 0,
+			line: 1
+		},
+		end: {
+			character: 0,
+			column: 0,
+			line: 1
+		}
+	}]
+};
diff --git a/test/custom-elements/samples/no-svelte-options/main.svelte b/test/custom-elements/samples/no-svelte-options/main.svelte
new file mode 100644
index 0000000000..538dc970e9
--- /dev/null
+++ b/test/custom-elements/samples/no-svelte-options/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let name;
+</script>
+
+<h1>Hello {name}!</h1>
diff --git a/test/custom-elements/samples/no-svelte-options/test.js b/test/custom-elements/samples/no-svelte-options/test.js
new file mode 100644
index 0000000000..e6ce82d1a4
--- /dev/null
+++ b/test/custom-elements/samples/no-svelte-options/test.js
@@ -0,0 +1,12 @@
+import * as assert from 'assert';
+import CustomElement from './main.svelte';
+
+export default function (target) {
+	customElements.define('no-tag', CustomElement);
+	target.innerHTML = '<no-tag name="world"></no-tag>';
+
+	const el = target.querySelector('no-tag');
+	const h1 = el.shadowRoot.querySelector('h1');
+
+	assert.equal(h1.textContent, 'Hello world!');
+}
diff --git a/test/custom-elements/samples/no-tag-warning/_config.js b/test/custom-elements/samples/no-tag-warning/_config.js
new file mode 100644
index 0000000000..fb476a7b5b
--- /dev/null
+++ b/test/custom-elements/samples/no-tag-warning/_config.js
@@ -0,0 +1,17 @@
+export default {
+	warnings: [{
+		code: 'custom-element-no-tag',
+		message: "No custom element 'tag' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. <svelte:options tag=\"my-thing\"/>. To hide this warning, use <svelte:options tag={null}/>",
+		pos: 0,
+		start: {
+			character: 0,
+			column: 0,
+			line: 1
+		},
+		end: {
+			character: 18,
+			column: 18,
+			line: 1
+		}
+	}]
+};
diff --git a/test/custom-elements/samples/no-tag-warning/main.svelte b/test/custom-elements/samples/no-tag-warning/main.svelte
new file mode 100644
index 0000000000..4f7cdc52ca
--- /dev/null
+++ b/test/custom-elements/samples/no-tag-warning/main.svelte
@@ -0,0 +1,7 @@
+<svelte:options />
+
+<script>
+	export let name;
+</script>
+
+<h1>Hello {name}!</h1>
diff --git a/test/custom-elements/samples/no-tag-warning/test.js b/test/custom-elements/samples/no-tag-warning/test.js
new file mode 100644
index 0000000000..e6ce82d1a4
--- /dev/null
+++ b/test/custom-elements/samples/no-tag-warning/test.js
@@ -0,0 +1,12 @@
+import * as assert from 'assert';
+import CustomElement from './main.svelte';
+
+export default function (target) {
+	customElements.define('no-tag', CustomElement);
+	target.innerHTML = '<no-tag name="world"></no-tag>';
+
+	const el = target.querySelector('no-tag');
+	const h1 = el.shadowRoot.querySelector('h1');
+
+	assert.equal(h1.textContent, 'Hello world!');
+}
diff --git a/test/custom-elements/samples/no-tag/_config.js b/test/custom-elements/samples/no-tag/_config.js
new file mode 100644
index 0000000000..c81f1a9f82
--- /dev/null
+++ b/test/custom-elements/samples/no-tag/_config.js
@@ -0,0 +1,3 @@
+export default {
+	warnings: []
+};
diff --git a/test/custom-elements/samples/no-tag/main.svelte b/test/custom-elements/samples/no-tag/main.svelte
new file mode 100644
index 0000000000..031bd93694
--- /dev/null
+++ b/test/custom-elements/samples/no-tag/main.svelte
@@ -0,0 +1,7 @@
+<svelte:options tag={null} />
+
+<script>
+	export let name;
+</script>
+
+<h1>Hello {name}!</h1>
diff --git a/test/custom-elements/samples/no-tag/test.js b/test/custom-elements/samples/no-tag/test.js
new file mode 100644
index 0000000000..e6ce82d1a4
--- /dev/null
+++ b/test/custom-elements/samples/no-tag/test.js
@@ -0,0 +1,12 @@
+import * as assert from 'assert';
+import CustomElement from './main.svelte';
+
+export default function (target) {
+	customElements.define('no-tag', CustomElement);
+	target.innerHTML = '<no-tag name="world"></no-tag>';
+
+	const el = target.querySelector('no-tag');
+	const h1 = el.shadowRoot.querySelector('h1');
+
+	assert.equal(h1.textContent, 'Hello world!');
+}
diff --git a/test/custom-elements/samples/oncreate/main.svelte b/test/custom-elements/samples/oncreate/main.svelte
new file mode 100644
index 0000000000..23819e660f
--- /dev/null
+++ b/test/custom-elements/samples/oncreate/main.svelte
@@ -0,0 +1,14 @@
+<svelte:options tag="my-app"/>
+
+<script>
+	import { onMount } from 'svelte';
+
+  export let prop = false;
+  export let propsInitialized;
+  export let wasCreated;
+
+  onMount(() => {
+    propsInitialized = prop !== false;
+    wasCreated = true;
+  });
+</script>
diff --git a/test/custom-elements/samples/oncreate/test.js b/test/custom-elements/samples/oncreate/test.js
new file mode 100644
index 0000000000..f451979976
--- /dev/null
+++ b/test/custom-elements/samples/oncreate/test.js
@@ -0,0 +1,10 @@
+import * as assert from 'assert';
+import './main.svelte';
+
+export default function (target) {
+	target.innerHTML = '<my-app prop/>';
+	const el = target.querySelector('my-app');
+
+	assert.ok(el.wasCreated);
+	assert.ok(el.propsInitialized);
+}
diff --git a/test/custom-elements/samples/ondestroy/main.svelte b/test/custom-elements/samples/ondestroy/main.svelte
new file mode 100644
index 0000000000..aa945ca602
--- /dev/null
+++ b/test/custom-elements/samples/ondestroy/main.svelte
@@ -0,0 +1,22 @@
+<svelte:options tag="my-app"/>
+
+<script>
+	import { onMount, onDestroy } from 'svelte';
+	
+	let el;
+	let parentEl;
+
+	onMount(() => {
+		parentEl = el.parentNode.host.parentElement;
+
+		return () => {
+			parentEl.dataset.onMountDestroyed = true;
+		}
+	});
+
+	onDestroy(() => {
+		parentEl.dataset.destroyed = true;
+	})
+</script>
+
+<div bind:this={el}></div>
diff --git a/test/custom-elements/samples/ondestroy/test.js b/test/custom-elements/samples/ondestroy/test.js
new file mode 100644
index 0000000000..61375bfa96
--- /dev/null
+++ b/test/custom-elements/samples/ondestroy/test.js
@@ -0,0 +1,11 @@
+import * as assert from 'assert';
+import './main.svelte';
+
+export default function (target) {
+	target.innerHTML = '<my-app/>';
+	const el = target.querySelector('my-app');
+	target.removeChild(el);
+
+	assert.ok(target.dataset.onMountDestroyed);
+	assert.equal(target.dataset.destroyed, undefined);
+}
diff --git a/test/custom-elements/samples/props/main.svelte b/test/custom-elements/samples/props/main.svelte
new file mode 100644
index 0000000000..cf47b436b5
--- /dev/null
+++ b/test/custom-elements/samples/props/main.svelte
@@ -0,0 +1,10 @@
+<svelte:options tag="custom-element"/>
+
+<script>
+	import './my-widget.svelte';
+
+	export let items = ['a', 'b', 'c'];
+	export let flagged = false;
+</script>
+
+<my-widget class="foo" {items} flag1={flagged} flag2 />
diff --git a/test/custom-elements/samples/props/my-widget.svelte b/test/custom-elements/samples/props/my-widget.svelte
new file mode 100644
index 0000000000..970acf84b2
--- /dev/null
+++ b/test/custom-elements/samples/props/my-widget.svelte
@@ -0,0 +1,12 @@
+<svelte:options tag="my-widget"/>
+
+<script>
+	export let items = [];
+	export let flag1 = false;
+	export let flag2 = false;
+</script>
+
+<p>{items.length} items</p>
+<p>{items.join(', ')}</p>
+<p>{flag1 ? 'flagged (dynamic attribute)' : 'not flagged'}</p>
+<p>{flag2 ? 'flagged (static attribute)' : 'not flagged'}</p>
diff --git a/test/custom-elements/samples/props/test.js b/test/custom-elements/samples/props/test.js
new file mode 100644
index 0000000000..41ca77d29d
--- /dev/null
+++ b/test/custom-elements/samples/props/test.js
@@ -0,0 +1,27 @@
+import * as assert from 'assert';
+import CustomElement from './main.svelte';
+
+export default function (target) {
+	new CustomElement({
+		target
+	});
+
+	assert.equal(target.innerHTML, '<custom-element></custom-element>');
+
+	const el = target.querySelector('custom-element');
+	const widget = el.shadowRoot.querySelector('my-widget');
+
+	const [p1, p2, p3, p4] = widget.shadowRoot.querySelectorAll('p');
+
+	assert.equal(p1.textContent, '3 items');
+	assert.equal(p2.textContent, 'a, b, c');
+	assert.equal(p3.textContent, 'not flagged');
+	assert.equal(p4.textContent, 'flagged (static attribute)');
+
+	el.items = ['d', 'e', 'f', 'g', 'h'];
+	el.flagged = true;
+
+	assert.equal(p1.textContent, '5 items');
+	assert.equal(p2.textContent, 'd, e, f, g, h');
+	assert.equal(p3.textContent, 'flagged (dynamic attribute)');
+}
diff --git a/test/helpers.ts b/test/helpers.ts
new file mode 100644
index 0000000000..1ea0b19880
--- /dev/null
+++ b/test/helpers.ts
@@ -0,0 +1,328 @@
+import * as assert$1 from 'assert';
+import * as jsdom from 'jsdom';
+import glob from 'tiny-glob/sync';
+import * as path from 'path';
+import * as fs from 'fs';
+import * as colors from 'kleur';
+export const assert = (assert$1 as unknown) as typeof assert$1 & { htmlEqual: (actual, expected, message?) => void, htmlEqualWithComments: (actual, expected, message?) => void };
+
+// for coverage purposes, we need to test source files,
+// but for sanity purposes, we need to test dist files
+export function loadSvelte(test: boolean = false) {
+	process.env.TEST = test ? 'true' : '';
+
+	const resolved = require.resolve('../compiler.js');
+
+	delete require.cache[resolved];
+	return require(resolved);
+}
+
+export const svelte = loadSvelte();
+
+export function exists(path) {
+	try {
+		fs.statSync(path);
+		return true;
+	} catch (err) {
+		return false;
+	}
+}
+
+export function tryToLoadJson(file) {
+	try {
+		return JSON.parse(fs.readFileSync(file, 'utf-8'));
+	} catch (err) {
+		if (err.code !== 'ENOENT') throw err;
+		return null;
+	}
+}
+
+export function tryToReadFile(file) {
+	try {
+		return fs.readFileSync(file, 'utf-8');
+	} catch (err) {
+		if (err.code !== 'ENOENT') throw err;
+		return null;
+	}
+}
+
+export function cleanRequireCache() {
+	Object.keys(require.cache)
+		.filter(x => x.endsWith('.svelte'))
+		.forEach(file => delete require.cache[file]);
+}
+
+const virtualConsole = new jsdom.VirtualConsole();
+virtualConsole.sendTo(console);
+
+const window = new jsdom.JSDOM('<main></main>', { virtualConsole }).window;
+global.document = window.document;
+global.navigator = window.navigator;
+global.getComputedStyle = window.getComputedStyle;
+global.requestAnimationFrame = null; // placeholder, filled in using set_raf
+global.window = window;
+
+// add missing ecmascript globals to window
+for (const key of Object.getOwnPropertyNames(global)) {
+	if (!(key in window)) window[key] = global[key];
+}
+
+// implement mock scroll
+window.scrollTo = function(pageXOffset, pageYOffset) {
+	window.pageXOffset = pageXOffset;
+	window.pageYOffset = pageYOffset;
+};
+
+export function env() {
+	window.document.title = '';
+	window.document.head.innerHTML = '';
+	window.document.body.innerHTML = '<main></main>';
+
+	return window;
+}
+
+function cleanChildren(node) {
+	let previous = null;
+
+	// sort attributes
+	const attributes = Array.from(node.attributes).sort((a, b) => {
+		return a.name < b.name ? -1 : 1;
+	});
+
+	attributes.forEach(attr => {
+		node.removeAttribute(attr.name);
+	});
+
+	attributes.forEach(attr => {
+		node.setAttribute(attr.name, attr.value);
+	});
+
+	// recurse
+	[...node.childNodes].forEach(child => {
+		if (child.nodeType === 3) {
+			// text
+			if (
+				node.namespaceURI === 'http://www.w3.org/2000/svg' &&
+				node.tagName !== 'text' &&
+				node.tagName !== 'tspan'
+			) {
+				node.removeChild(child);
+			}
+
+			child.data = child.data.replace(/\s+/g, '\n');
+
+			if (previous && previous.nodeType === 3) {
+				previous.data += child.data;
+				previous.data = previous.data.replace(/\s+/g, '\n');
+
+				node.removeChild(child);
+				child = previous;
+			}
+		} else if (child.nodeType === 8) {
+			// comment
+			// do nothing
+		} else {
+			cleanChildren(child);
+		}
+
+		previous = child;
+	});
+
+	// collapse whitespace
+	if (node.firstChild && node.firstChild.nodeType === 3) {
+		node.firstChild.data = node.firstChild.data.replace(/^\s+/, '');
+		if (!node.firstChild.data) node.removeChild(node.firstChild);
+	}
+
+	if (node.lastChild && node.lastChild.nodeType === 3) {
+		node.lastChild.data = node.lastChild.data.replace(/\s+$/, '');
+		if (!node.lastChild.data) node.removeChild(node.lastChild);
+	}
+}
+
+export function normalizeHtml(window, html, preserveComments = false) {
+	try {
+		const node = window.document.createElement('div');
+		node.innerHTML = html
+			.replace(/(<!--.*?-->)/g, preserveComments ? '$1' : '')
+			.replace(/>[\s\r\n]+</g, '><')
+			.trim();
+		cleanChildren(node);
+		return node.innerHTML.replace(/<\/?noscript\/?>/g, '');
+	} catch (err) {
+		throw new Error(`Failed to normalize HTML:\n${html}`);
+	}
+}
+
+export function setupHtmlEqual() {
+	const window = env();
+
+	// eslint-disable-next-line no-import-assign
+	assert.htmlEqual = (actual, expected, message) => {
+		assert.deepEqual(
+			normalizeHtml(window, actual),
+			normalizeHtml(window, expected),
+			message
+		);
+	};
+	// eslint-disable-next-line no-import-assign
+	assert.htmlEqualWithComments = (actual, expected, message) => {
+		assert.deepEqual(
+			normalizeHtml(window, actual, true),
+			normalizeHtml(window, expected, true),
+			message
+		);
+	};
+}
+
+export function loadConfig(file) {
+	try {
+		const resolved = require.resolve(file);
+		delete require.cache[resolved];
+
+		const config = require(resolved);
+		return config.default || config;
+	} catch (err) {
+		if (err.code === 'MODULE_NOT_FOUND') {
+			return {};
+		}
+
+		throw err;
+	}
+}
+
+export function addLineNumbers(code) {
+	return code
+		.split('\n')
+		.map((line, i) => {
+			i = String(i + 1);
+			while (i.length < 3) i = ` ${i}`;
+
+			return (
+				colors.gray(`  ${i}: `) +
+				line.replace(/^\t+/, match => match.split('\t').join('    '))
+			);
+		})
+		.join('\n');
+}
+
+export function showOutput(cwd, options = {}, compile = svelte.compile) {
+	glob('**/*.svelte', { cwd }).forEach(file => {
+		if (file[0] === '_') return;
+
+		try {
+			const { js } = compile(
+				fs.readFileSync(`${cwd}/${file}`, 'utf-8'),
+				Object.assign(options, {
+					filename: file
+				})
+			);
+
+			console.log( // eslint-disable-line no-console
+				`\n>> ${colors.cyan().bold(file)}\n${addLineNumbers(js.code)}\n<< ${colors.cyan().bold(file)}`
+			);
+		} catch (err) {
+			console.log(`failed to generate output: ${err.message}`);
+		}
+	});
+}
+
+export function shouldUpdateExpected() {
+	return process.argv.includes('--update');
+}
+
+export function spaces(i) {
+	let result = '';
+	while (i--) result += ' ';
+	return result;
+}
+
+// fake timers
+const original_set_timeout = global.setTimeout;
+
+export function useFakeTimers() {
+	const callbacks = [];
+
+	global.setTimeout = function(fn) {
+		callbacks.push(fn);
+	};
+
+	return {
+		flush() {
+			callbacks.forEach(fn => fn());
+			callbacks.splice(0, callbacks.length);
+		},
+		removeFakeTimers() {
+			callbacks.splice(0, callbacks.length);
+			global.setTimeout = original_set_timeout;
+		}
+	};
+}
+
+export function mkdirp(dir) {
+	const parent = path.dirname(dir);
+	if (parent === dir) return;
+
+	mkdirp(parent);
+
+	try {
+		fs.mkdirSync(dir);
+	} catch (err) {
+		// do nothing
+	}
+}
+
+export function prettyPrintPuppeteerAssertionError(message) {
+	const match = /Error: Expected "(.+)" to equal "(.+)"/.exec(message);
+
+	if (match) {
+		assert.equal(match[1], match[2]);
+	}
+}
+
+export async function retryAsync<T>(fn: () => Promise<T>, maxAttempts: number = 3, interval: number = 1000): Promise<T> {
+	let attempts = 0;
+	while (attempts <= maxAttempts) {
+		try {
+			return await fn();
+		} catch (err) {
+			if (++attempts >= maxAttempts) throw err;
+			await new Promise(resolve => setTimeout(resolve, interval));
+		}
+	}
+}
+
+// NOTE: Chromium may exit with SIGSEGV, so retry in that case
+export async function executeBrowserTest<T>(browser, launchPuppeteer: () => Promise<T>, additionalAssertion: () => void, onError: (err: Error) => void) {
+	let count = 0;
+	do {
+		count++;
+		try {
+			const page = await browser.newPage();
+
+			page.on('console', (type) => {
+				console[type._type](type._text);
+			});
+
+			page.on('error', error => {
+				console.log('>>> an error happened');
+				console.error(error);
+			});
+			await page.goto('http://localhost:6789');
+			const result = await page.evaluate(() => test(document.querySelector('main')));
+			if (result) console.log(result);
+			additionalAssertion();
+			await page.close();
+			break;
+		} catch (err) {
+			if (count === 5 || browser.isConnected()) {
+				onError(err);
+				throw err;
+			}
+			console.debug(err.stack || err);
+			console.log('RESTARTING Chromium...');
+			browser = await launchPuppeteer();
+		}
+	} while (count <= 5);
+	return browser;
+}
diff --git a/test/hydration/index.ts b/test/hydration/index.ts
new file mode 100644
index 0000000000..f3e2c9ea0a
--- /dev/null
+++ b/test/hydration/index.ts
@@ -0,0 +1,133 @@
+import * as path from 'path';
+import * as fs from 'fs';
+
+import {
+	assert,
+	showOutput,
+	loadConfig,
+	loadSvelte,
+	env,
+	setupHtmlEqual,
+	shouldUpdateExpected
+} from '../helpers';
+
+let compileOptions = null;
+
+const sveltePath = process.cwd();
+
+describe('hydration', () => {
+	before(() => {
+		const svelte = loadSvelte();
+
+		require.extensions['.svelte'] = function(module, filename) {
+			const options = Object.assign(
+				{
+					filename,
+					hydratable: true,
+					format: 'cjs',
+					sveltePath
+				},
+				compileOptions
+			);
+
+			const { js } = svelte.compile(fs.readFileSync(filename, 'utf-8'), options);
+
+			return module._compile(js.code, filename);
+		};
+
+		return setupHtmlEqual();
+	});
+
+	function runTest(dir) {
+		if (dir[0] === '.') return;
+
+		const config = loadConfig(`./hydration/samples/${dir}/_config.js`);
+		const solo = config.solo || /\.solo/.test(dir);
+
+		if (solo && process.env.CI) {
+			throw new Error('Forgot to remove `solo: true` from test');
+		}
+
+		(config.skip ? it.skip : solo ? it.only : it)(dir, () => {
+			const cwd = path.resolve(`${__dirname}/samples/${dir}`);
+
+			compileOptions = config.compileOptions || {};
+			compileOptions.accessors = 'accessors' in config ? config.accessors : true;
+
+			const window = env();
+
+			try {
+				global.window = window;
+
+				const SvelteComponent = require(`${cwd}/main.svelte`).default;
+
+				const target = window.document.body;
+				const head = window.document.head;
+
+				target.innerHTML = fs.readFileSync(`${cwd}/_before.html`, 'utf-8');
+
+				let before_head;
+				try {
+					before_head = fs.readFileSync(`${cwd}/_before_head.html`, 'utf-8');
+					head.innerHTML = before_head;
+				} catch (err) {
+					// continue regardless of error
+				}
+
+				const snapshot = config.snapshot ? config.snapshot(target) : {};
+
+				const component = new SvelteComponent({
+					target,
+					hydrate: true,
+					props: config.props
+				});
+
+				try {
+					assert.htmlEqual(target.innerHTML, fs.readFileSync(`${cwd}/_after.html`, 'utf-8'));
+				} catch (error) {
+					if (shouldUpdateExpected()) {
+						fs.writeFileSync(`${cwd}/_after.html`, target.innerHTML);
+						console.log(`Updated ${cwd}/_after.html.`);
+					} else {
+						throw error;
+					}
+				}
+
+				if (before_head) {
+					try {
+						assert.htmlEqual(head.innerHTML, fs.readFileSync(`${cwd}/_after_head.html`, 'utf-8'));
+					} catch (error) {
+						if (shouldUpdateExpected()) {
+							fs.writeFileSync(`${cwd}/_after_head.html`, head.innerHTML);
+							console.log(`Updated ${cwd}/_after_head.html.`);
+						} else {
+							throw error;
+						}
+					}
+				}
+
+				if (config.test) {
+					config.test(assert, target, snapshot, component, window);
+				} else {
+					component.$destroy();
+					assert.equal(target.innerHTML, '');
+				}
+			} catch (err) {
+				showOutput(cwd, {
+					hydratable: true
+				});
+				throw err;
+			}
+
+			if (config.show) {
+				showOutput(cwd, {
+					hydratable: true
+				});
+			}
+		});
+	}
+
+	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
+		runTest(dir, null);
+	});
+});
diff --git a/test/hydration/samples/basic/_after.html b/test/hydration/samples/basic/_after.html
new file mode 100644
index 0000000000..efe5048cbc
--- /dev/null
+++ b/test/hydration/samples/basic/_after.html
@@ -0,0 +1 @@
+<h1>Hello world!</h1>
\ No newline at end of file
diff --git a/test/hydration/samples/basic/_before.html b/test/hydration/samples/basic/_before.html
new file mode 100644
index 0000000000..efe5048cbc
--- /dev/null
+++ b/test/hydration/samples/basic/_before.html
@@ -0,0 +1 @@
+<h1>Hello world!</h1>
\ No newline at end of file
diff --git a/test/hydration/samples/basic/_config.js b/test/hydration/samples/basic/_config.js
new file mode 100644
index 0000000000..81d01322e4
--- /dev/null
+++ b/test/hydration/samples/basic/_config.js
@@ -0,0 +1,17 @@
+export default {
+	snapshot(target) {
+		const h1 = target.querySelector('h1');
+
+		return {
+			h1,
+			text: h1.childNodes[0]
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const h1 = target.querySelector('h1');
+
+		assert.equal(h1, snapshot.h1);
+		assert.equal(h1.childNodes[0], snapshot.text);
+	}
+};
diff --git a/test/hydration/samples/basic/main.svelte b/test/hydration/samples/basic/main.svelte
new file mode 100644
index 0000000000..efe5048cbc
--- /dev/null
+++ b/test/hydration/samples/basic/main.svelte
@@ -0,0 +1 @@
+<h1>Hello world!</h1>
\ No newline at end of file
diff --git a/test/hydration/samples/binding-input/_after.html b/test/hydration/samples/binding-input/_after.html
new file mode 100644
index 0000000000..be17352b0d
--- /dev/null
+++ b/test/hydration/samples/binding-input/_after.html
@@ -0,0 +1,2 @@
+<input>
+<p>Hello world!</p>
\ No newline at end of file
diff --git a/test/hydration/samples/binding-input/_before.html b/test/hydration/samples/binding-input/_before.html
new file mode 100644
index 0000000000..be17352b0d
--- /dev/null
+++ b/test/hydration/samples/binding-input/_before.html
@@ -0,0 +1,2 @@
+<input>
+<p>Hello world!</p>
\ No newline at end of file
diff --git a/test/hydration/samples/binding-input/_config.js b/test/hydration/samples/binding-input/_config.js
new file mode 100644
index 0000000000..ac3a6be43a
--- /dev/null
+++ b/test/hydration/samples/binding-input/_config.js
@@ -0,0 +1,29 @@
+export default {
+	props: {
+		name: 'world'
+	},
+
+	snapshot(target) {
+		return {
+			input: target.querySelector('input'),
+			p: target.querySelector('p')
+		};
+	},
+
+	async test(assert, target, snapshot, component, window) {
+		const input = target.querySelector('input');
+		const p = target.querySelector('p');
+
+		assert.equal(input, snapshot.input);
+		assert.equal(p, snapshot.p);
+
+		input.value = 'everybody';
+		await input.dispatchEvent(new window.Event('input'));
+
+		assert.equal(component.name, 'everybody');
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>Hello everybody!</p>
+		`);
+	}
+};
diff --git a/test/hydration/samples/binding-input/main.svelte b/test/hydration/samples/binding-input/main.svelte
new file mode 100644
index 0000000000..c26eb9d595
--- /dev/null
+++ b/test/hydration/samples/binding-input/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let name;
+</script>
+
+<input bind:value={name}>
+<p>Hello {name}!</p>
\ No newline at end of file
diff --git a/test/hydration/samples/claim-text/Component.svelte b/test/hydration/samples/claim-text/Component.svelte
new file mode 100644
index 0000000000..c4a56edceb
--- /dev/null
+++ b/test/hydration/samples/claim-text/Component.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+	<title>Title</title>
+</svelte:head>
+
+<main>There should be one</main>
diff --git a/test/hydration/samples/claim-text/Layout.svelte b/test/hydration/samples/claim-text/Layout.svelte
new file mode 100644
index 0000000000..b37cf18832
--- /dev/null
+++ b/test/hydration/samples/claim-text/Layout.svelte
@@ -0,0 +1,2 @@
+<p>This <code>p</code> and the <code>slot</code> below are direct children of the root.</p>
+<slot />
diff --git a/test/hydration/samples/claim-text/_after.html b/test/hydration/samples/claim-text/_after.html
new file mode 100644
index 0000000000..6f79ed7159
--- /dev/null
+++ b/test/hydration/samples/claim-text/_after.html
@@ -0,0 +1,3 @@
+<p>This <code>p</code> and the <code>slot</code> below are direct children of the root.</p>
+		
+<main>There should be one</main>
\ No newline at end of file
diff --git a/test/hydration/samples/claim-text/_before.html b/test/hydration/samples/claim-text/_before.html
new file mode 100644
index 0000000000..e5653f47fe
--- /dev/null
+++ b/test/hydration/samples/claim-text/_before.html
@@ -0,0 +1,5 @@
+<p>This <code>p</code> and the <code>slot</code> below are direct children of the root.</p>
+
+<main>There should be one</main>
+
+<!-- need extra space after <main> -->
\ No newline at end of file
diff --git a/test/hydration/samples/claim-text/main.svelte b/test/hydration/samples/claim-text/main.svelte
new file mode 100644
index 0000000000..46c001589d
--- /dev/null
+++ b/test/hydration/samples/claim-text/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Layout from './Layout.svelte';
+	import Component from './Component.svelte';
+</script>
+
+<Layout>
+	<Component />
+</Layout>
\ No newline at end of file
diff --git a/test/hydration/samples/component-in-element/Nested.svelte b/test/hydration/samples/component-in-element/Nested.svelte
new file mode 100644
index 0000000000..70bf63ad9d
--- /dev/null
+++ b/test/hydration/samples/component-in-element/Nested.svelte
@@ -0,0 +1 @@
+<p>nested</p>
\ No newline at end of file
diff --git a/test/hydration/samples/component-in-element/_after.html b/test/hydration/samples/component-in-element/_after.html
new file mode 100644
index 0000000000..b96db6ffc8
--- /dev/null
+++ b/test/hydration/samples/component-in-element/_after.html
@@ -0,0 +1,3 @@
+<div>
+	<p>nested</p>
+</div>
\ No newline at end of file
diff --git a/test/hydration/samples/component-in-element/_before.html b/test/hydration/samples/component-in-element/_before.html
new file mode 100644
index 0000000000..b96db6ffc8
--- /dev/null
+++ b/test/hydration/samples/component-in-element/_before.html
@@ -0,0 +1,3 @@
+<div>
+	<p>nested</p>
+</div>
\ No newline at end of file
diff --git a/test/hydration/samples/component-in-element/_config.js b/test/hydration/samples/component-in-element/_config.js
new file mode 100644
index 0000000000..557fe068c4
--- /dev/null
+++ b/test/hydration/samples/component-in-element/_config.js
@@ -0,0 +1,21 @@
+export default {
+	snapshot(target) {
+		const div = target.querySelector('div');
+		const p = target.querySelector('p');
+
+		return {
+			div,
+			p,
+			text: p.childNodes[0]
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const div = target.querySelector('div');
+		const p = target.querySelector('p');
+
+		assert.equal(div, snapshot.div);
+		assert.equal(p, snapshot.p);
+		assert.equal(p.childNodes[0], snapshot.text);
+	}
+};
diff --git a/test/hydration/samples/component-in-element/main.svelte b/test/hydration/samples/component-in-element/main.svelte
new file mode 100644
index 0000000000..f1d903fcd6
--- /dev/null
+++ b/test/hydration/samples/component-in-element/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<div>
+	<Nested/>
+</div>
\ No newline at end of file
diff --git a/test/hydration/samples/component/Nested.svelte b/test/hydration/samples/component/Nested.svelte
new file mode 100644
index 0000000000..70bf63ad9d
--- /dev/null
+++ b/test/hydration/samples/component/Nested.svelte
@@ -0,0 +1 @@
+<p>nested</p>
\ No newline at end of file
diff --git a/test/hydration/samples/component/_after.html b/test/hydration/samples/component/_after.html
new file mode 100644
index 0000000000..70bf63ad9d
--- /dev/null
+++ b/test/hydration/samples/component/_after.html
@@ -0,0 +1 @@
+<p>nested</p>
\ No newline at end of file
diff --git a/test/hydration/samples/component/_before.html b/test/hydration/samples/component/_before.html
new file mode 100644
index 0000000000..70bf63ad9d
--- /dev/null
+++ b/test/hydration/samples/component/_before.html
@@ -0,0 +1 @@
+<p>nested</p>
\ No newline at end of file
diff --git a/test/hydration/samples/component/_config.js b/test/hydration/samples/component/_config.js
new file mode 100644
index 0000000000..4435b2f86e
--- /dev/null
+++ b/test/hydration/samples/component/_config.js
@@ -0,0 +1,17 @@
+export default {
+	snapshot(target) {
+		const p = target.querySelector('p');
+
+		return {
+			p,
+			text: p.childNodes[0]
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const p = target.querySelector('p');
+
+		assert.equal(p, snapshot.p);
+		assert.equal(p.childNodes[0], snapshot.text);
+	}
+};
diff --git a/test/hydration/samples/component/main.svelte b/test/hydration/samples/component/main.svelte
new file mode 100644
index 0000000000..469c37f719
--- /dev/null
+++ b/test/hydration/samples/component/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested/>
\ No newline at end of file
diff --git a/test/hydration/samples/dynamic-text-changed/_after.html b/test/hydration/samples/dynamic-text-changed/_after.html
new file mode 100644
index 0000000000..c675400a49
--- /dev/null
+++ b/test/hydration/samples/dynamic-text-changed/_after.html
@@ -0,0 +1 @@
+<h1>Hello everybody!</h1>
\ No newline at end of file
diff --git a/test/hydration/samples/dynamic-text-changed/_before.html b/test/hydration/samples/dynamic-text-changed/_before.html
new file mode 100644
index 0000000000..efe5048cbc
--- /dev/null
+++ b/test/hydration/samples/dynamic-text-changed/_before.html
@@ -0,0 +1 @@
+<h1>Hello world!</h1>
\ No newline at end of file
diff --git a/test/hydration/samples/dynamic-text-changed/_config.js b/test/hydration/samples/dynamic-text-changed/_config.js
new file mode 100644
index 0000000000..c42e251464
--- /dev/null
+++ b/test/hydration/samples/dynamic-text-changed/_config.js
@@ -0,0 +1,21 @@
+export default {
+	props: {
+		name: 'everybody'
+	},
+
+	snapshot(target) {
+		const h1 = target.querySelector('h1');
+
+		return {
+			h1,
+			text: h1.childNodes[0]
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const h1 = target.querySelector('h1');
+
+		assert.equal(h1, snapshot.h1);
+		assert.equal(h1.childNodes[0], snapshot.text);
+	}
+};
diff --git a/test/hydration/samples/dynamic-text-changed/main.svelte b/test/hydration/samples/dynamic-text-changed/main.svelte
new file mode 100644
index 0000000000..8532c94ac9
--- /dev/null
+++ b/test/hydration/samples/dynamic-text-changed/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let name;
+</script>
+
+<h1>Hello {name}!</h1>
\ No newline at end of file
diff --git a/test/hydration/samples/dynamic-text-nil/_after.html b/test/hydration/samples/dynamic-text-nil/_after.html
new file mode 100644
index 0000000000..b20e4a8074
--- /dev/null
+++ b/test/hydration/samples/dynamic-text-nil/_after.html
@@ -0,0 +1,2 @@
+<p>null</p>
+<p>undefined</p>
diff --git a/test/hydration/samples/dynamic-text-nil/_before.html b/test/hydration/samples/dynamic-text-nil/_before.html
new file mode 100644
index 0000000000..b20e4a8074
--- /dev/null
+++ b/test/hydration/samples/dynamic-text-nil/_before.html
@@ -0,0 +1,2 @@
+<p>null</p>
+<p>undefined</p>
diff --git a/test/hydration/samples/dynamic-text-nil/_config.js b/test/hydration/samples/dynamic-text-nil/_config.js
new file mode 100644
index 0000000000..b4d013b777
--- /dev/null
+++ b/test/hydration/samples/dynamic-text-nil/_config.js
@@ -0,0 +1,21 @@
+export default {
+	props: {},
+
+	snapshot(target) {
+		const nullText = target.querySelectorAll('p')[0].textContent;
+		const undefinedText = target.querySelectorAll('p')[1].textContent;
+
+		return {
+			nullText,
+			undefinedText
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const nullText = target.querySelectorAll('p')[0].textContent;
+		const undefinedText = target.querySelectorAll('p')[1].textContent;
+
+		assert.equal(nullText, snapshot.nullText);
+		assert.equal(undefinedText, snapshot.undefinedText);
+	}
+};
diff --git a/test/hydration/samples/dynamic-text-nil/main.svelte b/test/hydration/samples/dynamic-text-nil/main.svelte
new file mode 100644
index 0000000000..853faa635c
--- /dev/null
+++ b/test/hydration/samples/dynamic-text-nil/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let maybeNull = null;
+	let maybeUndefined = undefined;
+</script>
+
+<p>{maybeNull}</p>
+<p>{maybeUndefined}</p>
diff --git a/test/hydration/samples/dynamic-text/_after.html b/test/hydration/samples/dynamic-text/_after.html
new file mode 100644
index 0000000000..efe5048cbc
--- /dev/null
+++ b/test/hydration/samples/dynamic-text/_after.html
@@ -0,0 +1 @@
+<h1>Hello world!</h1>
\ No newline at end of file
diff --git a/test/hydration/samples/dynamic-text/_before.html b/test/hydration/samples/dynamic-text/_before.html
new file mode 100644
index 0000000000..efe5048cbc
--- /dev/null
+++ b/test/hydration/samples/dynamic-text/_before.html
@@ -0,0 +1 @@
+<h1>Hello world!</h1>
\ No newline at end of file
diff --git a/test/hydration/samples/dynamic-text/_config.js b/test/hydration/samples/dynamic-text/_config.js
new file mode 100644
index 0000000000..47e095d4ca
--- /dev/null
+++ b/test/hydration/samples/dynamic-text/_config.js
@@ -0,0 +1,21 @@
+export default {
+	props: {
+		name: 'world'
+	},
+
+	snapshot(target) {
+		const h1 = target.querySelector('h1');
+
+		return {
+			h1,
+			text: h1.childNodes[0]
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const h1 = target.querySelector('h1');
+
+		assert.equal(h1, snapshot.h1);
+		assert.equal(h1.childNodes[0], snapshot.text);
+	}
+};
diff --git a/test/hydration/samples/dynamic-text/main.svelte b/test/hydration/samples/dynamic-text/main.svelte
new file mode 100644
index 0000000000..8532c94ac9
--- /dev/null
+++ b/test/hydration/samples/dynamic-text/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let name;
+</script>
+
+<h1>Hello {name}!</h1>
\ No newline at end of file
diff --git a/test/hydration/samples/each-block-arg-clash/_after.html b/test/hydration/samples/each-block-arg-clash/_after.html
new file mode 100644
index 0000000000..36cd79642a
--- /dev/null
+++ b/test/hydration/samples/each-block-arg-clash/_after.html
@@ -0,0 +1,5 @@
+<ul>
+	<li>animal</li>
+	<li>vegetable</li>
+	<li>mineral</li>
+</ul>
\ No newline at end of file
diff --git a/test/hydration/samples/each-block-arg-clash/_before.html b/test/hydration/samples/each-block-arg-clash/_before.html
new file mode 100644
index 0000000000..36cd79642a
--- /dev/null
+++ b/test/hydration/samples/each-block-arg-clash/_before.html
@@ -0,0 +1,5 @@
+<ul>
+	<li>animal</li>
+	<li>vegetable</li>
+	<li>mineral</li>
+</ul>
\ No newline at end of file
diff --git a/test/hydration/samples/each-block-arg-clash/_config.js b/test/hydration/samples/each-block-arg-clash/_config.js
new file mode 100644
index 0000000000..1b04393629
--- /dev/null
+++ b/test/hydration/samples/each-block-arg-clash/_config.js
@@ -0,0 +1,31 @@
+export default {
+	props: {
+		things: {
+			foo: [
+				'animal',
+				'vegetable',
+				'mineral'
+			]
+		}
+	},
+
+	snapshot(target) {
+		const ul = target.querySelector('ul');
+		const lis = ul.querySelectorAll('li');
+
+		return {
+			ul,
+			lis
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const ul = target.querySelector('ul');
+		const lis = ul.querySelectorAll('li');
+
+		assert.equal(ul, snapshot.ul);
+		assert.equal(lis[0], snapshot.lis[0]);
+		assert.equal(lis[1], snapshot.lis[1]);
+		assert.equal(lis[2], snapshot.lis[2]);
+	}
+};
diff --git a/test/hydration/samples/each-block-arg-clash/main.svelte b/test/hydration/samples/each-block-arg-clash/main.svelte
new file mode 100644
index 0000000000..a25f661fc7
--- /dev/null
+++ b/test/hydration/samples/each-block-arg-clash/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let things;
+</script>
+
+<ul>
+	{#each things.foo as foo}
+		<li>{foo}</li>
+	{/each}
+</ul>
\ No newline at end of file
diff --git a/test/hydration/samples/each-block/_after.html b/test/hydration/samples/each-block/_after.html
new file mode 100644
index 0000000000..36cd79642a
--- /dev/null
+++ b/test/hydration/samples/each-block/_after.html
@@ -0,0 +1,5 @@
+<ul>
+	<li>animal</li>
+	<li>vegetable</li>
+	<li>mineral</li>
+</ul>
\ No newline at end of file
diff --git a/test/hydration/samples/each-block/_before.html b/test/hydration/samples/each-block/_before.html
new file mode 100644
index 0000000000..36cd79642a
--- /dev/null
+++ b/test/hydration/samples/each-block/_before.html
@@ -0,0 +1,5 @@
+<ul>
+	<li>animal</li>
+	<li>vegetable</li>
+	<li>mineral</li>
+</ul>
\ No newline at end of file
diff --git a/test/hydration/samples/each-block/_config.js b/test/hydration/samples/each-block/_config.js
new file mode 100644
index 0000000000..81f0a75831
--- /dev/null
+++ b/test/hydration/samples/each-block/_config.js
@@ -0,0 +1,29 @@
+export default {
+	props: {
+		things: [
+			'animal',
+			'vegetable',
+			'mineral'
+		]
+	},
+
+	snapshot(target) {
+		const ul = target.querySelector('ul');
+		const lis = ul.querySelectorAll('li');
+
+		return {
+			ul,
+			lis
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const ul = target.querySelector('ul');
+		const lis = ul.querySelectorAll('li');
+
+		assert.equal(ul, snapshot.ul);
+		assert.equal(lis[0], snapshot.lis[0]);
+		assert.equal(lis[1], snapshot.lis[1]);
+		assert.equal(lis[2], snapshot.lis[2]);
+	}
+};
diff --git a/test/hydration/samples/each-block/main.svelte b/test/hydration/samples/each-block/main.svelte
new file mode 100644
index 0000000000..a75df5740b
--- /dev/null
+++ b/test/hydration/samples/each-block/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let things;
+</script>
+
+<ul>
+	{#each things as thing}
+		<li>{thing}</li>
+	{/each}
+</ul>
\ No newline at end of file
diff --git a/test/hydration/samples/each-else/_after.html b/test/hydration/samples/each-else/_after.html
new file mode 100644
index 0000000000..7920500ec3
--- /dev/null
+++ b/test/hydration/samples/each-else/_after.html
@@ -0,0 +1,4 @@
+<h1>Hello, world</h1>
+<p>
+  weird
+</p>
\ No newline at end of file
diff --git a/test/hydration/samples/each-else/_before.html b/test/hydration/samples/each-else/_before.html
new file mode 100644
index 0000000000..7920500ec3
--- /dev/null
+++ b/test/hydration/samples/each-else/_before.html
@@ -0,0 +1,4 @@
+<h1>Hello, world</h1>
+<p>
+  weird
+</p>
\ No newline at end of file
diff --git a/test/hydration/samples/each-else/main.svelte b/test/hydration/samples/each-else/main.svelte
new file mode 100644
index 0000000000..64d3a37c58
--- /dev/null
+++ b/test/hydration/samples/each-else/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let name = "world";
+	export let array = [];
+</script>
+
+<h1>Hello, {name}</h1>
+{#each array as elem}
+	<p>
+	item
+	</p>
+{:else}
+	<p>
+	weird
+	</p>
+{/each}
diff --git a/test/hydration/samples/element-attribute-added/_after.html b/test/hydration/samples/element-attribute-added/_after.html
new file mode 100644
index 0000000000..8d93bba36d
--- /dev/null
+++ b/test/hydration/samples/element-attribute-added/_after.html
@@ -0,0 +1 @@
+<div class='bar'></div>
\ No newline at end of file
diff --git a/test/hydration/samples/element-attribute-added/_before.html b/test/hydration/samples/element-attribute-added/_before.html
new file mode 100644
index 0000000000..c6a8a8c95d
--- /dev/null
+++ b/test/hydration/samples/element-attribute-added/_before.html
@@ -0,0 +1 @@
+<div class='foo'></div>
\ No newline at end of file
diff --git a/test/hydration/samples/element-attribute-added/_config.js b/test/hydration/samples/element-attribute-added/_config.js
new file mode 100644
index 0000000000..a662743c2c
--- /dev/null
+++ b/test/hydration/samples/element-attribute-added/_config.js
@@ -0,0 +1,19 @@
+export default {
+	props: {
+		className: 'bar'
+	},
+
+	snapshot(target) {
+		const div = target.querySelector('div');
+
+		return {
+			div
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const div = target.querySelector('div');
+
+		assert.equal(div, snapshot.div);
+	}
+};
diff --git a/test/hydration/samples/element-attribute-added/main.svelte b/test/hydration/samples/element-attribute-added/main.svelte
new file mode 100644
index 0000000000..c33bc0981c
--- /dev/null
+++ b/test/hydration/samples/element-attribute-added/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let className;
+</script>
+
+<div class={className}></div>
\ No newline at end of file
diff --git a/test/hydration/samples/element-attribute-changed/_after.html b/test/hydration/samples/element-attribute-changed/_after.html
new file mode 100644
index 0000000000..c6a8a8c95d
--- /dev/null
+++ b/test/hydration/samples/element-attribute-changed/_after.html
@@ -0,0 +1 @@
+<div class='foo'></div>
\ No newline at end of file
diff --git a/test/hydration/samples/element-attribute-changed/_before.html b/test/hydration/samples/element-attribute-changed/_before.html
new file mode 100644
index 0000000000..281c6866c3
--- /dev/null
+++ b/test/hydration/samples/element-attribute-changed/_before.html
@@ -0,0 +1 @@
+<div></div>
\ No newline at end of file
diff --git a/test/hydration/samples/element-attribute-changed/_config.js b/test/hydration/samples/element-attribute-changed/_config.js
new file mode 100644
index 0000000000..d402e35d7b
--- /dev/null
+++ b/test/hydration/samples/element-attribute-changed/_config.js
@@ -0,0 +1,19 @@
+export default {
+	props: {
+		class: 'bar'
+	},
+
+	snapshot(target) {
+		const div = target.querySelector('div');
+
+		return {
+			div
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const div = target.querySelector('div');
+
+		assert.equal(div, snapshot.div);
+	}
+};
diff --git a/test/hydration/samples/element-attribute-changed/main.svelte b/test/hydration/samples/element-attribute-changed/main.svelte
new file mode 100644
index 0000000000..c6a8a8c95d
--- /dev/null
+++ b/test/hydration/samples/element-attribute-changed/main.svelte
@@ -0,0 +1 @@
+<div class='foo'></div>
\ No newline at end of file
diff --git a/test/hydration/samples/element-attribute-removed/_after.html b/test/hydration/samples/element-attribute-removed/_after.html
new file mode 100644
index 0000000000..281c6866c3
--- /dev/null
+++ b/test/hydration/samples/element-attribute-removed/_after.html
@@ -0,0 +1 @@
+<div></div>
\ No newline at end of file
diff --git a/test/hydration/samples/element-attribute-removed/_before.html b/test/hydration/samples/element-attribute-removed/_before.html
new file mode 100644
index 0000000000..80c0591a4d
--- /dev/null
+++ b/test/hydration/samples/element-attribute-removed/_before.html
@@ -0,0 +1 @@
+<div class='foo' title='bar'></div>
\ No newline at end of file
diff --git a/test/hydration/samples/element-attribute-removed/_config.js b/test/hydration/samples/element-attribute-removed/_config.js
new file mode 100644
index 0000000000..d402e35d7b
--- /dev/null
+++ b/test/hydration/samples/element-attribute-removed/_config.js
@@ -0,0 +1,19 @@
+export default {
+	props: {
+		class: 'bar'
+	},
+
+	snapshot(target) {
+		const div = target.querySelector('div');
+
+		return {
+			div
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const div = target.querySelector('div');
+
+		assert.equal(div, snapshot.div);
+	}
+};
diff --git a/test/hydration/samples/element-attribute-removed/main.svelte b/test/hydration/samples/element-attribute-removed/main.svelte
new file mode 100644
index 0000000000..281c6866c3
--- /dev/null
+++ b/test/hydration/samples/element-attribute-removed/main.svelte
@@ -0,0 +1 @@
+<div></div>
\ No newline at end of file
diff --git a/test/hydration/samples/element-attribute-unchanged/_after.html b/test/hydration/samples/element-attribute-unchanged/_after.html
new file mode 100644
index 0000000000..c6a8a8c95d
--- /dev/null
+++ b/test/hydration/samples/element-attribute-unchanged/_after.html
@@ -0,0 +1 @@
+<div class='foo'></div>
\ No newline at end of file
diff --git a/test/hydration/samples/element-attribute-unchanged/_before.html b/test/hydration/samples/element-attribute-unchanged/_before.html
new file mode 100644
index 0000000000..c6a8a8c95d
--- /dev/null
+++ b/test/hydration/samples/element-attribute-unchanged/_before.html
@@ -0,0 +1 @@
+<div class='foo'></div>
\ No newline at end of file
diff --git a/test/hydration/samples/element-attribute-unchanged/_config.js b/test/hydration/samples/element-attribute-unchanged/_config.js
new file mode 100644
index 0000000000..d9d220b6e5
--- /dev/null
+++ b/test/hydration/samples/element-attribute-unchanged/_config.js
@@ -0,0 +1,15 @@
+export default {
+	snapshot(target) {
+		const div = target.querySelector('div');
+
+		return {
+			div
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const div = target.querySelector('div');
+
+		assert.equal(div, snapshot.div);
+	}
+};
diff --git a/test/hydration/samples/element-attribute-unchanged/main.svelte b/test/hydration/samples/element-attribute-unchanged/main.svelte
new file mode 100644
index 0000000000..c6a8a8c95d
--- /dev/null
+++ b/test/hydration/samples/element-attribute-unchanged/main.svelte
@@ -0,0 +1 @@
+<div class='foo'></div>
\ No newline at end of file
diff --git a/test/hydration/samples/element-nested-sibling/_after.html b/test/hydration/samples/element-nested-sibling/_after.html
new file mode 100644
index 0000000000..d011cf6e38
--- /dev/null
+++ b/test/hydration/samples/element-nested-sibling/_after.html
@@ -0,0 +1,4 @@
+<p>
+	<span>1</span>
+	<code>2</code>
+</p>
diff --git a/test/hydration/samples/element-nested-sibling/_before.html b/test/hydration/samples/element-nested-sibling/_before.html
new file mode 100644
index 0000000000..d011cf6e38
--- /dev/null
+++ b/test/hydration/samples/element-nested-sibling/_before.html
@@ -0,0 +1,4 @@
+<p>
+	<span>1</span>
+	<code>2</code>
+</p>
diff --git a/test/hydration/samples/element-nested-sibling/_config.js b/test/hydration/samples/element-nested-sibling/_config.js
new file mode 100644
index 0000000000..8410fc189d
--- /dev/null
+++ b/test/hydration/samples/element-nested-sibling/_config.js
@@ -0,0 +1,19 @@
+export default {
+	snapshot(target) {
+		const p = target.querySelector('p');
+
+		return {
+			p,
+			span: p.querySelector('span'),
+			code: p.querySelector('code')
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const p = target.querySelector('p');
+
+		assert.equal(p, snapshot.p);
+		assert.equal(p.querySelector('span'), snapshot.span);
+		assert.equal(p.querySelector('code'), snapshot.code);
+	}
+};
diff --git a/test/hydration/samples/element-nested-sibling/main.svelte b/test/hydration/samples/element-nested-sibling/main.svelte
new file mode 100644
index 0000000000..d6e02107e2
--- /dev/null
+++ b/test/hydration/samples/element-nested-sibling/main.svelte
@@ -0,0 +1,6 @@
+<p>
+    <span>1</span>
+    {#if true}
+        <code>2</code>
+    {/if}
+</p>
diff --git a/test/hydration/samples/element-nested/_after.html b/test/hydration/samples/element-nested/_after.html
new file mode 100644
index 0000000000..b96db6ffc8
--- /dev/null
+++ b/test/hydration/samples/element-nested/_after.html
@@ -0,0 +1,3 @@
+<div>
+	<p>nested</p>
+</div>
\ No newline at end of file
diff --git a/test/hydration/samples/element-nested/_before.html b/test/hydration/samples/element-nested/_before.html
new file mode 100644
index 0000000000..b96db6ffc8
--- /dev/null
+++ b/test/hydration/samples/element-nested/_before.html
@@ -0,0 +1,3 @@
+<div>
+	<p>nested</p>
+</div>
\ No newline at end of file
diff --git a/test/hydration/samples/element-nested/_config.js b/test/hydration/samples/element-nested/_config.js
new file mode 100644
index 0000000000..cd34008c04
--- /dev/null
+++ b/test/hydration/samples/element-nested/_config.js
@@ -0,0 +1,17 @@
+export default {
+	snapshot(target) {
+		const div = target.querySelector('div');
+
+		return {
+			div,
+			p: div.querySelector('p')
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const div = target.querySelector('div');
+
+		assert.equal(div, snapshot.div);
+		assert.equal(div.querySelector('p'), snapshot.p);
+	}
+};
diff --git a/test/hydration/samples/element-nested/main.svelte b/test/hydration/samples/element-nested/main.svelte
new file mode 100644
index 0000000000..b96db6ffc8
--- /dev/null
+++ b/test/hydration/samples/element-nested/main.svelte
@@ -0,0 +1,3 @@
+<div>
+	<p>nested</p>
+</div>
\ No newline at end of file
diff --git a/test/hydration/samples/element-ref/_after.html b/test/hydration/samples/element-ref/_after.html
new file mode 100644
index 0000000000..efe5048cbc
--- /dev/null
+++ b/test/hydration/samples/element-ref/_after.html
@@ -0,0 +1 @@
+<h1>Hello world!</h1>
\ No newline at end of file
diff --git a/test/hydration/samples/element-ref/_before.html b/test/hydration/samples/element-ref/_before.html
new file mode 100644
index 0000000000..efe5048cbc
--- /dev/null
+++ b/test/hydration/samples/element-ref/_before.html
@@ -0,0 +1 @@
+<h1>Hello world!</h1>
\ No newline at end of file
diff --git a/test/hydration/samples/element-ref/_config.js b/test/hydration/samples/element-ref/_config.js
new file mode 100644
index 0000000000..80d681f7c5
--- /dev/null
+++ b/test/hydration/samples/element-ref/_config.js
@@ -0,0 +1,16 @@
+export default {
+	snapshot(target) {
+		const h1 = target.querySelector('h1');
+
+		return {
+			h1
+		};
+	},
+
+	test(assert, target, snapshot, component) {
+		const h1 = target.querySelector('h1');
+
+		assert.equal(h1, snapshot.h1);
+		assert.equal(component.h1, h1);
+	}
+};
diff --git a/test/hydration/samples/element-ref/main.svelte b/test/hydration/samples/element-ref/main.svelte
new file mode 100644
index 0000000000..f81f55e42d
--- /dev/null
+++ b/test/hydration/samples/element-ref/main.svelte
@@ -0,0 +1,7 @@
+<svelte:options accessors/>
+
+<script>
+	export let h1;
+</script>
+
+<h1 bind:this={h1}>Hello world!</h1>
\ No newline at end of file
diff --git a/test/hydration/samples/event-handler/_after.html b/test/hydration/samples/event-handler/_after.html
new file mode 100644
index 0000000000..13cd34a990
--- /dev/null
+++ b/test/hydration/samples/event-handler/_after.html
@@ -0,0 +1 @@
+<button>click me</button>
\ No newline at end of file
diff --git a/test/hydration/samples/event-handler/_before.html b/test/hydration/samples/event-handler/_before.html
new file mode 100644
index 0000000000..13cd34a990
--- /dev/null
+++ b/test/hydration/samples/event-handler/_before.html
@@ -0,0 +1 @@
+<button>click me</button>
\ No newline at end of file
diff --git a/test/hydration/samples/event-handler/_config.js b/test/hydration/samples/event-handler/_config.js
new file mode 100644
index 0000000000..027b2bd15b
--- /dev/null
+++ b/test/hydration/samples/event-handler/_config.js
@@ -0,0 +1,26 @@
+export default {
+	props: {
+		clicked: false
+	},
+
+	snapshot(target) {
+		const button = target.querySelector('button');
+
+		return {
+			button
+		};
+	},
+
+	async test(assert, target, snapshot, component, window) {
+		const button = target.querySelector('button');
+		assert.equal(button, snapshot.button);
+
+		await button.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.ok(component.clicked);
+		assert.htmlEqual(target.innerHTML, `
+			<button>click me</button>
+			<p>clicked!</p>
+		`);
+	}
+};
diff --git a/test/hydration/samples/event-handler/main.svelte b/test/hydration/samples/event-handler/main.svelte
new file mode 100644
index 0000000000..ca2b21e4b1
--- /dev/null
+++ b/test/hydration/samples/event-handler/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let clicked;
+</script>
+
+<button on:click='{() => clicked = true}'>click me</button>
+
+{#if clicked}
+	<p>clicked!</p>
+{/if}
diff --git a/test/hydration/samples/expression-sibling/_after.html b/test/hydration/samples/expression-sibling/_after.html
new file mode 100644
index 0000000000..9c0a0b5778
--- /dev/null
+++ b/test/hydration/samples/expression-sibling/_after.html
@@ -0,0 +1 @@
+<p>1 2 <span>3</span></p>
diff --git a/test/hydration/samples/expression-sibling/_before.html b/test/hydration/samples/expression-sibling/_before.html
new file mode 100644
index 0000000000..9c0a0b5778
--- /dev/null
+++ b/test/hydration/samples/expression-sibling/_before.html
@@ -0,0 +1 @@
+<p>1 2 <span>3</span></p>
diff --git a/test/hydration/samples/expression-sibling/_config.js b/test/hydration/samples/expression-sibling/_config.js
new file mode 100644
index 0000000000..c6d3ef3f2f
--- /dev/null
+++ b/test/hydration/samples/expression-sibling/_config.js
@@ -0,0 +1,19 @@
+export default {
+	snapshot(target) {
+		const p = target.querySelector('p');
+
+		return {
+			p,
+			text: p.childNodes[0],
+			span: p.querySelector('span')
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const p = target.querySelector('p');
+
+		assert.equal(p, snapshot.p);
+		assert.equal(p.childNodes[0], snapshot.text);
+		assert.equal(p.querySelector('span'), snapshot.span);
+	}
+};
diff --git a/test/hydration/samples/expression-sibling/main.svelte b/test/hydration/samples/expression-sibling/main.svelte
new file mode 100644
index 0000000000..65aa541e9c
--- /dev/null
+++ b/test/hydration/samples/expression-sibling/main.svelte
@@ -0,0 +1 @@
+<p>{1} 2 <span>3</span></p>
diff --git a/test/hydration/samples/head-meta-hydrate-duplicate/_after.html b/test/hydration/samples/head-meta-hydrate-duplicate/_after.html
new file mode 100644
index 0000000000..3e5b375f0a
--- /dev/null
+++ b/test/hydration/samples/head-meta-hydrate-duplicate/_after.html
@@ -0,0 +1 @@
+<div>Just a dummy page.</div>
\ No newline at end of file
diff --git a/test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html b/test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html
new file mode 100644
index 0000000000..be7a01ba4f
--- /dev/null
+++ b/test/hydration/samples/head-meta-hydrate-duplicate/_after_head.html
@@ -0,0 +1,4 @@
+<title>Some Title</title>
+<link href="/" rel="canonical">
+<meta content="some description" name="description">
+<meta content="some keywords" name="keywords">
diff --git a/test/hydration/samples/head-meta-hydrate-duplicate/_before.html b/test/hydration/samples/head-meta-hydrate-duplicate/_before.html
new file mode 100644
index 0000000000..3e5b375f0a
--- /dev/null
+++ b/test/hydration/samples/head-meta-hydrate-duplicate/_before.html
@@ -0,0 +1 @@
+<div>Just a dummy page.</div>
\ No newline at end of file
diff --git a/test/hydration/samples/head-meta-hydrate-duplicate/_before_head.html b/test/hydration/samples/head-meta-hydrate-duplicate/_before_head.html
new file mode 100644
index 0000000000..107753cdd0
--- /dev/null
+++ b/test/hydration/samples/head-meta-hydrate-duplicate/_before_head.html
@@ -0,0 +1,4 @@
+<title>Some Title</title>
+<link rel="canonical" href="/" data-svelte="svelte-1s8aodm">
+<meta name="description" content="some description" data-svelte="svelte-1s8aodm">
+<meta name="keywords" content="some keywords" data-svelte="svelte-1s8aodm">
\ No newline at end of file
diff --git a/test/hydration/samples/head-meta-hydrate-duplicate/_config.js b/test/hydration/samples/head-meta-hydrate-duplicate/_config.js
new file mode 100644
index 0000000000..482efd564d
--- /dev/null
+++ b/test/hydration/samples/head-meta-hydrate-duplicate/_config.js
@@ -0,0 +1,5 @@
+export default {
+	test(assert, target, snapshot, component, window) {
+		assert.equal(window.document.querySelectorAll('meta').length, 2);
+	}
+};
diff --git a/test/hydration/samples/head-meta-hydrate-duplicate/main.svelte b/test/hydration/samples/head-meta-hydrate-duplicate/main.svelte
new file mode 100644
index 0000000000..1a8b125dd2
--- /dev/null
+++ b/test/hydration/samples/head-meta-hydrate-duplicate/main.svelte
@@ -0,0 +1,8 @@
+<svelte:head>
+  <title>Some Title</title>
+  <link rel="canonical" href="/">
+  <meta name="description" content="some description">
+  <meta name="keywords" content="some keywords">
+</svelte:head>
+
+<div>Just a dummy page.</div>
\ No newline at end of file
diff --git a/test/hydration/samples/if-block-anchor/_after.html b/test/hydration/samples/if-block-anchor/_after.html
new file mode 100644
index 0000000000..31701ce3e9
--- /dev/null
+++ b/test/hydration/samples/if-block-anchor/_after.html
@@ -0,0 +1,4 @@
+<div>
+	<p>foo!</p>
+	<p>bar!</p>
+</div>
\ No newline at end of file
diff --git a/test/hydration/samples/if-block-anchor/_before.html b/test/hydration/samples/if-block-anchor/_before.html
new file mode 100644
index 0000000000..31701ce3e9
--- /dev/null
+++ b/test/hydration/samples/if-block-anchor/_before.html
@@ -0,0 +1,4 @@
+<div>
+	<p>foo!</p>
+	<p>bar!</p>
+</div>
\ No newline at end of file
diff --git a/test/hydration/samples/if-block-anchor/_config.js b/test/hydration/samples/if-block-anchor/_config.js
new file mode 100644
index 0000000000..ab519c913b
--- /dev/null
+++ b/test/hydration/samples/if-block-anchor/_config.js
@@ -0,0 +1,26 @@
+export default {
+	props: {
+		foo: true,
+		bar: true
+	},
+
+	snapshot(target) {
+		const div = target.querySelector('div');
+		const ps = target.querySelectorAll('p');
+
+		return {
+			div,
+			p0: ps[0],
+			p1: ps[1]
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const div = target.querySelector('div');
+		const ps = target.querySelectorAll('p');
+
+		assert.equal(div, snapshot.div);
+		assert.equal(ps[0], snapshot.p0);
+		assert.equal(ps[1], snapshot.p1);
+	}
+};
diff --git a/test/hydration/samples/if-block-anchor/main.svelte b/test/hydration/samples/if-block-anchor/main.svelte
new file mode 100644
index 0000000000..f52627cdd6
--- /dev/null
+++ b/test/hydration/samples/if-block-anchor/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let foo;
+	export let bar;
+</script>
+
+<div>
+	{#if foo}
+		<p>foo!</p>
+	{/if}
+
+	{#if bar}
+		<p>bar!</p>
+	{/if}
+</div>
\ No newline at end of file
diff --git a/test/hydration/samples/if-block-false/_after.html b/test/hydration/samples/if-block-false/_after.html
new file mode 100644
index 0000000000..17eb5acc05
--- /dev/null
+++ b/test/hydration/samples/if-block-false/_after.html
@@ -0,0 +1,2 @@
+<p>before</p>
+<p>after</p>
\ No newline at end of file
diff --git a/test/hydration/samples/if-block-false/_before.html b/test/hydration/samples/if-block-false/_before.html
new file mode 100644
index 0000000000..17eb5acc05
--- /dev/null
+++ b/test/hydration/samples/if-block-false/_before.html
@@ -0,0 +1,2 @@
+<p>before</p>
+<p>after</p>
\ No newline at end of file
diff --git a/test/hydration/samples/if-block-false/_config.js b/test/hydration/samples/if-block-false/_config.js
new file mode 100644
index 0000000000..a11d800e45
--- /dev/null
+++ b/test/hydration/samples/if-block-false/_config.js
@@ -0,0 +1,19 @@
+export default {
+	props: {
+		foo: false
+	},
+
+	snapshot(target) {
+		const p = target.querySelector('p');
+
+		return {
+			p
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const p = target.querySelector('p');
+
+		assert.equal(p, snapshot.p);
+	}
+};
diff --git a/test/hydration/samples/if-block-false/main.svelte b/test/hydration/samples/if-block-false/main.svelte
new file mode 100644
index 0000000000..d2d4e411a0
--- /dev/null
+++ b/test/hydration/samples/if-block-false/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let foo;
+</script>
+
+<p>before</p>
+{#if foo}
+	<p>foo!</p>
+{/if}
+<p>after</p>
\ No newline at end of file
diff --git a/test/hydration/samples/if-block-update/_after.html b/test/hydration/samples/if-block-update/_after.html
new file mode 100644
index 0000000000..5ed8b34a53
--- /dev/null
+++ b/test/hydration/samples/if-block-update/_after.html
@@ -0,0 +1 @@
+<p>foo!</p>
\ No newline at end of file
diff --git a/test/hydration/samples/if-block-update/_before.html b/test/hydration/samples/if-block-update/_before.html
new file mode 100644
index 0000000000..5ed8b34a53
--- /dev/null
+++ b/test/hydration/samples/if-block-update/_before.html
@@ -0,0 +1 @@
+<p>foo!</p>
\ No newline at end of file
diff --git a/test/hydration/samples/if-block-update/_config.js b/test/hydration/samples/if-block-update/_config.js
new file mode 100644
index 0000000000..fb4a723145
--- /dev/null
+++ b/test/hydration/samples/if-block-update/_config.js
@@ -0,0 +1,24 @@
+export default {
+	props: {
+		foo: true,
+		bar: false
+	},
+
+	snapshot(target) {
+		const p = target.querySelector('p');
+
+		return {
+			p
+		};
+	},
+
+	test(assert, target, snapshot, component) {
+		const p = target.querySelector('p');
+
+		assert.equal(p, snapshot.p);
+
+		component.foo = false;
+		component.bar = true;
+		assert.htmlEqual(target.innerHTML, '<p>bar!</p>');
+	}
+};
diff --git a/test/hydration/samples/if-block-update/main.svelte b/test/hydration/samples/if-block-update/main.svelte
new file mode 100644
index 0000000000..136266a445
--- /dev/null
+++ b/test/hydration/samples/if-block-update/main.svelte
@@ -0,0 +1,14 @@
+<svelte:options accessors={true}/>
+
+<script>
+	export let foo;
+	export let bar;
+</script>
+
+{#if foo}
+	<p>foo!</p>
+{/if}
+
+{#if bar}
+	<p>bar!</p>
+{/if}
\ No newline at end of file
diff --git a/test/hydration/samples/if-block/_after.html b/test/hydration/samples/if-block/_after.html
new file mode 100644
index 0000000000..5ed8b34a53
--- /dev/null
+++ b/test/hydration/samples/if-block/_after.html
@@ -0,0 +1 @@
+<p>foo!</p>
\ No newline at end of file
diff --git a/test/hydration/samples/if-block/_before.html b/test/hydration/samples/if-block/_before.html
new file mode 100644
index 0000000000..5ed8b34a53
--- /dev/null
+++ b/test/hydration/samples/if-block/_before.html
@@ -0,0 +1 @@
+<p>foo!</p>
\ No newline at end of file
diff --git a/test/hydration/samples/if-block/_config.js b/test/hydration/samples/if-block/_config.js
new file mode 100644
index 0000000000..bd89748dc0
--- /dev/null
+++ b/test/hydration/samples/if-block/_config.js
@@ -0,0 +1,19 @@
+export default {
+	props: {
+		foo: true
+	},
+
+	snapshot(target) {
+		const p = target.querySelector('p');
+
+		return {
+			p
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const p = target.querySelector('p');
+
+		assert.equal(p, snapshot.p);
+	}
+};
diff --git a/test/hydration/samples/if-block/main.svelte b/test/hydration/samples/if-block/main.svelte
new file mode 100644
index 0000000000..545d81d44a
--- /dev/null
+++ b/test/hydration/samples/if-block/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo;
+</script>
+
+{#if foo}
+	<p>foo!</p>
+{/if}
\ No newline at end of file
diff --git a/test/hydration/samples/raw-with-empty-line-at-top/_after.html b/test/hydration/samples/raw-with-empty-line-at-top/_after.html
new file mode 100644
index 0000000000..28ee6452d3
--- /dev/null
+++ b/test/hydration/samples/raw-with-empty-line-at-top/_after.html
@@ -0,0 +1,6 @@
+
+<div>before</div>
+<br>
+
+<!-- HTML_TAG_START -->a <!-- HTML_TAG_END --><!-- HTML_TAG_START -->b <!-- HTML_TAG_END --><!-- HTML_TAG_START -->c <!-- HTML_TAG_END -->
+<div>after</div>
diff --git a/test/hydration/samples/raw-with-empty-line-at-top/_before.html b/test/hydration/samples/raw-with-empty-line-at-top/_before.html
new file mode 100644
index 0000000000..28ee6452d3
--- /dev/null
+++ b/test/hydration/samples/raw-with-empty-line-at-top/_before.html
@@ -0,0 +1,6 @@
+
+<div>before</div>
+<br>
+
+<!-- HTML_TAG_START -->a <!-- HTML_TAG_END --><!-- HTML_TAG_START -->b <!-- HTML_TAG_END --><!-- HTML_TAG_START -->c <!-- HTML_TAG_END -->
+<div>after</div>
diff --git a/test/hydration/samples/raw-with-empty-line-at-top/main.svelte b/test/hydration/samples/raw-with-empty-line-at-top/main.svelte
new file mode 100644
index 0000000000..2d08a3f418
--- /dev/null
+++ b/test/hydration/samples/raw-with-empty-line-at-top/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	let content = ["a ", "b ", "c "];
+</script>
+
+<div>before</div>
+<br>
+
+{#each content as c}
+    {@html c}
+{/each}
+<div>after</div>
diff --git a/test/hydration/samples/raw/_after.html b/test/hydration/samples/raw/_after.html
new file mode 100644
index 0000000000..47214db3c9
--- /dev/null
+++ b/test/hydration/samples/raw/_after.html
@@ -0,0 +1,4 @@
+<noscript></noscript>
+<p>this is some html</p>
+<p>and so is this</p>
+<noscript></noscript>
\ No newline at end of file
diff --git a/test/hydration/samples/raw/_before.html b/test/hydration/samples/raw/_before.html
new file mode 100644
index 0000000000..b68c0e317e
--- /dev/null
+++ b/test/hydration/samples/raw/_before.html
@@ -0,0 +1,2 @@
+<p>this is some html</p>
+<p>and so is this</p>
\ No newline at end of file
diff --git a/test/hydration/samples/raw/_config.js b/test/hydration/samples/raw/_config.js
new file mode 100644
index 0000000000..f4fb2889cd
--- /dev/null
+++ b/test/hydration/samples/raw/_config.js
@@ -0,0 +1,27 @@
+export default {
+	skip: true, // existing nodes are blown away
+
+	props: {
+		raw: '<p>this is some html</p> <p>and so is this</p>'
+	},
+
+	snapshot(target) {
+		const ps = target.querySelectorAll('p');
+
+		return {
+			p0: ps[0],
+			text0: ps[0].firstChild,
+			p1: ps[1],
+			text1: ps[1].firstChild
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const ps = target.querySelectorAll('p');
+
+		assert.equal(ps[0], snapshot.p0);
+		assert.equal(ps[0].firstChild, snapshot.text0);
+		assert.equal(ps[1], snapshot.p1);
+		assert.equal(ps[1].firstChild, snapshot.text1);
+	}
+};
diff --git a/test/hydration/samples/raw/main.svelte b/test/hydration/samples/raw/main.svelte
new file mode 100644
index 0000000000..105e9e0581
--- /dev/null
+++ b/test/hydration/samples/raw/main.svelte
@@ -0,0 +1 @@
+{@html raw}
\ No newline at end of file
diff --git a/test/hydration/samples/text-fallback/Nested.svelte b/test/hydration/samples/text-fallback/Nested.svelte
new file mode 100644
index 0000000000..b5b69bdc97
--- /dev/null
+++ b/test/hydration/samples/text-fallback/Nested.svelte
@@ -0,0 +1,7 @@
+<div>
+	<slot name="foo">
+		foo fallback
+	</slot>
+
+	<slot></slot>
+</div>
\ No newline at end of file
diff --git a/test/hydration/samples/text-fallback/_after.html b/test/hydration/samples/text-fallback/_after.html
new file mode 100644
index 0000000000..2d75e43c99
--- /dev/null
+++ b/test/hydration/samples/text-fallback/_after.html
@@ -0,0 +1,4 @@
+<div>
+	<div slot="foo">foo override</div>
+	default
+</div>
\ No newline at end of file
diff --git a/test/hydration/samples/text-fallback/_before.html b/test/hydration/samples/text-fallback/_before.html
new file mode 100644
index 0000000000..2d75e43c99
--- /dev/null
+++ b/test/hydration/samples/text-fallback/_before.html
@@ -0,0 +1,4 @@
+<div>
+	<div slot="foo">foo override</div>
+	default
+</div>
\ No newline at end of file
diff --git a/test/hydration/samples/text-fallback/main.svelte b/test/hydration/samples/text-fallback/main.svelte
new file mode 100644
index 0000000000..effe43254e
--- /dev/null
+++ b/test/hydration/samples/text-fallback/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Nested from './Nested.svelte'
+</script>
+
+<Nested>
+	<div slot="foo">
+		foo override
+	</div>
+
+	default
+</Nested>
diff --git a/test/hydration/samples/top-level-cleanup-2/_after.html b/test/hydration/samples/top-level-cleanup-2/_after.html
new file mode 100644
index 0000000000..8dca56dd88
--- /dev/null
+++ b/test/hydration/samples/top-level-cleanup-2/_after.html
@@ -0,0 +1 @@
+<div>Hello world</div>
\ No newline at end of file
diff --git a/test/hydration/samples/top-level-cleanup-2/_before.html b/test/hydration/samples/top-level-cleanup-2/_before.html
new file mode 100644
index 0000000000..fdc2379f63
--- /dev/null
+++ b/test/hydration/samples/top-level-cleanup-2/_before.html
@@ -0,0 +1,2 @@
+<main>This should be thrown away</main>
+<div>hello</div>
\ No newline at end of file
diff --git a/test/hydration/samples/top-level-cleanup-2/_config.js b/test/hydration/samples/top-level-cleanup-2/_config.js
new file mode 100644
index 0000000000..ff8b4c5632
--- /dev/null
+++ b/test/hydration/samples/top-level-cleanup-2/_config.js
@@ -0,0 +1 @@
+export default {};
diff --git a/test/hydration/samples/top-level-cleanup-2/main.svelte b/test/hydration/samples/top-level-cleanup-2/main.svelte
new file mode 100644
index 0000000000..8dca56dd88
--- /dev/null
+++ b/test/hydration/samples/top-level-cleanup-2/main.svelte
@@ -0,0 +1 @@
+<div>Hello world</div>
\ No newline at end of file
diff --git a/test/hydration/samples/top-level-cleanup/_after.html b/test/hydration/samples/top-level-cleanup/_after.html
new file mode 100644
index 0000000000..8dca56dd88
--- /dev/null
+++ b/test/hydration/samples/top-level-cleanup/_after.html
@@ -0,0 +1 @@
+<div>Hello world</div>
\ No newline at end of file
diff --git a/test/hydration/samples/top-level-cleanup/_before.html b/test/hydration/samples/top-level-cleanup/_before.html
new file mode 100644
index 0000000000..c7e4bba233
--- /dev/null
+++ b/test/hydration/samples/top-level-cleanup/_before.html
@@ -0,0 +1 @@
+<main>This should be thrown away</main>
\ No newline at end of file
diff --git a/test/hydration/samples/top-level-cleanup/_config.js b/test/hydration/samples/top-level-cleanup/_config.js
new file mode 100644
index 0000000000..ff8b4c5632
--- /dev/null
+++ b/test/hydration/samples/top-level-cleanup/_config.js
@@ -0,0 +1 @@
+export default {};
diff --git a/test/hydration/samples/top-level-cleanup/main.svelte b/test/hydration/samples/top-level-cleanup/main.svelte
new file mode 100644
index 0000000000..8dca56dd88
--- /dev/null
+++ b/test/hydration/samples/top-level-cleanup/main.svelte
@@ -0,0 +1 @@
+<div>Hello world</div>
\ No newline at end of file
diff --git a/test/hydration/samples/top-level-text/_after.html b/test/hydration/samples/top-level-text/_after.html
new file mode 100644
index 0000000000..4add785daf
--- /dev/null
+++ b/test/hydration/samples/top-level-text/_after.html
@@ -0,0 +1 @@
+Text
\ No newline at end of file
diff --git a/test/hydration/samples/top-level-text/_before.html b/test/hydration/samples/top-level-text/_before.html
new file mode 100644
index 0000000000..4add785daf
--- /dev/null
+++ b/test/hydration/samples/top-level-text/_before.html
@@ -0,0 +1 @@
+Text
\ No newline at end of file
diff --git a/test/hydration/samples/top-level-text/_config.js b/test/hydration/samples/top-level-text/_config.js
new file mode 100644
index 0000000000..2ccf126555
--- /dev/null
+++ b/test/hydration/samples/top-level-text/_config.js
@@ -0,0 +1,13 @@
+export default {
+	snapshot(target) {
+		return {
+			text: target.childNodes[0]
+		};
+	},
+
+	test(assert, target, snapshot) {
+		const text = target.childNodes[0];
+
+		assert.equal(text, snapshot.text);
+	}
+};
diff --git a/test/hydration/samples/top-level-text/main.svelte b/test/hydration/samples/top-level-text/main.svelte
new file mode 100644
index 0000000000..4add785daf
--- /dev/null
+++ b/test/hydration/samples/top-level-text/main.svelte
@@ -0,0 +1 @@
+Text
\ No newline at end of file
diff --git a/test/js/README.md b/test/js/README.md
new file mode 100644
index 0000000000..c43905123e
--- /dev/null
+++ b/test/js/README.md
@@ -0,0 +1 @@
+Use these tests sparingly, as they will need to be updated frequently as the code generation changes.
\ No newline at end of file
diff --git a/test/js/index.ts b/test/js/index.ts
new file mode 100644
index 0000000000..b94c9c01d6
--- /dev/null
+++ b/test/js/index.ts
@@ -0,0 +1,72 @@
+import * as assert from 'assert';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as colors from 'kleur';
+import { loadConfig, svelte, shouldUpdateExpected } from '../helpers';
+
+describe('js', () => {
+	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
+		if (dir[0] === '.') return;
+
+		// add .solo to a sample directory name to only run that test
+		const solo = /\.solo/.test(dir);
+
+		if (solo && process.env.CI) {
+			throw new Error('Forgot to remove `solo: true` from test');
+		}
+
+		const resolved = path.resolve(`${__dirname}/samples`, dir);
+
+		if (!fs.existsSync(`${resolved}/input.svelte`)) {
+			console.log(colors.red().bold(`Missing file ${dir}/input.svelte. If you recently switched branches you may need to delete this directory`));
+			return;
+		}
+
+		(solo ? it.only : it)(dir, () => {
+			const config = loadConfig(`${resolved}/_config.js`);
+
+			const input = fs.readFileSync(`${resolved}/input.svelte`, 'utf-8').replace(/\s+$/, '').replace(/\r/g, '');
+
+			let actual;
+
+			try {
+				const options = Object.assign(config.options || {});
+
+				actual = svelte.compile(input, options).js.code.replace(/generated by Svelte v\d+\.\d+\.\d+(-\w+\.\d+)?/, 'generated by Svelte vX.Y.Z');
+			} catch (err) {
+				console.log(err.frame);
+				throw err;
+			}
+
+			const output = `${resolved}/_actual.js`;
+			fs.writeFileSync(output, actual);
+
+			const expectedPath = `${resolved}/expected.js`;
+
+			let expected = '';
+			try {
+				expected = fs.readFileSync(expectedPath, 'utf-8');
+			} catch (error) {
+				console.log(error);
+				if (error.code === 'ENOENT') {
+					// missing expected.js
+					fs.writeFileSync(expectedPath, actual);
+				}
+			}
+
+			try {
+				assert.equal(
+					actual.trim().replace(/^[ \t]+$/gm, '').replace(/\r/g, ''),
+					expected.trim().replace(/^[ \t]+$/gm, '').replace(/\r/g, '')
+				);
+			} catch (error) {
+				if (shouldUpdateExpected()) {
+					fs.writeFileSync(expectedPath, actual);
+					console.log(`Updated ${expectedPath}.`);
+				} else {
+					throw error;
+				}
+			}
+		});
+	});
+});
diff --git a/test/js/samples/action-custom-event-handler/expected.js b/test/js/samples/action-custom-event-handler/expected.js
new file mode 100644
index 0000000000..6433d5b04a
--- /dev/null
+++ b/test/js/samples/action-custom-event-handler/expected.js
@@ -0,0 +1,72 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	action_destroyer,
+	detach,
+	element,
+	init,
+	insert,
+	is_function,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let button;
+	let foo_action;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			button = element("button");
+			button.textContent = "foo";
+		},
+		m(target, anchor) {
+			insert(target, button, anchor);
+
+			if (!mounted) {
+				dispose = action_destroyer(foo_action = foo.call(null, button, /*foo_function*/ ctx[1]));
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (foo_action && is_function(foo_action.update) && dirty & /*bar*/ 1) foo_action.update.call(null, /*foo_function*/ ctx[1]);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(button);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function handleFoo(bar) {
+	console.log(bar);
+}
+
+function foo(node, callback) {
+	
+} // code goes here
+
+function instance($$self, $$props, $$invalidate) {
+	let { bar } = $$props;
+	const foo_function = () => handleFoo(bar);
+
+	$$self.$$set = $$props => {
+		if ('bar' in $$props) $$invalidate(0, bar = $$props.bar);
+	};
+
+	return [bar, foo_function];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { bar: 0 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/action-custom-event-handler/input.svelte b/test/js/samples/action-custom-event-handler/input.svelte
new file mode 100644
index 0000000000..12234b8085
--- /dev/null
+++ b/test/js/samples/action-custom-event-handler/input.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let bar;
+
+	function handleFoo(bar) {
+		console.log(bar);
+	}
+
+	function foo(node, callback) {
+		// code goes here
+	}
+</script>
+
+<button use:foo='{() => handleFoo(bar)}'>foo</button>
\ No newline at end of file
diff --git a/test/js/samples/action/expected.js b/test/js/samples/action/expected.js
new file mode 100644
index 0000000000..689669c5bc
--- /dev/null
+++ b/test/js/samples/action/expected.js
@@ -0,0 +1,67 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	action_destroyer,
+	attr,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let a;
+	let link_action;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			a = element("a");
+			a.textContent = "Test";
+			attr(a, "href", "#");
+		},
+		m(target, anchor) {
+			insert(target, a, anchor);
+
+			if (!mounted) {
+				dispose = action_destroyer(link_action = link.call(null, a));
+				mounted = true;
+			}
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(a);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function link(node) {
+	function onClick(event) {
+		event.preventDefault();
+		history.pushState(null, null, event.target.href);
+	}
+
+	node.addEventListener('click', onClick);
+
+	return {
+		destroy() {
+			node.removeEventListener('click', onClick);
+		}
+	};
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/action/input.svelte b/test/js/samples/action/input.svelte
new file mode 100644
index 0000000000..3722587039
--- /dev/null
+++ b/test/js/samples/action/input.svelte
@@ -0,0 +1,18 @@
+<script>
+  function link(node) {
+    function onClick(event) {
+      event.preventDefault();
+      history.pushState(null, null, event.target.href);
+    }
+
+    node.addEventListener('click', onClick);
+
+    return {
+      destroy() {
+        node.removeEventListener('click', onClick);
+      }
+    }
+  }
+</script>
+
+<a href="#" use:link>Test</a>
\ No newline at end of file
diff --git a/test/js/samples/bind-online/expected.js b/test/js/samples/bind-online/expected.js
new file mode 100644
index 0000000000..887195bce1
--- /dev/null
+++ b/test/js/samples/bind-online/expected.js
@@ -0,0 +1,56 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	add_render_callback,
+	init,
+	listen,
+	noop,
+	run_all,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let mounted;
+	let dispose;
+	add_render_callback(/*onlinestatuschanged*/ ctx[1]);
+
+	return {
+		c: noop,
+		m(target, anchor) {
+			if (!mounted) {
+				dispose = [
+					listen(window, "online", /*onlinestatuschanged*/ ctx[1]),
+					listen(window, "offline", /*onlinestatuschanged*/ ctx[1])
+				];
+
+				mounted = true;
+			}
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let online;
+
+	function onlinestatuschanged() {
+		$$invalidate(0, online = navigator.onLine);
+	}
+
+	return [online, onlinestatuschanged];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/bind-online/input.svelte b/test/js/samples/bind-online/input.svelte
new file mode 100644
index 0000000000..99aa93b12d
--- /dev/null
+++ b/test/js/samples/bind-online/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let online;
+</script>
+
+<svelte:window bind:online/>
\ No newline at end of file
diff --git a/test/js/samples/bind-open/expected.js b/test/js/samples/bind-open/expected.js
new file mode 100644
index 0000000000..669cb41405
--- /dev/null
+++ b/test/js/samples/bind-open/expected.js
@@ -0,0 +1,69 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let details;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			details = element("details");
+			details.innerHTML = `<summary>summary</summary>content`;
+		},
+		m(target, anchor) {
+			insert(target, details, anchor);
+			details.open = /*open*/ ctx[0];
+
+			if (!mounted) {
+				dispose = listen(details, "toggle", /*details_toggle_handler*/ ctx[1]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*open*/ 1) {
+				details.open = /*open*/ ctx[0];
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(details);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { open } = $$props;
+
+	function details_toggle_handler() {
+		open = this.open;
+		$$invalidate(0, open);
+	}
+
+	$$self.$$set = $$props => {
+		if ('open' in $$props) $$invalidate(0, open = $$props.open);
+	};
+
+	return [open, details_toggle_handler];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { open: 0 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/bind-open/input.svelte b/test/js/samples/bind-open/input.svelte
new file mode 100644
index 0000000000..3dd2b03a73
--- /dev/null
+++ b/test/js/samples/bind-open/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let open;
+</script>
+
+<details bind:open={open}>
+	<summary>summary</summary>content
+</details>
diff --git a/test/js/samples/bind-width-height/expected.js b/test/js/samples/bind-width-height/expected.js
new file mode 100644
index 0000000000..8966e57c9c
--- /dev/null
+++ b/test/js/samples/bind-width-height/expected.js
@@ -0,0 +1,64 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	add_render_callback,
+	add_resize_listener,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let div;
+	let div_resize_listener;
+
+	return {
+		c() {
+			div = element("div");
+			div.textContent = "some content";
+			add_render_callback(() => /*div_elementresize_handler*/ ctx[2].call(div));
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[2].bind(div));
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+			div_resize_listener();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { w } = $$props;
+	let { h } = $$props;
+
+	function div_elementresize_handler() {
+		w = this.offsetWidth;
+		h = this.offsetHeight;
+		$$invalidate(0, w);
+		$$invalidate(1, h);
+	}
+
+	$$self.$$set = $$props => {
+		if ('w' in $$props) $$invalidate(0, w = $$props.w);
+		if ('h' in $$props) $$invalidate(1, h = $$props.h);
+	};
+
+	return [w, h, div_elementresize_handler];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { w: 0, h: 1 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/bind-width-height/input.svelte b/test/js/samples/bind-width-height/input.svelte
new file mode 100644
index 0000000000..1a3bd05eef
--- /dev/null
+++ b/test/js/samples/bind-width-height/input.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let w;
+	export let h;
+</script>
+
+<div bind:offsetWidth={w} bind:offsetHeight={h}>
+	some content
+</div>
\ No newline at end of file
diff --git a/test/js/samples/bindings-readonly-order/expected.js b/test/js/samples/bindings-readonly-order/expected.js
new file mode 100644
index 0000000000..ea83573ee3
--- /dev/null
+++ b/test/js/samples/bindings-readonly-order/expected.js
@@ -0,0 +1,85 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	attr,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	run_all,
+	safe_not_equal,
+	space
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let input0;
+	let t;
+	let input1;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			input0 = element("input");
+			t = space();
+			input1 = element("input");
+			attr(input0, "type", "file");
+			attr(input1, "type", "file");
+		},
+		m(target, anchor) {
+			insert(target, input0, anchor);
+			insert(target, t, anchor);
+			insert(target, input1, anchor);
+
+			if (!mounted) {
+				dispose = [
+					listen(input0, "change", /*input0_change_handler*/ ctx[1]),
+					listen(input1, "change", /*input1_change_handler*/ ctx[2])
+				];
+
+				mounted = true;
+			}
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(input0);
+			if (detaching) detach(t);
+			if (detaching) detach(input1);
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { files } = $$props;
+
+	function input0_change_handler() {
+		files = this.files;
+		$$invalidate(0, files);
+	}
+
+	function input1_change_handler() {
+		files = this.files;
+		$$invalidate(0, files);
+	}
+
+	$$self.$$set = $$props => {
+		if ('files' in $$props) $$invalidate(0, files = $$props.files);
+	};
+
+	return [files, input0_change_handler, input1_change_handler];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { files: 0 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/bindings-readonly-order/input.svelte b/test/js/samples/bindings-readonly-order/input.svelte
new file mode 100644
index 0000000000..9a133b90f2
--- /dev/null
+++ b/test/js/samples/bindings-readonly-order/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let files;
+</script>
+
+<input type="file" bind:files>
+<input bind:files type="file">
diff --git a/test/js/samples/capture-inject-dev-only/_config.js b/test/js/samples/capture-inject-dev-only/_config.js
new file mode 100644
index 0000000000..1f2b217a9a
--- /dev/null
+++ b/test/js/samples/capture-inject-dev-only/_config.js
@@ -0,0 +1,5 @@
+export default {
+	options: {
+		dev: false
+	}
+};
diff --git a/test/js/samples/capture-inject-dev-only/expected.js b/test/js/samples/capture-inject-dev-only/expected.js
new file mode 100644
index 0000000000..a87693dd9e
--- /dev/null
+++ b/test/js/samples/capture-inject-dev-only/expected.js
@@ -0,0 +1,82 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal,
+	set_data,
+	set_input_value,
+	space,
+	text
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let p;
+	let t0;
+	let t1;
+	let input;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			p = element("p");
+			t0 = text(/*foo*/ ctx[0]);
+			t1 = space();
+			input = element("input");
+		},
+		m(target, anchor) {
+			insert(target, p, anchor);
+			append(p, t0);
+			insert(target, t1, anchor);
+			insert(target, input, anchor);
+			set_input_value(input, /*foo*/ ctx[0]);
+
+			if (!mounted) {
+				dispose = listen(input, "input", /*input_input_handler*/ ctx[1]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*foo*/ 1) set_data(t0, /*foo*/ ctx[0]);
+
+			if (dirty & /*foo*/ 1 && input.value !== /*foo*/ ctx[0]) {
+				set_input_value(input, /*foo*/ ctx[0]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(p);
+			if (detaching) detach(t1);
+			if (detaching) detach(input);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let foo = "bar";
+
+	function input_input_handler() {
+		foo = this.value;
+		$$invalidate(0, foo);
+	}
+
+	return [foo, input_input_handler];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/capture-inject-dev-only/input.svelte b/test/js/samples/capture-inject-dev-only/input.svelte
new file mode 100644
index 0000000000..b4f2088b49
--- /dev/null
+++ b/test/js/samples/capture-inject-dev-only/input.svelte
@@ -0,0 +1,5 @@
+<script>
+    let foo = "bar";
+</script>
+<p>{foo}</p>
+<input bind:value={foo}>
\ No newline at end of file
diff --git a/test/js/samples/capture-inject-state/_config.js b/test/js/samples/capture-inject-state/_config.js
new file mode 100644
index 0000000000..414b026a97
--- /dev/null
+++ b/test/js/samples/capture-inject-state/_config.js
@@ -0,0 +1,5 @@
+export default {
+	options: {
+		dev: true
+	}
+};
diff --git a/test/js/samples/capture-inject-state/expected.js b/test/js/samples/capture-inject-state/expected.js
new file mode 100644
index 0000000000..58e1879553
--- /dev/null
+++ b/test/js/samples/capture-inject-state/expected.js
@@ -0,0 +1,200 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponentDev,
+	add_location,
+	append_dev,
+	detach_dev,
+	dispatch_dev,
+	element,
+	init,
+	insert_dev,
+	noop,
+	safe_not_equal,
+	set_data_dev,
+	space,
+	subscribe,
+	text,
+	validate_slots,
+	validate_store
+} from "svelte/internal";
+
+const file = undefined;
+
+function create_fragment(ctx) {
+	let p;
+	let t0;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let t9;
+	let t10;
+
+	const block = {
+		c: function create() {
+			p = element("p");
+			t0 = text(/*prop*/ ctx[0]);
+			t1 = space();
+			t2 = text(/*realName*/ ctx[1]);
+			t3 = space();
+			t4 = text(/*local*/ ctx[3]);
+			t5 = space();
+			t6 = text(priv);
+			t7 = space();
+			t8 = text(/*$prop*/ ctx[2]);
+			t9 = space();
+			t10 = text(/*shadowedByModule*/ ctx[4]);
+			add_location(p, file, 22, 0, 430);
+		},
+		l: function claim(nodes) {
+			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+		},
+		m: function mount(target, anchor) {
+			insert_dev(target, p, anchor);
+			append_dev(p, t0);
+			append_dev(p, t1);
+			append_dev(p, t2);
+			append_dev(p, t3);
+			append_dev(p, t4);
+			append_dev(p, t5);
+			append_dev(p, t6);
+			append_dev(p, t7);
+			append_dev(p, t8);
+			append_dev(p, t9);
+			append_dev(p, t10);
+		},
+		p: function update(ctx, [dirty]) {
+			if (dirty & /*prop*/ 1) set_data_dev(t0, /*prop*/ ctx[0]);
+			if (dirty & /*realName*/ 2) set_data_dev(t2, /*realName*/ ctx[1]);
+			if (dirty & /*$prop*/ 4) set_data_dev(t8, /*$prop*/ ctx[2]);
+		},
+		i: noop,
+		o: noop,
+		d: function destroy(detaching) {
+			if (detaching) detach_dev(p);
+		}
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_fragment.name,
+		type: "component",
+		source: "",
+		ctx
+	});
+
+	return block;
+}
+
+let moduleLiveBinding;
+const moduleContantProps = 4;
+let moduleLet;
+const moduleConst = 2;
+let shadowedByModule;
+const priv = 'priv';
+
+function instance($$self, $$props, $$invalidate) {
+	let computed;
+
+	let $prop,
+		$$unsubscribe_prop = noop,
+		$$subscribe_prop = () => ($$unsubscribe_prop(), $$unsubscribe_prop = subscribe(prop, $$value => $$invalidate(2, $prop = $$value)), prop);
+
+	$$self.$$.on_destroy.push(() => $$unsubscribe_prop());
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots('Component', slots, []);
+	let { prop } = $$props;
+	validate_store(prop, 'prop');
+	$$subscribe_prop();
+	let { alias: realName } = $$props;
+	let local;
+	let shadowedByModule;
+	const writable_props = ['prop', 'alias'];
+
+	Object.keys($$props).forEach(key => {
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Component> was created with unknown prop '${key}'`);
+	});
+
+	$$self.$$set = $$props => {
+		if ('prop' in $$props) $$subscribe_prop($$invalidate(0, prop = $$props.prop));
+		if ('alias' in $$props) $$invalidate(1, realName = $$props.alias);
+	};
+
+	$$self.$capture_state = () => ({
+		moduleLiveBinding,
+		moduleContantProps,
+		moduleLet,
+		moduleConst,
+		shadowedByModule,
+		prop,
+		realName,
+		local,
+		priv,
+		shadowedByModule,
+		computed,
+		$prop
+	});
+
+	$$self.$inject_state = $$props => {
+		if ('prop' in $$props) $$subscribe_prop($$invalidate(0, prop = $$props.prop));
+		if ('realName' in $$props) $$invalidate(1, realName = $$props.realName);
+		if ('local' in $$props) $$invalidate(3, local = $$props.local);
+		if ('shadowedByModule' in $$props) $$invalidate(4, shadowedByModule = $$props.shadowedByModule);
+		if ('computed' in $$props) computed = $$props.computed;
+	};
+
+	if ($$props && "$$inject" in $$props) {
+		$$self.$inject_state($$props.$$inject);
+	}
+
+	$: computed = local * 2;
+	return [prop, realName, $prop, local, shadowedByModule];
+}
+
+class Component extends SvelteComponentDev {
+	constructor(options) {
+		super(options);
+		init(this, options, instance, create_fragment, safe_not_equal, { prop: 0, alias: 1 });
+
+		dispatch_dev("SvelteRegisterComponent", {
+			component: this,
+			tagName: "Component",
+			options,
+			id: create_fragment.name
+		});
+
+		const { ctx } = this.$$;
+		const props = options.props || {};
+
+		if (/*prop*/ ctx[0] === undefined && !('prop' in props)) {
+			console.warn("<Component> was created without expected prop 'prop'");
+		}
+
+		if (/*realName*/ ctx[1] === undefined && !('alias' in props)) {
+			console.warn("<Component> was created without expected prop 'alias'");
+		}
+	}
+
+	get prop() {
+		throw new Error("<Component>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	set prop(value) {
+		throw new Error("<Component>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	get alias() {
+		throw new Error("<Component>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	set alias(value) {
+		throw new Error("<Component>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+}
+
+export default Component;
+export { moduleLiveBinding, moduleContantProps };
\ No newline at end of file
diff --git a/test/js/samples/capture-inject-state/input.svelte b/test/js/samples/capture-inject-state/input.svelte
new file mode 100644
index 0000000000..a1051bc147
--- /dev/null
+++ b/test/js/samples/capture-inject-state/input.svelte
@@ -0,0 +1,23 @@
+<script context="module">
+  export let moduleLiveBinding;
+  export const moduleContantProps = 4;
+  let moduleLet;
+  const moduleConst = 2;
+  let shadowedByModule;
+</script>
+<script>
+  export let prop;
+
+  let realName;
+  export { realName as alias };
+
+  let local;
+
+  const priv = 'priv';
+
+  $: computed = local * 2;
+
+  let shadowedByModule;
+</script>
+<!-- NOTE $prop ensures store subscriptions are not part of captured state -->
+<p>{prop} {realName} {local} {priv} {$prop} {shadowedByModule}</p>
diff --git a/test/js/samples/collapse-element-class-name/expected.js b/test/js/samples/collapse-element-class-name/expected.js
new file mode 100644
index 0000000000..a55affe76e
--- /dev/null
+++ b/test/js/samples/collapse-element-class-name/expected.js
@@ -0,0 +1,114 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	assign,
+	attr,
+	compute_rest_props,
+	create_component,
+	destroy_component,
+	detach,
+	element,
+	exclude_internal_props,
+	init,
+	insert,
+	mount_component,
+	safe_not_equal,
+	space,
+	transition_in,
+	transition_out
+} from "svelte/internal";
+
+import Component from "./Component.svelte";
+
+function create_fragment(ctx) {
+	let div;
+	let div_class_value;
+	let div_style_value;
+	let div_other_value;
+	let t;
+	let component;
+	let current;
+
+	component = new Component({
+			props: {
+				class: "\n\t\tbutton\n\t\tbutton--size--" + /*size*/ ctx[0] + "\n\t\tbutton--theme--" + /*theme*/ ctx[1] + "\n  \t" + (/*$$restProps*/ ctx[2].class || ''),
+				style: "\n\t\tcolor: green;\n\t\tbackground: white;\n\t\tfont-size: " + /*size*/ ctx[0] + ";\n  \ttransform: " + /*$$restProps*/ ctx[2].scale + "  " + /*$$restProps*/ ctx[2].rotate + ";\n\t\t" + /*$$restProps*/ ctx[2].styles,
+				other: "\n\t\tbutton\n\t\tbutton--size--" + /*size*/ ctx[0] + "\n\t\tbutton--theme--" + /*theme*/ ctx[1] + "\n  \t" + (/*$$restProps*/ ctx[2].class || '')
+			}
+		});
+
+	return {
+		c() {
+			div = element("div");
+			t = space();
+			create_component(component.$$.fragment);
+			attr(div, "class", div_class_value = "button button--size--" + /*size*/ ctx[0] + " button--theme--" + /*theme*/ ctx[1] + " " + (/*$$restProps*/ ctx[2].class || ''));
+			attr(div, "style", div_style_value = "color: green; background: white; font-size: " + /*size*/ ctx[0] + "; transform: " + /*$$restProps*/ ctx[2].scale + " " + /*$$restProps*/ ctx[2].rotate + "; " + /*$$restProps*/ ctx[2].styles);
+			attr(div, "other", div_other_value = "\n\t\tbutton\n\t\tbutton--size--" + /*size*/ ctx[0] + "\n\t\tbutton--theme--" + /*theme*/ ctx[1] + "\n  \t" + (/*$$restProps*/ ctx[2].class || ''));
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			insert(target, t, anchor);
+			mount_component(component, target, anchor);
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			if (!current || dirty & /*size, theme, $$restProps*/ 7 && div_class_value !== (div_class_value = "button button--size--" + /*size*/ ctx[0] + " button--theme--" + /*theme*/ ctx[1] + " " + (/*$$restProps*/ ctx[2].class || ''))) {
+				attr(div, "class", div_class_value);
+			}
+
+			if (!current || dirty & /*size, $$restProps*/ 5 && div_style_value !== (div_style_value = "color: green; background: white; font-size: " + /*size*/ ctx[0] + "; transform: " + /*$$restProps*/ ctx[2].scale + " " + /*$$restProps*/ ctx[2].rotate + "; " + /*$$restProps*/ ctx[2].styles)) {
+				attr(div, "style", div_style_value);
+			}
+
+			if (!current || dirty & /*size, theme, $$restProps*/ 7 && div_other_value !== (div_other_value = "\n\t\tbutton\n\t\tbutton--size--" + /*size*/ ctx[0] + "\n\t\tbutton--theme--" + /*theme*/ ctx[1] + "\n  \t" + (/*$$restProps*/ ctx[2].class || ''))) {
+				attr(div, "other", div_other_value);
+			}
+
+			const component_changes = {};
+			if (dirty & /*size, theme, $$restProps*/ 7) component_changes.class = "\n\t\tbutton\n\t\tbutton--size--" + /*size*/ ctx[0] + "\n\t\tbutton--theme--" + /*theme*/ ctx[1] + "\n  \t" + (/*$$restProps*/ ctx[2].class || '');
+			if (dirty & /*size, $$restProps*/ 5) component_changes.style = "\n\t\tcolor: green;\n\t\tbackground: white;\n\t\tfont-size: " + /*size*/ ctx[0] + ";\n  \ttransform: " + /*$$restProps*/ ctx[2].scale + "  " + /*$$restProps*/ ctx[2].rotate + ";\n\t\t" + /*$$restProps*/ ctx[2].styles;
+			if (dirty & /*size, theme, $$restProps*/ 7) component_changes.other = "\n\t\tbutton\n\t\tbutton--size--" + /*size*/ ctx[0] + "\n\t\tbutton--theme--" + /*theme*/ ctx[1] + "\n  \t" + (/*$$restProps*/ ctx[2].class || '');
+			component.$set(component_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(component.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(component.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			if (detaching) detach(t);
+			destroy_component(component, detaching);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	const omit_props_names = ["size","theme"];
+	let $$restProps = compute_rest_props($$props, omit_props_names);
+	let { size } = $$props;
+	let { theme } = $$props;
+
+	$$self.$$set = $$new_props => {
+		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
+		$$invalidate(2, $$restProps = compute_rest_props($$props, omit_props_names));
+		if ('size' in $$new_props) $$invalidate(0, size = $$new_props.size);
+		if ('theme' in $$new_props) $$invalidate(1, theme = $$new_props.theme);
+	};
+
+	return [size, theme, $$restProps];
+}
+
+class Component_1 extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { size: 0, theme: 1 });
+	}
+}
+
+export default Component_1;
\ No newline at end of file
diff --git a/test/js/samples/collapse-element-class-name/input.svelte b/test/js/samples/collapse-element-class-name/input.svelte
new file mode 100644
index 0000000000..a4cb283778
--- /dev/null
+++ b/test/js/samples/collapse-element-class-name/input.svelte
@@ -0,0 +1,41 @@
+<script>
+  import Component from "./Component.svelte";
+  export let size;
+  export let theme;
+</script>
+
+<div
+  class="
+		button
+		button--size--{size}
+		button--theme--{theme}
+  	{$$restProps.class || ''}"
+	style="
+		color: green;
+		background: white;
+		font-size: {size};
+  	transform: {$$restProps.scale}  {$$restProps.rotate};
+		{$$restProps.styles}"
+  other="
+		button
+		button--size--{size}
+		button--theme--{theme}
+  	{$$restProps.class || ''}" />
+
+<Component
+	class="
+		button
+		button--size--{size}
+		button--theme--{theme}
+  	{$$restProps.class || ''}"
+	style="
+		color: green;
+		background: white;
+		font-size: {size};
+  	transform: {$$restProps.scale}  {$$restProps.rotate};
+		{$$restProps.styles}"
+  other="
+		button
+		button--size--{size}
+		button--theme--{theme}
+  	{$$restProps.class || ''}" />
\ No newline at end of file
diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js
new file mode 100644
index 0000000000..63a32bbf38
--- /dev/null
+++ b/test/js/samples/collapses-text-around-comments/expected.js
@@ -0,0 +1,63 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	append_styles,
+	attr,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_data,
+	text
+} from "svelte/internal";
+
+function add_css(target) {
+	append_styles(target, "svelte-1a7i8ec", "p.svelte-1a7i8ec{color:red}");
+}
+
+function create_fragment(ctx) {
+	let p;
+	let t;
+
+	return {
+		c() {
+			p = element("p");
+			t = text(/*foo*/ ctx[0]);
+			attr(p, "class", "svelte-1a7i8ec");
+		},
+		m(target, anchor) {
+			insert(target, p, anchor);
+			append(p, t);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*foo*/ 1) set_data(t, /*foo*/ ctx[0]);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(p);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { foo = 42 } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('foo' in $$props) $$invalidate(0, foo = $$props.foo);
+	};
+
+	return [foo];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { foo: 0 }, add_css);
+	}
+}
+
+export default Component;
diff --git a/test/js/samples/collapses-text-around-comments/input.svelte b/test/js/samples/collapses-text-around-comments/input.svelte
new file mode 100644
index 0000000000..a368b09ca4
--- /dev/null
+++ b/test/js/samples/collapses-text-around-comments/input.svelte
@@ -0,0 +1,27 @@
+<script>
+	export let foo = 42;
+</script>
+
+<!-- a -->
+
+<!-- b -->
+
+<p>{foo}</p>
+
+<!-- c -->
+
+<!-- d -->
+
+<style>
+	p {
+		color: red;
+	}
+</style>
+
+<!-- e -->
+
+
+
+<!-- f -->
+
+<!-- g -->
\ No newline at end of file
diff --git a/test/js/samples/component-static-array/expected.js b/test/js/samples/component-static-array/expected.js
new file mode 100644
index 0000000000..0ecb0f32ba
--- /dev/null
+++ b/test/js/samples/component-static-array/expected.js
@@ -0,0 +1,55 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	create_component,
+	destroy_component,
+	init,
+	mount_component,
+	noop,
+	safe_not_equal,
+	transition_in,
+	transition_out
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let nested;
+	let current;
+	nested = new /*Nested*/ ctx[0]({ props: { foo: [1, 2, 3] } });
+
+	return {
+		c() {
+			create_component(nested.$$.fragment);
+		},
+		m(target, anchor) {
+			mount_component(nested, target, anchor);
+			current = true;
+		},
+		p: noop,
+		i(local) {
+			if (current) return;
+			transition_in(nested.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(nested.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(nested, detaching);
+		}
+	};
+}
+
+function instance($$self) {
+	const Nested = window.Nested;
+	return [Nested];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/component-static-array/input.svelte b/test/js/samples/component-static-array/input.svelte
new file mode 100644
index 0000000000..3f4ecbe3c7
--- /dev/null
+++ b/test/js/samples/component-static-array/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	const Nested = window.Nested;
+</script>
+
+<Nested foo={[1, 2, 3]}/>
\ No newline at end of file
diff --git a/test/js/samples/component-static-immutable/_config.js b/test/js/samples/component-static-immutable/_config.js
new file mode 100644
index 0000000000..e9026d8223
--- /dev/null
+++ b/test/js/samples/component-static-immutable/_config.js
@@ -0,0 +1,5 @@
+export default {
+	options: {
+		immutable: true
+	}
+};
diff --git a/test/js/samples/component-static-immutable/expected.js b/test/js/samples/component-static-immutable/expected.js
new file mode 100644
index 0000000000..b0c4165413
--- /dev/null
+++ b/test/js/samples/component-static-immutable/expected.js
@@ -0,0 +1,55 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	create_component,
+	destroy_component,
+	init,
+	mount_component,
+	noop,
+	not_equal,
+	transition_in,
+	transition_out
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let nested;
+	let current;
+	nested = new /*Nested*/ ctx[0]({ props: { foo: "bar" } });
+
+	return {
+		c() {
+			create_component(nested.$$.fragment);
+		},
+		m(target, anchor) {
+			mount_component(nested, target, anchor);
+			current = true;
+		},
+		p: noop,
+		i(local) {
+			if (current) return;
+			transition_in(nested.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(nested.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(nested, detaching);
+		}
+	};
+}
+
+function instance($$self) {
+	const Nested = window.Nested;
+	return [Nested];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/component-static-immutable/input.svelte b/test/js/samples/component-static-immutable/input.svelte
new file mode 100644
index 0000000000..370c68e907
--- /dev/null
+++ b/test/js/samples/component-static-immutable/input.svelte
@@ -0,0 +1,7 @@
+<svelte:options immutable/>
+
+<script>
+	const Nested = window.Nested;
+</script>
+
+<Nested foo='bar'/>
diff --git a/test/js/samples/component-static-immutable2/_config.js b/test/js/samples/component-static-immutable2/_config.js
new file mode 100644
index 0000000000..e9026d8223
--- /dev/null
+++ b/test/js/samples/component-static-immutable2/_config.js
@@ -0,0 +1,5 @@
+export default {
+	options: {
+		immutable: true
+	}
+};
diff --git a/test/js/samples/component-static-immutable2/expected.js b/test/js/samples/component-static-immutable2/expected.js
new file mode 100644
index 0000000000..b0c4165413
--- /dev/null
+++ b/test/js/samples/component-static-immutable2/expected.js
@@ -0,0 +1,55 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	create_component,
+	destroy_component,
+	init,
+	mount_component,
+	noop,
+	not_equal,
+	transition_in,
+	transition_out
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let nested;
+	let current;
+	nested = new /*Nested*/ ctx[0]({ props: { foo: "bar" } });
+
+	return {
+		c() {
+			create_component(nested.$$.fragment);
+		},
+		m(target, anchor) {
+			mount_component(nested, target, anchor);
+			current = true;
+		},
+		p: noop,
+		i(local) {
+			if (current) return;
+			transition_in(nested.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(nested.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(nested, detaching);
+		}
+	};
+}
+
+function instance($$self) {
+	const Nested = window.Nested;
+	return [Nested];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/component-static-immutable2/input.svelte b/test/js/samples/component-static-immutable2/input.svelte
new file mode 100644
index 0000000000..0eeff6aeb6
--- /dev/null
+++ b/test/js/samples/component-static-immutable2/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	const Nested = window.Nested;
+</script>
+
+<Nested foo='bar'/>
\ No newline at end of file
diff --git a/test/js/samples/component-static-var/expected.js b/test/js/samples/component-static-var/expected.js
new file mode 100644
index 0000000000..9e481a25c3
--- /dev/null
+++ b/test/js/samples/component-static-var/expected.js
@@ -0,0 +1,108 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	create_component,
+	destroy_component,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	mount_component,
+	safe_not_equal,
+	set_input_value,
+	space,
+	transition_in,
+	transition_out
+} from "svelte/internal";
+
+import Foo from './Foo.svelte';
+import Bar from './Bar.svelte';
+
+function create_fragment(ctx) {
+	let foo;
+	let t0;
+	let bar;
+	let t1;
+	let input;
+	let current;
+	let mounted;
+	let dispose;
+	foo = new Foo({ props: { x: y } });
+	bar = new Bar({ props: { x: /*z*/ ctx[0] } });
+
+	return {
+		c() {
+			create_component(foo.$$.fragment);
+			t0 = space();
+			create_component(bar.$$.fragment);
+			t1 = space();
+			input = element("input");
+		},
+		m(target, anchor) {
+			mount_component(foo, target, anchor);
+			insert(target, t0, anchor);
+			mount_component(bar, target, anchor);
+			insert(target, t1, anchor);
+			insert(target, input, anchor);
+			set_input_value(input, /*z*/ ctx[0]);
+			current = true;
+
+			if (!mounted) {
+				dispose = listen(input, "input", /*input_input_handler*/ ctx[1]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			const bar_changes = {};
+			if (dirty & /*z*/ 1) bar_changes.x = /*z*/ ctx[0];
+			bar.$set(bar_changes);
+
+			if (dirty & /*z*/ 1 && input.value !== /*z*/ ctx[0]) {
+				set_input_value(input, /*z*/ ctx[0]);
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(foo.$$.fragment, local);
+			transition_in(bar.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(foo.$$.fragment, local);
+			transition_out(bar.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(foo, detaching);
+			if (detaching) detach(t0);
+			destroy_component(bar, detaching);
+			if (detaching) detach(t1);
+			if (detaching) detach(input);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+let y = 1;
+
+function instance($$self, $$props, $$invalidate) {
+	let z = 2;
+
+	function input_input_handler() {
+		z = this.value;
+		$$invalidate(0, z);
+	}
+
+	return [z, input_input_handler];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/component-static-var/input.svelte b/test/js/samples/component-static-var/input.svelte
new file mode 100644
index 0000000000..a9621b9726
--- /dev/null
+++ b/test/js/samples/component-static-var/input.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Foo from './Foo.svelte';
+	import Bar from './Bar.svelte';
+
+	let y = 1;
+	let z = 2;
+</script>
+
+<Foo x={y}/>
+<Bar x={z}/>
+
+<!-- ensure z is considered dynamic, even though the binding is encountered late -->
+<input bind:value={z}>
\ No newline at end of file
diff --git a/test/js/samples/component-static/expected.js b/test/js/samples/component-static/expected.js
new file mode 100644
index 0000000000..186f6350e6
--- /dev/null
+++ b/test/js/samples/component-static/expected.js
@@ -0,0 +1,55 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	create_component,
+	destroy_component,
+	init,
+	mount_component,
+	noop,
+	safe_not_equal,
+	transition_in,
+	transition_out
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let nested;
+	let current;
+	nested = new /*Nested*/ ctx[0]({ props: { foo: "bar" } });
+
+	return {
+		c() {
+			create_component(nested.$$.fragment);
+		},
+		m(target, anchor) {
+			mount_component(nested, target, anchor);
+			current = true;
+		},
+		p: noop,
+		i(local) {
+			if (current) return;
+			transition_in(nested.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(nested.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(nested, detaching);
+		}
+	};
+}
+
+function instance($$self) {
+	const Nested = window.Nested;
+	return [Nested];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/component-static/input.svelte b/test/js/samples/component-static/input.svelte
new file mode 100644
index 0000000000..0eeff6aeb6
--- /dev/null
+++ b/test/js/samples/component-static/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	const Nested = window.Nested;
+</script>
+
+<Nested foo='bar'/>
\ No newline at end of file
diff --git a/test/js/samples/component-store-access-invalidate/expected.js b/test/js/samples/component-store-access-invalidate/expected.js
new file mode 100644
index 0000000000..2742481aef
--- /dev/null
+++ b/test/js/samples/component-store-access-invalidate/expected.js
@@ -0,0 +1,56 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	component_subscribe,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_data,
+	text
+} from "svelte/internal";
+
+import { writable } from 'svelte/store';
+
+function create_fragment(ctx) {
+	let h1;
+	let t;
+
+	return {
+		c() {
+			h1 = element("h1");
+			t = text(/*$foo*/ ctx[0]);
+		},
+		m(target, anchor) {
+			insert(target, h1, anchor);
+			append(h1, t);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*$foo*/ 1) set_data(t, /*$foo*/ ctx[0]);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(h1);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let $foo;
+	const foo = writable(0);
+	component_subscribe($$self, foo, value => $$invalidate(0, $foo = value));
+	return [$foo, foo];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/component-store-access-invalidate/input.svelte b/test/js/samples/component-store-access-invalidate/input.svelte
new file mode 100644
index 0000000000..f42bbe295c
--- /dev/null
+++ b/test/js/samples/component-store-access-invalidate/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	import { writable } from 'svelte/store';
+	const foo = writable(0);
+</script>
+
+<h1>{$foo}</h1>
\ No newline at end of file
diff --git a/test/js/samples/component-store-file-invalidate/expected.js b/test/js/samples/component-store-file-invalidate/expected.js
new file mode 100644
index 0000000000..86a467f368
--- /dev/null
+++ b/test/js/samples/component-store-file-invalidate/expected.js
@@ -0,0 +1,34 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	component_subscribe,
+	init,
+	safe_not_equal,
+	set_store_value
+} from "svelte/internal";
+
+import { count } from './store.js';
+
+function instance($$self, $$props, $$invalidate) {
+	let $count;
+	component_subscribe($$self, count, $$value => $$invalidate(1, $count = $$value));
+
+	function increment() {
+		set_store_value(count, $count++, $count);
+	}
+
+	return [increment];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, null, safe_not_equal, { increment: 0 });
+	}
+
+	get increment() {
+		return this.$$.ctx[0];
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/component-store-file-invalidate/input.svelte b/test/js/samples/component-store-file-invalidate/input.svelte
new file mode 100644
index 0000000000..3c2fca2e80
--- /dev/null
+++ b/test/js/samples/component-store-file-invalidate/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { count } from './store.js';
+
+	export function increment() {
+		$count++;
+	}
+</script>
\ No newline at end of file
diff --git a/test/js/samples/component-store-file-invalidate/store.js b/test/js/samples/component-store-file-invalidate/store.js
new file mode 100644
index 0000000000..b799c0ffc4
--- /dev/null
+++ b/test/js/samples/component-store-file-invalidate/store.js
@@ -0,0 +1,3 @@
+import { writable } from '../../../../store';
+
+export const count = writable(0);
diff --git a/test/js/samples/component-store-reassign-invalidate/expected.js b/test/js/samples/component-store-reassign-invalidate/expected.js
new file mode 100644
index 0000000000..9047316cef
--- /dev/null
+++ b/test/js/samples/component-store-reassign-invalidate/expected.js
@@ -0,0 +1,81 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal,
+	set_data,
+	space,
+	subscribe,
+	text
+} from "svelte/internal";
+
+import { writable } from 'svelte/store';
+
+function create_fragment(ctx) {
+	let h1;
+	let t0;
+	let t1;
+	let button;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			h1 = element("h1");
+			t0 = text(/*$foo*/ ctx[1]);
+			t1 = space();
+			button = element("button");
+			button.textContent = "reset";
+		},
+		m(target, anchor) {
+			insert(target, h1, anchor);
+			append(h1, t0);
+			insert(target, t1, anchor);
+			insert(target, button, anchor);
+
+			if (!mounted) {
+				dispose = listen(button, "click", /*click_handler*/ ctx[2]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*$foo*/ 2) set_data(t0, /*$foo*/ ctx[1]);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(h1);
+			if (detaching) detach(t1);
+			if (detaching) detach(button);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let $foo,
+		$$unsubscribe_foo = noop,
+		$$subscribe_foo = () => ($$unsubscribe_foo(), $$unsubscribe_foo = subscribe(foo, $$value => $$invalidate(1, $foo = $$value)), foo);
+
+	$$self.$$.on_destroy.push(() => $$unsubscribe_foo());
+	let foo = writable(0);
+	$$subscribe_foo();
+	const click_handler = () => $$subscribe_foo($$invalidate(0, foo = writable(0)));
+	return [foo, $foo, click_handler];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/component-store-reassign-invalidate/input.svelte b/test/js/samples/component-store-reassign-invalidate/input.svelte
new file mode 100644
index 0000000000..bbb52b9669
--- /dev/null
+++ b/test/js/samples/component-store-reassign-invalidate/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { writable } from 'svelte/store';
+	let foo = writable(0);
+</script>
+
+<h1>{$foo}</h1>
+<button on:click="{() => foo = writable(0)}">reset</button>
\ No newline at end of file
diff --git a/test/js/samples/computed-collapsed-if/expected.js b/test/js/samples/computed-collapsed-if/expected.js
new file mode 100644
index 0000000000..8bcb5ed8b7
--- /dev/null
+++ b/test/js/samples/computed-collapsed-if/expected.js
@@ -0,0 +1,37 @@
+/* generated by Svelte vX.Y.Z */
+import { SvelteComponent, init, safe_not_equal } from "svelte/internal";
+
+function instance($$self, $$props, $$invalidate) {
+	let { x } = $$props;
+
+	function a() {
+		return x * 2;
+	}
+
+	function b() {
+		return x * 3;
+	}
+
+	$$self.$$set = $$props => {
+		if ('x' in $$props) $$invalidate(0, x = $$props.x);
+	};
+
+	return [x, a, b];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, null, safe_not_equal, { x: 0, a: 1, b: 2 });
+	}
+
+	get a() {
+		return this.$$.ctx[1];
+	}
+
+	get b() {
+		return this.$$.ctx[2];
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/computed-collapsed-if/input.svelte b/test/js/samples/computed-collapsed-if/input.svelte
new file mode 100644
index 0000000000..779bb2fdaa
--- /dev/null
+++ b/test/js/samples/computed-collapsed-if/input.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let x;
+
+	export function a() {
+		return x * 2;
+	}
+
+	export function b() {
+		return x * 3;
+	}
+</script>
\ No newline at end of file
diff --git a/test/js/samples/css-media-query/expected.js b/test/js/samples/css-media-query/expected.js
new file mode 100644
index 0000000000..d743432206
--- /dev/null
+++ b/test/js/samples/css-media-query/expected.js
@@ -0,0 +1,45 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append_styles,
+	attr,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function add_css(target) {
+	append_styles(target, "svelte-1slhpfn", "@media(min-width: 1px){div.svelte-1slhpfn{color:red}}");
+}
+
+function create_fragment(ctx) {
+	let div;
+
+	return {
+		c() {
+			div = element("div");
+			attr(div, "class", "svelte-1slhpfn");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {}, add_css);
+	}
+}
+
+export default Component;
diff --git a/test/js/samples/css-media-query/input.svelte b/test/js/samples/css-media-query/input.svelte
new file mode 100644
index 0000000000..cfaa709e0f
--- /dev/null
+++ b/test/js/samples/css-media-query/input.svelte
@@ -0,0 +1,9 @@
+<div></div>
+
+<style>
+	@media (min-width: 1px) {
+		div {
+			color: red;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/test/js/samples/css-shadow-dom-keyframes/_config.js b/test/js/samples/css-shadow-dom-keyframes/_config.js
new file mode 100644
index 0000000000..e8a05d399c
--- /dev/null
+++ b/test/js/samples/css-shadow-dom-keyframes/_config.js
@@ -0,0 +1,5 @@
+export default {
+	options: {
+		customElement: true
+	}
+};
diff --git a/test/js/samples/css-shadow-dom-keyframes/expected.js b/test/js/samples/css-shadow-dom-keyframes/expected.js
new file mode 100644
index 0000000000..5d65949488
--- /dev/null
+++ b/test/js/samples/css-shadow-dom-keyframes/expected.js
@@ -0,0 +1,62 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteElement,
+	attribute_to_object,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let div;
+
+	return {
+		c() {
+			div = element("div");
+			div.textContent = "fades in";
+			this.c = noop;
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+class Component extends SvelteElement {
+	constructor(options) {
+		super();
+		this.shadowRoot.innerHTML = `<style>div{animation:foo 1s}@keyframes foo{0%{opacity:0}100%{opacity:1}}</style>`;
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			null,
+			create_fragment,
+			safe_not_equal,
+			{},
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+		}
+	}
+}
+
+customElements.define("custom-element", Component);
+export default Component;
diff --git a/test/js/samples/css-shadow-dom-keyframes/input.svelte b/test/js/samples/css-shadow-dom-keyframes/input.svelte
new file mode 100644
index 0000000000..bf0aebaa9a
--- /dev/null
+++ b/test/js/samples/css-shadow-dom-keyframes/input.svelte
@@ -0,0 +1,14 @@
+<svelte:options tag="custom-element"/>
+
+<div>fades in</div>
+
+<style>
+	div {
+		animation: foo 1s;
+	}
+
+	@keyframes foo {
+		0% { opacity: 0; }
+		100% { opacity: 1; }
+	}
+</style>
diff --git a/test/js/samples/custom-svelte-path/_config.js b/test/js/samples/custom-svelte-path/_config.js
new file mode 100644
index 0000000000..19a7366845
--- /dev/null
+++ b/test/js/samples/custom-svelte-path/_config.js
@@ -0,0 +1,5 @@
+export default {
+	options: {
+		sveltePath: 'a/b/svelte'
+	}
+};
diff --git a/test/js/samples/custom-svelte-path/expected.js b/test/js/samples/custom-svelte-path/expected.js
new file mode 100644
index 0000000000..3210f216d3
--- /dev/null
+++ b/test/js/samples/custom-svelte-path/expected.js
@@ -0,0 +1,64 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_data,
+	text
+} from "a/b/svelte/internal";
+
+import { onMount } from "a/b/svelte";
+
+function create_fragment(ctx) {
+	let h1;
+	let t0;
+	let t1;
+	let t2;
+
+	return {
+		c() {
+			h1 = element("h1");
+			t0 = text("Hello ");
+			t1 = text(/*name*/ ctx[0]);
+			t2 = text("!");
+		},
+		m(target, anchor) {
+			insert(target, h1, anchor);
+			append(h1, t0);
+			append(h1, t1);
+			append(h1, t2);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*name*/ 1) set_data(t1, /*name*/ ctx[0]);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(h1);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let name = '';
+
+	onMount(() => {
+		$$invalidate(0, name = 'world');
+	});
+
+	return [name];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/custom-svelte-path/input.svelte b/test/js/samples/custom-svelte-path/input.svelte
new file mode 100644
index 0000000000..03d31e7c7b
--- /dev/null
+++ b/test/js/samples/custom-svelte-path/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { onMount } from 'svelte';
+	let name = '';
+  onMount(() => {
+    name = 'world';
+  })
+</script>
+
+<h1>Hello {name}!</h1>
\ No newline at end of file
diff --git a/test/js/samples/data-attribute/expected.js b/test/js/samples/data-attribute/expected.js
new file mode 100644
index 0000000000..2b2f8870e4
--- /dev/null
+++ b/test/js/samples/data-attribute/expected.js
@@ -0,0 +1,64 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	attr,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	space
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let div0;
+	let t;
+	let div1;
+
+	return {
+		c() {
+			div0 = element("div");
+			t = space();
+			div1 = element("div");
+			attr(div0, "data-foo", "bar");
+			attr(div1, "data-foo", /*bar*/ ctx[0]);
+		},
+		m(target, anchor) {
+			insert(target, div0, anchor);
+			insert(target, t, anchor);
+			insert(target, div1, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*bar*/ 1) {
+				attr(div1, "data-foo", /*bar*/ ctx[0]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div0);
+			if (detaching) detach(t);
+			if (detaching) detach(div1);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { bar } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('bar' in $$props) $$invalidate(0, bar = $$props.bar);
+	};
+
+	return [bar];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { bar: 0 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/data-attribute/input.svelte b/test/js/samples/data-attribute/input.svelte
new file mode 100644
index 0000000000..e340b2610f
--- /dev/null
+++ b/test/js/samples/data-attribute/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let bar;
+</script>
+
+<div data-foo='bar'/>
+<div data-foo='{bar}'/>
\ No newline at end of file
diff --git a/test/js/samples/debug-empty/_config.js b/test/js/samples/debug-empty/_config.js
new file mode 100644
index 0000000000..414b026a97
--- /dev/null
+++ b/test/js/samples/debug-empty/_config.js
@@ -0,0 +1,5 @@
+export default {
+	options: {
+		dev: true
+	}
+};
diff --git a/test/js/samples/debug-empty/expected.js b/test/js/samples/debug-empty/expected.js
new file mode 100644
index 0000000000..55303b41b7
--- /dev/null
+++ b/test/js/samples/debug-empty/expected.js
@@ -0,0 +1,127 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponentDev,
+	add_location,
+	append_dev,
+	detach_dev,
+	dispatch_dev,
+	element,
+	init,
+	insert_dev,
+	noop,
+	safe_not_equal,
+	set_data_dev,
+	space,
+	text,
+	validate_slots
+} from "svelte/internal";
+
+const file = undefined;
+
+function create_fragment(ctx) {
+	let h1;
+	let t0;
+	let t1;
+	let t2;
+	let t3;
+
+	const block = {
+		c: function create() {
+			h1 = element("h1");
+			t0 = text("Hello ");
+			t1 = text(/*name*/ ctx[0]);
+			t2 = text("!");
+			t3 = space();
+			debugger;
+			add_location(h1, file, 4, 0, 38);
+		},
+		l: function claim(nodes) {
+			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+		},
+		m: function mount(target, anchor) {
+			insert_dev(target, h1, anchor);
+			append_dev(h1, t0);
+			append_dev(h1, t1);
+			append_dev(h1, t2);
+			insert_dev(target, t3, anchor);
+		},
+		p: function update(ctx, [dirty]) {
+			if (dirty & /*name*/ 1) set_data_dev(t1, /*name*/ ctx[0]);
+			debugger;
+		},
+		i: noop,
+		o: noop,
+		d: function destroy(detaching) {
+			if (detaching) detach_dev(h1);
+			if (detaching) detach_dev(t3);
+		}
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_fragment.name,
+		type: "component",
+		source: "",
+		ctx
+	});
+
+	return block;
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots('Component', slots, []);
+	let { name } = $$props;
+	const writable_props = ['name'];
+
+	Object.keys($$props).forEach(key => {
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Component> was created with unknown prop '${key}'`);
+	});
+
+	$$self.$$set = $$props => {
+		if ('name' in $$props) $$invalidate(0, name = $$props.name);
+	};
+
+	$$self.$capture_state = () => ({ name });
+
+	$$self.$inject_state = $$props => {
+		if ('name' in $$props) $$invalidate(0, name = $$props.name);
+	};
+
+	if ($$props && "$$inject" in $$props) {
+		$$self.$inject_state($$props.$$inject);
+	}
+
+	return [name];
+}
+
+class Component extends SvelteComponentDev {
+	constructor(options) {
+		super(options);
+		init(this, options, instance, create_fragment, safe_not_equal, { name: 0 });
+
+		dispatch_dev("SvelteRegisterComponent", {
+			component: this,
+			tagName: "Component",
+			options,
+			id: create_fragment.name
+		});
+
+		const { ctx } = this.$$;
+		const props = options.props || {};
+
+		if (/*name*/ ctx[0] === undefined && !('name' in props)) {
+			console.warn("<Component> was created without expected prop 'name'");
+		}
+	}
+
+	get name() {
+		throw new Error("<Component>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	set name(value) {
+		throw new Error("<Component>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/debug-empty/input.svelte b/test/js/samples/debug-empty/input.svelte
new file mode 100644
index 0000000000..24f03b00c1
--- /dev/null
+++ b/test/js/samples/debug-empty/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let name;
+</script>
+
+<h1>Hello {name}!</h1>
+{@debug}
\ No newline at end of file
diff --git a/test/js/samples/debug-foo-bar-baz-things/_config.js b/test/js/samples/debug-foo-bar-baz-things/_config.js
new file mode 100644
index 0000000000..414b026a97
--- /dev/null
+++ b/test/js/samples/debug-foo-bar-baz-things/_config.js
@@ -0,0 +1,5 @@
+export default {
+	options: {
+		dev: true
+	}
+};
diff --git a/test/js/samples/debug-foo-bar-baz-things/expected.js b/test/js/samples/debug-foo-bar-baz-things/expected.js
new file mode 100644
index 0000000000..3377d35018
--- /dev/null
+++ b/test/js/samples/debug-foo-bar-baz-things/expected.js
@@ -0,0 +1,273 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponentDev,
+	add_location,
+	append_dev,
+	destroy_each,
+	detach_dev,
+	dispatch_dev,
+	element,
+	init,
+	insert_dev,
+	noop,
+	safe_not_equal,
+	set_data_dev,
+	space,
+	text,
+	validate_each_argument,
+	validate_slots
+} from "svelte/internal";
+
+const file = undefined;
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[4] = list[i];
+	return child_ctx;
+}
+
+// (8:0) {#each things as thing}
+function create_each_block(ctx) {
+	let span;
+	let t0_value = /*thing*/ ctx[4].name + "";
+	let t0;
+	let t1;
+
+	const block = {
+		c: function create() {
+			span = element("span");
+			t0 = text(t0_value);
+			t1 = space();
+
+			{
+				const foo = /*foo*/ ctx[1];
+				const bar = /*bar*/ ctx[2];
+				const baz = /*baz*/ ctx[3];
+				const thing = /*thing*/ ctx[4];
+				console.log({ foo, bar, baz, thing });
+				debugger;
+			}
+
+			add_location(span, file, 8, 1, 116);
+		},
+		m: function mount(target, anchor) {
+			insert_dev(target, span, anchor);
+			append_dev(span, t0);
+			insert_dev(target, t1, anchor);
+		},
+		p: function update(ctx, dirty) {
+			if (dirty & /*things*/ 1 && t0_value !== (t0_value = /*thing*/ ctx[4].name + "")) set_data_dev(t0, t0_value);
+
+			if (dirty & /*foo, bar, baz, things*/ 15) {
+				const foo = /*foo*/ ctx[1];
+				const bar = /*bar*/ ctx[2];
+				const baz = /*baz*/ ctx[3];
+				const thing = /*thing*/ ctx[4];
+				console.log({ foo, bar, baz, thing });
+				debugger;
+			}
+		},
+		d: function destroy(detaching) {
+			if (detaching) detach_dev(span);
+			if (detaching) detach_dev(t1);
+		}
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_each_block.name,
+		type: "each",
+		source: "(8:0) {#each things as thing}",
+		ctx
+	});
+
+	return block;
+}
+
+function create_fragment(ctx) {
+	let t0;
+	let p;
+	let t1;
+	let t2;
+	let each_value = /*things*/ ctx[0];
+	validate_each_argument(each_value);
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+	}
+
+	const block = {
+		c: function create() {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			t0 = space();
+			p = element("p");
+			t1 = text("foo: ");
+			t2 = text(/*foo*/ ctx[1]);
+			add_location(p, file, 12, 0, 182);
+		},
+		l: function claim(nodes) {
+			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+		},
+		m: function mount(target, anchor) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(target, anchor);
+			}
+
+			insert_dev(target, t0, anchor);
+			insert_dev(target, p, anchor);
+			append_dev(p, t1);
+			append_dev(p, t2);
+		},
+		p: function update(ctx, [dirty]) {
+			if (dirty & /*things*/ 1) {
+				each_value = /*things*/ ctx[0];
+				validate_each_argument(each_value);
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(t0.parentNode, t0);
+					}
+				}
+
+				for (; i < each_blocks.length; i += 1) {
+					each_blocks[i].d(1);
+				}
+
+				each_blocks.length = each_value.length;
+			}
+
+			if (dirty & /*foo*/ 2) set_data_dev(t2, /*foo*/ ctx[1]);
+		},
+		i: noop,
+		o: noop,
+		d: function destroy(detaching) {
+			destroy_each(each_blocks, detaching);
+			if (detaching) detach_dev(t0);
+			if (detaching) detach_dev(p);
+		}
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_fragment.name,
+		type: "component",
+		source: "",
+		ctx
+	});
+
+	return block;
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots('Component', slots, []);
+	let { things } = $$props;
+	let { foo } = $$props;
+	let { bar } = $$props;
+	let { baz } = $$props;
+	const writable_props = ['things', 'foo', 'bar', 'baz'];
+
+	Object.keys($$props).forEach(key => {
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Component> was created with unknown prop '${key}'`);
+	});
+
+	$$self.$$set = $$props => {
+		if ('things' in $$props) $$invalidate(0, things = $$props.things);
+		if ('foo' in $$props) $$invalidate(1, foo = $$props.foo);
+		if ('bar' in $$props) $$invalidate(2, bar = $$props.bar);
+		if ('baz' in $$props) $$invalidate(3, baz = $$props.baz);
+	};
+
+	$$self.$capture_state = () => ({ things, foo, bar, baz });
+
+	$$self.$inject_state = $$props => {
+		if ('things' in $$props) $$invalidate(0, things = $$props.things);
+		if ('foo' in $$props) $$invalidate(1, foo = $$props.foo);
+		if ('bar' in $$props) $$invalidate(2, bar = $$props.bar);
+		if ('baz' in $$props) $$invalidate(3, baz = $$props.baz);
+	};
+
+	if ($$props && "$$inject" in $$props) {
+		$$self.$inject_state($$props.$$inject);
+	}
+
+	return [things, foo, bar, baz];
+}
+
+class Component extends SvelteComponentDev {
+	constructor(options) {
+		super(options);
+		init(this, options, instance, create_fragment, safe_not_equal, { things: 0, foo: 1, bar: 2, baz: 3 });
+
+		dispatch_dev("SvelteRegisterComponent", {
+			component: this,
+			tagName: "Component",
+			options,
+			id: create_fragment.name
+		});
+
+		const { ctx } = this.$$;
+		const props = options.props || {};
+
+		if (/*things*/ ctx[0] === undefined && !('things' in props)) {
+			console.warn("<Component> was created without expected prop 'things'");
+		}
+
+		if (/*foo*/ ctx[1] === undefined && !('foo' in props)) {
+			console.warn("<Component> was created without expected prop 'foo'");
+		}
+
+		if (/*bar*/ ctx[2] === undefined && !('bar' in props)) {
+			console.warn("<Component> was created without expected prop 'bar'");
+		}
+
+		if (/*baz*/ ctx[3] === undefined && !('baz' in props)) {
+			console.warn("<Component> was created without expected prop 'baz'");
+		}
+	}
+
+	get things() {
+		throw new Error("<Component>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	set things(value) {
+		throw new Error("<Component>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	get foo() {
+		throw new Error("<Component>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	set foo(value) {
+		throw new Error("<Component>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	get bar() {
+		throw new Error("<Component>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	set bar(value) {
+		throw new Error("<Component>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	get baz() {
+		throw new Error("<Component>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	set baz(value) {
+		throw new Error("<Component>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/debug-foo-bar-baz-things/input.svelte b/test/js/samples/debug-foo-bar-baz-things/input.svelte
new file mode 100644
index 0000000000..df6095c52d
--- /dev/null
+++ b/test/js/samples/debug-foo-bar-baz-things/input.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let things;
+	export let foo;
+	export let bar;
+	export let baz;
+</script>
+
+{#each things as thing}
+	<span>{thing.name}</span>
+	{@debug foo, bar, baz, thing}
+{/each}
+
+<p>foo: {foo}</p>
\ No newline at end of file
diff --git a/test/js/samples/debug-foo/_config.js b/test/js/samples/debug-foo/_config.js
new file mode 100644
index 0000000000..414b026a97
--- /dev/null
+++ b/test/js/samples/debug-foo/_config.js
@@ -0,0 +1,5 @@
+export default {
+	options: {
+		dev: true
+	}
+};
diff --git a/test/js/samples/debug-foo/expected.js b/test/js/samples/debug-foo/expected.js
new file mode 100644
index 0000000000..518897c237
--- /dev/null
+++ b/test/js/samples/debug-foo/expected.js
@@ -0,0 +1,237 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponentDev,
+	add_location,
+	append_dev,
+	destroy_each,
+	detach_dev,
+	dispatch_dev,
+	element,
+	init,
+	insert_dev,
+	noop,
+	safe_not_equal,
+	set_data_dev,
+	space,
+	text,
+	validate_each_argument,
+	validate_slots
+} from "svelte/internal";
+
+const file = undefined;
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[2] = list[i];
+	return child_ctx;
+}
+
+// (6:0) {#each things as thing}
+function create_each_block(ctx) {
+	let span;
+	let t0_value = /*thing*/ ctx[2].name + "";
+	let t0;
+	let t1;
+
+	const block = {
+		c: function create() {
+			span = element("span");
+			t0 = text(t0_value);
+			t1 = space();
+
+			{
+				const foo = /*foo*/ ctx[1];
+				console.log({ foo });
+				debugger;
+			}
+
+			add_location(span, file, 6, 1, 82);
+		},
+		m: function mount(target, anchor) {
+			insert_dev(target, span, anchor);
+			append_dev(span, t0);
+			insert_dev(target, t1, anchor);
+		},
+		p: function update(ctx, dirty) {
+			if (dirty & /*things*/ 1 && t0_value !== (t0_value = /*thing*/ ctx[2].name + "")) set_data_dev(t0, t0_value);
+
+			if (dirty & /*foo*/ 2) {
+				const foo = /*foo*/ ctx[1];
+				console.log({ foo });
+				debugger;
+			}
+		},
+		d: function destroy(detaching) {
+			if (detaching) detach_dev(span);
+			if (detaching) detach_dev(t1);
+		}
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_each_block.name,
+		type: "each",
+		source: "(6:0) {#each things as thing}",
+		ctx
+	});
+
+	return block;
+}
+
+function create_fragment(ctx) {
+	let t0;
+	let p;
+	let t1;
+	let t2;
+	let each_value = /*things*/ ctx[0];
+	validate_each_argument(each_value);
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+	}
+
+	const block = {
+		c: function create() {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			t0 = space();
+			p = element("p");
+			t1 = text("foo: ");
+			t2 = text(/*foo*/ ctx[1]);
+			add_location(p, file, 10, 0, 131);
+		},
+		l: function claim(nodes) {
+			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+		},
+		m: function mount(target, anchor) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(target, anchor);
+			}
+
+			insert_dev(target, t0, anchor);
+			insert_dev(target, p, anchor);
+			append_dev(p, t1);
+			append_dev(p, t2);
+		},
+		p: function update(ctx, [dirty]) {
+			if (dirty & /*things*/ 1) {
+				each_value = /*things*/ ctx[0];
+				validate_each_argument(each_value);
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(t0.parentNode, t0);
+					}
+				}
+
+				for (; i < each_blocks.length; i += 1) {
+					each_blocks[i].d(1);
+				}
+
+				each_blocks.length = each_value.length;
+			}
+
+			if (dirty & /*foo*/ 2) set_data_dev(t2, /*foo*/ ctx[1]);
+		},
+		i: noop,
+		o: noop,
+		d: function destroy(detaching) {
+			destroy_each(each_blocks, detaching);
+			if (detaching) detach_dev(t0);
+			if (detaching) detach_dev(p);
+		}
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_fragment.name,
+		type: "component",
+		source: "",
+		ctx
+	});
+
+	return block;
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots('Component', slots, []);
+	let { things } = $$props;
+	let { foo } = $$props;
+	const writable_props = ['things', 'foo'];
+
+	Object.keys($$props).forEach(key => {
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Component> was created with unknown prop '${key}'`);
+	});
+
+	$$self.$$set = $$props => {
+		if ('things' in $$props) $$invalidate(0, things = $$props.things);
+		if ('foo' in $$props) $$invalidate(1, foo = $$props.foo);
+	};
+
+	$$self.$capture_state = () => ({ things, foo });
+
+	$$self.$inject_state = $$props => {
+		if ('things' in $$props) $$invalidate(0, things = $$props.things);
+		if ('foo' in $$props) $$invalidate(1, foo = $$props.foo);
+	};
+
+	if ($$props && "$$inject" in $$props) {
+		$$self.$inject_state($$props.$$inject);
+	}
+
+	return [things, foo];
+}
+
+class Component extends SvelteComponentDev {
+	constructor(options) {
+		super(options);
+		init(this, options, instance, create_fragment, safe_not_equal, { things: 0, foo: 1 });
+
+		dispatch_dev("SvelteRegisterComponent", {
+			component: this,
+			tagName: "Component",
+			options,
+			id: create_fragment.name
+		});
+
+		const { ctx } = this.$$;
+		const props = options.props || {};
+
+		if (/*things*/ ctx[0] === undefined && !('things' in props)) {
+			console.warn("<Component> was created without expected prop 'things'");
+		}
+
+		if (/*foo*/ ctx[1] === undefined && !('foo' in props)) {
+			console.warn("<Component> was created without expected prop 'foo'");
+		}
+	}
+
+	get things() {
+		throw new Error("<Component>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	set things(value) {
+		throw new Error("<Component>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	get foo() {
+		throw new Error("<Component>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	set foo(value) {
+		throw new Error("<Component>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/debug-foo/input.svelte b/test/js/samples/debug-foo/input.svelte
new file mode 100644
index 0000000000..553f080d94
--- /dev/null
+++ b/test/js/samples/debug-foo/input.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let things;
+	export let foo;
+</script>
+
+{#each things as thing}
+	<span>{thing.name}</span>
+	{@debug foo}
+{/each}
+
+<p>foo: {foo}</p>
\ No newline at end of file
diff --git a/test/js/samples/debug-hoisted/_config.js b/test/js/samples/debug-hoisted/_config.js
new file mode 100644
index 0000000000..414b026a97
--- /dev/null
+++ b/test/js/samples/debug-hoisted/_config.js
@@ -0,0 +1,5 @@
+export default {
+	options: {
+		dev: true
+	}
+};
diff --git a/test/js/samples/debug-hoisted/expected.js b/test/js/samples/debug-hoisted/expected.js
new file mode 100644
index 0000000000..9fc4f7cf4f
--- /dev/null
+++ b/test/js/samples/debug-hoisted/expected.js
@@ -0,0 +1,90 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponentDev,
+	dispatch_dev,
+	init,
+	noop,
+	safe_not_equal,
+	validate_slots
+} from "svelte/internal";
+
+const file = undefined;
+
+function create_fragment(ctx) {
+	const block = {
+		c: function create() {
+			{
+				const obj = /*obj*/ ctx[0];
+				const kobzol = /*kobzol*/ ctx[1];
+				console.log({ obj, kobzol });
+				debugger;
+			}
+		},
+		l: function claim(nodes) {
+			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+		},
+		m: noop,
+		p: function update(ctx, [dirty]) {
+			if (dirty & /*obj, kobzol*/ 3) {
+				const obj = /*obj*/ ctx[0];
+				const kobzol = /*kobzol*/ ctx[1];
+				console.log({ obj, kobzol });
+				debugger;
+			}
+		},
+		i: noop,
+		o: noop,
+		d: noop
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_fragment.name,
+		type: "component",
+		source: "",
+		ctx
+	});
+
+	return block;
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots('Component', slots, []);
+	let obj = { x: 5 };
+	let kobzol = 5;
+	const writable_props = [];
+
+	Object.keys($$props).forEach(key => {
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Component> was created with unknown prop '${key}'`);
+	});
+
+	$$self.$capture_state = () => ({ obj, kobzol });
+
+	$$self.$inject_state = $$props => {
+		if ('obj' in $$props) $$invalidate(0, obj = $$props.obj);
+		if ('kobzol' in $$props) $$invalidate(1, kobzol = $$props.kobzol);
+	};
+
+	if ($$props && "$$inject" in $$props) {
+		$$self.$inject_state($$props.$$inject);
+	}
+
+	return [obj, kobzol];
+}
+
+class Component extends SvelteComponentDev {
+	constructor(options) {
+		super(options);
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+
+		dispatch_dev("SvelteRegisterComponent", {
+			component: this,
+			tagName: "Component",
+			options,
+			id: create_fragment.name
+		});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/debug-hoisted/input.svelte b/test/js/samples/debug-hoisted/input.svelte
new file mode 100644
index 0000000000..94d584ccac
--- /dev/null
+++ b/test/js/samples/debug-hoisted/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	let obj = { x: 5 };
+	let kobzol = 5;
+</script>
+
+{@debug obj, kobzol}
diff --git a/test/js/samples/debug-no-dependencies/_config.js b/test/js/samples/debug-no-dependencies/_config.js
new file mode 100644
index 0000000000..414b026a97
--- /dev/null
+++ b/test/js/samples/debug-no-dependencies/_config.js
@@ -0,0 +1,5 @@
+export default {
+	options: {
+		dev: true
+	}
+};
diff --git a/test/js/samples/debug-no-dependencies/expected.js b/test/js/samples/debug-no-dependencies/expected.js
new file mode 100644
index 0000000000..8107b890a6
--- /dev/null
+++ b/test/js/samples/debug-no-dependencies/expected.js
@@ -0,0 +1,164 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponentDev,
+	destroy_each,
+	detach_dev,
+	dispatch_dev,
+	empty,
+	init,
+	insert_dev,
+	noop,
+	safe_not_equal,
+	space,
+	text,
+	validate_each_argument,
+	validate_slots
+} from "svelte/internal";
+
+const file = undefined;
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[0] = list[i];
+	child_ctx[2] = i;
+	return child_ctx;
+}
+
+// (4:0) {#each things as thing, index}
+function create_each_block(ctx) {
+	let t0;
+	let t1_value = /*thing*/ ctx[0] + "";
+	let t1;
+
+	const block = {
+		c: function create() {
+			{
+				const index = /*index*/ ctx[2];
+				console.log({ index });
+				debugger;
+			}
+
+			t0 = space();
+			t1 = text(t1_value);
+		},
+		m: function mount(target, anchor) {
+			insert_dev(target, t0, anchor);
+			insert_dev(target, t1, anchor);
+		},
+		p: noop,
+		d: function destroy(detaching) {
+			if (detaching) detach_dev(t0);
+			if (detaching) detach_dev(t1);
+		}
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_each_block.name,
+		type: "each",
+		source: "(4:0) {#each things as thing, index}",
+		ctx
+	});
+
+	return block;
+}
+
+function create_fragment(ctx) {
+	let each_1_anchor;
+	let each_value = things;
+	validate_each_argument(each_value);
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+	}
+
+	const block = {
+		c: function create() {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			each_1_anchor = empty();
+		},
+		l: function claim(nodes) {
+			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+		},
+		m: function mount(target, anchor) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(target, anchor);
+			}
+
+			insert_dev(target, each_1_anchor, anchor);
+		},
+		p: function update(ctx, [dirty]) {
+			if (dirty & /*things*/ 0) {
+				each_value = things;
+				validate_each_argument(each_value);
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
+					}
+				}
+
+				for (; i < each_blocks.length; i += 1) {
+					each_blocks[i].d(1);
+				}
+
+				each_blocks.length = each_value.length;
+			}
+		},
+		i: noop,
+		o: noop,
+		d: function destroy(detaching) {
+			destroy_each(each_blocks, detaching);
+			if (detaching) detach_dev(each_1_anchor);
+		}
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_fragment.name,
+		type: "component",
+		source: "",
+		ctx
+	});
+
+	return block;
+}
+
+function instance($$self, $$props) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots('Component', slots, []);
+	const writable_props = [];
+
+	Object.keys($$props).forEach(key => {
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Component> was created with unknown prop '${key}'`);
+	});
+
+	return [];
+}
+
+class Component extends SvelteComponentDev {
+	constructor(options) {
+		super(options);
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+
+		dispatch_dev("SvelteRegisterComponent", {
+			component: this,
+			tagName: "Component",
+			options,
+			id: create_fragment.name
+		});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/debug-no-dependencies/input.svelte b/test/js/samples/debug-no-dependencies/input.svelte
new file mode 100644
index 0000000000..b2f0200be0
--- /dev/null
+++ b/test/js/samples/debug-no-dependencies/input.svelte
@@ -0,0 +1,7 @@
+<script>
+</script>
+
+{#each things as thing, index}
+	{@debug index}
+	{thing}
+{/each}
\ No newline at end of file
diff --git a/test/js/samples/debug-ssr-foo/_config.js b/test/js/samples/debug-ssr-foo/_config.js
new file mode 100644
index 0000000000..c4070b9a3b
--- /dev/null
+++ b/test/js/samples/debug-ssr-foo/_config.js
@@ -0,0 +1,6 @@
+export default {
+	options: {
+		generate: 'ssr',
+		dev: true
+	}
+};
diff --git a/test/js/samples/debug-ssr-foo/expected.js b/test/js/samples/debug-ssr-foo/expected.js
new file mode 100644
index 0000000000..a57060d528
--- /dev/null
+++ b/test/js/samples/debug-ssr-foo/expected.js
@@ -0,0 +1,18 @@
+/* generated by Svelte vX.Y.Z */
+import { create_ssr_component, debug, each, escape } from "svelte/internal";
+
+const Component = create_ssr_component(($$result, $$props, $$bindings, slots) => {
+	let { things } = $$props;
+	let { foo } = $$props;
+	if ($$props.things === void 0 && $$bindings.things && things !== void 0) $$bindings.things(things);
+	if ($$props.foo === void 0 && $$bindings.foo && foo !== void 0) $$bindings.foo(foo);
+
+	return `${each(things, thing => {
+		return `<span>${escape(thing.name)}</span>
+	${debug(null, 7, 2, { foo })}`;
+	})}
+
+<p>foo: ${escape(foo)}</p>`;
+});
+
+export default Component;
diff --git a/test/js/samples/debug-ssr-foo/input.svelte b/test/js/samples/debug-ssr-foo/input.svelte
new file mode 100644
index 0000000000..553f080d94
--- /dev/null
+++ b/test/js/samples/debug-ssr-foo/input.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let things;
+	export let foo;
+</script>
+
+{#each things as thing}
+	<span>{thing.name}</span>
+	{@debug foo}
+{/each}
+
+<p>foo: {foo}</p>
\ No newline at end of file
diff --git a/test/js/samples/deconflict-builtins/expected.js b/test/js/samples/deconflict-builtins/expected.js
new file mode 100644
index 0000000000..8c9bb83b5b
--- /dev/null
+++ b/test/js/samples/deconflict-builtins/expected.js
@@ -0,0 +1,121 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	destroy_each,
+	detach,
+	element,
+	empty,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_data,
+	text
+} from "svelte/internal";
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[1] = list[i];
+	return child_ctx;
+}
+
+// (5:0) {#each createElement as node}
+function create_each_block(ctx) {
+	let span;
+	let t_value = /*node*/ ctx[1] + "";
+	let t;
+
+	return {
+		c() {
+			span = element("span");
+			t = text(t_value);
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			append(span, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*createElement*/ 1 && t_value !== (t_value = /*node*/ ctx[1] + "")) set_data(t, t_value);
+		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let each_1_anchor;
+	let each_value = /*createElement*/ ctx[0];
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+	}
+
+	return {
+		c() {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			each_1_anchor = empty();
+		},
+		m(target, anchor) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(target, anchor);
+			}
+
+			insert(target, each_1_anchor, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*createElement*/ 1) {
+				each_value = /*createElement*/ ctx[0];
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
+					}
+				}
+
+				for (; i < each_blocks.length; i += 1) {
+					each_blocks[i].d(1);
+				}
+
+				each_blocks.length = each_value.length;
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			destroy_each(each_blocks, detaching);
+			if (detaching) detach(each_1_anchor);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { createElement } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('createElement' in $$props) $$invalidate(0, createElement = $$props.createElement);
+	};
+
+	return [createElement];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { createElement: 0 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/deconflict-builtins/input.svelte b/test/js/samples/deconflict-builtins/input.svelte
new file mode 100644
index 0000000000..01052de947
--- /dev/null
+++ b/test/js/samples/deconflict-builtins/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let createElement;
+</script>
+
+{#each createElement as node}
+	<span>{node}</span>
+{/each}
\ No newline at end of file
diff --git a/test/js/samples/deconflict-globals/expected.js b/test/js/samples/deconflict-globals/expected.js
new file mode 100644
index 0000000000..c048cc2ddd
--- /dev/null
+++ b/test/js/samples/deconflict-globals/expected.js
@@ -0,0 +1,27 @@
+/* generated by Svelte vX.Y.Z */
+import { SvelteComponent, init, safe_not_equal } from "svelte/internal";
+
+import { onMount } from 'svelte';
+
+function instance($$self, $$props, $$invalidate) {
+	let { foo = 'bar' } = $$props;
+
+	onMount(() => {
+		alert(JSON.stringify(data()));
+	});
+
+	$$self.$$set = $$props => {
+		if ('foo' in $$props) $$invalidate(0, foo = $$props.foo);
+	};
+
+	return [foo];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, null, safe_not_equal, { foo: 0 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/deconflict-globals/input.svelte b/test/js/samples/deconflict-globals/input.svelte
new file mode 100644
index 0000000000..4e0b72d2d1
--- /dev/null
+++ b/test/js/samples/deconflict-globals/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let foo = 'bar';
+
+	onMount(() => {
+		alert(JSON.stringify(data()));
+	});
+</script>
\ No newline at end of file
diff --git a/test/js/samples/dev-warning-missing-data-computed/_config.js b/test/js/samples/dev-warning-missing-data-computed/_config.js
new file mode 100644
index 0000000000..414b026a97
--- /dev/null
+++ b/test/js/samples/dev-warning-missing-data-computed/_config.js
@@ -0,0 +1,5 @@
+export default {
+	options: {
+		dev: true
+	}
+};
diff --git a/test/js/samples/dev-warning-missing-data-computed/expected.js b/test/js/samples/dev-warning-missing-data-computed/expected.js
new file mode 100644
index 0000000000..5e10ec55f8
--- /dev/null
+++ b/test/js/samples/dev-warning-missing-data-computed/expected.js
@@ -0,0 +1,131 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponentDev,
+	add_location,
+	append_dev,
+	detach_dev,
+	dispatch_dev,
+	element,
+	init,
+	insert_dev,
+	noop,
+	safe_not_equal,
+	set_data_dev,
+	space,
+	text,
+	validate_slots
+} from "svelte/internal";
+
+const file = undefined;
+
+function create_fragment(ctx) {
+	let p;
+	let t0_value = Math.max(0, /*foo*/ ctx[0]) + "";
+	let t0;
+	let t1;
+	let t2;
+
+	const block = {
+		c: function create() {
+			p = element("p");
+			t0 = text(t0_value);
+			t1 = space();
+			t2 = text(/*bar*/ ctx[1]);
+			add_location(p, file, 7, 0, 67);
+		},
+		l: function claim(nodes) {
+			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+		},
+		m: function mount(target, anchor) {
+			insert_dev(target, p, anchor);
+			append_dev(p, t0);
+			append_dev(p, t1);
+			append_dev(p, t2);
+		},
+		p: function update(ctx, [dirty]) {
+			if (dirty & /*foo*/ 1 && t0_value !== (t0_value = Math.max(0, /*foo*/ ctx[0]) + "")) set_data_dev(t0, t0_value);
+			if (dirty & /*bar*/ 2) set_data_dev(t2, /*bar*/ ctx[1]);
+		},
+		i: noop,
+		o: noop,
+		d: function destroy(detaching) {
+			if (detaching) detach_dev(p);
+		}
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_fragment.name,
+		type: "component",
+		source: "",
+		ctx
+	});
+
+	return block;
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots('Component', slots, []);
+	let { foo } = $$props;
+	let bar;
+	const writable_props = ['foo'];
+
+	Object.keys($$props).forEach(key => {
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Component> was created with unknown prop '${key}'`);
+	});
+
+	$$self.$$set = $$props => {
+		if ('foo' in $$props) $$invalidate(0, foo = $$props.foo);
+	};
+
+	$$self.$capture_state = () => ({ foo, bar });
+
+	$$self.$inject_state = $$props => {
+		if ('foo' in $$props) $$invalidate(0, foo = $$props.foo);
+		if ('bar' in $$props) $$invalidate(1, bar = $$props.bar);
+	};
+
+	if ($$props && "$$inject" in $$props) {
+		$$self.$inject_state($$props.$$inject);
+	}
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*foo*/ 1) {
+			$: $$invalidate(1, bar = foo * 2);
+		}
+	};
+
+	return [foo, bar];
+}
+
+class Component extends SvelteComponentDev {
+	constructor(options) {
+		super(options);
+		init(this, options, instance, create_fragment, safe_not_equal, { foo: 0 });
+
+		dispatch_dev("SvelteRegisterComponent", {
+			component: this,
+			tagName: "Component",
+			options,
+			id: create_fragment.name
+		});
+
+		const { ctx } = this.$$;
+		const props = options.props || {};
+
+		if (/*foo*/ ctx[0] === undefined && !('foo' in props)) {
+			console.warn("<Component> was created without expected prop 'foo'");
+		}
+	}
+
+	get foo() {
+		throw new Error("<Component>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+
+	set foo(value) {
+		throw new Error("<Component>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/dev-warning-missing-data-computed/input.svelte b/test/js/samples/dev-warning-missing-data-computed/input.svelte
new file mode 100644
index 0000000000..fc510caba8
--- /dev/null
+++ b/test/js/samples/dev-warning-missing-data-computed/input.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let foo;
+
+	let bar;
+	$: bar = foo * 2;
+</script>
+
+<p>
+	{Math.max(0, foo)}
+	{bar}
+</p>
\ No newline at end of file
diff --git a/test/js/samples/dont-invalidate-this/expected.js b/test/js/samples/dont-invalidate-this/expected.js
new file mode 100644
index 0000000000..0b155373a1
--- /dev/null
+++ b/test/js/samples/dont-invalidate-this/expected.js
@@ -0,0 +1,52 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let input;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			input = element("input");
+		},
+		m(target, anchor) {
+			insert(target, input, anchor);
+
+			if (!mounted) {
+				dispose = listen(input, "input", make_uppercase);
+				mounted = true;
+			}
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(input);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function make_uppercase() {
+	this.value = this.value.toUpperCase();
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/dont-invalidate-this/input.svelte b/test/js/samples/dont-invalidate-this/input.svelte
new file mode 100644
index 0000000000..5b0a565a3a
--- /dev/null
+++ b/test/js/samples/dont-invalidate-this/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	function make_uppercase() {
+		this.value = this.value.toUpperCase();
+	}
+</script>
+<input on:input={make_uppercase}>
diff --git a/test/js/samples/dynamic-import/expected.js b/test/js/samples/dynamic-import/expected.js
new file mode 100644
index 0000000000..d25a825d3b
--- /dev/null
+++ b/test/js/samples/dynamic-import/expected.js
@@ -0,0 +1,54 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	create_component,
+	destroy_component,
+	init,
+	mount_component,
+	noop,
+	safe_not_equal,
+	transition_in,
+	transition_out
+} from "svelte/internal";
+
+import LazyLoad from './LazyLoad.svelte';
+
+function create_fragment(ctx) {
+	let lazyload;
+	let current;
+	lazyload = new LazyLoad({ props: { load: func } });
+
+	return {
+		c() {
+			create_component(lazyload.$$.fragment);
+		},
+		m(target, anchor) {
+			mount_component(lazyload, target, anchor);
+			current = true;
+		},
+		p: noop,
+		i(local) {
+			if (current) return;
+			transition_in(lazyload.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(lazyload.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(lazyload, detaching);
+		}
+	};
+}
+
+const func = () => import('./Foo.svelte');
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/dynamic-import/input.svelte b/test/js/samples/dynamic-import/input.svelte
new file mode 100644
index 0000000000..7e423b5e46
--- /dev/null
+++ b/test/js/samples/dynamic-import/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	import LazyLoad from './LazyLoad.svelte';
+</script>
+
+<LazyLoad load="{() => import('./Foo.svelte')}"/>
\ No newline at end of file
diff --git a/test/js/samples/each-block-array-literal/expected.js b/test/js/samples/each-block-array-literal/expected.js
new file mode 100644
index 0000000000..bb5a04e952
--- /dev/null
+++ b/test/js/samples/each-block-array-literal/expected.js
@@ -0,0 +1,127 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	destroy_each,
+	detach,
+	element,
+	empty,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_data,
+	text
+} from "svelte/internal";
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[5] = list[i];
+	return child_ctx;
+}
+
+// (9:0) {#each [a, b, c, d, e] as num}
+function create_each_block(ctx) {
+	let span;
+	let t_value = /*num*/ ctx[5] + "";
+	let t;
+
+	return {
+		c() {
+			span = element("span");
+			t = text(t_value);
+		},
+		m(target, anchor) {
+			insert(target, span, anchor);
+			append(span, t);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*a, b, c, d, e*/ 31 && t_value !== (t_value = /*num*/ ctx[5] + "")) set_data(t, t_value);
+		},
+		d(detaching) {
+			if (detaching) detach(span);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let each_1_anchor;
+	let each_value = [/*a*/ ctx[0], /*b*/ ctx[1], /*c*/ ctx[2], /*d*/ ctx[3], /*e*/ ctx[4]];
+	let each_blocks = [];
+
+	for (let i = 0; i < 5; i += 1) {
+		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+	}
+
+	return {
+		c() {
+			for (let i = 0; i < 5; i += 1) {
+				each_blocks[i].c();
+			}
+
+			each_1_anchor = empty();
+		},
+		m(target, anchor) {
+			for (let i = 0; i < 5; i += 1) {
+				each_blocks[i].m(target, anchor);
+			}
+
+			insert(target, each_1_anchor, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*a, b, c, d, e*/ 31) {
+				each_value = [/*a*/ ctx[0], /*b*/ ctx[1], /*c*/ ctx[2], /*d*/ ctx[3], /*e*/ ctx[4]];
+				let i;
+
+				for (i = 0; i < 5; i += 1) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
+					}
+				}
+
+				for (; i < 5; i += 1) {
+					each_blocks[i].d(1);
+				}
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			destroy_each(each_blocks, detaching);
+			if (detaching) detach(each_1_anchor);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { a } = $$props;
+	let { b } = $$props;
+	let { c } = $$props;
+	let { d } = $$props;
+	let { e } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('a' in $$props) $$invalidate(0, a = $$props.a);
+		if ('b' in $$props) $$invalidate(1, b = $$props.b);
+		if ('c' in $$props) $$invalidate(2, c = $$props.c);
+		if ('d' in $$props) $$invalidate(3, d = $$props.d);
+		if ('e' in $$props) $$invalidate(4, e = $$props.e);
+	};
+
+	return [a, b, c, d, e];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { a: 0, b: 1, c: 2, d: 3, e: 4 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/each-block-array-literal/input.svelte b/test/js/samples/each-block-array-literal/input.svelte
new file mode 100644
index 0000000000..cf25c139e0
--- /dev/null
+++ b/test/js/samples/each-block-array-literal/input.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let a;
+	export let b;
+	export let c;
+	export let d;
+	export let e;
+</script>
+
+{#each [a, b, c, d, e] as num}
+	<span>{num}</span>
+{/each}
\ No newline at end of file
diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js
new file mode 100644
index 0000000000..e91f77ecd8
--- /dev/null
+++ b/test/js/samples/each-block-changed-check/expected.js
@@ -0,0 +1,173 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	HtmlTag,
+	SvelteComponent,
+	append,
+	attr,
+	destroy_each,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_data,
+	space,
+	text
+} from "svelte/internal";
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[4] = list[i];
+	child_ctx[6] = i;
+	return child_ctx;
+}
+
+// (8:0) {#each comments as comment, i}
+function create_each_block(ctx) {
+	let div;
+	let strong;
+	let t0;
+	let t1;
+	let span;
+	let t2_value = /*comment*/ ctx[4].author + "";
+	let t2;
+	let t3;
+	let t4_value = /*elapsed*/ ctx[1](/*comment*/ ctx[4].time, /*time*/ ctx[2]) + "";
+	let t4;
+	let t5;
+	let t6;
+	let html_tag;
+	let raw_value = /*comment*/ ctx[4].html + "";
+
+	return {
+		c() {
+			div = element("div");
+			strong = element("strong");
+			t0 = text(/*i*/ ctx[6]);
+			t1 = space();
+			span = element("span");
+			t2 = text(t2_value);
+			t3 = text(" wrote ");
+			t4 = text(t4_value);
+			t5 = text(" ago:");
+			t6 = space();
+			html_tag = new HtmlTag(false);
+			attr(span, "class", "meta");
+			html_tag.a = null;
+			attr(div, "class", "comment");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, strong);
+			append(strong, t0);
+			append(div, t1);
+			append(div, span);
+			append(span, t2);
+			append(span, t3);
+			append(span, t4);
+			append(span, t5);
+			append(div, t6);
+			html_tag.m(raw_value, div);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*comments*/ 1 && t2_value !== (t2_value = /*comment*/ ctx[4].author + "")) set_data(t2, t2_value);
+			if (dirty & /*elapsed, comments, time*/ 7 && t4_value !== (t4_value = /*elapsed*/ ctx[1](/*comment*/ ctx[4].time, /*time*/ ctx[2]) + "")) set_data(t4, t4_value);
+			if (dirty & /*comments*/ 1 && raw_value !== (raw_value = /*comment*/ ctx[4].html + "")) html_tag.p(raw_value);
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let t0;
+	let p;
+	let t1;
+	let each_value = /*comments*/ ctx[0];
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+	}
+
+	return {
+		c() {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			t0 = space();
+			p = element("p");
+			t1 = text(/*foo*/ ctx[3]);
+		},
+		m(target, anchor) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(target, anchor);
+			}
+
+			insert(target, t0, anchor);
+			insert(target, p, anchor);
+			append(p, t1);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*comments, elapsed, time*/ 7) {
+				each_value = /*comments*/ ctx[0];
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(t0.parentNode, t0);
+					}
+				}
+
+				for (; i < each_blocks.length; i += 1) {
+					each_blocks[i].d(1);
+				}
+
+				each_blocks.length = each_value.length;
+			}
+
+			if (dirty & /*foo*/ 8) set_data(t1, /*foo*/ ctx[3]);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			destroy_each(each_blocks, detaching);
+			if (detaching) detach(t0);
+			if (detaching) detach(p);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { comments } = $$props;
+	let { elapsed } = $$props;
+	let { time } = $$props;
+	let { foo } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('comments' in $$props) $$invalidate(0, comments = $$props.comments);
+		if ('elapsed' in $$props) $$invalidate(1, elapsed = $$props.elapsed);
+		if ('time' in $$props) $$invalidate(2, time = $$props.time);
+		if ('foo' in $$props) $$invalidate(3, foo = $$props.foo);
+	};
+
+	return [comments, elapsed, time, foo];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { comments: 0, elapsed: 1, time: 2, foo: 3 });
+	}
+}
+
+export default Component;
diff --git a/test/js/samples/each-block-changed-check/input.svelte b/test/js/samples/each-block-changed-check/input.svelte
new file mode 100644
index 0000000000..999b346975
--- /dev/null
+++ b/test/js/samples/each-block-changed-check/input.svelte
@@ -0,0 +1,20 @@
+<script>
+	export let comments;
+	export let elapsed;
+	export let time;
+	export let foo;
+</script>
+
+{#each comments as comment, i}
+	<div class='comment'>
+		<strong>{i}</strong>
+
+		<span class='meta'>
+			{comment.author} wrote {elapsed(comment.time, time)} ago:
+		</span>
+
+		{@html comment.html}
+	</div>
+{/each}
+
+<p>{foo}</p>
\ No newline at end of file
diff --git a/test/js/samples/each-block-keyed-animated/expected.js b/test/js/samples/each-block-keyed-animated/expected.js
new file mode 100644
index 0000000000..6f7c22a086
--- /dev/null
+++ b/test/js/samples/each-block-keyed-animated/expected.js
@@ -0,0 +1,146 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	create_animation,
+	detach,
+	element,
+	empty,
+	fix_and_destroy_block,
+	fix_position,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_data,
+	text,
+	update_keyed_each
+} from "svelte/internal";
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[1] = list[i];
+	return child_ctx;
+}
+
+// (19:0) {#each things as thing (thing.id)}
+function create_each_block(key_1, ctx) {
+	let div;
+	let t_value = /*thing*/ ctx[1].name + "";
+	let t;
+	let rect;
+	let stop_animation = noop;
+
+	return {
+		key: key_1,
+		first: null,
+		c() {
+			div = element("div");
+			t = text(t_value);
+			this.first = div;
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, t);
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+			if (dirty & /*things*/ 1 && t_value !== (t_value = /*thing*/ ctx[1].name + "")) set_data(t, t_value);
+		},
+		r() {
+			rect = div.getBoundingClientRect();
+		},
+		f() {
+			fix_position(div);
+			stop_animation();
+		},
+		a() {
+			stop_animation();
+			stop_animation = create_animation(div, rect, foo, {});
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let each_blocks = [];
+	let each_1_lookup = new Map();
+	let each_1_anchor;
+	let each_value = /*things*/ ctx[0];
+	const get_key = ctx => /*thing*/ ctx[1].id;
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		let child_ctx = get_each_context(ctx, each_value, i);
+		let key = get_key(child_ctx);
+		each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx));
+	}
+
+	return {
+		c() {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			each_1_anchor = empty();
+		},
+		m(target, anchor) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(target, anchor);
+			}
+
+			insert(target, each_1_anchor, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*things*/ 1) {
+				each_value = /*things*/ ctx[0];
+				for (let i = 0; i < each_blocks.length; i += 1) each_blocks[i].r();
+				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, each_1_anchor.parentNode, fix_and_destroy_block, create_each_block, each_1_anchor, get_each_context);
+				for (let i = 0; i < each_blocks.length; i += 1) each_blocks[i].a();
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].d(detaching);
+			}
+
+			if (detaching) detach(each_1_anchor);
+		}
+	};
+}
+
+function foo(node, animation, params) {
+	const dx = animation.from.left - animation.to.left;
+	const dy = animation.from.top - animation.to.top;
+
+	return {
+		delay: params.delay,
+		duration: 100,
+		tick: (t, u) => {
+			node.dx = u * dx;
+			node.dy = u * dy;
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { things } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('things' in $$props) $$invalidate(0, things = $$props.things);
+	};
+
+	return [things];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { things: 0 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/each-block-keyed-animated/input.svelte b/test/js/samples/each-block-keyed-animated/input.svelte
new file mode 100644
index 0000000000..53bcb463b1
--- /dev/null
+++ b/test/js/samples/each-block-keyed-animated/input.svelte
@@ -0,0 +1,21 @@
+<script>
+	export let things;
+
+	function foo(node, animation, params) {
+		const dx = animation.from.left - animation.to.left;
+		const dy = animation.from.top - animation.to.top;
+
+		return {
+			delay: params.delay,
+			duration: 100,
+			tick: (t, u) => {
+				node.dx = u * dx;
+				node.dy = u * dy;
+			}
+		};
+	}
+</script>
+
+{#each things as thing (thing.id)}
+	<div animate:foo>{thing.name}</div>
+{/each}
\ No newline at end of file
diff --git a/test/js/samples/each-block-keyed/expected.js b/test/js/samples/each-block-keyed/expected.js
new file mode 100644
index 0000000000..a275697d8e
--- /dev/null
+++ b/test/js/samples/each-block-keyed/expected.js
@@ -0,0 +1,115 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	destroy_block,
+	detach,
+	element,
+	empty,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_data,
+	text,
+	update_keyed_each
+} from "svelte/internal";
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[1] = list[i];
+	return child_ctx;
+}
+
+// (5:0) {#each things as thing (thing.id)}
+function create_each_block(key_1, ctx) {
+	let div;
+	let t_value = /*thing*/ ctx[1].name + "";
+	let t;
+
+	return {
+		key: key_1,
+		first: null,
+		c() {
+			div = element("div");
+			t = text(t_value);
+			this.first = div;
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, t);
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+			if (dirty & /*things*/ 1 && t_value !== (t_value = /*thing*/ ctx[1].name + "")) set_data(t, t_value);
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let each_blocks = [];
+	let each_1_lookup = new Map();
+	let each_1_anchor;
+	let each_value = /*things*/ ctx[0];
+	const get_key = ctx => /*thing*/ ctx[1].id;
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		let child_ctx = get_each_context(ctx, each_value, i);
+		let key = get_key(child_ctx);
+		each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx));
+	}
+
+	return {
+		c() {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			each_1_anchor = empty();
+		},
+		m(target, anchor) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(target, anchor);
+			}
+
+			insert(target, each_1_anchor, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*things*/ 1) {
+				each_value = /*things*/ ctx[0];
+				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, each_1_anchor.parentNode, destroy_block, create_each_block, each_1_anchor, get_each_context);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].d(detaching);
+			}
+
+			if (detaching) detach(each_1_anchor);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { things } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('things' in $$props) $$invalidate(0, things = $$props.things);
+	};
+
+	return [things];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { things: 0 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/each-block-keyed/input.svelte b/test/js/samples/each-block-keyed/input.svelte
new file mode 100644
index 0000000000..e6493dcd58
--- /dev/null
+++ b/test/js/samples/each-block-keyed/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let things;
+</script>
+
+{#each things as thing (thing.id)}
+	<div>{thing.name}</div>
+{/each}
\ No newline at end of file
diff --git a/test/js/samples/empty-dom/expected.js b/test/js/samples/empty-dom/expected.js
new file mode 100644
index 0000000000..d5c80be696
--- /dev/null
+++ b/test/js/samples/empty-dom/expected.js
@@ -0,0 +1,16 @@
+/* generated by Svelte vX.Y.Z */
+import { SvelteComponent, init, safe_not_equal } from "svelte/internal";
+
+function instance($$self) {
+	const a = 1 + 2;
+	return [];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, null, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/empty-dom/input.svelte b/test/js/samples/empty-dom/input.svelte
new file mode 100644
index 0000000000..3098443ea3
--- /dev/null
+++ b/test/js/samples/empty-dom/input.svelte
@@ -0,0 +1,3 @@
+<script>
+	const a = 1 + 2;
+</script>
\ No newline at end of file
diff --git a/test/js/samples/event-handler-dynamic/expected.js b/test/js/samples/event-handler-dynamic/expected.js
new file mode 100644
index 0000000000..dacdfe15ac
--- /dev/null
+++ b/test/js/samples/event-handler-dynamic/expected.js
@@ -0,0 +1,110 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	detach,
+	element,
+	init,
+	insert,
+	is_function,
+	listen,
+	noop,
+	run_all,
+	safe_not_equal,
+	set_data,
+	space,
+	text
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let p0;
+	let button0;
+	let t1;
+	let button1;
+	let t3;
+	let p1;
+	let t4;
+	let t5;
+	let button2;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			p0 = element("p");
+			button0 = element("button");
+			button0.textContent = "set handler 1";
+			t1 = space();
+			button1 = element("button");
+			button1.textContent = "set handler 2";
+			t3 = space();
+			p1 = element("p");
+			t4 = text(/*number*/ ctx[1]);
+			t5 = space();
+			button2 = element("button");
+			button2.textContent = "click";
+		},
+		m(target, anchor) {
+			insert(target, p0, anchor);
+			append(p0, button0);
+			append(p0, t1);
+			append(p0, button1);
+			insert(target, t3, anchor);
+			insert(target, p1, anchor);
+			append(p1, t4);
+			insert(target, t5, anchor);
+			insert(target, button2, anchor);
+
+			if (!mounted) {
+				dispose = [
+					listen(button0, "click", /*updateHandler1*/ ctx[2]),
+					listen(button1, "click", /*updateHandler2*/ ctx[3]),
+					listen(button2, "click", function () {
+						if (is_function(/*clickHandler*/ ctx[0])) /*clickHandler*/ ctx[0].apply(this, arguments);
+					})
+				];
+
+				mounted = true;
+			}
+		},
+		p(new_ctx, [dirty]) {
+			ctx = new_ctx;
+			if (dirty & /*number*/ 2) set_data(t4, /*number*/ ctx[1]);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(p0);
+			if (detaching) detach(t3);
+			if (detaching) detach(p1);
+			if (detaching) detach(t5);
+			if (detaching) detach(button2);
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let clickHandler;
+	let number = 0;
+
+	function updateHandler1() {
+		$$invalidate(0, clickHandler = () => $$invalidate(1, number = 1));
+	}
+
+	function updateHandler2() {
+		$$invalidate(0, clickHandler = () => $$invalidate(1, number = 2));
+	}
+
+	return [clickHandler, number, updateHandler1, updateHandler2];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/event-handler-dynamic/input.svelte b/test/js/samples/event-handler-dynamic/input.svelte
new file mode 100644
index 0000000000..17c9ae6cf0
--- /dev/null
+++ b/test/js/samples/event-handler-dynamic/input.svelte
@@ -0,0 +1,23 @@
+<script>
+	let clickHandler;
+	let number = 0;
+	
+	function updateHandler1(){
+		clickHandler = () => number = 1;
+	}
+
+	function updateHandler2(){
+		clickHandler = () => number = 2;
+	}
+	
+
+</script>
+
+<p>
+<button on:click={updateHandler1}>set handler 1</button>
+<button on:click={updateHandler2}>set handler 2</button>
+</p>
+
+<p>{ number }</p>
+
+<button on:click={clickHandler}>click</button>
\ No newline at end of file
diff --git a/test/js/samples/event-handler-no-passive/expected.js b/test/js/samples/event-handler-no-passive/expected.js
new file mode 100644
index 0000000000..4d4b910d4e
--- /dev/null
+++ b/test/js/samples/event-handler-no-passive/expected.js
@@ -0,0 +1,53 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	attr,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let a;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			a = element("a");
+			a.textContent = "this should not navigate to example.com";
+			attr(a, "href", "https://example.com");
+		},
+		m(target, anchor) {
+			insert(target, a, anchor);
+
+			if (!mounted) {
+				dispose = listen(a, "touchstart", touchstart_handler);
+				mounted = true;
+			}
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(a);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+const touchstart_handler = e => e.preventDefault();
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/event-handler-no-passive/input.svelte b/test/js/samples/event-handler-no-passive/input.svelte
new file mode 100644
index 0000000000..3205782adb
--- /dev/null
+++ b/test/js/samples/event-handler-no-passive/input.svelte
@@ -0,0 +1,3 @@
+<a href="https://example.com" on:touchstart="{e => e.preventDefault()}">
+	this should not navigate to example.com
+</a>
\ No newline at end of file
diff --git a/test/js/samples/event-modifiers/expected.js b/test/js/samples/event-modifiers/expected.js
new file mode 100644
index 0000000000..3901753661
--- /dev/null
+++ b/test/js/samples/event-modifiers/expected.js
@@ -0,0 +1,93 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	prevent_default,
+	run_all,
+	safe_not_equal,
+	space,
+	stop_propagation
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let div1;
+	let div0;
+	let t1;
+	let button0;
+	let t3;
+	let button1;
+	let t5;
+	let button2;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			div1 = element("div");
+			div0 = element("div");
+			div0.textContent = "touch me";
+			t1 = space();
+			button0 = element("button");
+			button0.textContent = "click me";
+			t3 = space();
+			button1 = element("button");
+			button1.textContent = "or me";
+			t5 = space();
+			button2 = element("button");
+			button2.textContent = "or me!";
+		},
+		m(target, anchor) {
+			insert(target, div1, anchor);
+			append(div1, div0);
+			append(div1, t1);
+			append(div1, button0);
+			append(div1, t3);
+			append(div1, button1);
+			append(div1, t5);
+			append(div1, button2);
+
+			if (!mounted) {
+				dispose = [
+					listen(div0, "touchstart", handleTouchstart, { passive: false }),
+					listen(button0, "click", stop_propagation(prevent_default(handleClick))),
+					listen(button1, "click", handleClick, { once: true, capture: true }),
+					listen(button2, "click", handleClick, true),
+					listen(div1, "touchstart", handleTouchstart, { passive: true })
+				];
+
+				mounted = true;
+			}
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div1);
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+function handleTouchstart() {
+	
+} // ...
+
+function handleClick() {
+	
+} // ...
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/event-modifiers/input.svelte b/test/js/samples/event-modifiers/input.svelte
new file mode 100644
index 0000000000..c72d58dabb
--- /dev/null
+++ b/test/js/samples/event-modifiers/input.svelte
@@ -0,0 +1,16 @@
+<script>
+	function handleTouchstart() {
+		// ...
+	}
+
+	function handleClick() {
+		// ...
+	}
+</script>
+
+<div on:touchstart={handleTouchstart}>
+	<div on:touchstart|nonpassive={handleTouchstart}>touch me</div>
+	<button on:click|stopPropagation|preventDefault={handleClick}>click me</button>
+	<button on:click|once|capture={handleClick}>or me</button>
+	<button on:click|capture={handleClick}>or me!</button>
+</div>
\ No newline at end of file
diff --git a/test/js/samples/export-from-accessors/_config.js b/test/js/samples/export-from-accessors/_config.js
new file mode 100644
index 0000000000..7f9293a560
--- /dev/null
+++ b/test/js/samples/export-from-accessors/_config.js
@@ -0,0 +1,5 @@
+export default {
+	options: {
+		accessors: true
+	}
+};
diff --git a/test/js/samples/export-from-accessors/expected.js b/test/js/samples/export-from-accessors/expected.js
new file mode 100644
index 0000000000..20b0524ca7
--- /dev/null
+++ b/test/js/samples/export-from-accessors/expected.js
@@ -0,0 +1,34 @@
+/* generated by Svelte vX.Y.Z */
+import { SvelteComponent, init, safe_not_equal } from "svelte/internal";
+
+import { f as f_1, g as g_1 } from './d';
+import { h as h_1 } from './e';
+import { i as j } from './f';
+export { d as e } from './c';
+export { c } from './b';
+export { a, b } from './a';
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, null, safe_not_equal, {});
+	}
+
+	get f() {
+		return f_1;
+	}
+
+	get g() {
+		return g_1;
+	}
+
+	get h() {
+		return h_1;
+	}
+
+	get j() {
+		return j;
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/export-from-accessors/input.svelte b/test/js/samples/export-from-accessors/input.svelte
new file mode 100644
index 0000000000..66957806a2
--- /dev/null
+++ b/test/js/samples/export-from-accessors/input.svelte
@@ -0,0 +1,11 @@
+<script context="module">
+  export { a, b } from './a';
+  export { c } from './b';
+  export { d as e } from './c';
+</script>
+
+<script>
+  export { f, g } from './d';
+  export { h } from './e';
+  export { i as j } from './f';
+</script>
diff --git a/test/js/samples/export-from-cjs/_config.js b/test/js/samples/export-from-cjs/_config.js
new file mode 100644
index 0000000000..2506f1d5fc
--- /dev/null
+++ b/test/js/samples/export-from-cjs/_config.js
@@ -0,0 +1,6 @@
+export default {
+	options: {
+		accessors: true,
+		format: 'cjs'
+	}
+};
diff --git a/test/js/samples/export-from-cjs/expected.js b/test/js/samples/export-from-cjs/expected.js
new file mode 100644
index 0000000000..d40f986635
--- /dev/null
+++ b/test/js/samples/export-from-cjs/expected.js
@@ -0,0 +1,36 @@
+/* generated by Svelte vX.Y.Z */
+"use strict";
+
+const { SvelteComponent, init, safe_not_equal } = require("svelte/internal");
+const { f: f_1, g: g_1 } = require("./d");
+const { h: h_1 } = require("./e");
+const { i: j } = require("./f");
+exports.e = require("./c").d;
+exports.c = require("./b").c;
+exports.a = require("./a").a;
+exports.b = require("./a").b;
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, null, safe_not_equal, {});
+	}
+
+	get f() {
+		return f_1;
+	}
+
+	get g() {
+		return g_1;
+	}
+
+	get h() {
+		return h_1;
+	}
+
+	get j() {
+		return j;
+	}
+}
+
+exports.default = Component;
\ No newline at end of file
diff --git a/test/js/samples/export-from-cjs/input.svelte b/test/js/samples/export-from-cjs/input.svelte
new file mode 100644
index 0000000000..66957806a2
--- /dev/null
+++ b/test/js/samples/export-from-cjs/input.svelte
@@ -0,0 +1,11 @@
+<script context="module">
+  export { a, b } from './a';
+  export { c } from './b';
+  export { d as e } from './c';
+</script>
+
+<script>
+  export { f, g } from './d';
+  export { h } from './e';
+  export { i as j } from './f';
+</script>
diff --git a/test/js/samples/export-from/expected.js b/test/js/samples/export-from/expected.js
new file mode 100644
index 0000000000..04fb47605f
--- /dev/null
+++ b/test/js/samples/export-from/expected.js
@@ -0,0 +1,18 @@
+/* generated by Svelte vX.Y.Z */
+import { SvelteComponent, init, safe_not_equal } from "svelte/internal";
+
+import './d';
+import './e';
+import './f';
+export { d as e } from './c';
+export { c } from './b';
+export { a, b } from './a';
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, null, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/export-from/input.svelte b/test/js/samples/export-from/input.svelte
new file mode 100644
index 0000000000..66957806a2
--- /dev/null
+++ b/test/js/samples/export-from/input.svelte
@@ -0,0 +1,11 @@
+<script context="module">
+  export { a, b } from './a';
+  export { c } from './b';
+  export { d as e } from './c';
+</script>
+
+<script>
+  export { f, g } from './d';
+  export { h } from './e';
+  export { i as j } from './f';
+</script>
diff --git a/test/js/samples/head-no-whitespace/expected.js b/test/js/samples/head-no-whitespace/expected.js
new file mode 100644
index 0000000000..444bad3fd4
--- /dev/null
+++ b/test/js/samples/head-no-whitespace/expected.js
@@ -0,0 +1,47 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	attr,
+	detach,
+	element,
+	init,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let meta0;
+	let meta1;
+
+	return {
+		c() {
+			meta0 = element("meta");
+			meta1 = element("meta");
+			attr(meta0, "name", "twitter:creator");
+			attr(meta0, "content", "@sveltejs");
+			attr(meta1, "name", "twitter:title");
+			attr(meta1, "content", "Svelte");
+		},
+		m(target, anchor) {
+			append(document.head, meta0);
+			append(document.head, meta1);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			detach(meta0);
+			detach(meta1);
+		}
+	};
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/head-no-whitespace/input.svelte b/test/js/samples/head-no-whitespace/input.svelte
new file mode 100644
index 0000000000..000b643abe
--- /dev/null
+++ b/test/js/samples/head-no-whitespace/input.svelte
@@ -0,0 +1,4 @@
+<svelte:head>
+	<meta name='twitter:creator' content='@sveltejs'>
+	<meta name='twitter:title' content='Svelte'>
+</svelte:head>
\ No newline at end of file
diff --git a/test/js/samples/hoisted-const/expected.js b/test/js/samples/hoisted-const/expected.js
new file mode 100644
index 0000000000..2842b54751
--- /dev/null
+++ b/test/js/samples/hoisted-const/expected.js
@@ -0,0 +1,45 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let b;
+
+	return {
+		c() {
+			b = element("b");
+			b.textContent = `${get_answer()}`;
+		},
+		m(target, anchor) {
+			insert(target, b, anchor);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(b);
+		}
+	};
+}
+
+const ANSWER = 42;
+
+function get_answer() {
+	return ANSWER;
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/hoisted-const/input.svelte b/test/js/samples/hoisted-const/input.svelte
new file mode 100644
index 0000000000..d248a83154
--- /dev/null
+++ b/test/js/samples/hoisted-const/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	const ANSWER = 42;
+	function get_answer() { return ANSWER; }
+</script>
+
+<b>{get_answer()}</b>
\ No newline at end of file
diff --git a/test/js/samples/hoisted-let/expected.js b/test/js/samples/hoisted-let/expected.js
new file mode 100644
index 0000000000..285b124118
--- /dev/null
+++ b/test/js/samples/hoisted-let/expected.js
@@ -0,0 +1,45 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let b;
+
+	return {
+		c() {
+			b = element("b");
+			b.textContent = `${get_answer()}`;
+		},
+		m(target, anchor) {
+			insert(target, b, anchor);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(b);
+		}
+	};
+}
+
+let ANSWER = 42;
+
+function get_answer() {
+	return ANSWER;
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/hoisted-let/input.svelte b/test/js/samples/hoisted-let/input.svelte
new file mode 100644
index 0000000000..43168c3c10
--- /dev/null
+++ b/test/js/samples/hoisted-let/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	let ANSWER = 42;
+	function get_answer() { return ANSWER; }
+</script>
+
+<b>{get_answer()}</b>
\ No newline at end of file
diff --git a/test/js/samples/hydrated-void-element/_config.js b/test/js/samples/hydrated-void-element/_config.js
new file mode 100644
index 0000000000..af1bf11a52
--- /dev/null
+++ b/test/js/samples/hydrated-void-element/_config.js
@@ -0,0 +1,5 @@
+export default {
+	options: {
+		hydratable: true
+	}
+};
diff --git a/test/js/samples/hydrated-void-element/expected.js b/test/js/samples/hydrated-void-element/expected.js
new file mode 100644
index 0000000000..e84b9ad58e
--- /dev/null
+++ b/test/js/samples/hydrated-void-element/expected.js
@@ -0,0 +1,65 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	attr,
+	children,
+	claim_element,
+	claim_space,
+	detach,
+	element,
+	init,
+	insert_hydration,
+	noop,
+	safe_not_equal,
+	space,
+	src_url_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let img;
+	let img_src_value;
+	let t;
+	let div;
+
+	return {
+		c() {
+			img = element("img");
+			t = space();
+			div = element("div");
+			this.h();
+		},
+		l(nodes) {
+			img = claim_element(nodes, "IMG", { src: true, alt: true });
+			t = claim_space(nodes);
+			div = claim_element(nodes, "DIV", {});
+			children(div).forEach(detach);
+			this.h();
+		},
+		h() {
+			if (!src_url_equal(img.src, img_src_value = "donuts.jpg")) attr(img, "src", img_src_value);
+			attr(img, "alt", "donuts");
+		},
+		m(target, anchor) {
+			insert_hydration(target, img, anchor);
+			insert_hydration(target, t, anchor);
+			insert_hydration(target, div, anchor);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(img);
+			if (detaching) detach(t);
+			if (detaching) detach(div);
+		}
+	};
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
diff --git a/test/js/samples/hydrated-void-element/input.svelte b/test/js/samples/hydrated-void-element/input.svelte
new file mode 100644
index 0000000000..d70b3eaf12
--- /dev/null
+++ b/test/js/samples/hydrated-void-element/input.svelte
@@ -0,0 +1,2 @@
+<img src="donuts.jpg" alt="donuts">
+<div></div>
\ No newline at end of file
diff --git a/test/js/samples/hydrated-void-svg-element/_config.js b/test/js/samples/hydrated-void-svg-element/_config.js
new file mode 100644
index 0000000000..af1bf11a52
--- /dev/null
+++ b/test/js/samples/hydrated-void-svg-element/_config.js
@@ -0,0 +1,5 @@
+export default {
+	options: {
+		hydratable: true
+	}
+};
diff --git a/test/js/samples/hydrated-void-svg-element/expected.js b/test/js/samples/hydrated-void-svg-element/expected.js
new file mode 100644
index 0000000000..e3b525bcdd
--- /dev/null
+++ b/test/js/samples/hydrated-void-svg-element/expected.js
@@ -0,0 +1,58 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append_hydration,
+	children,
+	claim_svg_element,
+	claim_text,
+	detach,
+	init,
+	insert_hydration,
+	noop,
+	safe_not_equal,
+	svg_element,
+	text
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let svg;
+	let title;
+	let t;
+
+	return {
+		c() {
+			svg = svg_element("svg");
+			title = svg_element("title");
+			t = text("a title");
+		},
+		l(nodes) {
+			svg = claim_svg_element(nodes, "svg", {});
+			var svg_nodes = children(svg);
+			title = claim_svg_element(svg_nodes, "title", {});
+			var title_nodes = children(title);
+			t = claim_text(title_nodes, "a title");
+			title_nodes.forEach(detach);
+			svg_nodes.forEach(detach);
+		},
+		m(target, anchor) {
+			insert_hydration(target, svg, anchor);
+			append_hydration(svg, title);
+			append_hydration(title, t);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(svg);
+		}
+	};
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
diff --git a/test/js/samples/hydrated-void-svg-element/input.svelte b/test/js/samples/hydrated-void-svg-element/input.svelte
new file mode 100644
index 0000000000..7ec3f98b64
--- /dev/null
+++ b/test/js/samples/hydrated-void-svg-element/input.svelte
@@ -0,0 +1,3 @@
+<svg>
+	<title>a title</title>
+</svg>
\ No newline at end of file
diff --git a/test/js/samples/if-block-complex/expected.js b/test/js/samples/if-block-complex/expected.js
new file mode 100644
index 0000000000..a8244de8b0
--- /dev/null
+++ b/test/js/samples/if-block-complex/expected.js
@@ -0,0 +1,67 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	attr,
+	detach,
+	element,
+	empty,
+	init,
+	insert,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_if_block(ctx) {
+	let div;
+
+	return {
+		c() {
+			div = element("div");
+			attr(div, "class", "divider");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let show_if = /*item*/ ctx[0].divider && /*item*/ ctx[0].divider.includes(1);
+	let if_block_anchor;
+	let if_block = show_if && create_if_block(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+function instance($$self) {
+	let item = { divider: [1] };
+	return [item];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/if-block-complex/input.svelte b/test/js/samples/if-block-complex/input.svelte
new file mode 100644
index 0000000000..8c1143596b
--- /dev/null
+++ b/test/js/samples/if-block-complex/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	let item = {
+		divider: [1]
+	}
+</script>
+
+{#if (item.divider && item.divider.includes(1))}
+<div class="divider"></div>
+{/if}
diff --git a/test/js/samples/if-block-no-update/expected.js b/test/js/samples/if-block-no-update/expected.js
new file mode 100644
index 0000000000..25f197eb1a
--- /dev/null
+++ b/test/js/samples/if-block-no-update/expected.js
@@ -0,0 +1,105 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	detach,
+	element,
+	empty,
+	init,
+	insert,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_else_block(ctx) {
+	let p;
+
+	return {
+		c() {
+			p = element("p");
+			p.textContent = "not foo!";
+		},
+		m(target, anchor) {
+			insert(target, p, anchor);
+		},
+		d(detaching) {
+			if (detaching) detach(p);
+		}
+	};
+}
+
+// (5:0) {#if foo}
+function create_if_block(ctx) {
+	let p;
+
+	return {
+		c() {
+			p = element("p");
+			p.textContent = "foo!";
+		},
+		m(target, anchor) {
+			insert(target, p, anchor);
+		},
+		d(detaching) {
+			if (detaching) detach(p);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let if_block_anchor;
+
+	function select_block_type(ctx, dirty) {
+		if (/*foo*/ ctx[0]) return create_if_block;
+		return create_else_block;
+	}
+
+	let current_block_type = select_block_type(ctx, -1);
+	let if_block = current_block_type(ctx);
+
+	return {
+		c() {
+			if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (current_block_type !== (current_block_type = select_block_type(ctx, dirty))) {
+				if_block.d(1);
+				if_block = current_block_type(ctx);
+
+				if (if_block) {
+					if_block.c();
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				}
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { foo } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('foo' in $$props) $$invalidate(0, foo = $$props.foo);
+	};
+
+	return [foo];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { foo: 0 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/if-block-no-update/input.svelte b/test/js/samples/if-block-no-update/input.svelte
new file mode 100644
index 0000000000..c7a0f6a98c
--- /dev/null
+++ b/test/js/samples/if-block-no-update/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let foo;
+</script>
+
+{#if foo}
+	<p>foo!</p>
+{:else}
+	<p>not foo!</p>
+{/if}
\ No newline at end of file
diff --git a/test/js/samples/if-block-simple/expected.js b/test/js/samples/if-block-simple/expected.js
new file mode 100644
index 0000000000..6debe92c24
--- /dev/null
+++ b/test/js/samples/if-block-simple/expected.js
@@ -0,0 +1,83 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	detach,
+	element,
+	empty,
+	init,
+	insert,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_if_block(ctx) {
+	let p;
+
+	return {
+		c() {
+			p = element("p");
+			p.textContent = "foo!";
+		},
+		m(target, anchor) {
+			insert(target, p, anchor);
+		},
+		d(detaching) {
+			if (detaching) detach(p);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let if_block_anchor;
+	let if_block = /*foo*/ ctx[0] && create_if_block(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (/*foo*/ ctx[0]) {
+				if (if_block) {
+					
+				} else {
+					if_block = create_if_block(ctx);
+					if_block.c();
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { foo } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('foo' in $$props) $$invalidate(0, foo = $$props.foo);
+	};
+
+	return [foo];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { foo: 0 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/if-block-simple/input.svelte b/test/js/samples/if-block-simple/input.svelte
new file mode 100644
index 0000000000..545d81d44a
--- /dev/null
+++ b/test/js/samples/if-block-simple/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo;
+</script>
+
+{#if foo}
+	<p>foo!</p>
+{/if}
\ No newline at end of file
diff --git a/test/js/samples/import-meta/expected.js b/test/js/samples/import-meta/expected.js
new file mode 100644
index 0000000000..ba77398321
--- /dev/null
+++ b/test/js/samples/import-meta/expected.js
@@ -0,0 +1,53 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	detach,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	space,
+	text
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let t0;
+	let t1;
+	let t2_value = import.meta.url + "";
+	let t2;
+
+	return {
+		c() {
+			t0 = text(/*url*/ ctx[0]);
+			t1 = space();
+			t2 = text(t2_value);
+		},
+		m(target, anchor) {
+			insert(target, t0, anchor);
+			insert(target, t1, anchor);
+			insert(target, t2, anchor);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(t0);
+			if (detaching) detach(t1);
+			if (detaching) detach(t2);
+		}
+	};
+}
+
+function instance($$self) {
+	const url = import.meta.url;
+	return [url];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/import-meta/input.svelte b/test/js/samples/import-meta/input.svelte
new file mode 100644
index 0000000000..a5ce32dd77
--- /dev/null
+++ b/test/js/samples/import-meta/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	const url = import.meta.url;
+</script>
+
+{url}
+{import.meta.url}
diff --git a/test/js/samples/initial-context/expected.js b/test/js/samples/initial-context/expected.js
new file mode 100644
index 0000000000..592e2a709e
--- /dev/null
+++ b/test/js/samples/initial-context/expected.js
@@ -0,0 +1,59 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let button;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			button = element("button");
+		},
+		m(target, anchor) {
+			insert(target, button, anchor);
+
+			if (!mounted) {
+				dispose = listen(button, "click", /*click_handler*/ ctx[1]);
+				mounted = true;
+			}
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(button);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let foo;
+
+	function unreferenced() {
+		$$invalidate(0, foo = 1);
+	}
+
+	const click_handler = () => $$invalidate(0, foo = 2);
+	return [foo, click_handler];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/initial-context/input.svelte b/test/js/samples/initial-context/input.svelte
new file mode 100644
index 0000000000..22ec290514
--- /dev/null
+++ b/test/js/samples/initial-context/input.svelte
@@ -0,0 +1,7 @@
+<script>
+  let foo;
+  function unreferenced () {
+    foo = 1;
+  }
+</script>
+<button on:click={() => foo = 2}></button>
\ No newline at end of file
diff --git a/test/js/samples/inline-style-optimized-multiple/expected.js b/test/js/samples/inline-style-optimized-multiple/expected.js
new file mode 100644
index 0000000000..4e4dba16d5
--- /dev/null
+++ b/test/js/samples/inline-style-optimized-multiple/expected.js
@@ -0,0 +1,63 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_style
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let div;
+
+	return {
+		c() {
+			div = element("div");
+			set_style(div, "color", /*color*/ ctx[0]);
+			set_style(div, "transform", "translate(" + /*x*/ ctx[1] + "px," + /*y*/ ctx[2] + "px)");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*color*/ 1) {
+				set_style(div, "color", /*color*/ ctx[0]);
+			}
+
+			if (dirty & /*x, y*/ 6) {
+				set_style(div, "transform", "translate(" + /*x*/ ctx[1] + "px," + /*y*/ ctx[2] + "px)");
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { color } = $$props;
+	let { x } = $$props;
+	let { y } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('color' in $$props) $$invalidate(0, color = $$props.color);
+		if ('x' in $$props) $$invalidate(1, x = $$props.x);
+		if ('y' in $$props) $$invalidate(2, y = $$props.y);
+	};
+
+	return [color, x, y];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { color: 0, x: 1, y: 2 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/inline-style-optimized-multiple/input.svelte b/test/js/samples/inline-style-optimized-multiple/input.svelte
new file mode 100644
index 0000000000..d5e2beb609
--- /dev/null
+++ b/test/js/samples/inline-style-optimized-multiple/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let color;
+	export let x;
+	export let y;
+</script>
+
+<div style='color: {color}; transform: translate({x}px,{y}px);'></div>
\ No newline at end of file
diff --git a/test/js/samples/inline-style-optimized-url/expected.js b/test/js/samples/inline-style-optimized-url/expected.js
new file mode 100644
index 0000000000..a861e9dc7e
--- /dev/null
+++ b/test/js/samples/inline-style-optimized-url/expected.js
@@ -0,0 +1,54 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_style
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let div;
+
+	return {
+		c() {
+			div = element("div");
+			set_style(div, "background", "url(data:image/png;base64," + /*data*/ ctx[0] + ")");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*data*/ 1) {
+				set_style(div, "background", "url(data:image/png;base64," + /*data*/ ctx[0] + ")");
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { data } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('data' in $$props) $$invalidate(0, data = $$props.data);
+	};
+
+	return [data];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { data: 0 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/inline-style-optimized-url/input.svelte b/test/js/samples/inline-style-optimized-url/input.svelte
new file mode 100644
index 0000000000..2e660fe02d
--- /dev/null
+++ b/test/js/samples/inline-style-optimized-url/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let data;
+</script>
+
+<div style='background: url(data:image/png;base64,{data})'></div>
\ No newline at end of file
diff --git a/test/js/samples/inline-style-optimized/expected.js b/test/js/samples/inline-style-optimized/expected.js
new file mode 100644
index 0000000000..ea4f39ab47
--- /dev/null
+++ b/test/js/samples/inline-style-optimized/expected.js
@@ -0,0 +1,54 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_style
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let div;
+
+	return {
+		c() {
+			div = element("div");
+			set_style(div, "color", /*color*/ ctx[0]);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*color*/ 1) {
+				set_style(div, "color", /*color*/ ctx[0]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { color } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('color' in $$props) $$invalidate(0, color = $$props.color);
+	};
+
+	return [color];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { color: 0 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/inline-style-optimized/input.svelte b/test/js/samples/inline-style-optimized/input.svelte
new file mode 100644
index 0000000000..b47ca48093
--- /dev/null
+++ b/test/js/samples/inline-style-optimized/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let color;
+</script>
+
+<div style='color: {color}'></div>
\ No newline at end of file
diff --git a/test/js/samples/inline-style-unoptimized/expected.js b/test/js/samples/inline-style-unoptimized/expected.js
new file mode 100644
index 0000000000..2900fb6ce7
--- /dev/null
+++ b/test/js/samples/inline-style-unoptimized/expected.js
@@ -0,0 +1,73 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	attr,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	space
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let div0;
+	let t;
+	let div1;
+	let div1_style_value;
+
+	return {
+		c() {
+			div0 = element("div");
+			t = space();
+			div1 = element("div");
+			attr(div0, "style", /*style*/ ctx[0]);
+			attr(div1, "style", div1_style_value = "" + (/*key*/ ctx[1] + ": " + /*value*/ ctx[2]));
+		},
+		m(target, anchor) {
+			insert(target, div0, anchor);
+			insert(target, t, anchor);
+			insert(target, div1, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*style*/ 1) {
+				attr(div0, "style", /*style*/ ctx[0]);
+			}
+
+			if (dirty & /*key, value*/ 6 && div1_style_value !== (div1_style_value = "" + (/*key*/ ctx[1] + ": " + /*value*/ ctx[2]))) {
+				attr(div1, "style", div1_style_value);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div0);
+			if (detaching) detach(t);
+			if (detaching) detach(div1);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { style } = $$props;
+	let { key } = $$props;
+	let { value } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('style' in $$props) $$invalidate(0, style = $$props.style);
+		if ('key' in $$props) $$invalidate(1, key = $$props.key);
+		if ('value' in $$props) $$invalidate(2, value = $$props.value);
+	};
+
+	return [style, key, value];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { style: 0, key: 1, value: 2 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/inline-style-unoptimized/input.svelte b/test/js/samples/inline-style-unoptimized/input.svelte
new file mode 100644
index 0000000000..3893fa3f89
--- /dev/null
+++ b/test/js/samples/inline-style-unoptimized/input.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let style;
+	export let key;
+	export let value;
+</script>
+
+<div style={style}></div>
+<div style="{key}: {value}"></div>
\ No newline at end of file
diff --git a/test/js/samples/inline-style-without-updates/expected.js b/test/js/samples/inline-style-without-updates/expected.js
new file mode 100644
index 0000000000..ebfffe902c
--- /dev/null
+++ b/test/js/samples/inline-style-without-updates/expected.js
@@ -0,0 +1,42 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_style
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let div;
+
+	return {
+		c() {
+			div = element("div");
+			set_style(div, "color", color);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+let color = 'red';
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/inline-style-without-updates/input.svelte b/test/js/samples/inline-style-without-updates/input.svelte
new file mode 100644
index 0000000000..6f9fc90f84
--- /dev/null
+++ b/test/js/samples/inline-style-without-updates/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let color = 'red';
+</script>
+
+<div style="color: {color}"></div>
diff --git a/test/js/samples/input-files/expected.js b/test/js/samples/input-files/expected.js
new file mode 100644
index 0000000000..42ddddbcb3
--- /dev/null
+++ b/test/js/samples/input-files/expected.js
@@ -0,0 +1,66 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	attr,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let input;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			input = element("input");
+			attr(input, "type", "file");
+			input.multiple = true;
+		},
+		m(target, anchor) {
+			insert(target, input, anchor);
+
+			if (!mounted) {
+				dispose = listen(input, "change", /*input_change_handler*/ ctx[1]);
+				mounted = true;
+			}
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(input);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { files } = $$props;
+
+	function input_change_handler() {
+		files = this.files;
+		$$invalidate(0, files);
+	}
+
+	$$self.$$set = $$props => {
+		if ('files' in $$props) $$invalidate(0, files = $$props.files);
+	};
+
+	return [files, input_change_handler];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { files: 0 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/input-files/input.svelte b/test/js/samples/input-files/input.svelte
new file mode 100644
index 0000000000..f7d4159e37
--- /dev/null
+++ b/test/js/samples/input-files/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let files;
+</script>
+
+<input type="file" multiple bind:files>
\ No newline at end of file
diff --git a/test/js/samples/input-no-initial-value/expected.js b/test/js/samples/input-no-initial-value/expected.js
new file mode 100644
index 0000000000..a91a95bde2
--- /dev/null
+++ b/test/js/samples/input-no-initial-value/expected.js
@@ -0,0 +1,90 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	attr,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	run_all,
+	safe_not_equal,
+	set_input_value,
+	space
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let form;
+	let input;
+	let t0;
+	let button;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			form = element("form");
+			input = element("input");
+			t0 = space();
+			button = element("button");
+			button.textContent = "Store";
+			attr(input, "type", "text");
+			input.required = true;
+		},
+		m(target, anchor) {
+			insert(target, form, anchor);
+			append(form, input);
+			set_input_value(input, /*test*/ ctx[0]);
+			append(form, t0);
+			append(form, button);
+
+			if (!mounted) {
+				dispose = [
+					listen(input, "input", /*input_input_handler*/ ctx[2]),
+					listen(form, "submit", /*handleSubmit*/ ctx[1])
+				];
+
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*test*/ 1 && input.value !== /*test*/ ctx[0]) {
+				set_input_value(input, /*test*/ ctx[0]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(form);
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let test = undefined;
+
+	function handleSubmit(event) {
+		event.preventDefault();
+		console.log('value', test);
+	}
+
+	function input_input_handler() {
+		test = this.value;
+		$$invalidate(0, test);
+	}
+
+	return [test, handleSubmit, input_input_handler];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/input-no-initial-value/input.svelte b/test/js/samples/input-no-initial-value/input.svelte
new file mode 100644
index 0000000000..d60c0b196e
--- /dev/null
+++ b/test/js/samples/input-no-initial-value/input.svelte
@@ -0,0 +1,13 @@
+<script>
+	let test = undefined;
+
+	function handleSubmit(event) {
+		event.preventDefault();
+		console.log('value', test);
+	}
+</script>
+
+<form on:submit={handleSubmit}>
+	<input bind:value={test} type=text required>
+	<button>Store</button>
+</form>
\ No newline at end of file
diff --git a/test/js/samples/input-range/expected.js b/test/js/samples/input-range/expected.js
new file mode 100644
index 0000000000..7ced4b176b
--- /dev/null
+++ b/test/js/samples/input-range/expected.js
@@ -0,0 +1,77 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	attr,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	run_all,
+	safe_not_equal,
+	set_input_value,
+	to_number
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let input;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			input = element("input");
+			attr(input, "type", "range");
+		},
+		m(target, anchor) {
+			insert(target, input, anchor);
+			set_input_value(input, /*value*/ ctx[0]);
+
+			if (!mounted) {
+				dispose = [
+					listen(input, "change", /*input_change_input_handler*/ ctx[1]),
+					listen(input, "input", /*input_change_input_handler*/ ctx[1])
+				];
+
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*value*/ 1) {
+				set_input_value(input, /*value*/ ctx[0]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(input);
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { value } = $$props;
+
+	function input_change_input_handler() {
+		value = to_number(this.value);
+		$$invalidate(0, value);
+	}
+
+	$$self.$$set = $$props => {
+		if ('value' in $$props) $$invalidate(0, value = $$props.value);
+	};
+
+	return [value, input_change_input_handler];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { value: 0 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/input-range/input.svelte b/test/js/samples/input-range/input.svelte
new file mode 100644
index 0000000000..2fa0517f47
--- /dev/null
+++ b/test/js/samples/input-range/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let value;
+</script>
+
+<input type=range bind:value>
\ No newline at end of file
diff --git a/test/js/samples/input-value/expected.js b/test/js/samples/input-value/expected.js
new file mode 100644
index 0000000000..2f951c9ae1
--- /dev/null
+++ b/test/js/samples/input-value/expected.js
@@ -0,0 +1,423 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	attr,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	run_all,
+	safe_not_equal,
+	set_data,
+	space,
+	text
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let input0;
+	let t0;
+	let input1;
+	let t1;
+	let input2;
+	let t2;
+	let input3;
+	let t3;
+	let input4;
+	let t4;
+	let input5;
+	let t5;
+	let input6;
+	let t6;
+	let input7;
+	let t7;
+	let input8;
+	let t8;
+	let input9;
+	let t9;
+	let input10;
+	let t10;
+	let input11;
+	let t11;
+	let input12;
+	let t12;
+	let input13;
+	let t13;
+	let input14;
+	let t14;
+	let input15;
+	let t15;
+	let input16;
+	let t16;
+	let input17;
+	let t17;
+	let input18;
+	let t18;
+	let input19;
+	let t19;
+	let input20;
+	let t20;
+	let input21;
+	let t21;
+	let input22;
+	let t22;
+	let h1;
+	let t23;
+	let t24;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			input0 = element("input");
+			t0 = space();
+			input1 = element("input");
+			t1 = space();
+			input2 = element("input");
+			t2 = space();
+			input3 = element("input");
+			t3 = space();
+			input4 = element("input");
+			t4 = space();
+			input5 = element("input");
+			t5 = space();
+			input6 = element("input");
+			t6 = space();
+			input7 = element("input");
+			t7 = space();
+			input8 = element("input");
+			t8 = space();
+			input9 = element("input");
+			t9 = space();
+			input10 = element("input");
+			t10 = space();
+			input11 = element("input");
+			t11 = space();
+			input12 = element("input");
+			t12 = space();
+			input13 = element("input");
+			t13 = space();
+			input14 = element("input");
+			t14 = space();
+			input15 = element("input");
+			t15 = space();
+			input16 = element("input");
+			t16 = space();
+			input17 = element("input");
+			t17 = space();
+			input18 = element("input");
+			t18 = space();
+			input19 = element("input");
+			t19 = space();
+			input20 = element("input");
+			t20 = space();
+			input21 = element("input");
+			t21 = space();
+			input22 = element("input");
+			t22 = space();
+			h1 = element("h1");
+			t23 = text(/*name*/ ctx[0]);
+			t24 = text("!");
+			input0.value = /*name*/ ctx[0];
+			attr(input1, "type", "email");
+			input1.value = /*name*/ ctx[0];
+			attr(input2, "type", "month");
+			input2.value = /*name*/ ctx[0];
+			attr(input3, "type", "number");
+			input3.value = /*name*/ ctx[0];
+			attr(input4, "type", "password");
+			input4.value = /*name*/ ctx[0];
+			attr(input5, "type", "search");
+			input5.value = /*name*/ ctx[0];
+			attr(input6, "type", "tel");
+			input6.value = /*name*/ ctx[0];
+			attr(input7, "type", "text");
+			input7.value = /*name*/ ctx[0];
+			attr(input8, "type", "url");
+			input8.value = /*name*/ ctx[0];
+			attr(input9, "type", "week");
+			input9.value = /*name*/ ctx[0];
+			attr(input10, "type", "button");
+			input10.value = /*name*/ ctx[0];
+			attr(input11, "type", "checkbox");
+			input11.value = /*name*/ ctx[0];
+			attr(input12, "type", "color");
+			input12.value = /*name*/ ctx[0];
+			attr(input13, "type", "date");
+			input13.value = /*name*/ ctx[0];
+			attr(input14, "type", "datetime-local");
+			input14.value = /*name*/ ctx[0];
+			attr(input15, "type", "file");
+			input15.value = /*name*/ ctx[0];
+			attr(input16, "type", "hidden");
+			input16.value = /*name*/ ctx[0];
+			attr(input17, "type", "image");
+			input17.value = /*name*/ ctx[0];
+			attr(input17, "alt", /*name*/ ctx[0]);
+			attr(input18, "type", "radio");
+			input18.value = /*name*/ ctx[0];
+			attr(input19, "type", "range");
+			input19.value = /*name*/ ctx[0];
+			attr(input20, "type", "reset");
+			input20.value = /*name*/ ctx[0];
+			attr(input21, "type", "submit");
+			input21.value = /*name*/ ctx[0];
+			attr(input22, "type", "time");
+			input22.value = /*name*/ ctx[0];
+		},
+		m(target, anchor) {
+			insert(target, input0, anchor);
+			insert(target, t0, anchor);
+			insert(target, input1, anchor);
+			insert(target, t1, anchor);
+			insert(target, input2, anchor);
+			insert(target, t2, anchor);
+			insert(target, input3, anchor);
+			insert(target, t3, anchor);
+			insert(target, input4, anchor);
+			insert(target, t4, anchor);
+			insert(target, input5, anchor);
+			insert(target, t5, anchor);
+			insert(target, input6, anchor);
+			insert(target, t6, anchor);
+			insert(target, input7, anchor);
+			insert(target, t7, anchor);
+			insert(target, input8, anchor);
+			insert(target, t8, anchor);
+			insert(target, input9, anchor);
+			insert(target, t9, anchor);
+			insert(target, input10, anchor);
+			insert(target, t10, anchor);
+			insert(target, input11, anchor);
+			insert(target, t11, anchor);
+			insert(target, input12, anchor);
+			insert(target, t12, anchor);
+			insert(target, input13, anchor);
+			insert(target, t13, anchor);
+			insert(target, input14, anchor);
+			insert(target, t14, anchor);
+			insert(target, input15, anchor);
+			insert(target, t15, anchor);
+			insert(target, input16, anchor);
+			insert(target, t16, anchor);
+			insert(target, input17, anchor);
+			insert(target, t17, anchor);
+			insert(target, input18, anchor);
+			insert(target, t18, anchor);
+			insert(target, input19, anchor);
+			insert(target, t19, anchor);
+			insert(target, input20, anchor);
+			insert(target, t20, anchor);
+			insert(target, input21, anchor);
+			insert(target, t21, anchor);
+			insert(target, input22, anchor);
+			insert(target, t22, anchor);
+			insert(target, h1, anchor);
+			append(h1, t23);
+			append(h1, t24);
+
+			if (!mounted) {
+				dispose = [
+					listen(input0, "input", /*onInput*/ ctx[1]),
+					listen(input1, "input", /*onInput*/ ctx[1]),
+					listen(input2, "input", /*onInput*/ ctx[1]),
+					listen(input3, "input", /*onInput*/ ctx[1]),
+					listen(input4, "input", /*onInput*/ ctx[1]),
+					listen(input5, "input", /*onInput*/ ctx[1]),
+					listen(input6, "input", /*onInput*/ ctx[1]),
+					listen(input7, "input", /*onInput*/ ctx[1]),
+					listen(input8, "input", /*onInput*/ ctx[1]),
+					listen(input9, "input", /*onInput*/ ctx[1]),
+					listen(input10, "input", /*onInput*/ ctx[1]),
+					listen(input11, "input", /*onInput*/ ctx[1]),
+					listen(input12, "input", /*onInput*/ ctx[1]),
+					listen(input13, "input", /*onInput*/ ctx[1]),
+					listen(input14, "input", /*onInput*/ ctx[1]),
+					listen(input15, "input", /*onInput*/ ctx[1]),
+					listen(input16, "input", /*onInput*/ ctx[1]),
+					listen(input17, "input", /*onInput*/ ctx[1]),
+					listen(input18, "input", /*onInput*/ ctx[1]),
+					listen(input19, "input", /*onInput*/ ctx[1]),
+					listen(input20, "input", /*onInput*/ ctx[1]),
+					listen(input21, "input", /*onInput*/ ctx[1]),
+					listen(input22, "input", /*onInput*/ ctx[1])
+				];
+
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*name*/ 1 && input0.value !== /*name*/ ctx[0]) {
+				input0.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1 && input1.value !== /*name*/ ctx[0]) {
+				input1.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1 && input2.value !== /*name*/ ctx[0]) {
+				input2.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1 && input3.value !== /*name*/ ctx[0]) {
+				input3.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1 && input4.value !== /*name*/ ctx[0]) {
+				input4.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1 && input5.value !== /*name*/ ctx[0]) {
+				input5.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1 && input6.value !== /*name*/ ctx[0]) {
+				input6.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1 && input7.value !== /*name*/ ctx[0]) {
+				input7.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1 && input8.value !== /*name*/ ctx[0]) {
+				input8.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1 && input9.value !== /*name*/ ctx[0]) {
+				input9.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1) {
+				input10.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1) {
+				input11.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1) {
+				input12.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1) {
+				input13.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1) {
+				input14.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1) {
+				input15.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1) {
+				input16.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1) {
+				input17.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1) {
+				attr(input17, "alt", /*name*/ ctx[0]);
+			}
+
+			if (dirty & /*name*/ 1) {
+				input18.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1) {
+				input19.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1) {
+				input20.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1) {
+				input21.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1 && input22.value !== /*name*/ ctx[0]) {
+				input22.value = /*name*/ ctx[0];
+			}
+
+			if (dirty & /*name*/ 1) set_data(t23, /*name*/ ctx[0]);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(input0);
+			if (detaching) detach(t0);
+			if (detaching) detach(input1);
+			if (detaching) detach(t1);
+			if (detaching) detach(input2);
+			if (detaching) detach(t2);
+			if (detaching) detach(input3);
+			if (detaching) detach(t3);
+			if (detaching) detach(input4);
+			if (detaching) detach(t4);
+			if (detaching) detach(input5);
+			if (detaching) detach(t5);
+			if (detaching) detach(input6);
+			if (detaching) detach(t6);
+			if (detaching) detach(input7);
+			if (detaching) detach(t7);
+			if (detaching) detach(input8);
+			if (detaching) detach(t8);
+			if (detaching) detach(input9);
+			if (detaching) detach(t9);
+			if (detaching) detach(input10);
+			if (detaching) detach(t10);
+			if (detaching) detach(input11);
+			if (detaching) detach(t11);
+			if (detaching) detach(input12);
+			if (detaching) detach(t12);
+			if (detaching) detach(input13);
+			if (detaching) detach(t13);
+			if (detaching) detach(input14);
+			if (detaching) detach(t14);
+			if (detaching) detach(input15);
+			if (detaching) detach(t15);
+			if (detaching) detach(input16);
+			if (detaching) detach(t16);
+			if (detaching) detach(input17);
+			if (detaching) detach(t17);
+			if (detaching) detach(input18);
+			if (detaching) detach(t18);
+			if (detaching) detach(input19);
+			if (detaching) detach(t19);
+			if (detaching) detach(input20);
+			if (detaching) detach(t20);
+			if (detaching) detach(input21);
+			if (detaching) detach(t21);
+			if (detaching) detach(input22);
+			if (detaching) detach(t22);
+			if (detaching) detach(h1);
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let name = 'change me';
+
+	function onInput(event) {
+		$$invalidate(0, name = event.target.value);
+	}
+
+	return [name, onInput];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
diff --git a/test/js/samples/input-value/input.svelte b/test/js/samples/input-value/input.svelte
new file mode 100644
index 0000000000..ee1d9e3de7
--- /dev/null
+++ b/test/js/samples/input-value/input.svelte
@@ -0,0 +1,33 @@
+<script>
+	let name = 'change me';
+
+	function onInput(event) {
+		name = event.target.value
+	}
+</script>
+
+<input value={name} on:input={onInput}>
+<input type="email" value={name} on:input={onInput}>
+<input type="month" value={name} on:input={onInput}>
+<input type="number" value={name} on:input={onInput}>
+<input type="password" value={name} on:input={onInput}>
+<input type="search" value={name} on:input={onInput}>
+<input type="tel" value={name} on:input={onInput}>
+<input type="text" value={name} on:input={onInput}>
+<input type="url" value={name} on:input={onInput}>
+<input type="week" value={name} on:input={onInput}>
+
+<input type="button" value={name} on:input={onInput}>
+<input type="checkbox" value={name} on:input={onInput}>
+<input type="color" value={name} on:input={onInput}>
+<input type="date" value={name} on:input={onInput}>
+<input type="datetime-local" value={name} on:input={onInput}>
+<input type="file" value={name} on:input={onInput}>
+<input type="hidden" value={name} on:input={onInput}>
+<input type="image" value={name} on:input={onInput} alt={name}>
+<input type="radio" value={name} on:input={onInput}>
+<input type="range" value={name} on:input={onInput}>
+<input type="reset" value={name} on:input={onInput}>
+<input type="submit" value={name} on:input={onInput}>
+<input type="time" value={name} on:input={onInput}>
+<h1>{name}!</h1>
diff --git a/test/js/samples/input-without-blowback-guard/expected.js b/test/js/samples/input-without-blowback-guard/expected.js
new file mode 100644
index 0000000000..007177bda5
--- /dev/null
+++ b/test/js/samples/input-without-blowback-guard/expected.js
@@ -0,0 +1,70 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	attr,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let input;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			input = element("input");
+			attr(input, "type", "checkbox");
+		},
+		m(target, anchor) {
+			insert(target, input, anchor);
+			input.checked = /*foo*/ ctx[0];
+
+			if (!mounted) {
+				dispose = listen(input, "change", /*input_change_handler*/ ctx[1]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*foo*/ 1) {
+				input.checked = /*foo*/ ctx[0];
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(input);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { foo } = $$props;
+
+	function input_change_handler() {
+		foo = this.checked;
+		$$invalidate(0, foo);
+	}
+
+	$$self.$$set = $$props => {
+		if ('foo' in $$props) $$invalidate(0, foo = $$props.foo);
+	};
+
+	return [foo, input_change_handler];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { foo: 0 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/input-without-blowback-guard/input.svelte b/test/js/samples/input-without-blowback-guard/input.svelte
new file mode 100644
index 0000000000..9c5bfa35dc
--- /dev/null
+++ b/test/js/samples/input-without-blowback-guard/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+<input type='checkbox' bind:checked={foo}>
\ No newline at end of file
diff --git a/test/js/samples/instrumentation-script-if-no-block/expected.js b/test/js/samples/instrumentation-script-if-no-block/expected.js
new file mode 100644
index 0000000000..7f51c64550
--- /dev/null
+++ b/test/js/samples/instrumentation-script-if-no-block/expected.js
@@ -0,0 +1,79 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal,
+	set_data,
+	space,
+	text
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let button;
+	let t1;
+	let p;
+	let t2;
+	let t3;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			button = element("button");
+			button.textContent = "foo";
+			t1 = space();
+			p = element("p");
+			t2 = text("x: ");
+			t3 = text(/*x*/ ctx[0]);
+		},
+		m(target, anchor) {
+			insert(target, button, anchor);
+			insert(target, t1, anchor);
+			insert(target, p, anchor);
+			append(p, t2);
+			append(p, t3);
+
+			if (!mounted) {
+				dispose = listen(button, "click", /*foo*/ ctx[1]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*x*/ 1) set_data(t3, /*x*/ ctx[0]);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(button);
+			if (detaching) detach(t1);
+			if (detaching) detach(p);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let x = 0;
+
+	function foo() {
+		if (true) $$invalidate(0, x += 1);
+	}
+
+	return [x, foo];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/instrumentation-script-if-no-block/input.svelte b/test/js/samples/instrumentation-script-if-no-block/input.svelte
new file mode 100644
index 0000000000..59184bafd1
--- /dev/null
+++ b/test/js/samples/instrumentation-script-if-no-block/input.svelte
@@ -0,0 +1,11 @@
+<script>
+	let x = 0;
+
+	function foo() {
+		if (true) x += 1;
+	}
+</script>
+
+<button on:click={foo}>foo</button>
+
+<p>x: {x}</p>
\ No newline at end of file
diff --git a/test/js/samples/instrumentation-script-main-block/expected.js b/test/js/samples/instrumentation-script-main-block/expected.js
new file mode 100644
index 0000000000..a471a50b37
--- /dev/null
+++ b/test/js/samples/instrumentation-script-main-block/expected.js
@@ -0,0 +1,75 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_data,
+	text
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let p;
+	let t0;
+	let t1;
+
+	return {
+		c() {
+			p = element("p");
+			t0 = text("x: ");
+			t1 = text(/*x*/ ctx[0]);
+		},
+		m(target, anchor) {
+			insert(target, p, anchor);
+			append(p, t0);
+			append(p, t1);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*x*/ 1) set_data(t1, /*x*/ ctx[0]);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(p);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let x = 0;
+	let y = 1;
+	x += 1;
+
+	{
+		x += 2;
+	}
+
+	setTimeout(
+		function foo() {
+			$$invalidate(0, x += 10);
+			$$invalidate(1, y += 20);
+		},
+		1000
+	);
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*x, y*/ 3) {
+			$: $$invalidate(0, x += y);
+		}
+	};
+
+	return [x, y];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/instrumentation-script-main-block/input.svelte b/test/js/samples/instrumentation-script-main-block/input.svelte
new file mode 100644
index 0000000000..8c01783710
--- /dev/null
+++ b/test/js/samples/instrumentation-script-main-block/input.svelte
@@ -0,0 +1,19 @@
+<script>
+	let x = 0;
+	let y = 1;
+
+	x += 1;
+
+	{
+		x += 2;
+	}
+
+	setTimeout(function foo() {
+		x += 10;
+		y += 20;
+	}, 1000);
+
+	$: x += y;
+</script>
+
+<p>x: {x}</p>
diff --git a/test/js/samples/instrumentation-script-x-equals-x/expected.js b/test/js/samples/instrumentation-script-x-equals-x/expected.js
new file mode 100644
index 0000000000..ea0d65acb9
--- /dev/null
+++ b/test/js/samples/instrumentation-script-x-equals-x/expected.js
@@ -0,0 +1,81 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal,
+	set_data,
+	space,
+	text
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let button;
+	let t1;
+	let p;
+	let t2;
+	let t3_value = /*things*/ ctx[0].length + "";
+	let t3;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			button = element("button");
+			button.textContent = "foo";
+			t1 = space();
+			p = element("p");
+			t2 = text("number of things: ");
+			t3 = text(t3_value);
+		},
+		m(target, anchor) {
+			insert(target, button, anchor);
+			insert(target, t1, anchor);
+			insert(target, p, anchor);
+			append(p, t2);
+			append(p, t3);
+
+			if (!mounted) {
+				dispose = listen(button, "click", /*foo*/ ctx[1]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*things*/ 1 && t3_value !== (t3_value = /*things*/ ctx[0].length + "")) set_data(t3, t3_value);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(button);
+			if (detaching) detach(t1);
+			if (detaching) detach(p);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let things = [];
+
+	function foo() {
+		things.push(1);
+		$$invalidate(0, things);
+	}
+
+	return [things, foo];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/instrumentation-script-x-equals-x/input.svelte b/test/js/samples/instrumentation-script-x-equals-x/input.svelte
new file mode 100644
index 0000000000..0873e9fa80
--- /dev/null
+++ b/test/js/samples/instrumentation-script-x-equals-x/input.svelte
@@ -0,0 +1,12 @@
+<script>
+	let things = [];
+
+	function foo() {
+		things.push(1);
+		things = things;
+	}
+</script>
+
+<button on:click={foo}>foo</button>
+
+<p>number of things: {things.length}</p>
\ No newline at end of file
diff --git a/test/js/samples/instrumentation-template-if-no-block/expected.js b/test/js/samples/instrumentation-template-if-no-block/expected.js
new file mode 100644
index 0000000000..0c2713a9cc
--- /dev/null
+++ b/test/js/samples/instrumentation-template-if-no-block/expected.js
@@ -0,0 +1,79 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal,
+	set_data,
+	space,
+	text
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let button;
+	let t1;
+	let p;
+	let t2;
+	let t3;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			button = element("button");
+			button.textContent = "foo";
+			t1 = space();
+			p = element("p");
+			t2 = text("x: ");
+			t3 = text(/*x*/ ctx[0]);
+		},
+		m(target, anchor) {
+			insert(target, button, anchor);
+			insert(target, t1, anchor);
+			insert(target, p, anchor);
+			append(p, t2);
+			append(p, t3);
+
+			if (!mounted) {
+				dispose = listen(button, "click", /*click_handler*/ ctx[1]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*x*/ 1) set_data(t3, /*x*/ ctx[0]);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(button);
+			if (detaching) detach(t1);
+			if (detaching) detach(p);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let x = 0;
+
+	const click_handler = () => {
+		if (true) $$invalidate(0, x += 1);
+	};
+
+	return [x, click_handler];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/instrumentation-template-if-no-block/input.svelte b/test/js/samples/instrumentation-template-if-no-block/input.svelte
new file mode 100644
index 0000000000..5115544bc4
--- /dev/null
+++ b/test/js/samples/instrumentation-template-if-no-block/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	let x = 0;
+</script>
+
+<button on:click="{() => {
+	if (true) x += 1;
+}}">foo</button>
+
+<p>x: {x}</p>
\ No newline at end of file
diff --git a/test/js/samples/instrumentation-template-x-equals-x/expected.js b/test/js/samples/instrumentation-template-x-equals-x/expected.js
new file mode 100644
index 0000000000..55cd310661
--- /dev/null
+++ b/test/js/samples/instrumentation-template-x-equals-x/expected.js
@@ -0,0 +1,81 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal,
+	set_data,
+	space,
+	text
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let button;
+	let t1;
+	let p;
+	let t2;
+	let t3_value = /*things*/ ctx[0].length + "";
+	let t3;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			button = element("button");
+			button.textContent = "foo";
+			t1 = space();
+			p = element("p");
+			t2 = text("number of things: ");
+			t3 = text(t3_value);
+		},
+		m(target, anchor) {
+			insert(target, button, anchor);
+			insert(target, t1, anchor);
+			insert(target, p, anchor);
+			append(p, t2);
+			append(p, t3);
+
+			if (!mounted) {
+				dispose = listen(button, "click", /*click_handler*/ ctx[1]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*things*/ 1 && t3_value !== (t3_value = /*things*/ ctx[0].length + "")) set_data(t3, t3_value);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(button);
+			if (detaching) detach(t1);
+			if (detaching) detach(p);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let things = [];
+
+	const click_handler = () => {
+		things.push(1);
+		$$invalidate(0, things);
+	};
+
+	return [things, click_handler];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/instrumentation-template-x-equals-x/input.svelte b/test/js/samples/instrumentation-template-x-equals-x/input.svelte
new file mode 100644
index 0000000000..bfd4a480dd
--- /dev/null
+++ b/test/js/samples/instrumentation-template-x-equals-x/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	let things = [];
+</script>
+
+<button on:click="{() => { things.push(1); things = things }}">foo</button>
+
+<p>number of things: {things.length}</p>
\ No newline at end of file
diff --git a/test/js/samples/legacy-input-type/_config.js b/test/js/samples/legacy-input-type/_config.js
new file mode 100644
index 0000000000..67924a4ffe
--- /dev/null
+++ b/test/js/samples/legacy-input-type/_config.js
@@ -0,0 +1,5 @@
+export default {
+	options: {
+		legacy: true
+	}
+};
diff --git a/test/js/samples/legacy-input-type/expected.js b/test/js/samples/legacy-input-type/expected.js
new file mode 100644
index 0000000000..2b76a48522
--- /dev/null
+++ b/test/js/samples/legacy-input-type/expected.js
@@ -0,0 +1,40 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_input_type
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let input;
+
+	return {
+		c() {
+			input = element("input");
+			set_input_type(input, "search");
+		},
+		m(target, anchor) {
+			insert(target, input, anchor);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(input);
+		}
+	};
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/legacy-input-type/input.svelte b/test/js/samples/legacy-input-type/input.svelte
new file mode 100644
index 0000000000..564f14428c
--- /dev/null
+++ b/test/js/samples/legacy-input-type/input.svelte
@@ -0,0 +1 @@
+<input type='search'>
\ No newline at end of file
diff --git a/test/js/samples/loop-protect/_config.js b/test/js/samples/loop-protect/_config.js
new file mode 100644
index 0000000000..1dc927b4da
--- /dev/null
+++ b/test/js/samples/loop-protect/_config.js
@@ -0,0 +1,6 @@
+export default {
+	options: {
+		dev: true,
+		loopGuardTimeout: 100
+	}
+};
diff --git a/test/js/samples/loop-protect/expected.js b/test/js/samples/loop-protect/expected.js
new file mode 100644
index 0000000000..04033d0d95
--- /dev/null
+++ b/test/js/samples/loop-protect/expected.js
@@ -0,0 +1,168 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponentDev,
+	add_location,
+	binding_callbacks,
+	detach_dev,
+	dispatch_dev,
+	element,
+	globals,
+	init,
+	insert_dev,
+	loop_guard,
+	noop,
+	safe_not_equal,
+	validate_slots
+} from "svelte/internal";
+
+const { console: console_1 } = globals;
+const file = undefined;
+
+function create_fragment(ctx) {
+	let div;
+
+	const block = {
+		c: function create() {
+			div = element("div");
+			add_location(div, file, 22, 0, 288);
+		},
+		l: function claim(nodes) {
+			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+		},
+		m: function mount(target, anchor) {
+			insert_dev(target, div, anchor);
+			/*div_binding*/ ctx[1](div);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d: function destroy(detaching) {
+			if (detaching) detach_dev(div);
+			/*div_binding*/ ctx[1](null);
+		}
+	};
+
+	dispatch_dev("SvelteRegisterBlock", {
+		block,
+		id: create_fragment.name,
+		type: "component",
+		source: "",
+		ctx
+	});
+
+	return block;
+}
+
+function foo() {
+	const guard = 'foo';
+
+	{
+		const guard_1 = loop_guard(100);
+
+		while (true) {
+			console.log(guard);
+			guard_1();
+		}
+	}
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { $$slots: slots = {}, $$scope } = $$props;
+	validate_slots('Component', slots, []);
+	let node;
+
+	{
+		const guard = loop_guard(100);
+
+		while (true) {
+			foo();
+			guard();
+		}
+	}
+
+	{
+		const guard_2 = loop_guard(100);
+
+		for (; ; ) {
+			foo();
+			guard_2();
+		}
+	}
+
+	{
+		const guard_3 = loop_guard(100);
+
+		while (true) {
+			foo();
+			guard_3();
+		}
+	}
+
+	{
+		const guard_5 = loop_guard(100);
+
+		do {
+			foo();
+			guard_5();
+		} while (true);
+	}
+
+	const writable_props = [];
+
+	Object.keys($$props).forEach(key => {
+		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1.warn(`<Component> was created with unknown prop '${key}'`);
+	});
+
+	function div_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			node = $$value;
+			$$invalidate(0, node);
+		});
+	}
+
+	$$self.$capture_state = () => ({ node, foo });
+
+	$$self.$inject_state = $$props => {
+		if ('node' in $$props) $$invalidate(0, node = $$props.node);
+	};
+
+	if ($$props && "$$inject" in $$props) {
+		$$self.$inject_state($$props.$$inject);
+	}
+
+	$: {
+		const guard_4 = loop_guard(100);
+
+		while (true) {
+			foo();
+			guard_4();
+		}
+	}
+
+	$: {
+		const guard_6 = loop_guard(100);
+
+		do {
+			foo();
+			guard_6();
+		} while (true);
+	}
+
+	return [node, div_binding];
+}
+
+class Component extends SvelteComponentDev {
+	constructor(options) {
+		super(options);
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+
+		dispatch_dev("SvelteRegisterComponent", {
+			component: this,
+			tagName: "Component",
+			options,
+			id: create_fragment.name
+		});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/loop-protect/input.svelte b/test/js/samples/loop-protect/input.svelte
new file mode 100644
index 0000000000..daac6ab1c4
--- /dev/null
+++ b/test/js/samples/loop-protect/input.svelte
@@ -0,0 +1,23 @@
+<script>
+  let node;
+
+  function foo() {
+    const guard = 'foo';
+    while(true) {
+      console.log(guard);
+    }
+  }
+
+  while(true) {
+    foo();
+  }
+  for(;;) {
+    foo();
+  }
+  while(true) foo();
+  $: while(true) foo();
+  do foo(); while(true);
+  $: do foo(); while(true);
+</script>
+
+<div bind:this={node}></div>
\ No newline at end of file
diff --git a/test/js/samples/media-bindings/expected.js b/test/js/samples/media-bindings/expected.js
new file mode 100644
index 0000000000..5005eb47d1
--- /dev/null
+++ b/test/js/samples/media-bindings/expected.js
@@ -0,0 +1,234 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	add_render_callback,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	raf,
+	run_all,
+	safe_not_equal,
+	time_ranges_to_array
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let audio;
+	let audio_updating = false;
+	let audio_animationframe;
+	let audio_is_paused = true;
+	let mounted;
+	let dispose;
+
+	function audio_timeupdate_handler() {
+		cancelAnimationFrame(audio_animationframe);
+
+		if (!audio.paused) {
+			audio_animationframe = raf(audio_timeupdate_handler);
+			audio_updating = true;
+		}
+
+		/*audio_timeupdate_handler*/ ctx[13].call(audio);
+	}
+
+	return {
+		c() {
+			audio = element("audio");
+			if (/*buffered*/ ctx[0] === void 0) add_render_callback(() => /*audio_progress_handler*/ ctx[11].call(audio));
+			if (/*buffered*/ ctx[0] === void 0 || /*seekable*/ ctx[1] === void 0) add_render_callback(() => /*audio_loadedmetadata_handler*/ ctx[12].call(audio));
+			if (/*played*/ ctx[2] === void 0 || /*currentTime*/ ctx[3] === void 0 || /*ended*/ ctx[10] === void 0) add_render_callback(audio_timeupdate_handler);
+			if (/*duration*/ ctx[4] === void 0) add_render_callback(() => /*audio_durationchange_handler*/ ctx[14].call(audio));
+			if (/*seeking*/ ctx[9] === void 0) add_render_callback(() => /*audio_seeking_seeked_handler*/ ctx[18].call(audio));
+			if (/*ended*/ ctx[10] === void 0) add_render_callback(() => /*audio_ended_handler*/ ctx[19].call(audio));
+		},
+		m(target, anchor) {
+			insert(target, audio, anchor);
+
+			if (!isNaN(/*volume*/ ctx[6])) {
+				audio.volume = /*volume*/ ctx[6];
+			}
+
+			audio.muted = /*muted*/ ctx[7];
+
+			if (!isNaN(/*playbackRate*/ ctx[8])) {
+				audio.playbackRate = /*playbackRate*/ ctx[8];
+			}
+
+			if (!mounted) {
+				dispose = [
+					listen(audio, "progress", /*audio_progress_handler*/ ctx[11]),
+					listen(audio, "loadedmetadata", /*audio_loadedmetadata_handler*/ ctx[12]),
+					listen(audio, "timeupdate", audio_timeupdate_handler),
+					listen(audio, "durationchange", /*audio_durationchange_handler*/ ctx[14]),
+					listen(audio, "play", /*audio_play_pause_handler*/ ctx[15]),
+					listen(audio, "pause", /*audio_play_pause_handler*/ ctx[15]),
+					listen(audio, "volumechange", /*audio_volumechange_handler*/ ctx[16]),
+					listen(audio, "ratechange", /*audio_ratechange_handler*/ ctx[17]),
+					listen(audio, "seeking", /*audio_seeking_seeked_handler*/ ctx[18]),
+					listen(audio, "seeked", /*audio_seeking_seeked_handler*/ ctx[18]),
+					listen(audio, "ended", /*audio_ended_handler*/ ctx[19])
+				];
+
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (!audio_updating && dirty & /*currentTime*/ 8 && !isNaN(/*currentTime*/ ctx[3])) {
+				audio.currentTime = /*currentTime*/ ctx[3];
+			}
+
+			audio_updating = false;
+
+			if (dirty & /*paused*/ 32 && audio_is_paused !== (audio_is_paused = /*paused*/ ctx[5])) {
+				audio[audio_is_paused ? "pause" : "play"]();
+			}
+
+			if (dirty & /*volume*/ 64 && !isNaN(/*volume*/ ctx[6])) {
+				audio.volume = /*volume*/ ctx[6];
+			}
+
+			if (dirty & /*muted*/ 128) {
+				audio.muted = /*muted*/ ctx[7];
+			}
+
+			if (dirty & /*playbackRate*/ 256 && !isNaN(/*playbackRate*/ ctx[8])) {
+				audio.playbackRate = /*playbackRate*/ ctx[8];
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(audio);
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { buffered } = $$props;
+	let { seekable } = $$props;
+	let { played } = $$props;
+	let { currentTime } = $$props;
+	let { duration } = $$props;
+	let { paused } = $$props;
+	let { volume } = $$props;
+	let { muted } = $$props;
+	let { playbackRate } = $$props;
+	let { seeking } = $$props;
+	let { ended } = $$props;
+
+	function audio_progress_handler() {
+		buffered = time_ranges_to_array(this.buffered);
+		$$invalidate(0, buffered);
+	}
+
+	function audio_loadedmetadata_handler() {
+		buffered = time_ranges_to_array(this.buffered);
+		seekable = time_ranges_to_array(this.seekable);
+		$$invalidate(0, buffered);
+		$$invalidate(1, seekable);
+	}
+
+	function audio_timeupdate_handler() {
+		played = time_ranges_to_array(this.played);
+		currentTime = this.currentTime;
+		ended = this.ended;
+		$$invalidate(2, played);
+		$$invalidate(3, currentTime);
+		$$invalidate(10, ended);
+	}
+
+	function audio_durationchange_handler() {
+		duration = this.duration;
+		$$invalidate(4, duration);
+	}
+
+	function audio_play_pause_handler() {
+		paused = this.paused;
+		$$invalidate(5, paused);
+	}
+
+	function audio_volumechange_handler() {
+		volume = this.volume;
+		muted = this.muted;
+		$$invalidate(6, volume);
+		$$invalidate(7, muted);
+	}
+
+	function audio_ratechange_handler() {
+		playbackRate = this.playbackRate;
+		$$invalidate(8, playbackRate);
+	}
+
+	function audio_seeking_seeked_handler() {
+		seeking = this.seeking;
+		$$invalidate(9, seeking);
+	}
+
+	function audio_ended_handler() {
+		ended = this.ended;
+		$$invalidate(10, ended);
+	}
+
+	$$self.$$set = $$props => {
+		if ('buffered' in $$props) $$invalidate(0, buffered = $$props.buffered);
+		if ('seekable' in $$props) $$invalidate(1, seekable = $$props.seekable);
+		if ('played' in $$props) $$invalidate(2, played = $$props.played);
+		if ('currentTime' in $$props) $$invalidate(3, currentTime = $$props.currentTime);
+		if ('duration' in $$props) $$invalidate(4, duration = $$props.duration);
+		if ('paused' in $$props) $$invalidate(5, paused = $$props.paused);
+		if ('volume' in $$props) $$invalidate(6, volume = $$props.volume);
+		if ('muted' in $$props) $$invalidate(7, muted = $$props.muted);
+		if ('playbackRate' in $$props) $$invalidate(8, playbackRate = $$props.playbackRate);
+		if ('seeking' in $$props) $$invalidate(9, seeking = $$props.seeking);
+		if ('ended' in $$props) $$invalidate(10, ended = $$props.ended);
+	};
+
+	return [
+		buffered,
+		seekable,
+		played,
+		currentTime,
+		duration,
+		paused,
+		volume,
+		muted,
+		playbackRate,
+		seeking,
+		ended,
+		audio_progress_handler,
+		audio_loadedmetadata_handler,
+		audio_timeupdate_handler,
+		audio_durationchange_handler,
+		audio_play_pause_handler,
+		audio_volumechange_handler,
+		audio_ratechange_handler,
+		audio_seeking_seeked_handler,
+		audio_ended_handler
+	];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+
+		init(this, options, instance, create_fragment, safe_not_equal, {
+			buffered: 0,
+			seekable: 1,
+			played: 2,
+			currentTime: 3,
+			duration: 4,
+			paused: 5,
+			volume: 6,
+			muted: 7,
+			playbackRate: 8,
+			seeking: 9,
+			ended: 10
+		});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/media-bindings/input.svelte b/test/js/samples/media-bindings/input.svelte
new file mode 100644
index 0000000000..7c1afcf614
--- /dev/null
+++ b/test/js/samples/media-bindings/input.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let buffered;
+	export let seekable;
+	export let played;
+	export let currentTime;
+	export let duration;
+	export let paused;
+	export let volume;
+	export let muted;
+	export let playbackRate;
+	export let seeking;
+	export let ended;
+</script>
+
+<audio bind:buffered bind:seekable bind:played bind:currentTime bind:duration bind:paused bind:volume bind:muted bind:playbackRate bind:seeking bind:ended/>
diff --git a/test/js/samples/non-imported-component/expected.js b/test/js/samples/non-imported-component/expected.js
new file mode 100644
index 0000000000..e3f2760ce0
--- /dev/null
+++ b/test/js/samples/non-imported-component/expected.js
@@ -0,0 +1,66 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	create_component,
+	destroy_component,
+	detach,
+	init,
+	insert,
+	mount_component,
+	noop,
+	safe_not_equal,
+	space,
+	transition_in,
+	transition_out
+} from "svelte/internal";
+
+import Imported from 'Imported.svelte';
+
+function create_fragment(ctx) {
+	let imported;
+	let t;
+	let nonimported;
+	let current;
+	imported = new Imported({});
+	nonimported = new NonImported({});
+
+	return {
+		c() {
+			create_component(imported.$$.fragment);
+			t = space();
+			create_component(nonimported.$$.fragment);
+		},
+		m(target, anchor) {
+			mount_component(imported, target, anchor);
+			insert(target, t, anchor);
+			mount_component(nonimported, target, anchor);
+			current = true;
+		},
+		p: noop,
+		i(local) {
+			if (current) return;
+			transition_in(imported.$$.fragment, local);
+			transition_in(nonimported.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(imported.$$.fragment, local);
+			transition_out(nonimported.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(imported, detaching);
+			if (detaching) detach(t);
+			destroy_component(nonimported, detaching);
+		}
+	};
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/non-imported-component/input.svelte b/test/js/samples/non-imported-component/input.svelte
new file mode 100644
index 0000000000..fb2054bc7f
--- /dev/null
+++ b/test/js/samples/non-imported-component/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Imported from 'Imported.svelte';
+</script>
+
+<Imported/>
+<NonImported/>
\ No newline at end of file
diff --git a/test/js/samples/non-mutable-reference/expected.js b/test/js/samples/non-mutable-reference/expected.js
new file mode 100644
index 0000000000..adc67b9bc4
--- /dev/null
+++ b/test/js/samples/non-mutable-reference/expected.js
@@ -0,0 +1,41 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let h1;
+
+	return {
+		c() {
+			h1 = element("h1");
+			h1.textContent = `Hello ${name}!`;
+		},
+		m(target, anchor) {
+			insert(target, h1, anchor);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(h1);
+		}
+	};
+}
+
+let name = 'world';
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/non-mutable-reference/input.svelte b/test/js/samples/non-mutable-reference/input.svelte
new file mode 100644
index 0000000000..22b3c84db0
--- /dev/null
+++ b/test/js/samples/non-mutable-reference/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let name = 'world';
+</script>
+
+<h1>Hello {name}!</h1>
\ No newline at end of file
diff --git a/test/js/samples/optional-chaining/expected.js b/test/js/samples/optional-chaining/expected.js
new file mode 100644
index 0000000000..57369ddb72
--- /dev/null
+++ b/test/js/samples/optional-chaining/expected.js
@@ -0,0 +1,189 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	attr,
+	create_component,
+	destroy_component,
+	detach,
+	element,
+	init,
+	insert,
+	mount_component,
+	safe_not_equal,
+	set_data,
+	space,
+	text,
+	transition_in,
+	transition_out
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let t0_value = /*a*/ ctx[0].normal + "";
+	let t0;
+	let t1_value = /*b*/ ctx[1]?.optional + "";
+	let t1;
+	let t2;
+	let t3_value = /*c*/ ctx[2]['computed'] + "";
+	let t3;
+	let t4_value = /*d*/ ctx[3]?.['computed_optional'] + "";
+	let t4;
+	let t5;
+	let t6_value = /*e*/ ctx[4]() + "";
+	let t6;
+	let t7_value = /*f*/ ctx[5]?.() + "";
+	let t7;
+	let t8;
+	let div;
+	let div_a_value;
+	let div_b_value;
+	let div_c_value;
+	let div_d_value;
+	let div_e_value;
+	let div_f_value;
+	let t9;
+	let component;
+	let current;
+
+	component = new /*Component*/ ctx[6]({
+			props: {
+				a: /*a*/ ctx[0].normal,
+				b: /*b*/ ctx[1]?.optional,
+				c: /*c*/ ctx[2]['computed'],
+				d: /*d*/ ctx[3]?.['computed_optional'],
+				e: /*e*/ ctx[4](),
+				f: /*f*/ ctx[5]?.()
+			}
+		});
+
+	return {
+		c() {
+			t0 = text(t0_value);
+			t1 = text(t1_value);
+			t2 = space();
+			t3 = text(t3_value);
+			t4 = text(t4_value);
+			t5 = space();
+			t6 = text(t6_value);
+			t7 = text(t7_value);
+			t8 = space();
+			div = element("div");
+			t9 = space();
+			create_component(component.$$.fragment);
+			attr(div, "a", div_a_value = /*a*/ ctx[0].normal);
+			attr(div, "b", div_b_value = /*b*/ ctx[1]?.optional);
+			attr(div, "c", div_c_value = /*c*/ ctx[2]['computed']);
+			attr(div, "d", div_d_value = /*d*/ ctx[3]?.['computed_optional']);
+			attr(div, "e", div_e_value = /*e*/ ctx[4]());
+			attr(div, "f", div_f_value = /*f*/ ctx[5]?.());
+		},
+		m(target, anchor) {
+			insert(target, t0, anchor);
+			insert(target, t1, anchor);
+			insert(target, t2, anchor);
+			insert(target, t3, anchor);
+			insert(target, t4, anchor);
+			insert(target, t5, anchor);
+			insert(target, t6, anchor);
+			insert(target, t7, anchor);
+			insert(target, t8, anchor);
+			insert(target, div, anchor);
+			insert(target, t9, anchor);
+			mount_component(component, target, anchor);
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			if ((!current || dirty & /*a*/ 1) && t0_value !== (t0_value = /*a*/ ctx[0].normal + "")) set_data(t0, t0_value);
+			if ((!current || dirty & /*b*/ 2) && t1_value !== (t1_value = /*b*/ ctx[1]?.optional + "")) set_data(t1, t1_value);
+			if ((!current || dirty & /*c*/ 4) && t3_value !== (t3_value = /*c*/ ctx[2]['computed'] + "")) set_data(t3, t3_value);
+			if ((!current || dirty & /*d*/ 8) && t4_value !== (t4_value = /*d*/ ctx[3]?.['computed_optional'] + "")) set_data(t4, t4_value);
+			if ((!current || dirty & /*e*/ 16) && t6_value !== (t6_value = /*e*/ ctx[4]() + "")) set_data(t6, t6_value);
+			if ((!current || dirty & /*f*/ 32) && t7_value !== (t7_value = /*f*/ ctx[5]?.() + "")) set_data(t7, t7_value);
+
+			if (!current || dirty & /*a*/ 1 && div_a_value !== (div_a_value = /*a*/ ctx[0].normal)) {
+				attr(div, "a", div_a_value);
+			}
+
+			if (!current || dirty & /*b*/ 2 && div_b_value !== (div_b_value = /*b*/ ctx[1]?.optional)) {
+				attr(div, "b", div_b_value);
+			}
+
+			if (!current || dirty & /*c*/ 4 && div_c_value !== (div_c_value = /*c*/ ctx[2]['computed'])) {
+				attr(div, "c", div_c_value);
+			}
+
+			if (!current || dirty & /*d*/ 8 && div_d_value !== (div_d_value = /*d*/ ctx[3]?.['computed_optional'])) {
+				attr(div, "d", div_d_value);
+			}
+
+			if (!current || dirty & /*e*/ 16 && div_e_value !== (div_e_value = /*e*/ ctx[4]())) {
+				attr(div, "e", div_e_value);
+			}
+
+			if (!current || dirty & /*f*/ 32 && div_f_value !== (div_f_value = /*f*/ ctx[5]?.())) {
+				attr(div, "f", div_f_value);
+			}
+
+			const component_changes = {};
+			if (dirty & /*a*/ 1) component_changes.a = /*a*/ ctx[0].normal;
+			if (dirty & /*b*/ 2) component_changes.b = /*b*/ ctx[1]?.optional;
+			if (dirty & /*c*/ 4) component_changes.c = /*c*/ ctx[2]['computed'];
+			if (dirty & /*d*/ 8) component_changes.d = /*d*/ ctx[3]?.['computed_optional'];
+			if (dirty & /*e*/ 16) component_changes.e = /*e*/ ctx[4]();
+			if (dirty & /*f*/ 32) component_changes.f = /*f*/ ctx[5]?.();
+			component.$set(component_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(component.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(component.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(t0);
+			if (detaching) detach(t1);
+			if (detaching) detach(t2);
+			if (detaching) detach(t3);
+			if (detaching) detach(t4);
+			if (detaching) detach(t5);
+			if (detaching) detach(t6);
+			if (detaching) detach(t7);
+			if (detaching) detach(t8);
+			if (detaching) detach(div);
+			if (detaching) detach(t9);
+			destroy_component(component, detaching);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { a } = $$props;
+	let { b } = $$props;
+	let { c } = $$props;
+	let { d } = $$props;
+	let { e } = $$props;
+	let { f } = $$props;
+	let Component;
+
+	$$self.$$set = $$props => {
+		if ('a' in $$props) $$invalidate(0, a = $$props.a);
+		if ('b' in $$props) $$invalidate(1, b = $$props.b);
+		if ('c' in $$props) $$invalidate(2, c = $$props.c);
+		if ('d' in $$props) $$invalidate(3, d = $$props.d);
+		if ('e' in $$props) $$invalidate(4, e = $$props.e);
+		if ('f' in $$props) $$invalidate(5, f = $$props.f);
+	};
+
+	return [a, b, c, d, e, f, Component];
+}
+
+class Component_1 extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { a: 0, b: 1, c: 2, d: 3, e: 4, f: 5 });
+	}
+}
+
+export default Component_1;
\ No newline at end of file
diff --git a/test/js/samples/optional-chaining/input.svelte b/test/js/samples/optional-chaining/input.svelte
new file mode 100644
index 0000000000..78edf2ca85
--- /dev/null
+++ b/test/js/samples/optional-chaining/input.svelte
@@ -0,0 +1,31 @@
+<script>
+  export let a;
+  export let b;
+  export let c;
+  export let d;
+  export let e;
+  export let f;
+  let Component;
+</script>
+
+{a.normal}{b?.optional}
+{c['computed']}{d?.['computed_optional']}
+{e()}{f?.()}
+
+<div
+  a={a.normal}
+  b={b?.optional}
+  c={c['computed']}
+  d={d?.['computed_optional']}
+  e={e()}
+  f={f?.()}
+/>
+
+<Component
+  a={a.normal}
+  b={b?.optional}
+  c={c['computed']}
+  d={d?.['computed_optional']}
+  e={e()}
+  f={f?.()}
+/>
diff --git a/test/js/samples/reactive-class-optimized/expected.js b/test/js/samples/reactive-class-optimized/expected.js
new file mode 100644
index 0000000000..1d0606ad60
--- /dev/null
+++ b/test/js/samples/reactive-class-optimized/expected.js
@@ -0,0 +1,162 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	component_subscribe,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	space,
+	subscribe,
+	toggle_class
+} from "svelte/internal";
+
+import { reactiveStoreVal, unreactiveExport } from './store';
+
+function create_fragment(ctx) {
+	let div0;
+	let t0;
+	let div1;
+	let t1;
+	let div2;
+	let t2;
+	let div3;
+	let t3;
+	let div4;
+	let t4;
+	let div5;
+	let t5;
+	let div6;
+	let t6;
+	let div7;
+	let t7;
+	let div8;
+
+	return {
+		c() {
+			div0 = element("div");
+			t0 = space();
+			div1 = element("div");
+			t1 = space();
+			div2 = element("div");
+			t2 = space();
+			div3 = element("div");
+			t3 = space();
+			div4 = element("div");
+			t4 = space();
+			div5 = element("div");
+			t5 = space();
+			div6 = element("div");
+			t6 = space();
+			div7 = element("div");
+			t7 = space();
+			div8 = element("div");
+			toggle_class(div0, "update1", reactiveModuleVar);
+			toggle_class(div1, "update2", /*reactiveConst*/ ctx[0].x);
+			toggle_class(div2, "update3", nonReactiveGlobal && /*reactiveConst*/ ctx[0].x);
+			toggle_class(div3, "update4", /*$reactiveStoreVal*/ ctx[2]);
+			toggle_class(div4, "update5", /*$reactiveDeclaration*/ ctx[3]);
+			toggle_class(div5, "static1", nonReactiveModuleVar);
+			toggle_class(div6, "static2", nonReactiveGlobal);
+			toggle_class(div7, "static3", nonReactiveModuleVar && nonReactiveGlobal);
+			toggle_class(div8, "static4", unreactiveExport);
+		},
+		m(target, anchor) {
+			insert(target, div0, anchor);
+			insert(target, t0, anchor);
+			insert(target, div1, anchor);
+			insert(target, t1, anchor);
+			insert(target, div2, anchor);
+			insert(target, t2, anchor);
+			insert(target, div3, anchor);
+			insert(target, t3, anchor);
+			insert(target, div4, anchor);
+			insert(target, t4, anchor);
+			insert(target, div5, anchor);
+			insert(target, t5, anchor);
+			insert(target, div6, anchor);
+			insert(target, t6, anchor);
+			insert(target, div7, anchor);
+			insert(target, t7, anchor);
+			insert(target, div8, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*reactiveModuleVar*/ 0) {
+				toggle_class(div0, "update1", reactiveModuleVar);
+			}
+
+			if (dirty & /*reactiveConst*/ 1) {
+				toggle_class(div1, "update2", /*reactiveConst*/ ctx[0].x);
+			}
+
+			if (dirty & /*nonReactiveGlobal, reactiveConst*/ 1) {
+				toggle_class(div2, "update3", nonReactiveGlobal && /*reactiveConst*/ ctx[0].x);
+			}
+
+			if (dirty & /*$reactiveStoreVal*/ 4) {
+				toggle_class(div3, "update4", /*$reactiveStoreVal*/ ctx[2]);
+			}
+
+			if (dirty & /*$reactiveDeclaration*/ 8) {
+				toggle_class(div4, "update5", /*$reactiveDeclaration*/ ctx[3]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div0);
+			if (detaching) detach(t0);
+			if (detaching) detach(div1);
+			if (detaching) detach(t1);
+			if (detaching) detach(div2);
+			if (detaching) detach(t2);
+			if (detaching) detach(div3);
+			if (detaching) detach(t3);
+			if (detaching) detach(div4);
+			if (detaching) detach(t4);
+			if (detaching) detach(div5);
+			if (detaching) detach(t5);
+			if (detaching) detach(div6);
+			if (detaching) detach(t6);
+			if (detaching) detach(div7);
+			if (detaching) detach(t7);
+			if (detaching) detach(div8);
+		}
+	};
+}
+
+let nonReactiveModuleVar = Math.random();
+let reactiveModuleVar = Math.random();
+
+function instance($$self, $$props, $$invalidate) {
+	let reactiveDeclaration;
+	let $reactiveStoreVal;
+
+	let $reactiveDeclaration,
+		$$unsubscribe_reactiveDeclaration = noop,
+		$$subscribe_reactiveDeclaration = () => ($$unsubscribe_reactiveDeclaration(), $$unsubscribe_reactiveDeclaration = subscribe(reactiveDeclaration, $$value => $$invalidate(3, $reactiveDeclaration = $$value)), reactiveDeclaration);
+
+	component_subscribe($$self, reactiveStoreVal, $$value => $$invalidate(2, $reactiveStoreVal = $$value));
+	$$self.$$.on_destroy.push(() => $$unsubscribe_reactiveDeclaration());
+	nonReactiveGlobal = Math.random();
+	const reactiveConst = { x: Math.random() };
+	reactiveModuleVar += 1;
+
+	if (Math.random()) {
+		reactiveConst.x += 1;
+	}
+
+	$: $$subscribe_reactiveDeclaration($$invalidate(1, reactiveDeclaration = reactiveModuleVar * 2));
+	return [reactiveConst, reactiveDeclaration, $reactiveStoreVal, $reactiveDeclaration];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/reactive-class-optimized/input.svelte b/test/js/samples/reactive-class-optimized/input.svelte
new file mode 100644
index 0000000000..f10fd11290
--- /dev/null
+++ b/test/js/samples/reactive-class-optimized/input.svelte
@@ -0,0 +1,31 @@
+<script context="module">
+	let nonReactiveModuleVar = Math.random();
+	let reactiveModuleVar = Math.random();
+</script>
+
+<script>
+	import { reactiveStoreVal, unreactiveExport } from './store';
+
+	nonReactiveGlobal = Math.random();
+	const reactiveConst = {x: Math.random()};
+
+	$: reactiveDeclaration = reactiveModuleVar * 2;
+
+	reactiveModuleVar += 1;
+	if (Math.random()) {
+		reactiveConst.x += 1;
+	}
+</script>
+
+<!--These should all get updaters because they have at least one reactive dependency-->
+<div class:update1={reactiveModuleVar}></div>
+<div class:update2={reactiveConst.x}></div>
+<div class:update3={nonReactiveGlobal && reactiveConst.x}></div>
+<div class:update4={$reactiveStoreVal}></div>
+<div class:update5={$reactiveDeclaration}></div>
+
+<!--These shouldn't get updates because they're purely non-reactive-->
+<div class:static1={nonReactiveModuleVar}></div>
+<div class:static2={nonReactiveGlobal}></div>
+<div class:static3={nonReactiveModuleVar && nonReactiveGlobal}></div>
+<div class:static4={unreactiveExport}></div>
diff --git a/test/js/samples/reactive-class-optimized/store.js b/test/js/samples/reactive-class-optimized/store.js
new file mode 100644
index 0000000000..bd91f0ece3
--- /dev/null
+++ b/test/js/samples/reactive-class-optimized/store.js
@@ -0,0 +1,4 @@
+import { writable } from '../../../../store';
+
+export const reactiveStoreVal = writable(0);
+export const unreactiveExport = true;
diff --git a/test/js/samples/reactive-values-non-topologically-ordered/expected.js b/test/js/samples/reactive-values-non-topologically-ordered/expected.js
new file mode 100644
index 0000000000..82af20ee90
--- /dev/null
+++ b/test/js/samples/reactive-values-non-topologically-ordered/expected.js
@@ -0,0 +1,33 @@
+/* generated by Svelte vX.Y.Z */
+import { SvelteComponent, init, safe_not_equal } from "svelte/internal";
+
+function instance($$self, $$props, $$invalidate) {
+	let { x } = $$props;
+	let a;
+	let b;
+
+	$$self.$$set = $$props => {
+		if ('x' in $$props) $$invalidate(0, x = $$props.x);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*x*/ 1) {
+			$: $$invalidate(1, b = x);
+		}
+
+		if ($$self.$$.dirty & /*b*/ 2) {
+			$: a = b;
+		}
+	};
+
+	return [x, b];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, null, safe_not_equal, { x: 0 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/reactive-values-non-topologically-ordered/input.svelte b/test/js/samples/reactive-values-non-topologically-ordered/input.svelte
new file mode 100644
index 0000000000..a443372b05
--- /dev/null
+++ b/test/js/samples/reactive-values-non-topologically-ordered/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let x;
+
+	let a;
+	let b;
+
+	$: a = b;
+	$: b = x;
+</script>
\ No newline at end of file
diff --git a/test/js/samples/reactive-values-non-writable-dependencies/expected.js b/test/js/samples/reactive-values-non-writable-dependencies/expected.js
new file mode 100644
index 0000000000..ca01bda65b
--- /dev/null
+++ b/test/js/samples/reactive-values-non-writable-dependencies/expected.js
@@ -0,0 +1,29 @@
+/* generated by Svelte vX.Y.Z */
+import { SvelteComponent, init, safe_not_equal } from "svelte/internal";
+
+function instance($$self, $$props, $$invalidate) {
+	let { a = 1 } = $$props;
+	let { b = 2 } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('a' in $$props) $$invalidate(0, a = $$props.a);
+		if ('b' in $$props) $$invalidate(1, b = $$props.b);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*a, b*/ 3) {
+			$: console.log('max', Math.max(a, b));
+		}
+	};
+
+	return [a, b];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, null, safe_not_equal, { a: 0, b: 1 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/reactive-values-non-writable-dependencies/input.svelte b/test/js/samples/reactive-values-non-writable-dependencies/input.svelte
new file mode 100644
index 0000000000..3fb70d5e8f
--- /dev/null
+++ b/test/js/samples/reactive-values-non-writable-dependencies/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let a = 1;
+	export let b = 2;
+
+	$: console.log('max', Math.max(a, b));
+</script>
\ No newline at end of file
diff --git a/test/js/samples/select-dynamic-value/expected.js b/test/js/samples/select-dynamic-value/expected.js
new file mode 100644
index 0000000000..cd1ab1d812
--- /dev/null
+++ b/test/js/samples/select-dynamic-value/expected.js
@@ -0,0 +1,67 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	select_option
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let select;
+	let option0;
+	let option1;
+
+	return {
+		c() {
+			select = element("select");
+			option0 = element("option");
+			option0.textContent = "1";
+			option1 = element("option");
+			option1.textContent = "2";
+			option0.__value = "1";
+			option0.value = option0.__value;
+			option1.__value = "2";
+			option1.value = option1.__value;
+		},
+		m(target, anchor) {
+			insert(target, select, anchor);
+			append(select, option0);
+			append(select, option1);
+			select_option(select, /*current*/ ctx[0]);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*current*/ 1) {
+				select_option(select, /*current*/ ctx[0]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(select);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { current } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('current' in $$props) $$invalidate(0, current = $$props.current);
+	};
+
+	return [current];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { current: 0 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/select-dynamic-value/input.svelte b/test/js/samples/select-dynamic-value/input.svelte
new file mode 100644
index 0000000000..4c38d8f37b
--- /dev/null
+++ b/test/js/samples/select-dynamic-value/input.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let current;
+</script>
+
+<select value={current}>
+	<option value="1">1</option>
+	<option value="2">2</option>
+</select>
\ No newline at end of file
diff --git a/test/js/samples/setup-method/expected.js b/test/js/samples/setup-method/expected.js
new file mode 100644
index 0000000000..8e30a03a7d
--- /dev/null
+++ b/test/js/samples/setup-method/expected.js
@@ -0,0 +1,26 @@
+/* generated by Svelte vX.Y.Z */
+import { SvelteComponent, init, safe_not_equal } from "svelte/internal";
+
+const SOME_CONSTANT = 42;
+
+function foo(bar) {
+	console.log(bar);
+}
+
+function instance($$self, $$props, $$invalidate) {
+	return [foo];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, null, safe_not_equal, { foo: 0 });
+	}
+
+	get foo() {
+		return foo;
+	}
+}
+
+export default Component;
+export { SOME_CONSTANT };
\ No newline at end of file
diff --git a/test/js/samples/setup-method/input.svelte b/test/js/samples/setup-method/input.svelte
new file mode 100644
index 0000000000..e8b71eb079
--- /dev/null
+++ b/test/js/samples/setup-method/input.svelte
@@ -0,0 +1,9 @@
+<script context="module">
+	export const SOME_CONSTANT = 42;
+</script>
+
+<script>
+	export function foo(bar) {
+		console.log(bar);
+	}
+</script>
\ No newline at end of file
diff --git a/test/js/samples/src-attribute-check-in-foreign/_config.js b/test/js/samples/src-attribute-check-in-foreign/_config.js
new file mode 100644
index 0000000000..af1bf11a52
--- /dev/null
+++ b/test/js/samples/src-attribute-check-in-foreign/_config.js
@@ -0,0 +1,5 @@
+export default {
+	options: {
+		hydratable: true
+	}
+};
diff --git a/test/js/samples/src-attribute-check-in-foreign/expected.js b/test/js/samples/src-attribute-check-in-foreign/expected.js
new file mode 100644
index 0000000000..2eb4c0713c
--- /dev/null
+++ b/test/js/samples/src-attribute-check-in-foreign/expected.js
@@ -0,0 +1,70 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append_hydration,
+	attr,
+	children,
+	claim_element,
+	detach,
+	init,
+	insert_hydration,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let svg;
+	let img;
+
+	return {
+		c() {
+			svg = document.createElementNS("https://svelte.dev/docs#template-syntax-svelte-options", "svg");
+			img = document.createElementNS("https://svelte.dev/docs#template-syntax-svelte-options", "img");
+			this.h();
+		},
+		l(nodes) {
+			svg = claim_element(nodes, "svg", {});
+			var svg_nodes = children(svg);
+			img = claim_element(svg_nodes, "img", { alt: true, src: true });
+			svg_nodes.forEach(detach);
+			this.h();
+		},
+		h() {
+			attr(img, "alt", "potato");
+			attr(img, "src", /*url*/ ctx[0]);
+		},
+		m(target, anchor) {
+			insert_hydration(target, svg, anchor);
+			append_hydration(svg, img);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*url*/ 1) {
+				attr(img, "src", /*url*/ ctx[0]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(svg);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { url } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('url' in $$props) $$invalidate(0, url = $$props.url);
+	};
+
+	return [url];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { url: 0 });
+	}
+}
+
+export default Component;
diff --git a/test/js/samples/src-attribute-check-in-foreign/input.svelte b/test/js/samples/src-attribute-check-in-foreign/input.svelte
new file mode 100644
index 0000000000..6d04f0fa55
--- /dev/null
+++ b/test/js/samples/src-attribute-check-in-foreign/input.svelte
@@ -0,0 +1,9 @@
+<svelte:options namespace="foreign" />
+
+<script>
+	export let url;
+</script>
+
+<svg>
+	<img alt="potato" src={url}>
+</svg>
diff --git a/test/js/samples/src-attribute-check-in-svg/_config.js b/test/js/samples/src-attribute-check-in-svg/_config.js
new file mode 100644
index 0000000000..af1bf11a52
--- /dev/null
+++ b/test/js/samples/src-attribute-check-in-svg/_config.js
@@ -0,0 +1,5 @@
+export default {
+	options: {
+		hydratable: true
+	}
+};
diff --git a/test/js/samples/src-attribute-check-in-svg/expected.js b/test/js/samples/src-attribute-check-in-svg/expected.js
new file mode 100644
index 0000000000..551a23e50e
--- /dev/null
+++ b/test/js/samples/src-attribute-check-in-svg/expected.js
@@ -0,0 +1,71 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append_hydration,
+	attr,
+	children,
+	claim_svg_element,
+	detach,
+	init,
+	insert_hydration,
+	noop,
+	safe_not_equal,
+	svg_element
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let svg;
+	let img;
+
+	return {
+		c() {
+			svg = svg_element("svg");
+			img = svg_element("img");
+			this.h();
+		},
+		l(nodes) {
+			svg = claim_svg_element(nodes, "svg", {});
+			var svg_nodes = children(svg);
+			img = claim_svg_element(svg_nodes, "img", { alt: true, src: true });
+			svg_nodes.forEach(detach);
+			this.h();
+		},
+		h() {
+			attr(img, "alt", "potato");
+			attr(img, "src", /*url*/ ctx[0]);
+		},
+		m(target, anchor) {
+			insert_hydration(target, svg, anchor);
+			append_hydration(svg, img);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*url*/ 1) {
+				attr(img, "src", /*url*/ ctx[0]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(svg);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { url } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('url' in $$props) $$invalidate(0, url = $$props.url);
+	};
+
+	return [url];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { url: 0 });
+	}
+}
+
+export default Component;
diff --git a/test/js/samples/src-attribute-check-in-svg/input.svelte b/test/js/samples/src-attribute-check-in-svg/input.svelte
new file mode 100644
index 0000000000..05dbc37608
--- /dev/null
+++ b/test/js/samples/src-attribute-check-in-svg/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let url;
+</script>
+
+<svg>
+	<img alt="potato" src={url}>
+</svg>
diff --git a/test/js/samples/src-attribute-check/_config.js b/test/js/samples/src-attribute-check/_config.js
new file mode 100644
index 0000000000..af1bf11a52
--- /dev/null
+++ b/test/js/samples/src-attribute-check/_config.js
@@ -0,0 +1,5 @@
+export default {
+	options: {
+		hydratable: true
+	}
+};
diff --git a/test/js/samples/src-attribute-check/expected.js b/test/js/samples/src-attribute-check/expected.js
new file mode 100644
index 0000000000..10ff49bb81
--- /dev/null
+++ b/test/js/samples/src-attribute-check/expected.js
@@ -0,0 +1,86 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	attr,
+	claim_element,
+	claim_space,
+	detach,
+	element,
+	init,
+	insert_hydration,
+	noop,
+	safe_not_equal,
+	space,
+	src_url_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let img0;
+	let img0_src_value;
+	let t;
+	let img1;
+	let img1_src_value;
+
+	return {
+		c() {
+			img0 = element("img");
+			t = space();
+			img1 = element("img");
+			this.h();
+		},
+		l(nodes) {
+			img0 = claim_element(nodes, "IMG", { alt: true, src: true });
+			t = claim_space(nodes);
+			img1 = claim_element(nodes, "IMG", { alt: true, src: true });
+			this.h();
+		},
+		h() {
+			attr(img0, "alt", "potato");
+			if (!src_url_equal(img0.src, img0_src_value = /*url*/ ctx[0])) attr(img0, "src", img0_src_value);
+			attr(img1, "alt", "potato");
+			if (!src_url_equal(img1.src, img1_src_value = "" + (/*slug*/ ctx[1] + ".jpg"))) attr(img1, "src", img1_src_value);
+		},
+		m(target, anchor) {
+			insert_hydration(target, img0, anchor);
+			insert_hydration(target, t, anchor);
+			insert_hydration(target, img1, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*url*/ 1 && !src_url_equal(img0.src, img0_src_value = /*url*/ ctx[0])) {
+				attr(img0, "src", img0_src_value);
+			}
+
+			if (dirty & /*slug*/ 2 && !src_url_equal(img1.src, img1_src_value = "" + (/*slug*/ ctx[1] + ".jpg"))) {
+				attr(img1, "src", img1_src_value);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(img0);
+			if (detaching) detach(t);
+			if (detaching) detach(img1);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { url } = $$props;
+	let { slug } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('url' in $$props) $$invalidate(0, url = $$props.url);
+		if ('slug' in $$props) $$invalidate(1, slug = $$props.slug);
+	};
+
+	return [url, slug];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { url: 0, slug: 1 });
+	}
+}
+
+export default Component;
diff --git a/test/js/samples/src-attribute-check/input.svelte b/test/js/samples/src-attribute-check/input.svelte
new file mode 100644
index 0000000000..9febd7e4ea
--- /dev/null
+++ b/test/js/samples/src-attribute-check/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let url;
+	export let slug;
+</script>
+
+<img alt="potato" src={url}>
+<img alt="potato" src="{slug}.jpg">
\ No newline at end of file
diff --git a/test/js/samples/ssr-no-oncreate-etc/_config.js b/test/js/samples/ssr-no-oncreate-etc/_config.js
new file mode 100644
index 0000000000..bee4ab630c
--- /dev/null
+++ b/test/js/samples/ssr-no-oncreate-etc/_config.js
@@ -0,0 +1,5 @@
+export default {
+	options: {
+		generate: 'ssr'
+	}
+};
diff --git a/test/js/samples/ssr-no-oncreate-etc/expected.js b/test/js/samples/ssr-no-oncreate-etc/expected.js
new file mode 100644
index 0000000000..09ae6fd4a6
--- /dev/null
+++ b/test/js/samples/ssr-no-oncreate-etc/expected.js
@@ -0,0 +1,31 @@
+/* generated by Svelte vX.Y.Z */
+import { create_ssr_component } from "svelte/internal";
+
+import { onDestroy, onMount } from 'svelte';
+
+function preload(input) {
+	return output;
+}
+
+function foo() {
+	console.log('foo');
+}
+
+function swipe(node, callback) {
+	
+} // TODO implement
+
+const Component = create_ssr_component(($$result, $$props, $$bindings, slots) => {
+	onMount(() => {
+		console.log('onMount');
+	});
+
+	onDestroy(() => {
+		console.log('onDestroy');
+	});
+
+	return ``;
+});
+
+export default Component;
+export { preload };
\ No newline at end of file
diff --git a/test/js/samples/ssr-no-oncreate-etc/input.svelte b/test/js/samples/ssr-no-oncreate-etc/input.svelte
new file mode 100644
index 0000000000..0ffe3c016c
--- /dev/null
+++ b/test/js/samples/ssr-no-oncreate-etc/input.svelte
@@ -0,0 +1,25 @@
+<script context="module">
+	export function preload(input) {
+		return output;
+	}
+</script>
+
+<script>
+	import { onDestroy, onMount } from 'svelte';
+
+	onMount(() => {
+		console.log('onMount');
+	});
+
+	onDestroy(() => {
+		console.log('onDestroy');
+	});
+
+	function foo() {
+		console.log('foo');
+	}
+
+	function swipe(node, callback) {
+		// TODO implement
+	}
+</script>
\ No newline at end of file
diff --git a/test/js/samples/ssr-preserve-comments/_config.js b/test/js/samples/ssr-preserve-comments/_config.js
new file mode 100644
index 0000000000..9e62c8d192
--- /dev/null
+++ b/test/js/samples/ssr-preserve-comments/_config.js
@@ -0,0 +1,6 @@
+export default {
+	options: {
+		generate: 'ssr',
+		preserveComments: true
+	}
+};
diff --git a/test/js/samples/ssr-preserve-comments/expected.js b/test/js/samples/ssr-preserve-comments/expected.js
new file mode 100644
index 0000000000..4f3326cec5
--- /dev/null
+++ b/test/js/samples/ssr-preserve-comments/expected.js
@@ -0,0 +1,10 @@
+/* generated by Svelte vX.Y.Z */
+import { create_ssr_component } from "svelte/internal";
+
+const Component = create_ssr_component(($$result, $$props, $$bindings, slots) => {
+	return `<div>content</div>
+<!-- comment -->
+<div>more content</div>`;
+});
+
+export default Component;
diff --git a/test/js/samples/ssr-preserve-comments/input.svelte b/test/js/samples/ssr-preserve-comments/input.svelte
new file mode 100644
index 0000000000..c3b21de352
--- /dev/null
+++ b/test/js/samples/ssr-preserve-comments/input.svelte
@@ -0,0 +1,3 @@
+<div>content</div>
+<!-- comment -->
+<div>more content</div>
\ No newline at end of file
diff --git a/test/js/samples/svg-title/expected.js b/test/js/samples/svg-title/expected.js
new file mode 100644
index 0000000000..cd7ae3b551
--- /dev/null
+++ b/test/js/samples/svg-title/expected.js
@@ -0,0 +1,46 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	detach,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	svg_element,
+	text
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let svg;
+	let title;
+	let t;
+
+	return {
+		c() {
+			svg = svg_element("svg");
+			title = svg_element("title");
+			t = text("a title");
+		},
+		m(target, anchor) {
+			insert(target, svg, anchor);
+			append(svg, title);
+			append(title, t);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(svg);
+		}
+	};
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/svg-title/input.svelte b/test/js/samples/svg-title/input.svelte
new file mode 100644
index 0000000000..7ec3f98b64
--- /dev/null
+++ b/test/js/samples/svg-title/input.svelte
@@ -0,0 +1,3 @@
+<svg>
+	<title>a title</title>
+</svg>
\ No newline at end of file
diff --git a/test/js/samples/title/expected.js b/test/js/samples/title/expected.js
new file mode 100644
index 0000000000..6385f36acc
--- /dev/null
+++ b/test/js/samples/title/expected.js
@@ -0,0 +1,39 @@
+/* generated by Svelte vX.Y.Z */
+import { SvelteComponent, init, noop, safe_not_equal } from "svelte/internal";
+
+function create_fragment(ctx) {
+	let title_value;
+	document.title = title_value = "a " + /*custom*/ ctx[0] + " title";
+
+	return {
+		c: noop,
+		m: noop,
+		p(ctx, [dirty]) {
+			if (dirty & /*custom*/ 1 && title_value !== (title_value = "a " + /*custom*/ ctx[0] + " title")) {
+				document.title = title_value;
+			}
+		},
+		i: noop,
+		o: noop,
+		d: noop
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { custom } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('custom' in $$props) $$invalidate(0, custom = $$props.custom);
+	};
+
+	return [custom];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { custom: 0 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/title/input.svelte b/test/js/samples/title/input.svelte
new file mode 100644
index 0000000000..7031f7673a
--- /dev/null
+++ b/test/js/samples/title/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let custom;
+</script>
+
+<svelte:head>
+	<title>a {custom} title</title>
+</svelte:head>
\ No newline at end of file
diff --git a/test/js/samples/transition-local/expected.js b/test/js/samples/transition-local/expected.js
new file mode 100644
index 0000000000..1824ccb066
--- /dev/null
+++ b/test/js/samples/transition-local/expected.js
@@ -0,0 +1,142 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	add_render_callback,
+	create_in_transition,
+	detach,
+	element,
+	empty,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	transition_in
+} from "svelte/internal";
+
+function create_if_block(ctx) {
+	let if_block_anchor;
+	let if_block = /*y*/ ctx[1] && create_if_block_1(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+		},
+		p(ctx, dirty) {
+			if (/*y*/ ctx[1]) {
+				if (if_block) {
+					if (dirty & /*y*/ 2) {
+						transition_in(if_block, 1);
+					}
+				} else {
+					if_block = create_if_block_1(ctx);
+					if_block.c();
+					transition_in(if_block, 1);
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+// (9:1) {#if y}
+function create_if_block_1(ctx) {
+	let div;
+	let div_intro;
+
+	return {
+		c() {
+			div = element("div");
+			div.textContent = "...";
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+		},
+		i(local) {
+			if (local) {
+				if (!div_intro) {
+					add_render_callback(() => {
+						div_intro = create_in_transition(div, foo, {});
+						div_intro.start();
+					});
+				}
+			}
+		},
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let if_block_anchor;
+	let if_block = /*x*/ ctx[0] && create_if_block(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (/*x*/ ctx[0]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block(ctx);
+					if_block.c();
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+function foo() {
+	
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { x } = $$props;
+	let { y } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('x' in $$props) $$invalidate(0, x = $$props.x);
+		if ('y' in $$props) $$invalidate(1, y = $$props.y);
+	};
+
+	return [x, y];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { x: 0, y: 1 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/transition-local/input.svelte b/test/js/samples/transition-local/input.svelte
new file mode 100644
index 0000000000..3f87627c62
--- /dev/null
+++ b/test/js/samples/transition-local/input.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let x;
+	export let y;
+
+	function foo() {}
+</script>
+
+{#if x}
+	{#if y}
+		<div in:foo|local>...</div>
+	{/if}
+{/if}
\ No newline at end of file
diff --git a/test/js/samples/transition-repeated-outro/expected.js b/test/js/samples/transition-repeated-outro/expected.js
new file mode 100644
index 0000000000..a2cbedffea
--- /dev/null
+++ b/test/js/samples/transition-repeated-outro/expected.js
@@ -0,0 +1,119 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	check_outros,
+	create_out_transition,
+	detach,
+	element,
+	empty,
+	group_outros,
+	init,
+	insert,
+	safe_not_equal,
+	transition_in,
+	transition_out
+} from "svelte/internal";
+
+import { fade } from 'svelte/transition';
+
+function create_if_block(ctx) {
+	let div;
+	let div_outro;
+	let current;
+
+	return {
+		c() {
+			div = element("div");
+			div.innerHTML = `<p>wheeee</p>`;
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			current = true;
+		},
+		i(local) {
+			if (current) return;
+			if (div_outro) div_outro.end(1);
+			current = true;
+		},
+		o(local) {
+			div_outro = create_out_transition(div, fade, {});
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			if (detaching && div_outro) div_outro.end();
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let if_block_anchor;
+	let current;
+	let if_block = /*num*/ ctx[0] < 5 && create_if_block(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			if (/*num*/ ctx[0] < 5) {
+				if (if_block) {
+					if (dirty & /*num*/ 1) {
+						transition_in(if_block, 1);
+					}
+				} else {
+					if_block = create_if_block(ctx);
+					if_block.c();
+					transition_in(if_block, 1);
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				}
+			} else if (if_block) {
+				group_outros();
+
+				transition_out(if_block, 1, 1, () => {
+					if_block = null;
+				});
+
+				check_outros();
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(if_block);
+			current = true;
+		},
+		o(local) {
+			transition_out(if_block);
+			current = false;
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { num = 1 } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('num' in $$props) $$invalidate(0, num = $$props.num);
+	};
+
+	return [num];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { num: 0 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/transition-repeated-outro/input.svelte b/test/js/samples/transition-repeated-outro/input.svelte
new file mode 100644
index 0000000000..d5114846b8
--- /dev/null
+++ b/test/js/samples/transition-repeated-outro/input.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { fade } from 'svelte/transition';
+
+	export let num = 1;
+</script>
+
+{#if num < 5}
+	<div out:fade>
+		<p>wheeee</p>
+	</div>
+{/if}
\ No newline at end of file
diff --git a/test/js/samples/unchanged-expression/expected.js b/test/js/samples/unchanged-expression/expected.js
new file mode 100644
index 0000000000..48ae8131ff
--- /dev/null
+++ b/test/js/samples/unchanged-expression/expected.js
@@ -0,0 +1,92 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_data,
+	space,
+	text
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let div0;
+	let p0;
+	let t1;
+	let p1;
+	let t4;
+	let p2;
+	let t7;
+	let div1;
+	let p3;
+	let t8;
+	let t9;
+
+	return {
+		c() {
+			div0 = element("div");
+			p0 = element("p");
+			p0.textContent = "Hello world";
+			t1 = space();
+			p1 = element("p");
+			p1.textContent = `Hello ${world1}`;
+			t4 = space();
+			p2 = element("p");
+			p2.textContent = `Hello ${world2}`;
+			t7 = space();
+			div1 = element("div");
+			p3 = element("p");
+			t8 = text("Hello ");
+			t9 = text(/*world3*/ ctx[0]);
+		},
+		m(target, anchor) {
+			insert(target, div0, anchor);
+			append(div0, p0);
+			append(div0, t1);
+			append(div0, p1);
+			append(div0, t4);
+			append(div0, p2);
+			insert(target, t7, anchor);
+			insert(target, div1, anchor);
+			append(div1, p3);
+			append(p3, t8);
+			append(p3, t9);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*world3*/ 1) set_data(t9, /*world3*/ ctx[0]);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div0);
+			if (detaching) detach(t7);
+			if (detaching) detach(div1);
+		}
+	};
+}
+
+let world1 = 'world';
+let world2 = 'world';
+
+function instance($$self, $$props, $$invalidate) {
+	const world3 = 'world';
+
+	function foo() {
+		$$invalidate(0, world3 = 'svelte');
+	}
+
+	return [world3];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/unchanged-expression/input.svelte b/test/js/samples/unchanged-expression/input.svelte
new file mode 100644
index 0000000000..057201358c
--- /dev/null
+++ b/test/js/samples/unchanged-expression/input.svelte
@@ -0,0 +1,17 @@
+<script>
+  let world1 = 'world';
+  let world2 = 'world';
+  const world3 = 'world';
+  function foo() {
+    world3 = 'svelte';
+  }
+
+</script>
+<div>
+  <p>Hello world</p>
+  <p>Hello {world1}</p>
+  <p>Hello {world2}</p>
+</div>
+<div>
+  <p>Hello {world3}</p>
+</div>
diff --git a/test/js/samples/unreferenced-state-not-invalidated/expected.js b/test/js/samples/unreferenced-state-not-invalidated/expected.js
new file mode 100644
index 0000000000..8c238a8397
--- /dev/null
+++ b/test/js/samples/unreferenced-state-not-invalidated/expected.js
@@ -0,0 +1,76 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_data,
+	text
+} from "svelte/internal";
+
+import { onMount } from 'svelte';
+
+function create_fragment(ctx) {
+	let p;
+	let t;
+
+	return {
+		c() {
+			p = element("p");
+			t = text(/*y*/ ctx[0]);
+		},
+		m(target, anchor) {
+			insert(target, p, anchor);
+			append(p, t);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*y*/ 1) set_data(t, /*y*/ ctx[0]);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(p);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let x;
+	let y;
+	let a = 1, b = 2, c = 3;
+
+	onMount(() => {
+		const interval = setInterval(
+			() => {
+				$$invalidate(1, b += 1);
+				c += 1;
+				console.log(b, c);
+			},
+			1000
+		);
+
+		return () => clearInterval(interval);
+	});
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*b*/ 2) {
+			$: $$invalidate(0, y = b * 2);
+		}
+	};
+
+	$: x = a * 2;
+	return [y, b];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/unreferenced-state-not-invalidated/input.svelte b/test/js/samples/unreferenced-state-not-invalidated/input.svelte
new file mode 100644
index 0000000000..a453f9a23e
--- /dev/null
+++ b/test/js/samples/unreferenced-state-not-invalidated/input.svelte
@@ -0,0 +1,21 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let a = 1, b = 2, c = 3;
+
+	onMount(() => {
+		const interval = setInterval(() => {
+			b += 1;
+			c += 1;
+
+			console.log(b, c);
+		}, 1000);
+
+		return () => clearInterval(interval);
+	});
+
+	$: x = a * 2;
+	$: y = b * 2;
+</script>
+
+<p>{y}</p>
\ No newline at end of file
diff --git a/test/js/samples/use-elements-as-anchors/expected.js b/test/js/samples/use-elements-as-anchors/expected.js
new file mode 100644
index 0000000000..8a45cb54c8
--- /dev/null
+++ b/test/js/samples/use-elements-as-anchors/expected.js
@@ -0,0 +1,264 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	append,
+	detach,
+	element,
+	empty,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	space
+} from "svelte/internal";
+
+function create_if_block_4(ctx) {
+	let p;
+
+	return {
+		c() {
+			p = element("p");
+			p.textContent = "a";
+		},
+		m(target, anchor) {
+			insert(target, p, anchor);
+		},
+		d(detaching) {
+			if (detaching) detach(p);
+		}
+	};
+}
+
+// (16:1) {#if b}
+function create_if_block_3(ctx) {
+	let p;
+
+	return {
+		c() {
+			p = element("p");
+			p.textContent = "b";
+		},
+		m(target, anchor) {
+			insert(target, p, anchor);
+		},
+		d(detaching) {
+			if (detaching) detach(p);
+		}
+	};
+}
+
+// (20:1) {#if c}
+function create_if_block_2(ctx) {
+	let p;
+
+	return {
+		c() {
+			p = element("p");
+			p.textContent = "c";
+		},
+		m(target, anchor) {
+			insert(target, p, anchor);
+		},
+		d(detaching) {
+			if (detaching) detach(p);
+		}
+	};
+}
+
+// (26:1) {#if d}
+function create_if_block_1(ctx) {
+	let p;
+
+	return {
+		c() {
+			p = element("p");
+			p.textContent = "d";
+		},
+		m(target, anchor) {
+			insert(target, p, anchor);
+		},
+		d(detaching) {
+			if (detaching) detach(p);
+		}
+	};
+}
+
+// (33:0) {#if e}
+function create_if_block(ctx) {
+	let p;
+
+	return {
+		c() {
+			p = element("p");
+			p.textContent = "e";
+		},
+		m(target, anchor) {
+			insert(target, p, anchor);
+		},
+		d(detaching) {
+			if (detaching) detach(p);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div;
+	let t0;
+	let p0;
+	let t2;
+	let t3;
+	let t4;
+	let p1;
+	let t6;
+	let t7;
+	let if_block4_anchor;
+	let if_block0 = /*a*/ ctx[0] && create_if_block_4(ctx);
+	let if_block1 = /*b*/ ctx[1] && create_if_block_3(ctx);
+	let if_block2 = /*c*/ ctx[2] && create_if_block_2(ctx);
+	let if_block3 = /*d*/ ctx[3] && create_if_block_1(ctx);
+	let if_block4 = /*e*/ ctx[4] && create_if_block(ctx);
+
+	return {
+		c() {
+			div = element("div");
+			if (if_block0) if_block0.c();
+			t0 = space();
+			p0 = element("p");
+			p0.textContent = "this can be used as an anchor";
+			t2 = space();
+			if (if_block1) if_block1.c();
+			t3 = space();
+			if (if_block2) if_block2.c();
+			t4 = space();
+			p1 = element("p");
+			p1.textContent = "so can this";
+			t6 = space();
+			if (if_block3) if_block3.c();
+			t7 = space();
+			if (if_block4) if_block4.c();
+			if_block4_anchor = empty();
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			if (if_block0) if_block0.m(div, null);
+			append(div, t0);
+			append(div, p0);
+			append(div, t2);
+			if (if_block1) if_block1.m(div, null);
+			append(div, t3);
+			if (if_block2) if_block2.m(div, null);
+			append(div, t4);
+			append(div, p1);
+			append(div, t6);
+			if (if_block3) if_block3.m(div, null);
+			insert(target, t7, anchor);
+			if (if_block4) if_block4.m(target, anchor);
+			insert(target, if_block4_anchor, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (/*a*/ ctx[0]) {
+				if (if_block0) {
+					
+				} else {
+					if_block0 = create_if_block_4(ctx);
+					if_block0.c();
+					if_block0.m(div, t0);
+				}
+			} else if (if_block0) {
+				if_block0.d(1);
+				if_block0 = null;
+			}
+
+			if (/*b*/ ctx[1]) {
+				if (if_block1) {
+					
+				} else {
+					if_block1 = create_if_block_3(ctx);
+					if_block1.c();
+					if_block1.m(div, t3);
+				}
+			} else if (if_block1) {
+				if_block1.d(1);
+				if_block1 = null;
+			}
+
+			if (/*c*/ ctx[2]) {
+				if (if_block2) {
+					
+				} else {
+					if_block2 = create_if_block_2(ctx);
+					if_block2.c();
+					if_block2.m(div, t4);
+				}
+			} else if (if_block2) {
+				if_block2.d(1);
+				if_block2 = null;
+			}
+
+			if (/*d*/ ctx[3]) {
+				if (if_block3) {
+					
+				} else {
+					if_block3 = create_if_block_1(ctx);
+					if_block3.c();
+					if_block3.m(div, null);
+				}
+			} else if (if_block3) {
+				if_block3.d(1);
+				if_block3 = null;
+			}
+
+			if (/*e*/ ctx[4]) {
+				if (if_block4) {
+					
+				} else {
+					if_block4 = create_if_block(ctx);
+					if_block4.c();
+					if_block4.m(if_block4_anchor.parentNode, if_block4_anchor);
+				}
+			} else if (if_block4) {
+				if_block4.d(1);
+				if_block4 = null;
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+			if (if_block0) if_block0.d();
+			if (if_block1) if_block1.d();
+			if (if_block2) if_block2.d();
+			if (if_block3) if_block3.d();
+			if (detaching) detach(t7);
+			if (if_block4) if_block4.d(detaching);
+			if (detaching) detach(if_block4_anchor);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { a } = $$props;
+	let { b } = $$props;
+	let { c } = $$props;
+	let { d } = $$props;
+	let { e } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('a' in $$props) $$invalidate(0, a = $$props.a);
+		if ('b' in $$props) $$invalidate(1, b = $$props.b);
+		if ('c' in $$props) $$invalidate(2, c = $$props.c);
+		if ('d' in $$props) $$invalidate(3, d = $$props.d);
+		if ('e' in $$props) $$invalidate(4, e = $$props.e);
+	};
+
+	return [a, b, c, d, e];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { a: 0, b: 1, c: 2, d: 3, e: 4 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/use-elements-as-anchors/input.svelte b/test/js/samples/use-elements-as-anchors/input.svelte
new file mode 100644
index 0000000000..6bedfe833f
--- /dev/null
+++ b/test/js/samples/use-elements-as-anchors/input.svelte
@@ -0,0 +1,35 @@
+<script>
+	export let a;
+	export let b;
+	export let c;
+	export let d;
+	export let e;
+</script>
+
+<div>
+	{#if a}
+		<p>a</p>
+	{/if}
+
+	<p>this can be used as an anchor</p>
+
+	{#if b}
+		<p>b</p>
+	{/if}
+
+	{#if c}
+		<p>c</p>
+	{/if}
+
+	<p>so can this</p>
+
+	{#if d}
+		<p>d</p>
+	{/if}
+
+	<!-- d can use 'null' as its anchor -->
+</div>
+
+{#if e}
+	<p>e</p>
+{/if}
\ No newline at end of file
diff --git a/test/js/samples/valid-inner-html-for-static-element/expected.js b/test/js/samples/valid-inner-html-for-static-element/expected.js
new file mode 100644
index 0000000000..f1ced27ba4
--- /dev/null
+++ b/test/js/samples/valid-inner-html-for-static-element/expected.js
@@ -0,0 +1,39 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let div;
+
+	return {
+		c() {
+			div = element("div");
+			div.innerHTML = `<img alt="Star" width="100" height="100" src="http://mdn.mozillademos.org/files/12676/star.svg"/>`;
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/valid-inner-html-for-static-element/input.svelte b/test/js/samples/valid-inner-html-for-static-element/input.svelte
new file mode 100644
index 0000000000..3990b2a0c2
--- /dev/null
+++ b/test/js/samples/valid-inner-html-for-static-element/input.svelte
@@ -0,0 +1,3 @@
+<div>
+    <img alt="Star" width="100" height="100" src="http://mdn.mozillademos.org/files/12676/star.svg" />
+</div>
\ No newline at end of file
diff --git a/test/js/samples/video-bindings/expected.js b/test/js/samples/video-bindings/expected.js
new file mode 100644
index 0000000000..020bab574c
--- /dev/null
+++ b/test/js/samples/video-bindings/expected.js
@@ -0,0 +1,127 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	add_render_callback,
+	add_resize_listener,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	raf,
+	run_all,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let video;
+	let video_updating = false;
+	let video_animationframe;
+	let video_resize_listener;
+	let mounted;
+	let dispose;
+
+	function video_timeupdate_handler() {
+		cancelAnimationFrame(video_animationframe);
+
+		if (!video.paused) {
+			video_animationframe = raf(video_timeupdate_handler);
+			video_updating = true;
+		}
+
+		/*video_timeupdate_handler*/ ctx[4].call(video);
+	}
+
+	return {
+		c() {
+			video = element("video");
+			if (/*videoHeight*/ ctx[1] === void 0 || /*videoWidth*/ ctx[2] === void 0) add_render_callback(() => /*video_resize_handler*/ ctx[5].call(video));
+			add_render_callback(() => /*video_elementresize_handler*/ ctx[6].call(video));
+		},
+		m(target, anchor) {
+			insert(target, video, anchor);
+			video_resize_listener = add_resize_listener(video, /*video_elementresize_handler*/ ctx[6].bind(video));
+
+			if (!mounted) {
+				dispose = [
+					listen(video, "timeupdate", video_timeupdate_handler),
+					listen(video, "resize", /*video_resize_handler*/ ctx[5])
+				];
+
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (!video_updating && dirty & /*currentTime*/ 1 && !isNaN(/*currentTime*/ ctx[0])) {
+				video.currentTime = /*currentTime*/ ctx[0];
+			}
+
+			video_updating = false;
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(video);
+			video_resize_listener();
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { currentTime } = $$props;
+	let { videoHeight } = $$props;
+	let { videoWidth } = $$props;
+	let { offsetWidth } = $$props;
+
+	function video_timeupdate_handler() {
+		currentTime = this.currentTime;
+		$$invalidate(0, currentTime);
+	}
+
+	function video_resize_handler() {
+		videoHeight = this.videoHeight;
+		videoWidth = this.videoWidth;
+		$$invalidate(1, videoHeight);
+		$$invalidate(2, videoWidth);
+	}
+
+	function video_elementresize_handler() {
+		offsetWidth = this.offsetWidth;
+		$$invalidate(3, offsetWidth);
+	}
+
+	$$self.$$set = $$props => {
+		if ('currentTime' in $$props) $$invalidate(0, currentTime = $$props.currentTime);
+		if ('videoHeight' in $$props) $$invalidate(1, videoHeight = $$props.videoHeight);
+		if ('videoWidth' in $$props) $$invalidate(2, videoWidth = $$props.videoWidth);
+		if ('offsetWidth' in $$props) $$invalidate(3, offsetWidth = $$props.offsetWidth);
+	};
+
+	return [
+		currentTime,
+		videoHeight,
+		videoWidth,
+		offsetWidth,
+		video_timeupdate_handler,
+		video_resize_handler,
+		video_elementresize_handler
+	];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+
+		init(this, options, instance, create_fragment, safe_not_equal, {
+			currentTime: 0,
+			videoHeight: 1,
+			videoWidth: 2,
+			offsetWidth: 3
+		});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/video-bindings/input.svelte b/test/js/samples/video-bindings/input.svelte
new file mode 100644
index 0000000000..e61a2bb919
--- /dev/null
+++ b/test/js/samples/video-bindings/input.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let currentTime;
+	export let videoHeight;
+	export let videoWidth;
+	export let offsetWidth;
+</script>
+
+<video bind:currentTime bind:videoHeight bind:videoWidth bind:offsetWidth/>
diff --git a/test/js/samples/window-binding-online/expected.js b/test/js/samples/window-binding-online/expected.js
new file mode 100644
index 0000000000..887195bce1
--- /dev/null
+++ b/test/js/samples/window-binding-online/expected.js
@@ -0,0 +1,56 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	add_render_callback,
+	init,
+	listen,
+	noop,
+	run_all,
+	safe_not_equal
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let mounted;
+	let dispose;
+	add_render_callback(/*onlinestatuschanged*/ ctx[1]);
+
+	return {
+		c: noop,
+		m(target, anchor) {
+			if (!mounted) {
+				dispose = [
+					listen(window, "online", /*onlinestatuschanged*/ ctx[1]),
+					listen(window, "offline", /*onlinestatuschanged*/ ctx[1])
+				];
+
+				mounted = true;
+			}
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			mounted = false;
+			run_all(dispose);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let online;
+
+	function onlinestatuschanged() {
+		$$invalidate(0, online = navigator.onLine);
+	}
+
+	return [online, onlinestatuschanged];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/window-binding-online/input.svelte b/test/js/samples/window-binding-online/input.svelte
new file mode 100644
index 0000000000..9f4b7064d8
--- /dev/null
+++ b/test/js/samples/window-binding-online/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let online;
+</script>
+
+<svelte:window bind:online={online}/>
\ No newline at end of file
diff --git a/test/js/samples/window-binding-scroll/expected.js b/test/js/samples/window-binding-scroll/expected.js
new file mode 100644
index 0000000000..ae155d42bf
--- /dev/null
+++ b/test/js/samples/window-binding-scroll/expected.js
@@ -0,0 +1,95 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	add_render_callback,
+	append,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal,
+	set_data,
+	text
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let scrolling = false;
+
+	let clear_scrolling = () => {
+		scrolling = false;
+	};
+
+	let scrolling_timeout;
+	let p;
+	let t0;
+	let t1;
+	let mounted;
+	let dispose;
+	add_render_callback(/*onwindowscroll*/ ctx[1]);
+
+	return {
+		c() {
+			p = element("p");
+			t0 = text("scrolled to ");
+			t1 = text(/*y*/ ctx[0]);
+		},
+		m(target, anchor) {
+			insert(target, p, anchor);
+			append(p, t0);
+			append(p, t1);
+
+			if (!mounted) {
+				dispose = listen(window, "scroll", () => {
+					scrolling = true;
+					clearTimeout(scrolling_timeout);
+					scrolling_timeout = setTimeout(clear_scrolling, 100);
+					/*onwindowscroll*/ ctx[1]();
+				});
+
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*y*/ 1 && !scrolling) {
+				scrolling = true;
+				clearTimeout(scrolling_timeout);
+				scrollTo(window.pageXOffset, /*y*/ ctx[0]);
+				scrolling_timeout = setTimeout(clear_scrolling, 100);
+			}
+
+			if (dirty & /*y*/ 1) set_data(t1, /*y*/ ctx[0]);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(p);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { y } = $$props;
+
+	function onwindowscroll() {
+		$$invalidate(0, y = window.pageYOffset)
+	}
+
+	$$self.$$set = $$props => {
+		if ('y' in $$props) $$invalidate(0, y = $$props.y);
+	};
+
+	return [y, onwindowscroll];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { y: 0 });
+	}
+}
+
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/window-binding-scroll/input.svelte b/test/js/samples/window-binding-scroll/input.svelte
new file mode 100644
index 0000000000..f289ed4b7e
--- /dev/null
+++ b/test/js/samples/window-binding-scroll/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let y;
+</script>
+
+<svelte:window bind:scrollY={y}/>
+
+<p>scrolled to {y}</p>
\ No newline at end of file
diff --git a/test/js/update.js b/test/js/update.js
new file mode 100644
index 0000000000..3e968f0e4c
--- /dev/null
+++ b/test/js/update.js
@@ -0,0 +1,13 @@
+// this file will replace all the expected.js files with their _actual
+// equivalents. Only use it when you're sure that you haven't
+// broken anything!
+const fs = require('fs');
+const glob = require('tiny-glob/sync.js');
+
+glob('samples/*/_actual.js', { cwd: __dirname }).forEach(file => {
+	const actual = fs.readFileSync(`${__dirname}/${file}`, 'utf-8');
+	fs.writeFileSync(
+		`${__dirname}/${file.replace('_actual.js', 'expected.js')}`,
+		actual
+	);
+});
diff --git a/test/motion/index.ts b/test/motion/index.ts
new file mode 100644
index 0000000000..ec58c6df36
--- /dev/null
+++ b/test/motion/index.ts
@@ -0,0 +1,30 @@
+import * as assert from 'assert';
+import { get } from '../../store';
+import { spring, tweened } from '../../motion';
+
+describe('motion', () => {
+	describe('spring', () => {
+		it('handles initially undefined values', () => {
+			const size = spring();
+
+			size.set(100);
+			assert.equal(get(size), 100);
+		});
+	});
+
+	describe('tweened', () => {
+		it('handles initially undefined values', () => {
+			const size = tweened();
+
+			size.set(100);
+			assert.equal(get(size), 100);
+		});
+
+		it('sets immediately when duration is 0', () => {
+			const size = tweened(0);
+
+			size.set(100, { duration : 0 });
+			assert.equal(get(size), 100);
+		});
+	});
+});
diff --git a/test/parser/index.ts b/test/parser/index.ts
new file mode 100644
index 0000000000..fe48737c96
--- /dev/null
+++ b/test/parser/index.ts
@@ -0,0 +1,51 @@
+import * as assert from 'assert';
+import * as fs from 'fs';
+import { svelte, tryToLoadJson } from '../helpers';
+
+describe('parse', () => {
+	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
+		if (dir[0] === '.') return;
+
+		// add .solo to a sample directory name to only run that test
+		const solo = /\.solo$/.test(dir);
+
+		if (solo && process.env.CI) {
+			throw new Error(
+				`Forgot to remove '.solo' from test parser/samples/${dir}`
+			);
+		}
+
+		const skip = !fs.existsSync(`${__dirname}/samples/${dir}/input.svelte`);
+
+		(skip ? it.skip : solo ? it.only : it)(dir, () => {
+			const options = tryToLoadJson(`${__dirname}/samples/${dir}/options.json`) || {};
+
+			const input = fs.readFileSync(`${__dirname}/samples/${dir}/input.svelte`, 'utf-8').replace(/\s+$/, '').replace(/\r/g, '');
+			const expectedOutput = tryToLoadJson(`${__dirname}/samples/${dir}/output.json`);
+			const expectedError = tryToLoadJson(`${__dirname}/samples/${dir}/error.json`);
+
+			try {
+				const { ast } = svelte.compile(input, Object.assign(options, {
+					generate: false
+				}));
+
+				fs.writeFileSync(`${__dirname}/samples/${dir}/_actual.json`, JSON.stringify(ast, null, '\t'));
+
+				assert.deepEqual(ast.html, expectedOutput.html);
+				assert.deepEqual(ast.css, expectedOutput.css);
+				assert.deepEqual(ast.instance, expectedOutput.instance);
+				assert.deepEqual(ast.module, expectedOutput.module);
+			} catch (err) {
+				if (err.name !== 'ParseError') throw err;
+				if (!expectedError) throw err;
+				const { code, message, pos, start } = err;
+				try {
+					assert.deepEqual({ code, message, pos, start }, expectedError);
+				} catch (err2) {
+					const e = err2.code === 'MODULE_NOT_FOUND' ? err : err2;
+					throw e;
+				}
+			}
+		});
+	});
+});
diff --git a/test/parser/samples/action-duplicate/input.svelte b/test/parser/samples/action-duplicate/input.svelte
new file mode 100644
index 0000000000..11b2515483
--- /dev/null
+++ b/test/parser/samples/action-duplicate/input.svelte
@@ -0,0 +1 @@
+<input use:autofocus use:autofocus>
\ No newline at end of file
diff --git a/test/parser/samples/action-duplicate/output.json b/test/parser/samples/action-duplicate/output.json
new file mode 100644
index 0000000000..30469ceb48
--- /dev/null
+++ b/test/parser/samples/action-duplicate/output.json
@@ -0,0 +1,34 @@
+{
+	"html": {
+		"start": 0,
+		"end": 35,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 35,
+				"type": "Element",
+				"name": "input",
+				"attributes": [
+					{
+						"start": 7,
+						"end": 20,
+						"type": "Action",
+						"name": "autofocus",
+						"modifiers": [],
+						"expression": null
+					},
+					{
+						"start": 21,
+						"end": 34,
+						"type": "Action",
+						"name": "autofocus",
+						"modifiers": [],
+						"expression": null
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/action-with-call/input.svelte b/test/parser/samples/action-with-call/input.svelte
new file mode 100644
index 0000000000..15c9173b02
--- /dev/null
+++ b/test/parser/samples/action-with-call/input.svelte
@@ -0,0 +1 @@
+<input use:tooltip="{t('tooltip msg')}">
diff --git a/test/parser/samples/action-with-call/output.json b/test/parser/samples/action-with-call/output.json
new file mode 100644
index 0000000000..66c569dc5a
--- /dev/null
+++ b/test/parser/samples/action-with-call/output.json
@@ -0,0 +1,76 @@
+{
+	"html": {
+		"start": 0,
+		"end": 40,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 40,
+				"type": "Element",
+				"name": "input",
+				"attributes": [
+					{
+						"start": 7,
+						"end": 39,
+						"type": "Action",
+						"name": "tooltip",
+						"modifiers": [],
+						"expression": {
+							"type": "CallExpression",
+							"start": 21,
+							"end": 37,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 21
+								},
+								"end": {
+									"line": 1,
+									"column": 37
+								}
+							},
+							"callee": {
+								"type": "Identifier",
+								"start": 21,
+								"end": 22,
+								"loc": {
+									"start": {
+										"line": 1,
+										"column": 21
+									},
+									"end": {
+										"line": 1,
+										"column": 22
+									}
+								},
+								"name": "t"
+							},
+							"arguments": [
+								{
+									"type": "Literal",
+									"start": 23,
+									"end": 36,
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 23
+										},
+										"end": {
+											"line": 1,
+											"column": 36
+										}
+									},
+									"value": "tooltip msg",
+									"raw": "'tooltip msg'"
+								}
+							],
+							"optional": false
+						}
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/action-with-identifier/input.svelte b/test/parser/samples/action-with-identifier/input.svelte
new file mode 100644
index 0000000000..ce1076d181
--- /dev/null
+++ b/test/parser/samples/action-with-identifier/input.svelte
@@ -0,0 +1 @@
+<input use:tooltip={message}>
diff --git a/test/parser/samples/action-with-identifier/output.json b/test/parser/samples/action-with-identifier/output.json
new file mode 100644
index 0000000000..9ae0011c52
--- /dev/null
+++ b/test/parser/samples/action-with-identifier/output.json
@@ -0,0 +1,41 @@
+{
+	"html": {
+		"start": 0,
+		"end": 29,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 29,
+				"type": "Element",
+				"name": "input",
+				"attributes": [
+					{
+						"start": 7,
+						"end": 28,
+						"type": "Action",
+						"name": "tooltip",
+						"modifiers": [],
+						"expression": {
+							"type": "Identifier",
+							"start": 20,
+							"end": 27,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 20
+								},
+								"end": {
+									"line": 1,
+									"column": 27
+								}
+							},
+							"name": "message"
+						}
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/action-with-literal/input.svelte b/test/parser/samples/action-with-literal/input.svelte
new file mode 100644
index 0000000000..2f968eb510
--- /dev/null
+++ b/test/parser/samples/action-with-literal/input.svelte
@@ -0,0 +1 @@
+<input use:tooltip="{'tooltip msg'}">
diff --git a/test/parser/samples/action-with-literal/output.json b/test/parser/samples/action-with-literal/output.json
new file mode 100644
index 0000000000..bb0b13ee42
--- /dev/null
+++ b/test/parser/samples/action-with-literal/output.json
@@ -0,0 +1,42 @@
+{
+	"html": {
+		"start": 0,
+		"end": 37,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 37,
+				"type": "Element",
+				"name": "input",
+				"attributes": [
+					{
+						"start": 7,
+						"end": 36,
+						"type": "Action",
+						"name": "tooltip",
+						"modifiers": [],
+						"expression": {
+							"type": "Literal",
+							"start": 21,
+							"end": 34,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 21
+								},
+								"end": {
+									"line": 1,
+									"column": 34
+								}
+							},
+							"value": "tooltip msg",
+							"raw": "'tooltip msg'"
+						}
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/action/input.svelte b/test/parser/samples/action/input.svelte
new file mode 100644
index 0000000000..64409c2a65
--- /dev/null
+++ b/test/parser/samples/action/input.svelte
@@ -0,0 +1 @@
+<input use:autofocus>
diff --git a/test/parser/samples/action/output.json b/test/parser/samples/action/output.json
new file mode 100644
index 0000000000..9828e200dd
--- /dev/null
+++ b/test/parser/samples/action/output.json
@@ -0,0 +1,26 @@
+{
+	"html": {
+		"start": 0,
+		"end": 21,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 21,
+				"type": "Element",
+				"name": "input",
+				"attributes": [
+					{
+						"start": 7,
+						"end": 20,
+						"type": "Action",
+						"name": "autofocus",
+						"modifiers": [],
+						"expression": null
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/animation/input.svelte b/test/parser/samples/animation/input.svelte
new file mode 100644
index 0000000000..d9ee22435f
--- /dev/null
+++ b/test/parser/samples/animation/input.svelte
@@ -0,0 +1,3 @@
+{#each things as thing (thing)}
+	<div animate:flip>flips</div>
+{/each}
\ No newline at end of file
diff --git a/test/parser/samples/animation/output.json b/test/parser/samples/animation/output.json
new file mode 100644
index 0000000000..11195009c8
--- /dev/null
+++ b/test/parser/samples/animation/output.json
@@ -0,0 +1,79 @@
+{
+	"html": {
+		"start": 0,
+		"end": 70,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 70,
+				"type": "EachBlock",
+				"expression": {
+					"type": "Identifier",
+					"start": 7,
+					"end": 13,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 7
+						},
+						"end": {
+							"line": 1,
+							"column": 13
+						}
+					},
+					"name": "things"
+				},
+				"children": [
+					{
+						"start": 33,
+						"end": 62,
+						"type": "Element",
+						"name": "div",
+						"attributes": [
+							{
+								"start": 38,
+								"end": 50,
+								"type": "Animation",
+								"name": "flip",
+								"modifiers": [],
+								"expression": null
+							}
+						],
+						"children": [
+							{
+								"start": 51,
+								"end": 56,
+								"type": "Text",
+								"raw": "flips",
+								"data": "flips"
+							}
+						]
+					}
+				],
+				"context": {
+					"type": "Identifier",
+					"name": "thing",
+					"start": 17,
+					"end": 22
+				},
+				"key": {
+					"type": "Identifier",
+					"start": 24,
+					"end": 29,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 24
+						},
+						"end": {
+							"line": 1,
+							"column": 29
+						}
+					},
+					"name": "thing"
+				}
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-class-directive/input.svelte b/test/parser/samples/attribute-class-directive/input.svelte
new file mode 100644
index 0000000000..629df2e29f
--- /dev/null
+++ b/test/parser/samples/attribute-class-directive/input.svelte
@@ -0,0 +1 @@
+<div class:foo={isFoo}></div>
\ No newline at end of file
diff --git a/test/parser/samples/attribute-class-directive/output.json b/test/parser/samples/attribute-class-directive/output.json
new file mode 100644
index 0000000000..abb2e0c0be
--- /dev/null
+++ b/test/parser/samples/attribute-class-directive/output.json
@@ -0,0 +1,41 @@
+{
+	"html": {
+		"start": 0,
+		"end": 29,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 29,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 22,
+						"type": "Class",
+						"name": "foo",
+						"modifiers": [],
+						"expression": {
+							"type": "Identifier",
+							"start": 16,
+							"end": 21,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 16
+								},
+								"end": {
+									"line": 1,
+									"column": 21
+								}
+							},
+							"name": "isFoo"
+						}
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-containing-solidus/input.svelte b/test/parser/samples/attribute-containing-solidus/input.svelte
new file mode 100644
index 0000000000..c8a8534c23
--- /dev/null
+++ b/test/parser/samples/attribute-containing-solidus/input.svelte
@@ -0,0 +1 @@
+<a href=https://www.google.com>Google</a>
diff --git a/test/parser/samples/attribute-containing-solidus/output.json b/test/parser/samples/attribute-containing-solidus/output.json
new file mode 100644
index 0000000000..f1158b4f50
--- /dev/null
+++ b/test/parser/samples/attribute-containing-solidus/output.json
@@ -0,0 +1,41 @@
+{
+	"html": {
+		"start": 0,
+		"end": 41,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 41,
+				"type": "Element",
+				"name": "a",
+				"attributes": [
+					{
+						"start": 3,
+						"end": 30,
+						"type": "Attribute",
+						"name": "href",
+						"value": [
+							{
+								"start": 8,
+								"end": 30,
+								"type": "Text",
+								"raw": "https://www.google.com",
+								"data": "https://www.google.com"
+							}
+						]
+					}
+				],
+				"children": [
+					{
+						"start": 31,
+						"end": 37,
+						"type": "Text",
+						"raw": "Google",
+						"data": "Google"
+					}
+				]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-curly-bracket/input.svelte b/test/parser/samples/attribute-curly-bracket/input.svelte
new file mode 100644
index 0000000000..4e40713771
--- /dev/null
+++ b/test/parser/samples/attribute-curly-bracket/input.svelte
@@ -0,0 +1 @@
+<input foo=a{1} />
diff --git a/test/parser/samples/attribute-curly-bracket/output.json b/test/parser/samples/attribute-curly-bracket/output.json
new file mode 100644
index 0000000000..7fa04859f3
--- /dev/null
+++ b/test/parser/samples/attribute-curly-bracket/output.json
@@ -0,0 +1,55 @@
+{
+  "html": {
+    "start": 0,
+    "end": 18,
+    "type": "Fragment",
+    "children": [
+      {
+        "start": 0,
+        "end": 18,
+        "type": "Element",
+        "name": "input",
+        "attributes": [
+          {
+            "start": 7,
+            "end": 15,
+            "type": "Attribute",
+            "name": "foo",
+            "value": [
+              {
+                "start": 11,
+                "end": 12,
+                "type": "Text",
+                "raw": "a",
+                "data": "a"
+              },
+              {
+                "start": 12,
+                "end": 15,
+                "type": "MustacheTag",
+                "expression": {
+                  "type": "Literal",
+                  "start": 13,
+                  "end": 14,
+                  "loc": {
+                    "start": {
+                      "line": 1,
+                      "column": 13
+                    },
+                    "end": {
+                      "line": 1,
+                      "column": 14
+                    }
+                  },
+                  "value": 1,
+                  "raw": "1"
+                }
+              }
+            ]
+          }
+        ],
+        "children": []
+      }
+    ]
+  }
+}
diff --git a/test/parser/samples/attribute-dynamic-boolean/input.svelte b/test/parser/samples/attribute-dynamic-boolean/input.svelte
new file mode 100644
index 0000000000..ba531f2f81
--- /dev/null
+++ b/test/parser/samples/attribute-dynamic-boolean/input.svelte
@@ -0,0 +1 @@
+<textarea readonly={readonly}></textarea>
diff --git a/test/parser/samples/attribute-dynamic-boolean/output.json b/test/parser/samples/attribute-dynamic-boolean/output.json
new file mode 100644
index 0000000000..ab6b3927ce
--- /dev/null
+++ b/test/parser/samples/attribute-dynamic-boolean/output.json
@@ -0,0 +1,47 @@
+{
+	"html": {
+		"start": 0,
+		"end": 41,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 41,
+				"type": "Element",
+				"name": "textarea",
+				"attributes": [
+					{
+						"start": 10,
+						"end": 29,
+						"type": "Attribute",
+						"name": "readonly",
+						"value": [
+							{
+								"start": 19,
+								"end": 29,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Identifier",
+									"start": 20,
+									"end": 28,
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 20
+										},
+										"end": {
+											"line": 1,
+											"column": 28
+										}
+									},
+									"name": "readonly"
+								}
+							}
+						]
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-dynamic/input.svelte b/test/parser/samples/attribute-dynamic/input.svelte
new file mode 100644
index 0000000000..9171ae22a7
--- /dev/null
+++ b/test/parser/samples/attribute-dynamic/input.svelte
@@ -0,0 +1 @@
+<div style='color: {color};'>{color}</div>
diff --git a/test/parser/samples/attribute-dynamic/output.json b/test/parser/samples/attribute-dynamic/output.json
new file mode 100644
index 0000000000..4926b645ab
--- /dev/null
+++ b/test/parser/samples/attribute-dynamic/output.json
@@ -0,0 +1,83 @@
+{
+	"html": {
+		"start": 0,
+		"end": 42,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 42,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 28,
+						"type": "Attribute",
+						"name": "style",
+						"value": [
+							{
+								"start": 12,
+								"end": 19,
+								"type": "Text",
+								"raw": "color: ",
+								"data": "color: "
+							},
+							{
+								"start": 19,
+								"end": 26,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Identifier",
+									"start": 20,
+									"end": 25,
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 20
+										},
+										"end": {
+											"line": 1,
+											"column": 25
+										}
+									},
+									"name": "color"
+								}
+							},
+							{
+								"start": 26,
+								"end": 27,
+								"type": "Text",
+								"raw": ";",
+								"data": ";"
+							}
+						]
+					}
+				],
+				"children": [
+					{
+						"start": 29,
+						"end": 36,
+						"type": "MustacheTag",
+						"expression": {
+							"type": "Identifier",
+							"start": 30,
+							"end": 35,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 30
+								},
+								"end": {
+									"line": 1,
+									"column": 35
+								}
+							},
+							"name": "color"
+						}
+					}
+				]
+			}
+		]
+	}
+}
diff --git a/test/parser/samples/attribute-empty-error/error.json b/test/parser/samples/attribute-empty-error/error.json
new file mode 100644
index 0000000000..8c004d34ed
--- /dev/null
+++ b/test/parser/samples/attribute-empty-error/error.json
@@ -0,0 +1,10 @@
+{
+  "code": "missing-attribute-value",
+  "message": "Expected value for the attribute",
+  "pos": 12,
+  "start": {
+    "character": 12,
+    "column": 12,
+    "line": 1
+  }
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-empty-error/input.svelte b/test/parser/samples/attribute-empty-error/input.svelte
new file mode 100644
index 0000000000..ee1b8935f1
--- /dev/null
+++ b/test/parser/samples/attribute-empty-error/input.svelte
@@ -0,0 +1 @@
+<div class= ></div>
\ No newline at end of file
diff --git a/test/parser/samples/attribute-empty/input.svelte b/test/parser/samples/attribute-empty/input.svelte
new file mode 100644
index 0000000000..d500678c37
--- /dev/null
+++ b/test/parser/samples/attribute-empty/input.svelte
@@ -0,0 +1 @@
+<div a="" b={''} c='' d="{''}" ></div>
\ No newline at end of file
diff --git a/test/parser/samples/attribute-empty/output.json b/test/parser/samples/attribute-empty/output.json
new file mode 100644
index 0000000000..22420b9fda
--- /dev/null
+++ b/test/parser/samples/attribute-empty/output.json
@@ -0,0 +1,108 @@
+{
+	"html": {
+		"start": 0,
+		"end": 38,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 38,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 9,
+						"type": "Attribute",
+						"name": "a",
+						"value": [
+							{
+								"start": 8,
+								"end": 8,
+								"type": "Text",
+								"raw": "",
+								"data": ""
+							}
+						]
+					},
+					{
+						"start": 10,
+						"end": 16,
+						"type": "Attribute",
+						"name": "b",
+						"value": [
+							{
+								"start": 12,
+								"end": 16,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Literal",
+									"start": 13,
+									"end": 15,
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 13
+										},
+										"end": {
+											"line": 1,
+											"column": 15
+										}
+									},
+									"value": "",
+									"raw": "''"
+								}
+							}
+						]
+					},
+					{
+						"start": 17,
+						"end": 21,
+						"type": "Attribute",
+						"name": "c",
+						"value": [
+							{
+								"start": 20,
+								"end": 20,
+								"type": "Text",
+								"raw": "",
+								"data": ""
+							}
+						]
+					},
+					{
+						"start": 22,
+						"end": 30,
+						"type": "Attribute",
+						"name": "d",
+						"value": [
+							{
+								"start": 25,
+								"end": 29,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Literal",
+									"start": 26,
+									"end": 28,
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 26
+										},
+										"end": {
+											"line": 1,
+											"column": 28
+										}
+									},
+									"value": "",
+									"raw": "''"
+								}
+							}
+						]
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-escaped/input.svelte b/test/parser/samples/attribute-escaped/input.svelte
new file mode 100644
index 0000000000..4c9cd5ff68
--- /dev/null
+++ b/test/parser/samples/attribute-escaped/input.svelte
@@ -0,0 +1 @@
+<div data-foo='semi:&quot;space:&quot letter:&quote number:&quot1 end:&quot'></div>
diff --git a/test/parser/samples/attribute-escaped/output.json b/test/parser/samples/attribute-escaped/output.json
new file mode 100644
index 0000000000..a8498bd574
--- /dev/null
+++ b/test/parser/samples/attribute-escaped/output.json
@@ -0,0 +1,33 @@
+{
+	"html": {
+		"start": 0,
+		"end": 83,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 83,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 76,
+						"type": "Attribute",
+						"name": "data-foo",
+						"value": [
+							{
+								"start": 15,
+								"end": 75,
+								"type": "Text",
+								"raw": "semi:&quot;space:&quot letter:&quote number:&quot1 end:&quot",
+								"data": "semi:\"space:\" letter:&quote number:&quot1 end:\""
+							}
+						]
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-multiple/input.svelte b/test/parser/samples/attribute-multiple/input.svelte
new file mode 100644
index 0000000000..6f61bd6289
--- /dev/null
+++ b/test/parser/samples/attribute-multiple/input.svelte
@@ -0,0 +1 @@
+<div id='x' class='y'></div>
\ No newline at end of file
diff --git a/test/parser/samples/attribute-multiple/output.json b/test/parser/samples/attribute-multiple/output.json
new file mode 100644
index 0000000000..c4be13e6ee
--- /dev/null
+++ b/test/parser/samples/attribute-multiple/output.json
@@ -0,0 +1,48 @@
+{
+	"html": {
+		"start": 0,
+		"end": 28,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 28,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 11,
+						"type": "Attribute",
+						"name": "id",
+						"value": [
+							{
+								"start": 9,
+								"end": 10,
+								"type": "Text",
+								"raw": "x",
+								"data": "x"
+							}
+						]
+					},
+					{
+						"start": 12,
+						"end": 21,
+						"type": "Attribute",
+						"name": "class",
+						"value": [
+							{
+								"start": 19,
+								"end": 20,
+								"type": "Text",
+								"raw": "y",
+								"data": "y"
+							}
+						]
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-shorthand/input.svelte b/test/parser/samples/attribute-shorthand/input.svelte
new file mode 100644
index 0000000000..35468de006
--- /dev/null
+++ b/test/parser/samples/attribute-shorthand/input.svelte
@@ -0,0 +1 @@
+<div {id}/>
\ No newline at end of file
diff --git a/test/parser/samples/attribute-shorthand/output.json b/test/parser/samples/attribute-shorthand/output.json
new file mode 100644
index 0000000000..f23e62b04e
--- /dev/null
+++ b/test/parser/samples/attribute-shorthand/output.json
@@ -0,0 +1,37 @@
+{
+	"html": {
+		"start": 0,
+		"end": 11,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 11,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 9,
+						"type": "Attribute",
+						"name": "id",
+						"value": [
+							{
+								"start": 6,
+								"end": 8,
+								"type": "AttributeShorthand",
+								"expression": {
+									"start": 6,
+									"end": 8,
+									"type": "Identifier",
+									"name": "id"
+								}
+							}
+						]
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-static-boolean/input.svelte b/test/parser/samples/attribute-static-boolean/input.svelte
new file mode 100644
index 0000000000..1536f3e1e8
--- /dev/null
+++ b/test/parser/samples/attribute-static-boolean/input.svelte
@@ -0,0 +1 @@
+<textarea readonly></textarea>
\ No newline at end of file
diff --git a/test/parser/samples/attribute-static-boolean/output.json b/test/parser/samples/attribute-static-boolean/output.json
new file mode 100644
index 0000000000..7d635004c1
--- /dev/null
+++ b/test/parser/samples/attribute-static-boolean/output.json
@@ -0,0 +1,25 @@
+{
+	"html": {
+		"start": 0,
+		"end": 30,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 30,
+				"type": "Element",
+				"name": "textarea",
+				"attributes": [
+					{
+						"start": 10,
+						"end": 18,
+						"type": "Attribute",
+						"name": "readonly",
+						"value": true
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-static/input.svelte b/test/parser/samples/attribute-static/input.svelte
new file mode 100644
index 0000000000..c6a8a8c95d
--- /dev/null
+++ b/test/parser/samples/attribute-static/input.svelte
@@ -0,0 +1 @@
+<div class='foo'></div>
\ No newline at end of file
diff --git a/test/parser/samples/attribute-static/output.json b/test/parser/samples/attribute-static/output.json
new file mode 100644
index 0000000000..37b41d9a89
--- /dev/null
+++ b/test/parser/samples/attribute-static/output.json
@@ -0,0 +1,33 @@
+{
+	"html": {
+		"start": 0,
+		"end": 23,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 23,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 16,
+						"type": "Attribute",
+						"name": "class",
+						"value": [
+							{
+								"start": 12,
+								"end": 15,
+								"type": "Text",
+								"raw": "foo",
+								"data": "foo"
+							}
+						]
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-style-directive-shorthand/input.svelte b/test/parser/samples/attribute-style-directive-shorthand/input.svelte
new file mode 100644
index 0000000000..3e2c66f218
--- /dev/null
+++ b/test/parser/samples/attribute-style-directive-shorthand/input.svelte
@@ -0,0 +1 @@
+<div style:color></div>
\ No newline at end of file
diff --git a/test/parser/samples/attribute-style-directive-shorthand/output.json b/test/parser/samples/attribute-style-directive-shorthand/output.json
new file mode 100644
index 0000000000..ac658408e6
--- /dev/null
+++ b/test/parser/samples/attribute-style-directive-shorthand/output.json
@@ -0,0 +1,25 @@
+{
+	"html": {
+		"start": 0,
+		"end": 23,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 23,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 16,
+						"type": "StyleDirective",
+						"name": "color",
+						"value": true
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-style-directive-string/input.svelte b/test/parser/samples/attribute-style-directive-string/input.svelte
new file mode 100644
index 0000000000..dd8ec8dc94
--- /dev/null
+++ b/test/parser/samples/attribute-style-directive-string/input.svelte
@@ -0,0 +1,7 @@
+<div style:color="red"></div>
+<div style:color='red'></div>
+<div style:color=red></div>
+<div style:color="red{variable}"></div>
+<div style:color='red{variable}'></div>
+<div style:color=red{variable}></div>
+<div style:color={`template${literal}`}></div>
\ No newline at end of file
diff --git a/test/parser/samples/attribute-style-directive-string/output.json b/test/parser/samples/attribute-style-directive-string/output.json
new file mode 100644
index 0000000000..e81e7be3c9
--- /dev/null
+++ b/test/parser/samples/attribute-style-directive-string/output.json
@@ -0,0 +1,355 @@
+{
+	"html": {
+		"start": 0,
+		"end": 252,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 29,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 22,
+						"type": "StyleDirective",
+						"name": "color",
+						"value": [
+							{
+								"start": 18,
+								"end": 21,
+								"type": "Text",
+								"raw": "red",
+								"data": "red"
+							}
+						]
+					}
+				],
+				"children": []
+			},
+			{
+				"start": 29,
+				"end": 30,
+				"type": "Text",
+				"raw": "\n",
+				"data": "\n"
+			},
+			{
+				"start": 30,
+				"end": 59,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 35,
+						"end": 52,
+						"type": "StyleDirective",
+						"name": "color",
+						"value": [
+							{
+								"start": 48,
+								"end": 51,
+								"type": "Text",
+								"raw": "red",
+								"data": "red"
+							}
+						]
+					}
+				],
+				"children": []
+			},
+			{
+				"start": 59,
+				"end": 60,
+				"type": "Text",
+				"raw": "\n",
+				"data": "\n"
+			},
+			{
+				"start": 60,
+				"end": 87,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 65,
+						"end": 80,
+						"type": "StyleDirective",
+						"name": "color",
+						"value": [
+							{
+								"start": 77,
+								"end": 80,
+								"type": "Text",
+								"raw": "red",
+								"data": "red"
+							}
+						]
+					}
+				],
+				"children": []
+			},
+			{
+				"start": 87,
+				"end": 88,
+				"type": "Text",
+				"raw": "\n",
+				"data": "\n"
+			},
+			{
+				"start": 88,
+				"end": 127,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 93,
+						"end": 120,
+						"type": "StyleDirective",
+						"name": "color",
+						"value": [
+							{
+								"start": 106,
+								"end": 109,
+								"type": "Text",
+								"raw": "red",
+								"data": "red"
+							},
+							{
+								"start": 109,
+								"end": 119,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Identifier",
+									"start": 110,
+									"end": 118,
+									"loc": {
+										"start": {
+											"line": 4,
+											"column": 22
+										},
+										"end": {
+											"line": 4,
+											"column": 30
+										}
+									},
+									"name": "variable"
+								}
+							}
+						]
+					}
+				],
+				"children": []
+			},
+			{
+				"start": 127,
+				"end": 128,
+				"type": "Text",
+				"raw": "\n",
+				"data": "\n"
+			},
+			{
+				"start": 128,
+				"end": 167,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 133,
+						"end": 160,
+						"type": "StyleDirective",
+						"name": "color",
+						"value": [
+							{
+								"start": 146,
+								"end": 149,
+								"type": "Text",
+								"raw": "red",
+								"data": "red"
+							},
+							{
+								"start": 149,
+								"end": 159,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Identifier",
+									"start": 150,
+									"end": 158,
+									"loc": {
+										"start": {
+											"line": 5,
+											"column": 22
+										},
+										"end": {
+											"line": 5,
+											"column": 30
+										}
+									},
+									"name": "variable"
+								}
+							}
+						]
+					}
+				],
+				"children": []
+			},
+			{
+				"start": 167,
+				"end": 168,
+				"type": "Text",
+				"raw": "\n",
+				"data": "\n"
+			},
+			{
+				"start": 168,
+				"end": 205,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 173,
+						"end": 198,
+						"type": "StyleDirective",
+						"name": "color",
+						"value": [
+							{
+								"start": 185,
+								"end": 188,
+								"type": "Text",
+								"raw": "red",
+								"data": "red"
+							},
+							{
+								"start": 188,
+								"end": 198,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Identifier",
+									"start": 189,
+									"end": 197,
+									"loc": {
+										"start": {
+											"line": 6,
+											"column": 21
+										},
+										"end": {
+											"line": 6,
+											"column": 29
+										}
+									},
+									"name": "variable"
+								}
+							}
+						]
+					}
+				],
+				"children": []
+			},
+			{
+				"start": 205,
+				"end": 206,
+				"type": "Text",
+				"raw": "\n",
+				"data": "\n"
+			},
+			{
+				"start": 206,
+				"end": 252,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 211,
+						"end": 245,
+						"type": "StyleDirective",
+						"name": "color",
+						"value": [
+							{
+								"start": 223,
+								"end": 245,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "TemplateLiteral",
+									"start": 224,
+									"end": 244,
+									"loc": {
+										"start": {
+											"line": 7,
+											"column": 18
+										},
+										"end": {
+											"line": 7,
+											"column": 38
+										}
+									},
+									"expressions": [
+										{
+											"type": "Identifier",
+											"start": 235,
+											"end": 242,
+											"loc": {
+												"start": {
+													"line": 7,
+													"column": 29
+												},
+												"end": {
+													"line": 7,
+													"column": 36
+												}
+											},
+											"name": "literal"
+										}
+									],
+									"quasis": [
+										{
+											"type": "TemplateElement",
+											"start": 225,
+											"end": 233,
+											"loc": {
+												"start": {
+													"line": 7,
+													"column": 19
+												},
+												"end": {
+													"line": 7,
+													"column": 27
+												}
+											},
+											"value": {
+												"raw": "template",
+												"cooked": "template"
+											},
+											"tail": false
+										},
+										{
+											"type": "TemplateElement",
+											"start": 243,
+											"end": 243,
+											"loc": {
+												"start": {
+													"line": 7,
+													"column": 37
+												},
+												"end": {
+													"line": 7,
+													"column": 37
+												}
+											},
+											"value": {
+												"raw": "",
+												"cooked": ""
+											},
+											"tail": true
+										}
+									]
+								}
+							}
+						]
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-style-directive/input.svelte b/test/parser/samples/attribute-style-directive/input.svelte
new file mode 100644
index 0000000000..536d162326
--- /dev/null
+++ b/test/parser/samples/attribute-style-directive/input.svelte
@@ -0,0 +1 @@
+<div style:color={myColor}></div>
\ No newline at end of file
diff --git a/test/parser/samples/attribute-style-directive/output.json b/test/parser/samples/attribute-style-directive/output.json
new file mode 100644
index 0000000000..f36ce6b01e
--- /dev/null
+++ b/test/parser/samples/attribute-style-directive/output.json
@@ -0,0 +1,47 @@
+{
+	"html": {
+		"start": 0,
+		"end": 33,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 33,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 26,
+						"type": "StyleDirective",
+						"name": "color",
+						"value": [
+							{
+								"start": 17,
+								"end": 26,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Identifier",
+									"start": 18,
+									"end": 25,
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 18
+										},
+										"end": {
+											"line": 1,
+											"column": 25
+										}
+									},
+									"name": "myColor"
+								}
+							}
+						]
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-style/input.svelte b/test/parser/samples/attribute-style/input.svelte
new file mode 100644
index 0000000000..12872605ad
--- /dev/null
+++ b/test/parser/samples/attribute-style/input.svelte
@@ -0,0 +1 @@
+<div style="color: red;">red</div>
\ No newline at end of file
diff --git a/test/parser/samples/attribute-style/output.json b/test/parser/samples/attribute-style/output.json
new file mode 100644
index 0000000000..95c0c8a7a4
--- /dev/null
+++ b/test/parser/samples/attribute-style/output.json
@@ -0,0 +1,41 @@
+{
+	"html": {
+		"start": 0,
+		"end": 34,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 34,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 24,
+						"type": "Attribute",
+						"name": "style",
+						"value": [
+							{
+								"start": 12,
+								"end": 23,
+								"type": "Text",
+								"raw": "color: red;",
+								"data": "color: red;"
+							}
+						]
+					}
+				],
+				"children": [
+					{
+						"start": 25,
+						"end": 28,
+						"type": "Text",
+						"raw": "red",
+						"data": "red"
+					}
+				]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-unique-binding-error/error.json b/test/parser/samples/attribute-unique-binding-error/error.json
new file mode 100644
index 0000000000..dd14572149
--- /dev/null
+++ b/test/parser/samples/attribute-unique-binding-error/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "duplicate-attribute",
+	"message": "Attributes need to be unique",
+	"start": {
+		"line": 1,
+		"column": 17,
+		"character": 17
+	},
+	"pos": 17
+}
diff --git a/test/parser/samples/attribute-unique-binding-error/input.svelte b/test/parser/samples/attribute-unique-binding-error/input.svelte
new file mode 100644
index 0000000000..78f854bad6
--- /dev/null
+++ b/test/parser/samples/attribute-unique-binding-error/input.svelte
@@ -0,0 +1 @@
+<Widget foo={42} bind:foo/>
\ No newline at end of file
diff --git a/test/parser/samples/attribute-unique-error/error.json b/test/parser/samples/attribute-unique-error/error.json
new file mode 100644
index 0000000000..dd14572149
--- /dev/null
+++ b/test/parser/samples/attribute-unique-error/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "duplicate-attribute",
+	"message": "Attributes need to be unique",
+	"start": {
+		"line": 1,
+		"column": 17,
+		"character": 17
+	},
+	"pos": 17
+}
diff --git a/test/parser/samples/attribute-unique-error/input.svelte b/test/parser/samples/attribute-unique-error/input.svelte
new file mode 100644
index 0000000000..37fec733b3
--- /dev/null
+++ b/test/parser/samples/attribute-unique-error/input.svelte
@@ -0,0 +1 @@
+<div class='foo' class='bar'></div>
\ No newline at end of file
diff --git a/test/parser/samples/attribute-unique-shorthand-error/error.json b/test/parser/samples/attribute-unique-shorthand-error/error.json
new file mode 100644
index 0000000000..dd14572149
--- /dev/null
+++ b/test/parser/samples/attribute-unique-shorthand-error/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "duplicate-attribute",
+	"message": "Attributes need to be unique",
+	"start": {
+		"line": 1,
+		"column": 17,
+		"character": 17
+	},
+	"pos": 17
+}
diff --git a/test/parser/samples/attribute-unique-shorthand-error/input.svelte b/test/parser/samples/attribute-unique-shorthand-error/input.svelte
new file mode 100644
index 0000000000..d486eab558
--- /dev/null
+++ b/test/parser/samples/attribute-unique-shorthand-error/input.svelte
@@ -0,0 +1 @@
+<div title='foo' {title}></div>
\ No newline at end of file
diff --git a/test/parser/samples/attribute-unquoted/input.svelte b/test/parser/samples/attribute-unquoted/input.svelte
new file mode 100644
index 0000000000..4bab0df72f
--- /dev/null
+++ b/test/parser/samples/attribute-unquoted/input.svelte
@@ -0,0 +1 @@
+<div class=foo></div>
\ No newline at end of file
diff --git a/test/parser/samples/attribute-unquoted/output.json b/test/parser/samples/attribute-unquoted/output.json
new file mode 100644
index 0000000000..11fa397819
--- /dev/null
+++ b/test/parser/samples/attribute-unquoted/output.json
@@ -0,0 +1,33 @@
+{
+	"html": {
+		"start": 0,
+		"end": 21,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 21,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 14,
+						"type": "Attribute",
+						"name": "class",
+						"value": [
+							{
+								"start": 11,
+								"end": 14,
+								"type": "Text",
+								"raw": "foo",
+								"data": "foo"
+							}
+						]
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/attribute-with-whitespace/input.svelte b/test/parser/samples/attribute-with-whitespace/input.svelte
new file mode 100644
index 0000000000..2743a89ed0
--- /dev/null
+++ b/test/parser/samples/attribute-with-whitespace/input.svelte
@@ -0,0 +1 @@
+<button on:click= {foo}>Click</button>
diff --git a/test/parser/samples/attribute-with-whitespace/output.json b/test/parser/samples/attribute-with-whitespace/output.json
new file mode 100644
index 0000000000..edf05ca32e
--- /dev/null
+++ b/test/parser/samples/attribute-with-whitespace/output.json
@@ -0,0 +1,49 @@
+{
+	"html": {
+		"start": 0,
+		"end": 38,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 38,
+				"type": "Element",
+				"name": "button",
+				"attributes": [
+					{
+						"start": 8,
+						"end": 23,
+						"type": "EventHandler",
+						"name": "click",
+						"modifiers": [],
+						"expression": {
+							"type": "Identifier",
+							"start": 19,
+							"end": 22,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 19
+								},
+								"end": {
+									"line": 1,
+									"column": 22
+								}
+							},
+							"name": "foo"
+						}
+					}
+				],
+				"children": [
+					{
+						"start": 24,
+						"end": 29,
+						"type": "Text",
+						"raw": "Click",
+						"data": "Click"
+					}
+				]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/await-catch/input.svelte b/test/parser/samples/await-catch/input.svelte
new file mode 100644
index 0000000000..207bacb5b1
--- /dev/null
+++ b/test/parser/samples/await-catch/input.svelte
@@ -0,0 +1,5 @@
+{#await thePromise}
+	<p>loading...</p>
+{:catch theError}
+	<p>oh no! {theError.message}</p>
+{/await}
\ No newline at end of file
diff --git a/test/parser/samples/await-catch/output.json b/test/parser/samples/await-catch/output.json
new file mode 100644
index 0000000000..91862b5366
--- /dev/null
+++ b/test/parser/samples/await-catch/output.json
@@ -0,0 +1,174 @@
+{
+	"html": {
+		"start": 0,
+		"end": 99,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 99,
+				"type": "AwaitBlock",
+				"expression": {
+					"type": "Identifier",
+					"start": 8,
+					"end": 18,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 8
+						},
+						"end": {
+							"line": 1,
+							"column": 18
+						}
+					},
+					"name": "thePromise"
+				},
+				"value": null,
+				"error": {
+					"type": "Identifier",
+					"name": "theError",
+					"start": 47,
+					"end": 55
+				},
+				"pending": {
+					"start": 19,
+					"end": 39,
+					"type": "PendingBlock",
+					"children": [
+						{
+							"start": 19,
+							"end": 21,
+							"type": "Text",
+							"raw": "\n\t",
+							"data": "\n\t"
+						},
+						{
+							"start": 21,
+							"end": 38,
+							"type": "Element",
+							"name": "p",
+							"attributes": [],
+							"children": [
+								{
+									"start": 24,
+									"end": 34,
+									"type": "Text",
+									"raw": "loading...",
+									"data": "loading..."
+								}
+							]
+						},
+						{
+							"start": 38,
+							"end": 39,
+							"type": "Text",
+							"raw": "\n",
+							"data": "\n"
+						}
+					],
+					"skip": false
+				},
+				"then": {
+					"start": null,
+					"end": null,
+					"type": "ThenBlock",
+					"children": [],
+					"skip": true
+				},
+				"catch": {
+					"start": 39,
+					"end": 91,
+					"type": "CatchBlock",
+					"children": [
+						{
+							"start": 56,
+							"end": 58,
+							"type": "Text",
+							"raw": "\n\t",
+							"data": "\n\t"
+						},
+						{
+							"start": 58,
+							"end": 90,
+							"type": "Element",
+							"name": "p",
+							"attributes": [],
+							"children": [
+								{
+									"start": 61,
+									"end": 68,
+									"type": "Text",
+									"raw": "oh no! ",
+									"data": "oh no! "
+								},
+								{
+									"start": 68,
+									"end": 86,
+									"type": "MustacheTag",
+									"expression": {
+										"type": "MemberExpression",
+										"start": 69,
+										"end": 85,
+										"loc": {
+											"start": {
+												"line": 4,
+												"column": 12
+											},
+											"end": {
+												"line": 4,
+												"column": 28
+											}
+										},
+										"object": {
+											"type": "Identifier",
+											"start": 69,
+											"end": 77,
+											"loc": {
+												"start": {
+													"line": 4,
+													"column": 12
+												},
+												"end": {
+													"line": 4,
+													"column": 20
+												}
+											},
+											"name": "theError"
+										},
+										"property": {
+											"type": "Identifier",
+											"start": 78,
+											"end": 85,
+											"loc": {
+												"start": {
+													"line": 4,
+													"column": 21
+												},
+												"end": {
+													"line": 4,
+													"column": 28
+												}
+											},
+											"name": "message"
+										},
+										"computed": false,
+										"optional": false
+									}
+								}
+							]
+						},
+						{
+							"start": 90,
+							"end": 91,
+							"type": "Text",
+							"raw": "\n",
+							"data": "\n"
+						}
+					],
+					"skip": false
+				}
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/await-then-catch/input.svelte b/test/parser/samples/await-then-catch/input.svelte
new file mode 100644
index 0000000000..79f5162ace
--- /dev/null
+++ b/test/parser/samples/await-then-catch/input.svelte
@@ -0,0 +1,7 @@
+{#await thePromise}
+	<p>loading...</p>
+{:then theValue}
+	<p>the value is {theValue}</p>
+{:catch theError}
+	<p>oh no! {theError.message}</p>
+{/await}
\ No newline at end of file
diff --git a/test/parser/samples/await-then-catch/output.json b/test/parser/samples/await-then-catch/output.json
new file mode 100644
index 0000000000..e377d3fa3e
--- /dev/null
+++ b/test/parser/samples/await-then-catch/output.json
@@ -0,0 +1,231 @@
+{
+	"html": {
+		"start": 0,
+		"end": 148,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 148,
+				"type": "AwaitBlock",
+				"expression": {
+					"type": "Identifier",
+					"start": 8,
+					"end": 18,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 8
+						},
+						"end": {
+							"line": 1,
+							"column": 18
+						}
+					},
+					"name": "thePromise"
+				},
+				"value": {
+					"type": "Identifier",
+					"name": "theValue",
+					"start": 46,
+					"end": 54
+				},
+				"error": {
+					"type": "Identifier",
+					"name": "theError",
+					"start": 96,
+					"end": 104
+				},
+				"pending": {
+					"start": 19,
+					"end": 39,
+					"type": "PendingBlock",
+					"children": [
+						{
+							"start": 19,
+							"end": 21,
+							"type": "Text",
+							"raw": "\n\t",
+							"data": "\n\t"
+						},
+						{
+							"start": 21,
+							"end": 38,
+							"type": "Element",
+							"name": "p",
+							"attributes": [],
+							"children": [
+								{
+									"start": 24,
+									"end": 34,
+									"type": "Text",
+									"raw": "loading...",
+									"data": "loading..."
+								}
+							]
+						},
+						{
+							"start": 38,
+							"end": 39,
+							"type": "Text",
+							"raw": "\n",
+							"data": "\n"
+						}
+					],
+					"skip": false
+				},
+				"then": {
+					"start": 39,
+					"end": 88,
+					"type": "ThenBlock",
+					"children": [
+						{
+							"start": 55,
+							"end": 57,
+							"type": "Text",
+							"raw": "\n\t",
+							"data": "\n\t"
+						},
+						{
+							"start": 57,
+							"end": 87,
+							"type": "Element",
+							"name": "p",
+							"attributes": [],
+							"children": [
+								{
+									"start": 60,
+									"end": 73,
+									"type": "Text",
+									"raw": "the value is ",
+									"data": "the value is "
+								},
+								{
+									"start": 73,
+									"end": 83,
+									"type": "MustacheTag",
+									"expression": {
+										"type": "Identifier",
+										"start": 74,
+										"end": 82,
+										"loc": {
+											"start": {
+												"line": 4,
+												"column": 18
+											},
+											"end": {
+												"line": 4,
+												"column": 26
+											}
+										},
+										"name": "theValue"
+									}
+								}
+							]
+						},
+						{
+							"start": 87,
+							"end": 88,
+							"type": "Text",
+							"raw": "\n",
+							"data": "\n"
+						}
+					],
+					"skip": false
+				},
+				"catch": {
+					"start": 88,
+					"end": 140,
+					"type": "CatchBlock",
+					"children": [
+						{
+							"start": 105,
+							"end": 107,
+							"type": "Text",
+							"raw": "\n\t",
+							"data": "\n\t"
+						},
+						{
+							"start": 107,
+							"end": 139,
+							"type": "Element",
+							"name": "p",
+							"attributes": [],
+							"children": [
+								{
+									"start": 110,
+									"end": 117,
+									"type": "Text",
+									"raw": "oh no! ",
+									"data": "oh no! "
+								},
+								{
+									"start": 117,
+									"end": 135,
+									"type": "MustacheTag",
+									"expression": {
+										"type": "MemberExpression",
+										"start": 118,
+										"end": 134,
+										"loc": {
+											"start": {
+												"line": 6,
+												"column": 12
+											},
+											"end": {
+												"line": 6,
+												"column": 28
+											}
+										},
+										"object": {
+											"type": "Identifier",
+											"start": 118,
+											"end": 126,
+											"loc": {
+												"start": {
+													"line": 6,
+													"column": 12
+												},
+												"end": {
+													"line": 6,
+													"column": 20
+												}
+											},
+											"name": "theError"
+										},
+										"property": {
+											"type": "Identifier",
+											"start": 127,
+											"end": 134,
+											"loc": {
+												"start": {
+													"line": 6,
+													"column": 21
+												},
+												"end": {
+													"line": 6,
+													"column": 28
+												}
+											},
+											"name": "message"
+										},
+										"computed": false,
+										"optional": false
+									}
+								}
+							]
+						},
+						{
+							"start": 139,
+							"end": 140,
+							"type": "Text",
+							"raw": "\n",
+							"data": "\n"
+						}
+					],
+					"skip": false
+				}
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/binding-shorthand/input.svelte b/test/parser/samples/binding-shorthand/input.svelte
new file mode 100644
index 0000000000..6f6c51915c
--- /dev/null
+++ b/test/parser/samples/binding-shorthand/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let foo;
+</script>
+
+<Widget bind:foo/>
\ No newline at end of file
diff --git a/test/parser/samples/binding-shorthand/output.json b/test/parser/samples/binding-shorthand/output.json
new file mode 100644
index 0000000000..17012db31a
--- /dev/null
+++ b/test/parser/samples/binding-shorthand/output.json
@@ -0,0 +1,112 @@
+{
+	"html": {
+		"start": 30,
+		"end": 48,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 28,
+				"end": 30,
+				"type": "Text",
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"start": 30,
+				"end": 48,
+				"type": "InlineComponent",
+				"name": "Widget",
+				"attributes": [
+					{
+						"start": 38,
+						"end": 46,
+						"type": "Binding",
+						"name": "foo",
+						"modifiers": [],
+						"expression": {
+							"start": 43,
+							"end": 46,
+							"type": "Identifier",
+							"name": "foo"
+						}
+					}
+				],
+				"children": []
+			}
+		]
+	},
+	"instance": {
+		"type": "Script",
+		"start": 0,
+		"end": 28,
+		"context": "default",
+		"content": {
+			"type": "Program",
+			"start": 8,
+			"end": 19,
+			"loc": {
+				"start": {
+					"line": 1,
+					"column": 0
+				},
+				"end": {
+					"line": 3,
+					"column": 0
+				}
+			},
+			"body": [
+				{
+					"type": "VariableDeclaration",
+					"start": 10,
+					"end": 18,
+					"loc": {
+						"start": {
+							"line": 2,
+							"column": 1
+						},
+						"end": {
+							"line": 2,
+							"column": 9
+						}
+					},
+					"declarations": [
+						{
+							"type": "VariableDeclarator",
+							"start": 14,
+							"end": 17,
+							"loc": {
+								"start": {
+									"line": 2,
+									"column": 5
+								},
+								"end": {
+									"line": 2,
+									"column": 8
+								}
+							},
+							"id": {
+								"type": "Identifier",
+								"start": 14,
+								"end": 17,
+								"loc": {
+									"start": {
+										"line": 2,
+										"column": 5
+									},
+									"end": {
+										"line": 2,
+										"column": 8
+									}
+								},
+								"name": "foo"
+							},
+							"init": null
+						}
+					],
+					"kind": "let"
+				}
+			],
+			"sourceType": "module"
+		}
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/binding/input.svelte b/test/parser/samples/binding/input.svelte
new file mode 100644
index 0000000000..33c8b35100
--- /dev/null
+++ b/test/parser/samples/binding/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let name;
+</script>
+
+<input bind:value={name}>
\ No newline at end of file
diff --git a/test/parser/samples/binding/output.json b/test/parser/samples/binding/output.json
new file mode 100644
index 0000000000..c980b7f3eb
--- /dev/null
+++ b/test/parser/samples/binding/output.json
@@ -0,0 +1,122 @@
+{
+	"html": {
+		"start": 31,
+		"end": 56,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 29,
+				"end": 31,
+				"type": "Text",
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"start": 31,
+				"end": 56,
+				"type": "Element",
+				"name": "input",
+				"attributes": [
+					{
+						"start": 38,
+						"end": 55,
+						"type": "Binding",
+						"name": "value",
+						"modifiers": [],
+						"expression": {
+							"type": "Identifier",
+							"start": 50,
+							"end": 54,
+							"loc": {
+								"start": {
+									"line": 5,
+									"column": 19
+								},
+								"end": {
+									"line": 5,
+									"column": 23
+								}
+							},
+							"name": "name"
+						}
+					}
+				],
+				"children": []
+			}
+		]
+	},
+	"instance": {
+		"type": "Script",
+		"start": 0,
+		"end": 29,
+		"context": "default",
+		"content": {
+			"type": "Program",
+			"start": 8,
+			"end": 20,
+			"loc": {
+				"start": {
+					"line": 1,
+					"column": 0
+				},
+				"end": {
+					"line": 3,
+					"column": 0
+				}
+			},
+			"body": [
+				{
+					"type": "VariableDeclaration",
+					"start": 10,
+					"end": 19,
+					"loc": {
+						"start": {
+							"line": 2,
+							"column": 1
+						},
+						"end": {
+							"line": 2,
+							"column": 10
+						}
+					},
+					"declarations": [
+						{
+							"type": "VariableDeclarator",
+							"start": 14,
+							"end": 18,
+							"loc": {
+								"start": {
+									"line": 2,
+									"column": 5
+								},
+								"end": {
+									"line": 2,
+									"column": 9
+								}
+							},
+							"id": {
+								"type": "Identifier",
+								"start": 14,
+								"end": 18,
+								"loc": {
+									"start": {
+										"line": 2,
+										"column": 5
+									},
+									"end": {
+										"line": 2,
+										"column": 9
+									}
+								},
+								"name": "name"
+							},
+							"init": null
+						}
+					],
+					"kind": "let"
+				}
+			],
+			"sourceType": "module"
+		}
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/comment-with-ignores/input.svelte b/test/parser/samples/comment-with-ignores/input.svelte
new file mode 100644
index 0000000000..c4fcec5e50
--- /dev/null
+++ b/test/parser/samples/comment-with-ignores/input.svelte
@@ -0,0 +1 @@
+<!-- svelte-ignore foo bar -->
\ No newline at end of file
diff --git a/test/parser/samples/comment-with-ignores/output.json b/test/parser/samples/comment-with-ignores/output.json
new file mode 100644
index 0000000000..2705ec6658
--- /dev/null
+++ b/test/parser/samples/comment-with-ignores/output.json
@@ -0,0 +1,16 @@
+{
+	"html": {
+		"start": 0,
+		"end": 30,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 30,
+				"type": "Comment",
+				"data": " svelte-ignore foo bar ",
+				"ignores": ["foo", "bar"]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/comment/input.svelte b/test/parser/samples/comment/input.svelte
new file mode 100644
index 0000000000..3b3ffe3222
--- /dev/null
+++ b/test/parser/samples/comment/input.svelte
@@ -0,0 +1 @@
+<!-- a comment -->
\ No newline at end of file
diff --git a/test/parser/samples/comment/output.json b/test/parser/samples/comment/output.json
new file mode 100644
index 0000000000..097fe994cf
--- /dev/null
+++ b/test/parser/samples/comment/output.json
@@ -0,0 +1,16 @@
+{
+	"html": {
+		"start": 0,
+		"end": 18,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 18,
+				"type": "Comment",
+				"data": " a comment ",
+				"ignores": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/component-dynamic/input.svelte b/test/parser/samples/component-dynamic/input.svelte
new file mode 100644
index 0000000000..1dad5eb269
--- /dev/null
+++ b/test/parser/samples/component-dynamic/input.svelte
@@ -0,0 +1 @@
+<svelte:component this="{foo ? Foo : Bar}"></svelte:component>
\ No newline at end of file
diff --git a/test/parser/samples/component-dynamic/output.json b/test/parser/samples/component-dynamic/output.json
new file mode 100644
index 0000000000..32cde85f1a
--- /dev/null
+++ b/test/parser/samples/component-dynamic/output.json
@@ -0,0 +1,80 @@
+{
+	"html": {
+		"start": 0,
+		"end": 62,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 62,
+				"type": "InlineComponent",
+				"name": "svelte:component",
+				"attributes": [],
+				"children": [],
+				"expression": {
+					"type": "ConditionalExpression",
+					"start": 25,
+					"end": 40,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 25
+						},
+						"end": {
+							"line": 1,
+							"column": 40
+						}
+					},
+					"test": {
+						"type": "Identifier",
+						"start": 25,
+						"end": 28,
+						"loc": {
+							"start": {
+								"line": 1,
+								"column": 25
+							},
+							"end": {
+								"line": 1,
+								"column": 28
+							}
+						},
+						"name": "foo"
+					},
+					"consequent": {
+						"type": "Identifier",
+						"start": 31,
+						"end": 34,
+						"loc": {
+							"start": {
+								"line": 1,
+								"column": 31
+							},
+							"end": {
+								"line": 1,
+								"column": 34
+							}
+						},
+						"name": "Foo"
+					},
+					"alternate": {
+						"type": "Identifier",
+						"start": 37,
+						"end": 40,
+						"loc": {
+							"start": {
+								"line": 1,
+								"column": 37
+							},
+							"end": {
+								"line": 1,
+								"column": 40
+							}
+						},
+						"name": "Bar"
+					}
+				}
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/convert-entities-in-element/input.svelte b/test/parser/samples/convert-entities-in-element/input.svelte
new file mode 100644
index 0000000000..f05dc391ad
--- /dev/null
+++ b/test/parser/samples/convert-entities-in-element/input.svelte
@@ -0,0 +1 @@
+<p>Hello &amp; World</p>
\ No newline at end of file
diff --git a/test/parser/samples/convert-entities-in-element/output.json b/test/parser/samples/convert-entities-in-element/output.json
new file mode 100644
index 0000000000..c830c276de
--- /dev/null
+++ b/test/parser/samples/convert-entities-in-element/output.json
@@ -0,0 +1,25 @@
+{
+	"html": {
+		"start": 0,
+		"end": 24,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 24,
+				"type": "Element",
+				"name": "p",
+				"attributes": [],
+				"children": [
+					{
+						"start": 3,
+						"end": 20,
+						"type": "Text",
+						"raw": "Hello &amp; World",
+						"data": "Hello & World"
+					}
+				]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/convert-entities/input.svelte b/test/parser/samples/convert-entities/input.svelte
new file mode 100644
index 0000000000..161463ec58
--- /dev/null
+++ b/test/parser/samples/convert-entities/input.svelte
@@ -0,0 +1 @@
+Hello &amp; World
\ No newline at end of file
diff --git a/test/parser/samples/convert-entities/output.json b/test/parser/samples/convert-entities/output.json
new file mode 100644
index 0000000000..f4cc1a6662
--- /dev/null
+++ b/test/parser/samples/convert-entities/output.json
@@ -0,0 +1,16 @@
+{
+	"html": {
+		"start": 0,
+		"end": 17,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 17,
+				"type": "Text",
+				"raw": "Hello &amp; World",
+				"data": "Hello & World"
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/css/input.svelte b/test/parser/samples/css/input.svelte
new file mode 100644
index 0000000000..a573bcf778
--- /dev/null
+++ b/test/parser/samples/css/input.svelte
@@ -0,0 +1,7 @@
+<div>foo</div>
+
+<style>
+	div {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/parser/samples/css/output.json b/test/parser/samples/css/output.json
new file mode 100644
index 0000000000..a39f718cf1
--- /dev/null
+++ b/test/parser/samples/css/output.json
@@ -0,0 +1,97 @@
+{
+	"html": {
+		"start": 0,
+		"end": 14,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 14,
+				"type": "Element",
+				"name": "div",
+				"attributes": [],
+				"children": [
+					{
+						"start": 5,
+						"end": 8,
+						"type": "Text",
+						"raw": "foo",
+						"data": "foo"
+					}
+				]
+			},
+			{
+				"start": 14,
+				"end": 16,
+				"type": "Text",
+				"raw": "\n\n",
+				"data": "\n\n"
+			}
+		]
+	},
+	"css": {
+		"type": "Style",
+		"start": 16,
+		"end": 56,
+		"attributes": [],
+		"children": [
+			{
+				"type": "Rule",
+				"prelude": {
+					"type": "SelectorList",
+					"children": [
+						{
+							"type": "Selector",
+							"children": [
+								{
+									"type": "TypeSelector",
+									"name": "div",
+									"start": 25,
+									"end": 28
+								}
+							],
+							"start": 25,
+							"end": 28
+						}
+					],
+					"start": 25,
+					"end": 28
+				},
+				"block": {
+					"type": "Block",
+					"children": [
+						{
+							"type": "Declaration",
+							"important": false,
+							"property": "color",
+							"value": {
+								"type": "Value",
+								"children": [
+									{
+										"type": "Identifier",
+										"name": "red",
+										"start": 40,
+										"end": 43
+									}
+								],
+								"start": 40,
+								"end": 43
+							},
+							"start": 33,
+							"end": 43
+						}
+					],
+					"start": 29,
+					"end": 47
+				},
+				"start": 25,
+				"end": 47
+			}
+		],
+		"content": {
+			"start": 23,
+			"end": 48,
+			"styles": "\n\tdiv {\n\t\tcolor: red;\n\t}\n"
+		}
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/dynamic-element-string/input.svelte b/test/parser/samples/dynamic-element-string/input.svelte
new file mode 100644
index 0000000000..1a939ceaec
--- /dev/null
+++ b/test/parser/samples/dynamic-element-string/input.svelte
@@ -0,0 +1,2 @@
+<svelte:element this="div"></svelte:element>
+<svelte:element this="div" class="foo"></svelte:element>
\ No newline at end of file
diff --git a/test/parser/samples/dynamic-element-string/output.json b/test/parser/samples/dynamic-element-string/output.json
new file mode 100644
index 0000000000..9e9245b1ae
--- /dev/null
+++ b/test/parser/samples/dynamic-element-string/output.json
@@ -0,0 +1,50 @@
+{
+	"html": {
+		"start": 0,
+		"end": 101,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 44,
+				"type": "Element",
+				"name": "svelte:element",
+				"attributes": [],
+				"children": [],
+				"tag": "div"
+			},
+			{
+				"type": "Text",
+				"start": 44,
+				"end": 45,
+				"data": "\n",
+				"raw": "\n"
+			},
+			{
+				"start": 45,
+				"end": 101,
+				"type": "Element",
+				"name": "svelte:element",
+				"attributes": [
+					{
+						"type": "Attribute",
+						"start": 72,
+						"end": 83,
+						"name": "class",
+						"value": [
+							{
+								"type": "Text",
+								"start": 79,
+								"end": 82,
+								"data": "foo",
+								"raw": "foo"
+							}
+						]
+					}
+				],
+				"children": [],
+				"tag": "div"
+			}
+		]
+	}
+}
diff --git a/test/parser/samples/dynamic-element-variable/input.svelte b/test/parser/samples/dynamic-element-variable/input.svelte
new file mode 100644
index 0000000000..229696d37b
--- /dev/null
+++ b/test/parser/samples/dynamic-element-variable/input.svelte
@@ -0,0 +1,2 @@
+<svelte:element this={tag}></svelte:element>
+<svelte:element this={tag} class="foo"></svelte:element>
\ No newline at end of file
diff --git a/test/parser/samples/dynamic-element-variable/output.json b/test/parser/samples/dynamic-element-variable/output.json
new file mode 100644
index 0000000000..53769e94e3
--- /dev/null
+++ b/test/parser/samples/dynamic-element-variable/output.json
@@ -0,0 +1,80 @@
+{
+	"html": {
+		"start": 0,
+		"end": 101,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 44,
+				"type": "Element",
+				"name": "svelte:element",
+				"attributes": [],
+				"children": [],
+				"tag": {
+					"start": 22,
+					"end": 25,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 22
+						},
+						"end": {
+							"line": 1,
+							"column": 25
+						}
+					},
+					"name": "tag",
+					"type": "Identifier"
+				}
+			},
+			{
+				"type": "Text",
+				"start": 44,
+				"end": 45,
+				"data": "\n",
+				"raw": "\n"
+			},
+			{
+				"start": 45,
+				"end": 101,
+				"type": "Element",
+				"name": "svelte:element",
+				"children": [],
+				"attributes": [
+					{
+						"type": "Attribute",
+						"start": 72,
+						"end": 83,
+						"name": "class",
+						"value": [
+							{
+								"type": "Text",
+								"start": 79,
+								"end": 82,
+								"data": "foo",
+								"raw": "foo"
+							}
+						]
+					}
+				],
+				"tag": {
+					"start": 67,
+					"end": 70,
+					"loc": {
+						"start": {
+							"line": 2,
+							"column": 22
+						},
+						"end": {
+							"line": 2,
+							"column": 25
+						}
+					},
+					"name": "tag",
+					"type": "Identifier"
+				}
+			}
+		]
+	}
+}
diff --git a/test/parser/samples/dynamic-import/input.svelte b/test/parser/samples/dynamic-import/input.svelte
new file mode 100644
index 0000000000..5c29afe2fa
--- /dev/null
+++ b/test/parser/samples/dynamic-import/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		import('./foo.js').then(foo => {
+			console.log(foo.default);
+		});
+	});
+</script>
\ No newline at end of file
diff --git a/test/parser/samples/dynamic-import/output.json b/test/parser/samples/dynamic-import/output.json
new file mode 100644
index 0000000000..ed3d58782d
--- /dev/null
+++ b/test/parser/samples/dynamic-import/output.json
@@ -0,0 +1,482 @@
+{
+	"html": {
+		"start": null,
+		"end": null,
+		"type": "Fragment",
+		"children": []
+	},
+	"instance": {
+		"type": "Script",
+		"start": 0,
+		"end": 146,
+		"context": "default",
+		"content": {
+			"type": "Program",
+			"start": 8,
+			"end": 137,
+			"loc": {
+				"start": {
+					"line": 1,
+					"column": 0
+				},
+				"end": {
+					"line": 9,
+					"column": 0
+				}
+			},
+			"body": [
+				{
+					"type": "ImportDeclaration",
+					"start": 10,
+					"end": 43,
+					"loc": {
+						"start": {
+							"line": 2,
+							"column": 1
+						},
+						"end": {
+							"line": 2,
+							"column": 34
+						}
+					},
+					"specifiers": [
+						{
+							"type": "ImportSpecifier",
+							"start": 19,
+							"end": 26,
+							"loc": {
+								"start": {
+									"line": 2,
+									"column": 10
+								},
+								"end": {
+									"line": 2,
+									"column": 17
+								}
+							},
+							"imported": {
+								"type": "Identifier",
+								"start": 19,
+								"end": 26,
+								"loc": {
+									"start": {
+										"line": 2,
+										"column": 10
+									},
+									"end": {
+										"line": 2,
+										"column": 17
+									}
+								},
+								"name": "onMount"
+							},
+							"local": {
+								"type": "Identifier",
+								"start": 19,
+								"end": 26,
+								"loc": {
+									"start": {
+										"line": 2,
+										"column": 10
+									},
+									"end": {
+										"line": 2,
+										"column": 17
+									}
+								},
+								"name": "onMount"
+							}
+						}
+					],
+					"source": {
+						"type": "Literal",
+						"start": 34,
+						"end": 42,
+						"loc": {
+							"start": {
+								"line": 2,
+								"column": 25
+							},
+							"end": {
+								"line": 2,
+								"column": 33
+							}
+						},
+						"value": "svelte",
+						"raw": "'svelte'"
+					}
+				},
+				{
+					"type": "ExpressionStatement",
+					"start": 46,
+					"end": 136,
+					"loc": {
+						"start": {
+							"line": 4,
+							"column": 1
+						},
+						"end": {
+							"line": 8,
+							"column": 4
+						}
+					},
+					"expression": {
+						"type": "CallExpression",
+						"start": 46,
+						"end": 135,
+						"loc": {
+							"start": {
+								"line": 4,
+								"column": 1
+							},
+							"end": {
+								"line": 8,
+								"column": 3
+							}
+						},
+						"callee": {
+							"type": "Identifier",
+							"start": 46,
+							"end": 53,
+							"loc": {
+								"start": {
+									"line": 4,
+									"column": 1
+								},
+								"end": {
+									"line": 4,
+									"column": 8
+								}
+							},
+							"name": "onMount"
+						},
+						"arguments": [
+							{
+								"type": "ArrowFunctionExpression",
+								"start": 54,
+								"end": 134,
+								"loc": {
+									"start": {
+										"line": 4,
+										"column": 9
+									},
+									"end": {
+										"line": 8,
+										"column": 2
+									}
+								},
+								"id": null,
+								"expression": false,
+								"generator": false,
+								"async": false,
+								"params": [],
+								"body": {
+									"type": "BlockStatement",
+									"start": 60,
+									"end": 134,
+									"loc": {
+										"start": {
+											"line": 4,
+											"column": 15
+										},
+										"end": {
+											"line": 8,
+											"column": 2
+										}
+									},
+									"body": [
+										{
+											"type": "ExpressionStatement",
+											"start": 64,
+											"end": 131,
+											"loc": {
+												"start": {
+													"line": 5,
+													"column": 2
+												},
+												"end": {
+													"line": 7,
+													"column": 5
+												}
+											},
+											"expression": {
+												"type": "CallExpression",
+												"start": 64,
+												"end": 130,
+												"loc": {
+													"start": {
+														"line": 5,
+														"column": 2
+													},
+													"end": {
+														"line": 7,
+														"column": 4
+													}
+												},
+												"callee": {
+													"type": "MemberExpression",
+													"start": 64,
+													"end": 87,
+													"loc": {
+														"start": {
+															"line": 5,
+															"column": 2
+														},
+														"end": {
+															"line": 5,
+															"column": 25
+														}
+													},
+													"object": {
+														"type": "ImportExpression",
+														"start": 64,
+														"end": 82,
+														"loc": {
+															"start": {
+																"line": 5,
+																"column": 2
+															},
+															"end": {
+																"line": 5,
+																"column": 20
+															}
+														},
+														"source": {
+															"type": "Literal",
+															"start": 71,
+															"end": 81,
+															"loc": {
+																"start": {
+																	"line": 5,
+																	"column": 9
+																},
+																"end": {
+																	"line": 5,
+																	"column": 19
+																}
+															},
+															"value": "./foo.js",
+															"raw": "'./foo.js'"
+														}
+													},
+													"property": {
+														"type": "Identifier",
+														"start": 83,
+														"end": 87,
+														"loc": {
+															"start": {
+																"line": 5,
+																"column": 21
+															},
+															"end": {
+																"line": 5,
+																"column": 25
+															}
+														},
+														"name": "then"
+													},
+													"computed": false,
+													"optional": false
+												},
+												"arguments": [
+													{
+														"type": "ArrowFunctionExpression",
+														"start": 88,
+														"end": 129,
+														"loc": {
+															"start": {
+																"line": 5,
+																"column": 26
+															},
+															"end": {
+																"line": 7,
+																"column": 3
+															}
+														},
+														"id": null,
+														"expression": false,
+														"generator": false,
+														"async": false,
+														"params": [
+															{
+																"type": "Identifier",
+																"start": 88,
+																"end": 91,
+																"loc": {
+																	"start": {
+																		"line": 5,
+																		"column": 26
+																	},
+																	"end": {
+																		"line": 5,
+																		"column": 29
+																	}
+																},
+																"name": "foo"
+															}
+														],
+														"body": {
+															"type": "BlockStatement",
+															"start": 95,
+															"end": 129,
+															"loc": {
+																"start": {
+																	"line": 5,
+																	"column": 33
+																},
+																"end": {
+																	"line": 7,
+																	"column": 3
+																}
+															},
+															"body": [
+																{
+																	"type": "ExpressionStatement",
+																	"start": 100,
+																	"end": 125,
+																	"loc": {
+																		"start": {
+																			"line": 6,
+																			"column": 3
+																		},
+																		"end": {
+																			"line": 6,
+																			"column": 28
+																		}
+																	},
+																	"expression": {
+																		"type": "CallExpression",
+																		"start": 100,
+																		"end": 124,
+																		"loc": {
+																			"start": {
+																				"line": 6,
+																				"column": 3
+																			},
+																			"end": {
+																				"line": 6,
+																				"column": 27
+																			}
+																		},
+																		"callee": {
+																			"type": "MemberExpression",
+																			"start": 100,
+																			"end": 111,
+																			"loc": {
+																				"start": {
+																					"line": 6,
+																					"column": 3
+																				},
+																				"end": {
+																					"line": 6,
+																					"column": 14
+																				}
+																			},
+																			"object": {
+																				"type": "Identifier",
+																				"start": 100,
+																				"end": 107,
+																				"loc": {
+																					"start": {
+																						"line": 6,
+																						"column": 3
+																					},
+																					"end": {
+																						"line": 6,
+																						"column": 10
+																					}
+																				},
+																				"name": "console"
+																			},
+																			"property": {
+																				"type": "Identifier",
+																				"start": 108,
+																				"end": 111,
+																				"loc": {
+																					"start": {
+																						"line": 6,
+																						"column": 11
+																					},
+																					"end": {
+																						"line": 6,
+																						"column": 14
+																					}
+																				},
+																				"name": "log"
+																			},
+																			"computed": false,
+																			"optional": false
+																		},
+																		"arguments": [
+																			{
+																				"type": "MemberExpression",
+																				"start": 112,
+																				"end": 123,
+																				"loc": {
+																					"start": {
+																						"line": 6,
+																						"column": 15
+																					},
+																					"end": {
+																						"line": 6,
+																						"column": 26
+																					}
+																				},
+																				"object": {
+																					"type": "Identifier",
+																					"start": 112,
+																					"end": 115,
+																					"loc": {
+																						"start": {
+																							"line": 6,
+																							"column": 15
+																						},
+																						"end": {
+																							"line": 6,
+																							"column": 18
+																						}
+																					},
+																					"name": "foo"
+																				},
+																				"property": {
+																					"type": "Identifier",
+																					"start": 116,
+																					"end": 123,
+																					"loc": {
+																						"start": {
+																							"line": 6,
+																							"column": 19
+																						},
+																						"end": {
+																							"line": 6,
+																							"column": 26
+																						}
+																					},
+																					"name": "default"
+																				},
+																				"computed": false,
+																				"optional": false
+																			}
+																		],
+																		"optional": false
+																	}
+																}
+															]
+														}
+													}
+												],
+												"optional": false
+											}
+										}
+									]
+								}
+							}
+						],
+						"optional": false
+					}
+				}
+			],
+			"sourceType": "module"
+		}
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/each-block-destructured/input.svelte b/test/parser/samples/each-block-destructured/input.svelte
new file mode 100644
index 0000000000..5313050fa0
--- /dev/null
+++ b/test/parser/samples/each-block-destructured/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let animals;
+</script>
+
+{#each animals as [key, value, ...rest]}
+	<p>{key}: {value}</p>
+{/each}
diff --git a/test/parser/samples/each-block-destructured/output.json b/test/parser/samples/each-block-destructured/output.json
new file mode 100644
index 0000000000..69e165c0a4
--- /dev/null
+++ b/test/parser/samples/each-block-destructured/output.json
@@ -0,0 +1,268 @@
+{
+	"html": {
+		"start": 41,
+		"end": 112,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 39,
+				"end": 41,
+				"type": "Text",
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"start": 41,
+				"end": 112,
+				"type": "EachBlock",
+				"expression": {
+					"type": "Identifier",
+					"start": 48,
+					"end": 55,
+					"loc": {
+						"start": {
+							"line": 5,
+							"column": 7
+						},
+						"end": {
+							"line": 5,
+							"column": 14
+						}
+					},
+					"name": "animals"
+				},
+				"children": [
+					{
+						"start": 83,
+						"end": 104,
+						"type": "Element",
+						"name": "p",
+						"attributes": [],
+						"children": [
+							{
+								"start": 86,
+								"end": 91,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Identifier",
+									"start": 87,
+									"end": 90,
+									"loc": {
+										"start": {
+											"line": 6,
+											"column": 5
+										},
+										"end": {
+											"line": 6,
+											"column": 8
+										}
+									},
+									"name": "key"
+								}
+							},
+							{
+								"start": 91,
+								"end": 93,
+								"type": "Text",
+								"raw": ": ",
+								"data": ": "
+							},
+							{
+								"start": 93,
+								"end": 100,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Identifier",
+									"start": 94,
+									"end": 99,
+									"loc": {
+										"start": {
+											"line": 6,
+											"column": 12
+										},
+										"end": {
+											"line": 6,
+											"column": 17
+										}
+									},
+									"name": "value"
+								}
+							}
+						]
+					}
+				],
+				"context": {
+					"type": "ArrayPattern",
+					"start": 59,
+					"end": 80,
+					"loc": {
+						"start": {
+							"line": 5,
+							"column": 19
+						},
+						"end": {
+							"line": 5,
+							"column": 40
+						}
+					},
+					"elements": [
+						{
+							"type": "Identifier",
+							"start": 60,
+							"end": 63,
+							"loc": {
+								"start": {
+									"line": 5,
+									"column": 20
+								},
+								"end": {
+									"line": 5,
+									"column": 23
+								}
+							},
+							"name": "key"
+						},
+						{
+							"type": "Identifier",
+							"start": 65,
+							"end": 70,
+							"loc": {
+								"start": {
+									"line": 5,
+									"column": 25
+								},
+								"end": {
+									"line": 5,
+									"column": 30
+								}
+							},
+							"name": "value"
+						},
+						{
+							"type": "RestElement",
+							"start": 72,
+							"end": 79,
+							"loc": {
+								"start": {
+									"line": 5,
+									"column": 32
+								},
+								"end": {
+									"line": 5,
+									"column": 39
+								}
+							},
+							"argument": {
+								"type": "Identifier",
+								"start": 75,
+								"end": 79,
+								"loc": {
+									"start": {
+										"line": 5,
+										"column": 35
+									},
+									"end": {
+										"line": 5,
+										"column": 39
+									}
+								},
+								"name": "rest"
+							}
+						}
+					]
+				}
+			}
+		]
+	},
+	"instance": {
+		"type": "Script",
+		"start": 0,
+		"end": 39,
+		"context": "default",
+		"content": {
+			"type": "Program",
+			"start": 8,
+			"end": 30,
+			"loc": {
+				"start": {
+					"line": 1,
+					"column": 0
+				},
+				"end": {
+					"line": 3,
+					"column": 0
+				}
+			},
+			"body": [
+				{
+					"type": "ExportNamedDeclaration",
+					"start": 10,
+					"end": 29,
+					"loc": {
+						"start": {
+							"line": 2,
+							"column": 1
+						},
+						"end": {
+							"line": 2,
+							"column": 20
+						}
+					},
+					"declaration": {
+						"type": "VariableDeclaration",
+						"start": 17,
+						"end": 29,
+						"loc": {
+							"start": {
+								"line": 2,
+								"column": 8
+							},
+							"end": {
+								"line": 2,
+								"column": 20
+							}
+						},
+						"declarations": [
+							{
+								"type": "VariableDeclarator",
+								"start": 21,
+								"end": 28,
+								"loc": {
+									"start": {
+										"line": 2,
+										"column": 12
+									},
+									"end": {
+										"line": 2,
+										"column": 19
+									}
+								},
+								"id": {
+									"type": "Identifier",
+									"start": 21,
+									"end": 28,
+									"loc": {
+										"start": {
+											"line": 2,
+											"column": 12
+										},
+										"end": {
+											"line": 2,
+											"column": 19
+										}
+									},
+									"name": "animals"
+								},
+								"init": null
+							}
+						],
+						"kind": "let"
+					},
+					"specifiers": [],
+					"source": null
+				}
+			],
+			"sourceType": "module"
+		}
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/each-block-else/input.svelte b/test/parser/samples/each-block-else/input.svelte
new file mode 100644
index 0000000000..dc96d8b946
--- /dev/null
+++ b/test/parser/samples/each-block-else/input.svelte
@@ -0,0 +1,5 @@
+{#each animals as animal}
+	<p>{animal}</p>
+{:else}
+	<p>no animals</p>
+{/each}
diff --git a/test/parser/samples/each-block-else/output.json b/test/parser/samples/each-block-else/output.json
new file mode 100644
index 0000000000..622789d177
--- /dev/null
+++ b/test/parser/samples/each-block-else/output.json
@@ -0,0 +1,91 @@
+{
+	"html": {
+		"start": 0,
+		"end": 77,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 77,
+				"type": "EachBlock",
+				"expression": {
+					"type": "Identifier",
+					"start": 7,
+					"end": 14,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 7
+						},
+						"end": {
+							"line": 1,
+							"column": 14
+						}
+					},
+					"name": "animals"
+				},
+				"children": [
+					{
+						"start": 27,
+						"end": 42,
+						"type": "Element",
+						"name": "p",
+						"attributes": [],
+						"children": [
+							{
+								"start": 30,
+								"end": 38,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Identifier",
+									"start": 31,
+									"end": 37,
+									"loc": {
+										"start": {
+											"line": 2,
+											"column": 5
+										},
+										"end": {
+											"line": 2,
+											"column": 11
+										}
+									},
+									"name": "animal"
+								}
+							}
+						]
+					}
+				],
+				"context": {
+					"type": "Identifier",
+					"name": "animal",
+					"start": 18,
+					"end": 24
+				},
+				"else": {
+					"start": 50,
+					"end": 70,
+					"type": "ElseBlock",
+					"children": [
+						{
+							"start": 52,
+							"end": 69,
+							"type": "Element",
+							"name": "p",
+							"attributes": [],
+							"children": [
+								{
+									"start": 55,
+									"end": 65,
+									"type": "Text",
+									"raw": "no animals",
+									"data": "no animals"
+								}
+							]
+						}
+					]
+				}
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/each-block-indexed/input.svelte b/test/parser/samples/each-block-indexed/input.svelte
new file mode 100644
index 0000000000..d5602ec82c
--- /dev/null
+++ b/test/parser/samples/each-block-indexed/input.svelte
@@ -0,0 +1,3 @@
+{#each animals as animal, i}
+	<p>{i}: {animal}</p>
+{/each}
diff --git a/test/parser/samples/each-block-indexed/output.json b/test/parser/samples/each-block-indexed/output.json
new file mode 100644
index 0000000000..01b97ffcb4
--- /dev/null
+++ b/test/parser/samples/each-block-indexed/output.json
@@ -0,0 +1,97 @@
+{
+	"html": {
+		"start": 0,
+		"end": 58,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 58,
+				"type": "EachBlock",
+				"expression": {
+					"type": "Identifier",
+					"start": 7,
+					"end": 14,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 7
+						},
+						"end": {
+							"line": 1,
+							"column": 14
+						}
+					},
+					"name": "animals"
+				},
+				"children": [
+					{
+						"start": 30,
+						"end": 50,
+						"type": "Element",
+						"name": "p",
+						"attributes": [],
+						"children": [
+							{
+								"start": 33,
+								"end": 36,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Identifier",
+									"start": 34,
+									"end": 35,
+									"loc": {
+										"start": {
+											"line": 2,
+											"column": 5
+										},
+										"end": {
+											"line": 2,
+											"column": 6
+										}
+									},
+									"name": "i"
+								}
+							},
+							{
+								"start": 36,
+								"end": 38,
+								"type": "Text",
+								"raw": ": ",
+								"data": ": "
+							},
+							{
+								"start": 38,
+								"end": 46,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Identifier",
+									"start": 39,
+									"end": 45,
+									"loc": {
+										"start": {
+											"line": 2,
+											"column": 10
+										},
+										"end": {
+											"line": 2,
+											"column": 16
+										}
+									},
+									"name": "animal"
+								}
+							}
+						]
+					}
+				],
+				"context": {
+					"type": "Identifier",
+					"name": "animal",
+					"start": 18,
+					"end": 24
+				},
+				"index": "i"
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/each-block-keyed/input.svelte b/test/parser/samples/each-block-keyed/input.svelte
new file mode 100644
index 0000000000..46348678d4
--- /dev/null
+++ b/test/parser/samples/each-block-keyed/input.svelte
@@ -0,0 +1,3 @@
+{#each todos as todo (todo.id)}
+	<p>{todo}</p>
+{/each}
diff --git a/test/parser/samples/each-block-keyed/output.json b/test/parser/samples/each-block-keyed/output.json
new file mode 100644
index 0000000000..6eaf19a82d
--- /dev/null
+++ b/test/parser/samples/each-block-keyed/output.json
@@ -0,0 +1,117 @@
+{
+	"html": {
+		"start": 0,
+		"end": 54,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 54,
+				"type": "EachBlock",
+				"expression": {
+					"type": "Identifier",
+					"start": 7,
+					"end": 12,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 7
+						},
+						"end": {
+							"line": 1,
+							"column": 12
+						}
+					},
+					"name": "todos"
+				},
+				"children": [
+					{
+						"start": 33,
+						"end": 46,
+						"type": "Element",
+						"name": "p",
+						"attributes": [],
+						"children": [
+							{
+								"start": 36,
+								"end": 42,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Identifier",
+									"start": 37,
+									"end": 41,
+									"loc": {
+										"start": {
+											"line": 2,
+											"column": 5
+										},
+										"end": {
+											"line": 2,
+											"column": 9
+										}
+									},
+									"name": "todo"
+								}
+							}
+						]
+					}
+				],
+				"context": {
+					"type": "Identifier",
+					"name": "todo",
+					"start": 16,
+					"end": 20
+				},
+				"key": {
+					"type": "MemberExpression",
+					"start": 22,
+					"end": 29,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 22
+						},
+						"end": {
+							"line": 1,
+							"column": 29
+						}
+					},
+					"object": {
+						"type": "Identifier",
+						"start": 22,
+						"end": 26,
+						"loc": {
+							"start": {
+								"line": 1,
+								"column": 22
+							},
+							"end": {
+								"line": 1,
+								"column": 26
+							}
+						},
+						"name": "todo"
+					},
+					"property": {
+						"type": "Identifier",
+						"start": 27,
+						"end": 29,
+						"loc": {
+							"start": {
+								"line": 1,
+								"column": 27
+							},
+							"end": {
+								"line": 1,
+								"column": 29
+							}
+						},
+						"name": "id"
+					},
+					"computed": false,
+					"optional": false
+				}
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/each-block/input.svelte b/test/parser/samples/each-block/input.svelte
new file mode 100644
index 0000000000..83a5e88ddd
--- /dev/null
+++ b/test/parser/samples/each-block/input.svelte
@@ -0,0 +1,3 @@
+{#each animals as animal}
+	<p>{animal}</p>
+{/each}
diff --git a/test/parser/samples/each-block/output.json b/test/parser/samples/each-block/output.json
new file mode 100644
index 0000000000..82d4455d19
--- /dev/null
+++ b/test/parser/samples/each-block/output.json
@@ -0,0 +1,68 @@
+{
+	"html": {
+		"start": 0,
+		"end": 50,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 50,
+				"type": "EachBlock",
+				"expression": {
+					"type": "Identifier",
+					"start": 7,
+					"end": 14,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 7
+						},
+						"end": {
+							"line": 1,
+							"column": 14
+						}
+					},
+					"name": "animals"
+				},
+				"children": [
+					{
+						"start": 27,
+						"end": 42,
+						"type": "Element",
+						"name": "p",
+						"attributes": [],
+						"children": [
+							{
+								"start": 30,
+								"end": 38,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Identifier",
+									"start": 31,
+									"end": 37,
+									"loc": {
+										"start": {
+											"line": 2,
+											"column": 5
+										},
+										"end": {
+											"line": 2,
+											"column": 11
+										}
+									},
+									"name": "animal"
+								}
+							}
+						]
+					}
+				],
+				"context": {
+					"type": "Identifier",
+					"name": "animal",
+					"start": 18,
+					"end": 24
+				}
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/element-with-attribute-empty-string/input.svelte b/test/parser/samples/element-with-attribute-empty-string/input.svelte
new file mode 100644
index 0000000000..685c0995d5
--- /dev/null
+++ b/test/parser/samples/element-with-attribute-empty-string/input.svelte
@@ -0,0 +1,2 @@
+<span attr=""></span>
+<span attr=''></span>
diff --git a/test/parser/samples/element-with-attribute-empty-string/output.json b/test/parser/samples/element-with-attribute-empty-string/output.json
new file mode 100644
index 0000000000..8e8768eb62
--- /dev/null
+++ b/test/parser/samples/element-with-attribute-empty-string/output.json
@@ -0,0 +1,64 @@
+{
+	"html": {
+		"start": 0,
+		"end": 43,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 21,
+				"type": "Element",
+				"name": "span",
+				"attributes": [
+					{
+						"start": 6,
+						"end": 13,
+						"type": "Attribute",
+						"name": "attr",
+						"value": [
+							{
+								"start": 12,
+								"end": 12,
+								"type": "Text",
+								"raw": "",
+								"data": ""
+							}
+						]
+					}
+				],
+				"children": []
+			},
+			{
+				"start": 21,
+				"end": 22,
+				"type": "Text",
+				"raw": "\n",
+				"data": "\n"
+			},
+			{
+				"start": 22,
+				"end": 43,
+				"type": "Element",
+				"name": "span",
+				"attributes": [
+					{
+						"start": 28,
+						"end": 35,
+						"type": "Attribute",
+						"name": "attr",
+						"value": [
+							{
+								"start": 34,
+								"end": 34,
+								"type": "Text",
+								"raw": "",
+								"data": ""
+							}
+						]
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
diff --git a/test/parser/samples/element-with-attribute/input.svelte b/test/parser/samples/element-with-attribute/input.svelte
new file mode 100644
index 0000000000..f564fd0541
--- /dev/null
+++ b/test/parser/samples/element-with-attribute/input.svelte
@@ -0,0 +1,2 @@
+<span attr="foo"></span>
+<span attr='bar'></span>
diff --git a/test/parser/samples/element-with-attribute/output.json b/test/parser/samples/element-with-attribute/output.json
new file mode 100644
index 0000000000..a80344101e
--- /dev/null
+++ b/test/parser/samples/element-with-attribute/output.json
@@ -0,0 +1,64 @@
+{
+	"html": {
+		"start": 0,
+		"end": 49,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 24,
+				"type": "Element",
+				"name": "span",
+				"attributes": [
+					{
+						"start": 6,
+						"end": 16,
+						"type": "Attribute",
+						"name": "attr",
+						"value": [
+							{
+								"start": 12,
+								"end": 15,
+								"type": "Text",
+								"raw": "foo",
+								"data": "foo"
+							}
+						]
+					}
+				],
+				"children": []
+			},
+			{
+				"start": 24,
+				"end": 25,
+				"type": "Text",
+				"raw": "\n",
+				"data": "\n"
+			},
+			{
+				"start": 25,
+				"end": 49,
+				"type": "Element",
+				"name": "span",
+				"attributes": [
+					{
+						"start": 31,
+						"end": 41,
+						"type": "Attribute",
+						"name": "attr",
+						"value": [
+							{
+								"start": 37,
+								"end": 40,
+								"type": "Text",
+								"raw": "bar",
+								"data": "bar"
+							}
+						]
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
diff --git a/test/parser/samples/element-with-mustache/input.svelte b/test/parser/samples/element-with-mustache/input.svelte
new file mode 100644
index 0000000000..1e9232da02
--- /dev/null
+++ b/test/parser/samples/element-with-mustache/input.svelte
@@ -0,0 +1 @@
+<h1>hello {name}!</h1>
diff --git a/test/parser/samples/element-with-mustache/output.json b/test/parser/samples/element-with-mustache/output.json
new file mode 100644
index 0000000000..049e373100
--- /dev/null
+++ b/test/parser/samples/element-with-mustache/output.json
@@ -0,0 +1,53 @@
+{
+	"html": {
+		"start": 0,
+		"end": 22,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 22,
+				"type": "Element",
+				"name": "h1",
+				"attributes": [],
+				"children": [
+					{
+						"start": 4,
+						"end": 10,
+						"type": "Text",
+						"raw": "hello ",
+						"data": "hello "
+					},
+					{
+						"start": 10,
+						"end": 16,
+						"type": "MustacheTag",
+						"expression": {
+							"type": "Identifier",
+							"start": 11,
+							"end": 15,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 11
+								},
+								"end": {
+									"line": 1,
+									"column": 15
+								}
+							},
+							"name": "name"
+						}
+					},
+					{
+						"start": 16,
+						"end": 17,
+						"type": "Text",
+						"raw": "!",
+						"data": "!"
+					}
+				]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/element-with-text/input.svelte b/test/parser/samples/element-with-text/input.svelte
new file mode 100644
index 0000000000..fcf3199655
--- /dev/null
+++ b/test/parser/samples/element-with-text/input.svelte
@@ -0,0 +1 @@
+<span>test</span>
\ No newline at end of file
diff --git a/test/parser/samples/element-with-text/output.json b/test/parser/samples/element-with-text/output.json
new file mode 100644
index 0000000000..b0e0f5c6cc
--- /dev/null
+++ b/test/parser/samples/element-with-text/output.json
@@ -0,0 +1,25 @@
+{
+	"html": {
+		"start": 0,
+		"end": 17,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 17,
+				"type": "Element",
+				"name": "span",
+				"attributes": [],
+				"children": [
+					{
+						"start": 6,
+						"end": 10,
+						"type": "Text",
+						"raw": "test",
+						"data": "test"
+					}
+				]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/elements/input.svelte b/test/parser/samples/elements/input.svelte
new file mode 100644
index 0000000000..937d25b42e
--- /dev/null
+++ b/test/parser/samples/elements/input.svelte
@@ -0,0 +1 @@
+<!doctype html>
\ No newline at end of file
diff --git a/test/parser/samples/elements/output.json b/test/parser/samples/elements/output.json
new file mode 100644
index 0000000000..75548c20f0
--- /dev/null
+++ b/test/parser/samples/elements/output.json
@@ -0,0 +1,25 @@
+{
+	"html": {
+		"start": 0,
+		"end": 15,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 15,
+				"type": "Element",
+				"name": "!doctype",
+				"attributes": [
+					{
+						"start": 10,
+						"end": 14,
+						"type": "Attribute",
+						"name": "html",
+						"value": true
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/error-catch-before-closing/error.json b/test/parser/samples/error-catch-before-closing/error.json
new file mode 100644
index 0000000000..30fbf5fbd5
--- /dev/null
+++ b/test/parser/samples/error-catch-before-closing/error.json
@@ -0,0 +1,6 @@
+{
+	"code": "invalid-catch-placement",
+	"message": "Expected to close {#each} block before seeing {:catch} block",
+	"start": { "line": 3, "column": 7, "character": 41 },
+	"pos": 41
+}
diff --git a/test/parser/samples/error-catch-before-closing/input.svelte b/test/parser/samples/error-catch-before-closing/input.svelte
new file mode 100644
index 0000000000..bd771701e2
--- /dev/null
+++ b/test/parser/samples/error-catch-before-closing/input.svelte
@@ -0,0 +1,4 @@
+{#await true}
+	{#each foo as bar}
+{:catch f}
+{/await}
\ No newline at end of file
diff --git a/test/parser/samples/error-catch-without-await/error.json b/test/parser/samples/error-catch-without-await/error.json
new file mode 100644
index 0000000000..86cf64a673
--- /dev/null
+++ b/test/parser/samples/error-catch-without-await/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "invalid-catch-placement",
+	"message": "Cannot have an {:catch} block outside an {#await ...} block",
+	"start": {
+		"line": 1,
+		"column": 7,
+		"character": 7
+	},
+	"pos": 7
+}
diff --git a/test/parser/samples/error-catch-without-await/input.svelte b/test/parser/samples/error-catch-without-await/input.svelte
new file mode 100644
index 0000000000..ee2fab68e0
--- /dev/null
+++ b/test/parser/samples/error-catch-without-await/input.svelte
@@ -0,0 +1 @@
+{:catch theValue}
diff --git a/test/parser/samples/error-comment-unclosed/error.json b/test/parser/samples/error-comment-unclosed/error.json
new file mode 100644
index 0000000000..95fa28c35a
--- /dev/null
+++ b/test/parser/samples/error-comment-unclosed/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "unclosed-comment",
+	"message": "comment was left open, expected -->",
+	"start": {
+		"line": 1,
+		"column": 24,
+		"character": 24
+	},
+	"pos": 24
+}
diff --git a/test/parser/samples/error-comment-unclosed/input.svelte b/test/parser/samples/error-comment-unclosed/input.svelte
new file mode 100644
index 0000000000..fe6d748e1b
--- /dev/null
+++ b/test/parser/samples/error-comment-unclosed/input.svelte
@@ -0,0 +1 @@
+<!-- an unclosed comment
\ No newline at end of file
diff --git a/test/parser/samples/error-css-global-without-selector/error.json b/test/parser/samples/error-css-global-without-selector/error.json
new file mode 100644
index 0000000000..f4237c65d3
--- /dev/null
+++ b/test/parser/samples/error-css-global-without-selector/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "css-syntax-error",
+	"message": ":global() must contain a selector",
+	"start": {
+		"line": 2,
+		"column": 1,
+		"character": 9
+	},
+	"pos": 9
+}
diff --git a/test/parser/samples/error-css-global-without-selector/input.svelte b/test/parser/samples/error-css-global-without-selector/input.svelte
new file mode 100644
index 0000000000..a626136cfc
--- /dev/null
+++ b/test/parser/samples/error-css-global-without-selector/input.svelte
@@ -0,0 +1,3 @@
+<style>
+	:global {}
+</style>
diff --git a/test/parser/samples/error-css/error.json b/test/parser/samples/error-css/error.json
new file mode 100644
index 0000000000..90f7a091d2
--- /dev/null
+++ b/test/parser/samples/error-css/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "css-syntax-error",
+	"message": "LeftCurlyBracket is expected",
+	"start": {
+		"line": 2,
+		"column": 16,
+		"character": 24
+	},
+	"pos": 24
+}
diff --git a/test/parser/samples/error-css/input.svelte b/test/parser/samples/error-css/input.svelte
new file mode 100644
index 0000000000..d073ec6258
--- /dev/null
+++ b/test/parser/samples/error-css/input.svelte
@@ -0,0 +1,3 @@
+<style>
+	this is not css
+</style>
\ No newline at end of file
diff --git a/test/parser/samples/error-else-before-closing-2/error.json b/test/parser/samples/error-else-before-closing-2/error.json
new file mode 100644
index 0000000000..d35be1abf5
--- /dev/null
+++ b/test/parser/samples/error-else-before-closing-2/error.json
@@ -0,0 +1,6 @@
+{
+	"code": "invalid-else-placement",
+	"message": "Expected to close {#await} block before seeing {:else} block",
+	"start": { "line": 3, "column": 6, "character": 29 },
+	"pos": 29
+}
diff --git a/test/parser/samples/error-else-before-closing-2/input.svelte b/test/parser/samples/error-else-before-closing-2/input.svelte
new file mode 100644
index 0000000000..f865a9a533
--- /dev/null
+++ b/test/parser/samples/error-else-before-closing-2/input.svelte
@@ -0,0 +1,4 @@
+{#if true}
+	{#await p}
+{:else}
+{/if}
\ No newline at end of file
diff --git a/test/parser/samples/error-else-before-closing-3/error.json b/test/parser/samples/error-else-before-closing-3/error.json
new file mode 100644
index 0000000000..e5ec210c75
--- /dev/null
+++ b/test/parser/samples/error-else-before-closing-3/error.json
@@ -0,0 +1,6 @@
+{
+	"code": "invalid-else-placement",
+	"message": "Cannot have an {:else} block outside an {#if ...} or {#each ...} block",
+	"start": { "line": 2, "column": 6, "character": 11 },
+	"pos": 11
+}
diff --git a/test/parser/samples/error-else-before-closing-3/input.svelte b/test/parser/samples/error-else-before-closing-3/input.svelte
new file mode 100644
index 0000000000..fb434f26a3
--- /dev/null
+++ b/test/parser/samples/error-else-before-closing-3/input.svelte
@@ -0,0 +1,2 @@
+<li>
+{:else}
\ No newline at end of file
diff --git a/test/parser/samples/error-else-before-closing/error.json b/test/parser/samples/error-else-before-closing/error.json
new file mode 100644
index 0000000000..5b6e490c0f
--- /dev/null
+++ b/test/parser/samples/error-else-before-closing/error.json
@@ -0,0 +1,6 @@
+{
+	"code": "invalid-else-placement",
+	"message": "Expected to close <li> tag before seeing {:else} block",
+	"start": { "line": 3, "column": 6, "character": 23 },
+	"pos": 23
+}
diff --git a/test/parser/samples/error-else-before-closing/input.svelte b/test/parser/samples/error-else-before-closing/input.svelte
new file mode 100644
index 0000000000..a22863192d
--- /dev/null
+++ b/test/parser/samples/error-else-before-closing/input.svelte
@@ -0,0 +1,4 @@
+{#if true}
+	<li>
+{:else}
+{/if}
\ No newline at end of file
diff --git a/test/parser/samples/error-else-if-before-closing-2/error.json b/test/parser/samples/error-else-if-before-closing-2/error.json
new file mode 100644
index 0000000000..e55f4f11e5
--- /dev/null
+++ b/test/parser/samples/error-else-if-before-closing-2/error.json
@@ -0,0 +1,6 @@
+{
+	"code": "invalid-elseif-placement",
+	"message": "Expected to close <p> tag before seeing {:else if ...} block",
+	"start": { "line": 3, "column": 9, "character": 25 },
+	"pos": 25
+}
diff --git a/test/parser/samples/error-else-if-before-closing-2/input.svelte b/test/parser/samples/error-else-if-before-closing-2/input.svelte
new file mode 100644
index 0000000000..5ae36df4eb
--- /dev/null
+++ b/test/parser/samples/error-else-if-before-closing-2/input.svelte
@@ -0,0 +1,4 @@
+{#if true}
+	<p>
+{:else if false}
+{/if}
\ No newline at end of file
diff --git a/test/parser/samples/error-else-if-before-closing/error.json b/test/parser/samples/error-else-if-before-closing/error.json
new file mode 100644
index 0000000000..21d16c72a4
--- /dev/null
+++ b/test/parser/samples/error-else-if-before-closing/error.json
@@ -0,0 +1,6 @@
+{
+	"code": "invalid-elseif-placement",
+	"message": "Expected to close {#await} block before seeing {:else if ...} block",
+	"start": { "line": 3, "column": 9, "character": 34 },
+	"pos": 34
+}
diff --git a/test/parser/samples/error-else-if-before-closing/input.svelte b/test/parser/samples/error-else-if-before-closing/input.svelte
new file mode 100644
index 0000000000..486a921a9a
--- /dev/null
+++ b/test/parser/samples/error-else-if-before-closing/input.svelte
@@ -0,0 +1,4 @@
+{#if true}
+	{#await foo}
+{:else if false}
+{/if}
\ No newline at end of file
diff --git a/test/parser/samples/error-else-if-without-if/error.json b/test/parser/samples/error-else-if-without-if/error.json
new file mode 100644
index 0000000000..dd69df6772
--- /dev/null
+++ b/test/parser/samples/error-else-if-without-if/error.json
@@ -0,0 +1,6 @@
+{
+	"code": "invalid-elseif-placement",
+	"message": "Cannot have an {:else if ...} block outside an {#if ...} block",
+	"start": { "line": 3, "column": 10, "character": 35 },
+	"pos": 35
+}
diff --git a/test/parser/samples/error-else-if-without-if/input.svelte b/test/parser/samples/error-else-if-without-if/input.svelte
new file mode 100644
index 0000000000..06baf33511
--- /dev/null
+++ b/test/parser/samples/error-else-if-without-if/input.svelte
@@ -0,0 +1,4 @@
+{#await foo}
+{:then bar}
+	{:else if}
+{/await}
\ No newline at end of file
diff --git a/test/parser/samples/error-empty-attribute-shorthand/error.json b/test/parser/samples/error-empty-attribute-shorthand/error.json
new file mode 100644
index 0000000000..f465b3468a
--- /dev/null
+++ b/test/parser/samples/error-empty-attribute-shorthand/error.json
@@ -0,0 +1,10 @@
+{
+    "code": "empty-attribute-shorthand",
+    "message": "Attribute shorthand cannot be empty",
+    "start": {
+        "line": 1,
+        "column": 6,
+        "character": 6
+    },
+    "pos": 6
+}
\ No newline at end of file
diff --git a/test/parser/samples/error-empty-attribute-shorthand/input.svelte b/test/parser/samples/error-empty-attribute-shorthand/input.svelte
new file mode 100644
index 0000000000..2e137c8c6d
--- /dev/null
+++ b/test/parser/samples/error-empty-attribute-shorthand/input.svelte
@@ -0,0 +1 @@
+<span {}></span>
\ No newline at end of file
diff --git a/test/parser/samples/error-empty-classname-binding/error.json b/test/parser/samples/error-empty-classname-binding/error.json
new file mode 100644
index 0000000000..6ece5ff373
--- /dev/null
+++ b/test/parser/samples/error-empty-classname-binding/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "empty-directive-name",
+	"message": "Class name cannot be empty",
+	"start": {
+		"line": 1,
+		"column": 10,
+		"character": 10
+	},
+	"pos": 10
+}
diff --git a/test/parser/samples/error-empty-classname-binding/input.svelte b/test/parser/samples/error-empty-classname-binding/input.svelte
new file mode 100644
index 0000000000..3a4e5980ee
--- /dev/null
+++ b/test/parser/samples/error-empty-classname-binding/input.svelte
@@ -0,0 +1 @@
+<h1 class:={true}>Hello</h1>
diff --git a/test/parser/samples/error-empty-directive-name/error.json b/test/parser/samples/error-empty-directive-name/error.json
new file mode 100644
index 0000000000..4fed0d8606
--- /dev/null
+++ b/test/parser/samples/error-empty-directive-name/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "empty-directive-name",
+	"message": "Action name cannot be empty",
+	"start": {
+		"line": 1,
+		"column": 8,
+		"character": 8
+	},
+	"pos": 8
+}
diff --git a/test/parser/samples/error-empty-directive-name/input.svelte b/test/parser/samples/error-empty-directive-name/input.svelte
new file mode 100644
index 0000000000..b07875f398
--- /dev/null
+++ b/test/parser/samples/error-empty-directive-name/input.svelte
@@ -0,0 +1 @@
+<h1 use:>Hello</h1>
diff --git a/test/parser/samples/error-illegal-expression/error.json b/test/parser/samples/error-illegal-expression/error.json
new file mode 100644
index 0000000000..d8b48a786e
--- /dev/null
+++ b/test/parser/samples/error-illegal-expression/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "parse-error",
+	"message": "Assigning to rvalue",
+	"start": {
+		"line": 1,
+		"column": 1,
+		"character": 1
+	},
+	"pos": 1
+}
diff --git a/test/parser/samples/error-illegal-expression/input.svelte b/test/parser/samples/error-illegal-expression/input.svelte
new file mode 100644
index 0000000000..2d1cf18d2a
--- /dev/null
+++ b/test/parser/samples/error-illegal-expression/input.svelte
@@ -0,0 +1 @@
+{42 = nope}
diff --git a/test/parser/samples/error-multiple-styles/error.json b/test/parser/samples/error-multiple-styles/error.json
new file mode 100644
index 0000000000..1c460c5bad
--- /dev/null
+++ b/test/parser/samples/error-multiple-styles/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "duplicate-style",
+	"message": "You can only have one top-level <style> tag per component",
+	"start": {
+		"line": 9,
+		"column": 0,
+		"character": 58
+	},
+	"pos": 58
+}
diff --git a/test/parser/samples/error-multiple-styles/input.svelte b/test/parser/samples/error-multiple-styles/input.svelte
new file mode 100644
index 0000000000..d86e7824ff
--- /dev/null
+++ b/test/parser/samples/error-multiple-styles/input.svelte
@@ -0,0 +1,13 @@
+<div>foo</div>
+
+<style>
+	div {
+		color: red;
+	}
+</style>
+
+<style>
+	div {
+		color: blue;
+	}
+</style>
\ No newline at end of file
diff --git a/test/parser/samples/error-script-unclosed-eof/error.json b/test/parser/samples/error-script-unclosed-eof/error.json
new file mode 100644
index 0000000000..277acd4196
--- /dev/null
+++ b/test/parser/samples/error-script-unclosed-eof/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "unclosed-script",
+	"message": "<script> must have a closing tag",
+	"start": {
+		"line": 3,
+		"column": 22,
+		"character": 32
+	},
+	"pos": 32
+}
\ No newline at end of file
diff --git a/test/parser/samples/error-script-unclosed-eof/input.svelte b/test/parser/samples/error-script-unclosed-eof/input.svelte
new file mode 100644
index 0000000000..ce79e99706
--- /dev/null
+++ b/test/parser/samples/error-script-unclosed-eof/input.svelte
@@ -0,0 +1,3 @@
+<script>
+
+<h1>Hello {name}!</h1>
\ No newline at end of file
diff --git a/test/parser/samples/error-script-unclosed/error.json b/test/parser/samples/error-script-unclosed/error.json
new file mode 100644
index 0000000000..d7bb9a8e37
--- /dev/null
+++ b/test/parser/samples/error-script-unclosed/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "unclosed-script",
+	"message": "<script> must have a closing tag",
+	"start": {
+		"line": 3,
+		"column": 8,
+		"character": 32
+	},
+	"pos": 32
+}
\ No newline at end of file
diff --git a/test/parser/samples/error-script-unclosed/input.svelte b/test/parser/samples/error-script-unclosed/input.svelte
new file mode 100644
index 0000000000..133b653ef9
--- /dev/null
+++ b/test/parser/samples/error-script-unclosed/input.svelte
@@ -0,0 +1,3 @@
+<h1>Hello {name}!</h1>
+
+<script>
\ No newline at end of file
diff --git a/test/parser/samples/error-self-reference/error.json b/test/parser/samples/error-self-reference/error.json
new file mode 100644
index 0000000000..31ecab2b12
--- /dev/null
+++ b/test/parser/samples/error-self-reference/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "invalid-self-placement",
+	"message": "<svelte:self> components can only exist inside {#if} blocks, {#each} blocks, or slots passed to components",
+	"start": {
+		"line": 1,
+		"column": 1,
+		"character": 1
+	},
+	"pos": 1
+}
\ No newline at end of file
diff --git a/test/parser/samples/error-self-reference/input.svelte b/test/parser/samples/error-self-reference/input.svelte
new file mode 100644
index 0000000000..51a4660590
--- /dev/null
+++ b/test/parser/samples/error-self-reference/input.svelte
@@ -0,0 +1 @@
+<svelte:self/>
\ No newline at end of file
diff --git a/test/parser/samples/error-style-unclosed-eof/error.json b/test/parser/samples/error-style-unclosed-eof/error.json
new file mode 100644
index 0000000000..28da4931bc
--- /dev/null
+++ b/test/parser/samples/error-style-unclosed-eof/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "unclosed-style",
+	"message": "<style> must have a closing tag",
+	"start": {
+		"line": 3,
+		"column": 22,
+		"character": 31
+	},
+	"pos": 31
+}
\ No newline at end of file
diff --git a/test/parser/samples/error-style-unclosed-eof/input.svelte b/test/parser/samples/error-style-unclosed-eof/input.svelte
new file mode 100644
index 0000000000..4c12744313
--- /dev/null
+++ b/test/parser/samples/error-style-unclosed-eof/input.svelte
@@ -0,0 +1,3 @@
+<style>
+
+<h1>Hello {name}!</h1>
\ No newline at end of file
diff --git a/test/parser/samples/error-style-unclosed/error.json b/test/parser/samples/error-style-unclosed/error.json
new file mode 100644
index 0000000000..02f32c273d
--- /dev/null
+++ b/test/parser/samples/error-style-unclosed/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "unclosed-style",
+	"message": "<style> must have a closing tag",
+	"start": {
+		"line": 3,
+		"column": 7,
+		"character": 31
+	},
+	"pos": 31
+}
\ No newline at end of file
diff --git a/test/parser/samples/error-style-unclosed/input.svelte b/test/parser/samples/error-style-unclosed/input.svelte
new file mode 100644
index 0000000000..a33bc1dfaf
--- /dev/null
+++ b/test/parser/samples/error-style-unclosed/input.svelte
@@ -0,0 +1,3 @@
+<h1>Hello {name}!</h1>
+
+<style>
\ No newline at end of file
diff --git a/test/parser/samples/error-svelte-selfdestructive/error.json b/test/parser/samples/error-svelte-selfdestructive/error.json
new file mode 100644
index 0000000000..68aa43dec9
--- /dev/null
+++ b/test/parser/samples/error-svelte-selfdestructive/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "invalid-tag-name",
+	"message": "Valid <svelte:...> tag names are svelte:head, svelte:options, svelte:window, svelte:body, svelte:self, svelte:component, svelte:fragment or svelte:element",
+	"pos": 10,
+	"start": {
+		"character": 10,
+		"line": 2,
+		"column": 2
+	}
+}
diff --git a/test/parser/samples/error-svelte-selfdestructive/input.svelte b/test/parser/samples/error-svelte-selfdestructive/input.svelte
new file mode 100644
index 0000000000..6bf1e83aa4
--- /dev/null
+++ b/test/parser/samples/error-svelte-selfdestructive/input.svelte
@@ -0,0 +1,3 @@
+{#if x}
+	<svelte:selfdestructive x="{x - 1}"/>
+{/if}
\ No newline at end of file
diff --git a/test/parser/samples/error-then-before-closing/error.json b/test/parser/samples/error-then-before-closing/error.json
new file mode 100644
index 0000000000..07310c93fa
--- /dev/null
+++ b/test/parser/samples/error-then-before-closing/error.json
@@ -0,0 +1,6 @@
+{
+	"code": "invalid-then-placement",
+	"message": "Expected to close <li> tag before seeing {:then} block",
+	"start": { "line": 3, "column": 6, "character": 26 },
+	"pos": 26
+}
diff --git a/test/parser/samples/error-then-before-closing/input.svelte b/test/parser/samples/error-then-before-closing/input.svelte
new file mode 100644
index 0000000000..bb0b993bdf
--- /dev/null
+++ b/test/parser/samples/error-then-before-closing/input.svelte
@@ -0,0 +1,4 @@
+{#await true}
+	<li>
+{:then f}
+{/await}
\ No newline at end of file
diff --git a/test/parser/samples/error-then-without-await/error.json b/test/parser/samples/error-then-without-await/error.json
new file mode 100644
index 0000000000..62d9cbc3c9
--- /dev/null
+++ b/test/parser/samples/error-then-without-await/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "invalid-then-placement",
+	"message": "Cannot have an {:then} block outside an {#await ...} block",
+	"start": {
+		"line": 1,
+		"column": 6,
+		"character": 6
+	},
+	"pos": 6
+}
diff --git a/test/parser/samples/error-then-without-await/input.svelte b/test/parser/samples/error-then-without-await/input.svelte
new file mode 100644
index 0000000000..4b7fb6c677
--- /dev/null
+++ b/test/parser/samples/error-then-without-await/input.svelte
@@ -0,0 +1 @@
+{:then theValue}
diff --git a/test/parser/samples/error-unclosed-attribute-self-close-tag/error.json b/test/parser/samples/error-unclosed-attribute-self-close-tag/error.json
new file mode 100644
index 0000000000..790b430913
--- /dev/null
+++ b/test/parser/samples/error-unclosed-attribute-self-close-tag/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "unclosed-attribute-value",
+	"message": "Expected to close the attribute value with }",
+	"pos": 25,
+	"start": {
+		"character": 25,
+		"column": 25,
+		"line": 1
+	}
+}
diff --git a/test/parser/samples/error-unclosed-attribute-self-close-tag/input.svelte b/test/parser/samples/error-unclosed-attribute-self-close-tag/input.svelte
new file mode 100644
index 0000000000..609b5532f4
--- /dev/null
+++ b/test/parser/samples/error-unclosed-attribute-self-close-tag/input.svelte
@@ -0,0 +1 @@
+<Component test={{a: 1} />
\ No newline at end of file
diff --git a/test/parser/samples/error-unexpected-end-of-input-b/error.json b/test/parser/samples/error-unexpected-end-of-input-b/error.json
new file mode 100644
index 0000000000..b37e83cf81
--- /dev/null
+++ b/test/parser/samples/error-unexpected-end-of-input-b/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "unexpected-eof",
+	"message": "Unexpected end of input",
+	"start": {
+		"line": 1,
+		"column": 2,
+		"character": 2
+	},
+	"pos": 2
+}
diff --git a/test/parser/samples/error-unexpected-end-of-input-b/input.svelte b/test/parser/samples/error-unexpected-end-of-input-b/input.svelte
new file mode 100644
index 0000000000..044e45f78b
--- /dev/null
+++ b/test/parser/samples/error-unexpected-end-of-input-b/input.svelte
@@ -0,0 +1 @@
+<d
\ No newline at end of file
diff --git a/test/parser/samples/error-unexpected-end-of-input-c/error.json b/test/parser/samples/error-unexpected-end-of-input-c/error.json
new file mode 100644
index 0000000000..0db949000a
--- /dev/null
+++ b/test/parser/samples/error-unexpected-end-of-input-c/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "unexpected-eof",
+	"message": "Unexpected end of input",
+	"start": {
+		"line": 1,
+		"column": 1,
+		"character": 1
+	},
+	"pos": 1
+}
diff --git a/test/parser/samples/error-unexpected-end-of-input-c/input.svelte b/test/parser/samples/error-unexpected-end-of-input-c/input.svelte
new file mode 100644
index 0000000000..c5fa78456d
--- /dev/null
+++ b/test/parser/samples/error-unexpected-end-of-input-c/input.svelte
@@ -0,0 +1 @@
+<
\ No newline at end of file
diff --git a/test/parser/samples/error-unexpected-end-of-input-d/error.json b/test/parser/samples/error-unexpected-end-of-input-d/error.json
new file mode 100644
index 0000000000..c17df47730
--- /dev/null
+++ b/test/parser/samples/error-unexpected-end-of-input-d/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "unclosed-block",
+	"message": "Block was left open",
+	"start": {
+		"line": 1,
+		"column": 0,
+		"character": 0
+	},
+	"pos": 0
+}
diff --git a/test/parser/samples/error-unexpected-end-of-input-d/input.svelte b/test/parser/samples/error-unexpected-end-of-input-d/input.svelte
new file mode 100644
index 0000000000..560d2a1984
--- /dev/null
+++ b/test/parser/samples/error-unexpected-end-of-input-d/input.svelte
@@ -0,0 +1,2 @@
+{#if foo}
+	<p>foo</p>
\ No newline at end of file
diff --git a/test/parser/samples/error-unexpected-end-of-input/error.json b/test/parser/samples/error-unexpected-end-of-input/error.json
new file mode 100644
index 0000000000..4f45973b76
--- /dev/null
+++ b/test/parser/samples/error-unexpected-end-of-input/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "unclosed-element",
+	"message": "<div> was left open",
+	"start": {
+		"line": 1,
+		"column": 0,
+		"character": 0
+	},
+	"pos": 0
+}
diff --git a/test/parser/samples/error-unexpected-end-of-input/input.svelte b/test/parser/samples/error-unexpected-end-of-input/input.svelte
new file mode 100644
index 0000000000..5790c0cccc
--- /dev/null
+++ b/test/parser/samples/error-unexpected-end-of-input/input.svelte
@@ -0,0 +1 @@
+<div>
\ No newline at end of file
diff --git a/test/parser/samples/error-unmatched-closing-tag-autoclose-2/error.json b/test/parser/samples/error-unmatched-closing-tag-autoclose-2/error.json
new file mode 100644
index 0000000000..d24296bd96
--- /dev/null
+++ b/test/parser/samples/error-unmatched-closing-tag-autoclose-2/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "invalid-closing-tag",
+	"message": "</p> attempted to close an element that was not open",
+	"pos": 38,
+	"start": {
+		"character": 38,
+		"column": 0,
+		"line": 5
+	}
+}
diff --git a/test/parser/samples/error-unmatched-closing-tag-autoclose-2/input.svelte b/test/parser/samples/error-unmatched-closing-tag-autoclose-2/input.svelte
new file mode 100644
index 0000000000..5182577921
--- /dev/null
+++ b/test/parser/samples/error-unmatched-closing-tag-autoclose-2/input.svelte
@@ -0,0 +1,5 @@
+<div>
+	<p>
+	<pre>pre tag</pre>
+</div>
+</p>
\ No newline at end of file
diff --git a/test/parser/samples/error-unmatched-closing-tag-autoclose/error.json b/test/parser/samples/error-unmatched-closing-tag-autoclose/error.json
new file mode 100644
index 0000000000..e6532d747e
--- /dev/null
+++ b/test/parser/samples/error-unmatched-closing-tag-autoclose/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "invalid-closing-tag",
+	"message": "</p> attempted to close <p> that was already automatically closed by <pre>",
+	"pos": 24,
+	"start": {
+		"character": 24,
+		"column": 0,
+		"line": 3
+	}
+}
diff --git a/test/parser/samples/error-unmatched-closing-tag-autoclose/input.svelte b/test/parser/samples/error-unmatched-closing-tag-autoclose/input.svelte
new file mode 100644
index 0000000000..0bfd609736
--- /dev/null
+++ b/test/parser/samples/error-unmatched-closing-tag-autoclose/input.svelte
@@ -0,0 +1,3 @@
+<p>
+	<pre>pre tag</pre>
+</p>
\ No newline at end of file
diff --git a/test/parser/samples/error-unmatched-closing-tag/error.json b/test/parser/samples/error-unmatched-closing-tag/error.json
new file mode 100644
index 0000000000..54af634f2a
--- /dev/null
+++ b/test/parser/samples/error-unmatched-closing-tag/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "invalid-closing-tag",
+	"message": "</div> attempted to close an element that was not open",
+	"start": {
+		"line": 1,
+		"column": 0,
+		"character": 0
+	},
+	"pos": 0
+}
diff --git a/test/parser/samples/error-unmatched-closing-tag/input.svelte b/test/parser/samples/error-unmatched-closing-tag/input.svelte
new file mode 100644
index 0000000000..7f5eaa32ef
--- /dev/null
+++ b/test/parser/samples/error-unmatched-closing-tag/input.svelte
@@ -0,0 +1 @@
+</div>
\ No newline at end of file
diff --git a/test/parser/samples/error-void-closing/error.json b/test/parser/samples/error-void-closing/error.json
new file mode 100644
index 0000000000..ded796d291
--- /dev/null
+++ b/test/parser/samples/error-void-closing/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "invalid-void-content",
+	"message": "<input> is a void element and cannot have children, or a closing tag",
+	"start": {
+		"line": 1,
+		"column": 23,
+		"character": 23
+	},
+	"pos": 23
+}
diff --git a/test/parser/samples/error-void-closing/input.svelte b/test/parser/samples/error-void-closing/input.svelte
new file mode 100644
index 0000000000..4f4d77ad67
--- /dev/null
+++ b/test/parser/samples/error-void-closing/input.svelte
@@ -0,0 +1 @@
+<input>this is illegal!</input>
\ No newline at end of file
diff --git a/test/parser/samples/error-window-children/error.json b/test/parser/samples/error-window-children/error.json
new file mode 100644
index 0000000000..741aa80a90
--- /dev/null
+++ b/test/parser/samples/error-window-children/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "invalid-window-content",
+	"message": "<svelte:window> cannot have children",
+	"start": {
+		"line": 1,
+		"column": 15,
+		"character": 15
+	},
+	"pos": 15
+}
\ No newline at end of file
diff --git a/test/parser/samples/error-window-children/input.svelte b/test/parser/samples/error-window-children/input.svelte
new file mode 100644
index 0000000000..caba78c9cf
--- /dev/null
+++ b/test/parser/samples/error-window-children/input.svelte
@@ -0,0 +1 @@
+<svelte:window>contents</svelte:window>
\ No newline at end of file
diff --git a/test/parser/samples/error-window-duplicate/error.json b/test/parser/samples/error-window-duplicate/error.json
new file mode 100644
index 0000000000..7899556b68
--- /dev/null
+++ b/test/parser/samples/error-window-duplicate/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "duplicate-window",
+	"message": "A component can only have one <svelte:window> tag",
+	"start": {
+		"line": 2,
+		"column": 0,
+		"character": 17
+	},
+	"pos": 17
+}
\ No newline at end of file
diff --git a/test/parser/samples/error-window-duplicate/input.svelte b/test/parser/samples/error-window-duplicate/input.svelte
new file mode 100644
index 0000000000..7f6a028524
--- /dev/null
+++ b/test/parser/samples/error-window-duplicate/input.svelte
@@ -0,0 +1,2 @@
+<svelte:window/>
+<svelte:window/>
\ No newline at end of file
diff --git a/test/parser/samples/error-window-inside-block/error.json b/test/parser/samples/error-window-inside-block/error.json
new file mode 100644
index 0000000000..8591899f67
--- /dev/null
+++ b/test/parser/samples/error-window-inside-block/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "invalid-window-placement",
+	"message": "<svelte:window> tags cannot be inside elements or blocks",
+	"start": {
+		"line": 2,
+		"column": 1,
+		"character": 11
+	},
+	"pos": 11
+}
\ No newline at end of file
diff --git a/test/parser/samples/error-window-inside-block/input.svelte b/test/parser/samples/error-window-inside-block/input.svelte
new file mode 100644
index 0000000000..e106e061e3
--- /dev/null
+++ b/test/parser/samples/error-window-inside-block/input.svelte
@@ -0,0 +1,3 @@
+{#if foo}
+	<svelte:window/>
+{/if}
\ No newline at end of file
diff --git a/test/parser/samples/error-window-inside-element/error.json b/test/parser/samples/error-window-inside-element/error.json
new file mode 100644
index 0000000000..570bf768c3
--- /dev/null
+++ b/test/parser/samples/error-window-inside-element/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "invalid-window-placement",
+	"message": "<svelte:window> tags cannot be inside elements or blocks",
+	"start": {
+		"line": 2,
+		"column": 1,
+		"character": 7
+	},
+	"pos": 7
+}
\ No newline at end of file
diff --git a/test/parser/samples/error-window-inside-element/input.svelte b/test/parser/samples/error-window-inside-element/input.svelte
new file mode 100644
index 0000000000..a10a0f479a
--- /dev/null
+++ b/test/parser/samples/error-window-inside-element/input.svelte
@@ -0,0 +1,3 @@
+<div>
+	<svelte:window/>
+</div>
\ No newline at end of file
diff --git a/test/parser/samples/event-handler/input.svelte b/test/parser/samples/event-handler/input.svelte
new file mode 100644
index 0000000000..b3b467480e
--- /dev/null
+++ b/test/parser/samples/event-handler/input.svelte
@@ -0,0 +1,5 @@
+<button on:click="{() => visible = !visible}">toggle</button>
+
+{#if visible}
+	<p>hello!</p>
+{/if}
diff --git a/test/parser/samples/event-handler/output.json b/test/parser/samples/event-handler/output.json
new file mode 100644
index 0000000000..95db9998f4
--- /dev/null
+++ b/test/parser/samples/event-handler/output.json
@@ -0,0 +1,164 @@
+{
+	"html": {
+		"start": 0,
+		"end": 97,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 61,
+				"type": "Element",
+				"name": "button",
+				"attributes": [
+					{
+						"start": 8,
+						"end": 45,
+						"type": "EventHandler",
+						"name": "click",
+						"modifiers": [],
+						"expression": {
+							"type": "ArrowFunctionExpression",
+							"start": 19,
+							"end": 43,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 19
+								},
+								"end": {
+									"line": 1,
+									"column": 43
+								}
+							},
+							"id": null,
+							"expression": true,
+							"generator": false,
+							"async": false,
+							"params": [],
+							"body": {
+								"type": "AssignmentExpression",
+								"start": 25,
+								"end": 43,
+								"loc": {
+									"start": {
+										"line": 1,
+										"column": 25
+									},
+									"end": {
+										"line": 1,
+										"column": 43
+									}
+								},
+								"operator": "=",
+								"left": {
+									"type": "Identifier",
+									"start": 25,
+									"end": 32,
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 25
+										},
+										"end": {
+											"line": 1,
+											"column": 32
+										}
+									},
+									"name": "visible"
+								},
+								"right": {
+									"type": "UnaryExpression",
+									"start": 35,
+									"end": 43,
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 35
+										},
+										"end": {
+											"line": 1,
+											"column": 43
+										}
+									},
+									"operator": "!",
+									"prefix": true,
+									"argument": {
+										"type": "Identifier",
+										"start": 36,
+										"end": 43,
+										"loc": {
+											"start": {
+												"line": 1,
+												"column": 36
+											},
+											"end": {
+												"line": 1,
+												"column": 43
+											}
+										},
+										"name": "visible"
+									}
+								}
+							}
+						}
+					}
+				],
+				"children": [
+					{
+						"start": 46,
+						"end": 52,
+						"type": "Text",
+						"raw": "toggle",
+						"data": "toggle"
+					}
+				]
+			},
+			{
+				"start": 61,
+				"end": 63,
+				"type": "Text",
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"start": 63,
+				"end": 97,
+				"type": "IfBlock",
+				"expression": {
+					"type": "Identifier",
+					"start": 68,
+					"end": 75,
+					"loc": {
+						"start": {
+							"line": 3,
+							"column": 5
+						},
+						"end": {
+							"line": 3,
+							"column": 12
+						}
+					},
+					"name": "visible"
+				},
+				"children": [
+					{
+						"start": 78,
+						"end": 91,
+						"type": "Element",
+						"name": "p",
+						"attributes": [],
+						"children": [
+							{
+								"start": 81,
+								"end": 87,
+								"type": "Text",
+								"raw": "hello!",
+								"data": "hello!"
+							}
+						]
+					}
+				]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/if-block-else/input.svelte b/test/parser/samples/if-block-else/input.svelte
new file mode 100644
index 0000000000..28b41c046c
--- /dev/null
+++ b/test/parser/samples/if-block-else/input.svelte
@@ -0,0 +1,5 @@
+{#if foo}
+	<p>foo</p>
+{:else}
+	<p>not foo</p>
+{/if}
diff --git a/test/parser/samples/if-block-else/output.json b/test/parser/samples/if-block-else/output.json
new file mode 100644
index 0000000000..1f2cff3ff9
--- /dev/null
+++ b/test/parser/samples/if-block-else/output.json
@@ -0,0 +1,71 @@
+{
+	"html": {
+		"start": 0,
+		"end": 51,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 51,
+				"type": "IfBlock",
+				"expression": {
+					"type": "Identifier",
+					"start": 5,
+					"end": 8,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 5
+						},
+						"end": {
+							"line": 1,
+							"column": 8
+						}
+					},
+					"name": "foo"
+				},
+				"children": [
+					{
+						"start": 11,
+						"end": 21,
+						"type": "Element",
+						"name": "p",
+						"attributes": [],
+						"children": [
+							{
+								"start": 14,
+								"end": 17,
+								"type": "Text",
+								"raw": "foo",
+								"data": "foo"
+							}
+						]
+					}
+				],
+				"else": {
+					"start": 29,
+					"end": 46,
+					"type": "ElseBlock",
+					"children": [
+						{
+							"start": 31,
+							"end": 45,
+							"type": "Element",
+							"name": "p",
+							"attributes": [],
+							"children": [
+								{
+									"start": 34,
+									"end": 41,
+									"type": "Text",
+									"raw": "not foo",
+									"data": "not foo"
+								}
+							]
+						}
+					]
+				}
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/if-block-elseif/input.svelte b/test/parser/samples/if-block-elseif/input.svelte
new file mode 100644
index 0000000000..2566aef258
--- /dev/null
+++ b/test/parser/samples/if-block-elseif/input.svelte
@@ -0,0 +1,5 @@
+{#if x > 10}
+	<p>x is greater than 10</p>
+{:else if x < 5}
+	<p>x is less than 5</p>
+{/if}
diff --git a/test/parser/samples/if-block-elseif/output.json b/test/parser/samples/if-block-elseif/output.json
new file mode 100644
index 0000000000..0d8fcd987e
--- /dev/null
+++ b/test/parser/samples/if-block-elseif/output.json
@@ -0,0 +1,161 @@
+{
+	"html": {
+		"start": 0,
+		"end": 89,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 89,
+				"type": "IfBlock",
+				"expression": {
+					"type": "BinaryExpression",
+					"start": 5,
+					"end": 11,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 5
+						},
+						"end": {
+							"line": 1,
+							"column": 11
+						}
+					},
+					"left": {
+						"type": "Identifier",
+						"start": 5,
+						"end": 6,
+						"loc": {
+							"start": {
+								"line": 1,
+								"column": 5
+							},
+							"end": {
+								"line": 1,
+								"column": 6
+							}
+						},
+						"name": "x"
+					},
+					"operator": ">",
+					"right": {
+						"type": "Literal",
+						"start": 9,
+						"end": 11,
+						"loc": {
+							"start": {
+								"line": 1,
+								"column": 9
+							},
+							"end": {
+								"line": 1,
+								"column": 11
+							}
+						},
+						"value": 10,
+						"raw": "10"
+					}
+				},
+				"children": [
+					{
+						"start": 14,
+						"end": 41,
+						"type": "Element",
+						"name": "p",
+						"attributes": [],
+						"children": [
+							{
+								"start": 17,
+								"end": 37,
+								"type": "Text",
+								"raw": "x is greater than 10",
+								"data": "x is greater than 10"
+							}
+						]
+					}
+				],
+				"else": {
+					"start": 58,
+					"end": 84,
+					"type": "ElseBlock",
+					"children": [
+						{
+							"start": 58,
+							"end": 89,
+							"type": "IfBlock",
+							"elseif": true,
+							"expression": {
+								"type": "BinaryExpression",
+								"start": 52,
+								"end": 57,
+								"loc": {
+									"start": {
+										"line": 3,
+										"column": 10
+									},
+									"end": {
+										"line": 3,
+										"column": 15
+									}
+								},
+								"left": {
+									"type": "Identifier",
+									"start": 52,
+									"end": 53,
+									"loc": {
+										"start": {
+											"line": 3,
+											"column": 10
+										},
+										"end": {
+											"line": 3,
+											"column": 11
+										}
+									},
+									"name": "x"
+								},
+								"operator": "<",
+								"right": {
+									"type": "Literal",
+									"start": 56,
+									"end": 57,
+									"loc": {
+										"start": {
+											"line": 3,
+											"column": 14
+										},
+										"end": {
+											"line": 3,
+											"column": 15
+										}
+									},
+									"value": 5,
+									"raw": "5"
+								}
+							},
+							"children": [
+								{
+									"start": 60,
+									"end": 83,
+									"type": "Element",
+									"name": "p",
+									"attributes": [],
+									"children": [
+										{
+											"start": 63,
+											"end": 79,
+											"type": "Text",
+											"raw": "x is less than 5",
+											"data": "x is less than 5"
+										}
+									]
+								}
+							]
+						}
+					]
+				}
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/if-block/input.svelte b/test/parser/samples/if-block/input.svelte
new file mode 100644
index 0000000000..5851347a88
--- /dev/null
+++ b/test/parser/samples/if-block/input.svelte
@@ -0,0 +1 @@
+{#if foo}bar{/if}
diff --git a/test/parser/samples/if-block/output.json b/test/parser/samples/if-block/output.json
new file mode 100644
index 0000000000..ef895a366a
--- /dev/null
+++ b/test/parser/samples/if-block/output.json
@@ -0,0 +1,39 @@
+{
+	"html": {
+		"start": 0,
+		"end": 17,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 17,
+				"type": "IfBlock",
+				"expression": {
+					"type": "Identifier",
+					"start": 5,
+					"end": 8,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 5
+						},
+						"end": {
+							"line": 1,
+							"column": 8
+						}
+					},
+					"name": "foo"
+				},
+				"children": [
+					{
+						"start": 9,
+						"end": 12,
+						"type": "Text",
+						"raw": "bar",
+						"data": "bar"
+					}
+				]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/implicitly-closed-li-block/input.svelte b/test/parser/samples/implicitly-closed-li-block/input.svelte
new file mode 100644
index 0000000000..05fc778999
--- /dev/null
+++ b/test/parser/samples/implicitly-closed-li-block/input.svelte
@@ -0,0 +1,7 @@
+<ul>
+	<li>a
+	{#if true}
+		<li>b
+	{/if}
+	<li>c
+</ul>
diff --git a/test/parser/samples/implicitly-closed-li-block/output.json b/test/parser/samples/implicitly-closed-li-block/output.json
new file mode 100644
index 0000000000..767f64053c
--- /dev/null
+++ b/test/parser/samples/implicitly-closed-li-block/output.json
@@ -0,0 +1,104 @@
+{
+	"html": {
+		"start": 0,
+		"end": 51,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 51,
+				"type": "Element",
+				"name": "ul",
+				"attributes": [],
+				"children": [
+					{
+						"start": 4,
+						"end": 6,
+						"type": "Text",
+						"raw": "\n\t",
+						"data": "\n\t"
+					},
+					{
+						"start": 6,
+						"end": 40,
+						"type": "Element",
+						"name": "li",
+						"attributes": [],
+						"children": [
+							{
+								"start": 10,
+								"end": 13,
+								"type": "Text",
+								"raw": "a\n\t",
+								"data": "a\n\t"
+							},
+							{
+								"start": 13,
+								"end": 38,
+								"type": "IfBlock",
+								"expression": {
+									"type": "Literal",
+									"start": 18,
+									"end": 22,
+									"loc": {
+										"start": {
+											"line": 3,
+											"column": 6
+										},
+										"end": {
+											"line": 3,
+											"column": 10
+										}
+									},
+									"value": true,
+									"raw": "true"
+								},
+								"children": [
+									{
+										"start": 26,
+										"end": 33,
+										"type": "Element",
+										"name": "li",
+										"attributes": [],
+										"children": [
+											{
+												"start": 30,
+												"end": 33,
+												"type": "Text",
+												"raw": "b\n\t",
+												"data": "b\n\t"
+											}
+										]
+									}
+								]
+							},
+							{
+								"start": 38,
+								"end": 40,
+								"type": "Text",
+								"raw": "\n\t",
+								"data": "\n\t"
+							}
+						]
+					},
+					{
+						"start": 40,
+						"end": 46,
+						"type": "Element",
+						"name": "li",
+						"attributes": [],
+						"children": [
+							{
+								"start": 44,
+								"end": 46,
+								"type": "Text",
+								"raw": "c\n",
+								"data": "c\n"
+							}
+						]
+					}
+				]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/implicitly-closed-li/input.svelte b/test/parser/samples/implicitly-closed-li/input.svelte
new file mode 100644
index 0000000000..14fc1168ba
--- /dev/null
+++ b/test/parser/samples/implicitly-closed-li/input.svelte
@@ -0,0 +1,5 @@
+<ul>
+	<li>a
+	<li>b
+	<li>c
+</ul>
\ No newline at end of file
diff --git a/test/parser/samples/implicitly-closed-li/output.json b/test/parser/samples/implicitly-closed-li/output.json
new file mode 100644
index 0000000000..f46a2b1a26
--- /dev/null
+++ b/test/parser/samples/implicitly-closed-li/output.json
@@ -0,0 +1,73 @@
+{
+	"html": {
+		"start": 0,
+		"end": 31,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 31,
+				"type": "Element",
+				"name": "ul",
+				"attributes": [],
+				"children": [
+					{
+						"start": 4,
+						"end": 6,
+						"type": "Text",
+						"raw": "\n\t",
+						"data": "\n\t"
+					},
+					{
+						"start": 6,
+						"end": 13,
+						"type": "Element",
+						"name": "li",
+						"attributes": [],
+						"children": [
+							{
+								"start": 10,
+								"end": 13,
+								"type": "Text",
+								"raw": "a\n\t",
+								"data": "a\n\t"
+							}
+						]
+					},
+					{
+						"start": 13,
+						"end": 20,
+						"type": "Element",
+						"name": "li",
+						"attributes": [],
+						"children": [
+							{
+								"start": 17,
+								"end": 20,
+								"type": "Text",
+								"raw": "b\n\t",
+								"data": "b\n\t"
+							}
+						]
+					},
+					{
+						"start": 20,
+						"end": 26,
+						"type": "Element",
+						"name": "li",
+						"attributes": [],
+						"children": [
+							{
+								"start": 24,
+								"end": 26,
+								"type": "Text",
+								"raw": "c\n",
+								"data": "c\n"
+							}
+						]
+					}
+				]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/nbsp/input.svelte b/test/parser/samples/nbsp/input.svelte
new file mode 100644
index 0000000000..11cd588757
--- /dev/null
+++ b/test/parser/samples/nbsp/input.svelte
@@ -0,0 +1 @@
+<span>&nbsp;</span>
\ No newline at end of file
diff --git a/test/parser/samples/nbsp/output.json b/test/parser/samples/nbsp/output.json
new file mode 100644
index 0000000000..044de64cba
--- /dev/null
+++ b/test/parser/samples/nbsp/output.json
@@ -0,0 +1,25 @@
+{
+	"html": {
+		"start": 0,
+		"end": 19,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 19,
+				"type": "Element",
+				"name": "span",
+				"attributes": [],
+				"children": [
+					{
+						"start": 6,
+						"end": 12,
+						"type": "Text",
+						"raw": "&nbsp;",
+						"data": " "
+					}
+				]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/no-error-if-before-closing/input.svelte b/test/parser/samples/no-error-if-before-closing/input.svelte
new file mode 100644
index 0000000000..4059e0d4d1
--- /dev/null
+++ b/test/parser/samples/no-error-if-before-closing/input.svelte
@@ -0,0 +1,19 @@
+{#if true}
+	<input>
+{:else}
+{/if}
+
+{#if true}
+	<br>
+{:else}
+{/if}
+
+{#await true}
+	<input>
+{:then f}
+{/await}
+
+{#await true}
+	<br>
+{:then f}
+{/await}
\ No newline at end of file
diff --git a/test/parser/samples/no-error-if-before-closing/output.json b/test/parser/samples/no-error-if-before-closing/output.json
new file mode 100644
index 0000000000..f22586b267
--- /dev/null
+++ b/test/parser/samples/no-error-if-before-closing/output.json
@@ -0,0 +1,268 @@
+{
+	"html": {
+		"start": 0,
+		"end": 148,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 33,
+				"type": "IfBlock",
+				"expression": {
+					"type": "Literal",
+					"start": 5,
+					"end": 9,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 5
+						},
+						"end": {
+							"line": 1,
+							"column": 9
+						}
+					},
+					"value": true,
+					"raw": "true"
+				},
+				"children": [
+					{
+						"start": 12,
+						"end": 19,
+						"type": "Element",
+						"name": "input",
+						"attributes": [],
+						"children": []
+					}
+				],
+				"else": {
+					"start": 27,
+					"end": 28,
+					"type": "ElseBlock",
+					"children": []
+				}
+			},
+			{
+				"start": 33,
+				"end": 35,
+				"type": "Text",
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"start": 35,
+				"end": 65,
+				"type": "IfBlock",
+				"expression": {
+					"type": "Literal",
+					"start": 40,
+					"end": 44,
+					"loc": {
+						"start": {
+							"line": 6,
+							"column": 5
+						},
+						"end": {
+							"line": 6,
+							"column": 9
+						}
+					},
+					"value": true,
+					"raw": "true"
+				},
+				"children": [
+					{
+						"start": 47,
+						"end": 51,
+						"type": "Element",
+						"name": "br",
+						"attributes": [],
+						"children": []
+					}
+				],
+				"else": {
+					"start": 59,
+					"end": 60,
+					"type": "ElseBlock",
+					"children": []
+				}
+			},
+			{
+				"start": 65,
+				"end": 67,
+				"type": "Text",
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"start": 67,
+				"end": 108,
+				"type": "AwaitBlock",
+				"expression": {
+					"type": "Literal",
+					"start": 75,
+					"end": 79,
+					"loc": {
+						"start": {
+							"line": 11,
+							"column": 8
+						},
+						"end": {
+							"line": 11,
+							"column": 12
+						}
+					},
+					"value": true,
+					"raw": "true"
+				},
+				"value": {
+					"type": "Identifier",
+					"name": "f",
+					"start": 97,
+					"end": 98
+				},
+				"error": null,
+				"pending": {
+					"start": 80,
+					"end": 90,
+					"type": "PendingBlock",
+					"children": [
+						{
+							"start": 80,
+							"end": 82,
+							"type": "Text",
+							"raw": "\n\t",
+							"data": "\n\t"
+						},
+						{
+							"start": 82,
+							"end": 89,
+							"type": "Element",
+							"name": "input",
+							"attributes": [],
+							"children": []
+						},
+						{
+							"start": 89,
+							"end": 90,
+							"type": "Text",
+							"raw": "\n",
+							"data": "\n"
+						}
+					],
+					"skip": false
+				},
+				"then": {
+					"start": 90,
+					"end": 100,
+					"type": "ThenBlock",
+					"children": [
+						{
+							"start": 99,
+							"end": 100,
+							"type": "Text",
+							"raw": "\n",
+							"data": "\n"
+						}
+					],
+					"skip": false
+				},
+				"catch": {
+					"start": null,
+					"end": null,
+					"type": "CatchBlock",
+					"children": [],
+					"skip": true
+				}
+			},
+			{
+				"start": 108,
+				"end": 110,
+				"type": "Text",
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"start": 110,
+				"end": 148,
+				"type": "AwaitBlock",
+				"expression": {
+					"type": "Literal",
+					"start": 118,
+					"end": 122,
+					"loc": {
+						"start": {
+							"line": 16,
+							"column": 8
+						},
+						"end": {
+							"line": 16,
+							"column": 12
+						}
+					},
+					"value": true,
+					"raw": "true"
+				},
+				"value": {
+					"type": "Identifier",
+					"name": "f",
+					"start": 137,
+					"end": 138
+				},
+				"error": null,
+				"pending": {
+					"start": 123,
+					"end": 130,
+					"type": "PendingBlock",
+					"children": [
+						{
+							"start": 123,
+							"end": 125,
+							"type": "Text",
+							"raw": "\n\t",
+							"data": "\n\t"
+						},
+						{
+							"start": 125,
+							"end": 129,
+							"type": "Element",
+							"name": "br",
+							"attributes": [],
+							"children": []
+						},
+						{
+							"start": 129,
+							"end": 130,
+							"type": "Text",
+							"raw": "\n",
+							"data": "\n"
+						}
+					],
+					"skip": false
+				},
+				"then": {
+					"start": 130,
+					"end": 140,
+					"type": "ThenBlock",
+					"children": [
+						{
+							"start": 139,
+							"end": 140,
+							"type": "Text",
+							"raw": "\n",
+							"data": "\n"
+						}
+					],
+					"skip": false
+				},
+				"catch": {
+					"start": null,
+					"end": null,
+					"type": "CatchBlock",
+					"children": [],
+					"skip": true
+				}
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/raw-mustaches-whitespace-error/error.json b/test/parser/samples/raw-mustaches-whitespace-error/error.json
new file mode 100644
index 0000000000..abb9f8ed0f
--- /dev/null
+++ b/test/parser/samples/raw-mustaches-whitespace-error/error.json
@@ -0,0 +1,10 @@
+{
+	"code": "missing-whitespace",
+	"message": "Expected whitespace",
+	"start": {
+		"line": 1,
+		"column": 6,
+		"character": 6
+	},
+	"pos": 6
+}
diff --git a/test/parser/samples/raw-mustaches-whitespace-error/input.svelte b/test/parser/samples/raw-mustaches-whitespace-error/input.svelte
new file mode 100644
index 0000000000..94e75fda09
--- /dev/null
+++ b/test/parser/samples/raw-mustaches-whitespace-error/input.svelte
@@ -0,0 +1 @@
+{@htmlfoo}
diff --git a/test/parser/samples/raw-mustaches/input.svelte b/test/parser/samples/raw-mustaches/input.svelte
new file mode 100644
index 0000000000..979697835f
--- /dev/null
+++ b/test/parser/samples/raw-mustaches/input.svelte
@@ -0,0 +1 @@
+<p> {@html raw1} {@html raw2} </p>
diff --git a/test/parser/samples/raw-mustaches/output.json b/test/parser/samples/raw-mustaches/output.json
new file mode 100644
index 0000000000..764b6df07d
--- /dev/null
+++ b/test/parser/samples/raw-mustaches/output.json
@@ -0,0 +1,81 @@
+{
+	"html": {
+		"start": 0,
+		"end": 34,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 34,
+				"type": "Element",
+				"name": "p",
+				"attributes": [],
+				"children": [
+					{
+						"start": 3,
+						"end": 4,
+						"type": "Text",
+						"raw": " ",
+						"data": " "
+					},
+					{
+						"start": 4,
+						"end": 16,
+						"type": "RawMustacheTag",
+						"expression": {
+							"type": "Identifier",
+							"start": 11,
+							"end": 15,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 11
+								},
+								"end": {
+									"line": 1,
+									"column": 15
+								}
+							},
+							"name": "raw1"
+						}
+					},
+					{
+						"start": 16,
+						"end": 17,
+						"type": "Text",
+						"raw": " ",
+						"data": " "
+					},
+					{
+						"start": 17,
+						"end": 29,
+						"type": "RawMustacheTag",
+						"expression": {
+							"type": "Identifier",
+							"start": 24,
+							"end": 28,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 24
+								},
+								"end": {
+									"line": 1,
+									"column": 28
+								}
+							},
+							"name": "raw2"
+						}
+					},
+					{
+						"start": 29,
+						"end": 30,
+						"type": "Text",
+						"raw": " ",
+						"data": " "
+					}
+				]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/refs/input.svelte b/test/parser/samples/refs/input.svelte
new file mode 100644
index 0000000000..556cae70db
--- /dev/null
+++ b/test/parser/samples/refs/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let foo;
+</script>
+
+<canvas bind:this={foo}></canvas>
\ No newline at end of file
diff --git a/test/parser/samples/refs/output.json b/test/parser/samples/refs/output.json
new file mode 100644
index 0000000000..fb94ffd701
--- /dev/null
+++ b/test/parser/samples/refs/output.json
@@ -0,0 +1,122 @@
+{
+	"html": {
+		"start": 30,
+		"end": 63,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 28,
+				"end": 30,
+				"type": "Text",
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"start": 30,
+				"end": 63,
+				"type": "Element",
+				"name": "canvas",
+				"attributes": [
+					{
+						"start": 38,
+						"end": 53,
+						"type": "Binding",
+						"name": "this",
+						"modifiers": [],
+						"expression": {
+							"type": "Identifier",
+							"start": 49,
+							"end": 52,
+							"loc": {
+								"start": {
+									"line": 5,
+									"column": 19
+								},
+								"end": {
+									"line": 5,
+									"column": 22
+								}
+							},
+							"name": "foo"
+						}
+					}
+				],
+				"children": []
+			}
+		]
+	},
+	"instance": {
+		"type": "Script",
+		"start": 0,
+		"end": 28,
+		"context": "default",
+		"content": {
+			"type": "Program",
+			"start": 8,
+			"end": 19,
+			"loc": {
+				"start": {
+					"line": 1,
+					"column": 0
+				},
+				"end": {
+					"line": 3,
+					"column": 0
+				}
+			},
+			"body": [
+				{
+					"type": "VariableDeclaration",
+					"start": 10,
+					"end": 18,
+					"loc": {
+						"start": {
+							"line": 2,
+							"column": 1
+						},
+						"end": {
+							"line": 2,
+							"column": 9
+						}
+					},
+					"declarations": [
+						{
+							"type": "VariableDeclarator",
+							"start": 14,
+							"end": 17,
+							"loc": {
+								"start": {
+									"line": 2,
+									"column": 5
+								},
+								"end": {
+									"line": 2,
+									"column": 8
+								}
+							},
+							"id": {
+								"type": "Identifier",
+								"start": 14,
+								"end": 17,
+								"loc": {
+									"start": {
+										"line": 2,
+										"column": 5
+									},
+									"end": {
+										"line": 2,
+										"column": 8
+									}
+								},
+								"name": "foo"
+							},
+							"init": null
+						}
+					],
+					"kind": "let"
+				}
+			],
+			"sourceType": "module"
+		}
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/script-comment-only/input.svelte b/test/parser/samples/script-comment-only/input.svelte
new file mode 100644
index 0000000000..32f0911030
--- /dev/null
+++ b/test/parser/samples/script-comment-only/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	// TODO write some code
+</script>
+
+<div></div>
\ No newline at end of file
diff --git a/test/parser/samples/script-comment-only/output.json b/test/parser/samples/script-comment-only/output.json
new file mode 100644
index 0000000000..e090b30ae6
--- /dev/null
+++ b/test/parser/samples/script-comment-only/output.json
@@ -0,0 +1,55 @@
+{
+	"html": {
+		"start": 45,
+		"end": 56,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 43,
+				"end": 45,
+				"type": "Text",
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"start": 45,
+				"end": 56,
+				"type": "Element",
+				"name": "div",
+				"attributes": [],
+				"children": []
+			}
+		]
+	},
+	"instance": {
+		"type": "Script",
+		"start": 0,
+		"end": 43,
+		"context": "default",
+		"content": {
+			"type": "Program",
+			"start": 8,
+			"end": 34,
+			"loc": {
+				"start": {
+					"line": 1,
+					"column": 0
+				},
+				"end": {
+					"line": 3,
+					"column": 0
+				}
+			},
+			"body": [],
+			"sourceType": "module",
+			"trailingComments": [
+				{
+					"type": "Line",
+					"value": " TODO write some code",
+					"start": 10,
+					"end": 33
+				}
+			]
+		}
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/script-comment-trailing-multiline/input.svelte b/test/parser/samples/script-comment-trailing-multiline/input.svelte
new file mode 100644
index 0000000000..736509cbab
--- /dev/null
+++ b/test/parser/samples/script-comment-trailing-multiline/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	let name = 'world';
+
+	/*
+		trailing multiline comment
+	*/
+</script>
+
+<h1>Hello {name}!</h1>
diff --git a/test/parser/samples/script-comment-trailing-multiline/output.json b/test/parser/samples/script-comment-trailing-multiline/output.json
new file mode 100644
index 0000000000..184a29978d
--- /dev/null
+++ b/test/parser/samples/script-comment-trailing-multiline/output.json
@@ -0,0 +1,158 @@
+{
+	"html": {
+		"start": 79,
+		"end": 101,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 77,
+				"end": 79,
+				"type": "Text",
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"start": 79,
+				"end": 101,
+				"type": "Element",
+				"name": "h1",
+				"attributes": [],
+				"children": [
+					{
+						"start": 83,
+						"end": 89,
+						"type": "Text",
+						"raw": "Hello ",
+						"data": "Hello "
+					},
+					{
+						"start": 89,
+						"end": 95,
+						"type": "MustacheTag",
+						"expression": {
+							"type": "Identifier",
+							"start": 90,
+							"end": 94,
+							"loc": {
+								"start": {
+									"line": 9,
+									"column": 11
+								},
+								"end": {
+									"line": 9,
+									"column": 15
+								}
+							},
+							"name": "name"
+						}
+					},
+					{
+						"start": 95,
+						"end": 96,
+						"type": "Text",
+						"raw": "!",
+						"data": "!"
+					}
+				]
+			}
+		]
+	},
+	"instance": {
+		"type": "Script",
+		"start": 0,
+		"end": 77,
+		"context": "default",
+		"content": {
+			"type": "Program",
+			"start": 8,
+			"end": 68,
+			"loc": {
+				"start": {
+					"line": 1,
+					"column": 0
+				},
+				"end": {
+					"line": 7,
+					"column": 0
+				}
+			},
+			"body": [
+				{
+					"type": "VariableDeclaration",
+					"start": 10,
+					"end": 29,
+					"loc": {
+						"start": {
+							"line": 2,
+							"column": 1
+						},
+						"end": {
+							"line": 2,
+							"column": 20
+						}
+					},
+					"declarations": [
+						{
+							"type": "VariableDeclarator",
+							"start": 14,
+							"end": 28,
+							"loc": {
+								"start": {
+									"line": 2,
+									"column": 5
+								},
+								"end": {
+									"line": 2,
+									"column": 19
+								}
+							},
+							"id": {
+								"type": "Identifier",
+								"start": 14,
+								"end": 18,
+								"loc": {
+									"start": {
+										"line": 2,
+										"column": 5
+									},
+									"end": {
+										"line": 2,
+										"column": 9
+									}
+								},
+								"name": "name"
+							},
+							"init": {
+								"type": "Literal",
+								"start": 21,
+								"end": 28,
+								"loc": {
+									"start": {
+										"line": 2,
+										"column": 12
+									},
+									"end": {
+										"line": 2,
+										"column": 19
+									}
+								},
+								"value": "world",
+								"raw": "'world'"
+							}
+						}
+					],
+					"kind": "let"
+				}
+			],
+			"sourceType": "module",
+			"trailingComments": [
+				{
+					"type": "Block",
+					"value": "\n\ttrailing multiline comment\n",
+					"start": 32,
+					"end": 67
+				}
+			]
+		}
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/script-comment-trailing/input.svelte b/test/parser/samples/script-comment-trailing/input.svelte
new file mode 100644
index 0000000000..7b97ec980a
--- /dev/null
+++ b/test/parser/samples/script-comment-trailing/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	let name = 'world';
+
+	// trailing line comment
+</script>
+
+<h1>Hello {name}!</h1>
diff --git a/test/parser/samples/script-comment-trailing/output.json b/test/parser/samples/script-comment-trailing/output.json
new file mode 100644
index 0000000000..2aca23f667
--- /dev/null
+++ b/test/parser/samples/script-comment-trailing/output.json
@@ -0,0 +1,158 @@
+{
+	"html": {
+		"start": 68,
+		"end": 90,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 66,
+				"end": 68,
+				"type": "Text",
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"start": 68,
+				"end": 90,
+				"type": "Element",
+				"name": "h1",
+				"attributes": [],
+				"children": [
+					{
+						"start": 72,
+						"end": 78,
+						"type": "Text",
+						"raw": "Hello ",
+						"data": "Hello "
+					},
+					{
+						"start": 78,
+						"end": 84,
+						"type": "MustacheTag",
+						"expression": {
+							"type": "Identifier",
+							"start": 79,
+							"end": 83,
+							"loc": {
+								"start": {
+									"line": 7,
+									"column": 11
+								},
+								"end": {
+									"line": 7,
+									"column": 15
+								}
+							},
+							"name": "name"
+						}
+					},
+					{
+						"start": 84,
+						"end": 85,
+						"type": "Text",
+						"raw": "!",
+						"data": "!"
+					}
+				]
+			}
+		]
+	},
+	"instance": {
+		"type": "Script",
+		"start": 0,
+		"end": 66,
+		"context": "default",
+		"content": {
+			"type": "Program",
+			"start": 8,
+			"end": 57,
+			"loc": {
+				"start": {
+					"line": 1,
+					"column": 0
+				},
+				"end": {
+					"line": 5,
+					"column": 0
+				}
+			},
+			"body": [
+				{
+					"type": "VariableDeclaration",
+					"start": 10,
+					"end": 29,
+					"loc": {
+						"start": {
+							"line": 2,
+							"column": 1
+						},
+						"end": {
+							"line": 2,
+							"column": 20
+						}
+					},
+					"declarations": [
+						{
+							"type": "VariableDeclarator",
+							"start": 14,
+							"end": 28,
+							"loc": {
+								"start": {
+									"line": 2,
+									"column": 5
+								},
+								"end": {
+									"line": 2,
+									"column": 19
+								}
+							},
+							"id": {
+								"type": "Identifier",
+								"start": 14,
+								"end": 18,
+								"loc": {
+									"start": {
+										"line": 2,
+										"column": 5
+									},
+									"end": {
+										"line": 2,
+										"column": 9
+									}
+								},
+								"name": "name"
+							},
+							"init": {
+								"type": "Literal",
+								"start": 21,
+								"end": 28,
+								"loc": {
+									"start": {
+										"line": 2,
+										"column": 12
+									},
+									"end": {
+										"line": 2,
+										"column": 19
+									}
+								},
+								"value": "world",
+								"raw": "'world'"
+							}
+						}
+					],
+					"kind": "let"
+				}
+			],
+			"sourceType": "module",
+			"trailingComments": [
+				{
+					"type": "Line",
+					"value": " trailing line comment",
+					"start": 32,
+					"end": 56
+				}
+			]
+		}
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/script/input.svelte b/test/parser/samples/script/input.svelte
new file mode 100644
index 0000000000..22b3c84db0
--- /dev/null
+++ b/test/parser/samples/script/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let name = 'world';
+</script>
+
+<h1>Hello {name}!</h1>
\ No newline at end of file
diff --git a/test/parser/samples/script/output.json b/test/parser/samples/script/output.json
new file mode 100644
index 0000000000..4d0aa9cf36
--- /dev/null
+++ b/test/parser/samples/script/output.json
@@ -0,0 +1,150 @@
+{
+	"html": {
+		"start": 41,
+		"end": 63,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 39,
+				"end": 41,
+				"type": "Text",
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"start": 41,
+				"end": 63,
+				"type": "Element",
+				"name": "h1",
+				"attributes": [],
+				"children": [
+					{
+						"start": 45,
+						"end": 51,
+						"type": "Text",
+						"raw": "Hello ",
+						"data": "Hello "
+					},
+					{
+						"start": 51,
+						"end": 57,
+						"type": "MustacheTag",
+						"expression": {
+							"type": "Identifier",
+							"start": 52,
+							"end": 56,
+							"loc": {
+								"start": {
+									"line": 5,
+									"column": 11
+								},
+								"end": {
+									"line": 5,
+									"column": 15
+								}
+							},
+							"name": "name"
+						}
+					},
+					{
+						"start": 57,
+						"end": 58,
+						"type": "Text",
+						"raw": "!",
+						"data": "!"
+					}
+				]
+			}
+		]
+	},
+	"instance": {
+		"type": "Script",
+		"start": 0,
+		"end": 39,
+		"context": "default",
+		"content": {
+			"type": "Program",
+			"start": 8,
+			"end": 30,
+			"loc": {
+				"start": {
+					"line": 1,
+					"column": 0
+				},
+				"end": {
+					"line": 3,
+					"column": 0
+				}
+			},
+			"body": [
+				{
+					"type": "VariableDeclaration",
+					"start": 10,
+					"end": 29,
+					"loc": {
+						"start": {
+							"line": 2,
+							"column": 1
+						},
+						"end": {
+							"line": 2,
+							"column": 20
+						}
+					},
+					"declarations": [
+						{
+							"type": "VariableDeclarator",
+							"start": 14,
+							"end": 28,
+							"loc": {
+								"start": {
+									"line": 2,
+									"column": 5
+								},
+								"end": {
+									"line": 2,
+									"column": 19
+								}
+							},
+							"id": {
+								"type": "Identifier",
+								"start": 14,
+								"end": 18,
+								"loc": {
+									"start": {
+										"line": 2,
+										"column": 5
+									},
+									"end": {
+										"line": 2,
+										"column": 9
+									}
+								},
+								"name": "name"
+							},
+							"init": {
+								"type": "Literal",
+								"start": 21,
+								"end": 28,
+								"loc": {
+									"start": {
+										"line": 2,
+										"column": 12
+									},
+									"end": {
+										"line": 2,
+										"column": 19
+									}
+								},
+								"value": "world",
+								"raw": "'world'"
+							}
+						}
+					],
+					"kind": "let"
+				}
+			],
+			"sourceType": "module"
+		}
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/self-closing-element/input.svelte b/test/parser/samples/self-closing-element/input.svelte
new file mode 100644
index 0000000000..78e7012b82
--- /dev/null
+++ b/test/parser/samples/self-closing-element/input.svelte
@@ -0,0 +1 @@
+<div/>
\ No newline at end of file
diff --git a/test/parser/samples/self-closing-element/output.json b/test/parser/samples/self-closing-element/output.json
new file mode 100644
index 0000000000..63ff17a466
--- /dev/null
+++ b/test/parser/samples/self-closing-element/output.json
@@ -0,0 +1,17 @@
+{
+	"html": {
+		"start": 0,
+		"end": 6,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 6,
+				"type": "Element",
+				"name": "div",
+				"attributes": [],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/self-reference/input.svelte b/test/parser/samples/self-reference/input.svelte
new file mode 100644
index 0000000000..241a266b7b
--- /dev/null
+++ b/test/parser/samples/self-reference/input.svelte
@@ -0,0 +1,3 @@
+{#if depth > 1}
+	<svelte:self depth='{depth - 1}'/>
+{/if}
\ No newline at end of file
diff --git a/test/parser/samples/self-reference/output.json b/test/parser/samples/self-reference/output.json
new file mode 100644
index 0000000000..ea9eecc691
--- /dev/null
+++ b/test/parser/samples/self-reference/output.json
@@ -0,0 +1,136 @@
+{
+	"html": {
+		"start": 0,
+		"end": 57,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 57,
+				"type": "IfBlock",
+				"expression": {
+					"type": "BinaryExpression",
+					"start": 5,
+					"end": 14,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 5
+						},
+						"end": {
+							"line": 1,
+							"column": 14
+						}
+					},
+					"left": {
+						"type": "Identifier",
+						"start": 5,
+						"end": 10,
+						"loc": {
+							"start": {
+								"line": 1,
+								"column": 5
+							},
+							"end": {
+								"line": 1,
+								"column": 10
+							}
+						},
+						"name": "depth"
+					},
+					"operator": ">",
+					"right": {
+						"type": "Literal",
+						"start": 13,
+						"end": 14,
+						"loc": {
+							"start": {
+								"line": 1,
+								"column": 13
+							},
+							"end": {
+								"line": 1,
+								"column": 14
+							}
+						},
+						"value": 1,
+						"raw": "1"
+					}
+				},
+				"children": [
+					{
+						"start": 17,
+						"end": 51,
+						"type": "InlineComponent",
+						"name": "svelte:self",
+						"attributes": [
+							{
+								"start": 30,
+								"end": 49,
+								"type": "Attribute",
+								"name": "depth",
+								"value": [
+									{
+										"start": 37,
+										"end": 48,
+										"type": "MustacheTag",
+										"expression": {
+											"type": "BinaryExpression",
+											"start": 38,
+											"end": 47,
+											"loc": {
+												"start": {
+													"line": 2,
+													"column": 22
+												},
+												"end": {
+													"line": 2,
+													"column": 31
+												}
+											},
+											"left": {
+												"type": "Identifier",
+												"start": 38,
+												"end": 43,
+												"loc": {
+													"start": {
+														"line": 2,
+														"column": 22
+													},
+													"end": {
+														"line": 2,
+														"column": 27
+													}
+												},
+												"name": "depth"
+											},
+											"operator": "-",
+											"right": {
+												"type": "Literal",
+												"start": 46,
+												"end": 47,
+												"loc": {
+													"start": {
+														"line": 2,
+														"column": 30
+													},
+													"end": {
+														"line": 2,
+														"column": 31
+													}
+												},
+												"value": 1,
+												"raw": "1"
+											}
+										}
+									}
+								]
+							}
+						],
+						"children": []
+					}
+				]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/slotted-element/input.svelte b/test/parser/samples/slotted-element/input.svelte
new file mode 100644
index 0000000000..709dede9a5
--- /dev/null
+++ b/test/parser/samples/slotted-element/input.svelte
@@ -0,0 +1 @@
+<Component><div slot='foo'></div></Component>
diff --git a/test/parser/samples/slotted-element/output.json b/test/parser/samples/slotted-element/output.json
new file mode 100644
index 0000000000..7028a367ff
--- /dev/null
+++ b/test/parser/samples/slotted-element/output.json
@@ -0,0 +1,42 @@
+{
+	"html": {
+		"start": 0,
+		"end": 45,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 45,
+				"type": "InlineComponent",
+				"name": "Component",
+				"attributes": [],
+				"children": [
+					{
+						"start": 11,
+						"end": 33,
+						"type": "Element",
+						"name": "div",
+						"attributes": [
+							{
+								"start": 16,
+								"end": 26,
+								"type": "Attribute",
+								"name": "slot",
+								"value": [
+									{
+										"start": 22,
+										"end": 25,
+										"type": "Text",
+										"raw": "foo",
+										"data": "foo"
+									}
+								]
+							}
+						],
+						"children": []
+					}
+				]
+			}
+		]
+	}
+}
diff --git a/test/parser/samples/space-between-mustaches/input.svelte b/test/parser/samples/space-between-mustaches/input.svelte
new file mode 100644
index 0000000000..0dd099df11
--- /dev/null
+++ b/test/parser/samples/space-between-mustaches/input.svelte
@@ -0,0 +1 @@
+<p> {a} {b} : {c} : </p>
diff --git a/test/parser/samples/space-between-mustaches/output.json b/test/parser/samples/space-between-mustaches/output.json
new file mode 100644
index 0000000000..b89f4d6c83
--- /dev/null
+++ b/test/parser/samples/space-between-mustaches/output.json
@@ -0,0 +1,109 @@
+{
+	"html": {
+		"start": 0,
+		"end": 24,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 24,
+				"type": "Element",
+				"name": "p",
+				"attributes": [],
+				"children": [
+					{
+						"start": 3,
+						"end": 4,
+						"type": "Text",
+						"raw": " ",
+						"data": " "
+					},
+					{
+						"start": 4,
+						"end": 7,
+						"type": "MustacheTag",
+						"expression": {
+							"type": "Identifier",
+							"start": 5,
+							"end": 6,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 5
+								},
+								"end": {
+									"line": 1,
+									"column": 6
+								}
+							},
+							"name": "a"
+						}
+					},
+					{
+						"start": 7,
+						"end": 8,
+						"type": "Text",
+						"raw": " ",
+						"data": " "
+					},
+					{
+						"start": 8,
+						"end": 11,
+						"type": "MustacheTag",
+						"expression": {
+							"type": "Identifier",
+							"start": 9,
+							"end": 10,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 9
+								},
+								"end": {
+									"line": 1,
+									"column": 10
+								}
+							},
+							"name": "b"
+						}
+					},
+					{
+						"start": 11,
+						"end": 14,
+						"type": "Text",
+						"raw": " : ",
+						"data": " : "
+					},
+					{
+						"start": 14,
+						"end": 17,
+						"type": "MustacheTag",
+						"expression": {
+							"type": "Identifier",
+							"start": 15,
+							"end": 16,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 15
+								},
+								"end": {
+									"line": 1,
+									"column": 16
+								}
+							},
+							"name": "c"
+						}
+					},
+					{
+						"start": 17,
+						"end": 20,
+						"type": "Text",
+						"raw": " : ",
+						"data": " : "
+					}
+				]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/spread/input.svelte b/test/parser/samples/spread/input.svelte
new file mode 100644
index 0000000000..836425cae3
--- /dev/null
+++ b/test/parser/samples/spread/input.svelte
@@ -0,0 +1 @@
+<div {...props}></div>
diff --git a/test/parser/samples/spread/output.json b/test/parser/samples/spread/output.json
new file mode 100644
index 0000000000..3a5c471905
--- /dev/null
+++ b/test/parser/samples/spread/output.json
@@ -0,0 +1,39 @@
+{
+	"html": {
+		"start": 0,
+		"end": 22,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 22,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 15,
+						"type": "Spread",
+						"expression": {
+							"type": "Identifier",
+							"start": 9,
+							"end": 14,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 9
+								},
+								"end": {
+									"line": 1,
+									"column": 14
+								}
+							},
+							"name": "props"
+						}
+					}
+				],
+				"children": []
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/style-inside-head/input.svelte b/test/parser/samples/style-inside-head/input.svelte
new file mode 100644
index 0000000000..512e5b2fb4
--- /dev/null
+++ b/test/parser/samples/style-inside-head/input.svelte
@@ -0,0 +1 @@
+<svelte:head><style></style></svelte:head>
\ No newline at end of file
diff --git a/test/parser/samples/style-inside-head/output.json b/test/parser/samples/style-inside-head/output.json
new file mode 100644
index 0000000000..ae972c5fa8
--- /dev/null
+++ b/test/parser/samples/style-inside-head/output.json
@@ -0,0 +1,33 @@
+{
+	"html": {
+		"start": 0,
+		"end": 42,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 42,
+				"type": "Head",
+				"name": "svelte:head",
+				"attributes": [],
+				"children": [
+					{
+						"start": 13,
+						"end": 28,
+						"type": "Element",
+						"name": "style",
+						"attributes": [],
+						"children": [
+							{
+								"start": 20,
+								"end": 20,
+								"type": "Text",
+								"data": ""
+							}
+						]
+					}
+				]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/textarea-children/input.svelte b/test/parser/samples/textarea-children/input.svelte
new file mode 100644
index 0000000000..6cc3072e5c
--- /dev/null
+++ b/test/parser/samples/textarea-children/input.svelte
@@ -0,0 +1,3 @@
+<textarea>
+	<p>not actually an element. {foo}</p>
+</textarea>
\ No newline at end of file
diff --git a/test/parser/samples/textarea-children/output.json b/test/parser/samples/textarea-children/output.json
new file mode 100644
index 0000000000..cdb4b885d1
--- /dev/null
+++ b/test/parser/samples/textarea-children/output.json
@@ -0,0 +1,53 @@
+{
+	"html": {
+		"start": 0,
+		"end": 61,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 61,
+				"type": "Element",
+				"name": "textarea",
+				"attributes": [],
+				"children": [
+					{
+						"start": 10,
+						"end": 40,
+						"type": "Text",
+						"raw": "\n\t<p>not actually an element. ",
+						"data": "\n\t<p>not actually an element. "
+					},
+					{
+						"start": 40,
+						"end": 45,
+						"type": "MustacheTag",
+						"expression": {
+							"type": "Identifier",
+							"start": 41,
+							"end": 44,
+							"loc": {
+								"start": {
+									"line": 2,
+									"column": 30
+								},
+								"end": {
+									"line": 2,
+									"column": 33
+								}
+							},
+							"name": "foo"
+						}
+					},
+					{
+						"start": 45,
+						"end": 50,
+						"type": "Text",
+						"raw": "</p>\n",
+						"data": "</p>\n"
+					}
+				]
+			}
+		]
+	}
+}
diff --git a/test/parser/samples/textarea-end-tag/input.svelte b/test/parser/samples/textarea-end-tag/input.svelte
new file mode 100644
index 0000000000..8be330cfd0
--- /dev/null
+++ b/test/parser/samples/textarea-end-tag/input.svelte
@@ -0,0 +1,12 @@
+<textarea>
+	<p>not actu </textar ally an element. {foo}</p>
+</textare
+
+
+> </textaread >asdf</textarea
+
+
+</textarea
+
+>
+
diff --git a/test/parser/samples/textarea-end-tag/output.json b/test/parser/samples/textarea-end-tag/output.json
new file mode 100644
index 0000000000..9693db2729
--- /dev/null
+++ b/test/parser/samples/textarea-end-tag/output.json
@@ -0,0 +1,53 @@
+{
+	"html": {
+		"start": 0,
+		"end": 117,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 117,
+				"type": "Element",
+				"name": "textarea",
+				"attributes": [],
+				"children": [
+					{
+						"start": 10,
+						"end": 50,
+						"type": "Text",
+						"raw": "\n\t<p>not actu </textar ally an element. ",
+						"data": "\n\t<p>not actu </textar ally an element. "
+					},
+					{
+						"start": 50,
+						"end": 55,
+						"type": "MustacheTag",
+						"expression": {
+							"type": "Identifier",
+							"start": 51,
+							"end": 54,
+							"loc": {
+								"start": {
+									"line": 2,
+									"column": 40
+								},
+								"end": {
+									"line": 2,
+									"column": 43
+								}
+							},
+							"name": "foo"
+						}
+					},
+					{
+						"start": 55,
+						"end": 91,
+						"type": "Text",
+						"raw": "</p>\n</textare\n\n\n> </textaread >asdf",
+						"data": "</p>\n</textare\n\n\n> </textaread >asdf"
+					}
+				]
+			}
+		]
+	}
+}
diff --git a/test/parser/samples/transition-intro-no-params/input.svelte b/test/parser/samples/transition-intro-no-params/input.svelte
new file mode 100644
index 0000000000..e5e4171434
--- /dev/null
+++ b/test/parser/samples/transition-intro-no-params/input.svelte
@@ -0,0 +1 @@
+<div in:fade>fades in</div>
\ No newline at end of file
diff --git a/test/parser/samples/transition-intro-no-params/output.json b/test/parser/samples/transition-intro-no-params/output.json
new file mode 100644
index 0000000000..91b50f3ec8
--- /dev/null
+++ b/test/parser/samples/transition-intro-no-params/output.json
@@ -0,0 +1,36 @@
+{
+	"html": {
+		"start": 0,
+		"end": 27,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 27,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 12,
+						"type": "Transition",
+						"name": "fade",
+						"modifiers": [],
+						"expression": null,
+						"intro": true,
+						"outro": false
+					}
+				],
+				"children": [
+					{
+						"start": 13,
+						"end": 21,
+						"type": "Text",
+						"raw": "fades in",
+						"data": "fades in"
+					}
+				]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/transition-intro/input.svelte b/test/parser/samples/transition-intro/input.svelte
new file mode 100644
index 0000000000..b9830609d0
--- /dev/null
+++ b/test/parser/samples/transition-intro/input.svelte
@@ -0,0 +1 @@
+<div in:style="{{opacity: 0}}">fades in</div>
\ No newline at end of file
diff --git a/test/parser/samples/transition-intro/output.json b/test/parser/samples/transition-intro/output.json
new file mode 100644
index 0000000000..1e10f40c42
--- /dev/null
+++ b/test/parser/samples/transition-intro/output.json
@@ -0,0 +1,104 @@
+{
+	"html": {
+		"start": 0,
+		"end": 45,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 45,
+				"type": "Element",
+				"name": "div",
+				"attributes": [
+					{
+						"start": 5,
+						"end": 30,
+						"type": "Transition",
+						"name": "style",
+						"modifiers": [],
+						"expression": {
+							"type": "ObjectExpression",
+							"start": 16,
+							"end": 28,
+							"loc": {
+								"start": {
+									"line": 1,
+									"column": 16
+								},
+								"end": {
+									"line": 1,
+									"column": 28
+								}
+							},
+							"properties": [
+								{
+									"type": "Property",
+									"start": 17,
+									"end": 27,
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 17
+										},
+										"end": {
+											"line": 1,
+											"column": 27
+										}
+									},
+									"method": false,
+									"shorthand": false,
+									"computed": false,
+									"key": {
+										"type": "Identifier",
+										"start": 17,
+										"end": 24,
+										"loc": {
+											"start": {
+												"line": 1,
+												"column": 17
+											},
+											"end": {
+												"line": 1,
+												"column": 24
+											}
+										},
+										"name": "opacity"
+									},
+									"value": {
+										"type": "Literal",
+										"start": 26,
+										"end": 27,
+										"loc": {
+											"start": {
+												"line": 1,
+												"column": 26
+											},
+											"end": {
+												"line": 1,
+												"column": 27
+											}
+										},
+										"value": 0,
+										"raw": "0"
+									},
+									"kind": "init"
+								}
+							]
+						},
+						"intro": true,
+						"outro": false
+					}
+				],
+				"children": [
+					{
+						"start": 31,
+						"end": 39,
+						"type": "Text",
+						"raw": "fades in",
+						"data": "fades in"
+					}
+				]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/unusual-identifier/input.svelte b/test/parser/samples/unusual-identifier/input.svelte
new file mode 100644
index 0000000000..192f632ceb
--- /dev/null
+++ b/test/parser/samples/unusual-identifier/input.svelte
@@ -0,0 +1,3 @@
+{#each things as 𐊧}
+	<p>{𐊧}</p>
+{/each}
\ No newline at end of file
diff --git a/test/parser/samples/unusual-identifier/output.json b/test/parser/samples/unusual-identifier/output.json
new file mode 100644
index 0000000000..3d209d35fe
--- /dev/null
+++ b/test/parser/samples/unusual-identifier/output.json
@@ -0,0 +1,68 @@
+{
+	"html": {
+		"start": 0,
+		"end": 41,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 41,
+				"type": "EachBlock",
+				"expression": {
+					"type": "Identifier",
+					"start": 7,
+					"end": 13,
+					"loc": {
+						"start": {
+							"line": 1,
+							"column": 7
+						},
+						"end": {
+							"line": 1,
+							"column": 13
+						}
+					},
+					"name": "things"
+				},
+				"children": [
+					{
+						"start": 22,
+						"end": 33,
+						"type": "Element",
+						"name": "p",
+						"attributes": [],
+						"children": [
+							{
+								"start": 25,
+								"end": 29,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Identifier",
+									"start": 26,
+									"end": 28,
+									"loc": {
+										"start": {
+											"line": 2,
+											"column": 5
+										},
+										"end": {
+											"line": 2,
+											"column": 7
+										}
+									},
+									"name": "𐊧"
+								}
+							}
+						]
+					}
+				],
+				"context": {
+					"type": "Identifier",
+					"name": "𐊧",
+					"start": 17,
+					"end": 19
+				}
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/whitespace-after-script-tag/input.svelte b/test/parser/samples/whitespace-after-script-tag/input.svelte
new file mode 100644
index 0000000000..89cb16cbf0
--- /dev/null
+++ b/test/parser/samples/whitespace-after-script-tag/input.svelte
@@ -0,0 +1,10 @@
+<script>
+	let name = 'world';
+</script     
+
+
+
+
+>
+
+<h1>Hello {name}!</h1>
\ No newline at end of file
diff --git a/test/parser/samples/whitespace-after-script-tag/output.json b/test/parser/samples/whitespace-after-script-tag/output.json
new file mode 100644
index 0000000000..903c392685
--- /dev/null
+++ b/test/parser/samples/whitespace-after-script-tag/output.json
@@ -0,0 +1,150 @@
+{
+	"html": {
+		"start": 51,
+		"end": 73,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 49,
+				"end": 51,
+				"type": "Text",
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"start": 51,
+				"end": 73,
+				"type": "Element",
+				"name": "h1",
+				"attributes": [],
+				"children": [
+					{
+						"start": 55,
+						"end": 61,
+						"type": "Text",
+						"raw": "Hello ",
+						"data": "Hello "
+					},
+					{
+						"start": 61,
+						"end": 67,
+						"type": "MustacheTag",
+						"expression": {
+							"type": "Identifier",
+							"start": 62,
+							"end": 66,
+							"loc": {
+								"start": {
+									"line": 10,
+									"column": 11
+								},
+								"end": {
+									"line": 10,
+									"column": 15
+								}
+							},
+							"name": "name"
+						}
+					},
+					{
+						"start": 67,
+						"end": 68,
+						"type": "Text",
+						"raw": "!",
+						"data": "!"
+					}
+				]
+			}
+		]
+	},
+	"instance": {
+		"type": "Script",
+		"start": 0,
+		"end": 49,
+		"context": "default",
+		"content": {
+			"type": "Program",
+			"start": 8,
+			"end": 30,
+			"loc": {
+				"start": {
+					"line": 1,
+					"column": 0
+				},
+				"end": {
+					"line": 3,
+					"column": 0
+				}
+			},
+			"body": [
+				{
+					"type": "VariableDeclaration",
+					"start": 10,
+					"end": 29,
+					"loc": {
+						"start": {
+							"line": 2,
+							"column": 1
+						},
+						"end": {
+							"line": 2,
+							"column": 20
+						}
+					},
+					"declarations": [
+						{
+							"type": "VariableDeclarator",
+							"start": 14,
+							"end": 28,
+							"loc": {
+								"start": {
+									"line": 2,
+									"column": 5
+								},
+								"end": {
+									"line": 2,
+									"column": 19
+								}
+							},
+							"id": {
+								"type": "Identifier",
+								"start": 14,
+								"end": 18,
+								"loc": {
+									"start": {
+										"line": 2,
+										"column": 5
+									},
+									"end": {
+										"line": 2,
+										"column": 9
+									}
+								},
+								"name": "name"
+							},
+							"init": {
+								"type": "Literal",
+								"start": 21,
+								"end": 28,
+								"loc": {
+									"start": {
+										"line": 2,
+										"column": 12
+									},
+									"end": {
+										"line": 2,
+										"column": 19
+									}
+								},
+								"value": "world",
+								"raw": "'world'"
+							}
+						}
+					],
+					"kind": "let"
+				}
+			],
+			"sourceType": "module"
+		}
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/whitespace-after-style-tag/input.svelte b/test/parser/samples/whitespace-after-style-tag/input.svelte
new file mode 100644
index 0000000000..ae4277b697
--- /dev/null
+++ b/test/parser/samples/whitespace-after-style-tag/input.svelte
@@ -0,0 +1,12 @@
+<div>foo</div>
+
+<style>
+	div {
+		color: red;
+	}
+</style     
+
+
+
+
+>
\ No newline at end of file
diff --git a/test/parser/samples/whitespace-after-style-tag/output.json b/test/parser/samples/whitespace-after-style-tag/output.json
new file mode 100644
index 0000000000..5eee81f034
--- /dev/null
+++ b/test/parser/samples/whitespace-after-style-tag/output.json
@@ -0,0 +1,97 @@
+{
+	"html": {
+		"start": 0,
+		"end": 14,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 14,
+				"type": "Element",
+				"name": "div",
+				"attributes": [],
+				"children": [
+					{
+						"start": 5,
+						"end": 8,
+						"type": "Text",
+						"raw": "foo",
+						"data": "foo"
+					}
+				]
+			},
+			{
+				"start": 14,
+				"end": 16,
+				"type": "Text",
+				"raw": "\n\n",
+				"data": "\n\n"
+			}
+		]
+	},
+	"css": {
+		"type": "Style",
+		"start": 16,
+		"end": 66,
+		"attributes": [],
+		"children": [
+			{
+				"type": "Rule",
+				"prelude": {
+					"type": "SelectorList",
+					"children": [
+						{
+							"type": "Selector",
+							"children": [
+								{
+									"type": "TypeSelector",
+									"name": "div",
+									"start": 25,
+									"end": 28
+								}
+							],
+							"start": 25,
+							"end": 28
+						}
+					],
+					"start": 25,
+					"end": 28
+				},
+				"block": {
+					"type": "Block",
+					"children": [
+						{
+							"type": "Declaration",
+							"important": false,
+							"property": "color",
+							"value": {
+								"type": "Value",
+								"children": [
+									{
+										"type": "Identifier",
+										"name": "red",
+										"start": 40,
+										"end": 43
+									}
+								],
+								"start": 40,
+								"end": 43
+							},
+							"start": 33,
+							"end": 43
+						}
+					],
+					"start": 29,
+					"end": 47
+				},
+				"start": 25,
+				"end": 47
+			}
+		],
+		"content": {
+			"start": 23,
+			"end": 48,
+			"styles": "\n\tdiv {\n\t\tcolor: red;\n\t}\n"
+		}
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/whitespace-leading-trailing/input.svelte b/test/parser/samples/whitespace-leading-trailing/input.svelte
new file mode 100644
index 0000000000..c784c14e9e
--- /dev/null
+++ b/test/parser/samples/whitespace-leading-trailing/input.svelte
@@ -0,0 +1,3 @@
+
+
+				<p>just chillin' over here</p>
\ No newline at end of file
diff --git a/test/parser/samples/whitespace-leading-trailing/output.json b/test/parser/samples/whitespace-leading-trailing/output.json
new file mode 100644
index 0000000000..e4f387856e
--- /dev/null
+++ b/test/parser/samples/whitespace-leading-trailing/output.json
@@ -0,0 +1,32 @@
+{
+	"html": {
+		"start": 6,
+		"end": 36,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 6,
+				"type": "Text",
+				"raw": "\n\n\t\t\t\t",
+				"data": "\n\n\t\t\t\t"
+			},
+			{
+				"start": 6,
+				"end": 36,
+				"type": "Element",
+				"name": "p",
+				"attributes": [],
+				"children": [
+					{
+						"start": 9,
+						"end": 32,
+						"type": "Text",
+						"raw": "just chillin' over here",
+						"data": "just chillin' over here"
+					}
+				]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/samples/whitespace-normal/input.svelte b/test/parser/samples/whitespace-normal/input.svelte
new file mode 100644
index 0000000000..c845c255dd
--- /dev/null
+++ b/test/parser/samples/whitespace-normal/input.svelte
@@ -0,0 +1 @@
+<h1>Hello <strong>{name}! </strong><span>How are you?</span></h1>
diff --git a/test/parser/samples/whitespace-normal/output.json b/test/parser/samples/whitespace-normal/output.json
new file mode 100644
index 0000000000..61eca1329f
--- /dev/null
+++ b/test/parser/samples/whitespace-normal/output.json
@@ -0,0 +1,78 @@
+{
+	"html": {
+		"start": 0,
+		"end": 65,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 65,
+				"type": "Element",
+				"name": "h1",
+				"attributes": [],
+				"children": [
+					{
+						"start": 4,
+						"end": 10,
+						"type": "Text",
+						"raw": "Hello ",
+						"data": "Hello "
+					},
+					{
+						"start": 10,
+						"end": 35,
+						"type": "Element",
+						"name": "strong",
+						"attributes": [],
+						"children": [
+							{
+								"start": 18,
+								"end": 24,
+								"type": "MustacheTag",
+								"expression": {
+									"type": "Identifier",
+									"start": 19,
+									"end": 23,
+									"loc": {
+										"start": {
+											"line": 1,
+											"column": 19
+										},
+										"end": {
+											"line": 1,
+											"column": 23
+										}
+									},
+									"name": "name"
+								}
+							},
+							{
+								"start": 24,
+								"end": 26,
+								"type": "Text",
+								"raw": "! ",
+								"data": "! "
+							}
+						]
+					},
+					{
+						"start": 35,
+						"end": 60,
+						"type": "Element",
+						"name": "span",
+						"attributes": [],
+						"children": [
+							{
+								"start": 41,
+								"end": 53,
+								"type": "Text",
+								"raw": "How are you?",
+								"data": "How are you?"
+							}
+						]
+					}
+				]
+			}
+		]
+	}
+}
\ No newline at end of file
diff --git a/test/parser/update.ts b/test/parser/update.ts
new file mode 100644
index 0000000000..83b8cbc865
--- /dev/null
+++ b/test/parser/update.ts
@@ -0,0 +1,13 @@
+// this file will replace all the output.json files with their _actual.json
+// equivalents. Only use it when you're sure that you haven't
+// broken anything!
+const fs = require('fs');
+const glob = require('tiny-glob/sync.js');
+
+glob('samples/*/_actual.json', { cwd: __dirname }).forEach(file => {
+	const actual = fs.readFileSync(`${__dirname}/${file}`, 'utf-8');
+	fs.writeFileSync(
+		`${__dirname}/${file.replace('_actual.json', 'output.json')}`,
+		actual
+	);
+});
diff --git a/test/preprocess/index.ts b/test/preprocess/index.ts
new file mode 100644
index 0000000000..be898bbbfd
--- /dev/null
+++ b/test/preprocess/index.ts
@@ -0,0 +1,36 @@
+import * as fs from 'fs';
+import * as assert from 'assert';
+import { loadConfig, svelte } from '../helpers';
+
+describe('preprocess', () => {
+	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
+		if (dir[0] === '.') return;
+
+		const config = loadConfig(`${__dirname}/samples/${dir}/_config.js`);
+		const solo = config.solo || /\.solo/.test(dir);
+		const skip = config.skip || /\.skip/.test(dir);
+
+		if (solo && process.env.CI) {
+			throw new Error('Forgot to remove `solo: true` from test');
+		}
+
+		(skip ? it.skip : solo ? it.only : it)(dir, async () => {
+			const input = fs.readFileSync(`${__dirname}/samples/${dir}/input.svelte`, 'utf-8');
+			const expected = fs.readFileSync(`${__dirname}/samples/${dir}/output.svelte`, 'utf-8');
+
+			const result = await svelte.preprocess(
+				input,
+				config.preprocess || {},
+				config.options || { filename: 'input.svelte' }
+			);
+			fs.writeFileSync(`${__dirname}/samples/${dir}/_actual.html`, result.code);
+			if (result.map) {
+				fs.writeFileSync(`${__dirname}/samples/${dir}/_actual.html.map`, JSON.stringify(result.map, null, 2));
+			}
+
+			assert.equal(result.code, expected);
+
+			assert.deepEqual(result.dependencies, config.dependencies || []);
+		});
+	});
+});
diff --git a/test/preprocess/samples/attributes-with-equals/_config.js b/test/preprocess/samples/attributes-with-equals/_config.js
new file mode 100644
index 0000000000..bee4928b1f
--- /dev/null
+++ b/test/preprocess/samples/attributes-with-equals/_config.js
@@ -0,0 +1,5 @@
+export default {
+	preprocess: {
+		style: ({ attributes }) => attributes.foo && attributes.foo.includes('=') ? { code: '' } : null
+	}
+};
diff --git a/test/preprocess/samples/attributes-with-equals/input.svelte b/test/preprocess/samples/attributes-with-equals/input.svelte
new file mode 100644
index 0000000000..4e88284a29
--- /dev/null
+++ b/test/preprocess/samples/attributes-with-equals/input.svelte
@@ -0,0 +1,3 @@
+<style foo="bar=baz">
+	foo {}
+</style>
diff --git a/test/preprocess/samples/attributes-with-equals/output.svelte b/test/preprocess/samples/attributes-with-equals/output.svelte
new file mode 100644
index 0000000000..c194ab682d
--- /dev/null
+++ b/test/preprocess/samples/attributes-with-equals/output.svelte
@@ -0,0 +1 @@
+<style foo="bar=baz"></style>
diff --git a/test/preprocess/samples/comments/_config.js b/test/preprocess/samples/comments/_config.js
new file mode 100644
index 0000000000..fdec377567
--- /dev/null
+++ b/test/preprocess/samples/comments/_config.js
@@ -0,0 +1,8 @@
+export default {
+	preprocess: [
+		{
+			script: ({ content }) => ({ code: content.replace(/one/g, 'two') }),
+			style: ({ content }) => ({ code: content.replace(/one/g, 'three') })
+		}
+	]
+};
diff --git a/test/preprocess/samples/comments/input.svelte b/test/preprocess/samples/comments/input.svelte
new file mode 100644
index 0000000000..1a01971f7f
--- /dev/null
+++ b/test/preprocess/samples/comments/input.svelte
@@ -0,0 +1,25 @@
+<style>
+	one
+</style>
+
+<script>
+	one
+</script>
+
+<!-- <style>
+	one
+</style> -->
+
+<!-- <script>
+	one
+</script> -->
+
+<style>
+<!-- one -->
+</style>
+
+<script>
+<!-- one -->
+</script>
+
+
diff --git a/test/preprocess/samples/comments/output.svelte b/test/preprocess/samples/comments/output.svelte
new file mode 100644
index 0000000000..2d3538af17
--- /dev/null
+++ b/test/preprocess/samples/comments/output.svelte
@@ -0,0 +1,25 @@
+<style>
+	three
+</style>
+
+<script>
+	two
+</script>
+
+<!-- <style>
+	one
+</style> -->
+
+<!-- <script>
+	one
+</script> -->
+
+<style>
+<!-- three -->
+</style>
+
+<script>
+<!-- two -->
+</script>
+
+
diff --git a/test/preprocess/samples/dependencies/_config.js b/test/preprocess/samples/dependencies/_config.js
new file mode 100644
index 0000000000..4656cd98f9
--- /dev/null
+++ b/test/preprocess/samples/dependencies/_config.js
@@ -0,0 +1,15 @@
+export default {
+	preprocess: {
+		style: ({ content }) => {
+			const dependencies = [];
+			const code = content.replace(/@import '(.+)';/g, (match, $1) => {
+				dependencies.push($1);
+				return '/* removed */';
+			});
+
+			return { code, dependencies };
+		}
+	},
+
+	dependencies: ['./foo.css']
+};
diff --git a/test/preprocess/samples/dependencies/input.svelte b/test/preprocess/samples/dependencies/input.svelte
new file mode 100644
index 0000000000..34a12faff6
--- /dev/null
+++ b/test/preprocess/samples/dependencies/input.svelte
@@ -0,0 +1,3 @@
+<style>
+	@import './foo.css';
+</style>
\ No newline at end of file
diff --git a/test/preprocess/samples/dependencies/output.svelte b/test/preprocess/samples/dependencies/output.svelte
new file mode 100644
index 0000000000..d80d51a6fc
--- /dev/null
+++ b/test/preprocess/samples/dependencies/output.svelte
@@ -0,0 +1,3 @@
+<style>
+	/* removed */
+</style>
\ No newline at end of file
diff --git a/test/preprocess/samples/empty-sourcemap/_config.js b/test/preprocess/samples/empty-sourcemap/_config.js
new file mode 100644
index 0000000000..941661ce01
--- /dev/null
+++ b/test/preprocess/samples/empty-sourcemap/_config.js
@@ -0,0 +1,7 @@
+export default {
+	preprocess: {
+		style: ({ content }) => {
+			return { code: content, map: { mappings: '' } };
+		}
+	}
+};
diff --git a/test/preprocess/samples/empty-sourcemap/input.svelte b/test/preprocess/samples/empty-sourcemap/input.svelte
new file mode 100644
index 0000000000..d2380c00cb
--- /dev/null
+++ b/test/preprocess/samples/empty-sourcemap/input.svelte
@@ -0,0 +1,7 @@
+<div class="foo">bar</div>
+
+<style>
+	.foo {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/preprocess/samples/empty-sourcemap/output.svelte b/test/preprocess/samples/empty-sourcemap/output.svelte
new file mode 100644
index 0000000000..d2380c00cb
--- /dev/null
+++ b/test/preprocess/samples/empty-sourcemap/output.svelte
@@ -0,0 +1,7 @@
+<div class="foo">bar</div>
+
+<style>
+	.foo {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/preprocess/samples/filename/_config.js b/test/preprocess/samples/filename/_config.js
new file mode 100644
index 0000000000..161f084730
--- /dev/null
+++ b/test/preprocess/samples/filename/_config.js
@@ -0,0 +1,22 @@
+export default {
+	preprocess: {
+		markup: ({ content, filename }) => {
+			return {
+				code: content.replace('__MARKUP_FILENAME__', filename)
+			};
+		},
+		style: ({ content, filename }) => {
+			return {
+				code: content.replace('__STYLE_FILENAME__', filename)
+			};
+		},
+		script: ({ content, filename }) => {
+			return {
+				code: content.replace('__SCRIPT_FILENAME__', filename)
+			};
+		}
+	},
+	options: {
+		filename: 'file.svelte'
+	}
+};
diff --git a/test/preprocess/samples/filename/input.svelte b/test/preprocess/samples/filename/input.svelte
new file mode 100644
index 0000000000..f03a890f6e
--- /dev/null
+++ b/test/preprocess/samples/filename/input.svelte
@@ -0,0 +1,3 @@
+<h1>Hello __MARKUP_FILENAME__!</h1>
+<style>.red { color: __STYLE_FILENAME__; }</style>
+<script>console.log('__SCRIPT_FILENAME__');</script>
\ No newline at end of file
diff --git a/test/preprocess/samples/filename/output.svelte b/test/preprocess/samples/filename/output.svelte
new file mode 100644
index 0000000000..9eece2e222
--- /dev/null
+++ b/test/preprocess/samples/filename/output.svelte
@@ -0,0 +1,3 @@
+<h1>Hello file.svelte!</h1>
+<style>.red { color: file.svelte; }</style>
+<script>console.log('file.svelte');</script>
\ No newline at end of file
diff --git a/test/preprocess/samples/ignores-null/_config.js b/test/preprocess/samples/ignores-null/_config.js
new file mode 100644
index 0000000000..08ba71c748
--- /dev/null
+++ b/test/preprocess/samples/ignores-null/_config.js
@@ -0,0 +1,5 @@
+export default {
+	preprocess: {
+		script: () => null
+	}
+};
diff --git a/test/preprocess/samples/ignores-null/input.svelte b/test/preprocess/samples/ignores-null/input.svelte
new file mode 100644
index 0000000000..b3fc25b643
--- /dev/null
+++ b/test/preprocess/samples/ignores-null/input.svelte
@@ -0,0 +1,3 @@
+<script>
+	console.log('ignore me');
+</script>
\ No newline at end of file
diff --git a/test/preprocess/samples/ignores-null/output.svelte b/test/preprocess/samples/ignores-null/output.svelte
new file mode 100644
index 0000000000..b3fc25b643
--- /dev/null
+++ b/test/preprocess/samples/ignores-null/output.svelte
@@ -0,0 +1,3 @@
+<script>
+	console.log('ignore me');
+</script>
\ No newline at end of file
diff --git a/test/preprocess/samples/markup/_config.js b/test/preprocess/samples/markup/_config.js
new file mode 100644
index 0000000000..13044d4132
--- /dev/null
+++ b/test/preprocess/samples/markup/_config.js
@@ -0,0 +1,9 @@
+export default {
+	preprocess: {
+		markup: ({ content }) => {
+			return {
+				code: content.replace('__NAME__', 'world')
+			};
+		}
+	}
+};
diff --git a/test/preprocess/samples/markup/input.svelte b/test/preprocess/samples/markup/input.svelte
new file mode 100644
index 0000000000..d65a1a50a6
--- /dev/null
+++ b/test/preprocess/samples/markup/input.svelte
@@ -0,0 +1 @@
+<h1>Hello __NAME__!</h1>
\ No newline at end of file
diff --git a/test/preprocess/samples/markup/output.svelte b/test/preprocess/samples/markup/output.svelte
new file mode 100644
index 0000000000..efe5048cbc
--- /dev/null
+++ b/test/preprocess/samples/markup/output.svelte
@@ -0,0 +1 @@
+<h1>Hello world!</h1>
\ No newline at end of file
diff --git a/test/preprocess/samples/multiple-preprocessors/_config.js b/test/preprocess/samples/multiple-preprocessors/_config.js
new file mode 100644
index 0000000000..d6226203cc
--- /dev/null
+++ b/test/preprocess/samples/multiple-preprocessors/_config.js
@@ -0,0 +1,14 @@
+export default {
+	preprocess: [
+		{
+			markup: ({ content }) => ({ code: content.replace(/one/g, 'two') }),
+			script: ({ content }) => ({ code: content.replace(/three/g, 'four') }),
+			style:  ({ content }) => ({ code: content.replace(/four/g, 'five') })
+		},
+		{
+			markup: ({ content }) => ({ code: content.replace(/two/g, 'three') }),
+			script: ({ content }) => ({ code: content.replace(/four/g, 'five') }),
+			style:  ({ content }) => ({ code: content.replace(/three/g, 'four') })
+		}
+	]
+};
diff --git a/test/preprocess/samples/multiple-preprocessors/input.svelte b/test/preprocess/samples/multiple-preprocessors/input.svelte
new file mode 100644
index 0000000000..6dbbfb47a9
--- /dev/null
+++ b/test/preprocess/samples/multiple-preprocessors/input.svelte
@@ -0,0 +1,11 @@
+<p>one</p>
+
+<style>
+	.one {
+		color: red;
+	}
+</style>
+
+<script>
+	console.log('one');
+</script>
\ No newline at end of file
diff --git a/test/preprocess/samples/multiple-preprocessors/output.svelte b/test/preprocess/samples/multiple-preprocessors/output.svelte
new file mode 100644
index 0000000000..dd6f3e9de8
--- /dev/null
+++ b/test/preprocess/samples/multiple-preprocessors/output.svelte
@@ -0,0 +1,11 @@
+<p>three</p>
+
+<style>
+	.four {
+		color: red;
+	}
+</style>
+
+<script>
+	console.log('five');
+</script>
\ No newline at end of file
diff --git a/test/preprocess/samples/partial-names/_config.js b/test/preprocess/samples/partial-names/_config.js
new file mode 100644
index 0000000000..dadf801581
--- /dev/null
+++ b/test/preprocess/samples/partial-names/_config.js
@@ -0,0 +1,6 @@
+export default {
+	preprocess: {
+		script: () => ({ code: '' }),
+		style: () => ({ code: '' })
+	}
+};
diff --git a/test/preprocess/samples/partial-names/input.svelte b/test/preprocess/samples/partial-names/input.svelte
new file mode 100644
index 0000000000..6875a491a0
--- /dev/null
+++ b/test/preprocess/samples/partial-names/input.svelte
@@ -0,0 +1,12 @@
+<script-foo>
+	foo
+</script-foo>
+<script>
+	// bar
+</script>
+<style-foo>
+	foo
+</style-foo>
+<style>
+	bar {}
+</style>
diff --git a/test/preprocess/samples/partial-names/output.svelte b/test/preprocess/samples/partial-names/output.svelte
new file mode 100644
index 0000000000..34c789a826
--- /dev/null
+++ b/test/preprocess/samples/partial-names/output.svelte
@@ -0,0 +1,8 @@
+<script-foo>
+	foo
+</script-foo>
+<script></script>
+<style-foo>
+	foo
+</style-foo>
+<style></style>
diff --git a/test/preprocess/samples/script-multiple/_config.js b/test/preprocess/samples/script-multiple/_config.js
new file mode 100644
index 0000000000..a523efe9bc
--- /dev/null
+++ b/test/preprocess/samples/script-multiple/_config.js
@@ -0,0 +1,9 @@
+export default {
+	preprocess: {
+		script: ({ content }) => {
+			return {
+				code: content.toLowerCase()
+			};
+		}
+	}
+};
diff --git a/test/preprocess/samples/script-multiple/input.svelte b/test/preprocess/samples/script-multiple/input.svelte
new file mode 100644
index 0000000000..5a5221dc84
--- /dev/null
+++ b/test/preprocess/samples/script-multiple/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	REPLACEME
+</script>
+<style>
+	SHOULD NOT BE REPLACED
+</style>
+<script>
+	REPLACEMETOO
+</script>
\ No newline at end of file
diff --git a/test/preprocess/samples/script-multiple/output.svelte b/test/preprocess/samples/script-multiple/output.svelte
new file mode 100644
index 0000000000..64fe4c1f25
--- /dev/null
+++ b/test/preprocess/samples/script-multiple/output.svelte
@@ -0,0 +1,9 @@
+<script>
+	replaceme
+</script>
+<style>
+	SHOULD NOT BE REPLACED
+</style>
+<script>
+	replacemetoo
+</script>
\ No newline at end of file
diff --git a/test/preprocess/samples/script-self-closing/_config.js b/test/preprocess/samples/script-self-closing/_config.js
new file mode 100644
index 0000000000..ab87c7be1e
--- /dev/null
+++ b/test/preprocess/samples/script-self-closing/_config.js
@@ -0,0 +1,12 @@
+import * as assert from 'assert';
+
+export default {
+	preprocess: {
+		script: ({ content, attributes }) => {
+			assert.equal(content, '');
+			return {
+				code: `console.log("${attributes['the-answer']}");`
+			};
+		}
+	}
+};
diff --git a/test/preprocess/samples/script-self-closing/input.svelte b/test/preprocess/samples/script-self-closing/input.svelte
new file mode 100644
index 0000000000..c5816cb3ba
--- /dev/null
+++ b/test/preprocess/samples/script-self-closing/input.svelte
@@ -0,0 +1 @@
+<script the-answer="42"/>
\ No newline at end of file
diff --git a/test/preprocess/samples/script-self-closing/output.svelte b/test/preprocess/samples/script-self-closing/output.svelte
new file mode 100644
index 0000000000..2912876880
--- /dev/null
+++ b/test/preprocess/samples/script-self-closing/output.svelte
@@ -0,0 +1 @@
+<script the-answer="42">console.log("42");</script>
\ No newline at end of file
diff --git a/test/preprocess/samples/script/_config.js b/test/preprocess/samples/script/_config.js
new file mode 100644
index 0000000000..1a21045465
--- /dev/null
+++ b/test/preprocess/samples/script/_config.js
@@ -0,0 +1,9 @@
+export default {
+	preprocess: {
+		script: ({ content }) => {
+			return {
+				code: content.replace('__THE_ANSWER__', '42')
+			};
+		}
+	}
+};
diff --git a/test/preprocess/samples/script/input.svelte b/test/preprocess/samples/script/input.svelte
new file mode 100644
index 0000000000..8236f6d9d2
--- /dev/null
+++ b/test/preprocess/samples/script/input.svelte
@@ -0,0 +1,3 @@
+<script>
+	console.log(__THE_ANSWER__);
+</script>
\ No newline at end of file
diff --git a/test/preprocess/samples/script/output.svelte b/test/preprocess/samples/script/output.svelte
new file mode 100644
index 0000000000..5bef15aab0
--- /dev/null
+++ b/test/preprocess/samples/script/output.svelte
@@ -0,0 +1,3 @@
+<script>
+	console.log(42);
+</script>
\ No newline at end of file
diff --git a/test/preprocess/samples/style-async/_config.js b/test/preprocess/samples/style-async/_config.js
new file mode 100644
index 0000000000..00298a0bfb
--- /dev/null
+++ b/test/preprocess/samples/style-async/_config.js
@@ -0,0 +1,9 @@
+export default {
+	preprocess: {
+		style: ({ content }) => {
+			return Promise.resolve({
+				code: content.replace('$brand', 'purple')
+			});
+		}
+	}
+};
diff --git a/test/preprocess/samples/style-async/input.svelte b/test/preprocess/samples/style-async/input.svelte
new file mode 100644
index 0000000000..303ac6366a
--- /dev/null
+++ b/test/preprocess/samples/style-async/input.svelte
@@ -0,0 +1,7 @@
+<div class='brand-color'>$brand</div>
+
+<style>
+	.brand-color {
+		color: $brand;
+	}
+</style>
\ No newline at end of file
diff --git a/test/preprocess/samples/style-async/output.svelte b/test/preprocess/samples/style-async/output.svelte
new file mode 100644
index 0000000000..2847cc525a
--- /dev/null
+++ b/test/preprocess/samples/style-async/output.svelte
@@ -0,0 +1,7 @@
+<div class='brand-color'>$brand</div>
+
+<style>
+	.brand-color {
+		color: purple;
+	}
+</style>
\ No newline at end of file
diff --git a/test/preprocess/samples/style-attributes/_config.js b/test/preprocess/samples/style-attributes/_config.js
new file mode 100644
index 0000000000..ac2955397b
--- /dev/null
+++ b/test/preprocess/samples/style-attributes/_config.js
@@ -0,0 +1,14 @@
+import * as assert from 'assert';
+
+export default {
+	preprocess: {
+		style: ({ attributes }) => {
+			assert.deepEqual(attributes, {
+				type: 'text/scss',
+				'data-foo': 'bar',
+				bool: true
+			});
+			return { code: 'PROCESSED' };
+		}
+	}
+};
diff --git a/test/preprocess/samples/style-attributes/input.svelte b/test/preprocess/samples/style-attributes/input.svelte
new file mode 100644
index 0000000000..3a55a5a3f6
--- /dev/null
+++ b/test/preprocess/samples/style-attributes/input.svelte
@@ -0,0 +1 @@
+<style type='text/scss' data-foo="bar" bool></style>
\ No newline at end of file
diff --git a/test/preprocess/samples/style-attributes/output.svelte b/test/preprocess/samples/style-attributes/output.svelte
new file mode 100644
index 0000000000..c83defeebb
--- /dev/null
+++ b/test/preprocess/samples/style-attributes/output.svelte
@@ -0,0 +1 @@
+<style type='text/scss' data-foo="bar" bool>PROCESSED</style>
\ No newline at end of file
diff --git a/test/preprocess/samples/style-self-closing/_config.js b/test/preprocess/samples/style-self-closing/_config.js
new file mode 100644
index 0000000000..af762e8da8
--- /dev/null
+++ b/test/preprocess/samples/style-self-closing/_config.js
@@ -0,0 +1,12 @@
+import * as assert from 'assert';
+
+export default {
+	preprocess: {
+		style: ({ content, attributes: { color } }) => {
+			assert.equal(content, '');
+			return {
+				code: `div { color: ${color}; }`
+			};
+		}
+	}
+};
diff --git a/test/preprocess/samples/style-self-closing/input.svelte b/test/preprocess/samples/style-self-closing/input.svelte
new file mode 100644
index 0000000000..07176c87e5
--- /dev/null
+++ b/test/preprocess/samples/style-self-closing/input.svelte
@@ -0,0 +1,3 @@
+<div class='brand-color'>$brand</div>
+
+<style color="red"/>
\ No newline at end of file
diff --git a/test/preprocess/samples/style-self-closing/output.svelte b/test/preprocess/samples/style-self-closing/output.svelte
new file mode 100644
index 0000000000..c376cd00cb
--- /dev/null
+++ b/test/preprocess/samples/style-self-closing/output.svelte
@@ -0,0 +1,3 @@
+<div class='brand-color'>$brand</div>
+
+<style color="red">div { color: red; }</style>
\ No newline at end of file
diff --git a/test/preprocess/samples/style/_config.js b/test/preprocess/samples/style/_config.js
new file mode 100644
index 0000000000..19da7ea384
--- /dev/null
+++ b/test/preprocess/samples/style/_config.js
@@ -0,0 +1,9 @@
+export default {
+	preprocess: {
+		style: ({ content }) => {
+			return {
+				code: content.replace('$brand', 'purple')
+			};
+		}
+	}
+};
diff --git a/test/preprocess/samples/style/input.svelte b/test/preprocess/samples/style/input.svelte
new file mode 100644
index 0000000000..303ac6366a
--- /dev/null
+++ b/test/preprocess/samples/style/input.svelte
@@ -0,0 +1,7 @@
+<div class='brand-color'>$brand</div>
+
+<style>
+	.brand-color {
+		color: $brand;
+	}
+</style>
\ No newline at end of file
diff --git a/test/preprocess/samples/style/output.svelte b/test/preprocess/samples/style/output.svelte
new file mode 100644
index 0000000000..2847cc525a
--- /dev/null
+++ b/test/preprocess/samples/style/output.svelte
@@ -0,0 +1,7 @@
+<div class='brand-color'>$brand</div>
+
+<style>
+	.brand-color {
+		color: purple;
+	}
+</style>
\ No newline at end of file
diff --git a/test/runtime-puppeteer/assert.js b/test/runtime-puppeteer/assert.js
new file mode 100644
index 0000000000..4ee8d9dda0
--- /dev/null
+++ b/test/runtime-puppeteer/assert.js
@@ -0,0 +1,54 @@
+export function deepEqual(a, b, message) {
+	if (!is_equal(a, b)) {
+		throw new Error(message || `Expected ${JSON.stringify(a)} to equal ${JSON.stringify(b)}`);
+	}
+}
+
+function is_equal(a, b) {
+	if (a && typeof a === 'object') {
+		const is_array = Array.isArray(a);
+		if (Array.isArray(b) !== is_array) return false;
+
+		if (is_array) {
+			if (a.length !== b.length) return false;
+			return a.every((value, i) => is_equal(value, b[i]));
+		}
+
+		const a_keys = Object.keys(a).sort();
+		const b_keys = Object.keys(b).sort();
+		if (a_keys.join(',') !== b_keys.join(',')) return false;
+
+		return a_keys.every(key => is_equal(a[key], b[key]));
+	}
+
+	return a === b;
+}
+
+export function equal(a, b, message) {
+	if (a != b) throw new Error(message || `Expected ${a} to equal ${b}`);
+}
+
+export function ok(condition, message) {
+	if (!condition) throw new Error(message || `Expected ${condition} to be truthy`);
+}
+
+export function htmlEqual(actual, expected, message) {
+	return deepEqual(
+		normalizeHtml(window, actual),
+		normalizeHtml(window, expected),
+		message
+	);
+}
+
+function normalizeHtml(window, html) {
+	try {
+		const node = window.document.createElement('div');
+		node.innerHTML = html
+			.replace(/<!--.*?-->/g, '')
+			.replace(/>[\s\r\n]+</g, '><')
+			.trim();
+		return node.innerHTML.replace(/<\/?noscript\/?>/g, '');
+	} catch (err) {
+		throw new Error(`Failed to normalize HTML:\n${html}`);
+	}
+}
diff --git a/test/runtime-puppeteer/index.ts b/test/runtime-puppeteer/index.ts
new file mode 100644
index 0000000000..8e6f813de4
--- /dev/null
+++ b/test/runtime-puppeteer/index.ts
@@ -0,0 +1,248 @@
+import * as path from 'path';
+import * as fs from 'fs';
+import * as http from 'http';
+import { rollup } from 'rollup';
+import virtual from '@rollup/plugin-virtual';
+import puppeteer from 'puppeteer';
+
+import {
+	loadConfig,
+	loadSvelte,
+	mkdirp,
+	prettyPrintPuppeteerAssertionError,
+	retryAsync,
+	executeBrowserTest
+} from '../helpers';
+import { deepEqual } from 'assert';
+
+const page = `
+<body>
+	<main></main>
+	<script src='/bundle.js'></script>
+</body>
+`;
+
+let svelte;
+let server;
+let code;
+let browser;
+
+const internal = path.resolve('internal/index.mjs');
+const index = path.resolve('index.mjs');
+
+function create_server() {
+	return new Promise((fulfil, reject) => {
+		const server = http.createServer((req, res) => {
+			if (req.url === '/') {
+				res.end(page);
+			}
+
+			if (req.url === '/bundle.js') {
+				res.end(code);
+			}
+		});
+
+		server.on('error', reject);
+
+		server.listen('6789', () => {
+			fulfil(server);
+		});
+	});
+}
+
+async function launchPuppeteer() {
+	return await retryAsync(() => puppeteer.launch());
+}
+
+const assert = fs.readFileSync(`${__dirname}/assert.js`, 'utf-8');
+
+describe('runtime (puppeteer)', function() {
+	// Note: Increase the timeout in preparation for restarting Chromium due to SIGSEGV.
+	this.timeout(10000);
+	before(async () => {
+		svelte = loadSvelte(false);
+		console.log('[runtime-puppeteer] Loaded Svelte');
+		server = await create_server();
+		console.log('[runtime-puppeteer] Started server');
+		browser = await launchPuppeteer();
+		console.log('[runtime-puppeteer] Launched puppeteer browser');
+	});
+
+	after(async () => {
+		if (server) server.close();
+		if (browser) await browser.close();
+	});
+
+	const failed = new Set();
+
+	function runTest(dir, hydrate) {
+		if (dir[0] === '.') return;
+
+		const config = loadConfig(`${__dirname}/samples/${dir}/_config.js`);
+		const solo = config.solo || /\.solo/.test(dir);
+		const skip = config.skip || /\.skip/.test(dir);
+
+		if (hydrate && config.skip_if_hydrate) return;
+
+		if (solo && process.env.CI) {
+			throw new Error('Forgot to remove `solo: true` from test');
+		}
+
+		(skip ? it.skip : solo ? it.only : it)(`${dir} ${hydrate ? '(with hydration)' : ''}`, async () => {
+			if (failed.has(dir)) {
+				// this makes debugging easier, by only printing compiled output once
+				throw new Error('skipping test, already failed');
+			}
+
+			const warnings = [];
+
+			const bundle = await rollup({
+				input: 'main',
+				plugins: [
+					{
+						name: 'testing-runtime-puppeteer',
+						resolveId(importee) {
+							if (importee === 'svelte/internal' || importee === './internal') {
+								return internal;
+							}
+
+							if (importee === 'svelte') {
+								return index;
+							}
+
+							if (importee === 'main') {
+								return 'main';
+							}
+						},
+						load(id) {
+							if (id === 'main') {
+								return `
+									import SvelteComponent from ${JSON.stringify(path.join(__dirname, 'samples', dir, 'main.svelte'))};
+									import config from ${JSON.stringify(path.join(__dirname, 'samples', dir, '_config.js'))};
+									import * as assert from 'assert';
+
+									export default async function (target) {
+										let unhandled_rejection = false;
+										function unhandled_rejection_handler(event) {
+											unhandled_rejection = event.reason;
+										}
+										window.addEventListener('unhandledrejection', unhandled_rejection_handler);
+
+										try {
+											if (config.before_test) config.before_test();
+
+											const options = Object.assign({}, {
+												target,
+												hydrate: ${String(!!hydrate)},
+												props: config.props,
+												intro: config.intro
+											}, config.options || {});
+
+											const component = new SvelteComponent(options);
+
+											if (config.html) {
+												assert.htmlEqual(target.innerHTML, config.html);
+											}
+
+											if (config.test) {
+												await config.test({
+													assert,
+													component,
+													target,
+													window,
+												});
+
+												component.$destroy();
+
+												if (unhandled_rejection) {
+													throw unhandled_rejection;
+												}
+											} else {
+												component.$destroy();
+												assert.htmlEqual(target.innerHTML, '');
+
+												if (unhandled_rejection) {
+													throw unhandled_rejection;
+												}
+											}
+
+											if (config.after_test) config.after_test();
+										} catch (error) {
+											if (config.error) {
+												assert.equal(err.message, config.error);
+											} else {
+												throw error;
+											}
+										} finally {
+											window.removeEventListener('unhandledrejection', unhandled_rejection_handler);
+										}
+									}
+								`;
+							}
+							return null;
+						},
+						transform(code, id) {
+							if (id.endsWith('.svelte')) {
+								const compiled = svelte.compile(code.replace(/\r/g, ''), {
+									...config.compileOptions,
+									hydratable: hydrate,
+									immutable: config.immutable,
+									accessors: 'accessors' in config ? config.accessors : true
+								});
+
+								const out_dir = `${__dirname}/samples/${dir}/_output/${hydrate ? 'hydratable' : 'normal'}`;
+								const out = `${out_dir}/${path.basename(id).replace(/\.svelte$/, '.js')}`;
+
+								if (fs.existsSync(out)) {
+									fs.unlinkSync(out);
+								}
+
+								mkdirp(out_dir);
+								fs.writeFileSync(out, compiled.js.code, 'utf8');
+
+								compiled.warnings.forEach(w => warnings.push(w));
+
+								return compiled.js;
+							}
+						}
+					},
+					virtual({ assert })
+				]
+			});
+
+			const result = await bundle.generate({ format: 'iife', name: 'test' });
+			code = result.output[0].code;
+
+			function assertWarnings() {
+				if (config.warnings) {
+					deepEqual(warnings.map(w => ({
+						code: w.code,
+						message: w.message,
+						pos: w.pos,
+						start: w.start,
+						end: w.end
+					})), config.warnings);
+				} else if (warnings.length) {
+					failed.add(dir);
+					/* eslint-disable no-unsafe-finally */
+					throw new Error('Received unexpected warnings');
+				}
+			}
+
+			browser = await executeBrowserTest(
+				browser,
+				launchPuppeteer,
+				assertWarnings,
+				(err) => {
+					failed.add(dir);
+					prettyPrintPuppeteerAssertionError(err.message);
+					assertWarnings();
+				});
+		});
+	}
+
+	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
+		runTest(dir, false);
+		runTest(dir, true);
+	});
+});
diff --git a/test/runtime-puppeteer/samples/component-css-custom-properties-dynamic/Slider.svelte b/test/runtime-puppeteer/samples/component-css-custom-properties-dynamic/Slider.svelte
new file mode 100644
index 0000000000..4863966f85
--- /dev/null
+++ b/test/runtime-puppeteer/samples/component-css-custom-properties-dynamic/Slider.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>
\ No newline at end of file
diff --git a/test/runtime-puppeteer/samples/component-css-custom-properties-dynamic/_config.js b/test/runtime-puppeteer/samples/component-css-custom-properties-dynamic/_config.js
new file mode 100644
index 0000000000..96965c223b
--- /dev/null
+++ b/test/runtime-puppeteer/samples/component-css-custom-properties-dynamic/_config.js
@@ -0,0 +1,41 @@
+export default {
+	props: {
+		railColor1: 'black',
+		trackColor1: 'red',
+		railColor2: 'green',
+		trackColor2: 'blue'
+	},
+	html: `
+		<div style="display: contents; --rail-color:black; --track-color:red;">
+			<div id="slider-1">
+				<p class="svelte-17ay6rc">Slider</p>
+				<span class="svelte-17ay6rc">Track</span>
+			</div>
+		</div>
+		<div style="display: contents; --rail-color:green; --track-color:blue;">
+			<div id="slider-2">
+				<p class="svelte-17ay6rc">Slider</p>
+				<span class="svelte-17ay6rc">Track</span>
+			</div>
+		</div>
+	`,
+	test({ component, assert, target }) {
+		component.railColor1 = 'yellow';
+		component.trackColor2 = 'orange';
+
+		assert.htmlEqual(target.innerHTML, `
+			<div style="display: contents; --rail-color:yellow; --track-color:red;">
+				<div id="slider-1">
+					<p class="svelte-17ay6rc">Slider</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+			</div>
+			<div style="display: contents; --rail-color:green; --track-color:orange;">
+				<div id="slider-2">
+					<p class="svelte-17ay6rc">Slider</p>
+					<span class="svelte-17ay6rc">Track</span>
+				</div>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime-puppeteer/samples/component-css-custom-properties-dynamic/main.svelte b/test/runtime-puppeteer/samples/component-css-custom-properties-dynamic/main.svelte
new file mode 100644
index 0000000000..94e68e38a2
--- /dev/null
+++ b/test/runtime-puppeteer/samples/component-css-custom-properties-dynamic/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import Slider from './Slider.svelte';
+	export let railColor1;
+	export let railColor2;
+	export let trackColor1;
+	export let trackColor2;
+
+	function identity(color) {
+		return color;
+	}
+</script>
+
+<Slider
+	id="slider-1"
+	--rail-color={railColor1}
+	--track-color={trackColor1}
+/>
+
+<Slider
+	id="slider-2"
+	--rail-color={railColor2}
+	--track-color={identity(trackColor2)}
+/>
\ No newline at end of file
diff --git a/test/runtime-puppeteer/samples/component-css-custom-properties/Slider.svelte b/test/runtime-puppeteer/samples/component-css-custom-properties/Slider.svelte
new file mode 100644
index 0000000000..4863966f85
--- /dev/null
+++ b/test/runtime-puppeteer/samples/component-css-custom-properties/Slider.svelte
@@ -0,0 +1,17 @@
+<script>
+  export let id;
+</script>
+
+<div {id}>
+  <p>Slider</p>
+  <span>Track</span>
+</div>
+
+<style>
+  p {
+    color: var(--rail-color);
+  }
+  span {
+    color: var(--track-color);
+  }
+</style>
\ No newline at end of file
diff --git a/test/runtime-puppeteer/samples/component-css-custom-properties/_config.js b/test/runtime-puppeteer/samples/component-css-custom-properties/_config.js
new file mode 100644
index 0000000000..9c3b7cbdea
--- /dev/null
+++ b/test/runtime-puppeteer/samples/component-css-custom-properties/_config.js
@@ -0,0 +1,27 @@
+export default {
+	html: `
+		<div style="display: contents; --rail-color:rgb(0, 0, 0); --track-color:rgb(255, 0, 0);">
+			<div id="slider-1">
+				<p class="svelte-17ay6rc">Slider</p>
+				<span class="svelte-17ay6rc">Track</span>
+			</div>
+		</div>
+		<div style="display: contents; --rail-color:rgb(0, 255, 0); --track-color:rgb(0, 0, 255);">
+			<div id="slider-2">
+				<p class="svelte-17ay6rc">Slider</p>
+				<span class="svelte-17ay6rc">Track</span>
+			</div>
+		</div>
+	`,
+	test({ target, window, assert }) {
+		const railColor1 = target.querySelector('#slider-1 p');
+		const trackColor1 = target.querySelector('#slider-1 span');
+		const railColor2 = target.querySelector('#slider-2 p');
+		const trackColor2 = target.querySelector('#slider-2 span');
+
+		assert.htmlEqual(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
+		assert.htmlEqual(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
+		assert.htmlEqual(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
+		assert.htmlEqual(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
+	}
+};
diff --git a/test/runtime-puppeteer/samples/component-css-custom-properties/main.svelte b/test/runtime-puppeteer/samples/component-css-custom-properties/main.svelte
new file mode 100644
index 0000000000..0d92b7ae87
--- /dev/null
+++ b/test/runtime-puppeteer/samples/component-css-custom-properties/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Slider from './Slider.svelte';
+</script>
+
+<Slider
+	id="slider-1"
+	--rail-color="rgb(0, 0, 0)"
+	--track-color="rgb(255, 0, 0)"
+/>
+
+<Slider
+	id="slider-2"
+	--rail-color="rgb(0, 255, 0)"
+	--track-color="rgb(0, 0, 255)"
+/>
\ No newline at end of file
diff --git a/test/runtime/index.ts b/test/runtime/index.ts
new file mode 100644
index 0000000000..f3c962f1d9
--- /dev/null
+++ b/test/runtime/index.ts
@@ -0,0 +1,322 @@
+import * as path from 'path';
+import * as fs from 'fs';
+import { rollup } from 'rollup';
+import virtual from '@rollup/plugin-virtual';
+import glob from 'tiny-glob/sync.js';
+import { clear_loops, flush, set_now, set_raf } from '../../internal';
+
+import {
+	assert,
+	showOutput,
+	loadConfig,
+	loadSvelte,
+	cleanRequireCache,
+	env,
+	setupHtmlEqual,
+	mkdirp
+} from '../helpers';
+
+let svelte$;
+let svelte;
+
+let compileOptions = null;
+let compile = null;
+
+const sveltePath = process.cwd().split('\\').join('/');
+
+let unhandled_rejection = false;
+function unhandledRejection_handler(err) {
+	unhandled_rejection = err;
+}
+
+describe('runtime', () => {
+	before(() => {
+		process.on('unhandledRejection', unhandledRejection_handler);
+		svelte = loadSvelte(false);
+		svelte$ = loadSvelte(true);
+
+		require.extensions['.svelte'] = function(module, filename) {
+			const options = Object.assign({
+				filename
+			}, compileOptions);
+
+			const { js: { code } } = compile(fs.readFileSync(filename, 'utf-8').replace(/\r/g, ''), options);
+
+			return module._compile(code, filename);
+		};
+
+		return setupHtmlEqual();
+	});
+	after(() => process.removeListener('unhandledRejection', unhandledRejection_handler));
+
+	const failed = new Set();
+
+	function runTest(dir, hydrate, from_ssr_html) {
+		if (dir[0] === '.') return;
+
+		const config = loadConfig(`${__dirname}/samples/${dir}/_config.js`);
+		const solo = config.solo || /\.solo/.test(dir);
+
+		if (hydrate && config.skip_if_hydrate) return;
+		if (hydrate && from_ssr_html && config.skip_if_hydrate_from_ssr) return;
+
+		if (solo && process.env.CI) {
+			throw new Error('Forgot to remove `solo: true` from test');
+		}
+
+		const testName = `${dir} ${hydrate ? `(with hydration${from_ssr_html ? ' from ssr rendered html' : ''})` : ''}`;
+		(config.skip ? it.skip : solo ? it.only : it)(testName, (done) => {
+			if (failed.has(dir)) {
+				// this makes debugging easier, by only printing compiled output once
+				throw new Error('skipping test, already failed');
+			}
+
+			unhandled_rejection = null;
+
+			compile = (config.preserveIdentifiers ? svelte : svelte$).compile;
+
+			const cwd = path.resolve(`${__dirname}/samples/${dir}`);
+
+			compileOptions = config.compileOptions || {};
+			compileOptions.format = 'cjs';
+			compileOptions.sveltePath = sveltePath;
+			compileOptions.hydratable = hydrate;
+			compileOptions.immutable = config.immutable;
+			compileOptions.accessors = 'accessors' in config ? config.accessors : true;
+
+			cleanRequireCache();
+
+			let mod;
+			let SvelteComponent;
+
+			let unintendedError = null;
+
+			const window = env();
+
+			glob('**/*.svelte', { cwd }).forEach(file => {
+				if (file[0] === '_') return;
+
+				const dir = `${cwd}/_output/${hydrate ? 'hydratable' : 'normal'}`;
+				const out = `${dir}/${file.replace(/\.svelte$/, '.js')}`;
+
+				if (fs.existsSync(out)) {
+					fs.unlinkSync(out);
+				}
+
+				mkdirp(dir);
+
+				try {
+					const { js } = compile(
+						fs.readFileSync(`${cwd}/${file}`, 'utf-8').replace(/\r/g, ''),
+						{
+							...compileOptions,
+							filename: file
+						}
+					);
+
+					fs.writeFileSync(out, js.code);
+				} catch (err) {
+					// do nothing
+				}
+			});
+
+			Promise.resolve()
+				.then(() => {
+					// hack to support transition tests
+					clear_loops();
+
+					const raf = {
+						time: 0,
+						callback: null,
+						tick: now => {
+							raf.time = now;
+							if (raf.callback) raf.callback();
+						}
+					};
+					set_now(() => raf.time);
+					set_raf(cb => {
+						raf.callback = () => {
+							raf.callback = null;
+							cb(raf.time);
+							flush();
+						};
+					});
+
+					try {
+						mod = require(`./samples/${dir}/main.svelte`);
+						SvelteComponent = mod.default;
+					} catch (err) {
+						showOutput(cwd, compileOptions, compile); // eslint-disable-line no-console
+						throw err;
+					}
+
+					// Put things we need on window for testing
+					window.SvelteComponent = SvelteComponent;
+
+					const target = window.document.querySelector('main');
+
+					if (hydrate && from_ssr_html) {
+						// ssr into target
+						compileOptions.generate = 'ssr';
+						cleanRequireCache();
+						const SsrSvelteComponent = require(`./samples/${dir}/main.svelte`).default;
+						const { html } = SsrSvelteComponent.render(config.props);
+						target.innerHTML = html;
+						delete compileOptions.generate;
+					} else {
+						target.innerHTML = '';
+					}
+
+					if (config.before_test) config.before_test();
+
+					const warnings = [];
+					const warn = console.warn;
+					console.warn = warning => {
+						warnings.push(warning);
+					};
+
+					const options = Object.assign({}, {
+						target,
+						hydrate,
+						props: config.props,
+						intro: config.intro
+					}, config.options || {});
+
+					const component = new SvelteComponent(options);
+
+					console.warn = warn;
+
+					if (config.error) {
+						unintendedError = true;
+						throw new Error('Expected a runtime error');
+					}
+
+					if (config.warnings) {
+						assert.deepEqual(warnings, config.warnings);
+					} else if (warnings.length) {
+						unintendedError = true;
+						throw new Error('Received unexpected warnings');
+					}
+
+					if (config.html) {
+						assert.htmlEqual(target.innerHTML, config.html);
+					}
+
+					if (config.test) {
+						return Promise.resolve(config.test({
+							assert,
+							component,
+							mod,
+							target,
+							window,
+							raf,
+							compileOptions
+						})).then(() => {
+							component.$destroy();
+
+							if (unhandled_rejection) {
+								throw unhandled_rejection;
+							}
+						});
+					} else {
+						component.$destroy();
+						assert.htmlEqual(target.innerHTML, '');
+
+						if (unhandled_rejection) {
+							throw unhandled_rejection;
+						}
+					}
+				})
+				.catch(err => {
+					if (config.error && !unintendedError) {
+						if (typeof config.error === 'function') {
+							config.error(assert, err);
+						} else {
+							assert.equal(err.message, config.error);
+						}
+					} else {
+						throw err;
+					}
+				}).catch(err => {
+					failed.add(dir);
+					showOutput(cwd, compileOptions, compile); // eslint-disable-line no-console
+					throw err;
+				})
+				.catch(err => {
+					// print a clickable link to open the directory
+					err.stack += `\n\ncmd-click: ${path.relative(process.cwd(), cwd)}/main.svelte`;
+					done(err);
+					throw err;
+				})
+				.then(() => {
+					if (config.show) {
+						showOutput(cwd, compileOptions, compile);
+					}
+
+					flush();
+
+					if (config.after_test) config.after_test();
+					done();
+				});
+		});
+	}
+
+	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
+		runTest(dir, false);
+		runTest(dir, true, false);
+		runTest(dir, true, true);
+	});
+
+	async function create_component(src = '<div></div>') {
+		const { js } = svelte$.compile(src, {
+			format: 'esm',
+			name: 'SvelteComponent',
+			dev: true
+		});
+
+		const bundle = await rollup({
+			input: 'main.js',
+			plugins: [
+				virtual({
+					'main.js': js.code
+				}),
+				{
+					name: 'svelte-packages',
+					resolveId: (importee) => {
+						if (importee.startsWith('svelte/')) {
+							return importee.replace('svelte', process.cwd()) + '/index.mjs';
+						}
+					}
+				}
+			]
+		});
+
+		const result = await bundle.generate({
+			format: 'iife',
+			name: 'App'
+		});
+
+		return eval(
+			`(function () { ${result.output[0].code}; return App; }())`
+		);
+	}
+
+	it('fails if options.target is missing in dev mode', async () => {
+		const App = await create_component();
+
+		assert.throws(() => {
+			new App();
+		}, /'target' is a required option/);
+	});
+
+	it('fails if options.hydrate is true but the component is non-hydratable', async () => {
+		const App = await create_component();
+
+		assert.throws(() => {
+			new App({
+				target: { childNodes: [] },
+				hydrate: true
+			});
+		}, /options.hydrate only works if the component was compiled with the `hydratable: true` option/);
+	});
+});
diff --git a/test/runtime/samples/$$rest-without-props/App.svelte b/test/runtime/samples/$$rest-without-props/App.svelte
new file mode 100644
index 0000000000..e98fec30d4
--- /dev/null
+++ b/test/runtime/samples/$$rest-without-props/App.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let a;
+	export function b() {}
+	export let c = 1;
+
+	$: length = Object.keys($$restProps).length;
+	$: values = Object.values($$restProps);
+</script>
+<div>Length: {length}</div>
+<div>Values: {values.join(',')}</div>
+
+<div {...$$restProps} />
\ No newline at end of file
diff --git a/test/runtime/samples/$$rest-without-props/_config.js b/test/runtime/samples/$$rest-without-props/_config.js
new file mode 100644
index 0000000000..1fb8e85a6a
--- /dev/null
+++ b/test/runtime/samples/$$rest-without-props/_config.js
@@ -0,0 +1,54 @@
+export default {
+	props: {
+		a: 3,
+		b: 4,
+		c: 5,
+		d: 6
+	},
+	html: `
+		<div>Length: 3</div>
+		<div>Values: 4,5,1</div>
+		<div d="4" e="5" foo="1"></div>
+		<button></button><button></button><button></button><button></button>
+	`,
+	async test({ assert, target, window }) {
+		const [btn1, btn2, btn3, btn4] = target.querySelectorAll('button');
+		const clickEvent = new window.MouseEvent('click');
+
+		await btn1.dispatchEvent(clickEvent);
+		
+		assert.htmlEqual(target.innerHTML, `
+			<div>Length: 3</div>
+			<div>Values: 4,5,1</div>
+			<div d="4" e="5" foo="1"></div>
+			<button></button><button></button><button></button><button></button>
+		`);
+
+		await btn2.dispatchEvent(clickEvent);
+		
+		assert.htmlEqual(target.innerHTML, `
+			<div>Length: 3</div>
+			<div>Values: 34,5,1</div>
+			<div d="34" e="5" foo="1"></div>
+			<button></button><button></button><button></button><button></button>
+		`);
+
+		await btn3.dispatchEvent(clickEvent);
+		
+		assert.htmlEqual(target.innerHTML, `
+			<div>Length: 3</div>
+			<div>Values: 34,5,31</div>
+			<div d="34" e="5" foo="31"></div>
+			<button></button><button></button><button></button><button></button>
+		`);
+
+		await btn4.dispatchEvent(clickEvent);
+		
+		assert.htmlEqual(target.innerHTML, `
+			<div>Length: 4</div>
+			<div>Values: 34,5,31,2</div>
+			<div d="34" e="5" foo="31" bar="2"></div>
+			<button></button><button></button><button></button><button></button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/$$rest-without-props/main.svelte b/test/runtime/samples/$$rest-without-props/main.svelte
new file mode 100644
index 0000000000..21b2690584
--- /dev/null
+++ b/test/runtime/samples/$$rest-without-props/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	import App from './App.svelte';
+	let a = 1, b = 2, c = 3, d = 4, e = 5;
+	let f = { foo: 1 };
+
+	function updateProps() {
+		a = 31;
+		b = 32;
+	}
+	function updateRest() {
+		d = 34;
+	}
+	function updateSpread() {
+		f.foo = 31;
+	}
+	function updateSpread2() {
+		f.bar = 2;
+	}
+</script>
+
+<App {a} {b} {c} {d} {e} {...f} />
+<button on:click={updateProps}></button>
+<button on:click={updateRest}></button>
+<button on:click={updateSpread}></button>
+<button on:click={updateSpread2}></button>
\ No newline at end of file
diff --git a/test/runtime/samples/$$rest/App.svelte b/test/runtime/samples/$$rest/App.svelte
new file mode 100644
index 0000000000..875372f670
--- /dev/null
+++ b/test/runtime/samples/$$rest/App.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let a;
+	export function b() {}
+	export let c = 1;
+
+	$: length = Object.keys($$restProps).length;
+	$: values = Object.values($$restProps);
+</script>
+<div>Length: {length}</div>
+<div>Values: {values.join(',')}</div>
+
+<div {...$$restProps} />
+<div {...$$props} />
\ No newline at end of file
diff --git a/test/runtime/samples/$$rest/_config.js b/test/runtime/samples/$$rest/_config.js
new file mode 100644
index 0000000000..f00c26d712
--- /dev/null
+++ b/test/runtime/samples/$$rest/_config.js
@@ -0,0 +1,60 @@
+export default {
+	props: {
+		a: 3,
+		b: 4,
+		c: 5,
+		d: 6
+	},
+	html: `
+		<div>Length: 3</div>
+		<div>Values: 4,5,1</div>
+		<div d="4" e="5" foo="1"></div>
+		<div a="1" b="2" c="3" d="4" e="5" foo="1"></div>
+		<button></button><button></button><button></button><button></button>
+	`,
+
+	async test({ assert, target, window }) {
+		const [btn1, btn2, btn3, btn4] = target.querySelectorAll('button');
+		const clickEvent = new window.MouseEvent('click');
+
+		await btn1.dispatchEvent(clickEvent);
+		
+		assert.htmlEqual(target.innerHTML, `
+			<div>Length: 3</div>
+			<div>Values: 4,5,1</div>
+			<div d="4" e="5" foo="1"></div>
+			<div a="31" b="32" c="3" d="4" e="5" foo="1"></div>
+			<button></button><button></button><button></button><button></button>
+		`);
+
+		await btn2.dispatchEvent(clickEvent);
+		
+		assert.htmlEqual(target.innerHTML, `
+			<div>Length: 3</div>
+			<div>Values: 34,5,1</div>
+			<div d="34" e="5" foo="1"></div>
+			<div a="31" b="32" c="3" d="34" e="5" foo="1"></div>
+			<button></button><button></button><button></button><button></button>
+		`);
+
+		await btn3.dispatchEvent(clickEvent);
+		
+		assert.htmlEqual(target.innerHTML, `
+			<div>Length: 3</div>
+			<div>Values: 34,5,31</div>
+			<div d="34" e="5" foo="31"></div>
+			<div a="31" b="32" c="3" d="34" e="5" foo="31"></div>
+			<button></button><button></button><button></button><button></button>
+		`);
+
+		await btn4.dispatchEvent(clickEvent);
+		
+		assert.htmlEqual(target.innerHTML, `
+			<div>Length: 4</div>
+			<div>Values: 34,5,31,2</div>
+			<div d="34" e="5" foo="31" bar="2"></div>
+			<div a="31" b="32" c="3" d="34" e="5" foo="31" bar="2"></div>
+			<button></button><button></button><button></button><button></button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/$$rest/main.svelte b/test/runtime/samples/$$rest/main.svelte
new file mode 100644
index 0000000000..21b2690584
--- /dev/null
+++ b/test/runtime/samples/$$rest/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	import App from './App.svelte';
+	let a = 1, b = 2, c = 3, d = 4, e = 5;
+	let f = { foo: 1 };
+
+	function updateProps() {
+		a = 31;
+		b = 32;
+	}
+	function updateRest() {
+		d = 34;
+	}
+	function updateSpread() {
+		f.foo = 31;
+	}
+	function updateSpread2() {
+		f.bar = 2;
+	}
+</script>
+
+<App {a} {b} {c} {d} {e} {...f} />
+<button on:click={updateProps}></button>
+<button on:click={updateRest}></button>
+<button on:click={updateSpread}></button>
+<button on:click={updateSpread2}></button>
\ No newline at end of file
diff --git a/test/runtime/samples/$$slot/A.svelte b/test/runtime/samples/$$slot/A.svelte
new file mode 100644
index 0000000000..ffa166166c
--- /dev/null
+++ b/test/runtime/samples/$$slot/A.svelte
@@ -0,0 +1,31 @@
+<script>
+	let data = '';
+
+	if ($$slots.b) {
+		data = 'foo';
+	}
+
+	export function getData() {
+		return data;
+	}
+
+	function toString(data) {
+		const result = {};
+		const sortedKeys = Object.keys(data).sort();
+		sortedKeys.forEach(key => result[key] = data[key]);
+		return JSON.stringify(result);
+	}
+</script>
+
+<slot></slot>
+<slot name="a"></slot>
+
+$$slots: {toString($$slots)}
+
+{#if $$slots.b}
+	<div>
+		<slot name="b"></slot>
+	</div>
+{:else}
+	Slot b is not available
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/$$slot/_config.js b/test/runtime/samples/$$slot/_config.js
new file mode 100644
index 0000000000..46e435ae97
--- /dev/null
+++ b/test/runtime/samples/$$slot/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<span>bye</span><span>world</span>
+		<span slot="a">hello world</span>
+		$$slots: {"a":true,"default":true}
+		Slot b is not available
+
+		<span>bye world</span>
+		<span slot="a">hello world</span>
+		$$slots: {"a":true,"b":true,"default":true}
+		<div><span slot="b">hello world</span></div>
+	`,
+
+	async test({ assert, component }) {
+		assert.equal(component.getA(), '');
+		assert.equal(component.getB(), 'foo');
+	}
+};
diff --git a/test/runtime/samples/$$slot/main.svelte b/test/runtime/samples/$$slot/main.svelte
new file mode 100644
index 0000000000..8b7efae573
--- /dev/null
+++ b/test/runtime/samples/$$slot/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import A from "./A.svelte";
+	let a, b;
+
+	export function getA() {
+		return a.getData();
+	}
+	export function getB() {
+		return b.getData();
+	}
+</script>
+
+<A bind:this={a}>
+  <span slot="a">hello world</span>
+  <span>bye</span>
+  <span>world</span>
+</A>
+
+<A bind:this={b}>
+  <span slot="a">hello world</span>
+  <span slot="b">hello world</span>
+  <span>bye world</span>
+</A>
diff --git a/test/runtime/samples/action-body/_config.js b/test/runtime/samples/action-body/_config.js
new file mode 100644
index 0000000000..c882499e0e
--- /dev/null
+++ b/test/runtime/samples/action-body/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: '<div></div>',
+
+	async test({ assert, target, window }) {
+		const enter = new window.MouseEvent('mouseenter');
+		const leave = new window.MouseEvent('mouseleave');
+
+		await window.document.body.dispatchEvent(enter);
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<div class="tooltip">Perform an Action</div>
+			</div>
+		`);
+
+		await window.document.body.dispatchEvent(leave);
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+	}
+};
diff --git a/test/runtime/samples/action-body/main.svelte b/test/runtime/samples/action-body/main.svelte
new file mode 100644
index 0000000000..dd57116577
--- /dev/null
+++ b/test/runtime/samples/action-body/main.svelte
@@ -0,0 +1,32 @@
+<script>
+	let container;
+	function tooltip(node, text) {
+		let tooltip = null;
+
+		function onMouseEnter() {
+			tooltip = document.createElement('div');
+			tooltip.classList.add('tooltip');
+			tooltip.textContent = text;
+			container.appendChild(tooltip);
+		}
+
+		function onMouseLeave() {
+			if (!tooltip) return;
+			tooltip.remove();
+			tooltip = null;
+		}
+
+		node.addEventListener('mouseenter', onMouseEnter);
+		node.addEventListener('mouseleave', onMouseLeave);
+		
+		return {
+			destroy() {
+				node.removeEventListener('mouseenter', onMouseEnter);
+				node.removeEventListener('mouseleave', onMouseLeave);
+			}
+		}
+	}
+</script>
+
+<svelte:body use:tooltip="{'Perform an Action'}" />
+<div bind:this={container} />
\ No newline at end of file
diff --git a/test/runtime/samples/action-custom-event-handler-in-each-destructured/_config.js b/test/runtime/samples/action-custom-event-handler-in-each-destructured/_config.js
new file mode 100644
index 0000000000..3bd0fd985f
--- /dev/null
+++ b/test/runtime/samples/action-custom-event-handler-in-each-destructured/_config.js
@@ -0,0 +1,30 @@
+export default {
+	html: `
+		<button>0: foo</button>
+		<button>1: bar</button>
+		<button>2: baz</button>
+
+		<p>first: </p>
+		<p>second: </p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const event = new window.MouseEvent('click');
+
+		const buttons = target.querySelectorAll('button');
+
+		await buttons[1].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>0: foo</button>
+			<button>1: bar</button>
+			<button>2: baz</button>
+
+			<p>first: 1</p>
+			<p>second: bar</p>
+		`);
+
+		assert.equal(component.first, '1');
+		assert.equal(component.second, 'bar');
+	}
+};
diff --git a/test/runtime/samples/action-custom-event-handler-in-each-destructured/main.svelte b/test/runtime/samples/action-custom-event-handler-in-each-destructured/main.svelte
new file mode 100644
index 0000000000..a83d3041e6
--- /dev/null
+++ b/test/runtime/samples/action-custom-event-handler-in-each-destructured/main.svelte
@@ -0,0 +1,30 @@
+<script>
+	export let items = [[0, 'foo'], [1, 'bar'], [2, 'baz']];
+	export let first = '';
+	export let second = '';
+	export let x = 0;
+	export let y = 0;
+
+	function tap(node, callback) {
+		function clickHandler(event) {
+			callback();
+		}
+
+		node.addEventListener('click', clickHandler, false);
+
+		return {
+			destroy() {
+				node.addEventListener('click', clickHandler, false);
+			}
+		};
+	}
+</script>
+
+{#each items as [item0, item1]}
+	<button use:tap='{() => (first = item0, second = item1)}'>
+		{item0}: {item1}
+	</button>
+{/each}
+
+<p>first: {first}</p>
+<p>second: {second}</p>
diff --git a/test/runtime/samples/action-custom-event-handler-in-each/_config.js b/test/runtime/samples/action-custom-event-handler-in-each/_config.js
new file mode 100644
index 0000000000..abab64f8fd
--- /dev/null
+++ b/test/runtime/samples/action-custom-event-handler-in-each/_config.js
@@ -0,0 +1,30 @@
+export default {
+	html: `
+		<button>foo</button>
+		<button>bar</button>
+		<button>baz</button>
+
+		<p>fromDom: </p>
+		<p>fromState: </p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const event = new window.MouseEvent('click');
+
+		const buttons = target.querySelectorAll('button');
+
+		await buttons[1].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>foo</button>
+			<button>bar</button>
+			<button>baz</button>
+
+			<p>fromDom: bar</p>
+			<p>fromState: bar</p>
+		`);
+
+		assert.equal(component.fromDom, 'bar');
+		assert.equal(component.fromState, 'bar');
+	}
+};
diff --git a/test/runtime/samples/action-custom-event-handler-in-each/main.svelte b/test/runtime/samples/action-custom-event-handler-in-each/main.svelte
new file mode 100644
index 0000000000..db684a0bd7
--- /dev/null
+++ b/test/runtime/samples/action-custom-event-handler-in-each/main.svelte
@@ -0,0 +1,24 @@
+<script>
+	export let items = ['foo', 'bar', 'baz'];
+	export let fromDom = '';
+	export let fromState = '';
+	export let x = 0;
+	export let y = 0;
+
+	function tap(node, callback) {
+		node.addEventListener('click', callback, false);
+
+		return {
+			destroy() {
+				node.addEventListener('click', callback, false);
+			}
+		};
+	}
+</script>
+
+{#each items as item}
+	<button use:tap='{e => (fromDom = e.target.textContent, fromState = item)}'>{item}</button>
+{/each}
+
+<p>fromDom: {fromDom}</p>
+<p>fromState: {fromState}</p>
diff --git a/test/runtime/samples/action-custom-event-handler-node-context/_config.js b/test/runtime/samples/action-custom-event-handler-node-context/_config.js
new file mode 100644
index 0000000000..9a5d0d5f82
--- /dev/null
+++ b/test/runtime/samples/action-custom-event-handler-node-context/_config.js
@@ -0,0 +1,15 @@
+export default {
+	skip_if_ssr: true,
+
+	html: '<button>10</button>',
+
+	async test({ assert, target, window }) {
+		const event = new window.MouseEvent('click');
+
+		const button = target.querySelector('button');
+
+		await button.dispatchEvent(event);
+
+		assert.equal(target.innerHTML, '<button>11</button>');
+	}
+};
diff --git a/test/runtime/samples/action-custom-event-handler-node-context/main.svelte b/test/runtime/samples/action-custom-event-handler-node-context/main.svelte
new file mode 100644
index 0000000000..935e7495dd
--- /dev/null
+++ b/test/runtime/samples/action-custom-event-handler-node-context/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let z = 10;
+
+	function tap(node, callback) {
+		const clickHandler = event => {
+			callback(event);
+		};
+
+		node.addEventListener('click', clickHandler, false);
+
+		return {
+			destroy() {
+				node.addEventListener('click', clickHandler, false);
+			}
+		};
+	}
+</script>
+
+<button use:tap='{() => z += 1}'>{z}</button>
diff --git a/test/runtime/samples/action-custom-event-handler-this/_config.js b/test/runtime/samples/action-custom-event-handler-this/_config.js
new file mode 100644
index 0000000000..29c2059d9f
--- /dev/null
+++ b/test/runtime/samples/action-custom-event-handler-this/_config.js
@@ -0,0 +1,22 @@
+export default {
+	html: '<input>',
+
+	test({ assert, target, window }) {
+		const input = target.querySelector('input');
+		const event = new window.KeyboardEvent('keydown', {
+			key: 'Enter'
+		});
+
+		let blurred = false;
+
+		input.focus();
+
+		input.addEventListener('blur', () => {
+			blurred = true;
+		});
+
+		input.dispatchEvent(event);
+
+		assert.ok(blurred);
+	}
+};
diff --git a/test/runtime/samples/action-custom-event-handler-this/main.svelte b/test/runtime/samples/action-custom-event-handler-this/main.svelte
new file mode 100644
index 0000000000..c3ace108a5
--- /dev/null
+++ b/test/runtime/samples/action-custom-event-handler-this/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	function enter(node, callback) {
+		function handleKeydown(event) {
+			if (event.key === 'Enter') {
+				callback(event);
+			}
+		}
+
+		node.addEventListener('keydown', handleKeydown);
+
+		return {
+			destroy() {
+				node.removeEventListener('keydown', handleKeydown);
+			}
+		};
+	}
+</script>
+
+<input use:enter='{e => e.target.blur()}'>
diff --git a/test/runtime/samples/action-custom-event-handler-with-context/_config.js b/test/runtime/samples/action-custom-event-handler-with-context/_config.js
new file mode 100644
index 0000000000..41ea15151a
--- /dev/null
+++ b/test/runtime/samples/action-custom-event-handler-with-context/_config.js
@@ -0,0 +1,16 @@
+export default {
+	html: '<button>???</button>',
+
+	async test({ assert, target, window }) {
+		const event = new window.MouseEvent('click', {
+			clientX: 42,
+			clientY: 42
+		});
+
+		const button = target.querySelector('button');
+
+		await button.dispatchEvent(event);
+
+		assert.equal(target.innerHTML, '<button>42</button>');
+	}
+};
diff --git a/test/runtime/samples/action-custom-event-handler-with-context/main.svelte b/test/runtime/samples/action-custom-event-handler-with-context/main.svelte
new file mode 100644
index 0000000000..8bfd72dfd4
--- /dev/null
+++ b/test/runtime/samples/action-custom-event-handler-with-context/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	export let z = '???';
+	export let answer = '42';
+
+	function tap(node, callback) {
+		const clickHandler = event => {
+			callback({ answer });
+		};
+
+		node.addEventListener('click', clickHandler, false);
+
+		return {
+			destroy() {
+				node.addEventListener('click', clickHandler, false);
+			}
+		};
+	}
+</script>
+
+<button use:tap='{event => z = event.answer}'>{z}</button>
diff --git a/test/runtime/samples/action-custom-event-handler/_config.js b/test/runtime/samples/action-custom-event-handler/_config.js
new file mode 100644
index 0000000000..b132223e32
--- /dev/null
+++ b/test/runtime/samples/action-custom-event-handler/_config.js
@@ -0,0 +1,16 @@
+export default {
+	html: '<button>0, 0</button>',
+
+	async test({ assert, target, window }) {
+		const event = new window.MouseEvent('click', {
+			clientX: 42,
+			clientY: 42
+		});
+
+		const button = target.querySelector('button');
+
+		await button.dispatchEvent(event);
+
+		assert.equal(target.innerHTML, '<button>42, 42</button>');
+	}
+};
diff --git a/test/runtime/samples/action-custom-event-handler/main.svelte b/test/runtime/samples/action-custom-event-handler/main.svelte
new file mode 100644
index 0000000000..eab3756e43
--- /dev/null
+++ b/test/runtime/samples/action-custom-event-handler/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	export let x = 0;
+	export let y = 0;
+
+	function tap(node, callback) {
+		function clickHandler(event) {
+			callback({
+				x: event.clientX,
+				y: event.clientY
+			});
+		}
+
+		node.addEventListener('click', clickHandler, false);
+
+		return {
+			destroy() {
+				node.addEventListener('click', clickHandler, false);
+			}
+		};
+	}
+</script>
+
+<button use:tap='{event => (x = event.x, y = event.y)}'>{x}, {y}</button>
diff --git a/test/runtime/samples/action-function/_config.js b/test/runtime/samples/action-function/_config.js
new file mode 100644
index 0000000000..6aa972f1a8
--- /dev/null
+++ b/test/runtime/samples/action-function/_config.js
@@ -0,0 +1,22 @@
+export default {
+	html: `
+		<button>action</button>
+	`,
+
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const eventEnter = new window.MouseEvent('mouseenter');
+		const eventLeave = new window.MouseEvent('mouseleave');
+
+		await button.dispatchEvent(eventEnter);
+		assert.htmlEqual(target.innerHTML, `
+			<button>action</button>
+			<div class="tooltip">Perform an Action</div>
+		`);
+
+		await button.dispatchEvent(eventLeave);
+		assert.htmlEqual(target.innerHTML, `
+			<button>action</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/action-function/main.svelte b/test/runtime/samples/action-function/main.svelte
new file mode 100644
index 0000000000..4355739014
--- /dev/null
+++ b/test/runtime/samples/action-function/main.svelte
@@ -0,0 +1,40 @@
+<script>
+	const translations = {
+		perform_action: 'Perform an Action'
+	};
+
+	function t(key) {
+		return translations[key] || `{{${key}}}`;
+	}
+
+	export let actionTransKey = 'perform_action';
+
+	function tooltip(node, text) {
+		let tooltip = null;
+
+		function onMouseEnter() {
+			tooltip = document.createElement('div');
+			tooltip.classList.add('tooltip');
+			tooltip.textContent = text;
+			node.parentNode.appendChild(tooltip);
+		}
+
+		function onMouseLeave() {
+			if (!tooltip) return;
+			tooltip.remove();
+			tooltip = null;
+		}
+
+		node.addEventListener('mouseenter', onMouseEnter);
+		node.addEventListener('mouseleave', onMouseLeave);
+		
+		return {
+			destroy() {
+				node.removeEventListener('mouseenter', onMouseEnter);
+				node.removeEventListener('mouseleave', onMouseLeave);
+			}
+		}
+	}
+</script>
+
+<button use:tooltip="{t(actionTransKey)}">action</button>
\ No newline at end of file
diff --git a/test/runtime/samples/action-object-deep/_config.js b/test/runtime/samples/action-object-deep/_config.js
new file mode 100644
index 0000000000..ce4981c568
--- /dev/null
+++ b/test/runtime/samples/action-object-deep/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: `
+		<button>action</button>
+	`,
+	async test({ assert, target }) {
+		assert.equal(target.querySelector('button').foo, 'bar1337');
+	}
+};
diff --git a/test/runtime/samples/action-object-deep/main.svelte b/test/runtime/samples/action-object-deep/main.svelte
new file mode 100644
index 0000000000..75c35d628d
--- /dev/null
+++ b/test/runtime/samples/action-object-deep/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	const obj = {
+		deep: {
+			foo : 'bar',
+			action(element, { leet }) {
+				element.foo = this.foo + leet;
+			}
+		}
+	};
+</script>
+
+<button use:obj.deep.action={{ leet: 1337 }}>action</button>
\ No newline at end of file
diff --git a/test/runtime/samples/action-object/_config.js b/test/runtime/samples/action-object/_config.js
new file mode 100644
index 0000000000..ce4981c568
--- /dev/null
+++ b/test/runtime/samples/action-object/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: `
+		<button>action</button>
+	`,
+	async test({ assert, target }) {
+		assert.equal(target.querySelector('button').foo, 'bar1337');
+	}
+};
diff --git a/test/runtime/samples/action-object/main.svelte b/test/runtime/samples/action-object/main.svelte
new file mode 100644
index 0000000000..f15e319e6f
--- /dev/null
+++ b/test/runtime/samples/action-object/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	const obj = {
+		foo : "bar",
+		action(element, { leet }) {
+			element.foo = this.foo + leet;
+		},
+	}
+</script>
+
+<button use:obj.action={{ leet: 1337 }}>action</button>
\ No newline at end of file
diff --git a/test/runtime/samples/action-receives-element-mounted/_config.js b/test/runtime/samples/action-receives-element-mounted/_config.js
new file mode 100644
index 0000000000..c6f3fcd89f
--- /dev/null
+++ b/test/runtime/samples/action-receives-element-mounted/_config.js
@@ -0,0 +1,8 @@
+const result = {};
+
+export default {
+	props: { result },
+	async test({ assert }) {
+		assert.notEqual(result.parentElement, null);
+	}
+};
diff --git a/test/runtime/samples/action-receives-element-mounted/main.svelte b/test/runtime/samples/action-receives-element-mounted/main.svelte
new file mode 100644
index 0000000000..a53ce81de0
--- /dev/null
+++ b/test/runtime/samples/action-receives-element-mounted/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let result;
+	function onMountAction(node) {
+		result.parentElement = node.parentElement;
+	}
+</script>
+
+<h1 use:onMountAction>Hello!</h1>
\ No newline at end of file
diff --git a/test/runtime/samples/action-ternary-template/_config.js b/test/runtime/samples/action-ternary-template/_config.js
new file mode 100644
index 0000000000..8e5e8e2236
--- /dev/null
+++ b/test/runtime/samples/action-ternary-template/_config.js
@@ -0,0 +1,20 @@
+export default {
+	props: {
+		target: 'World!',
+		display: true
+	},
+
+	html: `
+		<h1></h1>
+	`,
+
+	async test({ assert, target, window }) {
+		const header = target.querySelector('h1');
+		const click = new window.MouseEvent('click');
+
+		await header.dispatchEvent(click);
+		assert.htmlEqual(target.innerHTML, `
+			<h1>Hello World!</h1>
+		`);
+	}
+};
diff --git a/test/runtime/samples/action-ternary-template/main.svelte b/test/runtime/samples/action-ternary-template/main.svelte
new file mode 100644
index 0000000000..875ffd71a8
--- /dev/null
+++ b/test/runtime/samples/action-ternary-template/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let display;
+	export let target;
+
+	function insert(node, text) {
+		function onClick() {
+			node.textContent = text;
+		}
+		node.addEventListener('click', onClick);
+
+		return {
+			destroy() {
+				node.removeEventListener('click', onClick);
+			}
+		}
+	}
+</script>
+
+<h1 use:insert="{display ? `Hello ${target}` : ''}"></h1>
\ No newline at end of file
diff --git a/test/runtime/samples/action-this/_config.js b/test/runtime/samples/action-this/_config.js
new file mode 100644
index 0000000000..85cb917d96
--- /dev/null
+++ b/test/runtime/samples/action-this/_config.js
@@ -0,0 +1,11 @@
+export default {
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		assert.htmlEqual(target.innerHTML, '<button>1</button>');
+		await button.dispatchEvent(click);
+		await Promise.resolve();
+		assert.htmlEqual(target.innerHTML, '<button>2</button>');
+	}
+};
diff --git a/test/runtime/samples/action-this/main.svelte b/test/runtime/samples/action-this/main.svelte
new file mode 100644
index 0000000000..c7d74a8b97
--- /dev/null
+++ b/test/runtime/samples/action-this/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	export let x = 0;
+
+	function foo(node) {
+		const handler = () => {
+			x += 1;
+		};
+
+		node.addEventListener('click', handler);
+		handler();
+
+		return {
+			destroy() {
+				node.removeEventListener('click', handler);
+			}
+		};
+	}
+</script>
+
+<button use:foo>{x}</button>
\ No newline at end of file
diff --git a/test/runtime/samples/action-update/_config.js b/test/runtime/samples/action-update/_config.js
new file mode 100644
index 0000000000..b5e90e4b10
--- /dev/null
+++ b/test/runtime/samples/action-update/_config.js
@@ -0,0 +1,29 @@
+export default {
+	html: `
+		<button>action</button>
+	`,
+
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const enter = new window.MouseEvent('mouseenter');
+		const leave = new window.MouseEvent('mouseleave');
+		const ctrlPress = new window.KeyboardEvent('keydown', { ctrlKey: true });
+
+		await button.dispatchEvent(enter);
+		assert.htmlEqual(target.innerHTML, `
+			<button>action</button>
+			<div class="tooltip">Perform an Action</div>
+		`);
+
+		await window.dispatchEvent(ctrlPress);
+		assert.htmlEqual(target.innerHTML, `
+			<button>action</button>
+			<div class="tooltip">Perform an augmented Action</div>
+		`);
+
+		await button.dispatchEvent(leave);
+		assert.htmlEqual(target.innerHTML, `
+			<button>action</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/action-update/main.svelte b/test/runtime/samples/action-update/main.svelte
new file mode 100644
index 0000000000..440ac55c34
--- /dev/null
+++ b/test/runtime/samples/action-update/main.svelte
@@ -0,0 +1,44 @@
+<script>
+	export let text = 'Perform an Action';
+
+	function checkForCtrl(event) {
+		if (event.ctrlKey) {
+			text = 'Perform an augmented Action';
+		} else {
+			text = 'Perform an Action';
+		}
+	}
+
+	function tooltip(node, text) {
+		let tooltip = null;
+
+		function onMouseEnter() {
+			tooltip = document.createElement('div');
+			tooltip.classList.add('tooltip');
+			tooltip.textContent = text;
+			node.parentNode.appendChild(tooltip);
+		}
+
+		function onMouseLeave() {
+			if (!tooltip) return;
+			tooltip.remove();
+			tooltip = null;
+		}
+
+		node.addEventListener('mouseenter', onMouseEnter);
+		node.addEventListener('mouseleave', onMouseLeave);
+
+		return {
+			update(text) {
+				if (tooltip) tooltip.textContent = text;
+			},
+			destroy() {
+				node.removeEventListener('mouseenter', onMouseEnter);
+				node.removeEventListener('mouseleave', onMouseLeave);
+			}
+		}
+	}
+</script>
+
+<button use:tooltip="{text}">action</button>
+<svelte:window on:keydown="{checkForCtrl}" on:keyup="{checkForCtrl}"/>
\ No newline at end of file
diff --git a/test/runtime/samples/action/_config.js b/test/runtime/samples/action/_config.js
new file mode 100644
index 0000000000..6aa972f1a8
--- /dev/null
+++ b/test/runtime/samples/action/_config.js
@@ -0,0 +1,22 @@
+export default {
+	html: `
+		<button>action</button>
+	`,
+
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const eventEnter = new window.MouseEvent('mouseenter');
+		const eventLeave = new window.MouseEvent('mouseleave');
+
+		await button.dispatchEvent(eventEnter);
+		assert.htmlEqual(target.innerHTML, `
+			<button>action</button>
+			<div class="tooltip">Perform an Action</div>
+		`);
+
+		await button.dispatchEvent(eventLeave);
+		assert.htmlEqual(target.innerHTML, `
+			<button>action</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/action/main.svelte b/test/runtime/samples/action/main.svelte
new file mode 100644
index 0000000000..a6a7eb3610
--- /dev/null
+++ b/test/runtime/samples/action/main.svelte
@@ -0,0 +1,30 @@
+<script>
+	function tooltip(node, text) {
+		let tooltip = null;
+
+		function onMouseEnter() {
+			tooltip = document.createElement('div');
+			tooltip.classList.add('tooltip');
+			tooltip.textContent = text;
+			node.parentNode.appendChild(tooltip);
+		}
+
+		function onMouseLeave() {
+			if (!tooltip) return;
+			tooltip.remove();
+			tooltip = null;
+		}
+
+		node.addEventListener('mouseenter', onMouseEnter);
+		node.addEventListener('mouseleave', onMouseLeave);
+		
+		return {
+			destroy() {
+				node.removeEventListener('mouseenter', onMouseEnter);
+				node.removeEventListener('mouseleave', onMouseLeave);
+			}
+		}
+	}
+</script>
+
+<button use:tooltip="{'Perform an Action'}">action</button>
\ No newline at end of file
diff --git a/test/runtime/samples/after-render-prevents-loop/_config.js b/test/runtime/samples/after-render-prevents-loop/_config.js
new file mode 100644
index 0000000000..e922fed358
--- /dev/null
+++ b/test/runtime/samples/after-render-prevents-loop/_config.js
@@ -0,0 +1,20 @@
+export default {
+	skip_if_ssr: true,
+
+	props: {
+		value: 'hello!'
+	},
+
+	html: `
+		<p>hello!</p>
+		<p>hello!</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.value = 'goodbye!';
+		assert.htmlEqual(target.innerHTML, `
+			<p>goodbye!</p>
+			<p>goodbye!</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/after-render-prevents-loop/main.svelte b/test/runtime/samples/after-render-prevents-loop/main.svelte
new file mode 100644
index 0000000000..8733885943
--- /dev/null
+++ b/test/runtime/samples/after-render-prevents-loop/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { afterUpdate } from 'svelte';
+
+	export let value;
+	let mirror;
+
+	afterUpdate(() => {
+		mirror = value;
+	});
+</script>
+
+<p>{value}</p>
+<p>{mirror}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/after-render-triggers-update/_config.js b/test/runtime/samples/after-render-triggers-update/_config.js
new file mode 100644
index 0000000000..e922fed358
--- /dev/null
+++ b/test/runtime/samples/after-render-triggers-update/_config.js
@@ -0,0 +1,20 @@
+export default {
+	skip_if_ssr: true,
+
+	props: {
+		value: 'hello!'
+	},
+
+	html: `
+		<p>hello!</p>
+		<p>hello!</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.value = 'goodbye!';
+		assert.htmlEqual(target.innerHTML, `
+			<p>goodbye!</p>
+			<p>goodbye!</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/after-render-triggers-update/main.svelte b/test/runtime/samples/after-render-triggers-update/main.svelte
new file mode 100644
index 0000000000..6e4673202e
--- /dev/null
+++ b/test/runtime/samples/after-render-triggers-update/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { afterUpdate } from 'svelte';
+
+	export let a;
+	export let b;
+
+	export let value;
+
+	afterUpdate(() => {
+		b.textContent = a.textContent;
+	});
+</script>
+
+<p bind:this={a}>{value}</p>
+<p bind:this={b}></p>
\ No newline at end of file
diff --git a/test/runtime/samples/animation-css/_config.js b/test/runtime/samples/animation-css/_config.js
new file mode 100644
index 0000000000..b80545de3a
--- /dev/null
+++ b/test/runtime/samples/animation-css/_config.js
@@ -0,0 +1,57 @@
+export default {
+	props: {
+		things: [
+			{ id: 1, name: 'a' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 5, name: 'e' }
+		]
+	},
+
+	html: `
+		<div>a</div>
+		<div>b</div>
+		<div>c</div>
+		<div>d</div>
+		<div>e</div>
+	`,
+
+	test({ assert, component, target, raf }) {
+		let divs = target.querySelectorAll('div');
+		divs.forEach(div => {
+			div.getBoundingClientRect = function() {
+				const index = [...this.parentNode.children].indexOf(this);
+				const top = index * 30;
+
+				return {
+					left: 0,
+					right: 100,
+					top,
+					bottom: top + 20
+				};
+			};
+		});
+
+		component.things = [
+			{ id: 5, name: 'e' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 1, name: 'a' }
+		];
+
+		divs = target.querySelectorAll('div');
+		assert.ok(~divs[0].style.animation.indexOf('__svelte'));
+		assert.equal(divs[1].style.animation, '');
+		assert.equal(divs[2].style.animation, '');
+		assert.equal(divs[3].style.animation, '');
+		assert.ok(~divs[4].style.animation.indexOf('__svelte'));
+
+		raf.tick(100);
+		assert.deepEqual([
+			divs[0].style.animation,
+			divs[4].style.animation
+		], ['', '']);
+	}
+};
diff --git a/test/runtime/samples/animation-css/main.svelte b/test/runtime/samples/animation-css/main.svelte
new file mode 100644
index 0000000000..ec467d3eda
--- /dev/null
+++ b/test/runtime/samples/animation-css/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	export let things;
+
+	function flip(node, animation, params) {
+		const dx = animation.from.left - animation.to.left;
+		const dy = animation.from.top - animation.to.top;
+
+		return {
+			duration: 100,
+			css: (t, u) => `transform: translate(${u + dx}px, ${u * dy}px)`
+		};
+	}
+</script>
+
+{#each things as thing (thing.id)}
+	<div animate:flip>{thing.name}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/animation-js-delay/_config.js b/test/runtime/samples/animation-js-delay/_config.js
new file mode 100644
index 0000000000..d7eba13bd4
--- /dev/null
+++ b/test/runtime/samples/animation-js-delay/_config.js
@@ -0,0 +1,84 @@
+export default {
+	props: {
+		things: [
+			{ id: 1, name: 'a' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 5, name: 'e' }
+		]
+	},
+
+	html: `
+		<div>a</div>
+		<div>b</div>
+		<div>c</div>
+		<div>d</div>
+		<div>e</div>
+	`,
+
+	test({ assert, component, window, raf }) {
+		let divs = window.document.querySelectorAll('div');
+		divs.forEach(div => {
+			div.getBoundingClientRect = function() {
+				const index = [...this.parentNode.children].indexOf(this);
+				const top = index * 30;
+
+				return {
+					left: 0,
+					right: 100,
+					top,
+					bottom: top + 20
+				};
+			};
+		});
+
+		component.things = [
+			{ id: 5, name: 'e' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 1, name: 'a' }
+		];
+
+		divs = window.document.querySelectorAll('div');
+		assert.equal(divs[0].dy, 120);
+		assert.equal(divs[4].dy, -120);
+
+		raf.tick(50);
+		assert.equal(divs[0].dy, 108);
+		assert.equal(divs[4].dy, -60);
+
+		raf.tick(100);
+		assert.equal(divs[0].dy, 48);
+		assert.equal(divs[4].dy, 0);
+
+		raf.tick(150);
+		assert.equal(divs[0].dy, 0);
+		assert.equal(divs[4].dy, 0);
+
+		component.things = [
+			{ id: 1, name: 'a' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 5, name: 'e' }
+		];
+
+		divs = document.querySelectorAll('div');
+		assert.equal(divs[0].dy, 120);
+		assert.equal(divs[4].dy, -120);
+
+		raf.tick(200);
+		assert.equal(divs[0].dy, 108);
+		assert.equal(divs[4].dy, -60);
+
+		raf.tick(250);
+		assert.equal(divs[0].dy, 48);
+		assert.equal(divs[4].dy, 0);
+
+		raf.tick(300);
+		assert.equal(divs[0].dy, 0);
+		assert.equal(divs[4].dy, 0);
+	}
+};
diff --git a/test/runtime/samples/animation-js-delay/main.svelte b/test/runtime/samples/animation-js-delay/main.svelte
new file mode 100644
index 0000000000..32c05ad08f
--- /dev/null
+++ b/test/runtime/samples/animation-js-delay/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	export let things;
+
+	function flip(node, animation, params) {
+		const dx = animation.from.left - animation.to.left;
+		const dy = animation.from.top - animation.to.top;
+
+		return {
+			delay: params.delay,
+			duration: 100,
+			tick: (t, u) => {
+				node.dx = u * dx;
+				node.dy = u * dy;
+			}
+		};
+	}
+</script>
+
+{#each things as thing, i (thing.id)}
+	<div animate:flip="{{delay: i * 10}}">{thing.name}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/animation-js-easing/_config.js b/test/runtime/samples/animation-js-easing/_config.js
new file mode 100644
index 0000000000..9cbb77275a
--- /dev/null
+++ b/test/runtime/samples/animation-js-easing/_config.js
@@ -0,0 +1,56 @@
+export default {
+	props: {
+		things: [
+			{ id: 1, name: 'a' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 5, name: 'e' }
+		]
+	},
+
+	html: `
+		<div>a</div>
+		<div>b</div>
+		<div>c</div>
+		<div>d</div>
+		<div>e</div>
+	`,
+
+	test({ assert, component, raf }) {
+		let divs = document.querySelectorAll('div');
+		divs.forEach(div => {
+			div.getBoundingClientRect = function() {
+				const index = [...this.parentNode.children].indexOf(this);
+				const top = index * 30;
+
+				return {
+					left: 0,
+					right: 100,
+					top,
+					bottom: top + 20
+				};
+			};
+		});
+
+		component.things = [
+			{ id: 5, name: 'e' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 1, name: 'a' }
+		];
+
+		divs = document.querySelectorAll('div');
+		assert.equal(divs[0].dy, 120);
+		assert.equal(divs[4].dy, -120);
+
+		raf.tick(50);
+		assert.equal(divs[0].dy, 60);
+		assert.equal(divs[4].dy, -60);
+
+		raf.tick(100);
+		assert.equal(divs[0].dy, 0);
+		assert.equal(divs[4].dy, 0);
+	}
+};
diff --git a/test/runtime/samples/animation-js-easing/easing.js b/test/runtime/samples/animation-js-easing/easing.js
new file mode 100644
index 0000000000..6399b8858c
--- /dev/null
+++ b/test/runtime/samples/animation-js-easing/easing.js
@@ -0,0 +1,3 @@
+export function linear(t) {
+	return t;
+}
diff --git a/test/runtime/samples/animation-js-easing/main.svelte b/test/runtime/samples/animation-js-easing/main.svelte
new file mode 100644
index 0000000000..264ff6d9d6
--- /dev/null
+++ b/test/runtime/samples/animation-js-easing/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	import { linear } from './easing.js';
+	export let things;
+
+	function flip(node, animation, params) {
+		const dx = animation.from.left - animation.to.left;
+		const dy = animation.from.top - animation.to.top;
+
+		return {
+			duration: 100,
+			easing: linear,
+			tick: (t, u) => {
+				node.dx = u * dx;
+				node.dy = u * dy;
+			}
+		};
+	}
+</script>
+
+{#each things as thing (thing.id)}
+	<div animate:flip>{thing.name}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/animation-js/_config.js b/test/runtime/samples/animation-js/_config.js
new file mode 100644
index 0000000000..64373d08a3
--- /dev/null
+++ b/test/runtime/samples/animation-js/_config.js
@@ -0,0 +1,77 @@
+export default {
+	props: {
+		things: [
+			{ id: 1, name: 'a' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 5, name: 'e' }
+		]
+	},
+
+	html: `
+		<div>a</div>
+		<div>b</div>
+		<div>c</div>
+		<div>d</div>
+		<div>e</div>
+	`,
+
+	test({ assert, component, raf }) {
+		let divs = document.querySelectorAll('div');
+		divs.forEach(div => {
+			div.getBoundingClientRect = function() {
+				const index = [...this.parentNode.children].indexOf(this);
+				const top = index * 30;
+
+				return {
+					left: 0,
+					right: 100,
+					top,
+					bottom: top + 20
+				};
+			};
+		});
+
+		component.things = [
+			{ id: 5, name: 'e' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 1, name: 'a' }
+		];
+
+		divs = document.querySelectorAll('div');
+		assert.equal(divs[0].dy, 120);
+		assert.equal(divs[4].dy, -120);
+
+		raf.tick(50);
+		assert.equal(divs[0].dy, 60);
+		assert.equal(divs[4].dy, -60);
+
+		raf.tick(100);
+		assert.equal(divs[0].dy, 0);
+		assert.equal(divs[4].dy, 0);
+
+		component.things = [
+			{ id: 1, name: 'a' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 5, name: 'e' }
+		];
+
+		divs = document.querySelectorAll('div');
+
+		assert.equal(divs[0].dy, 120);
+		assert.equal(divs[4].dy, -120);
+
+		raf.tick(150);
+		assert.equal(divs[0].dy, 60);
+		assert.equal(divs[4].dy, -60);
+
+		raf.tick(200);
+		assert.equal(divs[0].dy, 0);
+		assert.equal(divs[4].dy, 0);
+	}
+};
diff --git a/test/runtime/samples/animation-js/main.svelte b/test/runtime/samples/animation-js/main.svelte
new file mode 100644
index 0000000000..aef7fc920a
--- /dev/null
+++ b/test/runtime/samples/animation-js/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	export let things;
+
+	function flip(node, animation, params) {
+		const dx = animation.from.left - animation.to.left;
+		const dy = animation.from.top - animation.to.top;
+
+		return {
+			duration: 100,
+			tick: (t, u) => {
+				node.dx = u * dx;
+				node.dy = u * dy;
+			}
+		};
+	}
+</script>
+
+{#each things as thing (thing.id)}
+	<div animate:flip>{thing.name}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/apply-directives-in-order-2/_config.js b/test/runtime/samples/apply-directives-in-order-2/_config.js
new file mode 100644
index 0000000000..6072a18b27
--- /dev/null
+++ b/test/runtime/samples/apply-directives-in-order-2/_config.js
@@ -0,0 +1,38 @@
+const value = [];
+export default {
+	props: {
+		value
+	},
+
+	async test({ assert, target, window }) {
+		const inputs = target.querySelectorAll('input');
+
+		const event = new window.Event('input');
+
+		for (const input of inputs) {
+			input.value = 'h';
+			await input.dispatchEvent(event);
+		}
+
+		assert.deepEqual(value, [
+			'1',
+			'2',
+			'3',
+			'4',
+			'5',
+			'6',
+			'7',
+			'8',
+			'9',
+			'10',
+			'11',
+			'12',
+			'13',
+			'14',
+			'15',
+			'16',
+			'17',
+			'18'
+		]);
+	}
+};
diff --git a/test/runtime/samples/apply-directives-in-order-2/main.svelte b/test/runtime/samples/apply-directives-in-order-2/main.svelte
new file mode 100644
index 0000000000..e91c4b6a14
--- /dev/null
+++ b/test/runtime/samples/apply-directives-in-order-2/main.svelte
@@ -0,0 +1,34 @@
+<script>
+	export let value = [];
+
+	function one(elem) { elem.addEventListener('input', () => { value.push('1'); }); }
+	function four(elem) { elem.addEventListener('input', () => { value.push('4'); }); }
+	function eight(elem) { elem.addEventListener('input', () => { value.push('8'); }); }
+	function twelve(elem) { elem.addEventListener('input', () => { value.push('12'); }); }
+	function fifteen(elem) { elem.addEventListener('input', () => { value.push('15'); }); }
+	function seventeen(elem) { elem.addEventListener('input', () => { value.push('17'); }); }
+
+	const foo = {
+		set two(v) { value.push('2'); },
+		set six(v) { value.push('6'); },
+		set nine(v) { value.push('9'); },
+		set eleven(v) { value.push('11'); },
+		set thirteen(v) { value.push('13'); },
+		set sixteen(v) { value.push('16'); },
+	}
+
+	function three() { value.push('3'); }
+	function five() { value.push('5'); }
+	function seven() { value.push('7'); }
+	function ten() { value.push('10'); }
+	function fourteen() { value.push('14'); }
+	function eighteen() { value.push('18'); }
+
+</script>
+
+<input use:one bind:value={foo.two} on:input={three} />
+<input use:four on:input={five} bind:value={foo.six} />
+<input on:input={seven} use:eight bind:value={foo.nine} />
+<input on:input={ten} bind:value={foo.eleven} use:twelve />
+<input bind:value={foo.thirteen} on:input={fourteen} use:fifteen />
+<input bind:value={foo.sixteen} use:seventeen on:input={eighteen} />
diff --git a/test/runtime/samples/apply-directives-in-order/_config.js b/test/runtime/samples/apply-directives-in-order/_config.js
new file mode 100644
index 0000000000..2e057118b4
--- /dev/null
+++ b/test/runtime/samples/apply-directives-in-order/_config.js
@@ -0,0 +1,37 @@
+export default {
+	props: {
+		value: ''
+	},
+
+	html: `
+		<input>
+		<p></p>
+	`,
+
+	ssrHtml: `
+		<input value="">
+		<p></p>
+	`,
+
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+
+		const event = new window.Event('input');
+		input.value = 'h';
+		await input.dispatchEvent(event);
+
+		assert.equal(input.value, 'H');
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>H</p>
+		`);
+
+		input.value = 'he';
+		await input.dispatchEvent(event);
+		assert.equal(input.value, 'HE');
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>HE</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/apply-directives-in-order/main.svelte b/test/runtime/samples/apply-directives-in-order/main.svelte
new file mode 100644
index 0000000000..be652c7b79
--- /dev/null
+++ b/test/runtime/samples/apply-directives-in-order/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let value;
+
+	function uppercase(event) {
+		event.target.value = event.target.value.toUpperCase()
+	}
+</script>
+
+<input on:input={uppercase} bind:value>
+<p>{value}</p>
diff --git a/test/runtime/samples/array-literal-spread-deopt/_config.js b/test/runtime/samples/array-literal-spread-deopt/_config.js
new file mode 100644
index 0000000000..926f462b55
--- /dev/null
+++ b/test/runtime/samples/array-literal-spread-deopt/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<div>a</div> <div>b</div> <div>c</div>'
+};
diff --git a/test/runtime/samples/array-literal-spread-deopt/main.svelte b/test/runtime/samples/array-literal-spread-deopt/main.svelte
new file mode 100644
index 0000000000..9340ae4801
--- /dev/null
+++ b/test/runtime/samples/array-literal-spread-deopt/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	const foo = ['a', 'b', 'c'];
+</script>
+
+{#each [...foo] as item}
+	<div>{item}</div>
+{/each}
diff --git a/test/runtime/samples/assignment-in-init/_config.js b/test/runtime/samples/assignment-in-init/_config.js
new file mode 100644
index 0000000000..52428c607d
--- /dev/null
+++ b/test/runtime/samples/assignment-in-init/_config.js
@@ -0,0 +1,6 @@
+export default {
+	test({ assert, component }) {
+		assert.equal(component.get_foo(), 1);
+		assert.equal(component.get_bar(), 2);
+	}
+};
diff --git a/test/runtime/samples/assignment-in-init/main.svelte b/test/runtime/samples/assignment-in-init/main.svelte
new file mode 100644
index 0000000000..235b90b6d5
--- /dev/null
+++ b/test/runtime/samples/assignment-in-init/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let foo;
+	let bar = (foo = 1) * 2;
+
+	export const get_foo = () => foo;
+	export const get_bar = () => bar;
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/assignment-to-computed-property/_config.js b/test/runtime/samples/assignment-to-computed-property/_config.js
new file mode 100644
index 0000000000..25f94c844e
--- /dev/null
+++ b/test/runtime/samples/assignment-to-computed-property/_config.js
@@ -0,0 +1,5 @@
+export default {
+	test({ assert, component }) {
+		assert.deepEqual(component.foo, { baz: 1 });
+	}
+};
diff --git a/test/runtime/samples/assignment-to-computed-property/main.svelte b/test/runtime/samples/assignment-to-computed-property/main.svelte
new file mode 100644
index 0000000000..8bbe2422ed
--- /dev/null
+++ b/test/runtime/samples/assignment-to-computed-property/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo = {};
+	let bar = 'baz';
+	foo[bar] = 1;
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/async-generator-object-methods/main.svelte b/test/runtime/samples/async-generator-object-methods/main.svelte
new file mode 100644
index 0000000000..76dff53556
--- /dev/null
+++ b/test/runtime/samples/async-generator-object-methods/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	const foo = {
+		async bar() {
+			await baz;
+		},
+		*qux() {
+			yield 42;
+		}
+	};
+</script>
diff --git a/test/runtime/samples/attribute-boolean-case-insensitive/_config.js b/test/runtime/samples/attribute-boolean-case-insensitive/_config.js
new file mode 100644
index 0000000000..99ccedb8c9
--- /dev/null
+++ b/test/runtime/samples/attribute-boolean-case-insensitive/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<input readonly>'
+};
diff --git a/test/runtime/samples/attribute-boolean-case-insensitive/main.svelte b/test/runtime/samples/attribute-boolean-case-insensitive/main.svelte
new file mode 100644
index 0000000000..9020894086
--- /dev/null
+++ b/test/runtime/samples/attribute-boolean-case-insensitive/main.svelte
@@ -0,0 +1 @@
+<input READONLY={true} REQUIRED={false}>
diff --git a/test/runtime/samples/attribute-boolean-false/_config.js b/test/runtime/samples/attribute-boolean-false/_config.js
new file mode 100644
index 0000000000..e4aaabecaf
--- /dev/null
+++ b/test/runtime/samples/attribute-boolean-false/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: '<textarea></textarea>',
+	test({ assert, target }) {
+		const textarea = target.querySelector('textarea');
+		assert.ok(textarea.readOnly === false);
+	}
+};
diff --git a/test/runtime/samples/attribute-boolean-false/main.svelte b/test/runtime/samples/attribute-boolean-false/main.svelte
new file mode 100644
index 0000000000..fa8f64bd40
--- /dev/null
+++ b/test/runtime/samples/attribute-boolean-false/main.svelte
@@ -0,0 +1 @@
+<textarea readonly="{false}"></textarea>
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-boolean-indeterminate/_config.js b/test/runtime/samples/attribute-boolean-indeterminate/_config.js
new file mode 100644
index 0000000000..d6e97ffc0e
--- /dev/null
+++ b/test/runtime/samples/attribute-boolean-indeterminate/_config.js
@@ -0,0 +1,23 @@
+export default {
+	// This is a bit of a funny one — there's no equivalent attribute,
+	// so it can't be server-rendered
+	skip_if_ssr: true,
+
+	props: {
+		indeterminate: true
+	},
+
+	html: "<input type='checkbox'>",
+
+	// somehow ssr will render indeterminate=""
+	// the hydrated html will still contain that attribute
+	ssrHtml: "<input type='checkbox' indeterminate=''>",
+
+	test({ assert, component, target }) {
+		const input = target.querySelector('input');
+
+		assert.ok(input.indeterminate);
+		component.indeterminate = false;
+		assert.ok(!input.indeterminate);
+	}
+};
diff --git a/test/runtime/samples/attribute-boolean-indeterminate/main.svelte b/test/runtime/samples/attribute-boolean-indeterminate/main.svelte
new file mode 100644
index 0000000000..3ce99d698e
--- /dev/null
+++ b/test/runtime/samples/attribute-boolean-indeterminate/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let indeterminate;
+</script>
+
+<input type='checkbox' indeterminate='{indeterminate}'>
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-boolean-true/_config.js b/test/runtime/samples/attribute-boolean-true/_config.js
new file mode 100644
index 0000000000..89b2fc7c21
--- /dev/null
+++ b/test/runtime/samples/attribute-boolean-true/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: '<textarea readonly data-attr="true"></textarea>',
+	test({ assert, target }) {
+		const textarea = target.querySelector('textarea');
+		assert.equal(textarea.dataset.attr, 'true');
+		assert.ok(textarea.readOnly);
+	}
+};
diff --git a/test/runtime/samples/attribute-boolean-true/main.svelte b/test/runtime/samples/attribute-boolean-true/main.svelte
new file mode 100644
index 0000000000..6474644749
--- /dev/null
+++ b/test/runtime/samples/attribute-boolean-true/main.svelte
@@ -0,0 +1 @@
+<textarea readonly={true} data-attr={true} />
diff --git a/test/runtime/samples/attribute-boolean-with-spread/_config.js b/test/runtime/samples/attribute-boolean-with-spread/_config.js
new file mode 100644
index 0000000000..1fd2443369
--- /dev/null
+++ b/test/runtime/samples/attribute-boolean-with-spread/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<input>'
+};
diff --git a/test/runtime/samples/attribute-boolean-with-spread/main.svelte b/test/runtime/samples/attribute-boolean-with-spread/main.svelte
new file mode 100644
index 0000000000..d0616e3024
--- /dev/null
+++ b/test/runtime/samples/attribute-boolean-with-spread/main.svelte
@@ -0,0 +1 @@
+<input {...{ foo: null }} readonly={false} required={false} disabled={null}>
diff --git a/test/runtime/samples/attribute-casing-foreign-namespace-compiler-option/_config.js b/test/runtime/samples/attribute-casing-foreign-namespace-compiler-option/_config.js
new file mode 100644
index 0000000000..9f8ee61c7a
--- /dev/null
+++ b/test/runtime/samples/attribute-casing-foreign-namespace-compiler-option/_config.js
@@ -0,0 +1,24 @@
+// Test support for the `foreign` namespace preserving attribute case,
+// including ensuring that SVG elements don't interfere.
+
+export default {
+	html: `
+		<page horizontalAlignment="center">
+			<button textWrap="true" text="button"></button>
+			<text wordWrap="true"></text>
+		</page>
+	`,
+	options: {
+		hydrate: false // Hydration test will fail as case sensitivity is only handled for svg elements.
+	},
+	skip_if_hydrate_from_ssr: true,
+	compileOptions: {
+		namespace: 'foreign'
+	},
+	test({ assert, target }) {
+		const attr = sel => target.querySelector(sel).attributes[0].name;
+		assert.equal(attr('page'), 'horizontalAlignment');
+		assert.equal(attr('button'), 'textWrap');
+		assert.equal(attr('text'), 'wordWrap');
+	}
+};
diff --git a/test/runtime/samples/attribute-casing-foreign-namespace-compiler-option/main.svelte b/test/runtime/samples/attribute-casing-foreign-namespace-compiler-option/main.svelte
new file mode 100644
index 0000000000..52b3e646e1
--- /dev/null
+++ b/test/runtime/samples/attribute-casing-foreign-namespace-compiler-option/main.svelte
@@ -0,0 +1,4 @@
+<page horizontalAlignment="center">
+	<button textWrap="true" text="button" />
+	<text wordWrap="true" />
+</page>
diff --git a/test/runtime/samples/attribute-casing-foreign-namespace/_config.js b/test/runtime/samples/attribute-casing-foreign-namespace/_config.js
new file mode 100644
index 0000000000..f74f622524
--- /dev/null
+++ b/test/runtime/samples/attribute-casing-foreign-namespace/_config.js
@@ -0,0 +1,19 @@
+// Test support for the `foreign` namespace preserving attribute case.
+
+export default {
+	html: `
+		<page horizontalAlignment="center">
+			<button textWrap="true" text="button">
+		</page>
+	`,
+	options: {
+		hydrate: false // Hydration test will fail as case sensitivity is only handled for svg elements.
+	},
+	skip_if_hydrate_from_ssr: true,
+
+	test({ assert, target }) {
+		const attr = sel => target.querySelector(sel).attributes[0].name;
+		assert.equal(attr('page'), 'horizontalAlignment');
+		assert.equal(attr('button'), 'textWrap');
+	}
+};
diff --git a/test/runtime/samples/attribute-casing-foreign-namespace/main.svelte b/test/runtime/samples/attribute-casing-foreign-namespace/main.svelte
new file mode 100644
index 0000000000..f5ff10a3eb
--- /dev/null
+++ b/test/runtime/samples/attribute-casing-foreign-namespace/main.svelte
@@ -0,0 +1,4 @@
+<svelte:options namespace="foreign" />
+<page horizontalAlignment="center">
+	<button textWrap="true" text="button">
+</page>
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-casing/_config.js b/test/runtime/samples/attribute-casing/_config.js
new file mode 100644
index 0000000000..f706c769b9
--- /dev/null
+++ b/test/runtime/samples/attribute-casing/_config.js
@@ -0,0 +1,23 @@
+export default {
+	html: `
+		<div class='SHOUTY'>YELL</div>
+
+		<svg viewBox='0 0 100 100' id='one'>
+			<text textLength=100>hellooooo</text>
+		</svg>
+
+		<svg viewBox='0 0 100 100' id='two'>
+			<text textLength=100>hellooooo</text>
+		</svg>
+	`,
+
+	test({ assert, target }) {
+		const attr = sel => target.querySelector(sel).attributes[0].name;
+
+		assert.equal(attr('div'), 'class');
+		assert.equal(attr('svg#one'), 'viewBox');
+		assert.equal(attr('svg#one text'), 'textLength');
+		assert.equal(attr('svg#two'), 'viewBox');
+		assert.equal(attr('svg#two text'), 'textLength');
+	}
+};
diff --git a/test/runtime/samples/attribute-casing/main.svelte b/test/runtime/samples/attribute-casing/main.svelte
new file mode 100644
index 0000000000..bec13c0cca
--- /dev/null
+++ b/test/runtime/samples/attribute-casing/main.svelte
@@ -0,0 +1,9 @@
+<div CLASS='SHOUTY'>YELL</div>
+
+<svg viewbox='0 0 100 100' id='one'>
+	<text textlength=100>hellooooo</text>
+</svg>
+
+<svg viewBox='0 0 100 100' id='two'>
+	<text textLength=100>hellooooo</text>
+</svg>
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-dataset-without-value/_config.js b/test/runtime/samples/attribute-dataset-without-value/_config.js
new file mode 100644
index 0000000000..21e60b92aa
--- /dev/null
+++ b/test/runtime/samples/attribute-dataset-without-value/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<div data-potato=""></div>'
+};
diff --git a/test/runtime/samples/attribute-dataset-without-value/main.svelte b/test/runtime/samples/attribute-dataset-without-value/main.svelte
new file mode 100644
index 0000000000..ed7d532652
--- /dev/null
+++ b/test/runtime/samples/attribute-dataset-without-value/main.svelte
@@ -0,0 +1 @@
+<div data-potato></div>
diff --git a/test/runtime/samples/attribute-dynamic-multiple/_config.js b/test/runtime/samples/attribute-dynamic-multiple/_config.js
new file mode 100644
index 0000000000..ff248a41b9
--- /dev/null
+++ b/test/runtime/samples/attribute-dynamic-multiple/_config.js
@@ -0,0 +1,15 @@
+export default {
+	props: {
+		items: [
+			{ foo: true,  bar: false },
+			{ foo: false, bar: true  },
+			{ foo: true,  bar: true  }
+		]
+	},
+
+	html: `
+		<div class="foo ">1</div>
+		<div class=" bar">2</div>
+		<div class="foo bar">3</div>
+	`
+};
diff --git a/test/runtime/samples/attribute-dynamic-multiple/main.svelte b/test/runtime/samples/attribute-dynamic-multiple/main.svelte
new file mode 100644
index 0000000000..1d87cd9b2e
--- /dev/null
+++ b/test/runtime/samples/attribute-dynamic-multiple/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let items;
+</script>
+
+{#each items as item, i}
+	<div class='{item.foo ? "foo" : ""} {item.bar ? "bar" : ""}'>{i + 1}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-dynamic-no-dependencies/_config.js b/test/runtime/samples/attribute-dynamic-no-dependencies/_config.js
new file mode 100644
index 0000000000..f1088830af
--- /dev/null
+++ b/test/runtime/samples/attribute-dynamic-no-dependencies/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<div><div title='foo'>bar</div></div>
+	`
+};
diff --git a/test/runtime/samples/attribute-dynamic-no-dependencies/main.svelte b/test/runtime/samples/attribute-dynamic-no-dependencies/main.svelte
new file mode 100644
index 0000000000..73f8216c46
--- /dev/null
+++ b/test/runtime/samples/attribute-dynamic-no-dependencies/main.svelte
@@ -0,0 +1 @@
+<div><div title={'foo'}>bar</div></div>
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-dynamic-quotemarks/_config.js b/test/runtime/samples/attribute-dynamic-quotemarks/_config.js
new file mode 100644
index 0000000000..d74a0445d2
--- /dev/null
+++ b/test/runtime/samples/attribute-dynamic-quotemarks/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<span title=\'"foo"\'>foo</span>'
+};
diff --git a/test/runtime/samples/attribute-dynamic-quotemarks/main.svelte b/test/runtime/samples/attribute-dynamic-quotemarks/main.svelte
new file mode 100644
index 0000000000..e628c35740
--- /dev/null
+++ b/test/runtime/samples/attribute-dynamic-quotemarks/main.svelte
@@ -0,0 +1 @@
+<span title='{"\"foo\""}'>foo</span>
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-dynamic-shorthand/_config.js b/test/runtime/samples/attribute-dynamic-shorthand/_config.js
new file mode 100644
index 0000000000..ebf4dd3881
--- /dev/null
+++ b/test/runtime/samples/attribute-dynamic-shorthand/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: '<div id="foo"></div>',
+
+	test({ assert, component, target }) {
+		component.id = 'bar';
+		assert.equal( target.innerHTML, '<div id="bar"></div>' );
+	}
+};
diff --git a/test/runtime/samples/attribute-dynamic-shorthand/main.svelte b/test/runtime/samples/attribute-dynamic-shorthand/main.svelte
new file mode 100644
index 0000000000..c5bdc9c35a
--- /dev/null
+++ b/test/runtime/samples/attribute-dynamic-shorthand/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let id = 'foo';
+</script>
+
+<div {id}/>
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-dynamic-type/_config.js b/test/runtime/samples/attribute-dynamic-type/_config.js
new file mode 100644
index 0000000000..fa00cb6bc3
--- /dev/null
+++ b/test/runtime/samples/attribute-dynamic-type/_config.js
@@ -0,0 +1,18 @@
+export default {
+	props: {
+		inputType: 'text',
+		inputValue: 42
+	},
+
+	html: '<input type="text">',
+	ssrHtml: '<input type="text" value="42">',
+
+	test({ assert, component, target }) {
+		const input = target.querySelector('input');
+		assert.equal(input.type, 'text');
+		assert.equal(input.value, '42');
+
+		component.inputType = 'number';
+		assert.equal(input.type, 'number');
+	}
+};
diff --git a/test/runtime/samples/attribute-dynamic-type/main.svelte b/test/runtime/samples/attribute-dynamic-type/main.svelte
new file mode 100644
index 0000000000..c8d7dd817e
--- /dev/null
+++ b/test/runtime/samples/attribute-dynamic-type/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let inputType;
+	export let inputValue;
+</script>
+
+<input type='{inputType}' value='{inputValue}'>
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-dynamic/_config.js b/test/runtime/samples/attribute-dynamic/_config.js
new file mode 100644
index 0000000000..34323a997e
--- /dev/null
+++ b/test/runtime/samples/attribute-dynamic/_config.js
@@ -0,0 +1,13 @@
+export default {
+	html: '<div style="color: red;">red</div>',
+
+	test({ assert, component, target }) {
+		const div = target.querySelector( 'div' );
+
+		assert.equal( div.style.color, 'red' );
+
+		component.color = 'blue';
+		assert.equal( target.innerHTML, '<div style="color: blue;">blue</div>' );
+		assert.equal( div.style.color, 'blue' );
+	}
+};
diff --git a/test/runtime/samples/attribute-dynamic/main.svelte b/test/runtime/samples/attribute-dynamic/main.svelte
new file mode 100644
index 0000000000..180a7226df
--- /dev/null
+++ b/test/runtime/samples/attribute-dynamic/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let color = 'red';
+</script>
+
+<div style='color: {color};'>{color}</div>
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-empty-svg/_config.js b/test/runtime/samples/attribute-empty-svg/_config.js
new file mode 100644
index 0000000000..d4b849ad89
--- /dev/null
+++ b/test/runtime/samples/attribute-empty-svg/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: `
+		<svg>
+			<g class=''></g>
+		</svg>
+	`
+};
diff --git a/test/runtime/samples/attribute-empty-svg/main.svelte b/test/runtime/samples/attribute-empty-svg/main.svelte
new file mode 100644
index 0000000000..66df315b5c
--- /dev/null
+++ b/test/runtime/samples/attribute-empty-svg/main.svelte
@@ -0,0 +1,3 @@
+<svg>
+	<g class=''></g>
+</svg>
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-empty/_config.js b/test/runtime/samples/attribute-empty/_config.js
new file mode 100644
index 0000000000..f9aaeb39a6
--- /dev/null
+++ b/test/runtime/samples/attribute-empty/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<div class=""></div>'
+};
diff --git a/test/runtime/samples/attribute-empty/main.svelte b/test/runtime/samples/attribute-empty/main.svelte
new file mode 100644
index 0000000000..63eb927eef
--- /dev/null
+++ b/test/runtime/samples/attribute-empty/main.svelte
@@ -0,0 +1 @@
+<div class=''></div>
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-false/_config.js b/test/runtime/samples/attribute-false/_config.js
new file mode 100644
index 0000000000..c05d83cb3d
--- /dev/null
+++ b/test/runtime/samples/attribute-false/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<div class="false"></div>'
+};
diff --git a/test/runtime/samples/attribute-false/main.svelte b/test/runtime/samples/attribute-false/main.svelte
new file mode 100644
index 0000000000..ca78020a39
--- /dev/null
+++ b/test/runtime/samples/attribute-false/main.svelte
@@ -0,0 +1 @@
+<div class={false}></div>
diff --git a/test/runtime/samples/attribute-namespaced/_config.js b/test/runtime/samples/attribute-namespaced/_config.js
new file mode 100644
index 0000000000..f3a7f28a93
--- /dev/null
+++ b/test/runtime/samples/attribute-namespaced/_config.js
@@ -0,0 +1,14 @@
+export default {
+	props: { foo: 'bar' },
+
+	html: `
+		<svg>
+			<use xlink:href="#bar"/>
+		</svg>
+	`,
+
+	test({ assert, target }) {
+		const use = target.querySelector( 'use' );
+		assert.equal( use.getAttributeNS( 'http://www.w3.org/1999/xlink', 'href' ), '#bar' );
+	}
+};
diff --git a/test/runtime/samples/attribute-namespaced/main.svelte b/test/runtime/samples/attribute-namespaced/main.svelte
new file mode 100644
index 0000000000..63cae9e77f
--- /dev/null
+++ b/test/runtime/samples/attribute-namespaced/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo;
+</script>
+
+<svg>
+	<use xlink:href="#{foo}"/>
+</svg>
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-null-classname-no-style/_config.js b/test/runtime/samples/attribute-null-classname-no-style/_config.js
new file mode 100644
index 0000000000..6cfefc8834
--- /dev/null
+++ b/test/runtime/samples/attribute-null-classname-no-style/_config.js
@@ -0,0 +1,42 @@
+export default {
+	props: {
+		testName: 'testClassName'
+	},
+
+	html: '<div class="testClassName"></div>',
+
+	test({ assert, component, target }) {
+		const div = target.querySelector('div');
+		assert.equal(div.className, 'testClassName');
+
+		component.testName = null;
+		assert.equal(div.className, '');
+
+		component.testName = undefined;
+		assert.equal(div.className, '');
+
+		component.testName = undefined + '';
+		assert.equal(div.className, 'undefined');
+
+		component.testName = null + '';
+		assert.equal(div.className, 'null');
+
+		component.testName = 1;
+		assert.equal(div.className, '1');
+
+		component.testName = 0;
+		assert.equal(div.className, '0');
+
+		component.testName = false;
+		assert.equal(div.className, 'false');
+
+		component.testName = true;
+		assert.equal(div.className, 'true');
+
+		component.testName = {};
+		assert.equal(div.className, '[object Object]');
+
+		component.testName = '';
+		assert.equal(div.className, '');
+	}
+};
diff --git a/test/runtime/samples/attribute-null-classname-no-style/main.svelte b/test/runtime/samples/attribute-null-classname-no-style/main.svelte
new file mode 100644
index 0000000000..8dfcd7af54
--- /dev/null
+++ b/test/runtime/samples/attribute-null-classname-no-style/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let testName;
+</script>
+
+<div class={testName}></div>
diff --git a/test/runtime/samples/attribute-null-classname-with-style/_config.js b/test/runtime/samples/attribute-null-classname-with-style/_config.js
new file mode 100644
index 0000000000..d81543295e
--- /dev/null
+++ b/test/runtime/samples/attribute-null-classname-with-style/_config.js
@@ -0,0 +1,40 @@
+export default {
+	html: '<div class=" svelte-x1o6ra"></div>',
+
+	test({ assert, component, target }) {
+		const div = target.querySelector('div');
+
+		component.testName = null;
+		assert.equal(div.className, ' svelte-x1o6ra');
+
+		component.testName = undefined;
+		assert.equal(div.className, ' svelte-x1o6ra');
+
+		component.testName = undefined + '';
+		assert.equal(div.className, 'undefined svelte-x1o6ra');
+
+		component.testName = null + '';
+		assert.equal(div.className, 'null svelte-x1o6ra');
+
+		component.testName = 1;
+		assert.equal(div.className, '1 svelte-x1o6ra');
+
+		component.testName = 0;
+		assert.equal(div.className, '0 svelte-x1o6ra');
+
+		component.testName = false;
+		assert.equal(div.className, 'false svelte-x1o6ra');
+
+		component.testName = true;
+		assert.equal(div.className, 'true svelte-x1o6ra');
+
+		component.testName = {};
+		assert.equal(div.className, '[object Object] svelte-x1o6ra');
+
+		component.testName = '';
+		assert.equal(div.className, ' svelte-x1o6ra');
+
+		component.testName = 'testClassName';
+		assert.equal(div.className, 'testClassName svelte-x1o6ra');
+	}
+};
diff --git a/test/runtime/samples/attribute-null-classname-with-style/main.svelte b/test/runtime/samples/attribute-null-classname-with-style/main.svelte
new file mode 100644
index 0000000000..013647952d
--- /dev/null
+++ b/test/runtime/samples/attribute-null-classname-with-style/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let testName;
+</script>
+
+<style>
+  div {
+    color: purple;
+  }
+</style>
+
+<div class={testName}></div>
diff --git a/test/runtime/samples/attribute-null-classnames-no-style/_config.js b/test/runtime/samples/attribute-null-classnames-no-style/_config.js
new file mode 100644
index 0000000000..7281f5b637
--- /dev/null
+++ b/test/runtime/samples/attribute-null-classnames-no-style/_config.js
@@ -0,0 +1,45 @@
+export default {
+	props: {
+		testName1: 'test1',
+		testName2: 'test2'
+	},
+
+	html: '<div class="test1test2"></div>',
+
+	test({ assert, component, target }) {
+		const div = target.querySelector('div');
+		assert.equal(div.className, 'test1test2');
+
+		component.testName1 = null;
+		component.testName2 = null;
+		assert.equal(div.className, '0');
+
+		component.testName1 = null;
+		component.testName2 = 'test';
+		assert.equal(div.className, 'nulltest');
+
+		component.testName1 = undefined;
+		component.testName2 = 'test';
+		assert.equal(div.className, 'undefinedtest');
+
+		component.testName1 = undefined;
+		component.testName2 = undefined;
+		assert.equal(div.className, 'NaN');
+
+		component.testName1 = null;
+		component.testName2 = 1;
+		assert.equal(div.className, '1');
+
+		component.testName1 = undefined;
+		component.testName2 = 1;
+		assert.equal(div.className, 'NaN');
+
+		component.testName1 = null;
+		component.testName2 = 0;
+		assert.equal(div.className, '0');
+
+		component.testName1 = undefined;
+		component.testName2 = 0;
+		assert.equal(div.className, 'NaN');
+	}
+};
diff --git a/test/runtime/samples/attribute-null-classnames-no-style/main.svelte b/test/runtime/samples/attribute-null-classnames-no-style/main.svelte
new file mode 100644
index 0000000000..f8cf7d803e
--- /dev/null
+++ b/test/runtime/samples/attribute-null-classnames-no-style/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let testName1;
+	export let testName2;
+</script>
+
+<div class={testName1 + testName2}></div>
diff --git a/test/runtime/samples/attribute-null-classnames-with-style/_config.js b/test/runtime/samples/attribute-null-classnames-with-style/_config.js
new file mode 100644
index 0000000000..547e62427f
--- /dev/null
+++ b/test/runtime/samples/attribute-null-classnames-with-style/_config.js
@@ -0,0 +1,45 @@
+export default {
+	props: {
+		testName1: 'test1',
+		testName2: 'test2'
+	},
+
+	html: '<div class="test1test2 svelte-x1o6ra"></div>',
+
+	test({ assert, component, target }) {
+		const div = target.querySelector('div');
+		assert.equal(div.className, 'test1test2 svelte-x1o6ra');
+
+		component.testName1 = null;
+		component.testName2 = null;
+		assert.equal(div.className, '0 svelte-x1o6ra');
+
+		component.testName1 = null;
+		component.testName2 = 'test';
+		assert.equal(div.className, 'nulltest svelte-x1o6ra');
+
+		component.testName1 = undefined;
+		component.testName2 = 'test';
+		assert.equal(div.className, 'undefinedtest svelte-x1o6ra');
+
+		component.testName1 = undefined;
+		component.testName2 = undefined;
+		assert.equal(div.className, 'NaN svelte-x1o6ra');
+
+		component.testName1 = null;
+		component.testName2 = 1;
+		assert.equal(div.className, '1 svelte-x1o6ra');
+
+		component.testName1 = undefined;
+		component.testName2 = 1;
+		assert.equal(div.className, 'NaN svelte-x1o6ra');
+
+		component.testName1 = null;
+		component.testName2 = 0;
+		assert.equal(div.className, '0 svelte-x1o6ra');
+
+		component.testName1 = undefined;
+		component.testName2 = 0;
+		assert.equal(div.className, 'NaN svelte-x1o6ra');
+	}
+};
diff --git a/test/runtime/samples/attribute-null-classnames-with-style/main.svelte b/test/runtime/samples/attribute-null-classnames-with-style/main.svelte
new file mode 100644
index 0000000000..06098fd50b
--- /dev/null
+++ b/test/runtime/samples/attribute-null-classnames-with-style/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let testName1;
+	export let testName2;
+</script>
+
+<style>
+  div {
+    color: purple;
+  }
+</style>
+
+<div class={testName1 + testName2}></div>
diff --git a/test/runtime/samples/attribute-null-func-classname-no-style/_config.js b/test/runtime/samples/attribute-null-func-classname-no-style/_config.js
new file mode 100644
index 0000000000..6cfefc8834
--- /dev/null
+++ b/test/runtime/samples/attribute-null-func-classname-no-style/_config.js
@@ -0,0 +1,42 @@
+export default {
+	props: {
+		testName: 'testClassName'
+	},
+
+	html: '<div class="testClassName"></div>',
+
+	test({ assert, component, target }) {
+		const div = target.querySelector('div');
+		assert.equal(div.className, 'testClassName');
+
+		component.testName = null;
+		assert.equal(div.className, '');
+
+		component.testName = undefined;
+		assert.equal(div.className, '');
+
+		component.testName = undefined + '';
+		assert.equal(div.className, 'undefined');
+
+		component.testName = null + '';
+		assert.equal(div.className, 'null');
+
+		component.testName = 1;
+		assert.equal(div.className, '1');
+
+		component.testName = 0;
+		assert.equal(div.className, '0');
+
+		component.testName = false;
+		assert.equal(div.className, 'false');
+
+		component.testName = true;
+		assert.equal(div.className, 'true');
+
+		component.testName = {};
+		assert.equal(div.className, '[object Object]');
+
+		component.testName = '';
+		assert.equal(div.className, '');
+	}
+};
diff --git a/test/runtime/samples/attribute-null-func-classname-no-style/main.svelte b/test/runtime/samples/attribute-null-func-classname-no-style/main.svelte
new file mode 100644
index 0000000000..e2754cd421
--- /dev/null
+++ b/test/runtime/samples/attribute-null-func-classname-no-style/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let testName;
+
+	function myHelper(testName) {
+		return testName;
+	}
+</script>
+
+<div class={myHelper(testName)}></div>
diff --git a/test/runtime/samples/attribute-null-func-classname-with-style/_config.js b/test/runtime/samples/attribute-null-func-classname-with-style/_config.js
new file mode 100644
index 0000000000..435a679da7
--- /dev/null
+++ b/test/runtime/samples/attribute-null-func-classname-with-style/_config.js
@@ -0,0 +1,42 @@
+export default {
+	props: {
+		testName: 'testClassName'
+	},
+
+	html: '<div class="testClassName svelte-x1o6ra"></div>',
+
+	test({ assert, component, target }) {
+		const div = target.querySelector('div');
+		assert.equal(div.className, 'testClassName svelte-x1o6ra');
+
+		component.testName = null;
+		assert.equal(div.className, ' svelte-x1o6ra');
+
+		component.testName = undefined;
+		assert.equal(div.className, ' svelte-x1o6ra');
+
+		component.testName = undefined + '';
+		assert.equal(div.className, 'undefined svelte-x1o6ra');
+
+		component.testName = null + '';
+		assert.equal(div.className, 'null svelte-x1o6ra');
+
+		component.testName = 1;
+		assert.equal(div.className, '1 svelte-x1o6ra');
+
+		component.testName = 0;
+		assert.equal(div.className, '0 svelte-x1o6ra');
+
+		component.testName = false;
+		assert.equal(div.className, 'false svelte-x1o6ra');
+
+		component.testName = true;
+		assert.equal(div.className, 'true svelte-x1o6ra');
+
+		component.testName = {};
+		assert.equal(div.className, '[object Object] svelte-x1o6ra');
+
+		component.testName = '';
+		assert.equal(div.className, ' svelte-x1o6ra');
+	}
+};
diff --git a/test/runtime/samples/attribute-null-func-classname-with-style/main.svelte b/test/runtime/samples/attribute-null-func-classname-with-style/main.svelte
new file mode 100644
index 0000000000..bcb858ab8d
--- /dev/null
+++ b/test/runtime/samples/attribute-null-func-classname-with-style/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let testName;
+
+	function myHelper(testName) {
+		return testName;
+	}
+</script>
+
+<style>
+  div {
+    color: purple;
+  }
+</style>
+
+<div class={myHelper(testName)}></div>
diff --git a/test/runtime/samples/attribute-null-func-classnames-no-style/_config.js b/test/runtime/samples/attribute-null-func-classnames-no-style/_config.js
new file mode 100644
index 0000000000..7281f5b637
--- /dev/null
+++ b/test/runtime/samples/attribute-null-func-classnames-no-style/_config.js
@@ -0,0 +1,45 @@
+export default {
+	props: {
+		testName1: 'test1',
+		testName2: 'test2'
+	},
+
+	html: '<div class="test1test2"></div>',
+
+	test({ assert, component, target }) {
+		const div = target.querySelector('div');
+		assert.equal(div.className, 'test1test2');
+
+		component.testName1 = null;
+		component.testName2 = null;
+		assert.equal(div.className, '0');
+
+		component.testName1 = null;
+		component.testName2 = 'test';
+		assert.equal(div.className, 'nulltest');
+
+		component.testName1 = undefined;
+		component.testName2 = 'test';
+		assert.equal(div.className, 'undefinedtest');
+
+		component.testName1 = undefined;
+		component.testName2 = undefined;
+		assert.equal(div.className, 'NaN');
+
+		component.testName1 = null;
+		component.testName2 = 1;
+		assert.equal(div.className, '1');
+
+		component.testName1 = undefined;
+		component.testName2 = 1;
+		assert.equal(div.className, 'NaN');
+
+		component.testName1 = null;
+		component.testName2 = 0;
+		assert.equal(div.className, '0');
+
+		component.testName1 = undefined;
+		component.testName2 = 0;
+		assert.equal(div.className, 'NaN');
+	}
+};
diff --git a/test/runtime/samples/attribute-null-func-classnames-no-style/main.svelte b/test/runtime/samples/attribute-null-func-classnames-no-style/main.svelte
new file mode 100644
index 0000000000..e1cdf51412
--- /dev/null
+++ b/test/runtime/samples/attribute-null-func-classnames-no-style/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let testName1;
+  export let testName2;
+  
+
+	function myHelper(testName) {
+		return testName;
+	}
+</script>
+
+<div class={myHelper(testName1) + myHelper(testName2)}></div>
diff --git a/test/runtime/samples/attribute-null-func-classnames-with-style/_config.js b/test/runtime/samples/attribute-null-func-classnames-with-style/_config.js
new file mode 100644
index 0000000000..547e62427f
--- /dev/null
+++ b/test/runtime/samples/attribute-null-func-classnames-with-style/_config.js
@@ -0,0 +1,45 @@
+export default {
+	props: {
+		testName1: 'test1',
+		testName2: 'test2'
+	},
+
+	html: '<div class="test1test2 svelte-x1o6ra"></div>',
+
+	test({ assert, component, target }) {
+		const div = target.querySelector('div');
+		assert.equal(div.className, 'test1test2 svelte-x1o6ra');
+
+		component.testName1 = null;
+		component.testName2 = null;
+		assert.equal(div.className, '0 svelte-x1o6ra');
+
+		component.testName1 = null;
+		component.testName2 = 'test';
+		assert.equal(div.className, 'nulltest svelte-x1o6ra');
+
+		component.testName1 = undefined;
+		component.testName2 = 'test';
+		assert.equal(div.className, 'undefinedtest svelte-x1o6ra');
+
+		component.testName1 = undefined;
+		component.testName2 = undefined;
+		assert.equal(div.className, 'NaN svelte-x1o6ra');
+
+		component.testName1 = null;
+		component.testName2 = 1;
+		assert.equal(div.className, '1 svelte-x1o6ra');
+
+		component.testName1 = undefined;
+		component.testName2 = 1;
+		assert.equal(div.className, 'NaN svelte-x1o6ra');
+
+		component.testName1 = null;
+		component.testName2 = 0;
+		assert.equal(div.className, '0 svelte-x1o6ra');
+
+		component.testName1 = undefined;
+		component.testName2 = 0;
+		assert.equal(div.className, 'NaN svelte-x1o6ra');
+	}
+};
diff --git a/test/runtime/samples/attribute-null-func-classnames-with-style/main.svelte b/test/runtime/samples/attribute-null-func-classnames-with-style/main.svelte
new file mode 100644
index 0000000000..af43778365
--- /dev/null
+++ b/test/runtime/samples/attribute-null-func-classnames-with-style/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	export let testName1;
+  export let testName2;
+  
+
+	function myHelper(testName) {
+		return testName;
+	}
+</script>
+
+<style>
+  div {
+    color: purple;
+  }
+</style>
+
+<div class={myHelper(testName1) + myHelper(testName2)}></div>
diff --git a/test/runtime/samples/attribute-null/_config.js b/test/runtime/samples/attribute-null/_config.js
new file mode 100644
index 0000000000..ded19eef79
--- /dev/null
+++ b/test/runtime/samples/attribute-null/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<div></div>'
+};
diff --git a/test/runtime/samples/attribute-null/main.svelte b/test/runtime/samples/attribute-null/main.svelte
new file mode 100644
index 0000000000..9b7f48eda3
--- /dev/null
+++ b/test/runtime/samples/attribute-null/main.svelte
@@ -0,0 +1 @@
+<div class={null}></div>
diff --git a/test/runtime/samples/attribute-partial-number/Component.svelte b/test/runtime/samples/attribute-partial-number/Component.svelte
new file mode 100644
index 0000000000..02995c7e80
--- /dev/null
+++ b/test/runtime/samples/attribute-partial-number/Component.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let value;
+</script>
+
+<p data-value="{value}"></p>
diff --git a/test/runtime/samples/attribute-partial-number/_config.js b/test/runtime/samples/attribute-partial-number/_config.js
new file mode 100644
index 0000000000..03d7168694
--- /dev/null
+++ b/test/runtime/samples/attribute-partial-number/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p data-value="10px"></p>'
+};
diff --git a/test/runtime/samples/attribute-partial-number/main.svelte b/test/runtime/samples/attribute-partial-number/main.svelte
new file mode 100644
index 0000000000..163116e4fa
--- /dev/null
+++ b/test/runtime/samples/attribute-partial-number/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Component from './Component.svelte';
+</script>
+
+<Component value="10px"/>
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-prefer-expression/_config.js b/test/runtime/samples/attribute-prefer-expression/_config.js
new file mode 100644
index 0000000000..22bed8a6bc
--- /dev/null
+++ b/test/runtime/samples/attribute-prefer-expression/_config.js
@@ -0,0 +1,18 @@
+export default {
+
+	props: {
+		foo: false
+	},
+
+	test({ assert, component, target }) {
+		const inputs = target.querySelectorAll('input');
+
+		assert.ok(inputs[0].checked);
+		assert.ok(!inputs[1].checked);
+
+		component.foo = true;
+
+		assert.ok(!inputs[0].checked);
+		assert.ok(inputs[1].checked);
+	}
+};
diff --git a/test/runtime/samples/attribute-prefer-expression/main.svelte b/test/runtime/samples/attribute-prefer-expression/main.svelte
new file mode 100644
index 0000000000..5874626d94
--- /dev/null
+++ b/test/runtime/samples/attribute-prefer-expression/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let foo;
+</script>
+
+<input type='radio' bind:group={foo} value='{false}'>
+<input type='radio' bind:group={foo} value='{true}'>
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-static-at-symbol/_config.js b/test/runtime/samples/attribute-static-at-symbol/_config.js
new file mode 100644
index 0000000000..0be19f091f
--- /dev/null
+++ b/test/runtime/samples/attribute-static-at-symbol/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: "<a href='mailto:hello@example.com'>email</a>"
+};
diff --git a/test/runtime/samples/attribute-static-at-symbol/main.svelte b/test/runtime/samples/attribute-static-at-symbol/main.svelte
new file mode 100644
index 0000000000..2b5e73ebcf
--- /dev/null
+++ b/test/runtime/samples/attribute-static-at-symbol/main.svelte
@@ -0,0 +1 @@
+<a href='mailto:hello@example.com'>email</a>
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-static-boolean/_config.js b/test/runtime/samples/attribute-static-boolean/_config.js
new file mode 100644
index 0000000000..2d31b26747
--- /dev/null
+++ b/test/runtime/samples/attribute-static-boolean/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: '<textarea readonly=""></textarea>',
+	test({ assert, target }) {
+		const textarea = target.querySelector( 'textarea' );
+		assert.ok( textarea.readOnly );
+	}
+};
diff --git a/test/runtime/samples/attribute-static-boolean/main.svelte b/test/runtime/samples/attribute-static-boolean/main.svelte
new file mode 100644
index 0000000000..1536f3e1e8
--- /dev/null
+++ b/test/runtime/samples/attribute-static-boolean/main.svelte
@@ -0,0 +1 @@
+<textarea readonly></textarea>
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-static-quotemarks/_config.js b/test/runtime/samples/attribute-static-quotemarks/_config.js
new file mode 100644
index 0000000000..e908052b4f
--- /dev/null
+++ b/test/runtime/samples/attribute-static-quotemarks/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: `
+		<span title='"foo"'>
+			foo
+  		<span title='"bar"'>bar</span>
+		</span>
+	`
+};
diff --git a/test/runtime/samples/attribute-static-quotemarks/main.svelte b/test/runtime/samples/attribute-static-quotemarks/main.svelte
new file mode 100644
index 0000000000..e01af9f098
--- /dev/null
+++ b/test/runtime/samples/attribute-static-quotemarks/main.svelte
@@ -0,0 +1,4 @@
+<span title='"foo"'>
+  foo
+  <span title='"bar"'>bar</span>
+</span>
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-static/_config.js b/test/runtime/samples/attribute-static/_config.js
new file mode 100644
index 0000000000..60c3cb2fc0
--- /dev/null
+++ b/test/runtime/samples/attribute-static/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<div class="foo"></div>'
+};
diff --git a/test/runtime/samples/attribute-static/main.svelte b/test/runtime/samples/attribute-static/main.svelte
new file mode 100644
index 0000000000..c6a8a8c95d
--- /dev/null
+++ b/test/runtime/samples/attribute-static/main.svelte
@@ -0,0 +1 @@
+<div class='foo'></div>
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-undefined/_config.js b/test/runtime/samples/attribute-undefined/_config.js
new file mode 100644
index 0000000000..ded19eef79
--- /dev/null
+++ b/test/runtime/samples/attribute-undefined/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<div></div>'
+};
diff --git a/test/runtime/samples/attribute-undefined/main.svelte b/test/runtime/samples/attribute-undefined/main.svelte
new file mode 100644
index 0000000000..5108aa873f
--- /dev/null
+++ b/test/runtime/samples/attribute-undefined/main.svelte
@@ -0,0 +1 @@
+<div class={undefined}></div>
diff --git a/test/runtime/samples/attribute-unknown-without-value/_config.js b/test/runtime/samples/attribute-unknown-without-value/_config.js
new file mode 100644
index 0000000000..9645e86ef4
--- /dev/null
+++ b/test/runtime/samples/attribute-unknown-without-value/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<div potato=""></div>'
+};
diff --git a/test/runtime/samples/attribute-unknown-without-value/main.svelte b/test/runtime/samples/attribute-unknown-without-value/main.svelte
new file mode 100644
index 0000000000..0952586580
--- /dev/null
+++ b/test/runtime/samples/attribute-unknown-without-value/main.svelte
@@ -0,0 +1 @@
+<div potato></div>
\ No newline at end of file
diff --git a/test/runtime/samples/attribute-url/_config.js b/test/runtime/samples/attribute-url/_config.js
new file mode 100644
index 0000000000..28bc1bcb0c
--- /dev/null
+++ b/test/runtime/samples/attribute-url/_config.js
@@ -0,0 +1,8 @@
+export default {
+	test({ assert, target }) {
+		const div = target.querySelector( 'div' );
+
+		assert.equal( div.style.backgroundImage, 'url(https://example.com/foo.jpg)');
+		assert.equal( div.style.color, 'red' );
+	}
+};
diff --git a/test/runtime/samples/attribute-url/main.svelte b/test/runtime/samples/attribute-url/main.svelte
new file mode 100644
index 0000000000..357a352aaa
--- /dev/null
+++ b/test/runtime/samples/attribute-url/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	let bgImage = 'https://example.com/foo.jpg';
+	let color = 'red';
+</script>
+
+<div style="background-image: url('{bgImage}'); color: {color};">{color}</div>
diff --git a/test/runtime/samples/autofocus/_config.js b/test/runtime/samples/autofocus/_config.js
new file mode 100644
index 0000000000..b0131f8bfe
--- /dev/null
+++ b/test/runtime/samples/autofocus/_config.js
@@ -0,0 +1,24 @@
+export default {
+	html: '',
+
+	test({ assert, component, target, window }) {
+		component.active = 'default';
+		assert.equal(target.querySelector('input[title="default"]'), window.document.activeElement);
+
+		component.active = 'dynamic-false';
+		assert.notEqual(target.querySelector('input[title="dynamic-false"]'), window.document.activeElement);
+
+		// when dynamically set autofocus to true, don't autofocus
+		component.autofocusFalse = true;
+		assert.notEqual(target.querySelector('input[title="dynamic-false"]'), window.document.activeElement);
+
+		component.active = 'dynamic-true';
+		assert.equal(target.querySelector('input[title="dynamic-true"]'), window.document.activeElement);
+
+		component.active = 'spread';
+		assert.equal(target.querySelector('input[title="spread"]'), window.document.activeElement);
+
+		component.active = 'spread-override';
+		assert.notEqual(target.querySelector('input[title="spread-override"]'), window.document.activeElement);
+	}
+};
diff --git a/test/runtime/samples/autofocus/main.svelte b/test/runtime/samples/autofocus/main.svelte
new file mode 100644
index 0000000000..ecdb1beb5e
--- /dev/null
+++ b/test/runtime/samples/autofocus/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	export let active = 'default';
+	export let autofocusFalse = false;
+	export let autofocusTrue = true;
+	let spread = { autofocus: true };
+</script>
+
+{#if active === 'default'}
+	<input title={active} autofocus />
+{:else if active === 'dynamic-false'}
+	<input title={active} autofocus={autofocusFalse} />
+{:else if active === 'dynamic-true'}
+	<input title={active} autofocus={autofocusTrue} />
+{:else if active === 'spread'}
+	<input title={active} {...spread} />
+{:else if active === 'spread-override'}
+	<input title={active} {...spread} autofocus={false} />
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/await-catch-no-expression/_config.js b/test/runtime/samples/await-catch-no-expression/_config.js
new file mode 100644
index 0000000000..5274e60e2d
--- /dev/null
+++ b/test/runtime/samples/await-catch-no-expression/_config.js
@@ -0,0 +1,47 @@
+let fulfil;
+
+let thePromise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		thePromise
+	},
+
+	html: `
+		<br />
+		<p>the promise is pending</p>
+	`,
+
+	async test({ assert, component, target }) {
+		fulfil(42);
+
+		await thePromise;
+
+		assert.htmlEqual(target.innerHTML, '<br />');
+
+		let reject;
+
+		thePromise = new Promise((f, r) => {
+			reject = r;
+		});
+
+		component.thePromise = thePromise;
+
+		assert.htmlEqual(target.innerHTML, `
+			<br />
+			<p>the promise is pending</p>
+		`);
+
+		reject(new Error());
+
+		await thePromise.catch(() => {});
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>oh no! Something broke!</p>
+			<br />
+			<p>oh no! Something broke!</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/await-catch-no-expression/main.svelte b/test/runtime/samples/await-catch-no-expression/main.svelte
new file mode 100644
index 0000000000..0da0d12092
--- /dev/null
+++ b/test/runtime/samples/await-catch-no-expression/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let thePromise;
+</script>
+
+{#await thePromise catch}
+	<p>oh no! Something broke!</p>
+{/await}
+
+<br />
+
+{#await thePromise}
+	<p>the promise is pending</p>
+{:catch}
+	<p>oh no! Something broke!</p>
+{/await}
diff --git a/test/runtime/samples/await-catch-shorthand/_config.js b/test/runtime/samples/await-catch-shorthand/_config.js
new file mode 100644
index 0000000000..fc65773107
--- /dev/null
+++ b/test/runtime/samples/await-catch-shorthand/_config.js
@@ -0,0 +1,41 @@
+let fulfil;
+
+let thePromise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		thePromise
+	},
+
+	html: '',
+
+	test({ assert, component, target }) {
+		fulfil(42);
+
+		return thePromise
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, '');
+
+				let reject;
+
+				thePromise = new Promise((f, r) => {
+					reject = r;
+				});
+
+				component.thePromise = thePromise;
+
+				assert.htmlEqual(target.innerHTML, '');
+
+				reject(new Error('something broke'));
+
+				return thePromise.catch(() => {});
+			})
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<p>oh no! something broke</p>
+				`);
+			});
+	}
+};
diff --git a/test/runtime/samples/await-catch-shorthand/main.svelte b/test/runtime/samples/await-catch-shorthand/main.svelte
new file mode 100644
index 0000000000..844e7da08c
--- /dev/null
+++ b/test/runtime/samples/await-catch-shorthand/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let thePromise;
+</script>
+
+{#await thePromise catch theError}
+	<p>oh no! {theError.message}</p>
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/await-component-oncreate/Foo.svelte b/test/runtime/samples/await-component-oncreate/Foo.svelte
new file mode 100644
index 0000000000..cff16fde6f
--- /dev/null
+++ b/test/runtime/samples/await-component-oncreate/Foo.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let value;
+	let called = false;
+
+	onMount(() => {
+		called = true;
+	});
+</script>
+
+<p>{value}</p>
+<p>{called}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/await-component-oncreate/_config.js b/test/runtime/samples/await-component-oncreate/_config.js
new file mode 100644
index 0000000000..1de86c9f44
--- /dev/null
+++ b/test/runtime/samples/await-component-oncreate/_config.js
@@ -0,0 +1,16 @@
+const promise = Promise.resolve(42);
+
+export default {
+	props: {
+		promise
+	},
+
+	test({ assert, target }) {
+		return promise.then(() => {
+			assert.htmlEqual(target.innerHTML, `
+				<p>42</p>
+				<p>true</p>
+			`);
+		});
+	}
+};
diff --git a/test/runtime/samples/await-component-oncreate/main.svelte b/test/runtime/samples/await-component-oncreate/main.svelte
new file mode 100644
index 0000000000..d1ddc16fd2
--- /dev/null
+++ b/test/runtime/samples/await-component-oncreate/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Foo from './Foo.svelte';
+
+	export let promise;
+</script>
+
+{#await promise then value}
+	<Foo {value} />
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/await-conservative-update/_config.js b/test/runtime/samples/await-conservative-update/_config.js
new file mode 100644
index 0000000000..c548a400af
--- /dev/null
+++ b/test/runtime/samples/await-conservative-update/_config.js
@@ -0,0 +1,16 @@
+import { sleep } from './sleep.js';
+
+export default {
+	html: `
+		<p>loading...</p>
+	`,
+
+	test({ assert, target }) {
+		return sleep(50).then(() => {
+			assert.htmlEqual(target.innerHTML, `
+				<p>the answer is 42</p>
+				<p>count: 1</p>
+			`);
+		});
+	}
+};
diff --git a/test/runtime/samples/await-conservative-update/main.svelte b/test/runtime/samples/await-conservative-update/main.svelte
new file mode 100644
index 0000000000..91c9a6c4c2
--- /dev/null
+++ b/test/runtime/samples/await-conservative-update/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import { sleep } from './sleep.js';
+
+	let count = 0;
+
+	const get_promise = () => {
+		return sleep(10).then(() => {
+			count += 1;
+			return 42;
+		});
+	};
+</script>
+
+{#await get_promise()}
+	<p>loading...</p>
+{:then value}
+	<p>the answer is {value}</p>
+	<p>count: {count}</p>
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/await-conservative-update/sleep.js b/test/runtime/samples/await-conservative-update/sleep.js
new file mode 100644
index 0000000000..be592a4ea4
--- /dev/null
+++ b/test/runtime/samples/await-conservative-update/sleep.js
@@ -0,0 +1,11 @@
+export let stopped = false;
+
+export const stop = () => stopped = true;
+
+export const sleep = ms => new Promise(f => {
+	if (stopped) return;
+	setTimeout(() => {
+		if (stopped) return;
+		f();
+	}, ms);
+});
diff --git a/test/runtime/samples/await-containing-if/_config.js b/test/runtime/samples/await-containing-if/_config.js
new file mode 100644
index 0000000000..a81b040a12
--- /dev/null
+++ b/test/runtime/samples/await-containing-if/_config.js
@@ -0,0 +1,35 @@
+let fulfil;
+
+const thePromise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		thePromise,
+		show: true
+	},
+
+	html: `
+		<div><p>loading...</p></div>
+	`,
+
+	test({ assert, component, target }) {
+		fulfil(42);
+
+		return thePromise
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<div><p>the value is 42</p></div>
+				`);
+
+				component.show = false;
+				assert.htmlEqual(target.innerHTML, '<div></div>');
+
+				component.show = true;
+				assert.htmlEqual(target.innerHTML, `
+					<div><p>the value is 42</p></div>
+				`);
+			});
+	}
+};
diff --git a/test/runtime/samples/await-containing-if/main.svelte b/test/runtime/samples/await-containing-if/main.svelte
new file mode 100644
index 0000000000..c7472fd5d7
--- /dev/null
+++ b/test/runtime/samples/await-containing-if/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let thePromise;
+	export let show;
+</script>
+
+<div>
+	{#await thePromise}
+		<p>loading...</p>
+	{:then theValue}
+		{#if show}
+			<p>the value is {theValue}</p>
+		{/if}
+	{:catch theError}
+		<p>oh no! {theError.message}</p>
+	{/await}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/await-in-dynamic-component/Widget.svelte b/test/runtime/samples/await-in-dynamic-component/Widget.svelte
new file mode 100644
index 0000000000..78118e944d
--- /dev/null
+++ b/test/runtime/samples/await-in-dynamic-component/Widget.svelte
@@ -0,0 +1 @@
+{#await null}{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/await-in-dynamic-component/_config.js b/test/runtime/samples/await-in-dynamic-component/_config.js
new file mode 100644
index 0000000000..d92757b68b
--- /dev/null
+++ b/test/runtime/samples/await-in-dynamic-component/_config.js
@@ -0,0 +1,5 @@
+export default {
+	test({ component }) {
+		component.flag = false;
+	}
+};
diff --git a/test/runtime/samples/await-in-dynamic-component/main.svelte b/test/runtime/samples/await-in-dynamic-component/main.svelte
new file mode 100644
index 0000000000..c395cb4499
--- /dev/null
+++ b/test/runtime/samples/await-in-dynamic-component/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let flag = true;
+	import Widget from './Widget.svelte';
+</script>
+
+<svelte:component this={flag && Widget}/>
\ No newline at end of file
diff --git a/test/runtime/samples/await-in-each/_config.js b/test/runtime/samples/await-in-each/_config.js
new file mode 100644
index 0000000000..617194a95c
--- /dev/null
+++ b/test/runtime/samples/await-in-each/_config.js
@@ -0,0 +1,31 @@
+let fulfil;
+
+const thePromise = new Promise(f => {
+	fulfil = f;
+});
+
+const items = [{
+	title: 'a title',
+	data: thePromise
+}];
+
+export default {
+	props: {
+		items
+	},
+
+	html: `
+		<p>a title: loading...</p>
+	`,
+
+	test({ assert, target }) {
+		fulfil(42);
+
+		return thePromise
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<p>a title: 42</p>
+				`);
+			});
+	}
+};
diff --git a/test/runtime/samples/await-in-each/main.svelte b/test/runtime/samples/await-in-each/main.svelte
new file mode 100644
index 0000000000..8ad9578f25
--- /dev/null
+++ b/test/runtime/samples/await-in-each/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let items;
+</script>
+
+{#each items as item}
+	{#await item.data}
+		<p>{item.title}: loading...</p>
+	{:then result}
+		<p>{item.title}: {result}</p>
+	{/await}
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/await-in-removed-if/_config.js b/test/runtime/samples/await-in-removed-if/_config.js
new file mode 100644
index 0000000000..18b2ac7b74
--- /dev/null
+++ b/test/runtime/samples/await-in-removed-if/_config.js
@@ -0,0 +1,22 @@
+let fulfil;
+
+const promise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		promise
+	},
+
+	html: '',
+
+	async test({ assert, component, target }) {
+		component.condition = false;
+
+		fulfil();
+		await new Promise(f => setTimeout(f, 0));
+
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/await-in-removed-if/main.svelte b/test/runtime/samples/await-in-removed-if/main.svelte
new file mode 100644
index 0000000000..e854b6feab
--- /dev/null
+++ b/test/runtime/samples/await-in-removed-if/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let promise;
+	export let condition = true;
+</script>
+
+{#if condition}
+	{#await promise then _}hello{/await}
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/await-set-simultaneous-reactive/_config.js b/test/runtime/samples/await-set-simultaneous-reactive/_config.js
new file mode 100644
index 0000000000..0b5c0b8c74
--- /dev/null
+++ b/test/runtime/samples/await-set-simultaneous-reactive/_config.js
@@ -0,0 +1,13 @@
+export default {
+	html: '<p>wait for it...</p>',
+	test({ assert, component, target }) {
+
+		return component.promise
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<p>the answer is 42!</p>
+					<p>the answer100 is 4200!</p>
+				`);
+			});
+	}
+};
diff --git a/test/runtime/samples/await-set-simultaneous-reactive/main.svelte b/test/runtime/samples/await-set-simultaneous-reactive/main.svelte
new file mode 100644
index 0000000000..c1bbac66be
--- /dev/null
+++ b/test/runtime/samples/await-set-simultaneous-reactive/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	let answer = 0;
+	$: answer100 = answer * 100;
+	export let promise = new Promise(resolve => {
+		setTimeout(() => {
+			resolve();
+			answer = 42;
+		}, 0)
+	});
+</script>
+
+{#if promise}
+	{#await promise}
+		<p>wait for it...</p>
+	{:then _}
+		<p>the answer is {answer}!</p>
+		<p>the answer100 is {answer100}!</p>
+	{:catch error}
+		<p>well that's odd</p>
+	{/await}
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/await-set-simultaneous/_config.js b/test/runtime/samples/await-set-simultaneous/_config.js
new file mode 100644
index 0000000000..fb75a9f6f0
--- /dev/null
+++ b/test/runtime/samples/await-set-simultaneous/_config.js
@@ -0,0 +1,18 @@
+export default {
+	test({ assert, component, target }) {
+		const promise = Promise.resolve().then(() => {
+			component.answer = 42;
+		});
+
+		component.promise = promise;
+
+		assert.htmlEqual(target.innerHTML, '<p>wait for it...</p>');
+
+		return promise
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<p>the answer is 42!</p>
+				`);
+			});
+	}
+};
diff --git a/test/runtime/samples/await-set-simultaneous/main.svelte b/test/runtime/samples/await-set-simultaneous/main.svelte
new file mode 100644
index 0000000000..638b5e5251
--- /dev/null
+++ b/test/runtime/samples/await-set-simultaneous/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let promise;
+	export let answer;
+</script>
+
+{#if promise}
+	{#await promise}
+		<p>wait for it...</p>
+	{:then _}
+		<p>the answer is {answer}!</p>
+	{:catch error}
+		<p>well that's odd</p>
+	{/await}
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/await-then-blowback-reactive/Widget.svelte b/test/runtime/samples/await-then-blowback-reactive/Widget.svelte
new file mode 100644
index 0000000000..cfd918558b
--- /dev/null
+++ b/test/runtime/samples/await-then-blowback-reactive/Widget.svelte
@@ -0,0 +1,15 @@
+<script>
+  export let options = [];
+  export let index = 0;
+  export let value;
+
+  $: {
+		value = options[index];
+  }
+</script>
+
+<select bind:value={index}>
+  {#each options as option, i}
+    <option value={i}>{option}</option>
+  {/each}
+</select>
diff --git a/test/runtime/samples/await-then-blowback-reactive/_config.js b/test/runtime/samples/await-then-blowback-reactive/_config.js
new file mode 100644
index 0000000000..7f094478ed
--- /dev/null
+++ b/test/runtime/samples/await-then-blowback-reactive/_config.js
@@ -0,0 +1,19 @@
+export default {
+	async test({ assert, component, target }) {
+		assert.htmlEqual(target.innerHTML, 'Loading...');
+
+		await component.promise;
+		const span = target.querySelector('span');
+		assert.equal(span.textContent, 'a');
+
+		const select = target.querySelector('select');
+		const options = [...target.querySelectorAll('option')];
+
+		const change = new window.Event('change');
+
+		options[1].selected = true;
+		await select.dispatchEvent(change);
+
+		assert.equal(span.textContent, 'b');
+	}
+};
diff --git a/test/runtime/samples/await-then-blowback-reactive/main.svelte b/test/runtime/samples/await-then-blowback-reactive/main.svelte
new file mode 100644
index 0000000000..eb55465de0
--- /dev/null
+++ b/test/runtime/samples/await-then-blowback-reactive/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Widget from './Widget.svelte';
+	export let promise = Promise.resolve(['a', 'b']);
+	let value;
+</script>
+
+{#await promise}
+	Loading...
+{:then options}
+	<Widget {options} bind:value />
+	<span>{value}</span>
+{/await}
diff --git a/test/runtime/samples/await-then-catch-anchor/_config.js b/test/runtime/samples/await-then-catch-anchor/_config.js
new file mode 100644
index 0000000000..bb075095e5
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-anchor/_config.js
@@ -0,0 +1,47 @@
+let fulfil;
+
+let thePromise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		thePromise
+	},
+
+	html: `
+		<div><p>loading...</p></div>
+	`,
+
+	test({ assert, component, target }) {
+		fulfil(42);
+
+		return thePromise
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<div><p>the value is 42</p></div>
+				`);
+
+				let reject;
+
+				thePromise = new Promise((f, r) => {
+					reject = r;
+				});
+
+				component.thePromise = thePromise;
+
+				assert.htmlEqual(target.innerHTML, `
+					<div><p>loading...</p></div>
+				`);
+
+				reject(new Error('something broke'));
+
+				return thePromise.catch(() => {});
+			})
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<div><p>oh no! something broke</p></div>
+				`);
+			});
+	}
+};
diff --git a/test/runtime/samples/await-then-catch-anchor/main.svelte b/test/runtime/samples/await-then-catch-anchor/main.svelte
new file mode 100644
index 0000000000..efa66bf7f4
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-anchor/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let thePromise;
+</script>
+
+<div>
+{#await thePromise}
+<p>loading...</p>
+{:then theValue}
+<p>the value is {theValue}</p>
+{:catch theError}
+<p>oh no! {theError.message}</p>
+{/await}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/await-then-catch-event/_config.js b/test/runtime/samples/await-then-catch-event/_config.js
new file mode 100644
index 0000000000..0f4ce27628
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-event/_config.js
@@ -0,0 +1,45 @@
+let fulfil;
+let thePromise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		thePromise
+	},
+
+	html: `
+		<p>loading...</p>
+	`,
+
+	test({ assert, component, target, window }) {
+		fulfil(42);
+
+		return thePromise
+			.then(async () => {
+				assert.htmlEqual(target.innerHTML, `
+					<button>click me</button>
+				`);
+
+				const { button } = component;
+
+				const click = new window.MouseEvent('click');
+				button.dispatchEvent(click);
+
+				assert.equal(component.clicked, 42);
+
+				thePromise = Promise.resolve(43);
+				component.thePromise = thePromise;
+
+				return thePromise;
+			})
+			.then(() => {
+				const { button } = component;
+
+				const click = new window.MouseEvent('click');
+				button.dispatchEvent(click);
+
+				assert.equal(component.clicked, 43);
+			});
+	}
+};
diff --git a/test/runtime/samples/await-then-catch-event/main.svelte b/test/runtime/samples/await-then-catch-event/main.svelte
new file mode 100644
index 0000000000..087affb1ad
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-event/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let button;
+	export let thePromise;
+	export let clicked;
+</script>
+
+{#await thePromise}
+	<p>loading...</p>
+{:then theValue}
+	<button bind:this={button} on:click='{() => clicked = theValue}'>click me</button>
+{:catch theError}
+	<p>oh no! {theError.message}</p>
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/await-then-catch-if/_config.js b/test/runtime/samples/await-then-catch-if/_config.js
new file mode 100644
index 0000000000..88f84dff79
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-if/_config.js
@@ -0,0 +1,41 @@
+let fulfil;
+
+const thePromise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		show: true,
+		thePromise
+	},
+
+	html: `
+		<p>loading...</p>
+	`,
+
+	test({ assert, component, target }) {
+		fulfil(42);
+
+		return thePromise
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<p>the value is 42</p>
+				`);
+
+				component.show = false;
+
+				assert.htmlEqual(target.innerHTML, `
+					<p>Else</p>
+				`);
+
+				component.show = true;
+
+				return thePromise.then(() => {
+					assert.htmlEqual(target.innerHTML, `
+						<p>the value is 42</p>
+					`);
+				});
+			});
+	}
+};
diff --git a/test/runtime/samples/await-then-catch-if/main.svelte b/test/runtime/samples/await-then-catch-if/main.svelte
new file mode 100644
index 0000000000..0759a083d5
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-if/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let show;
+	export let thePromise;
+</script>
+
+{#if show}
+	{#await thePromise}
+		<p>loading...</p>
+	{:then theValue}
+		<p>the value is {theValue}</p>
+	{:catch theError}
+		<p>oh no! {theError.message}</p>
+	{/await}
+{:else}
+	<p>Else</p>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/await-then-catch-in-slot/Foo.svelte b/test/runtime/samples/await-then-catch-in-slot/Foo.svelte
new file mode 100644
index 0000000000..49aeb95a1d
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-in-slot/Foo.svelte
@@ -0,0 +1 @@
+<slot></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/await-then-catch-in-slot/_config.js b/test/runtime/samples/await-then-catch-in-slot/_config.js
new file mode 100644
index 0000000000..14f3e7fdf5
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-in-slot/_config.js
@@ -0,0 +1,47 @@
+let fulfil;
+
+let thePromise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		thePromise
+	},
+
+	html: `
+		<p>loading...</p>
+	`,
+
+	test({ assert, component, target }) {
+		fulfil(42);
+
+		return thePromise
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<p>the value is 42</p>
+				`);
+
+				let reject;
+
+				thePromise = new Promise((f, r) => {
+					reject = r;
+				});
+
+				component.thePromise = thePromise;
+
+				assert.htmlEqual(target.innerHTML, `
+					<p>loading...</p>
+				`);
+
+				reject(new Error('something broke'));
+
+				return thePromise.catch(() => {});
+			})
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<p>oh no! something broke</p>
+				`);
+			});
+	}
+};
diff --git a/test/runtime/samples/await-then-catch-in-slot/main.svelte b/test/runtime/samples/await-then-catch-in-slot/main.svelte
new file mode 100644
index 0000000000..3aa75374ea
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-in-slot/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Foo from './Foo.svelte';
+
+	export let thePromise;
+</script>
+
+<Foo>
+	{#await thePromise}
+		<p>loading...</p>
+	{:then theValue}
+		<p>the value is {theValue}</p>
+	{:catch theError}
+		<p>oh no! {theError.message}</p>
+	{/await}
+</Foo>
\ No newline at end of file
diff --git a/test/runtime/samples/await-then-catch-multiple/_config.js b/test/runtime/samples/await-then-catch-multiple/_config.js
new file mode 100644
index 0000000000..8d2de596df
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-multiple/_config.js
@@ -0,0 +1,51 @@
+let fulfil;
+
+let thePromise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		thePromise
+	},
+
+	html: `
+		<p>loading...</p>
+		<p>loading...</p>
+	`,
+
+	test({ assert, component, target }) {
+		fulfil(42);
+
+		return thePromise
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<p>the value is 42</p>
+					<p>the value is 42</p>
+				`);
+
+				let reject;
+
+				thePromise = new Promise((f, r) => {
+					reject = r;
+				});
+
+				component.thePromise = thePromise;
+
+				assert.htmlEqual(target.innerHTML, `
+					<p>loading...</p>
+					<p>loading...</p>
+				`);
+
+				reject(new Error('something broke'));
+
+				return thePromise.catch(() => {});
+			})
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<p>oh no! something broke</p>
+					<p>oh no! something broke</p>
+				`);
+			});
+	}
+};
diff --git a/test/runtime/samples/await-then-catch-multiple/main.svelte b/test/runtime/samples/await-then-catch-multiple/main.svelte
new file mode 100644
index 0000000000..552b4c906f
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-multiple/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let thePromise;
+</script>
+
+{#await thePromise}
+	<p>loading...</p>
+{:then theValue}
+	<p>the value is {theValue}</p>
+{:catch theError}
+	<p>oh no! {theError.message}</p>
+{/await}
+
+{#await thePromise}
+	<p>loading...</p>
+{:then theValue}
+	<p>the value is {theValue}</p>
+{:catch theError}
+	<p>oh no! {theError.message}</p>
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/await-then-catch-no-values/_config.js b/test/runtime/samples/await-then-catch-no-values/_config.js
new file mode 100644
index 0000000000..51a79a50d0
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-no-values/_config.js
@@ -0,0 +1,39 @@
+let fulfil;
+
+let thePromise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		thePromise
+	},
+
+	html: 'waiting',
+
+	test({ assert, component, target }) {
+		fulfil(9000);
+
+		return thePromise
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, 'resolved');
+
+				let reject;
+
+				thePromise = new Promise((f, r) => {
+					reject = r;
+				});
+
+				component.thePromise = thePromise;
+
+				assert.htmlEqual(target.innerHTML, 'waiting');
+
+				reject(new Error('something broke'));
+
+				return thePromise.catch(() => {});
+			})
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, 'rejected');
+			});
+	}
+};
diff --git a/test/runtime/samples/await-then-catch-no-values/main.svelte b/test/runtime/samples/await-then-catch-no-values/main.svelte
new file mode 100644
index 0000000000..2e72f4a81a
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-no-values/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let thePromise;
+</script>
+
+{#await thePromise}
+	waiting
+{:then}
+	resolved
+{:catch}
+	rejected
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/await-then-catch-non-promise/_config.js b/test/runtime/samples/await-then-catch-non-promise/_config.js
new file mode 100644
index 0000000000..c05236cc5f
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-non-promise/_config.js
@@ -0,0 +1,17 @@
+export default {
+	props: {
+		thePromise: 'not actually a promise'
+	},
+
+	html: `
+		<p>the value is not actually a promise</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.thePromise = 'still not a promise';
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>the value is still not a promise</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/await-then-catch-non-promise/main.svelte b/test/runtime/samples/await-then-catch-non-promise/main.svelte
new file mode 100644
index 0000000000..0b842bae3b
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-non-promise/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let thePromise;
+</script>
+
+{#await thePromise}
+	<p>loading...</p>
+{:then theValue}
+	<p>the value is {theValue}</p>
+{:catch theError}
+	<p>oh no! {theError.message}</p>
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/await-then-catch-order/_config.js b/test/runtime/samples/await-then-catch-order/_config.js
new file mode 100644
index 0000000000..29fc074162
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-order/_config.js
@@ -0,0 +1,27 @@
+let fulfil;
+
+const thePromise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		thePromise
+	},
+
+	html: `
+		<p>loading...</p><p>true!</p>
+	`,
+
+	test({ assert, target }) {
+		fulfil(42);
+
+		return thePromise
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<p>the value is 42</p><p>true!</p>
+				`);
+			});
+
+	}
+};
diff --git a/test/runtime/samples/await-then-catch-order/main.svelte b/test/runtime/samples/await-then-catch-order/main.svelte
new file mode 100644
index 0000000000..e64e05a464
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-order/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let thePromise;
+</script>
+
+{#await thePromise}
+	<p>loading...</p>
+{:then theValue}
+	<p>the value is {theValue}</p>
+{:catch theError}
+	<p>oh no! {theError.message}</p>
+{/await}
+
+{#if true}
+	<p>true!</p>
+{/if}
diff --git a/test/runtime/samples/await-then-catch-static/_config.js b/test/runtime/samples/await-then-catch-static/_config.js
new file mode 100644
index 0000000000..6918986950
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-static/_config.js
@@ -0,0 +1,45 @@
+let fulfil;
+
+let promise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		promise
+	},
+
+	html: `
+		<p>loading...</p>
+	`,
+
+	test({ assert, component, target }) {
+		fulfil(42);
+
+		return promise
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<p>loaded</p>
+				`);
+
+				promise = new Promise((f, _) => {
+					fulfil = f;
+				});
+
+				component.promise = promise;
+
+				assert.htmlEqual(target.innerHTML, `
+					<p>loading...</p>
+				`);
+
+				fulfil(43);
+
+				return promise.then(() => {});
+			})
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<p>loaded</p>
+				`);
+			});
+	}
+};
diff --git a/test/runtime/samples/await-then-catch-static/main.svelte b/test/runtime/samples/await-then-catch-static/main.svelte
new file mode 100644
index 0000000000..67e08f542a
--- /dev/null
+++ b/test/runtime/samples/await-then-catch-static/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let promise;
+</script>
+
+{#await promise}
+	<p>loading...</p>
+{:then value}
+	<p>loaded</p>
+{:catch error}
+	<p>errored</p>
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/await-then-catch/_config.js b/test/runtime/samples/await-then-catch/_config.js
new file mode 100644
index 0000000000..14f3e7fdf5
--- /dev/null
+++ b/test/runtime/samples/await-then-catch/_config.js
@@ -0,0 +1,47 @@
+let fulfil;
+
+let thePromise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		thePromise
+	},
+
+	html: `
+		<p>loading...</p>
+	`,
+
+	test({ assert, component, target }) {
+		fulfil(42);
+
+		return thePromise
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<p>the value is 42</p>
+				`);
+
+				let reject;
+
+				thePromise = new Promise((f, r) => {
+					reject = r;
+				});
+
+				component.thePromise = thePromise;
+
+				assert.htmlEqual(target.innerHTML, `
+					<p>loading...</p>
+				`);
+
+				reject(new Error('something broke'));
+
+				return thePromise.catch(() => {});
+			})
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<p>oh no! something broke</p>
+				`);
+			});
+	}
+};
diff --git a/test/runtime/samples/await-then-catch/main.svelte b/test/runtime/samples/await-then-catch/main.svelte
new file mode 100644
index 0000000000..0b842bae3b
--- /dev/null
+++ b/test/runtime/samples/await-then-catch/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let thePromise;
+</script>
+
+{#await thePromise}
+	<p>loading...</p>
+{:then theValue}
+	<p>the value is {theValue}</p>
+{:catch theError}
+	<p>oh no! {theError.message}</p>
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/await-then-destruct-array/_config.js b/test/runtime/samples/await-then-destruct-array/_config.js
new file mode 100644
index 0000000000..58a66a698d
--- /dev/null
+++ b/test/runtime/samples/await-then-destruct-array/_config.js
@@ -0,0 +1,61 @@
+export default {
+	props: {
+		thePromise: new Promise(_ => {})
+	},
+
+	html: `
+		loading...
+	`,
+
+	async test({ assert, component, target }) {
+		await (component.thePromise = Promise.resolve([1, 2]));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>a: 1</p>
+				<p>b: 2</p>
+			`
+		);
+
+		await (component.thePromise = Promise.resolve([4, 5]));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>a: 4</p>
+				<p>b: 5</p>
+			`
+		);
+
+		try {
+			await (component.thePromise = Promise.reject(['a', [6, 7]]));
+		} catch (e) {
+			// do nothing
+		}
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>c: a</p>
+				<p>d: 6</p>
+				<p>e: 7</p>
+			`
+		);
+
+		try {
+			await (component.thePromise = Promise.reject(['b', [8, 9]]));
+		} catch (e) {
+			// do nothing
+		}
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>c: b</p>
+				<p>d: 8</p>
+				<p>e: 9</p>
+			`
+		);
+	}
+};
diff --git a/test/runtime/samples/await-then-destruct-array/main.svelte b/test/runtime/samples/await-then-destruct-array/main.svelte
new file mode 100644
index 0000000000..cc0d217f79
--- /dev/null
+++ b/test/runtime/samples/await-then-destruct-array/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let thePromise;
+</script>
+
+{#await thePromise}
+	loading...
+{:then [ a, b ]}
+	<p>a: {a}</p>
+	<p>b: {b}</p>
+{:catch [c, [d, e]]}
+	<p>c: {c}</p>
+	<p>d: {d}</p>
+	<p>e: {e}</p>
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/await-then-destruct-default/_config.js b/test/runtime/samples/await-then-destruct-default/_config.js
new file mode 100644
index 0000000000..151f2c91f7
--- /dev/null
+++ b/test/runtime/samples/await-then-destruct-default/_config.js
@@ -0,0 +1,23 @@
+export default {
+	async test({ assert, target }) {
+		await Promise.resolve();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>a: 3</p>
+			<p>b: 2</p>
+			<p>c: 3</p>
+			<p>a: 1</p>
+			<p>b: 2</p>
+			<p>c: 3</p>
+			<p>a: 3</p>
+			<p>b: 2</p>
+			<p>c: 3</p>
+			<p>a: 1</p>
+			<p>b: 2</p>
+			<p>c: 3</p>
+			`
+		);
+	}
+};
diff --git a/test/runtime/samples/await-then-destruct-default/main.svelte b/test/runtime/samples/await-then-destruct-default/main.svelte
new file mode 100644
index 0000000000..d559aadab1
--- /dev/null
+++ b/test/runtime/samples/await-then-destruct-default/main.svelte
@@ -0,0 +1,34 @@
+<script>
+	let object = Promise.resolve({ b: 2, c: 3 });
+	let array = Promise.resolve([1, 2]);
+	let objectReject = Promise.reject({ b: 2, c: 3 });
+	let arrayReject = Promise.reject([1, 2]);
+</script>
+
+{#await object then { a = 3, b = 4, c }}
+	<p>a: {a}</p>
+	<p>b: {b}</p>
+	<p>c: {c}</p>
+{/await}
+
+{#await array then [a, b, c = 3]}
+	<p>a: {a}</p>
+	<p>b: {b}</p>
+	<p>c: {c}</p>
+{/await}
+
+{#await objectReject then value}
+	resolved
+{:catch { a = 3, b = 4, c }}
+	<p>a: {a}</p>
+	<p>b: {b}</p>
+	<p>c: {c}</p>
+{/await}
+
+{#await arrayReject then value}
+	resolved
+{:catch [a, b, c = 3]}
+	<p>a: {a}</p>
+	<p>b: {b}</p>
+	<p>c: {c}</p>
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/await-then-destruct-object-if/_config.js b/test/runtime/samples/await-then-destruct-object-if/_config.js
new file mode 100644
index 0000000000..6a29b2db37
--- /dev/null
+++ b/test/runtime/samples/await-then-destruct-object-if/_config.js
@@ -0,0 +1,29 @@
+export default {
+	props: {
+		thePromise: Promise.resolve({ result: 1 })
+	},
+
+	html: '',
+
+	async test({ assert, component, target }) {
+		await (component.thePromise = Promise.resolve({ result: 1 }));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>result: 1</p>
+				<p>count: 0</p>
+			`
+		);
+
+		await new Promise(resolve => setTimeout(resolve, 1));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>result: 1</p>
+				<p>count: 1</p>
+			`
+		);
+	}
+};
diff --git a/test/runtime/samples/await-then-destruct-object-if/main.svelte b/test/runtime/samples/await-then-destruct-object-if/main.svelte
new file mode 100644
index 0000000000..3425979e2c
--- /dev/null
+++ b/test/runtime/samples/await-then-destruct-object-if/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let thePromise;
+
+	let count = 0;
+
+	setTimeout(() => {
+		count++;
+	}, 0);
+</script>
+
+{#await thePromise then { result }}
+	{#if result}
+		<p>result: {result}</p>
+		<p>count: {count}</p>
+	{:else}
+		<p>result: {result}</p>
+		<p>count: {count}</p>
+	{/if}
+{/await}
diff --git a/test/runtime/samples/await-then-destruct-object/_config.js b/test/runtime/samples/await-then-destruct-object/_config.js
new file mode 100644
index 0000000000..47e8422cc4
--- /dev/null
+++ b/test/runtime/samples/await-then-destruct-object/_config.js
@@ -0,0 +1,63 @@
+export default {
+	props: {
+		thePromise: new Promise(_ => {})
+	},
+
+	html: `
+		loading...
+	`,
+
+	async test({ assert, component, target }) {
+		await (component.thePromise = Promise.resolve({ error: 'error message' }));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>error: error message</p>
+				<p>result: undefined</p>
+			`
+		);
+
+		await (component.thePromise = Promise.resolve({ result: '42' }));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>error: undefined</p>
+				<p>result: 42</p>
+			`
+		);
+
+		try {
+			await (component.thePromise = Promise.reject({
+				error: { message: 'oops', code: '123' }
+			}));
+		} catch (e) {
+			// do nothing
+		}
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>message: oops</p>
+				<p>code: 123</p>
+			`
+		);
+
+		try {
+			await (component.thePromise = Promise.reject({
+				error: { message: 'timeout', code: '456' }
+			}));
+		} catch (e) {
+			// do nothing
+		}
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>message: timeout</p>
+				<p>code: 456</p>
+			`
+		);
+	}
+};
diff --git a/test/runtime/samples/await-then-destruct-object/main.svelte b/test/runtime/samples/await-then-destruct-object/main.svelte
new file mode 100644
index 0000000000..ff574b7be8
--- /dev/null
+++ b/test/runtime/samples/await-then-destruct-object/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let thePromise;
+</script>
+
+{#await thePromise}
+	loading...
+{:then { result, error }}
+	<p>error: {error}</p>
+	<p>result: {result}</p>
+{:catch { error: { message, code } }}
+	<p>message: {message}</p>
+	<p>code: {code}</p>
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/await-then-destruct-rest/_config.js b/test/runtime/samples/await-then-destruct-rest/_config.js
new file mode 100644
index 0000000000..0a7445b535
--- /dev/null
+++ b/test/runtime/samples/await-then-destruct-rest/_config.js
@@ -0,0 +1,21 @@
+export default {
+	async test({ assert, target }) {
+		await Promise.resolve();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>a: 1</p>
+			<p>rest: {"b":2,"c":3}</p>
+			<p>a: 1</p>
+			<p>b: 2</p>
+			<p>rest: [3,4,5,6]</p>
+			<p>a: 1</p>
+			<p>rest: {"b":2,"c":3}</p>
+			<p>a: 1</p>
+			<p>b: 2</p>
+			<p>rest: [3,4,5,6]</p>
+			`
+		);
+	}
+};
diff --git a/test/runtime/samples/await-then-destruct-rest/main.svelte b/test/runtime/samples/await-then-destruct-rest/main.svelte
new file mode 100644
index 0000000000..a2d57dabf3
--- /dev/null
+++ b/test/runtime/samples/await-then-destruct-rest/main.svelte
@@ -0,0 +1,32 @@
+<script>
+	let object = Promise.resolve({ a: 1, b: 2, c: 3 });
+	let array = Promise.resolve([1, 2, 3, 4, 5, 6]);
+	let objectReject = Promise.reject({ a: 1, b: 2, c: 3 });
+	let arrayReject = Promise.reject([1, 2, 3, 4, 5, 6]);
+</script>
+
+{#await object then { a, ...rest }}
+	<p>a: {a}</p>
+	<p>rest: {JSON.stringify(rest)}</p>
+{/await}
+
+{#await array then [a, b, ...rest]}
+	<p>a: {a}</p>
+	<p>b: {b}</p>
+	<p>rest: {JSON.stringify(rest)}</p>
+{/await}
+
+{#await objectReject then value}
+	resolved
+{:catch { a, ...rest }}
+	<p>a: {a}</p>
+	<p>rest: {JSON.stringify(rest)}</p>
+{/await}
+
+{#await arrayReject then value}
+	resolved
+{:catch [a, b, ...rest]}
+	<p>a: {a}</p>
+	<p>b: {b}</p>
+	<p>rest: {JSON.stringify(rest)}</p>
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/await-then-if/_config.js b/test/runtime/samples/await-then-if/_config.js
new file mode 100644
index 0000000000..f29f5df0e5
--- /dev/null
+++ b/test/runtime/samples/await-then-if/_config.js
@@ -0,0 +1,25 @@
+let fulfil;
+
+const thePromise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		thePromise
+	},
+
+	html: `
+		loading...
+	`,
+
+	async test({ assert, target }) {
+		fulfil([]);
+
+		await thePromise;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>promise array is empty</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/await-then-if/main.svelte b/test/runtime/samples/await-then-if/main.svelte
new file mode 100644
index 0000000000..d292067b30
--- /dev/null
+++ b/test/runtime/samples/await-then-if/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let thePromise;
+</script>
+
+{#await thePromise}
+	loading...
+{:then r}
+	{#if r.length < 1}
+		<p>promise array is empty</p>
+	{:else}
+		<p>promise array is not empty</p>
+	{/if}
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/await-then-no-context/main.svelte b/test/runtime/samples/await-then-no-context/main.svelte
new file mode 100644
index 0000000000..c729512149
--- /dev/null
+++ b/test/runtime/samples/await-then-no-context/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	const promise = new Promise(() => {});
+	const test = [1, 2, 3];
+</script>
+
+{#await promise}
+	<div>waiting</div>
+{:then}
+	{#each test as t}
+		<div>t</div>
+	{/each}
+{/await}
diff --git a/test/runtime/samples/await-then-no-expression/_config.js b/test/runtime/samples/await-then-no-expression/_config.js
new file mode 100644
index 0000000000..f684da52ed
--- /dev/null
+++ b/test/runtime/samples/await-then-no-expression/_config.js
@@ -0,0 +1,55 @@
+let fulfil;
+
+let thePromise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		thePromise
+	},
+
+	html: `
+		<br>
+		<br>
+		<p>the promise is pending</p>
+	`,
+
+	async test({ assert, component, target }) {
+		fulfil();
+
+		await thePromise;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>the promise is resolved</p>
+			<br>
+			<p>the promise is resolved</p>
+			<br>
+			<p>the promise is resolved</p>
+		`);
+
+		let reject;
+
+		thePromise = new Promise((f, r) => {
+			reject = r;
+		});
+
+		component.thePromise = thePromise;
+
+		assert.htmlEqual(target.innerHTML, `
+			<br>
+			<br>
+			<p>the promise is pending</p>
+		`);
+
+		reject(new Error('something broke'));
+		
+		await thePromise.catch(() => {});
+		
+		assert.htmlEqual(target.innerHTML, `
+			<p>oh no! something broke</p>
+			<br>
+			<br>
+		`);
+	}
+};
diff --git a/test/runtime/samples/await-then-no-expression/main.svelte b/test/runtime/samples/await-then-no-expression/main.svelte
new file mode 100644
index 0000000000..fedc7cd2b7
--- /dev/null
+++ b/test/runtime/samples/await-then-no-expression/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	export let thePromise;
+</script>
+
+{#await thePromise then}
+	<p>the promise is resolved</p>
+{:catch theError}
+	<p>oh no! {theError.message}</p>
+{/await}
+
+<br />
+
+{#await thePromise then}
+	<p>the promise is resolved</p>
+{/await}
+
+<br />
+
+{#await thePromise}
+	<p>the promise is pending</p>
+{:then}
+	<p>the promise is resolved</p>
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/await-then-shorthand/_config.js b/test/runtime/samples/await-then-shorthand/_config.js
new file mode 100644
index 0000000000..ca07dd19e0
--- /dev/null
+++ b/test/runtime/samples/await-then-shorthand/_config.js
@@ -0,0 +1,43 @@
+let fulfil;
+
+let thePromise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		thePromise
+	},
+
+	html: '',
+
+	test({ assert, component, target }) {
+		fulfil(42);
+
+		return thePromise
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<p>the value is 42</p>
+				`);
+
+				let reject;
+
+				thePromise = new Promise((f, r) => {
+					reject = r;
+				});
+
+				component.thePromise = thePromise;
+
+				assert.htmlEqual(target.innerHTML, '');
+
+				reject(new Error('something broke'));
+
+				return thePromise.catch(() => {});
+			})
+			.then(() => {
+				assert.htmlEqual(target.innerHTML, `
+					<p>oh no! something broke</p>
+				`);
+			});
+	}
+};
diff --git a/test/runtime/samples/await-then-shorthand/main.svelte b/test/runtime/samples/await-then-shorthand/main.svelte
new file mode 100644
index 0000000000..ae444afba7
--- /dev/null
+++ b/test/runtime/samples/await-then-shorthand/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let thePromise;
+</script>
+
+{#await thePromise then theValue}
+	<p>the value is {theValue}</p>
+{:catch theError}
+	<p>oh no! {theError.message}</p>
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/await-with-components/Widget.svelte b/test/runtime/samples/await-with-components/Widget.svelte
new file mode 100644
index 0000000000..ec9e3471fe
--- /dev/null
+++ b/test/runtime/samples/await-with-components/Widget.svelte
@@ -0,0 +1,5 @@
+{value}
+
+<script>
+  export let value = 'Loading...';
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/await-with-components/_config.js b/test/runtime/samples/await-with-components/_config.js
new file mode 100644
index 0000000000..a0a558782a
--- /dev/null
+++ b/test/runtime/samples/await-with-components/_config.js
@@ -0,0 +1,30 @@
+export default {
+	async test({ assert, component, target }) {
+		let resolve;
+		let reject;
+		let promise = new Promise(ok => resolve = ok);
+
+		component.promise = promise;
+		assert.htmlEqual(target.innerHTML, 'Loading...');
+
+		resolve(42);
+		await promise;
+		assert.htmlEqual(target.innerHTML, '42');
+
+		promise = new Promise((ok, fail) => reject = fail);
+		component.promise = promise;
+		assert.htmlEqual(target.innerHTML, 'Loading...');
+
+		reject(99);
+		await promise.then(null, () => {});
+		assert.htmlEqual(target.innerHTML, '99');
+
+		promise = new Promise(ok => resolve = ok);
+		component.promise = promise;
+		assert.htmlEqual(target.innerHTML, 'Loading...');
+
+		resolve(1);
+		await promise;
+		assert.htmlEqual(target.innerHTML, '1');
+	}
+};
diff --git a/test/runtime/samples/await-with-components/main.svelte b/test/runtime/samples/await-with-components/main.svelte
new file mode 100644
index 0000000000..02b32bb496
--- /dev/null
+++ b/test/runtime/samples/await-with-components/main.svelte
@@ -0,0 +1,12 @@
+{#await promise}
+	<Widget />
+{:then result}
+	<Widget value="{result}" />
+{:catch err}
+	<Widget value="{err}" />
+{/await}
+
+<script>
+	import Widget from './Widget.svelte';
+	export let promise = Promise.resolve();
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/await-with-update-2/Component.svelte b/test/runtime/samples/await-with-update-2/Component.svelte
new file mode 100644
index 0000000000..1301db3f99
--- /dev/null
+++ b/test/runtime/samples/await-with-update-2/Component.svelte
@@ -0,0 +1,7 @@
+<script>
+  export let count;
+  export let value;
+</script>
+
+<div>count: {count}</div>
+<div>value: {value}</div>
\ No newline at end of file
diff --git a/test/runtime/samples/await-with-update-2/_config.js b/test/runtime/samples/await-with-update-2/_config.js
new file mode 100644
index 0000000000..68f884c127
--- /dev/null
+++ b/test/runtime/samples/await-with-update-2/_config.js
@@ -0,0 +1,64 @@
+export default {
+	props: {
+		thePromise: new Promise((_) => {}),
+		count: 0
+	},
+
+	html: `
+		<div><p>loading...</p></div>
+	`,
+
+	async test({ assert, component, target }) {
+		await (component.thePromise = Promise.resolve({ value: 'success', Component: component.Component }));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>Resolved:
+				<div>count: 0</div>
+				<div>value: success</div>
+			</div>
+			`
+		);
+
+		component.count = 5;
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>Resolved:
+				<div>count: 5</div>
+				<div>value: success</div>
+			</div>
+			`
+		);
+
+		try {
+			await (component.thePromise = Promise.reject({ value: 'failure', Component: component.Component }));
+		} catch (error) {
+			// ignore
+		}
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>Rejected:
+				<div>count: 5</div>
+				<div>value: failure</div>
+			</div>
+			`
+		);
+
+		component.count = 10;
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>Rejected:
+				<div>count: 10</div>
+				<div>value: failure</div>
+			</div>
+			`
+		);
+	}
+};
diff --git a/test/runtime/samples/await-with-update-2/main.svelte b/test/runtime/samples/await-with-update-2/main.svelte
new file mode 100644
index 0000000000..b29c875f92
--- /dev/null
+++ b/test/runtime/samples/await-with-update-2/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Component from './Component.svelte';
+	export let thePromise;
+	export let count;
+	export { Component }
+</script>
+
+<div>
+	{#await thePromise}
+		<p>loading...</p>
+	{:then { value: theValue, Component }}
+		Resolved: <svelte:component this={Component} {count} value={theValue} />
+	{:catch { value: theError, Component } }
+		Rejected: <svelte:component this={Component} {count} value={theError} />
+	{/await}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/await-with-update-catch-scope/_config.js b/test/runtime/samples/await-with-update-catch-scope/_config.js
new file mode 100644
index 0000000000..4c60ef2150
--- /dev/null
+++ b/test/runtime/samples/await-with-update-catch-scope/_config.js
@@ -0,0 +1,51 @@
+export default {
+	props: {
+		thePromise: new Promise((_) => {})
+	},
+
+	html: `
+		<div>error: undefined</div>
+	`,
+
+	async test({ assert, component, target }) {
+		await (component.thePromise = Promise.resolve('abc'));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>
+				error: undefined
+				After Resolve: undefined
+			</div>
+			`
+		);
+
+		component.error = 'external error occurred';
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>
+				error: ${component.error}
+				After Resolve: ${component.error}
+			</div>
+			`
+		);
+
+		try {
+			await (component.thePromise = Promise.reject('failure'));
+		} catch (error) {
+			// ignore
+		}
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>
+				error: ${component.error}
+				Rejected: failure
+			</div>
+			`
+		);
+	}
+};
diff --git a/test/runtime/samples/await-with-update-catch-scope/main.svelte b/test/runtime/samples/await-with-update-catch-scope/main.svelte
new file mode 100644
index 0000000000..4d4eb53f0b
--- /dev/null
+++ b/test/runtime/samples/await-with-update-catch-scope/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let thePromise;
+	export let error;
+</script>
+
+<div>
+	error: {error}
+	{#await thePromise then _}
+		After Resolve: {error}
+	{:catch error}
+		Rejected: {error}
+	{/await}
+</div>
diff --git a/test/runtime/samples/await-with-update/Component.svelte b/test/runtime/samples/await-with-update/Component.svelte
new file mode 100644
index 0000000000..5f13c80e65
--- /dev/null
+++ b/test/runtime/samples/await-with-update/Component.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let count;
+</script>
+
+<div>count: {count}</div>
\ No newline at end of file
diff --git a/test/runtime/samples/await-with-update/_config.js b/test/runtime/samples/await-with-update/_config.js
new file mode 100644
index 0000000000..08bf12b89e
--- /dev/null
+++ b/test/runtime/samples/await-with-update/_config.js
@@ -0,0 +1,60 @@
+export default {
+	props: {
+		thePromise: new Promise((_) => {}),
+		count: 0
+	},
+
+	html: `
+		<div><p>loading...</p></div>
+	`,
+
+	async test({ assert, component, target }) {
+		await (component.thePromise = Promise.resolve(component.Component));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>Resolved:
+				<div>count: 0</div>
+			</div>
+			`
+		);
+
+		component.count = 5;
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>Resolved:
+				<div>count: 5</div>
+			</div>
+			`
+		);
+
+		try {
+			await (component.thePromise = Promise.reject(component.Component));
+		} catch (error) {
+			// ignore
+		}
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>Rejected:
+				<div>count: 5</div>
+			</div>
+			`
+		);
+
+		component.count = 10;
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>Rejected:
+				<div>count: 10</div>
+			</div>
+			`
+		);
+	}
+};
diff --git a/test/runtime/samples/await-with-update/main.svelte b/test/runtime/samples/await-with-update/main.svelte
new file mode 100644
index 0000000000..51c5b76a21
--- /dev/null
+++ b/test/runtime/samples/await-with-update/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Component from './Component.svelte';
+	export let thePromise;
+	export let count;
+	export { Component }
+</script>
+
+<div>
+	{#await thePromise}
+		<p>loading...</p>
+	{:then theValue}
+		Resolved: <svelte:component this={theValue} {count} />
+	{:catch theError}
+		Rejected: <svelte:component this={theError} {count} />
+	{/await}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/await-without-catch/_config.js b/test/runtime/samples/await-without-catch/_config.js
new file mode 100644
index 0000000000..5bc291bf1f
--- /dev/null
+++ b/test/runtime/samples/await-without-catch/_config.js
@@ -0,0 +1,45 @@
+let fulfil;
+
+let promise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		promise
+	},
+
+	html: `
+		<p>loading...</p>
+	`,
+
+	test({ assert, component, target }) {
+		fulfil(42);
+
+		return promise
+		.then(() => {
+			assert.htmlEqual(target.innerHTML, `
+				<p>loaded</p>
+			`);
+
+			let reject;
+
+			promise = new Promise((f, r) => {
+				reject = r;
+			});
+
+			component.promise = promise;
+
+			assert.htmlEqual(target.innerHTML, `
+				<p>loading...</p>
+			`);
+
+			reject(new Error('this error should be thrown'));
+			return promise;
+		})
+		.catch((err) => {
+			assert.equal(err.message, 'this error should be thrown');
+			assert.htmlEqual(target.innerHTML, '');
+		});
+	}
+};
diff --git a/test/runtime/samples/await-without-catch/main.svelte b/test/runtime/samples/await-without-catch/main.svelte
new file mode 100644
index 0000000000..f528a8bf69
--- /dev/null
+++ b/test/runtime/samples/await-without-catch/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let promise;
+</script>
+
+{#await promise}
+	<p>loading...</p>
+{:then value}
+	<p>loaded</p>
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/before-render-chain/Item.svelte b/test/runtime/samples/before-render-chain/Item.svelte
new file mode 100644
index 0000000000..be82b5f372
--- /dev/null
+++ b/test/runtime/samples/before-render-chain/Item.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { beforeUpdate } from 'svelte';
+
+	export let item;
+	export let foo = 'XX';
+
+	beforeUpdate(() => {
+		foo = item;
+	});
+</script>
+
+<span>{foo}</span>
\ No newline at end of file
diff --git a/test/runtime/samples/before-render-chain/List.svelte b/test/runtime/samples/before-render-chain/List.svelte
new file mode 100644
index 0000000000..5b12d8a104
--- /dev/null
+++ b/test/runtime/samples/before-render-chain/List.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Item from './Item.svelte';
+
+	export let items = [3, 2, 1];
+
+	export function update() {
+		items = [1, 2, 3, 4, 5];
+	}
+</script>
+
+{#each items as item}
+	<Item item={item} />
+{/each}
diff --git a/test/runtime/samples/before-render-chain/_config.js b/test/runtime/samples/before-render-chain/_config.js
new file mode 100644
index 0000000000..838d96991d
--- /dev/null
+++ b/test/runtime/samples/before-render-chain/_config.js
@@ -0,0 +1,21 @@
+export default {
+	skip_if_ssr: true,
+
+	html: `
+		<span>3</span>
+		<span>2</span>
+		<span>1</span>
+	`,
+
+	async test({ assert, component, target }) {
+		await component.list.update();
+
+		assert.htmlEqual(target.innerHTML, `
+			<span>1</span>
+			<span>2</span>
+			<span>3</span>
+			<span>4</span>
+			<span>5</span>
+		`);
+	}
+};
diff --git a/test/runtime/samples/before-render-chain/main.svelte b/test/runtime/samples/before-render-chain/main.svelte
new file mode 100644
index 0000000000..4f6e432aa8
--- /dev/null
+++ b/test/runtime/samples/before-render-chain/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let list;
+
+	import List from './List.svelte';
+</script>
+
+<List bind:this={list}/>
diff --git a/test/runtime/samples/before-render-prevents-loop/_config.js b/test/runtime/samples/before-render-prevents-loop/_config.js
new file mode 100644
index 0000000000..e922fed358
--- /dev/null
+++ b/test/runtime/samples/before-render-prevents-loop/_config.js
@@ -0,0 +1,20 @@
+export default {
+	skip_if_ssr: true,
+
+	props: {
+		value: 'hello!'
+	},
+
+	html: `
+		<p>hello!</p>
+		<p>hello!</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.value = 'goodbye!';
+		assert.htmlEqual(target.innerHTML, `
+			<p>goodbye!</p>
+			<p>goodbye!</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/before-render-prevents-loop/main.svelte b/test/runtime/samples/before-render-prevents-loop/main.svelte
new file mode 100644
index 0000000000..7d7a2b9a18
--- /dev/null
+++ b/test/runtime/samples/before-render-prevents-loop/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { beforeUpdate } from 'svelte';
+
+	export let value;
+	let mirror;
+
+	beforeUpdate(() => {
+		mirror = value;
+	});
+</script>
+
+<p>{value}</p>
+<p>{mirror}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-audio-currenttime-duration-volume/_config.js b/test/runtime/samples/binding-audio-currenttime-duration-volume/_config.js
new file mode 100644
index 0000000000..158536b5fb
--- /dev/null
+++ b/test/runtime/samples/binding-audio-currenttime-duration-volume/_config.js
@@ -0,0 +1,39 @@
+export default {
+	// not sure if we can really test this in JSDOM. Refer to
+	// https://svelte.dev/repl?example=media-elements
+	// instead
+	skip: true,
+
+	test({ assert, component, target, window }) {
+		assert.equal(component.t, 0);
+		assert.equal(component.d, 0);
+		assert.equal(component.v, 0.5);
+		assert.equal(component.m, true);
+		assert.equal(component.r, 1);
+		assert.equal(component.paused, true);
+
+		const audio = target.querySelector('audio');
+		const timeupdate = new window.Event('timeupdate');
+		const durationchange = new window.Event('durationchange');
+		const volumechange = new window.Event('volumechange');
+		const ratechange = new window.Event('ratechange');
+
+		audio.currentTime = 10;
+		audio.duration = 20;
+		audio.volume = 0.75;
+		audio.muted = false;
+		audio.playbackRate = 2;
+		audio.dispatchEvent(timeupdate);
+		audio.dispatchEvent(durationchange);
+		audio.dispatchEvent(volumechange);
+		audio.dispatchEvent(ratechange);
+		audio.play();
+
+		assert.equal(component.t, 10);
+		assert.equal(component.d, 0); // not 20, because read-only. Not sure how to test this!
+		assert.equal(component.v, 0.75);
+		assert.equal(component.m, false);
+		assert.equal(component.r, 2);
+		assert.equal(component.paused, true); // ditto...
+	}
+};
diff --git a/test/runtime/samples/binding-audio-currenttime-duration-volume/main.svelte b/test/runtime/samples/binding-audio-currenttime-duration-volume/main.svelte
new file mode 100644
index 0000000000..e232c920bf
--- /dev/null
+++ b/test/runtime/samples/binding-audio-currenttime-duration-volume/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let t;
+	export let d;
+	export let paused;
+	export let v;
+	export let r;
+	export let m;
+</script>
+
+<audio bind:currentTime={t} bind:duration={d} bind:paused bind:volume={v} bind:muted={m} bind:playbackRate={r}
+	src='music.mp3'></audio>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-circular/_config.js b/test/runtime/samples/binding-circular/_config.js
new file mode 100644
index 0000000000..3e58ab2f98
--- /dev/null
+++ b/test/runtime/samples/binding-circular/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: `
+		<select>
+			<option value="[object Object]">wheeee</option>
+		</select>
+	`
+};
diff --git a/test/runtime/samples/binding-circular/main.svelte b/test/runtime/samples/binding-circular/main.svelte
new file mode 100644
index 0000000000..372f5d3c99
--- /dev/null
+++ b/test/runtime/samples/binding-circular/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let obj = {};
+	obj.self = obj;
+
+	let selected = obj;
+</script>
+
+<select bind:value={selected}>
+	<option value={obj}>wheeee</option>
+</select>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-contenteditable-html-initial/_config.js b/test/runtime/samples/binding-contenteditable-html-initial/_config.js
new file mode 100644
index 0000000000..4c30a3231a
--- /dev/null
+++ b/test/runtime/samples/binding-contenteditable-html-initial/_config.js
@@ -0,0 +1,40 @@
+export default {
+	html: `
+		<editor contenteditable="true"><b>world</b></editor>
+		<p>hello <b>world</b></p>
+	`,
+
+	ssrHtml: `
+		<editor contenteditable="true"><b>world</b></editor>
+		<p>hello undefined</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		assert.equal(component.name, '<b>world</b>');
+
+		const el = target.querySelector('editor');
+
+		el.innerHTML = 'every<span>body</span>';
+
+		// No updates to data yet
+		assert.htmlEqual(target.innerHTML, `
+			<editor contenteditable="true">every<span>body</span></editor>
+			<p>hello <b>world</b></p>
+		`);
+
+		// Handle user input
+		const event = new window.Event('input');
+		await el.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<editor contenteditable="true">every<span>body</span></editor>
+			<p>hello every<span>body</span></p>
+		`);
+
+		component.name = 'good<span>bye</span>';
+		assert.equal(el.innerHTML, 'good<span>bye</span>');
+		assert.htmlEqual(target.innerHTML, `
+			<editor contenteditable="true">good<span>bye</span></editor>
+			<p>hello good<span>bye</span></p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-contenteditable-html-initial/main.svelte b/test/runtime/samples/binding-contenteditable-html-initial/main.svelte
new file mode 100644
index 0000000000..119b41b52d
--- /dev/null
+++ b/test/runtime/samples/binding-contenteditable-html-initial/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let name;
+</script>
+
+<editor contenteditable="true" bind:innerHTML={name}>
+	<b>world</b>
+</editor>
+<p>hello {@html name}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-contenteditable-html/_config.js b/test/runtime/samples/binding-contenteditable-html/_config.js
new file mode 100644
index 0000000000..639572faea
--- /dev/null
+++ b/test/runtime/samples/binding-contenteditable-html/_config.js
@@ -0,0 +1,38 @@
+export default {
+	props: {
+		name: '<b>world</b>'
+	},
+
+	html: `
+		<editor contenteditable="true"><b>world</b></editor>
+		<p>hello <b>world</b></p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const el = target.querySelector('editor');
+		assert.equal(el.innerHTML, '<b>world</b>');
+
+		el.innerHTML = 'every<span>body</span>';
+
+		// No updates to data yet
+		assert.htmlEqual(target.innerHTML, `
+			<editor contenteditable="true">every<span>body</span></editor>
+			<p>hello <b>world</b></p>
+		`);
+
+		// Handle user input
+		const event = new window.Event('input');
+		await el.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<editor contenteditable="true">every<span>body</span></editor>
+			<p>hello every<span>body</span></p>
+		`);
+
+		component.name = 'good<span>bye</span>';
+		assert.equal(el.innerHTML, 'good<span>bye</span>');
+		assert.htmlEqual(target.innerHTML, `
+			<editor contenteditable="true">good<span>bye</span></editor>
+			<p>hello good<span>bye</span></p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-contenteditable-html/main.svelte b/test/runtime/samples/binding-contenteditable-html/main.svelte
new file mode 100644
index 0000000000..f576cf1868
--- /dev/null
+++ b/test/runtime/samples/binding-contenteditable-html/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let name;
+</script>
+
+<editor contenteditable="true" bind:innerHTML={name}></editor>
+<p>hello {@html name}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-contenteditable-text-initial/_config.js b/test/runtime/samples/binding-contenteditable-text-initial/_config.js
new file mode 100644
index 0000000000..d5f331bb7a
--- /dev/null
+++ b/test/runtime/samples/binding-contenteditable-text-initial/_config.js
@@ -0,0 +1,34 @@
+export default {
+	html: `
+		<editor contenteditable="true"><b>world</b></editor>
+		<p>hello world</p>
+	`,
+
+	ssrHtml: `
+		<editor contenteditable="true"><b>world</b></editor>
+		<p>hello undefined</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		assert.equal(component.name, 'world');
+
+		const el = target.querySelector('editor');
+
+		const event = new window.Event('input');
+
+		el.textContent = 'everybody';
+		await el.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<editor contenteditable="true">everybody</editor>
+			<p>hello everybody</p>
+		`);
+
+		component.name = 'goodbye';
+		assert.equal(el.textContent, 'goodbye');
+		assert.htmlEqual(target.innerHTML, `
+			<editor contenteditable="true">goodbye</editor>
+			<p>hello goodbye</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-contenteditable-text-initial/main.svelte b/test/runtime/samples/binding-contenteditable-text-initial/main.svelte
new file mode 100644
index 0000000000..b0938d4d0b
--- /dev/null
+++ b/test/runtime/samples/binding-contenteditable-text-initial/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let name;
+</script>
+
+<editor contenteditable="true" bind:textContent={name}>
+	<b>world</b>
+</editor>
+<p>hello {name}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-contenteditable-text/_config.js b/test/runtime/samples/binding-contenteditable-text/_config.js
new file mode 100644
index 0000000000..89f3968258
--- /dev/null
+++ b/test/runtime/samples/binding-contenteditable-text/_config.js
@@ -0,0 +1,32 @@
+export default {
+	props: {
+		name: 'world'
+	},
+
+	html: `
+		<editor contenteditable="true">world</editor>
+		<p>hello world</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const el = target.querySelector('editor');
+		assert.equal(el.textContent, 'world');
+
+		const event = new window.Event('input');
+
+		el.textContent = 'everybody';
+		await el.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<editor contenteditable="true">everybody</editor>
+			<p>hello everybody</p>
+		`);
+
+		component.name = 'goodbye';
+		assert.equal(el.textContent, 'goodbye');
+		assert.htmlEqual(target.innerHTML, `
+			<editor contenteditable="true">goodbye</editor>
+			<p>hello goodbye</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-contenteditable-text/main.svelte b/test/runtime/samples/binding-contenteditable-text/main.svelte
new file mode 100644
index 0000000000..70f65e8824
--- /dev/null
+++ b/test/runtime/samples/binding-contenteditable-text/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let name;
+</script>
+
+<editor contenteditable="true" bind:textContent={name}></editor>
+<p>hello {name}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-details-open/_config.js b/test/runtime/samples/binding-details-open/_config.js
new file mode 100644
index 0000000000..cf2459c3f1
--- /dev/null
+++ b/test/runtime/samples/binding-details-open/_config.js
@@ -0,0 +1,25 @@
+export default {
+	html: `
+		<details><summary>toggle</summary></details>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const details = target.querySelector('details');
+		const event = new window.Event('toggle');
+
+		details.open = true;
+		await details.dispatchEvent(event);
+		assert.equal(component.visible, true);
+		assert.htmlEqual(target.innerHTML, `
+			<details open><summary>toggle</summary></details>
+			<p>hello!</p>
+		`);
+
+		details.open = false;
+		await details.dispatchEvent(event);
+		assert.equal(component.visible, false);
+		assert.htmlEqual(target.innerHTML, `
+			<details><summary>toggle</summary></details>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-details-open/main.svelte b/test/runtime/samples/binding-details-open/main.svelte
new file mode 100644
index 0000000000..3a7a08e121
--- /dev/null
+++ b/test/runtime/samples/binding-details-open/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let visible;
+</script>
+
+<details bind:open={visible}><summary>toggle</summary></details>
+
+{#if visible}
+	<p>hello!</p>
+{/if}
diff --git a/test/runtime/samples/binding-indirect-computed/_config.js b/test/runtime/samples/binding-indirect-computed/_config.js
new file mode 100644
index 0000000000..68be22d1f8
--- /dev/null
+++ b/test/runtime/samples/binding-indirect-computed/_config.js
@@ -0,0 +1,34 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	html: `
+		<select>
+			<option value='A'>A</option>
+			<option value='B'>B</option>
+			<option value='C'>C</option>
+		</select>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const select = target.querySelector('select');
+		const options = target.querySelectorAll('option');
+
+		const change = new window.Event('change');
+
+		options[1].selected = true;
+		await select.dispatchEvent(change);
+
+		assert.equal(component.selected.letter, 'B');
+		assert.htmlEqual(target.innerHTML, `
+			<select>
+				<option value='A'>A</option>
+				<option value='B'>B</option>
+				<option value='C'>C</option>
+			</select>
+
+			B
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-indirect-computed/main.svelte b/test/runtime/samples/binding-indirect-computed/main.svelte
new file mode 100644
index 0000000000..9a374771c7
--- /dev/null
+++ b/test/runtime/samples/binding-indirect-computed/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	export let letters = [
+		'a',
+		'b',
+		'c'
+	];
+	export let selected = {
+		letter: ''
+	};
+
+	function uppercase() {
+		return letters.map(x => x.toUpperCase());
+	}
+</script>
+
+<select bind:value={selected.letter}>
+	{#each uppercase() as letter}
+		<option value="{letter}">{letter}</option>
+	{/each}
+</select>
+
+{selected.letter}
\ No newline at end of file
diff --git a/test/runtime/samples/binding-indirect-spread/_config.js b/test/runtime/samples/binding-indirect-spread/_config.js
new file mode 100644
index 0000000000..b0701bdc7c
--- /dev/null
+++ b/test/runtime/samples/binding-indirect-spread/_config.js
@@ -0,0 +1,52 @@
+export default {
+	ssrHtml: `
+		<input type="radio" value="radio1">
+		<input type="radio" value="radio2" checked>
+		<input type="radio" value="radio3">
+
+		<input type="checkbox" value="check1">
+		<input type="checkbox" value="check2" checked>
+		<input type="checkbox" value="check3">
+	`,
+	async test({ assert, component, target, window }) {
+		const event = new window.MouseEvent('click');
+
+		const [radio1, radio2, radio3] = target.querySelectorAll('input[type=radio]');
+
+		assert.ok(!radio1.checked);
+		assert.ok(radio2.checked);
+		assert.ok(!radio3.checked);
+
+		component.radio = 'radio1';
+
+		assert.ok(radio1.checked);
+		assert.ok(!radio2.checked);
+		assert.ok(!radio3.checked);
+
+		await radio3.dispatchEvent(event);
+
+		assert.equal(component.radio, 'radio3');
+		assert.ok(!radio1.checked);
+		assert.ok(!radio2.checked);
+		assert.ok(radio3.checked);
+
+		const [check1, check2, check3] = target.querySelectorAll('input[type=checkbox]');
+
+		assert.ok(!check1.checked);
+		assert.ok(check2.checked);
+		assert.ok(!check3.checked);
+
+		component.check = ['check1', 'check2'];
+
+		assert.ok(check1.checked);
+		assert.ok(check2.checked);
+		assert.ok(!check3.checked);
+
+		await check3.dispatchEvent(event);
+
+		assert.deepEqual(component.check, ['check1', 'check2', 'check3']);
+		assert.ok(check1.checked);
+		assert.ok(check2.checked);
+		assert.ok(check3.checked);
+	}
+};
diff --git a/test/runtime/samples/binding-indirect-spread/main.svelte b/test/runtime/samples/binding-indirect-spread/main.svelte
new file mode 100644
index 0000000000..43129b08b7
--- /dev/null
+++ b/test/runtime/samples/binding-indirect-spread/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let radio = 'radio2';
+	export let check = ['check2'];
+</script>
+
+<input type='radio' bind:group={radio} value='radio1' {...{}}>
+<input type='radio' bind:group={radio} value='radio2' {...{}}>
+<input type='radio' bind:group={radio} value='radio3' {...{}}>
+
+<input type='checkbox' bind:group={check} value='check1' {...{}}>
+<input type='checkbox' bind:group={check} value='check2' {...{}}>
+<input type='checkbox' bind:group={check} value='check3' {...{}}>
diff --git a/test/runtime/samples/binding-indirect/_config.js b/test/runtime/samples/binding-indirect/_config.js
new file mode 100644
index 0000000000..e0f10b94bd
--- /dev/null
+++ b/test/runtime/samples/binding-indirect/_config.js
@@ -0,0 +1,90 @@
+const tasks = [
+	{ description: 'put your left leg in', done: false },
+	{ description: 'your left leg out', done: false },
+	{ description: 'in, out, in, out', done: false },
+	{ description: 'shake it all about', done: false }
+];
+
+export default {
+	skip_if_ssr: true,
+
+	props: {
+		tasks,
+		selected: tasks[0]
+	},
+
+	html: `
+		<select>
+			<option value='[object Object]'>put your left leg in</option>
+			<option value='[object Object]'>your left leg out</option>
+			<option value='[object Object]'>in, out, in, out</option>
+			<option value='[object Object]'>shake it all about</option>
+		</select>
+
+		<label>
+			<input type='checkbox'> put your left leg in
+		</label>
+
+		<h2>Pending tasks</h2>
+		<p>put your left leg in</p>
+		<p>your left leg out</p>
+		<p>in, out, in, out</p>
+		<p>shake it all about</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const input = target.querySelector('input');
+		const select = target.querySelector('select');
+		const options = target.querySelectorAll('option');
+
+		const change = new window.Event('change');
+
+		input.checked = true;
+		await input.dispatchEvent(change);
+
+		assert.ok(component.tasks[0].done);
+		assert.htmlEqual(target.innerHTML, `
+			<select>
+				<option value='[object Object]'>put your left leg in</option>
+				<option value='[object Object]'>your left leg out</option>
+				<option value='[object Object]'>in, out, in, out</option>
+				<option value='[object Object]'>shake it all about</option>
+			</select>
+
+			<label>
+				<input type='checkbox'> put your left leg in
+			</label>
+
+			<h2>Pending tasks</h2>
+			<p>your left leg out</p>
+			<p>in, out, in, out</p>
+			<p>shake it all about</p>
+		`);
+
+		options[1].selected = true;
+		await select.dispatchEvent(change);
+		assert.equal(component.selected, tasks[1]);
+		assert.ok(!input.checked);
+
+		input.checked = true;
+		await input.dispatchEvent(change);
+
+		assert.ok(component.tasks[1].done);
+		assert.htmlEqual(target.innerHTML, `
+			<select>
+				<option value='[object Object]'>put your left leg in</option>
+				<option value='[object Object]'>your left leg out</option>
+				<option value='[object Object]'>in, out, in, out</option>
+				<option value='[object Object]'>shake it all about</option>
+			</select>
+
+			<label>
+				<input type='checkbox'> your left leg out
+			</label>
+
+			<h2>Pending tasks</h2>
+			<p>in, out, in, out</p>
+			<p>shake it all about</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-indirect/main.svelte b/test/runtime/samples/binding-indirect/main.svelte
new file mode 100644
index 0000000000..0fb0d9d4c9
--- /dev/null
+++ b/test/runtime/samples/binding-indirect/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let selected;
+	export let tasks;
+</script>
+
+<select bind:value={selected}>
+	{#each tasks as task}
+		<option value='{task}'>{task.description}</option>
+	{/each}
+</select>
+
+<label>
+	<input type='checkbox' bind:checked={selected.done}> {selected.description}
+</label>
+
+<h2>Pending tasks</h2>
+{#each tasks.filter(t => !t.done) as task}
+	<p>{task.description}</p>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-checkbox-deep-contextual-b/_config.js b/test/runtime/samples/binding-input-checkbox-deep-contextual-b/_config.js
new file mode 100644
index 0000000000..539a07312b
--- /dev/null
+++ b/test/runtime/samples/binding-input-checkbox-deep-contextual-b/_config.js
@@ -0,0 +1,50 @@
+export default {
+	html: `
+		<div>
+			<input type="checkbox"><p>one</p>
+		</div>
+		<div>
+			<input type="checkbox"><p>two</p>
+		</div>
+		<div>
+			<input type="checkbox"><p>three</p>
+		</div>
+	`,
+
+	ssrHtml: `
+		<div>
+			<input type="checkbox"><p>one</p>
+		</div>
+		<div>
+			<input type="checkbox"><p>two</p>
+		</div>
+		<div>
+			<input type="checkbox"><p>three</p>
+		</div>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const inputs = [ ...target.querySelectorAll('input') ];
+
+		const event = new window.Event('change');
+
+		inputs[1].checked = true;
+		await inputs[1].dispatchEvent(event);
+
+		await component.clear();
+
+		assert.htmlEqual(target.innerHTML, `
+			<div><input type="checkbox"><p>one</p></div>
+			<div><input type="checkbox"><p>three</p></div>
+		`);
+
+		inputs[1].checked = true;
+		await inputs[1].dispatchEvent(event);
+
+		await component.clear();
+
+		assert.htmlEqual(target.innerHTML, `
+			<div><input type="checkbox"><p>one</p></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-checkbox-deep-contextual-b/main.svelte b/test/runtime/samples/binding-input-checkbox-deep-contextual-b/main.svelte
new file mode 100644
index 0000000000..ec90f52b73
--- /dev/null
+++ b/test/runtime/samples/binding-input-checkbox-deep-contextual-b/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	let todos = [
+		{ done: false, text: 'one' },
+		{ done: false, text: 'two' },
+		{ done: false, text: 'three' }
+	];
+
+	export function clear() {
+		todos = todos.filter(t => !t.done);
+	}
+</script>
+
+{#each todos as todo, i}
+	<div>
+		<input type=checkbox bind:checked={todo.done}>
+		<p>{todo.text}</p>
+	</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-checkbox-deep-contextual/_config.js b/test/runtime/samples/binding-input-checkbox-deep-contextual/_config.js
new file mode 100644
index 0000000000..959b17777b
--- /dev/null
+++ b/test/runtime/samples/binding-input-checkbox-deep-contextual/_config.js
@@ -0,0 +1,64 @@
+export default {
+	props: {
+		items: [
+			{ description: 'one', completed: true },
+			{ description: 'two', completed: false },
+			{ description: 'three', completed: false }
+		]
+	},
+
+	html: `
+		<div>
+			<input type="checkbox"><p>one</p>
+		</div>
+		<div>
+			<input type="checkbox"><p>two</p>
+		</div>
+		<div>
+			<input type="checkbox"><p>three</p>
+		</div>
+		<p>1 completed</p>
+	`,
+
+	ssrHtml: `
+		<div>
+			<input type="checkbox" checked><p>one</p>
+		</div>
+		<div>
+			<input type="checkbox"><p>two</p>
+		</div>
+		<div>
+			<input type="checkbox"><p>three</p>
+		</div>
+		<p>1 completed</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const inputs = [ ...target.querySelectorAll('input') ];
+
+		assert.ok(inputs[0].checked);
+		assert.ok(!inputs[1].checked);
+		assert.ok(!inputs[2].checked);
+
+		const event = new window.Event('change');
+
+		inputs[1].checked = true;
+		await inputs[1].dispatchEvent(event);
+
+		assert.equal(component.numCompleted, 2);
+		assert.htmlEqual(target.innerHTML, `
+			<div><input type="checkbox"><p>one</p></div><div><input type="checkbox"><p>two</p></div><div><input type="checkbox"><p>three</p></div>
+			<p>2 completed</p>
+		`);
+
+		const items = component.items;
+		items[2].completed = true;
+
+		component.items = items;
+		assert.ok(inputs[2].checked);
+		assert.htmlEqual(target.innerHTML, `
+			<div><input type="checkbox"><p>one</p></div><div><input type="checkbox"><p>two</p></div><div><input type="checkbox"><p>three</p></div>
+			<p>3 completed</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-checkbox-deep-contextual/main.svelte b/test/runtime/samples/binding-input-checkbox-deep-contextual/main.svelte
new file mode 100644
index 0000000000..1d51c2b140
--- /dev/null
+++ b/test/runtime/samples/binding-input-checkbox-deep-contextual/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let items;
+	export let numCompleted;
+
+	$: numCompleted = items.reduce((total, item) => {
+		return total + (item.completed ? 1 : 0);
+	}, 0);
+</script>
+
+{#each items as item}
+	<div><input type='checkbox' bind:checked={item.completed}><p>{item.description}</p></div>
+{/each}
+
+<p>{numCompleted} completed</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-checkbox-group-outside-each/_config.js b/test/runtime/samples/binding-input-checkbox-group-outside-each/_config.js
new file mode 100644
index 0000000000..0948797865
--- /dev/null
+++ b/test/runtime/samples/binding-input-checkbox-group-outside-each/_config.js
@@ -0,0 +1,91 @@
+const values = [
+	{ name: 'Alpha' },
+	{ name: 'Beta' },
+	{ name: 'Gamma' }
+];
+
+export default {
+	props: {
+		values,
+		selected: [values[1]]
+	},
+
+	html: `
+		<label>
+			<input type="checkbox" value="[object Object]"> Alpha
+		</label>
+
+		<label>
+			<input type="checkbox" value="[object Object]"> Beta
+		</label>
+
+		<label>
+			<input type="checkbox" value="[object Object]"> Gamma
+		</label>
+
+		<p>Beta</p>`,
+
+	ssrHtml: `
+		<label>
+			<input type="checkbox" value="[object Object]"> Alpha
+		</label>
+
+		<label>
+			<input type="checkbox" value="[object Object]" checked> Beta
+		</label>
+
+		<label>
+			<input type="checkbox" value="[object Object]"> Gamma
+		</label>
+
+		<p>Beta</p>`,
+
+	async test({ assert, component, target, window }) {
+		const inputs = target.querySelectorAll('input');
+		assert.equal(inputs[0].checked, false);
+		assert.equal(inputs[1].checked, true);
+		assert.equal(inputs[2].checked, false);
+
+		const event = new window.Event('change');
+
+		inputs[0].checked = true;
+		await inputs[0].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label>
+				<input type="checkbox" value="[object Object]"> Alpha
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Beta
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Gamma
+			</label>
+
+			<p>Alpha, Beta</p>
+		`);
+
+		component.selected = [values[1], values[2]];
+		assert.equal(inputs[0].checked, false);
+		assert.equal(inputs[1].checked, true);
+		assert.equal(inputs[2].checked, true);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label>
+				<input type="checkbox" value="[object Object]"> Alpha
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Beta
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Gamma
+			</label>
+
+			<p>Beta, Gamma</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-checkbox-group-outside-each/main.svelte b/test/runtime/samples/binding-input-checkbox-group-outside-each/main.svelte
new file mode 100644
index 0000000000..10593c1379
--- /dev/null
+++ b/test/runtime/samples/binding-input-checkbox-group-outside-each/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	export let selected;
+	export let values;
+</script>
+
+<label>
+	<input type="checkbox" value="{values[0]}" bind:group={selected} /> {values[0].name}
+</label>
+
+<label>
+	<input type="checkbox" value="{values[1]}" bind:group={selected} /> {values[1].name}
+</label>
+
+<label>
+	<input type="checkbox" value="{values[2]}" bind:group={selected} /> {values[2].name}
+</label>
+
+<p>{selected.map( function ( value ) { return value.name; }).join( ', ' ) }</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-checkbox-group/_config.js b/test/runtime/samples/binding-input-checkbox-group/_config.js
new file mode 100644
index 0000000000..0948797865
--- /dev/null
+++ b/test/runtime/samples/binding-input-checkbox-group/_config.js
@@ -0,0 +1,91 @@
+const values = [
+	{ name: 'Alpha' },
+	{ name: 'Beta' },
+	{ name: 'Gamma' }
+];
+
+export default {
+	props: {
+		values,
+		selected: [values[1]]
+	},
+
+	html: `
+		<label>
+			<input type="checkbox" value="[object Object]"> Alpha
+		</label>
+
+		<label>
+			<input type="checkbox" value="[object Object]"> Beta
+		</label>
+
+		<label>
+			<input type="checkbox" value="[object Object]"> Gamma
+		</label>
+
+		<p>Beta</p>`,
+
+	ssrHtml: `
+		<label>
+			<input type="checkbox" value="[object Object]"> Alpha
+		</label>
+
+		<label>
+			<input type="checkbox" value="[object Object]" checked> Beta
+		</label>
+
+		<label>
+			<input type="checkbox" value="[object Object]"> Gamma
+		</label>
+
+		<p>Beta</p>`,
+
+	async test({ assert, component, target, window }) {
+		const inputs = target.querySelectorAll('input');
+		assert.equal(inputs[0].checked, false);
+		assert.equal(inputs[1].checked, true);
+		assert.equal(inputs[2].checked, false);
+
+		const event = new window.Event('change');
+
+		inputs[0].checked = true;
+		await inputs[0].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label>
+				<input type="checkbox" value="[object Object]"> Alpha
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Beta
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Gamma
+			</label>
+
+			<p>Alpha, Beta</p>
+		`);
+
+		component.selected = [values[1], values[2]];
+		assert.equal(inputs[0].checked, false);
+		assert.equal(inputs[1].checked, true);
+		assert.equal(inputs[2].checked, true);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label>
+				<input type="checkbox" value="[object Object]"> Alpha
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Beta
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Gamma
+			</label>
+
+			<p>Beta, Gamma</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-checkbox-group/main.svelte b/test/runtime/samples/binding-input-checkbox-group/main.svelte
new file mode 100644
index 0000000000..0a6ad19192
--- /dev/null
+++ b/test/runtime/samples/binding-input-checkbox-group/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let selected;
+	export let values;
+</script>
+
+{#each values as value}
+	<label>
+		<input type="checkbox" value="{value}" bind:group={selected} /> {value.name}
+	</label>
+{/each}
+
+<p>{selected.map(v => v.name).join(', ')}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-checkbox-indeterminate/_config.js b/test/runtime/samples/binding-input-checkbox-indeterminate/_config.js
new file mode 100644
index 0000000000..9d099feb0a
--- /dev/null
+++ b/test/runtime/samples/binding-input-checkbox-indeterminate/_config.js
@@ -0,0 +1,42 @@
+export default {
+	skip_if_ssr: true,
+
+	props: {
+		indeterminate: true
+	},
+
+	html: `
+		<input type="checkbox">
+		<p>checked? false</p>
+		<p>indeterminate? true</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const input = target.querySelector('input');
+		assert.equal(input.checked, false);
+		assert.equal(input.indeterminate, true);
+
+		const event = new window.Event('change');
+
+		input.checked = true;
+		input.indeterminate = false;
+		await input.dispatchEvent(event);
+
+		assert.equal(component.indeterminate, false);
+		assert.equal(component.checked, true);
+		assert.htmlEqual(target.innerHTML, `
+			<input type="checkbox">
+			<p>checked? true</p>
+			<p>indeterminate? false</p>
+		`);
+
+		component.indeterminate = true;
+		assert.equal(input.indeterminate, true);
+		assert.equal(input.checked, true);
+		assert.htmlEqual(target.innerHTML, `
+			<input type="checkbox">
+			<p>checked? true</p>
+			<p>indeterminate? true</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-checkbox-indeterminate/main.svelte b/test/runtime/samples/binding-input-checkbox-indeterminate/main.svelte
new file mode 100644
index 0000000000..712d3180e6
--- /dev/null
+++ b/test/runtime/samples/binding-input-checkbox-indeterminate/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let checked;
+	export let indeterminate;
+</script>
+
+<input type='checkbox' bind:checked bind:indeterminate>
+<p>checked? {checked}</p>
+<p>indeterminate? {indeterminate}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-checkbox-with-event-in-each/_config.js b/test/runtime/samples/binding-input-checkbox-with-event-in-each/_config.js
new file mode 100644
index 0000000000..1247414c1c
--- /dev/null
+++ b/test/runtime/samples/binding-input-checkbox-with-event-in-each/_config.js
@@ -0,0 +1,39 @@
+export default {
+	props: {
+		cats: [
+			{
+				name: 'cat 0',
+				checked: false
+			},
+			{
+				name: 'cat 1',
+				checked: false
+			}
+		]
+	},
+
+	html: `
+		<input type="checkbox">
+		<input type="checkbox">
+	`,
+
+	test({ assert, component, target, window }) {
+		const { cats } = component;
+		const newCats = cats.slice();
+		newCats.push({
+			name: 'cat ' + cats.length,
+			checked: false
+		});
+		component.cats = newCats;
+
+		let inputs = target.querySelectorAll('input');
+		assert.equal(inputs.length, 3);
+
+		const event = new window.Event('change');
+		inputs[0].checked = true;
+		inputs[0].dispatchEvent(event);
+
+		inputs = target.querySelectorAll('input');
+		assert.equal(inputs.length, 3);
+	}
+};
diff --git a/test/runtime/samples/binding-input-checkbox-with-event-in-each/main.svelte b/test/runtime/samples/binding-input-checkbox-with-event-in-each/main.svelte
new file mode 100644
index 0000000000..f6286c0573
--- /dev/null
+++ b/test/runtime/samples/binding-input-checkbox-with-event-in-each/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let cats;
+
+	function someCheck() {
+		console.log('Check');
+	}
+</script>
+
+{#each cats as cat (cat.name)}
+	<input type="checkbox" bind:checked={cat.checked} on:change="{someCheck}">
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-checkbox/_config.js b/test/runtime/samples/binding-input-checkbox/_config.js
new file mode 100644
index 0000000000..f6b553ee23
--- /dev/null
+++ b/test/runtime/samples/binding-input-checkbox/_config.js
@@ -0,0 +1,37 @@
+export default {
+	props: {
+		foo: true
+	},
+
+	html: `
+		<input type="checkbox">
+		<p>true</p>
+	`,
+
+	ssrHtml: `
+		<input type="checkbox" checked>
+		<p>true</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const input = target.querySelector('input');
+		assert.equal(input.checked, true);
+
+		const event = new window.Event('change');
+
+		input.checked = false;
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input type="checkbox">
+			<p>false</p>
+		`);
+
+		component.foo = true;
+		assert.equal(input.checked, true);
+		assert.htmlEqual(target.innerHTML, `
+			<input type="checkbox">
+			<p>true</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-checkbox/main.svelte b/test/runtime/samples/binding-input-checkbox/main.svelte
new file mode 100644
index 0000000000..1543be0d3c
--- /dev/null
+++ b/test/runtime/samples/binding-input-checkbox/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let foo;
+</script>
+
+<input type='checkbox' bind:checked={foo}>
+<p>{foo}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-group-duplicate-value/_config.js b/test/runtime/samples/binding-input-group-duplicate-value/_config.js
new file mode 100644
index 0000000000..db7dd84dee
--- /dev/null
+++ b/test/runtime/samples/binding-input-group-duplicate-value/_config.js
@@ -0,0 +1,81 @@
+export default {
+	html: `
+		<p>Checked: </p>
+
+		<hr>
+
+		<input type='checkbox' value='a'>a<br>
+		<input type='checkbox' value='b'>b<br>
+		<input type='checkbox' value='c'>c<br>
+		<input type='checkbox' value='d'>d<br>
+
+		<hr>
+
+		<input type='checkbox' value='a'>a<br>
+		<input type='checkbox' value='b'>b<br>
+		<input type='checkbox' value='c'>c<br>
+		<input type='checkbox' value='d'>d<br>
+	`,
+
+	async test({ assert, target, window }) {
+		const inputs = target.querySelectorAll('input');
+		const p = target.querySelector('p');
+
+		assert.equal(inputs[0].checked, false);
+		assert.equal(inputs[1].checked, false);
+		assert.equal(inputs[2].checked, false);
+		assert.equal(inputs[3].checked, false);
+
+		assert.equal(inputs[4].checked, false);
+		assert.equal(inputs[5].checked, false);
+		assert.equal(inputs[6].checked, false);
+		assert.equal(inputs[7].checked, false);
+
+		const event = new window.Event('change');
+
+		inputs[0].checked = true;
+		await inputs[0].dispatchEvent(event);
+
+		assert.htmlEqual(p.innerHTML, 'Checked: a');
+
+		assert.equal(inputs[0].checked, true);
+		assert.equal(inputs[1].checked, false);
+		assert.equal(inputs[2].checked, false);
+		assert.equal(inputs[3].checked, false);
+
+		assert.equal(inputs[4].checked, true);
+		assert.equal(inputs[5].checked, false);
+		assert.equal(inputs[6].checked, false);
+		assert.equal(inputs[7].checked, false);
+
+		inputs[3].checked = true;
+		await inputs[3].dispatchEvent(event);
+
+		assert.htmlEqual(p.innerHTML, 'Checked: a,d');
+
+		assert.equal(inputs[0].checked, true);
+		assert.equal(inputs[1].checked, false);
+		assert.equal(inputs[2].checked, false);
+		assert.equal(inputs[3].checked, true);
+
+		assert.equal(inputs[4].checked, true);
+		assert.equal(inputs[5].checked, false);
+		assert.equal(inputs[6].checked, false);
+		assert.equal(inputs[7].checked, true);
+
+		inputs[4].checked = false;
+		await inputs[4].dispatchEvent(event);
+
+		assert.htmlEqual(p.innerHTML, 'Checked: d');
+
+		assert.equal(inputs[0].checked, false);
+		assert.equal(inputs[1].checked, false);
+		assert.equal(inputs[2].checked, false);
+		assert.equal(inputs[3].checked, true);
+
+		assert.equal(inputs[4].checked, false);
+		assert.equal(inputs[5].checked, false);
+		assert.equal(inputs[6].checked, false);
+		assert.equal(inputs[7].checked, true);
+	}
+};
diff --git a/test/runtime/samples/binding-input-group-duplicate-value/main.svelte b/test/runtime/samples/binding-input-group-duplicate-value/main.svelte
new file mode 100644
index 0000000000..153e559d23
--- /dev/null
+++ b/test/runtime/samples/binding-input-group-duplicate-value/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	let foo = [];
+</script>
+
+<p>Checked: {foo}</p>
+
+<hr>
+
+<input type='checkbox' bind:group={foo} value='a'>a<br>
+<input type='checkbox' bind:group={foo} value='b'>b<br>
+<input type='checkbox' bind:group={foo} value='c'>c<br>
+<input type='checkbox' bind:group={foo} value='d'>d<br>
+
+<hr>
+
+<input type='checkbox' bind:group={foo} value='a'>a<br>
+<input type='checkbox' bind:group={foo} value='b'>b<br>
+<input type='checkbox' bind:group={foo} value='c'>c<br>
+<input type='checkbox' bind:group={foo} value='d'>d<br>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-group-each-1/_config.js b/test/runtime/samples/binding-input-group-each-1/_config.js
new file mode 100644
index 0000000000..9bdf784f73
--- /dev/null
+++ b/test/runtime/samples/binding-input-group-each-1/_config.js
@@ -0,0 +1,323 @@
+const values = [
+	{ name: 'Alpha' },
+	{ name: 'Beta' },
+	{ name: 'Gamma' }
+];
+
+const selected_array = [
+	[values[1]],
+	[],
+	[values[2]]
+];
+
+export default {
+	props: {
+		values,
+		selected_array
+	},
+
+	html: `
+		<div>
+			<label>
+				<input type="checkbox" value="[object Object]"> Alpha
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Beta
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Gamma
+			</label>
+
+			<p>Beta</p>
+		</div>
+		<div>
+			<label>
+				<input type="checkbox" value="[object Object]"> Alpha
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Beta
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Gamma
+			</label>
+
+			<p></p>
+		</div>
+		<div>
+			<label>
+				<input type="checkbox" value="[object Object]"> Alpha
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Beta
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Gamma
+			</label>
+
+			<p>Gamma</p>
+		</div>
+	`,
+
+	ssrHtml: `
+		<div>
+			<label>
+				<input type="checkbox" value="[object Object]"> Alpha
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]" checked> Beta
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Gamma
+			</label>
+
+			<p>Beta</p>
+		</div>
+		<div>
+			<label>
+				<input type="checkbox" value="[object Object]"> Alpha
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Beta
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Gamma
+			</label>
+
+			<p></p>
+		</div>
+		<div>
+			<label>
+				<input type="checkbox" value="[object Object]"> Alpha
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Beta
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]" checked> Gamma
+			</label>
+
+			<p>Gamma</p>
+		</div>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const inputs = target.querySelectorAll('input');
+		assert.equal(inputs[0].checked, false);
+		assert.equal(inputs[1].checked, true);
+		assert.equal(inputs[2].checked, false);
+		assert.equal(inputs[3].checked, false);
+		assert.equal(inputs[4].checked, false);
+		assert.equal(inputs[5].checked, false);
+		assert.equal(inputs[6].checked, false);
+		assert.equal(inputs[7].checked, false);
+		assert.equal(inputs[8].checked, true);
+
+		const event = new window.Event('change');
+
+		inputs[0].checked = true;
+		await inputs[0].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p>Alpha, Beta</p>
+			</div>
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p></p>
+			</div>
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p>Gamma</p>
+			</div>
+		`);
+		inputs[3].checked = true;
+		await inputs[3].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p>Alpha, Beta</p>
+			</div>
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p>Alpha</p>
+			</div>
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p>Gamma</p>
+			</div>
+		`);
+
+		inputs[8].checked = false;
+		await inputs[8].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p>Alpha, Beta</p>
+			</div>
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p>Alpha</p>
+			</div>
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p></p>
+			</div>
+		`);
+
+		component.selected_array = [[values[1], values[2]], [values[2]]];
+
+		assert.equal(inputs[0].checked, false);
+		assert.equal(inputs[1].checked, true);
+		assert.equal(inputs[2].checked, true);
+		assert.equal(inputs[3].checked, false);
+		assert.equal(inputs[4].checked, false);
+		assert.equal(inputs[5].checked, true);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p>Beta, Gamma</p>
+			</div>
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p>Gamma</p>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-group-each-1/main.svelte b/test/runtime/samples/binding-input-group-each-1/main.svelte
new file mode 100644
index 0000000000..5ed255c83a
--- /dev/null
+++ b/test/runtime/samples/binding-input-group-each-1/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let selected_array;
+	export let values;
+</script>
+
+{#each selected_array as selected}
+	<div>
+		{#each values as value}
+			<label>
+				<input type="checkbox" value="{value}" bind:group={selected} /> {value.name}
+			</label>
+		{/each}
+		<p>{selected.map(v => v.name).join(', ')}</p>
+	</div>
+{/each}
diff --git a/test/runtime/samples/binding-input-group-each-2/_config.js b/test/runtime/samples/binding-input-group-each-2/_config.js
new file mode 100644
index 0000000000..880b183f88
--- /dev/null
+++ b/test/runtime/samples/binding-input-group-each-2/_config.js
@@ -0,0 +1,72 @@
+export default {
+	html: `
+		<label>
+			<input type="checkbox" value="1"> 1
+		</label>
+		<label>
+			<input type="checkbox" value="2"> 2
+		</label>
+		<label>
+			<input type="checkbox" value="3"> 3
+		</label>
+
+		<p>1, 2, 3</p>`,
+
+	ssrHtml: `
+		<label>
+			<input type="checkbox" value="1" checked> 1
+		</label>
+		<label>
+			<input type="checkbox" value="2" checked> 2
+		</label>
+		<label>
+			<input type="checkbox" value="3" checked> 3
+		</label>
+
+		<p>1, 2, 3</p>`,
+
+	async test({ assert, component, target, window }) {
+		const inputs = target.querySelectorAll('input');
+		assert.equal(inputs[0].checked, true);
+		assert.equal(inputs[1].checked, true);
+		assert.equal(inputs[2].checked, true);
+
+		const event = new window.Event('change');
+
+		inputs[0].checked = false;
+		await inputs[0].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label>
+				<input type="checkbox" value="1"> 1
+			</label>
+			<label>
+				<input type="checkbox" value="2"> 2
+			</label>
+			<label>
+				<input type="checkbox" value="3"> 3
+			</label>
+
+			<p>2, 3</p>
+		`);
+
+		component.selected = [[1, 3]];
+		assert.equal(inputs[0].checked, true);
+		assert.equal(inputs[1].checked, false);
+		assert.equal(inputs[2].checked, true);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label>
+				<input type="checkbox" value="1"> 1
+			</label>
+			<label>
+				<input type="checkbox" value="2"> 2
+			</label>
+			<label>
+				<input type="checkbox" value="3"> 3
+			</label>
+
+			<p>1, 3</p>		
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-group-each-2/main.svelte b/test/runtime/samples/binding-input-group-each-2/main.svelte
new file mode 100644
index 0000000000..46f7e9e698
--- /dev/null
+++ b/test/runtime/samples/binding-input-group-each-2/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	let options = [1,2,3]
+	export let selected = [[1,2,3]];
+</script>
+
+{#each options as value}
+	<label>
+		<input 
+			type='checkbox'
+			bind:group={selected[0]} 
+			value={value}
+		/>
+		{value}
+	</label>
+{/each}
+
+<p>{selected[0].join(', ')}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-group-each-3/_config.js b/test/runtime/samples/binding-input-group-each-3/_config.js
new file mode 100644
index 0000000000..f4018295d7
--- /dev/null
+++ b/test/runtime/samples/binding-input-group-each-3/_config.js
@@ -0,0 +1,321 @@
+const values = [
+	{ name: 'Alpha' },
+	{ name: 'Beta' },
+	{ name: 'Gamma' }
+];
+
+const selected_array = [
+	[values[1]],
+	[],
+	[values[2]]
+];
+
+export default {
+	props: {
+		values,
+		selected_array
+	},
+
+	html: `
+		<div>
+			<label>
+				<input type="checkbox" value="[object Object]"> Alpha
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Beta
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Gamma
+			</label>
+
+			<p>Beta</p>
+		</div>
+		<div>
+			<label>
+				<input type="checkbox" value="[object Object]"> Alpha
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Beta
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Gamma
+			</label>
+
+			<p></p>
+		</div>
+		<div>
+			<label>
+				<input type="checkbox" value="[object Object]"> Alpha
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Beta
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Gamma
+			</label>
+
+			<p>Gamma</p>
+		</div>
+	`,
+	ssrHtml: `
+		<div>
+			<label>
+				<input type="checkbox" value="[object Object]"> Alpha
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]" checked> Beta
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Gamma
+			</label>
+
+			<p>Beta</p>
+		</div>
+		<div>
+			<label>
+				<input type="checkbox" value="[object Object]"> Alpha
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Beta
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Gamma
+			</label>
+
+			<p></p>
+		</div>
+		<div>
+			<label>
+				<input type="checkbox" value="[object Object]"> Alpha
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]"> Beta
+			</label>
+
+			<label>
+				<input type="checkbox" value="[object Object]" checked> Gamma
+			</label>
+
+			<p>Gamma</p>
+		</div>
+	`,
+	async test({ assert, component, target, window }) {
+		const inputs = target.querySelectorAll('input');
+		assert.equal(inputs[0].checked, false);
+		assert.equal(inputs[1].checked, true);
+		assert.equal(inputs[2].checked, false);
+		assert.equal(inputs[3].checked, false);
+		assert.equal(inputs[4].checked, false);
+		assert.equal(inputs[5].checked, false);
+		assert.equal(inputs[6].checked, false);
+		assert.equal(inputs[7].checked, false);
+		assert.equal(inputs[8].checked, true);
+
+		const event = new window.Event('change');
+
+		inputs[0].checked = true;
+		await inputs[0].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p>Alpha, Beta</p>
+			</div>
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p></p>
+			</div>
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p>Gamma</p>
+			</div>
+		`);
+		inputs[3].checked = true;
+		await inputs[3].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p>Alpha, Beta</p>
+			</div>
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p>Alpha</p>
+			</div>
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p>Gamma</p>
+			</div>
+		`);
+
+		inputs[8].checked = false;
+		await inputs[8].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p>Alpha, Beta</p>
+			</div>
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p>Alpha</p>
+			</div>
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p></p>
+			</div>
+		`);
+
+		component.selected_array = [[values[1], values[2]], [values[2]]];
+
+		assert.equal(inputs[0].checked, false);
+		assert.equal(inputs[1].checked, true);
+		assert.equal(inputs[2].checked, true);
+		assert.equal(inputs[3].checked, false);
+		assert.equal(inputs[4].checked, false);
+		assert.equal(inputs[5].checked, true);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p>Beta, Gamma</p>
+			</div>
+			<div>
+				<label>
+					<input type="checkbox" value="[object Object]"> Alpha
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Beta
+				</label>
+
+				<label>
+					<input type="checkbox" value="[object Object]"> Gamma
+				</label>
+
+				<p>Gamma</p>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-group-each-3/main.svelte b/test/runtime/samples/binding-input-group-each-3/main.svelte
new file mode 100644
index 0000000000..42a7a1c4e9
--- /dev/null
+++ b/test/runtime/samples/binding-input-group-each-3/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let selected_array;
+	export let values;
+</script>
+
+{#each selected_array as _, index}
+	<div>
+		{#each values as value}
+			<label>
+				<input type="checkbox" value="{value}" bind:group={selected_array[index]} /> {value.name}
+			</label>
+		{/each}
+		<p>{selected_array[index].map(v => v.name).join(', ')}</p>
+	</div>
+{/each}
diff --git a/test/runtime/samples/binding-input-group-each-4/_config.js b/test/runtime/samples/binding-input-group-each-4/_config.js
new file mode 100644
index 0000000000..da5edf18bc
--- /dev/null
+++ b/test/runtime/samples/binding-input-group-each-4/_config.js
@@ -0,0 +1,170 @@
+export default {
+	html: `
+		<label><input type="checkbox" value="1"> 1</label>
+		<label><input type="checkbox" value="2"> 2</label>
+		<label><input type="checkbox" value="3"> 3</label>
+		<p>1</p>
+		<label><input type="checkbox" value="1"> 1</label>
+		<label><input type="checkbox" value="2"> 2</label>
+		<label><input type="checkbox" value="3"> 3</label>
+		<p>2</p>
+		<label><input type="checkbox" value="1"> 1</label>
+		<label><input type="checkbox" value="2"> 2</label>
+		<label><input type="checkbox" value="3"> 3</label>
+		<p></p>
+		<label><input type="checkbox" value="1"> 1</label>
+		<label><input type="checkbox" value="2"> 2</label>
+		<label><input type="checkbox" value="3"> 3</label>
+		<p>3</p>
+	`,
+	ssrHtml: `
+		<label><input type="checkbox" value="1" checked> 1</label>
+		<label><input type="checkbox" value="2"> 2</label>
+		<label><input type="checkbox" value="3"> 3</label>
+		<p>1</p>
+		<label><input type="checkbox" value="1"> 1</label>
+		<label><input type="checkbox" value="2" checked> 2</label>
+		<label><input type="checkbox" value="3"> 3</label>
+		<p>2</p>
+		<label><input type="checkbox" value="1"> 1</label>
+		<label><input type="checkbox" value="2"> 2</label>
+		<label><input type="checkbox" value="3"> 3</label>
+		<p></p>
+		<label><input type="checkbox" value="1"> 1</label>
+		<label><input type="checkbox" value="2"> 2</label>
+		<label><input type="checkbox" value="3" checked> 3</label>
+		<p>3</p>
+	`,
+	async test({ assert, component, target, window }) {
+		const inputs = target.querySelectorAll('input');
+		assert.equal(inputs[0].checked, true);
+		assert.equal(inputs[1].checked, false);
+		assert.equal(inputs[2].checked, false);
+
+		assert.equal(inputs[3].checked, false);
+		assert.equal(inputs[4].checked, true);
+		assert.equal(inputs[5].checked, false);
+
+		assert.equal(inputs[6].checked, false);
+		assert.equal(inputs[7].checked, false);
+		assert.equal(inputs[8].checked, false);
+
+		assert.equal(inputs[9].checked, false);
+		assert.equal(inputs[10].checked, false);
+		assert.equal(inputs[11].checked, true);
+
+		const event = new window.Event('change');
+
+		inputs[2].checked = true;
+		await inputs[2].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>1, 3</p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>2</p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p></p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>3</p>
+		`);
+
+		inputs[9].checked = true;
+		await inputs[9].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>1, 3</p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>2</p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p></p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>1, 3</p>
+		`);
+
+		inputs[4].checked = false;
+		await inputs[4].dispatchEvent(event);
+		inputs[5].checked = true;
+		await inputs[5].dispatchEvent(event);
+		inputs[6].checked = true;
+		await inputs[6].dispatchEvent(event);
+		inputs[7].checked = true;
+		await inputs[7].dispatchEvent(event);
+		inputs[11].checked = false;
+		await inputs[11].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>1, 3</p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>3</p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>1, 2</p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>1</p>
+		`);
+
+		component.selected_array_1 = [[3], [1]];
+		component.selected_array_2 = [[], [2]];
+
+		assert.equal(inputs[0].checked, false);
+		assert.equal(inputs[1].checked, false);
+		assert.equal(inputs[2].checked, true);
+
+		assert.equal(inputs[3].checked, true);
+		assert.equal(inputs[4].checked, false);
+		assert.equal(inputs[5].checked, false);
+
+		assert.equal(inputs[6].checked, false);
+		assert.equal(inputs[7].checked, false);
+		assert.equal(inputs[8].checked, false);
+
+		assert.equal(inputs[9].checked, false);
+		assert.equal(inputs[10].checked, true);
+		assert.equal(inputs[11].checked, false);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>3</p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>1</p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p></p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>2</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-group-each-4/main.svelte b/test/runtime/samples/binding-input-group-each-4/main.svelte
new file mode 100644
index 0000000000..0bbf5ea763
--- /dev/null
+++ b/test/runtime/samples/binding-input-group-each-4/main.svelte
@@ -0,0 +1,33 @@
+<script>
+	const options = [1, 2, 3];
+	export let selected_array_1 = [[1], [2]];
+	export let selected_array_2 = [[], [3]];
+</script>
+
+{#each selected_array_1 as selected}
+	{#each options as value}
+		<label>
+			<input 
+				type='checkbox'
+				bind:group={selected} 
+				value={value}
+			/>
+			{value}
+		</label>
+	{/each}
+	<p>{selected.join(', ')}</p>
+{/each}
+
+{#each selected_array_2 as selected}
+	{#each options as value}
+		<label>
+			<input 
+				type='checkbox'
+				bind:group={selected} 
+				value={value}
+			/>
+			{value}
+		</label>
+	{/each}
+	<p>{selected.join(', ')}</p>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-group-each-5/_config.js b/test/runtime/samples/binding-input-group-each-5/_config.js
new file mode 100644
index 0000000000..cdfe9308df
--- /dev/null
+++ b/test/runtime/samples/binding-input-group-each-5/_config.js
@@ -0,0 +1,177 @@
+export default {
+	html: `
+		<label><input type="checkbox" value="1"> 1</label>
+		<label><input type="checkbox" value="2"> 2</label>
+		<label><input type="checkbox" value="3"> 3</label>
+		<p>1</p>
+		<label><input type="checkbox" value="1"> 1</label>
+		<label><input type="checkbox" value="2"> 2</label>
+		<label><input type="checkbox" value="3"> 3</label>
+		<p>1, 2, 3</p>
+		<label><input type="checkbox" value="1"> 1</label>
+		<label><input type="checkbox" value="2"> 2</label>
+		<label><input type="checkbox" value="3"> 3</label>
+		<p>2</p>
+		<label><input type="checkbox" value="1"> 1</label>
+		<label><input type="checkbox" value="2"> 2</label>
+		<label><input type="checkbox" value="3"> 3</label>
+		<p>1</p>
+	`,
+	ssrHtml: `
+		<label><input type="checkbox" value="1" checked> 1</label>
+		<label><input type="checkbox" value="2"> 2</label>
+		<label><input type="checkbox" value="3"> 3</label>
+		<p>1</p>
+		<label><input type="checkbox" value="1" checked> 1</label>
+		<label><input type="checkbox" value="2" checked> 2</label>
+		<label><input type="checkbox" value="3" checked> 3</label>
+		<p>1, 2, 3</p>
+		<label><input type="checkbox" value="1"> 1</label>
+		<label><input type="checkbox" value="2" checked> 2</label>
+		<label><input type="checkbox" value="3"> 3</label>
+		<p>2</p>
+		<label><input type="checkbox" value="1" checked> 1</label>
+		<label><input type="checkbox" value="2"> 2</label>
+		<label><input type="checkbox" value="3"> 3</label>
+		<p>1</p>
+	`,
+	async test({ assert, component, target, window }) {
+		const inputs = target.querySelectorAll('input');
+		assert.equal(inputs[0].checked, true);
+		assert.equal(inputs[1].checked, false);
+		assert.equal(inputs[2].checked, false);
+
+		assert.equal(inputs[3].checked, true);
+		assert.equal(inputs[4].checked, true);
+		assert.equal(inputs[5].checked, true);
+
+		assert.equal(inputs[6].checked, false);
+		assert.equal(inputs[7].checked, true);
+		assert.equal(inputs[8].checked, false);
+
+		assert.equal(inputs[9].checked, true);
+		assert.equal(inputs[10].checked, false);
+		assert.equal(inputs[11].checked, false);
+
+		const event = new window.Event('change');
+
+		inputs[2].checked = true;
+		await inputs[2].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>1, 3</p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>1, 2, 3</p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>2</p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>1</p>
+		`);
+
+		inputs[8].checked = true;
+		await inputs[8].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>1, 3</p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>1, 2, 3</p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>2, 3</p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>1</p>
+		`);
+
+		component.selected_index = [1, 1];
+
+		assert.htmlEqual(target.innerHTML, `
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>1, 2, 3</p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>1, 2, 3</p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>1</p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>1</p>
+		`);
+
+		assert.equal(inputs[0].checked, true);
+		assert.equal(inputs[1].checked, true);
+		assert.equal(inputs[2].checked, true);
+
+		assert.equal(inputs[3].checked, true);
+		assert.equal(inputs[4].checked, true);
+		assert.equal(inputs[5].checked, true);
+
+		assert.equal(inputs[6].checked, true);
+		assert.equal(inputs[7].checked, false);
+		assert.equal(inputs[8].checked, false);
+
+		assert.equal(inputs[9].checked, true);
+		assert.equal(inputs[10].checked, false);
+		assert.equal(inputs[11].checked, false);
+
+		inputs[5].checked = false;
+		await inputs[5].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>1, 2</p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>1, 2</p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>1</p>
+			<label><input type="checkbox" value="1"> 1</label>
+			<label><input type="checkbox" value="2"> 2</label>
+			<label><input type="checkbox" value="3"> 3</label>
+			<p>1</p>
+		`);
+
+		assert.equal(inputs[0].checked, true);
+		assert.equal(inputs[1].checked, true);
+		assert.equal(inputs[2].checked, false);
+
+		assert.equal(inputs[3].checked, true);
+		assert.equal(inputs[4].checked, true);
+		assert.equal(inputs[5].checked, false);
+
+		assert.equal(inputs[6].checked, true);
+		assert.equal(inputs[7].checked, false);
+		assert.equal(inputs[8].checked, false);
+
+		assert.equal(inputs[9].checked, true);
+		assert.equal(inputs[10].checked, false);
+		assert.equal(inputs[11].checked, false);
+	}
+};
diff --git a/test/runtime/samples/binding-input-group-each-5/main.svelte b/test/runtime/samples/binding-input-group-each-5/main.svelte
new file mode 100644
index 0000000000..93bdce6510
--- /dev/null
+++ b/test/runtime/samples/binding-input-group-each-5/main.svelte
@@ -0,0 +1,24 @@
+<script>
+	const options = [1, 2, 3];
+	export let selected_array = [
+		[[1], [1, 2, 3]], 
+		[[2], [1]],
+	];
+	export let selected_index = [0, 1];
+</script>
+
+{#each selected_array as selected}
+	{#each selected_index as index}
+		{#each options as value}
+			<label>
+				<input 
+					type='checkbox'
+					bind:group={selected[index]}
+					value={value}
+				/>
+				{value}
+			</label>
+		{/each}
+		<p>{selected[index].join(', ')}</p>
+	{/each}
+{/each}
diff --git a/test/runtime/samples/binding-input-group-each-6/_config.js b/test/runtime/samples/binding-input-group-each-6/_config.js
new file mode 100644
index 0000000000..7fd1232a27
--- /dev/null
+++ b/test/runtime/samples/binding-input-group-each-6/_config.js
@@ -0,0 +1,86 @@
+export default {
+	html: `
+		<label><input type="checkbox" value="x"> x</label>
+		<label><input type="checkbox" value="y"> y</label>
+		<label><input type="checkbox" value="z"> z</label>
+		<p></p>
+		<label><input type="checkbox" value="x"> x</label>
+		<label><input type="checkbox" value="y"> y</label>
+		<label><input type="checkbox" value="z"> z</label>
+		<p></p>
+		<label><input type="checkbox" value="x"> x</label>
+		<label><input type="checkbox" value="y"> y</label>
+		<label><input type="checkbox" value="z"> z</label>
+		<p></p>
+	`,
+	async test({ assert, target, window }) {
+		const inputs = target.querySelectorAll('input');
+		assert.equal(inputs[0].checked, false);
+		assert.equal(inputs[1].checked, false);
+		assert.equal(inputs[2].checked, false);
+
+		assert.equal(inputs[3].checked, false);
+		assert.equal(inputs[4].checked, false);
+		assert.equal(inputs[5].checked, false);
+
+		assert.equal(inputs[6].checked, false);
+		assert.equal(inputs[7].checked, false);
+		assert.equal(inputs[8].checked, false);
+
+		const event = new window.Event('change');
+
+		inputs[2].checked = true;
+		await inputs[2].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label><input type="checkbox" value="x"> x</label>
+			<label><input type="checkbox" value="y"> y</label>
+			<label><input type="checkbox" value="z"> z</label>
+			<p>z</p>
+			<label><input type="checkbox" value="x"> x</label>
+			<label><input type="checkbox" value="y"> y</label>
+			<label><input type="checkbox" value="z"> z</label>
+			<p></p>
+			<label><input type="checkbox" value="x"> x</label>
+			<label><input type="checkbox" value="y"> y</label>
+			<label><input type="checkbox" value="z"> z</label>
+			<p></p>
+		`);
+
+		inputs[4].checked = true;
+		await inputs[4].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label><input type="checkbox" value="x"> x</label>
+			<label><input type="checkbox" value="y"> y</label>
+			<label><input type="checkbox" value="z"> z</label>
+			<p>z</p>
+			<label><input type="checkbox" value="x"> x</label>
+			<label><input type="checkbox" value="y"> y</label>
+			<label><input type="checkbox" value="z"> z</label>
+			<p>y</p>
+			<label><input type="checkbox" value="x"> x</label>
+			<label><input type="checkbox" value="y"> y</label>
+			<label><input type="checkbox" value="z"> z</label>
+			<p></p>
+		`);
+
+		inputs[5].checked = true;
+		await inputs[5].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label><input type="checkbox" value="x"> x</label>
+			<label><input type="checkbox" value="y"> y</label>
+			<label><input type="checkbox" value="z"> z</label>
+			<p>z</p>
+			<label><input type="checkbox" value="x"> x</label>
+			<label><input type="checkbox" value="y"> y</label>
+			<label><input type="checkbox" value="z"> z</label>
+			<p>y, z</p>
+			<label><input type="checkbox" value="x"> x</label>
+			<label><input type="checkbox" value="y"> y</label>
+			<label><input type="checkbox" value="z"> z</label>
+			<p></p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-group-each-6/main.svelte b/test/runtime/samples/binding-input-group-each-6/main.svelte
new file mode 100644
index 0000000000..85be939e8a
--- /dev/null
+++ b/test/runtime/samples/binding-input-group-each-6/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	const values = ['x', 'y', 'z'];
+	const list = {
+		a: [],
+		b: [],
+		c: [],
+	};
+</script>
+
+{#each Object.keys(list) as key}
+	{#each values as value}
+		<label>
+			<input 
+				type='checkbox'
+				bind:group={list[key]}
+				value={value}
+			/>
+			{value}
+		</label>
+	{/each}
+	<p>{list[key].join(', ')}</p>
+{/each}
diff --git a/test/runtime/samples/binding-input-group-each-7/_config.js b/test/runtime/samples/binding-input-group-each-7/_config.js
new file mode 100644
index 0000000000..7535001f67
--- /dev/null
+++ b/test/runtime/samples/binding-input-group-each-7/_config.js
@@ -0,0 +1,53 @@
+export default {
+	html: `
+		<input type="checkbox" value="a" data-index="x-1">
+		<input type="checkbox" value="b" data-index="x-1">
+		<input type="checkbox" value="c" data-index="x-1">
+		<input type="checkbox" value="a" data-index="x-2">
+		<input type="checkbox" value="b" data-index="x-2">
+		<input type="checkbox" value="c" data-index="x-2">
+		<input type="checkbox" value="a" data-index="y-1">
+		<input type="checkbox" value="b" data-index="y-1">
+		<input type="checkbox" value="c" data-index="y-1">
+		<input type="checkbox" value="a" data-index="y-2">
+		<input type="checkbox" value="b" data-index="y-2">
+		<input type="checkbox" value="c" data-index="y-2">
+		<input type="checkbox" value="a" data-index="z-1">
+		<input type="checkbox" value="b" data-index="z-1">
+		<input type="checkbox" value="c" data-index="z-1">
+		<input type="checkbox" value="a" data-index="z-2">
+		<input type="checkbox" value="b" data-index="z-2">
+		<input type="checkbox" value="c" data-index="z-2">
+	`,
+
+	async test({ assert, target, window }) {
+		const inputs = target.querySelectorAll('input');
+		const checked = new Set();
+		const checkInbox = async (i) => {
+			checked.add(i);
+			inputs[i].checked = true;
+			await inputs[i].dispatchEvent(event);
+		};
+
+		for (let i = 0; i < 18; i++) {
+			assert.equal(inputs[i].checked, checked.has(i));
+		}
+
+		const event = new window.Event('change');
+
+		await checkInbox(2);
+		for (let i = 0; i < 18; i++) {
+			assert.equal(inputs[i].checked, checked.has(i));
+		}
+
+		await checkInbox(12);
+		for (let i = 0; i < 18; i++) {
+			assert.equal(inputs[i].checked, checked.has(i));
+		}
+
+		await checkInbox(8);
+		for (let i = 0; i < 18; i++) {
+			assert.equal(inputs[i].checked, checked.has(i));
+		}
+	}
+};
diff --git a/test/runtime/samples/binding-input-group-each-7/main.svelte b/test/runtime/samples/binding-input-group-each-7/main.svelte
new file mode 100644
index 0000000000..6680a49f32
--- /dev/null
+++ b/test/runtime/samples/binding-input-group-each-7/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	const list = [
+		{ id: 'x', data: [{ id: 1, data: [] }, { id: 2, data: [] }] },
+		{ id: 'y', data: [{ id: 1, data: [] }, { id: 2, data: [] }] },
+		{ id: 'z', data: [{ id: 1, data: [] }, { id: 2, data: [] }] }
+	];
+</script>
+
+{#each list as { id, data }}
+	{#each data as item}
+		<input type="checkbox" bind:group={item.data} value="a" data-index="{id}-{item.id}" />
+		<input type="checkbox" bind:group={item.data} value="b" data-index="{id}-{item.id}" />
+		<input type="checkbox" bind:group={item.data} value="c" data-index="{id}-{item.id}" />
+	{/each}
+{/each}
diff --git a/test/runtime/samples/binding-input-member-expression-update/_config.js b/test/runtime/samples/binding-input-member-expression-update/_config.js
new file mode 100644
index 0000000000..c0dfc3bbe8
--- /dev/null
+++ b/test/runtime/samples/binding-input-member-expression-update/_config.js
@@ -0,0 +1,18 @@
+// binding member expression shouldn't invalidate the property name
+export default {
+	async test({ assert, component, target, window }) {
+		const input = target.querySelector('input');
+		assert.deepEqual(component.logs.length, 1);
+		assert.equal(input.value, 'abc');
+
+		input.value = 'hij';
+		await input.dispatchEvent(new window.Event('input'));
+
+		assert.deepEqual(component.values.a, 'hij');
+		assert.deepEqual(component.logs.length, 1);
+		
+		component.paths = ['b'];
+		assert.deepEqual(component.logs.length, 2);
+		assert.equal(input.value, 'def');		
+	}
+};
diff --git a/test/runtime/samples/binding-input-member-expression-update/main.svelte b/test/runtime/samples/binding-input-member-expression-update/main.svelte
new file mode 100644
index 0000000000..dc72b229ba
--- /dev/null
+++ b/test/runtime/samples/binding-input-member-expression-update/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let values = { a: 'abc', b: 'def' };
+	export let paths = ['a'];
+	export let logs = [];
+
+	$: paths && logs.push('paths updated');
+</script>
+
+<input bind:value={values[paths[0]]} />
diff --git a/test/runtime/samples/binding-input-number-2/_config.js b/test/runtime/samples/binding-input-number-2/_config.js
new file mode 100644
index 0000000000..4411eac0b2
--- /dev/null
+++ b/test/runtime/samples/binding-input-number-2/_config.js
@@ -0,0 +1,31 @@
+export default {
+	test({ assert, target, window, component }) {
+		const input = target.querySelector('input');
+		const inputEvent = new window.InputEvent('input');
+		assert.equal(component.value, 5);
+		assert.equal(input.value, '5');
+
+		input.value = '5.';
+		input.dispatchEvent(inputEvent);
+
+		// input type number has value === "" if ends with dot/comma
+		assert.equal(component.value, undefined);
+		assert.equal(input.value, '');
+
+		input.value = '5.5';
+		input.dispatchEvent(inputEvent);
+
+		assert.equal(component.value, 5.5);
+		assert.equal(input.value, '5.5');
+
+		input.value = '5.50';
+		input.dispatchEvent(inputEvent);
+
+		assert.equal(component.value, 5.5);
+		assert.equal(input.value, '5.50');
+
+		component.value = 1;
+		assert.equal(component.value, 1);
+		assert.equal(input.value, '1');
+	}
+};
diff --git a/test/runtime/samples/binding-input-number-2/main.svelte b/test/runtime/samples/binding-input-number-2/main.svelte
new file mode 100644
index 0000000000..62119547a0
--- /dev/null
+++ b/test/runtime/samples/binding-input-number-2/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let value = 5;
+</script>
+
+<input type="number" bind:value />
diff --git a/test/runtime/samples/binding-input-number/_config.js b/test/runtime/samples/binding-input-number/_config.js
new file mode 100644
index 0000000000..1a56a75c0c
--- /dev/null
+++ b/test/runtime/samples/binding-input-number/_config.js
@@ -0,0 +1,48 @@
+export default {
+	props: {
+		count: 42
+	},
+
+	html: `
+		<input type=number>
+		<p>number 42</p>
+	`,
+
+	ssrHtml: `
+		<input type=number value=42>
+		<p>number 42</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const input = target.querySelector('input');
+		assert.equal(input.value, '42');
+
+		const event = new window.Event('input');
+
+		input.value = '43';
+		await input.dispatchEvent(event);
+
+		assert.equal(component.count, 43);
+		assert.htmlEqual(target.innerHTML, `
+			<input type='number'>
+			<p>number 43</p>
+		`);
+
+		component.count = 44;
+		assert.equal(input.value, '44');
+		assert.htmlEqual(target.innerHTML, `
+			<input type='number'>
+			<p>number 44</p>
+		`);
+
+		// empty string should be treated as null
+		input.value = '';
+		await input.dispatchEvent(event);
+
+		assert.equal(component.count, null);
+		assert.htmlEqual(target.innerHTML, `
+			<input type='number'>
+			<p>object null</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-number/main.svelte b/test/runtime/samples/binding-input-number/main.svelte
new file mode 100644
index 0000000000..e45b09f92c
--- /dev/null
+++ b/test/runtime/samples/binding-input-number/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let count;
+</script>
+
+<input type='number' bind:value={count}>
+<p>{typeof count} {count}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-radio-group/_config.js b/test/runtime/samples/binding-input-radio-group/_config.js
new file mode 100644
index 0000000000..9684f60fa6
--- /dev/null
+++ b/test/runtime/samples/binding-input-radio-group/_config.js
@@ -0,0 +1,95 @@
+const values = [
+	{ name: 'Alpha' },
+	{ name: 'Beta' },
+	{ name: 'Gamma' }
+];
+
+export default {
+	props: {
+		values,
+		selected: values[1]
+	},
+
+	html: `
+		<label>
+			<input type="radio" value="[object Object]"> Alpha
+		</label>
+
+		<label>
+			<input type="radio" value="[object Object]"> Beta
+		</label>
+
+		<label>
+			<input type="radio" value="[object Object]"> Gamma
+		</label>
+
+		<p>Beta</p>`,
+
+	ssrHtml: `
+		<label>
+			<input type="radio" value="[object Object]"> Alpha
+		</label>
+
+		<label>
+			<input type="radio" value="[object Object]" checked> Beta
+		</label>
+
+		<label>
+			<input type="radio" value="[object Object]"> Gamma
+		</label>
+
+		<p>Beta</p>`,
+
+	async test({ assert, component, target, window }) {
+		const inputs = target.querySelectorAll('input');
+		assert.equal(inputs[0].checked, false);
+		assert.equal(inputs[1].checked, true);
+		assert.equal(inputs[2].checked, false);
+
+		const event = new window.Event('change');
+
+		inputs[0].checked = true;
+		await inputs[0].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label>
+				<input type="radio" value="[object Object]"> Alpha
+			</label>
+
+			<label>
+				<input type="radio" value="[object Object]"> Beta
+			</label>
+
+			<label>
+				<input type="radio" value="[object Object]"> Gamma
+			</label>
+
+			<p>Alpha</p>
+		`);
+
+		assert.equal(inputs[0].checked, true);
+		assert.equal(inputs[1].checked, false);
+		assert.equal(inputs[2].checked, false);
+
+		component.selected = values[2];
+		assert.equal(inputs[0].checked, false);
+		assert.equal(inputs[1].checked, false);
+		assert.equal(inputs[2].checked, true);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label>
+				<input type="radio" value="[object Object]"> Alpha
+			</label>
+
+			<label>
+				<input type="radio" value="[object Object]"> Beta
+			</label>
+
+			<label>
+				<input type="radio" value="[object Object]"> Gamma
+			</label>
+
+			<p>Gamma</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-radio-group/main.svelte b/test/runtime/samples/binding-input-radio-group/main.svelte
new file mode 100644
index 0000000000..c24623a860
--- /dev/null
+++ b/test/runtime/samples/binding-input-radio-group/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let selected;
+	export let values;
+</script>
+
+{#each values as value}
+	<label>
+		<input type="radio" value="{value}" bind:group={selected} /> {value.name}
+	</label>
+{/each}
+
+<p>{selected.name}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-range-change-with-max/_config.js b/test/runtime/samples/binding-input-range-change-with-max/_config.js
new file mode 100644
index 0000000000..dc3cf4ce28
--- /dev/null
+++ b/test/runtime/samples/binding-input-range-change-with-max/_config.js
@@ -0,0 +1,33 @@
+export default {
+	html: `
+		<button></button>
+		<input type=range min=0 max=10>
+		<p>10 of 10</p>
+	`,
+
+	ssrHtml: `
+		<button></button>
+		<input type=range min=0 max=10 value=10>
+		<p>10 of 10</p>
+	`,
+
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+		assert.equal(input.value, '10');
+
+		// should not change because max is 10, input range behaviour
+		// seems there is bug in jsdom (HTMLInputElement-impl) which behaviour is different from real browsers
+		// input.value = '20';
+		// assert.equal(input.value, '10');
+
+		const button = target.querySelector('button');
+		await button.dispatchEvent(new window.Event('click'));
+
+		assert.equal(input.value, '20');
+		assert.htmlEqual(target.innerHTML, `
+			<button></button>
+			<input type=range min=0 max=20>
+			<p>20 of 20</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-range-change-with-max/main.svelte b/test/runtime/samples/binding-input-range-change-with-max/main.svelte
new file mode 100644
index 0000000000..b6c856976e
--- /dev/null
+++ b/test/runtime/samples/binding-input-range-change-with-max/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	let value=10;
+	let max=10;
+
+	function change() {
+		value=20;
+		max=20;
+	}
+</script>
+
+<button on:click={change}/>
+<input type=range min=0 max={max} bind:value>
+<p>{value} of {max}</p>
diff --git a/test/runtime/samples/binding-input-range-change/_config.js b/test/runtime/samples/binding-input-range-change/_config.js
new file mode 100644
index 0000000000..f6ec2d9c53
--- /dev/null
+++ b/test/runtime/samples/binding-input-range-change/_config.js
@@ -0,0 +1,38 @@
+export default {
+	props: {
+		count: 42
+	},
+
+	html: `
+		<input type=range>
+		<p>number 42</p>
+	`,
+
+	ssrHtml: `
+		<input type=range value=42>
+		<p>number 42</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const input = target.querySelector('input');
+		assert.equal(input.value, '42');
+
+		const event = new window.Event('change');
+
+		input.value = '43';
+		await input.dispatchEvent(event);
+
+		assert.equal(component.count, 43);
+		assert.htmlEqual(target.innerHTML, `
+			<input type='range'>
+			<p>number 43</p>
+		`);
+
+		component.count = 44;
+		assert.equal(input.value, '44');
+		assert.htmlEqual(target.innerHTML, `
+			<input type='range'>
+			<p>number 44</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-range-change/main.svelte b/test/runtime/samples/binding-input-range-change/main.svelte
new file mode 100644
index 0000000000..9b20b0f02a
--- /dev/null
+++ b/test/runtime/samples/binding-input-range-change/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let count;
+</script>
+
+<input type='range' bind:value={count}>
+<p>{typeof count} {count}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-range/_config.js b/test/runtime/samples/binding-input-range/_config.js
new file mode 100644
index 0000000000..dc6178e088
--- /dev/null
+++ b/test/runtime/samples/binding-input-range/_config.js
@@ -0,0 +1,38 @@
+export default {
+	props: {
+		count: 42
+	},
+
+	html: `
+		<input type=range>
+		<p>number 42</p>
+	`,
+
+	ssrHtml: `
+		<input type=range value=42>
+		<p>number 42</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const input = target.querySelector('input');
+		assert.equal(input.value, '42');
+
+		const event = new window.Event('input');
+
+		input.value = '43';
+		await input.dispatchEvent(event);
+
+		assert.equal(component.count, 43);
+		assert.htmlEqual(target.innerHTML, `
+			<input type='range'>
+			<p>number 43</p>
+		`);
+
+		component.count = 44;
+		assert.equal(input.value, '44');
+		assert.htmlEqual(target.innerHTML, `
+			<input type='range'>
+			<p>number 44</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-range/main.svelte b/test/runtime/samples/binding-input-range/main.svelte
new file mode 100644
index 0000000000..9b20b0f02a
--- /dev/null
+++ b/test/runtime/samples/binding-input-range/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let count;
+</script>
+
+<input type='range' bind:value={count}>
+<p>{typeof count} {count}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-text-contextual-deconflicted/_config.js b/test/runtime/samples/binding-input-text-contextual-deconflicted/_config.js
new file mode 100644
index 0000000000..de4d6325b0
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-contextual-deconflicted/_config.js
@@ -0,0 +1,36 @@
+export default {
+	props: {
+		foo: 'a',
+		items: ['x']
+	},
+
+	html: `
+		<div><input><p>a</p></div>
+		<div><input><p>x</p></div>
+	`,
+
+	ssrHtml: `
+		<div><input value=a><p>a</p></div>
+		<div><input value=x><p>x</p></div>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const inputs = [...target.querySelectorAll('input')];
+		const event = new window.Event('input');
+
+		assert.equal(inputs[0].value, 'a');
+
+		inputs[0].value = 'b';
+		inputs[1].value = 'y';
+		await inputs[0].dispatchEvent(event);
+		await inputs[1].dispatchEvent(event);
+
+		assert.equal(component.foo, 'b');
+		assert.equal(component.items[0], 'y');
+
+		assert.htmlEqual(target.innerHTML, `
+			<div><input><p>b</p></div>
+			<div><input><p>y</p></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-text-contextual-deconflicted/main.svelte b/test/runtime/samples/binding-input-text-contextual-deconflicted/main.svelte
new file mode 100644
index 0000000000..e9ffde2fb9
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-contextual-deconflicted/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let foo;
+	export let items;
+</script>
+
+<div><input bind:value={foo}><p>{foo}</p></div>
+
+{#each items as bar}
+	<div><input bind:value={bar}><p>{bar}</p></div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-text-contextual-reactive/_config.js b/test/runtime/samples/binding-input-text-contextual-reactive/_config.js
new file mode 100644
index 0000000000..a1584c18b8
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-contextual-reactive/_config.js
@@ -0,0 +1,125 @@
+export default {
+	props: {
+		items: [
+			{ done: false, text: 'one' },
+			{ done: true, text: 'two' },
+			{ done: false, text: 'three' }
+		]
+	},
+
+	html: `
+		<div>
+			<input type="checkbox">
+			<input type="text"><p>one</p>
+		</div>
+		<div>
+			<input type="checkbox">
+			<input type="text"><p>two</p>
+		</div>
+		<div>
+			<input type="checkbox">
+			<input type="text"><p>three</p>
+		</div>
+
+		<p>remaining:one / done:two / remaining:three</p>
+	`,
+
+	ssrHtml: `
+		<div>
+			<input type="checkbox">
+			<input type="text" value=one><p>one</p>
+		</div>
+		<div>
+			<input type="checkbox" checked="">
+			<input type="text" value=two><p>two</p>
+		</div>
+		<div>
+			<input type="checkbox">
+			<input type="text" value=three><p>three</p>
+		</div>
+
+		<p>remaining:one / done:two / remaining:three</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		function set_text(i, text) {
+			const input = target.querySelectorAll('input[type="text"]')[i];
+			input.value = text;
+			input.dispatchEvent(new window.Event('input'));
+		}
+
+		function set_done(i, done) {
+			const input = target.querySelectorAll('input[type="checkbox"]')[i];
+			input.checked = done;
+			input.dispatchEvent(new window.Event('change'));
+		}
+
+		component.filter = 'remaining';
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<input type="checkbox">
+				<input type="text"><p>one</p>
+			</div>
+			<div>
+				<input type="checkbox">
+				<input type="text"><p>three</p>
+			</div>
+
+			<p>remaining:one / done:two / remaining:three</p>
+		`);
+
+		await set_text(1, 'four');
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<input type="checkbox">
+				<input type="text"><p>one</p>
+			</div>
+			<div>
+				<input type="checkbox">
+				<input type="text"><p>four</p>
+			</div>
+
+			<p>remaining:one / done:two / remaining:four</p>
+		`);
+
+		assert.deepEqual(component.items, [
+			{ done: false, text: 'one' },
+			{ done: true, text: 'two' },
+			{ done: false, text: 'four' }
+		]);
+
+		await set_done(0, true);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<input type="checkbox">
+				<input type="text"><p>four</p>
+			</div>
+
+			<p>done:one / done:two / remaining:four</p>
+		`);
+
+		assert.deepEqual(component.items, [
+			{ done: true, text: 'one' },
+			{ done: true, text: 'two' },
+			{ done: false, text: 'four' }
+		]);
+
+		component.filter = 'done';
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<input type="checkbox">
+				<input type="text"><p>one</p>
+			</div>
+			<div>
+				<input type="checkbox">
+				<input type="text"><p>two</p>
+			</div>
+
+			<p>done:one / done:two / remaining:four</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-text-contextual-reactive/main.svelte b/test/runtime/samples/binding-input-text-contextual-reactive/main.svelte
new file mode 100644
index 0000000000..7e10199530
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-contextual-reactive/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	export let items;
+	export let filter = 'all';
+
+	$: done = items.filter(item => item.done);
+	$: remaining = items.filter(item => !item.done);
+
+	$: filtered = (
+		filter === 'all' ? items :
+		filter === 'done' ? done :
+		remaining
+	);
+
+	$: summary = items.map(i => `${i.done ? 'done' : 'remaining'}:${i.text}`).join(' / ');
+</script>
+
+{#each filtered as item}
+	<div>
+		<input type="checkbox" bind:checked={item.done}>
+		<input type="text" bind:value={item.text}>
+		<p>{item.text}</p>
+	</div>
+{/each}
+
+<p>{summary}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-text-contextual/_config.js b/test/runtime/samples/binding-input-text-contextual/_config.js
new file mode 100644
index 0000000000..1c66ea7ff5
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-contextual/_config.js
@@ -0,0 +1,69 @@
+export default {
+	props: {
+		items: ['one', 'two', 'three']
+	},
+
+	html: `
+		<div>
+			<input><p>one</p>
+		</div>
+		<div>
+			<input><p>two</p>
+		</div>
+		<div>
+			<input><p>three</p>
+		</div>
+	`,
+
+	ssrHtml: `
+		<div>
+			<input value=one><p>one</p>
+		</div>
+		<div>
+			<input value=two><p>two</p>
+		</div>
+		<div>
+			<input value=three><p>three</p>
+		</div>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const inputs = [...target.querySelectorAll('input')];
+		const items = component.items;
+		const event = new window.Event('input');
+
+		assert.equal(inputs[0].value, 'one');
+
+		inputs[1].value = 'four';
+		await inputs[1].dispatchEvent(event);
+
+		assert.equal(items[1], 'four');
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<input><p>one</p>
+			</div>
+			<div>
+				<input><p>four</p>
+			</div>
+			<div>
+				<input><p>three</p>
+			</div>
+		`);
+
+		items[2] = 'five';
+
+		component.items = items;
+		assert.equal(inputs[2].value, 'five');
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<input><p>one</p>
+			</div>
+			<div>
+				<input><p>four</p>
+			</div>
+			<div>
+				<input><p>five</p>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-text-contextual/main.svelte b/test/runtime/samples/binding-input-text-contextual/main.svelte
new file mode 100644
index 0000000000..a73342ae6b
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-contextual/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let items;
+</script>
+
+{#each items as item}
+	<div><input bind:value={item}><p>{item}</p></div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-text-deconflicted/_config.js b/test/runtime/samples/binding-input-text-deconflicted/_config.js
new file mode 100644
index 0000000000..48a7d2590a
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-deconflicted/_config.js
@@ -0,0 +1,40 @@
+export default {
+	props: {
+		component: {
+			name: 'world'
+		}
+	},
+
+	html: `
+		<h1>Hello world!</h1>
+		<input>
+	`,
+
+	ssrHtml: `
+		<h1>Hello world!</h1>
+		<input value=world>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const input = target.querySelector('input');
+		assert.equal(input.value, 'world');
+
+		const event = new window.Event('input');
+
+		input.value = 'everybody';
+		await input.dispatchEvent(event);
+
+		assert.equal(input.value, 'everybody');
+		assert.htmlEqual(target.innerHTML, `
+			<h1>Hello everybody!</h1>
+			<input>
+		`);
+
+		component.component = { name: 'goodbye' };
+		assert.equal(input.value, 'goodbye');
+		assert.htmlEqual(target.innerHTML, `
+			<h1>Hello goodbye!</h1>
+			<input>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-text-deconflicted/main.svelte b/test/runtime/samples/binding-input-text-deconflicted/main.svelte
new file mode 100644
index 0000000000..8b6f0191ec
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-deconflicted/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let component;
+</script>
+
+<h1>Hello {component.name}!</h1>
+<input bind:value={component.name}/>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-text-deep-computed-dynamic/_config.js b/test/runtime/samples/binding-input-text-deep-computed-dynamic/_config.js
new file mode 100644
index 0000000000..0afbb9d952
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-deep-computed-dynamic/_config.js
@@ -0,0 +1,60 @@
+export default {
+	props: {
+		prop: 'bar',
+		obj: {
+			foo: 'a',
+			bar: 'b',
+			baz: 'c'
+		}
+	},
+
+	html: `
+		<input>
+		<pre>{"foo":"a","bar":"b","baz":"c"}</pre>
+	`,
+
+	ssrHtml: `
+		<input value=b>
+		<pre>{"foo":"a","bar":"b","baz":"c"}</pre>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const input = target.querySelector('input');
+		const event = new window.Event('input');
+
+		assert.equal(input.value, 'b');
+
+		// edit bar
+		input.value = 'e';
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<pre>{"foo":"a","bar":"e","baz":"c"}</pre>
+		`);
+
+		// edit baz
+		component.prop = 'baz';
+		assert.equal(input.value, 'c');
+
+		input.value = 'f';
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<pre>{"foo":"a","bar":"e","baz":"f"}</pre>
+		`);
+
+		// edit foo
+		component.prop = 'foo';
+		assert.equal(input.value, 'a');
+
+		input.value = 'd';
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<pre>{"foo":"d","bar":"e","baz":"f"}</pre>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-text-deep-computed-dynamic/main.svelte b/test/runtime/samples/binding-input-text-deep-computed-dynamic/main.svelte
new file mode 100644
index 0000000000..abd5da8a84
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-deep-computed-dynamic/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let obj;
+	export let prop;
+</script>
+
+<input bind:value={obj[prop]}>
+<pre>{JSON.stringify(obj)}</pre>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-text-deep-computed/_config.js b/test/runtime/samples/binding-input-text-deep-computed/_config.js
new file mode 100644
index 0000000000..3a85d50d76
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-deep-computed/_config.js
@@ -0,0 +1,44 @@
+export default {
+	props: {
+		prop: 'name',
+		user: {
+			name: 'alice'
+		}
+	},
+
+	html: `
+		<input>
+		<p>hello alice</p>
+	`,
+
+	ssrHtml: `
+		<input value=alice>
+		<p>hello alice</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const input = target.querySelector('input');
+
+		assert.equal(input.value, 'alice');
+
+		const event = new window.Event('input');
+
+		input.value = 'bob';
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>hello bob</p>
+		`);
+
+		const user = component.user;
+		user.name = 'carol';
+
+		component.user = user;
+		assert.equal(input.value, 'carol');
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>hello carol</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-text-deep-computed/main.svelte b/test/runtime/samples/binding-input-text-deep-computed/main.svelte
new file mode 100644
index 0000000000..29fd1f0511
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-deep-computed/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let user;
+	export let prop;
+</script>
+
+<input bind:value={user[prop]}>
+<p>hello {user.name}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-text-deep-contextual-computed-dynamic/_config.js b/test/runtime/samples/binding-input-text-deep-contextual-computed-dynamic/_config.js
new file mode 100644
index 0000000000..627ef5f15e
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-deep-contextual-computed-dynamic/_config.js
@@ -0,0 +1,62 @@
+export default {
+	props: {
+		prop: 'bar',
+		objects: [
+			{
+				foo: 'a',
+				bar: 'b',
+				baz: 'c'
+			}
+		]
+	},
+
+	html: `
+		<input>
+		<pre>{"foo":"a","bar":"b","baz":"c"}</pre>
+	`,
+
+	ssrHtml: `
+		<input value=b>
+		<pre>{"foo":"a","bar":"b","baz":"c"}</pre>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const input = target.querySelector('input');
+		const event = new window.Event('input');
+
+		assert.equal(input.value, 'b');
+
+		// edit bar
+		input.value = 'e';
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<pre>{"foo":"a","bar":"e","baz":"c"}</pre>
+		`);
+
+		// edit baz
+		component.prop = 'baz';
+		assert.equal(input.value, 'c');
+
+		input.value = 'f';
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<pre>{"foo":"a","bar":"e","baz":"f"}</pre>
+		`);
+
+		// edit foo
+		component.prop = 'foo';
+		assert.equal(input.value, 'a');
+
+		input.value = 'd';
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<pre>{"foo":"d","bar":"e","baz":"f"}</pre>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-text-deep-contextual-computed-dynamic/main.svelte b/test/runtime/samples/binding-input-text-deep-contextual-computed-dynamic/main.svelte
new file mode 100644
index 0000000000..163f6fbb18
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-deep-contextual-computed-dynamic/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let objects;
+	export let prop;
+</script>
+
+{#each objects as obj}
+	<input bind:value={obj[prop]}>
+	<pre>{JSON.stringify(obj)}</pre>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-text-deep-contextual/_config.js b/test/runtime/samples/binding-input-text-deep-contextual/_config.js
new file mode 100644
index 0000000000..cc80d38042
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-deep-contextual/_config.js
@@ -0,0 +1,49 @@
+export default {
+	props: {
+		items: [
+			{ description: 'one' },
+			{ description: 'two' },
+			{ description: 'three' }
+		]
+	},
+
+	html: `
+		<div><input><p>one</p></div>
+		<div><input><p>two</p></div>
+		<div><input><p>three</p></div>
+	`,
+
+	ssrHtml: `
+		<div><input value=one><p>one</p></div>
+		<div><input value=two><p>two</p></div>
+		<div><input value=three><p>three</p></div>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const inputs = [...target.querySelectorAll('input')];
+
+		assert.equal(inputs[0].value, 'one');
+
+		const event = new window.Event('input');
+
+		inputs[1].value = 'four';
+		await inputs[1].dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div><input><p>one</p></div>
+			<div><input><p>four</p></div>
+			<div><input><p>three</p></div>
+		`);
+
+		const items = component.items;
+		items[2].description = 'five';
+
+		component.items = items;
+		assert.equal(inputs[2].value, 'five');
+		assert.htmlEqual(target.innerHTML, `
+			<div><input><p>one</p></div>
+			<div><input><p>four</p></div>
+			<div><input><p>five</p></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-text-deep-contextual/main.svelte b/test/runtime/samples/binding-input-text-deep-contextual/main.svelte
new file mode 100644
index 0000000000..fbc019d669
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-deep-contextual/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let items;
+</script>
+
+{#each items as item}
+	<div><input bind:value={item.description}><p>{item.description}</p></div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-text-deep/_config.js b/test/runtime/samples/binding-input-text-deep/_config.js
new file mode 100644
index 0000000000..35443e9073
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-deep/_config.js
@@ -0,0 +1,43 @@
+export default {
+	props: {
+		user: {
+			name: 'alice'
+		}
+	},
+
+	html: `
+		<input>
+		<p>hello alice</p>
+	`,
+
+	ssrHtml: `
+		<input value=alice>
+		<p>hello alice</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const input = target.querySelector('input');
+
+		assert.equal(input.value, 'alice');
+
+		const event = new window.Event('input');
+
+		input.value = 'bob';
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>hello bob</p>
+		`);
+
+		const user = component.user;
+		user.name = 'carol';
+
+		component.user = user;
+		assert.equal(input.value, 'carol');
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>hello carol</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-text-deep/main.svelte b/test/runtime/samples/binding-input-text-deep/main.svelte
new file mode 100644
index 0000000000..f517e08c39
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-deep/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let user;
+</script>
+
+<input bind:value={user.name}>
+<p>hello {user.name}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-text-undefined/_config.js b/test/runtime/samples/binding-input-text-undefined/_config.js
new file mode 100644
index 0000000000..82cada3b15
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-undefined/_config.js
@@ -0,0 +1,30 @@
+export default {
+	html: `
+		<input>
+	`,
+
+	ssrHtml: `
+		<input>
+	`,
+
+	async test({ assert, component, target }) {
+		const input = target.querySelector('input');
+		assert.equal(input.value, '');
+
+		component.x = null;
+		assert.equal(input.value, '');
+
+		component.x = undefined;
+		assert.equal(input.value, '');
+
+		component.x = 'string';
+		component.x = undefined;
+		assert.equal(input.value, '');
+
+		component.x = 0;
+		assert.equal(input.value, '0');
+
+		component.x = undefined;
+		assert.equal(input.value, '');
+	}
+};
diff --git a/test/runtime/samples/binding-input-text-undefined/main.svelte b/test/runtime/samples/binding-input-text-undefined/main.svelte
new file mode 100644
index 0000000000..b4c2a84fd2
--- /dev/null
+++ b/test/runtime/samples/binding-input-text-undefined/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x;
+</script>
+
+<input bind:value={x}>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-text/_config.js b/test/runtime/samples/binding-input-text/_config.js
new file mode 100644
index 0000000000..52d8e44902
--- /dev/null
+++ b/test/runtime/samples/binding-input-text/_config.js
@@ -0,0 +1,37 @@
+export default {
+	props: {
+		name: 'world'
+	},
+
+	html: `
+		<input>
+		<p>hello world</p>
+	`,
+
+	ssrHtml: `
+		<input value="world">
+		<p>hello world</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const input = target.querySelector('input');
+		assert.equal(input.value, 'world');
+
+		const event = new window.Event('input');
+
+		input.value = 'everybody';
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>hello everybody</p>
+		`);
+
+		component.name = 'goodbye';
+		assert.equal(input.value, 'goodbye');
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>hello goodbye</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-input-text/main.svelte b/test/runtime/samples/binding-input-text/main.svelte
new file mode 100644
index 0000000000..558dc9d538
--- /dev/null
+++ b/test/runtime/samples/binding-input-text/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let name;
+</script>
+
+<input bind:value={name}>
+<p>hello {name}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-input-with-event/_config.js b/test/runtime/samples/binding-input-with-event/_config.js
new file mode 100644
index 0000000000..61cb90ed97
--- /dev/null
+++ b/test/runtime/samples/binding-input-with-event/_config.js
@@ -0,0 +1,18 @@
+export default {
+	props: {
+		a: 42
+	},
+
+	test({ assert, component, target, window }) {
+		const input = target.querySelector('input');
+		assert.equal(input.value, '42');
+
+		const event = new window.Event('input');
+
+		input.value = 43;
+		input.dispatchEvent(event);
+
+		assert.equal(input.value, '43');
+		assert.equal(component.a, 43);
+	}
+};
diff --git a/test/runtime/samples/binding-input-with-event/main.svelte b/test/runtime/samples/binding-input-with-event/main.svelte
new file mode 100644
index 0000000000..944099d370
--- /dev/null
+++ b/test/runtime/samples/binding-input-with-event/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let a;
+	export let b;
+</script>
+
+<input bind:value={a} on:input='{() => b = 0}'>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-select-implicit-option-value/_config.js b/test/runtime/samples/binding-select-implicit-option-value/_config.js
new file mode 100644
index 0000000000..1266602a47
--- /dev/null
+++ b/test/runtime/samples/binding-select-implicit-option-value/_config.js
@@ -0,0 +1,40 @@
+export default {
+	props: {
+		values: [1, 2, 3],
+		foo: 2
+	},
+
+	html: `
+		<select>
+			<option value='1'>1</option>
+			<option value='2'>2</option>
+			<option value='3'>3</option>
+		</select>
+
+		<p>foo: 2</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const select = target.querySelector('select');
+		const options = [...target.querySelectorAll('option')];
+
+		assert.ok(options[1].selected);
+		assert.equal(component.foo, 2);
+
+		const change = new window.Event('change');
+
+		options[2].selected = true;
+		await select.dispatchEvent(change);
+
+		assert.equal(component.foo, 3);
+		assert.htmlEqual( target.innerHTML, `
+			<select>
+				<option value='1'>1</option>
+				<option value='2'>2</option>
+				<option value='3'>3</option>
+			</select>
+
+			<p>foo: 3</p>
+		` );
+	}
+};
diff --git a/test/runtime/samples/binding-select-implicit-option-value/main.svelte b/test/runtime/samples/binding-select-implicit-option-value/main.svelte
new file mode 100644
index 0000000000..a6078d13c6
--- /dev/null
+++ b/test/runtime/samples/binding-select-implicit-option-value/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let foo;
+	export let values;
+</script>
+
+<select bind:value={foo}>
+	{#each values as v}
+		<option>{v}</option>
+	{/each}
+</select>
+
+<p>foo: {foo}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-select-in-each-block/_config.js b/test/runtime/samples/binding-select-in-each-block/_config.js
new file mode 100644
index 0000000000..80ea375b78
--- /dev/null
+++ b/test/runtime/samples/binding-select-in-each-block/_config.js
@@ -0,0 +1,30 @@
+export default {
+	html: `
+		<select>
+			<option value='hullo'>Hullo</option>
+			<option value='world'>World</option>
+		</select>
+
+		<select>
+			<option value='hullo'>Hullo</option>
+			<option value='world'>World</option>
+		</select>
+	`,
+
+	props: {
+		items: [{ value: 'hullo' }, { value: 'world' }]
+	},
+
+	test({ assert, component, target, window }) {
+		const selects = [...target.querySelectorAll('select')];
+
+		const change = new window.Event('change');
+
+		selects[1].options[0].selected = true;
+		selects[1].dispatchEvent(change);
+
+		assert.deepEqual(component.items, [
+			{ value: 'hullo' }, { value: 'hullo' }
+		]);
+	}
+};
diff --git a/test/runtime/samples/binding-select-in-each-block/main.svelte b/test/runtime/samples/binding-select-in-each-block/main.svelte
new file mode 100644
index 0000000000..f9d771a8da
--- /dev/null
+++ b/test/runtime/samples/binding-select-in-each-block/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let items;
+</script>
+{#each items as item}
+	<select bind:value={item.value}>
+		<option value="hullo">Hullo</option>
+		<option value="world">World</option>
+	</select>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/binding-select-in-yield/Modal.svelte b/test/runtime/samples/binding-select-in-yield/Modal.svelte
new file mode 100644
index 0000000000..b106e7b1d7
--- /dev/null
+++ b/test/runtime/samples/binding-select-in-yield/Modal.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let hidden = true;
+
+	export function toggle() {
+		hidden = !hidden;
+	}
+</script>
+
+{#if !hidden}
+	<slot></slot>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/binding-select-in-yield/_config.js b/test/runtime/samples/binding-select-in-yield/_config.js
new file mode 100644
index 0000000000..042fba832b
--- /dev/null
+++ b/test/runtime/samples/binding-select-in-yield/_config.js
@@ -0,0 +1,65 @@
+export default {
+	html: '',
+
+	props: {
+		letter: 'b'
+	},
+
+	async test({ assert, component, target, window }) {
+		await component.modal.toggle();
+
+		assert.htmlEqual(target.innerHTML, `
+			<span>b</span>
+
+			<select>
+				<option value='a'>a</option>
+				<option value='b'>b</option>
+				<option value='c'>c</option>
+			</select>
+		`);
+
+		let select = target.querySelector('select');
+		const change = new window.MouseEvent('change');
+
+		select.options[2].selected = true;
+		await select.dispatchEvent(change);
+		assert.equal(component.letter, 'c');
+
+		assert.deepEqual(Array.from(select.options).map(o => o.selected), [
+			false,
+			false,
+			true
+		]);
+
+		assert.htmlEqual(target.innerHTML, `
+			<span>c</span>
+
+			<select>
+				<option value='a'>a</option>
+				<option value='b'>b</option>
+				<option value='c'>c</option>
+			</select>
+		`);
+
+		await component.modal.toggle();
+		await component.modal.toggle();
+
+		select = target.querySelector('select');
+
+		assert.deepEqual(Array.from(select.options).map(o => o.selected), [
+			false,
+			false,
+			true
+		]);
+
+		assert.htmlEqual(target.innerHTML, `
+			<span>c</span>
+
+			<select>
+				<option value='a'>a</option>
+				<option value='b'>b</option>
+				<option value='c'>c</option>
+			</select>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-select-in-yield/main.svelte b/test/runtime/samples/binding-select-in-yield/main.svelte
new file mode 100644
index 0000000000..2d3ef28f28
--- /dev/null
+++ b/test/runtime/samples/binding-select-in-yield/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Modal from './Modal.svelte';
+
+	export let modal;
+	export let letter;
+	export let letters = ['a', 'b', 'c'];
+</script>
+
+<Modal bind:this={modal}>
+	<span>{letter}</span>
+	<select bind:value={letter}>
+		{#each letters as letter}
+			<option value="{letter}">{letter}</option>
+		{/each}
+	</select>
+</Modal>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-select-initial-value-undefined/_config.js b/test/runtime/samples/binding-select-initial-value-undefined/_config.js
new file mode 100644
index 0000000000..27bac7ef77
--- /dev/null
+++ b/test/runtime/samples/binding-select-initial-value-undefined/_config.js
@@ -0,0 +1,24 @@
+export default {
+	skip_if_ssr: true, // TODO would be nice to fix this in SSR as well
+
+	html: `
+		<p>selected: a</p>
+
+		<select>
+			<option value='a'>a</option>
+			<option value='b'>b</option>
+			<option value='c'>c</option>
+		</select>
+
+		<p>selected: a</p>
+	`,
+
+	test({ assert, component, target }) {
+		assert.equal(component.selected, 'a');
+		const select = target.querySelector('select');
+		const options = [...target.querySelectorAll('option')];
+
+		assert.equal(select.value, 'a');
+		assert.ok(options[0].selected);
+	}
+};
diff --git a/test/runtime/samples/binding-select-initial-value-undefined/main.svelte b/test/runtime/samples/binding-select-initial-value-undefined/main.svelte
new file mode 100644
index 0000000000..5cb1e9fae7
--- /dev/null
+++ b/test/runtime/samples/binding-select-initial-value-undefined/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let selected;
+</script>
+
+<p>selected: {selected}</p>
+
+<select bind:value={selected}>
+	<option>a</option>
+	<option>b</option>
+	<option>c</option>
+</select>
+
+<p>selected: {selected}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-select-initial-value/_config.js b/test/runtime/samples/binding-select-initial-value/_config.js
new file mode 100644
index 0000000000..5dbd761b61
--- /dev/null
+++ b/test/runtime/samples/binding-select-initial-value/_config.js
@@ -0,0 +1,25 @@
+export default {
+	html: `
+		<p>selected: b</p>
+
+		<select>
+			<option value='a'>a</option>
+			<option value='b'>b</option>
+			<option value='c'>c</option>
+		</select>
+
+		<p>selected: b</p>
+	`,
+
+	props: {
+		selected: 'b'
+	},
+
+	test({ assert, target }) {
+		const select = target.querySelector('select');
+		const options = [...target.querySelectorAll('option')];
+
+		assert.equal(select.value, 'b');
+		assert.ok(options[1].selected);
+	}
+};
diff --git a/test/runtime/samples/binding-select-initial-value/main.svelte b/test/runtime/samples/binding-select-initial-value/main.svelte
new file mode 100644
index 0000000000..5cb1e9fae7
--- /dev/null
+++ b/test/runtime/samples/binding-select-initial-value/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let selected;
+</script>
+
+<p>selected: {selected}</p>
+
+<select bind:value={selected}>
+	<option>a</option>
+	<option>b</option>
+	<option>c</option>
+</select>
+
+<p>selected: {selected}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-select-late-2/_config.js b/test/runtime/samples/binding-select-late-2/_config.js
new file mode 100644
index 0000000000..f4b0088fb9
--- /dev/null
+++ b/test/runtime/samples/binding-select-late-2/_config.js
@@ -0,0 +1,29 @@
+export default {
+	props: {
+		items: [],
+		selected: 'two'
+	},
+
+	html: `
+		<select></select>
+		<p>selected: two</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.items = [ 'one', 'two', 'three' ];
+
+		const options = target.querySelectorAll('option');
+		assert.ok(!options[0].selected);
+		assert.ok(options[1].selected);
+		assert.ok(!options[2].selected);
+
+		assert.htmlEqual(target.innerHTML, `
+			<select>
+				<option value='one'>one</option>
+				<option value='two'>two</option>
+				<option value='three'>three</option>
+			</select>
+			<p>selected: two</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-select-late-2/main.svelte b/test/runtime/samples/binding-select-late-2/main.svelte
new file mode 100644
index 0000000000..52cc14528a
--- /dev/null
+++ b/test/runtime/samples/binding-select-late-2/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let selected;
+	export let items;
+</script>
+
+<select bind:value={selected}>
+	{#each items as item}
+		<option>{item}</option>
+	{/each}
+</select>
+
+<p>selected: {selected || 'nothing'}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-select-late-3/_config.js b/test/runtime/samples/binding-select-late-3/_config.js
new file mode 100644
index 0000000000..42c45d1366
--- /dev/null
+++ b/test/runtime/samples/binding-select-late-3/_config.js
@@ -0,0 +1,34 @@
+export default {
+	props: {
+		items: [],
+		selected: 'two'
+	},
+
+	html: `
+		<select></select>
+		<p>selected: two</p>
+	`,
+
+	ssrHtml: `
+		<select value="two"></select>
+		<p>selected: two</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.items = [ 'one', 'two', 'three' ];
+
+		const options = target.querySelectorAll('option');
+		assert.ok(!options[0].selected);
+		assert.ok(options[1].selected);
+		assert.ok(!options[2].selected);
+
+		assert.htmlEqual(target.innerHTML, `
+			<select>
+				<option value='one'>one</option>
+				<option value='two'>two</option>
+				<option value='three'>three</option>
+			</select>
+			<p>selected: two</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-select-late-3/main.svelte b/test/runtime/samples/binding-select-late-3/main.svelte
new file mode 100644
index 0000000000..ec9ac8d345
--- /dev/null
+++ b/test/runtime/samples/binding-select-late-3/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let selected;
+	export let items;
+</script>
+
+<select value={selected} on:blur={e => selected = e.target.value}>
+	{#each items as item}
+		<option>{item}</option>
+	{/each}
+</select>
+
+<p>selected: {selected || 'nothing'}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-select-late/_config.js b/test/runtime/samples/binding-select-late/_config.js
new file mode 100644
index 0000000000..98f53740af
--- /dev/null
+++ b/test/runtime/samples/binding-select-late/_config.js
@@ -0,0 +1,30 @@
+export default {
+	props: {
+		items: [],
+		selected: null
+	},
+
+	html: `
+		<select></select>
+		<p>selected: nothing</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.items = [ 'one', 'two', 'three' ];
+		component.selected = 'two';
+
+		const options = target.querySelectorAll('option');
+		assert.ok(!options[0].selected);
+		assert.ok(options[1].selected);
+		assert.ok(!options[2].selected);
+
+		assert.htmlEqual(target.innerHTML, `
+			<select>
+				<option value='one'>one</option>
+				<option value='two'>two</option>
+				<option value='three'>three</option>
+			</select>
+			<p>selected: two</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-select-late/main.svelte b/test/runtime/samples/binding-select-late/main.svelte
new file mode 100644
index 0000000000..52cc14528a
--- /dev/null
+++ b/test/runtime/samples/binding-select-late/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let selected;
+	export let items;
+</script>
+
+<select bind:value={selected}>
+	{#each items as item}
+		<option>{item}</option>
+	{/each}
+</select>
+
+<p>selected: {selected || 'nothing'}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-select-multiple/_config.js b/test/runtime/samples/binding-select-multiple/_config.js
new file mode 100644
index 0000000000..70a5620d05
--- /dev/null
+++ b/test/runtime/samples/binding-select-multiple/_config.js
@@ -0,0 +1,67 @@
+export default {
+
+	props: {
+		selected: [ 'two', 'three' ]
+	},
+
+	html: `
+		<select multiple>
+			<option value="one">one</option>
+			<option value="two">two</option>
+			<option value="three">three</option>
+		</select>
+
+		<p>selected: two, three</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const select = target.querySelector( 'select' );
+		const options = [ ...target.querySelectorAll( 'option' ) ];
+
+		const change = new window.Event( 'change' );
+
+		options[1].selected = false;
+		await select.dispatchEvent( change );
+
+		assert.deepEqual( component.selected, [ 'three' ] );
+		assert.htmlEqual( target.innerHTML, `
+			<select multiple>
+				<option value="one">one</option>
+				<option value="two">two</option>
+				<option value="three">three</option>
+			</select>
+
+			<p>selected: three</p>
+		` );
+
+		options[0].selected = true;
+		await select.dispatchEvent( change );
+
+		assert.deepEqual( component.selected, [ 'one', 'three' ] );
+		assert.htmlEqual( target.innerHTML, `
+			<select multiple>
+				<option value="one">one</option>
+				<option value="two">two</option>
+				<option value="three">three</option>
+			</select>
+
+			<p>selected: one, three</p>
+		` );
+
+		component.selected = [ 'one', 'two' ];
+
+		assert.ok( options[0].selected );
+		assert.ok( options[1].selected );
+		assert.ok( !options[2].selected );
+
+		assert.htmlEqual( target.innerHTML, `
+			<select multiple>
+				<option value="one">one</option>
+				<option value="two">two</option>
+				<option value="three">three</option>
+			</select>
+
+			<p>selected: one, two</p>
+		` );
+	}
+};
diff --git a/test/runtime/samples/binding-select-multiple/main.svelte b/test/runtime/samples/binding-select-multiple/main.svelte
new file mode 100644
index 0000000000..2710d3461d
--- /dev/null
+++ b/test/runtime/samples/binding-select-multiple/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let selected;
+</script>
+
+<select multiple bind:value={selected}>
+	<option>one</option>
+	<option>two</option>
+	<option>three</option>
+</select>
+
+<p>selected: {selected.join( ', ' )}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-select-optgroup/_config.js b/test/runtime/samples/binding-select-optgroup/_config.js
new file mode 100644
index 0000000000..03ad3e3280
--- /dev/null
+++ b/test/runtime/samples/binding-select-optgroup/_config.js
@@ -0,0 +1,49 @@
+export default {
+
+	ssrHtml: `
+		<h1>Hello undefined!</h1>
+
+		<select>
+			<option value="Harry">Harry</option>
+			<optgroup label="Group">
+				<option value="World">World</option>
+			</optgroup>
+		</select>
+	`,
+
+	html: `
+		<h1>Hello Harry!</h1>
+
+		<select>
+			<option value="Harry">Harry</option>
+			<optgroup label="Group">
+				<option value="World">World</option>
+			</optgroup>
+		</select>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const select = target.querySelector('select');
+		const options = [...target.querySelectorAll('option')];
+
+		assert.deepEqual(options, [...select.options]);
+		assert.equal(component.name, 'Harry');
+
+		const change = new window.Event('change');
+
+		options[1].selected = true;
+		await select.dispatchEvent(change);
+
+		assert.equal(component.name, 'World');
+		assert.htmlEqual(target.innerHTML, `
+			<h1>Hello World!</h1>
+
+			<select>
+				<option value="Harry">Harry</option>
+				<optgroup label="Group">
+					<option value="World">World</option>
+				</optgroup>
+			</select>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-select-optgroup/main.svelte b/test/runtime/samples/binding-select-optgroup/main.svelte
new file mode 100644
index 0000000000..faea77cd57
--- /dev/null
+++ b/test/runtime/samples/binding-select-optgroup/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let name;
+</script>
+
+<h1>Hello {name}!</h1>
+
+<select bind:value={name}>
+	<option value="Harry">Harry</option>
+	<optgroup label="Group">
+		<option value="World">World</option>
+	</optgroup>
+</select>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-select-unmatched/_config.js b/test/runtime/samples/binding-select-unmatched/_config.js
new file mode 100644
index 0000000000..99e7d23927
--- /dev/null
+++ b/test/runtime/samples/binding-select-unmatched/_config.js
@@ -0,0 +1,60 @@
+export default {
+	html: `
+		<p>selected: null</p>
+
+		<select>
+			<option value='a'>a</option>
+			<option value='b'>b</option>
+			<option value='c'>c</option>
+		</select>
+
+		<p>selected: null</p>
+	`,
+
+	async test({ assert, component, target }) {
+		const select = target.querySelector('select');
+		const options = [...target.querySelectorAll('option')];
+
+		assert.equal(component.selected, null);
+
+		// no option should be selected since none of the options matches the bound value
+		assert.equal(select.value, '');
+		assert.equal(select.selectedIndex, -1);
+		assert.ok(!options[0].selected);
+
+		component.selected = 'a'; // first option should now be selected
+		assert.equal(select.value, 'a');
+		assert.ok(options[0].selected);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>selected: a</p>
+
+			<select>
+				<option value='a'>a</option>
+				<option value='b'>b</option>
+				<option value='c'>c</option>
+			</select>
+
+			<p>selected: a</p>
+		`);
+
+		component.selected = 'd'; // doesn't match an option
+
+		// now no option should be selected again
+		assert.equal(select.value, '');
+		assert.equal(select.selectedIndex, -1);
+		assert.ok(!options[0].selected);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>selected: d</p>
+
+			<select>
+				<option value='a'>a</option>
+				<option value='b'>b</option>
+				<option value='c'>c</option>
+			</select>
+
+			<p>selected: d</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-select-unmatched/main.svelte b/test/runtime/samples/binding-select-unmatched/main.svelte
new file mode 100644
index 0000000000..20e13f4765
--- /dev/null
+++ b/test/runtime/samples/binding-select-unmatched/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	// set as null so no option will be selected by default
+	export let selected = null;
+</script>
+
+<p>selected: {selected}</p>
+
+<select bind:value={selected}>
+	<option>a</option>
+	<option>b</option>
+	<option>c</option>
+</select>
+
+<p>selected: {selected}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-select/_config.js b/test/runtime/samples/binding-select/_config.js
new file mode 100644
index 0000000000..6cdef2651a
--- /dev/null
+++ b/test/runtime/samples/binding-select/_config.js
@@ -0,0 +1,45 @@
+export default {
+	html: `
+		<p>selected: one</p>
+
+		<select>
+			<option value='one'>one</option>
+			<option value='two'>two</option>
+			<option value='three'>three</option>
+		</select>
+
+		<p>selected: one</p>
+	`,
+
+	props: {
+		selected: 'one'
+	},
+
+	async test({ assert, component, target, window }) {
+		const select = target.querySelector('select');
+		const options = [...target.querySelectorAll('option')];
+
+		assert.deepEqual(options, [...select.options]);
+		assert.equal(component.selected, 'one');
+
+		const change = new window.Event('change');
+
+		options[1].selected = true;
+		await select.dispatchEvent(change);
+
+		assert.equal(component.selected, 'two');
+		assert.htmlEqual(target.innerHTML, `
+			<p>selected: two</p>
+
+			<select>
+				<option value='one'>one</option>
+				<option value='two'>two</option>
+				<option value='three'>three</option>
+			</select>
+
+			<p>selected: two</p>
+		`);
+
+		component.selected = 'three';
+	}
+};
diff --git a/test/runtime/samples/binding-select/main.svelte b/test/runtime/samples/binding-select/main.svelte
new file mode 100644
index 0000000000..bf7eaecc84
--- /dev/null
+++ b/test/runtime/samples/binding-select/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let selected;
+</script>
+
+<p>selected: {selected}</p>
+
+<select bind:value={selected}>
+	<option>one</option>
+	<option>two</option>
+	<option>three</option>
+</select>
+
+<p>selected: {selected}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-store-deep/_config.js b/test/runtime/samples/binding-store-deep/_config.js
new file mode 100644
index 0000000000..c0f4f63578
--- /dev/null
+++ b/test/runtime/samples/binding-store-deep/_config.js
@@ -0,0 +1,41 @@
+export default {
+	html: `
+		<input>
+		<p>hello world</p>
+	`,
+
+	ssrHtml: `
+		<input value="world">
+		<p>hello world</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const input = target.querySelector('input');
+		assert.equal(input.value, 'world');
+
+		const event = new window.Event('input');
+
+		const names = [];
+		const unsubscribe = component.user.subscribe(user => {
+			names.push(user.name);
+		});
+
+		input.value = 'everybody';
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>hello everybody</p>
+		`);
+
+		await component.user.set({ name: 'goodbye' });
+		assert.equal(input.value, 'goodbye');
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>hello goodbye</p>
+		`);
+
+		assert.deepEqual(names, ['world', 'everybody', 'goodbye']);
+		unsubscribe();
+	}
+};
diff --git a/test/runtime/samples/binding-store-deep/main.svelte b/test/runtime/samples/binding-store-deep/main.svelte
new file mode 100644
index 0000000000..3bfd8d5717
--- /dev/null
+++ b/test/runtime/samples/binding-store-deep/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	export const user = writable({ name: 'world' });
+</script>
+
+<input bind:value={$user.name}>
+<p>hello {$user.name}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-store/_config.js b/test/runtime/samples/binding-store/_config.js
new file mode 100644
index 0000000000..6e7a70878a
--- /dev/null
+++ b/test/runtime/samples/binding-store/_config.js
@@ -0,0 +1,41 @@
+export default {
+	html: `
+		<input>
+		<p>hello world</p>
+	`,
+
+	ssrHtml: `
+		<input value="world">
+		<p>hello world</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const input = target.querySelector('input');
+		assert.equal(input.value, 'world');
+
+		const event = new window.Event('input');
+
+		const names = [];
+		const unsubscribe = component.name.subscribe(name => {
+			names.push(name);
+		});
+
+		input.value = 'everybody';
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>hello everybody</p>
+		`);
+
+		await component.name.set('goodbye');
+		assert.equal(input.value, 'goodbye');
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>hello goodbye</p>
+		`);
+
+		assert.deepEqual(names, ['world', 'everybody', 'goodbye']);
+		unsubscribe();
+	}
+};
diff --git a/test/runtime/samples/binding-store/main.svelte b/test/runtime/samples/binding-store/main.svelte
new file mode 100644
index 0000000000..cfcdb0cf20
--- /dev/null
+++ b/test/runtime/samples/binding-store/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	export const name = writable('world');
+</script>
+
+<input bind:value={$name}>
+<p>hello {$name}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-textarea/_config.js b/test/runtime/samples/binding-textarea/_config.js
new file mode 100644
index 0000000000..70646e5e4b
--- /dev/null
+++ b/test/runtime/samples/binding-textarea/_config.js
@@ -0,0 +1,37 @@
+export default {
+	props: {
+		value: 'some text'
+	},
+
+	html: `
+		<textarea></textarea>
+		<p>some text</p>
+	`,
+
+	ssrHtml: `
+		<textarea>some text</textarea>
+		<p>some text</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const textarea = target.querySelector('textarea');
+		assert.equal(textarea.value, 'some text');
+
+		const event = new window.Event('input');
+
+		textarea.value = 'hello';
+		await textarea.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<textarea></textarea>
+			<p>hello</p>
+		`);
+
+		component.value = 'goodbye';
+		assert.equal(textarea.value, 'goodbye');
+		assert.htmlEqual(target.innerHTML, `
+			<textarea></textarea>
+			<p>goodbye</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-textarea/main.svelte b/test/runtime/samples/binding-textarea/main.svelte
new file mode 100644
index 0000000000..cecddf624c
--- /dev/null
+++ b/test/runtime/samples/binding-textarea/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let value;
+</script>
+
+<textarea bind:value></textarea>
+<p>{value}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-this-and-value/_config.js b/test/runtime/samples/binding-this-and-value/_config.js
new file mode 100644
index 0000000000..70cc8d4110
--- /dev/null
+++ b/test/runtime/samples/binding-this-and-value/_config.js
@@ -0,0 +1,24 @@
+export default {
+	html: `
+		<input>
+		<p>value: initial</p>
+	`,
+
+	ssrHtml: `
+		<input value="initial">
+		<p>value: initial</p>
+	`,
+
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+		const event = new window.Event('input');
+
+		input.value = 'changed';
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>value: changed</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-this-and-value/main.svelte b/test/runtime/samples/binding-this-and-value/main.svelte
new file mode 100644
index 0000000000..c56509eb7a
--- /dev/null
+++ b/test/runtime/samples/binding-this-and-value/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let node;
+	export let value = 'initial';
+</script>
+
+<input bind:this={node} bind:value>
+<p>value: {value}</p>
diff --git a/test/runtime/samples/binding-this-component-computed-key/Foo.svelte b/test/runtime/samples/binding-this-component-computed-key/Foo.svelte
new file mode 100644
index 0000000000..066a48b65e
--- /dev/null
+++ b/test/runtime/samples/binding-this-component-computed-key/Foo.svelte
@@ -0,0 +1 @@
+<div>foo</div>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-this-component-computed-key/_config.js b/test/runtime/samples/binding-this-component-computed-key/_config.js
new file mode 100644
index 0000000000..415d2e641c
--- /dev/null
+++ b/test/runtime/samples/binding-this-component-computed-key/_config.js
@@ -0,0 +1,8 @@
+export default {
+	skip_if_ssr: true,
+
+	html: `
+		<div>foo</div>
+		<div>has foo: true</div>
+	`
+};
diff --git a/test/runtime/samples/binding-this-component-computed-key/main.svelte b/test/runtime/samples/binding-this-component-computed-key/main.svelte
new file mode 100644
index 0000000000..af450ea1fe
--- /dev/null
+++ b/test/runtime/samples/binding-this-component-computed-key/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Foo from './Foo.svelte';
+	export let foo = {};
+</script>
+
+<Foo bind:this={foo['computed']}/>
+<div>
+	has foo: {!!foo.computed}
+</div>
diff --git a/test/runtime/samples/binding-this-component-each-block-value/Foo.svelte b/test/runtime/samples/binding-this-component-each-block-value/Foo.svelte
new file mode 100644
index 0000000000..066a48b65e
--- /dev/null
+++ b/test/runtime/samples/binding-this-component-each-block-value/Foo.svelte
@@ -0,0 +1 @@
+<div>foo</div>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-this-component-each-block-value/_config.js b/test/runtime/samples/binding-this-component-each-block-value/_config.js
new file mode 100644
index 0000000000..2b5df8c595
--- /dev/null
+++ b/test/runtime/samples/binding-this-component-each-block-value/_config.js
@@ -0,0 +1,12 @@
+export default {
+	skip_if_ssr: true,
+
+	html: `
+		<div>foo</div>
+		<div>first has foo: true</div>
+		<div>foo</div>
+		<div>second has foo: true</div>
+		<div>foo</div>
+		<div>third has foo: true</div>
+	`
+};
diff --git a/test/runtime/samples/binding-this-component-each-block-value/main.svelte b/test/runtime/samples/binding-this-component-each-block-value/main.svelte
new file mode 100644
index 0000000000..5093eecd3f
--- /dev/null
+++ b/test/runtime/samples/binding-this-component-each-block-value/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Foo from './Foo.svelte';
+	export let foo = {};
+</script>
+
+{#each ["first", "second", "third"] as value}
+	<Foo bind:this={foo[value]}/>
+	<div>
+		{value} has foo: {!!foo[value]}
+	</div>
+{/each}
diff --git a/test/runtime/samples/binding-this-component-each-block/Foo.svelte b/test/runtime/samples/binding-this-component-each-block/Foo.svelte
new file mode 100644
index 0000000000..066a48b65e
--- /dev/null
+++ b/test/runtime/samples/binding-this-component-each-block/Foo.svelte
@@ -0,0 +1 @@
+<div>foo</div>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-this-component-each-block/_config.js b/test/runtime/samples/binding-this-component-each-block/_config.js
new file mode 100644
index 0000000000..358c5b5afc
--- /dev/null
+++ b/test/runtime/samples/binding-this-component-each-block/_config.js
@@ -0,0 +1,12 @@
+export default {
+	skip_if_ssr: true,
+
+	html: `
+		<div>foo</div>
+		<div>0 has foo: true</div>
+		<div>foo</div>
+		<div>1 has foo: true</div>
+		<div>foo</div>
+		<div>2 has foo: true</div>
+	`
+};
diff --git a/test/runtime/samples/binding-this-component-each-block/main.svelte b/test/runtime/samples/binding-this-component-each-block/main.svelte
new file mode 100644
index 0000000000..49d1d76172
--- /dev/null
+++ b/test/runtime/samples/binding-this-component-each-block/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Foo from './Foo.svelte';
+	export let foo = [];
+</script>
+
+{#each Array(3) as _, i}
+	<Foo bind:this={foo[i]}/>
+	<div>
+		{i} has foo: {!!foo[i]}
+	</div>
+{/each}
diff --git a/test/runtime/samples/binding-this-component-reactive/Foo.svelte b/test/runtime/samples/binding-this-component-reactive/Foo.svelte
new file mode 100644
index 0000000000..066a48b65e
--- /dev/null
+++ b/test/runtime/samples/binding-this-component-reactive/Foo.svelte
@@ -0,0 +1 @@
+<div>foo</div>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-this-component-reactive/_config.js b/test/runtime/samples/binding-this-component-reactive/_config.js
new file mode 100644
index 0000000000..415d2e641c
--- /dev/null
+++ b/test/runtime/samples/binding-this-component-reactive/_config.js
@@ -0,0 +1,8 @@
+export default {
+	skip_if_ssr: true,
+
+	html: `
+		<div>foo</div>
+		<div>has foo: true</div>
+	`
+};
diff --git a/test/runtime/samples/binding-this-component-reactive/main.svelte b/test/runtime/samples/binding-this-component-reactive/main.svelte
new file mode 100644
index 0000000000..25b134105b
--- /dev/null
+++ b/test/runtime/samples/binding-this-component-reactive/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Foo from './Foo.svelte';
+	export let foo;
+</script>
+
+<Foo bind:this={foo}/>
+<div>
+	has foo: {!!foo}
+</div>
diff --git a/test/runtime/samples/binding-this-each-block-property-2/_config.js b/test/runtime/samples/binding-this-each-block-property-2/_config.js
new file mode 100644
index 0000000000..49131d6635
--- /dev/null
+++ b/test/runtime/samples/binding-this-each-block-property-2/_config.js
@@ -0,0 +1,53 @@
+let calls = [];
+function callback(refs) {
+	calls.push(refs.map(({ ref }) => ({ ref })));
+}
+export default {
+	html: '',
+	props: {
+		callback
+	},
+	before_test() {
+		calls = [];
+	},
+	async test({ assert, component, target }) {
+		assert.equal(calls.length, 1);
+		assert.equal(calls[0].length, 0);
+
+		await component.addItem();
+
+		let divs = target.querySelectorAll('div');
+
+		assert.equal(calls.length, 3);
+		assert.equal(calls[1].length, 1);
+		assert.equal(calls[1][0].ref, null);
+		assert.equal(calls[2].length, 1);
+		assert.equal(calls[2][0].ref, divs[0]);
+
+		await component.addItem();
+
+		divs = target.querySelectorAll('div');
+
+		assert.equal(calls.length, 5);
+		assert.equal(calls[3].length, 2);
+		assert.equal(calls[3][0].ref, divs[0]);
+		assert.equal(calls[3][1].ref, null);
+		assert.equal(calls[4].length, 2);
+		assert.equal(calls[4][0].ref, divs[0]);
+		assert.equal(calls[4][1].ref, divs[1]);
+
+		await component.addItem();
+
+		divs = target.querySelectorAll('div');
+
+		assert.equal(calls.length, 7);
+		assert.equal(calls[5].length, 3);
+		assert.equal(calls[5][0].ref, divs[0]);
+		assert.equal(calls[5][1].ref, divs[1]);
+		assert.equal(calls[5][2].ref, null);
+		assert.equal(calls[6].length, 3);
+		assert.equal(calls[6][0].ref, divs[0]);
+		assert.equal(calls[6][1].ref, divs[1]);
+		assert.equal(calls[6][2].ref, divs[2]);
+	}
+};
diff --git a/test/runtime/samples/binding-this-each-block-property-2/main.svelte b/test/runtime/samples/binding-this-each-block-property-2/main.svelte
new file mode 100644
index 0000000000..bc1efe725c
--- /dev/null
+++ b/test/runtime/samples/binding-this-each-block-property-2/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { tick } from 'svelte';
+	let refs = [];
+
+	export function addItem() {
+		refs = refs.concat({ ref: null });
+		return tick();
+	}
+
+	export let callback;
+
+	$: callback(refs);
+</script>
+
+{#each refs as xxx}
+	<div bind:this={xxx.ref} />
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/binding-this-each-block-property-component/Foo.svelte b/test/runtime/samples/binding-this-each-block-property-component/Foo.svelte
new file mode 100644
index 0000000000..dc8b5f206c
--- /dev/null
+++ b/test/runtime/samples/binding-this-each-block-property-component/Foo.svelte
@@ -0,0 +1,7 @@
+<script>
+	export function isFoo() {
+		return true;
+	}
+</script>
+
+<p><slot></slot></p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-this-each-block-property-component/_config.js b/test/runtime/samples/binding-this-each-block-property-component/_config.js
new file mode 100644
index 0000000000..3346888555
--- /dev/null
+++ b/test/runtime/samples/binding-this-each-block-property-component/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: '',
+
+	async test({ assert, component, target }) {
+		component.visible = true;
+		assert.htmlEqual(target.innerHTML, `
+			<p>a</p>
+		`);
+
+		assert.ok(component.items[0].ref.isFoo());
+	}
+};
diff --git a/test/runtime/samples/binding-this-each-block-property-component/main.svelte b/test/runtime/samples/binding-this-each-block-property-component/main.svelte
new file mode 100644
index 0000000000..257aa18a91
--- /dev/null
+++ b/test/runtime/samples/binding-this-each-block-property-component/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Foo from './Foo.svelte';
+
+	export let visible = false;
+
+	export let items = [{ value: 'a', ref: null }];
+</script>
+
+{#if visible}
+	{#each items as item}
+		<Foo bind:this={item.ref}>{item.value}</Foo>
+	{/each}
+{/if}
diff --git a/test/runtime/samples/binding-this-each-block-property/_config.js b/test/runtime/samples/binding-this-each-block-property/_config.js
new file mode 100644
index 0000000000..bb24bcc0bf
--- /dev/null
+++ b/test/runtime/samples/binding-this-each-block-property/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: '',
+
+	async test({ assert, component, target }) {
+		component.visible = true;
+		assert.htmlEqual(target.innerHTML, `
+			<div>a</div>
+		`);
+
+		assert.equal(component.items[0].ref, target.querySelector('div'));
+	}
+};
diff --git a/test/runtime/samples/binding-this-each-block-property/main.svelte b/test/runtime/samples/binding-this-each-block-property/main.svelte
new file mode 100644
index 0000000000..73ede7ab75
--- /dev/null
+++ b/test/runtime/samples/binding-this-each-block-property/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let visible = false;
+
+	export let items = [{ value: 'a', ref: null }];
+</script>
+
+{#if visible}
+	{#each items as item}
+		<div bind:this={item.ref}>{item.value}</div>
+	{/each}
+{/if}
diff --git a/test/runtime/samples/binding-this-each-key/_config.js b/test/runtime/samples/binding-this-each-key/_config.js
new file mode 100644
index 0000000000..332e14fda8
--- /dev/null
+++ b/test/runtime/samples/binding-this-each-key/_config.js
@@ -0,0 +1,10 @@
+export default {
+	html: '<div>content</div><div>content</div><div>content</div>',
+
+	test({ assert, target, component }) {
+		const divs = target.querySelectorAll('div');
+		assert.equal(component.refs[0], divs[0]);
+		assert.equal(component.refs[1], divs[1]);
+		assert.equal(component.refs[2], divs[2]);
+	}
+};
diff --git a/test/runtime/samples/binding-this-each-key/main.svelte b/test/runtime/samples/binding-this-each-key/main.svelte
new file mode 100644
index 0000000000..cff2ffa226
--- /dev/null
+++ b/test/runtime/samples/binding-this-each-key/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let data = [ { id: '1' }, { id: '2' }, { id: '3' } ];
+
+	export let refs = [];
+
+	// note that this is NOT data.slice().reverse()
+	// as that wouldn't have triggered an infinite loop
+	$: list = data.reverse();
+</script>
+
+{#each list as { id }, index (id)}
+	<div bind:this={refs[index]}>
+		content
+	</div>
+{/each}
diff --git a/test/runtime/samples/binding-this-each-object-props/_config.js b/test/runtime/samples/binding-this-each-object-props/_config.js
new file mode 100644
index 0000000000..e9ec7d90f0
--- /dev/null
+++ b/test/runtime/samples/binding-this-each-object-props/_config.js
@@ -0,0 +1,14 @@
+export default {
+	html: '',
+
+	async test({ assert, component, target }) {
+		component.visible = true;
+		assert.htmlEqual(target.innerHTML, `
+			<div>b</div><div>b</div><div>c</div><div>c</div>
+		`);
+		assert.equal(component.items1[1], target.querySelector('div'));
+		assert.equal(component.items2[1], target.querySelector('div:nth-child(2)'));
+		assert.equal(component.items1[2], target.querySelector('div:nth-child(3)'));
+		assert.equal(component.items2[2], target.querySelector('div:last-child'));
+	}
+};
diff --git a/test/runtime/samples/binding-this-each-object-props/main.svelte b/test/runtime/samples/binding-this-each-object-props/main.svelte
new file mode 100644
index 0000000000..9654a58418
--- /dev/null
+++ b/test/runtime/samples/binding-this-each-object-props/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	export const items1 = {};
+	export const items2 = {};
+	export let data = [
+		{id: 1, text: "b"},
+		{id: 2, text: "c"},
+	];
+</script>
+
+{#each data as item (item.id)}
+	<div bind:this={items1[item.id]}>{item.text}</div>
+	<div bind:this={items2[item.id]}>{item.text}</div>
+{/each}
diff --git a/test/runtime/samples/binding-this-each-object-spread/_config.js b/test/runtime/samples/binding-this-each-object-spread/_config.js
new file mode 100644
index 0000000000..e88ebe8de5
--- /dev/null
+++ b/test/runtime/samples/binding-this-each-object-spread/_config.js
@@ -0,0 +1,14 @@
+export default {
+	html: '',
+
+	async test({ assert, component, target }) {
+		component.visible = true;
+		assert.htmlEqual(target.innerHTML, `
+			<div>a</div><div>a</div><div>b</div><div>b</div>
+		`);
+		assert.equal(component.items1[1], target.querySelector('div'));
+		assert.equal(component.items2[1], target.querySelector('div:nth-child(2)'));
+		assert.equal(component.items1[2], target.querySelector('div:nth-child(3)'));
+		assert.equal(component.items2[2], target.querySelector('div:last-child'));
+	}
+};
diff --git a/test/runtime/samples/binding-this-each-object-spread/main.svelte b/test/runtime/samples/binding-this-each-object-spread/main.svelte
new file mode 100644
index 0000000000..256ed0ede6
--- /dev/null
+++ b/test/runtime/samples/binding-this-each-object-spread/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	export const items1 = {};
+	export const items2 = {};
+	var data = [
+		{id: 1, text: "a"},
+		{id: 2, text: "b"},
+	];
+</script>
+
+{#each data as {id, text} (id)}
+	<div bind:this={items1[id]}>{text}</div>
+	<div bind:this={items2[id]}>{text}</div>
+{/each}
diff --git a/test/runtime/samples/binding-this-element-reactive-b/_config.js b/test/runtime/samples/binding-this-element-reactive-b/_config.js
new file mode 100644
index 0000000000..bcea590c17
--- /dev/null
+++ b/test/runtime/samples/binding-this-element-reactive-b/_config.js
@@ -0,0 +1,21 @@
+export default {
+	skip_if_ssr: true,
+
+	html: `
+		<div>The text is hello</div>
+		<h1>hello</h1>
+	`,
+
+	test({ assert, component, target }) {
+		component.visible = false;
+		assert.htmlEqual(target.innerHTML, `
+			<div>The text is missing</div>
+		`);
+
+		component.visible = true;
+		assert.htmlEqual(target.innerHTML, `
+			<div>The text is hello</div>
+			<h1>hello</h1>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-this-element-reactive-b/main.svelte b/test/runtime/samples/binding-this-element-reactive-b/main.svelte
new file mode 100644
index 0000000000..b6acfd2236
--- /dev/null
+++ b/test/runtime/samples/binding-this-element-reactive-b/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let visible = true;
+	let h1;
+</script>
+
+<div>The text is {h1 ? h1.textContent : 'missing'}</div>
+{#if visible}
+	<h1 bind:this={h1}>hello</h1>
+{/if}
diff --git a/test/runtime/samples/binding-this-element-reactive/_config.js b/test/runtime/samples/binding-this-element-reactive/_config.js
new file mode 100644
index 0000000000..44609fa3d1
--- /dev/null
+++ b/test/runtime/samples/binding-this-element-reactive/_config.js
@@ -0,0 +1,5 @@
+export default {
+	skip_if_ssr: true,
+
+	html: '<div>has div: true</div>'
+};
diff --git a/test/runtime/samples/binding-this-element-reactive/main.svelte b/test/runtime/samples/binding-this-element-reactive/main.svelte
new file mode 100644
index 0000000000..cf37519b18
--- /dev/null
+++ b/test/runtime/samples/binding-this-element-reactive/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let div;
+</script>
+
+<div bind:this={div}>
+	has div: {!!div}
+</div>
diff --git a/test/runtime/samples/binding-this-member-expression-update/_config.js b/test/runtime/samples/binding-this-member-expression-update/_config.js
new file mode 100644
index 0000000000..782d44311c
--- /dev/null
+++ b/test/runtime/samples/binding-this-member-expression-update/_config.js
@@ -0,0 +1,8 @@
+// binding member expression shouldn't invalidate the property name
+export default {
+	test({ assert, component, target }) {
+		const div = target.querySelector('div');
+		assert.equal(div, component.container.a);
+		assert.deepEqual(component.logs.length, 1);
+	}
+};
diff --git a/test/runtime/samples/binding-this-member-expression-update/main.svelte b/test/runtime/samples/binding-this-member-expression-update/main.svelte
new file mode 100644
index 0000000000..327d63d494
--- /dev/null
+++ b/test/runtime/samples/binding-this-member-expression-update/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let container = {};
+	export let paths = ['a'];
+	export let logs = [];
+
+	$: paths && logs.push('paths updated');
+</script>
+
+<div bind:this={container[paths[0]]} />
diff --git a/test/runtime/samples/binding-this-no-innerhtml/_config.js b/test/runtime/samples/binding-this-no-innerhtml/_config.js
new file mode 100644
index 0000000000..c69386994a
--- /dev/null
+++ b/test/runtime/samples/binding-this-no-innerhtml/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: '<div><canvas></canvas></div>',
+
+	test({ assert, component, target }) {
+		const canvas = target.querySelector('canvas');
+		assert.equal(canvas, component.foo);
+	}
+};
diff --git a/test/runtime/samples/binding-this-no-innerhtml/main.svelte b/test/runtime/samples/binding-this-no-innerhtml/main.svelte
new file mode 100644
index 0000000000..014fac9221
--- /dev/null
+++ b/test/runtime/samples/binding-this-no-innerhtml/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+<div><canvas bind:this={foo}></canvas></div>
diff --git a/test/runtime/samples/binding-this-store/_config.js b/test/runtime/samples/binding-this-store/_config.js
new file mode 100644
index 0000000000..32bc9c4ce9
--- /dev/null
+++ b/test/runtime/samples/binding-this-store/_config.js
@@ -0,0 +1,4 @@
+export default {
+	skip_if_ssr: true,
+	html: '<div>object</div>'
+};
diff --git a/test/runtime/samples/binding-this-store/main.svelte b/test/runtime/samples/binding-this-store/main.svelte
new file mode 100644
index 0000000000..7958dfa2d8
--- /dev/null
+++ b/test/runtime/samples/binding-this-store/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import { writable } from 'svelte/store';
+	const foo = writable();
+</script>
+
+<div bind:this={$foo}>{typeof $foo}</div>
diff --git a/test/runtime/samples/binding-this-unset/_config.js b/test/runtime/samples/binding-this-unset/_config.js
new file mode 100644
index 0000000000..d940af30b3
--- /dev/null
+++ b/test/runtime/samples/binding-this-unset/_config.js
@@ -0,0 +1,23 @@
+export default {
+	props: {
+		x: true
+	},
+
+	html: '<canvas data-x="true"></canvas>',
+
+	test({ assert, component, target }) {
+		let canvas = target.querySelector('canvas');
+		assert.equal(canvas, component.foo);
+		assert.equal(canvas.getAttribute('data-x'), 'true');
+
+		component.x = false;
+		canvas = target.querySelector('canvas');
+		assert.equal(canvas, component.foo);
+		assert.equal(canvas.getAttribute('data-x'), 'false');
+
+		component.x = true;
+		canvas = target.querySelector('canvas');
+		assert.equal(canvas, component.foo);
+		assert.equal(canvas.getAttribute('data-x'), 'true');
+	}
+};
diff --git a/test/runtime/samples/binding-this-unset/main.svelte b/test/runtime/samples/binding-this-unset/main.svelte
new file mode 100644
index 0000000000..9345408945
--- /dev/null
+++ b/test/runtime/samples/binding-this-unset/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let foo;
+	export let x;
+</script>
+
+{#if x}
+	<canvas bind:this={foo} data-x='true'></canvas>
+{:else}
+	<canvas bind:this={foo} data-x='false'></canvas>
+{/if}
diff --git a/test/runtime/samples/binding-this-with-context/_config.js b/test/runtime/samples/binding-this-with-context/_config.js
new file mode 100644
index 0000000000..33ef091b33
--- /dev/null
+++ b/test/runtime/samples/binding-this-with-context/_config.js
@@ -0,0 +1,59 @@
+export default {
+	html: `<div>foo</div><div>bar</div><div>baz</div>
+	<span>foo</span><span>bar</span><span>baz</span>
+	<ul><li><p>foo</p></li><li><p>bar</p></li><li><p>baz</p></li></ul>
+	<ul><li><hr /></li><li><hr /></li><li><hr /></li></ul>`,
+
+	test({ assert, component, target }) {
+		let elems = target.querySelectorAll('div');
+		assert.equal(component.divs.length, 3, 'three divs are registered (unkeyed array)');
+		component.divs.forEach((e, i) => {
+			assert.equal(e, elems[i], `div ${i} is correct (unkeyed array)`);
+		});
+
+		elems = target.querySelectorAll('span');
+		assert.equal(Object.keys(component.spans).length, 3, 'three spans are registered (unkeyed object)');
+		component.items.forEach((e, i) => {
+			assert.equal(component.spans[`-${e}${i}`], elems[i], `span -${e}${i} is correct (unkeyed object)`);
+		});
+
+		elems = target.querySelectorAll('p');
+		assert.equal(component.ps.length, 3, 'three ps are registered (keyed array)');
+		component.ps.forEach((e, i) => {
+			assert.equal(e, elems[i], `p ${i} is correct (keyed array)`);
+		});
+
+		elems = target.querySelectorAll('hr');
+		assert.equal(Object.keys(component.hrs).length, 3, 'three hrs are registered (keyed object)');
+		component.items.forEach((e, i) => {
+			assert.equal(component.hrs[e], elems[i], `hr ${e} is correct (keyed object)`);
+		});
+
+		component.items = ['foo', 'baz'];
+		assert.equal(component.divs.length, 3, 'the divs array is still 3 long');
+		assert.equal(component.divs[2], null, 'the last div is unregistered');
+		assert.equal(component.ps[2], null, 'the last p is unregistered');
+		assert.equal(component.spans['-bar1'], null, 'the bar span is unregisterd');
+		assert.equal(component.hrs.bar, null, 'the bar hr is unregisterd');
+
+		elems = target.querySelectorAll('div');
+		component.divs.forEach((e, i) => {
+			assert.equal(e, elems[i], `div ${i} is still correct`);
+		});
+
+		elems = target.querySelectorAll('span');
+		component.items.forEach((e, i) => {
+			assert.equal(component.spans[`-${e}${i}`], elems[i], `span -${e}${i} is still correct`);
+		});
+
+		elems = target.querySelectorAll('p');
+		component.ps.forEach((e, i) => {
+			assert.equal(e, elems[i], `p ${i} is still correct`);
+		});
+
+		elems = target.querySelectorAll('hr');
+		component.items.forEach((e, i) => {
+			assert.equal(component.hrs[e], elems[i], `hr ${e} is still correct`);
+		});
+	}
+};
diff --git a/test/runtime/samples/binding-this-with-context/main.svelte b/test/runtime/samples/binding-this-with-context/main.svelte
new file mode 100644
index 0000000000..673800188c
--- /dev/null
+++ b/test/runtime/samples/binding-this-with-context/main.svelte
@@ -0,0 +1,28 @@
+<script>
+  export let items = ['foo', 'bar', 'baz'];
+	export let divs = [];
+	export let spans = {};
+	export let ps = [];
+	export let hrs = {};
+	const prefix = '-';
+</script>
+
+{#each items as item, j}
+	<div bind:this={divs[j]}>{item}</div>
+{/each}
+
+{#each Object.entries(items) as [ key, val ] }
+	<span bind:this="{spans[prefix + val + key]}">{val}</span>
+{/each}
+
+<ul>
+	{#each items as thing, j (thing)}
+		<li><p bind:this="{ps[j]}">{thing}</p></li>
+	{/each}
+</ul>
+
+<ul>
+	{#each items as sure, j (sure)}
+		<li><hr bind:this="{hrs[sure]}" /></li>
+	{/each}
+</ul>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-this/_config.js b/test/runtime/samples/binding-this/_config.js
new file mode 100644
index 0000000000..5b5ca9d96d
--- /dev/null
+++ b/test/runtime/samples/binding-this/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: '<canvas></canvas>',
+
+	test({ assert, component, target }) {
+		const canvas = target.querySelector('canvas');
+		assert.equal(canvas, component.foo);
+	}
+};
diff --git a/test/runtime/samples/binding-this/main.svelte b/test/runtime/samples/binding-this/main.svelte
new file mode 100644
index 0000000000..9f71ec0a6b
--- /dev/null
+++ b/test/runtime/samples/binding-this/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+<canvas bind:this={foo}></canvas>
diff --git a/test/runtime/samples/binding-using-props/TextInput.svelte b/test/runtime/samples/binding-using-props/TextInput.svelte
new file mode 100644
index 0000000000..da9e7e4a0e
--- /dev/null
+++ b/test/runtime/samples/binding-using-props/TextInput.svelte
@@ -0,0 +1,6 @@
+<script>
+    export let actualValue;
+    let x = $$props;
+</script>
+
+<input bind:value={actualValue}>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-using-props/_config.js b/test/runtime/samples/binding-using-props/_config.js
new file mode 100644
index 0000000000..2e5fef1f4f
--- /dev/null
+++ b/test/runtime/samples/binding-using-props/_config.js
@@ -0,0 +1,14 @@
+export default {
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+	
+		const event = new window.Event('input');
+		input.value = 'changed';
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>changed</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-using-props/main.svelte b/test/runtime/samples/binding-using-props/main.svelte
new file mode 100644
index 0000000000..543bd28d49
--- /dev/null
+++ b/test/runtime/samples/binding-using-props/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Input from './TextInput.svelte';
+	export let actualValue = '';
+</script>
+
+<Input bind:actualValue />
+<p>{actualValue}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-width-height-a11y/_config.js b/test/runtime/samples/binding-width-height-a11y/_config.js
new file mode 100644
index 0000000000..198051e6d2
--- /dev/null
+++ b/test/runtime/samples/binding-width-height-a11y/_config.js
@@ -0,0 +1,8 @@
+export default {
+	async test({ assert, target }) {
+		const iframe = target.querySelector('iframe');
+
+		assert.equal(iframe.getAttribute('aria-hidden'), 'true');
+		assert.equal(iframe.getAttribute('tabindex'), '-1');
+	}
+};
diff --git a/test/runtime/samples/binding-width-height-a11y/main.svelte b/test/runtime/samples/binding-width-height-a11y/main.svelte
new file mode 100644
index 0000000000..053fa8fa08
--- /dev/null
+++ b/test/runtime/samples/binding-width-height-a11y/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let offsetWidth = 0;
+	let offsetHeight = 0;
+</script>
+
+<div bind:offsetHeight bind:offsetWidth>
+
+	<h1>Hello</h1>
+
+</div>
diff --git a/test/runtime/samples/binding-width-height-z-index/_config.js b/test/runtime/samples/binding-width-height-z-index/_config.js
new file mode 100644
index 0000000000..c90dd8079b
--- /dev/null
+++ b/test/runtime/samples/binding-width-height-z-index/_config.js
@@ -0,0 +1,7 @@
+export default {
+	async test({ assert, target }) {
+		const iframe = target.querySelector('iframe');
+
+		assert.equal(iframe.style.zIndex, '-1');
+	}
+};
diff --git a/test/runtime/samples/binding-width-height-z-index/main.svelte b/test/runtime/samples/binding-width-height-z-index/main.svelte
new file mode 100644
index 0000000000..bc14bd33f8
--- /dev/null
+++ b/test/runtime/samples/binding-width-height-z-index/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	let offsetWidth = 0;
+	let offsetHeight = 0;
+</script>
+
+<div style="z-index: 42;" bind:offsetHeight bind:offsetWidth>
+	<h1>Hello</h1>
+</div>
diff --git a/test/runtime/samples/bindings-before-onmount/One.svelte b/test/runtime/samples/bindings-before-onmount/One.svelte
new file mode 100644
index 0000000000..5dd38a6f08
--- /dev/null
+++ b/test/runtime/samples/bindings-before-onmount/One.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { onMount } from 'svelte';
+	import Two from './Two.svelte';
+
+	export let snapshot;
+	export let foo;
+
+	onMount(() => {
+		snapshot = foo();
+	});
+</script>
+
+<Two bind:foo/>
\ No newline at end of file
diff --git a/test/runtime/samples/bindings-before-onmount/Two.svelte b/test/runtime/samples/bindings-before-onmount/Two.svelte
new file mode 100644
index 0000000000..39e379383f
--- /dev/null
+++ b/test/runtime/samples/bindings-before-onmount/Two.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let bar = 1;
+
+	export function foo() {
+		return bar * 2;
+	}
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/bindings-before-onmount/_config.js b/test/runtime/samples/bindings-before-onmount/_config.js
new file mode 100644
index 0000000000..1d2ac64fe8
--- /dev/null
+++ b/test/runtime/samples/bindings-before-onmount/_config.js
@@ -0,0 +1,5 @@
+export default {
+	test({ assert, component }) {
+		assert.equal(component.one.snapshot, 2);
+	}
+};
diff --git a/test/runtime/samples/bindings-before-onmount/main.svelte b/test/runtime/samples/bindings-before-onmount/main.svelte
new file mode 100644
index 0000000000..65c1221b26
--- /dev/null
+++ b/test/runtime/samples/bindings-before-onmount/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import One from './One.svelte';
+
+	export let one;
+</script>
+
+<One bind:this={one}/>
\ No newline at end of file
diff --git a/test/runtime/samples/bindings-coalesced/Foo.svelte b/test/runtime/samples/bindings-coalesced/Foo.svelte
new file mode 100644
index 0000000000..7be8cc4f94
--- /dev/null
+++ b/test/runtime/samples/bindings-coalesced/Foo.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let bar = 1;
+	export let baz = 2;
+
+	export function double() {
+		bar = bar * 2;
+		baz = baz * 2;
+	}
+</script>
+
+<p>bar in Foo: {bar}</p>
+<p>baz in Foo: {baz}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/bindings-coalesced/_config.js b/test/runtime/samples/bindings-coalesced/_config.js
new file mode 100644
index 0000000000..14ffd3ed89
--- /dev/null
+++ b/test/runtime/samples/bindings-coalesced/_config.js
@@ -0,0 +1,17 @@
+export default {
+	async test({ assert, component }) {
+		const { foo, p } = component;
+
+		const values = [];
+
+		Object.defineProperty(p.childNodes[0], 'data', {
+			set(value) {
+				values.push(value);
+			}
+		});
+
+		await foo.double();
+
+		assert.deepEqual(values, ['6']);
+	}
+};
diff --git a/test/runtime/samples/bindings-coalesced/main.svelte b/test/runtime/samples/bindings-coalesced/main.svelte
new file mode 100644
index 0000000000..003f89c6d9
--- /dev/null
+++ b/test/runtime/samples/bindings-coalesced/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Foo from './Foo.svelte';
+
+	export let p;
+
+	export let foo;
+	export let bar;
+	export let baz;
+</script>
+
+<Foo bind:this={foo} bind:bar bind:baz/>
+<p bind:this={p}>{bar + baz}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/bindings-global-dependency/_config.js b/test/runtime/samples/bindings-global-dependency/_config.js
new file mode 100644
index 0000000000..907aa52e6e
--- /dev/null
+++ b/test/runtime/samples/bindings-global-dependency/_config.js
@@ -0,0 +1,4 @@
+export default {
+	html: '<input type="text">',
+	ssrHtml: '<input type="text" value="">'
+};
diff --git a/test/runtime/samples/bindings-global-dependency/main.svelte b/test/runtime/samples/bindings-global-dependency/main.svelte
new file mode 100644
index 0000000000..15a4381a06
--- /dev/null
+++ b/test/runtime/samples/bindings-global-dependency/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let data = {
+		a: {value:''}
+	}
+</script>
+
+{#each Object.values(data) as object}
+	<input type="text" bind:value={object.value} />
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/bitmask-overflow-2/_config.js b/test/runtime/samples/bitmask-overflow-2/_config.js
new file mode 100644
index 0000000000..781c493245
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-2/_config.js
@@ -0,0 +1,3 @@
+export default {
+	error: 'potato is not defined'
+};
diff --git a/test/runtime/samples/bitmask-overflow-2/main.svelte b/test/runtime/samples/bitmask-overflow-2/main.svelte
new file mode 100644
index 0000000000..10fa1bd5e2
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-2/main.svelte
@@ -0,0 +1,35 @@
+<script>
+	export let x1;
+	export let x2;
+	export let x3;
+	export let x4;
+	export let x5;
+	export let x6;
+	export let x7;
+	export let x8;
+	export let x9;
+	export let x10;
+	export let x11;
+	export let x12;
+	export let x13;
+	export let x14;
+	export let x15;
+	export let x16;
+	export let x17;
+	export let x18;
+	export let x19;
+	export let x20;
+	export let x21;
+	export let x22;
+	export let x23;
+	export let x24;
+	export let x25;
+	export let x26;
+	export let x27;
+	export let x28;
+	export let x29;
+	export let x30;
+	export let x31;
+	export let x32;
+</script>
+<p {...potato}>{x1 + x2 + x3 + x4 + x5 + x6 + x7 + x8 + x9 + x10 + x11 + x12 + x13 + x14 + x15 + x16 + x17 + x18 + x19 + x20 + x21 + x22 + x23 + x24 + x25 + x26 + x27 + x28 + x29 + x30 + x31 + x32}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/bitmask-overflow-3/_config.js b/test/runtime/samples/bitmask-overflow-3/_config.js
new file mode 100644
index 0000000000..bd415bfd49
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-3/_config.js
@@ -0,0 +1,3 @@
+export default {
+	error: 'A is not defined'
+};
diff --git a/test/runtime/samples/bitmask-overflow-3/main.svelte b/test/runtime/samples/bitmask-overflow-3/main.svelte
new file mode 100644
index 0000000000..aa2c56a147
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-3/main.svelte
@@ -0,0 +1,4 @@
+<script>
+	let x1, x2, x3, x4, x5, x6, x7, x8, x9, x10, x11, x12, x13, x14, x15, x16, x17, x18, x19, x20, x21, x22, x23, x24, x25, x26, x27, x28, x29, x30, x31;
+</script>
+<A>foo</A>
diff --git a/test/runtime/samples/bitmask-overflow-if-2/_config.js b/test/runtime/samples/bitmask-overflow-if-2/_config.js
new file mode 100644
index 0000000000..bdcf45abba
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-if-2/_config.js
@@ -0,0 +1,23 @@
+// `bitmask-overflow-if` tests the case where the if condition is made of first 32 variables
+// this tests the case where the if condition is made of the next 32 variables
+export default {
+	html: `
+		012345678910111213141516171819202122232425262728293031323334353637383940
+		expected: true
+		if: true
+	`,
+
+	async test({ assert, component, target }) {
+		component._40 = '-';
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			0123456789101112131415161718192021222324252627282930313233343536373839-
+			expected: false
+			if: false
+			<div></div>
+		`
+		);
+	}
+};
diff --git a/test/runtime/samples/bitmask-overflow-if-2/main.svelte b/test/runtime/samples/bitmask-overflow-if-2/main.svelte
new file mode 100644
index 0000000000..f2a461b5b4
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-if-2/main.svelte
@@ -0,0 +1,56 @@
+<script>
+	import { fade } from 'svelte/transition';
+	export let _0 = '0';
+	export let _1 = '1';
+	export let _2 = '2';
+	export let _3 = '3';
+	export let _4 = '4';
+	export let _5 = '5';
+	export let _6 = '6';
+	export let _7 = '7';
+	export let _8 = '8';
+	export let _9 = '9';
+	export let _10 = '10';
+	export let _11 = '11';
+	export let _12 = '12';
+	export let _13 = '13';
+	export let _14 = '14';
+	export let _15 = '15';
+	export let _16 = '16';
+	export let _17 = '17';
+	export let _18 = '18';
+	export let _19 = '19';
+	export let _20 = '20';
+	export let _21 = '21';
+	export let _22 = '22';
+	export let _23 = '23';
+	export let _24 = '24';
+	export let _25 = '25';
+	export let _26 = '26';
+	export let _27 = '27';
+	export let _28 = '28';
+	export let _29 = '29';
+	export let _30 = '30';
+	export let _31 = '31';
+	export let _32 = '32';
+	export let _33 = '33';
+	export let _34 = '34';
+	export let _35 = '35';
+	export let _36 = '36';
+	export let _37 = '37';
+	export let _38 = '38';
+	export let _39 = '39';
+	export let _40 = '40';
+	export let _a = ['40'];
+</script>
+
+
+{_0}{_1}{_2}{_3}{_4}{_5}{_6}{_7}{_8}{_9}{_10}{_11}{_12}{_13}{_14}{_15}{_16}{_17}{_18}{_19}{_20}{_21}{_22}{_23}{_24}{_25}{_26}{_27}{_28}{_29}{_30}{_31}{_32}{_33}{_34}{_35}{_36}{_37}{_38}{_39}{_40}
+
+expected: {_a.indexOf(_40) > -1 && _40 === '40' && _39 === '39'}
+{#if _a.indexOf(_40) > -1 && _40 === '40' && _39 === '39'}
+if: true
+{:else}
+if: false
+<div out:fade></div>
+{/if}
diff --git a/test/runtime/samples/bitmask-overflow-if/_config.js b/test/runtime/samples/bitmask-overflow-if/_config.js
new file mode 100644
index 0000000000..39ddc997fc
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-if/_config.js
@@ -0,0 +1,24 @@
+export default {
+	html: `
+		012345678910111213141516171819202122232425262728293031323334353637383940
+		expected: true
+		if: true
+		<button></button>
+	`,
+
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		await button.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			112345678910111213141516171819202122232425262728293031323334353637383940
+			expected: false
+			if: false
+			<div></div>
+			<button></button>
+		`
+		);
+	}
+};
diff --git a/test/runtime/samples/bitmask-overflow-if/main.svelte b/test/runtime/samples/bitmask-overflow-if/main.svelte
new file mode 100644
index 0000000000..2c1c453091
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-if/main.svelte
@@ -0,0 +1,62 @@
+<script>
+	import { fade } from 'svelte/transition';
+	export let _a = [];
+	export let _0 = '0';
+	export let _1 = '1';
+	export let _2 = '2';
+	export let _3 = '3';
+	export let _4 = '4';
+	export let _5 = '5';
+	export let _6 = '6';
+	export let _7 = '7';
+	export let _8 = '8';
+	export let _9 = '9';
+	export let _10 = '10';
+	export let _11 = '11';
+	export let _12 = '12';
+	export let _13 = '13';
+	export let _14 = '14';
+	export let _15 = '15';
+	export let _16 = '16';
+	export let _17 = '17';
+	export let _18 = '18';
+	export let _19 = '19';
+	export let _20 = '20';
+	export let _21 = '21';
+	export let _22 = '22';
+	export let _23 = '23';
+	export let _24 = '24';
+	export let _25 = '25';
+	export let _26 = '26';
+	export let _27 = '27';
+	export let _28 = '28';
+	export let _29 = '29';
+	export let _30 = '30';
+	export let _31 = '31';
+	export let _32 = '32';
+	export let _33 = '33';
+	export let _34 = '34';
+	export let _35 = '35';
+	export let _36 = '36';
+	export let _37 = '37';
+	export let _38 = '38';
+	export let _39 = '39';
+	export let _40 = '40';
+
+	function update() {
+		_0 = '1';
+	}
+</script>
+
+
+{_0}{_1}{_2}{_3}{_4}{_5}{_6}{_7}{_8}{_9}{_10}{_11}{_12}{_13}{_14}{_15}{_16}{_17}{_18}{_19}{_20}{_21}{_22}{_23}{_24}{_25}{_26}{_27}{_28}{_29}{_30}{_31}{_32}{_33}{_34}{_35}{_36}{_37}{_38}{_39}{_40}
+
+expected: {_a.indexOf(_0) && _0 === '0' && _1 === '1'}
+{#if _a.indexOf(_0) && _0 === '0' && _1 === '1'}
+if: true
+{:else}
+if: false
+<div out:fade></div>
+{/if}
+
+<button on:click={update}></button>
\ No newline at end of file
diff --git a/test/runtime/samples/bitmask-overflow-slot-2/Echo.svelte b/test/runtime/samples/bitmask-overflow-slot-2/Echo.svelte
new file mode 100644
index 0000000000..c8905184dc
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-slot-2/Echo.svelte
@@ -0,0 +1,73 @@
+<script>
+	export let d1 = 'd1';
+	export let d2 = 'd2';
+	export let d3 = 'd3';
+	export let d4 = 'd4';
+	export let d5 = 'd5';
+	export let d6 = 'd6';
+	export let d7 = 'd7';
+	export let d8 = 'd8';
+	export let d9 = 'd9';
+	export let d10 = 'd10';
+	export let d11 = 'd11';
+	export let d12 = 'd12';
+	export let d13 = 'd13';
+	export let d14 = 'd14';
+	export let d15 = 'd15';
+	export let d16 = 'd16';
+	export let d17 = 'd17';
+	export let d18 = 'd18';
+	export let d19 = 'd19';
+	export let d20 = 'd20';
+	export let d21 = 'd21';
+	export let d22 = 'd22';
+	export let d23 = 'd23';
+	export let d24 = 'd24';
+	export let d25 = 'd25';
+	export let d26 = 'd26';
+	export let d27 = 'd27';
+	export let d28 = 'd28';
+	export let d29 = 'd29';
+	export let d30 = 'd30';
+	export let d31 = 'd31';
+	export let d32 = 'd32';
+	export let d33 = 'd33';
+
+	$: dummy = d32 + ':' + d33;
+</script>
+
+<p>{d1}</p>
+<p>{d2}</p>
+<p>{d3}</p>
+<p>{d4}</p>
+<p>{d5}</p>
+<p>{d6}</p>
+<p>{d7}</p>
+<p>{d8}</p>
+<p>{d9}</p>
+<p>{d10}</p>
+<p>{d11}</p>
+<p>{d12}</p>
+<p>{d13}</p>
+<p>{d14}</p>
+<p>{d15}</p>
+<p>{d16}</p>
+<p>{d17}</p>
+<p>{d18}</p>
+<p>{d19}</p>
+<p>{d20}</p>
+<p>{d21}</p>
+<p>{d22}</p>
+<p>{d23}</p>
+<p>{d24}</p>
+<p>{d25}</p>
+<p>{d26}</p>
+<p>{d27}</p>
+<p>{d28}</p>
+<p>{d29}</p>
+<p>{d30}</p>
+<p>{d31}</p>
+<p>{d32}</p>
+<p>{d33}</p>
+
+<slot dummy={dummy}></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/bitmask-overflow-slot-2/_config.js b/test/runtime/samples/bitmask-overflow-slot-2/_config.js
new file mode 100644
index 0000000000..1f9613711a
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-slot-2/_config.js
@@ -0,0 +1,96 @@
+export default {
+	html: `
+	<p>d1</p>
+	<p>d2</p>
+	<p>d3</p>
+	<p>d4</p>
+	<p>d5</p>
+	<p>d6</p>
+	<p>d7</p>
+	<p>d8</p>
+	<p>d9</p>
+	<p>d10</p>
+	<p>d11</p>
+	<p>d12</p>
+	<p>d13</p>
+	<p>d14</p>
+	<p>d15</p>
+	<p>d16</p>
+	<p>d17</p>
+	<p>d18</p>
+	<p>d19</p>
+	<p>d20</p>
+	<p>d21</p>
+	<p>d22</p>
+	<p>d23</p>
+	<p>d24</p>
+	<p>d25</p>
+	<p>d26</p>
+	<p>d27</p>
+	<p>d28</p>
+	<p>d29</p>
+	<p>d30</p>
+	<p>d31</p>
+	<p>2</p>
+	<p>1</p>
+	<p>0:1</p>
+	<p>2:1</p>
+	<p>0</p>
+	<p>1</p>
+	<p>2</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.reads = {};
+
+		component._0 = 'a';
+		component._1 = 'b';
+		component._2 = 'c';
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>d1</p>
+			<p>d2</p>
+			<p>d3</p>
+			<p>d4</p>
+			<p>d5</p>
+			<p>d6</p>
+			<p>d7</p>
+			<p>d8</p>
+			<p>d9</p>
+			<p>d10</p>
+			<p>d11</p>
+			<p>d12</p>
+			<p>d13</p>
+			<p>d14</p>
+			<p>d15</p>
+			<p>d16</p>
+			<p>d17</p>
+			<p>d18</p>
+			<p>d19</p>
+			<p>d20</p>
+			<p>d21</p>
+			<p>d22</p>
+			<p>d23</p>
+			<p>d24</p>
+			<p>d25</p>
+			<p>d26</p>
+			<p>d27</p>
+			<p>d28</p>
+			<p>d29</p>
+			<p>d30</p>
+			<p>d31</p>
+			<p>c</p>
+			<p>b</p>
+			<p>a:b</p>
+			<p>c:b</p>
+			<p>a</p>
+			<p>b</p>
+			<p>c</p>
+		`);
+
+		assert.deepEqual(component.reads, {
+			_0: 2,
+			_1: 2
+		});
+	}
+};
diff --git a/test/runtime/samples/bitmask-overflow-slot-2/main.svelte b/test/runtime/samples/bitmask-overflow-slot-2/main.svelte
new file mode 100644
index 0000000000..c15b4d5322
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-slot-2/main.svelte
@@ -0,0 +1,30 @@
+<script>
+	import Echo from './Echo.svelte';
+
+	export let reads = {};
+
+	export let _0 = '0';
+	export let _1 = '1';
+	export let _2 = '2';
+
+	$: bar = read(_0, '_0') + ':' + read(_1, '_1');
+
+	const read = (value, label) => {
+		if (!reads[label]) reads[label] = 0;
+		reads[label] += 1;
+
+		return value;
+	};
+</script>
+
+<Echo
+	let:dummy
+	d33={_1}
+	d32={_2}
+>
+	<p>{bar}</p>
+	<p>{dummy}</p>
+	<p>{_0}</p>
+	<p>{_1}</p>
+	<p>{_2}</p>
+</Echo>
\ No newline at end of file
diff --git a/test/runtime/samples/bitmask-overflow-slot-3/Echo.svelte b/test/runtime/samples/bitmask-overflow-slot-3/Echo.svelte
new file mode 100644
index 0000000000..d3ecf142c9
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-slot-3/Echo.svelte
@@ -0,0 +1,9 @@
+<script>
+	let dummy = 0;
+	function increment () {
+		dummy = 1;
+	}
+</script>
+
+<slot dummy={dummy}></slot>
+<button on:click={increment}></button>
\ No newline at end of file
diff --git a/test/runtime/samples/bitmask-overflow-slot-3/_config.js b/test/runtime/samples/bitmask-overflow-slot-3/_config.js
new file mode 100644
index 0000000000..7921253e18
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-slot-3/_config.js
@@ -0,0 +1,30 @@
+export default {
+
+	html: `
+		<p>_0_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39_40</p>
+		<p>0</p>
+		<button></button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		// change from inside
+		const button = target.querySelector('button');
+		await button.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>_0_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39_40</p>
+			<p>1</p>
+			<button></button>
+		`);
+
+		// change from outside
+		component._0 = 'a';
+		component._40 = 'b';
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>a_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39b</p>
+			<p>1</p>
+			<button></button>
+		`);	
+	}
+};
diff --git a/test/runtime/samples/bitmask-overflow-slot-3/main.svelte b/test/runtime/samples/bitmask-overflow-slot-3/main.svelte
new file mode 100644
index 0000000000..ae798e4aee
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-slot-3/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Echo from './Echo.svelte';
+
+	export let _0 = '_0', _1 = '_1', _2 = '_2', _3 = '_3', _4 = '_4', _5 = '_5', _6 = '_6', _7 = '_7', _8 = '_8', _9 = '_9', _10 = '_10', _11 = '_11', _12 = '_12', _13 = '_13', _14 = '_14', _15 = '_15', _16 = '_16', _17 = '_17', _18 = '_18', _19 = '_19', _20 = '_20', _21 = '_21', _22 = '_22', _23 = '_23', _24 = '_24', _25 = '_25', _26 = '_26', _27 = '_27', _28 = '_28', _29 = '_29', _30 = '_30', _31 = '_31', _32 = '_32', _33 = '_33', _34 = '_34', _35 = '_35', _36 = '_36', _37 = '_37', _38 = '_38', _39 = '_39', _40 = '_40';
+</script>
+
+<Echo let:dummy>
+	<p>{_0}{_1}{_2}{_3}{_4}{_5}{_6}{_7}{_8}{_9}{_10}{_11}{_12}{_13}{_14}{_15}{_16}{_17}{_18}{_19}{_20}{_21}{_22}{_23}{_24}{_25}{_26}{_27}{_28}{_29}{_30}{_31}{_32}{_33}{_34}{_35}{_36}{_37}{_38}{_39}{_40}</p>
+	<p>{dummy}</p>
+</Echo>
+
diff --git a/test/runtime/samples/bitmask-overflow-slot-4/Echo.svelte b/test/runtime/samples/bitmask-overflow-slot-4/Echo.svelte
new file mode 100644
index 0000000000..2e1beda492
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-slot-4/Echo.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let _0 = '_0', _1 = '_1', _2 = '_2', _3 = '_3', _4 = '_4', _5 = '_5', _6 = '_6', _7 = '_7', _8 = '_8', _9 = '_9', _10 = '_10', _11 = '_11', _12 = '_12', _13 = '_13', _14 = '_14', _15 = '_15', _16 = '_16', _17 = '_17', _18 = '_18', _19 = '_19', _20 = '_20', _21 = '_21', _22 = '_22', _23 = '_23', _24 = '_24', _25 = '_25', _26 = '_26', _27 = '_27', _28 = '_28', _29 = '_29', _30 = '_30', _31 = '_31', _32 = '_32', _33 = '_33', _34 = '_34', _35 = '_35', _36 = '_36', _37 = '_37', _38 = '_38', _39 = '_39', _40 = '_40';	
+	let dummy = 0;
+	function increment () {
+		dummy = 1;
+	}
+</script>
+
+<p>{_0}{_1}{_2}{_3}{_4}{_5}{_6}{_7}{_8}{_9}{_10}{_11}{_12}{_13}{_14}{_15}{_16}{_17}{_18}{_19}{_20}{_21}{_22}{_23}{_24}{_25}{_26}{_27}{_28}{_29}{_30}{_31}{_32}{_33}{_34}{_35}{_36}{_37}{_38}{_39}{_40}</p>
+<slot dummy={dummy}></slot>
+<button on:click={increment}></button>
\ No newline at end of file
diff --git a/test/runtime/samples/bitmask-overflow-slot-4/_config.js b/test/runtime/samples/bitmask-overflow-slot-4/_config.js
new file mode 100644
index 0000000000..5aa339afd6
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-slot-4/_config.js
@@ -0,0 +1,41 @@
+export default {
+	html: `
+		<p>_0_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39_40</p>
+		<p>0</p>
+		<p>0</p>
+		<button></button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		// change from inside
+		const button = target.querySelector('button');
+		await button.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>_0_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39_40</p>
+			<p>0</p>
+			<p>1</p>
+			<button></button>
+		`);
+
+		// change from outside
+		component._0 = 'a';
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>_0_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39_40</p>
+			<p>a</p>
+			<p>1</p>
+			<button></button>
+		`);
+
+		// change from outside through props
+		component._40 = 'b';
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>_0_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39b</p>
+			<p>a</p>
+			<p>1</p>
+			<button></button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/bitmask-overflow-slot-4/main.svelte b/test/runtime/samples/bitmask-overflow-slot-4/main.svelte
new file mode 100644
index 0000000000..7e02487a30
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-slot-4/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Echo from './Echo.svelte';
+
+	export let _0 = 0, _40;
+	
+</script>
+
+<Echo _40={_40} let:dummy>
+	<p>{_0}</p>
+	<p>{dummy}</p>
+</Echo>
+
diff --git a/test/runtime/samples/bitmask-overflow-slot-5/Echo.svelte b/test/runtime/samples/bitmask-overflow-slot-5/Echo.svelte
new file mode 100644
index 0000000000..dddb3f7642
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-slot-5/Echo.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let _0 = '_0', _1 = '_1', _2 = '_2', _3 = '_3', _4 = '_4', _5 = '_5', _6 = '_6', _7 = '_7', _8 = '_8', _9 = '_9', _10 = '_10', _11 = '_11', _12 = '_12', _13 = '_13', _14 = '_14', _15 = '_15', _16 = '_16', _17 = '_17', _18 = '_18', _19 = '_19', _20 = '_20', _21 = '_21', _22 = '_22', _23 = '_23', _24 = '_24', _25 = '_25', _26 = '_26', _27 = '_27', _28 = '_28', _29 = '_29', _30 = '_30', _31 = '_31', _32 = '_32', _33 = '_33', _34 = '_34', _35 = '_35', _36 = '_36', _37 = '_37', _38 = '_38', _39 = '_39', _40 = '_40';	
+	export let b = 'b';
+	let dummy = 0;
+	function increment () {
+		dummy = 1;
+	}
+</script>
+
+<p>{_0}{_1}{_2}{_3}{_4}{_5}{_6}{_7}{_8}{_9}{_10}{_11}{_12}{_13}{_14}{_15}{_16}{_17}{_18}{_19}{_20}{_21}{_22}{_23}{_24}{_25}{_26}{_27}{_28}{_29}{_30}{_31}{_32}{_33}{_34}{_35}{_36}{_37}{_38}{_39}{_40}</p>
+<p>{b}</p>
+<slot dummy={dummy}></slot>
+<button on:click={increment}></button>
\ No newline at end of file
diff --git a/test/runtime/samples/bitmask-overflow-slot-5/_config.js b/test/runtime/samples/bitmask-overflow-slot-5/_config.js
new file mode 100644
index 0000000000..80900d0042
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-slot-5/_config.js
@@ -0,0 +1,49 @@
+export default {
+	html: `
+		<p>_0_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39_40</p>
+		<p>b</p>
+		<p>-0-1-2-3-4-5-6-7-8-9-10-11-12-13-14-15-16-17-18-19-20-21-22-23-24-25-26-27-28-29-30-31-32-33-34-35-36-37-38-39-40</p>
+		<p>0</p>
+		<p>0</p>
+		<button></button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		// change from inside
+		const button = target.querySelector('button');
+		await button.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>_0_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39_40</p>
+			<p>b</p>
+			<p>-0-1-2-3-4-5-6-7-8-9-10-11-12-13-14-15-16-17-18-19-20-21-22-23-24-25-26-27-28-29-30-31-32-33-34-35-36-37-38-39-40</p>
+			<p>0</p>
+			<p>1</p>
+			<button></button>
+		`);
+
+		// change from outside
+		component.a = 'AA';
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>_0_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39_40</p>
+			<p>b</p>
+			<p>-0-1-2-3-4-5-6-7-8-9-10-11-12-13-14-15-16-17-18-19-20-21-22-23-24-25-26-27-28-29-30-31-32-33-34-35-36-37-38-39-40</p>
+			<p>AA</p>
+			<p>1</p>
+			<button></button>
+		`);
+
+		// change from outside through props
+		component.b = 'BB';
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>_0_1_2_3_4_5_6_7_8_9_10_11_12_13_14_15_16_17_18_19_20_21_22_23_24_25_26_27_28_29_30_31_32_33_34_35_36_37_38_39_40</p>
+			<p>BB</p>
+			<p>-0-1-2-3-4-5-6-7-8-9-10-11-12-13-14-15-16-17-18-19-20-21-22-23-24-25-26-27-28-29-30-31-32-33-34-35-36-37-38-39-40</p>
+			<p>AA</p>
+			<p>1</p>
+			<button></button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/bitmask-overflow-slot-5/main.svelte b/test/runtime/samples/bitmask-overflow-slot-5/main.svelte
new file mode 100644
index 0000000000..b17d6f7bae
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-slot-5/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Echo from './Echo.svelte';
+	export let _0 = '-0', _1 = '-1', _2 = '-2', _3 = '-3', _4 = '-4', _5 = '-5', _6 = '-6', _7 = '-7', _8 = '-8', _9 = '-9', _10 = '-10', _11 = '-11', _12 = '-12', _13 = '-13', _14 = '-14', _15 = '-15', _16 = '-16', _17 = '-17', _18 = '-18', _19 = '-19', _20 = '-20', _21 = '-21', _22 = '-22', _23 = '-23', _24 = '-24', _25 = '-25', _26 = '-26', _27 = '-27', _28 = '-28', _29 = '-29', _30 = '-30', _31 = '-31', _32 = '-32', _33 = '-33', _34 = '-34', _35 = '-35', _36 = '-36', _37 = '-37', _38 = '-38', _39 = '-39', _40 = '-40';	
+	export let a = 0, b;
+	
+</script>
+
+<Echo b={b} let:dummy>
+	<p>{_0}{_1}{_2}{_3}{_4}{_5}{_6}{_7}{_8}{_9}{_10}{_11}{_12}{_13}{_14}{_15}{_16}{_17}{_18}{_19}{_20}{_21}{_22}{_23}{_24}{_25}{_26}{_27}{_28}{_29}{_30}{_31}{_32}{_33}{_34}{_35}{_36}{_37}{_38}{_39}{_40}</p>
+	<p>{a}</p>
+	<p>{dummy}</p>
+</Echo>
+
diff --git a/test/runtime/samples/bitmask-overflow-slot-6/Slotted.svelte b/test/runtime/samples/bitmask-overflow-slot-6/Slotted.svelte
new file mode 100644
index 0000000000..322a31359e
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-slot-6/Slotted.svelte
@@ -0,0 +1,15 @@
+<script>
+	let open = false;
+	function toggle() {
+		open = !open;
+	}
+</script>
+
+<div on:click={toggle}>
+ <slot name="target" {open}></slot>
+	
+	<!-- This actually isn't necessary to reproduce. -->
+	{#if open}
+ 	  <slot name="content"></slot>
+	{/if}
+</div>
diff --git a/test/runtime/samples/bitmask-overflow-slot-6/_config.js b/test/runtime/samples/bitmask-overflow-slot-6/_config.js
new file mode 100644
index 0000000000..3bcf4b98e4
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-slot-6/_config.js
@@ -0,0 +1,32 @@
+// overflow bitmask + slot missing `let:`
+export default {
+	html: `
+		<div>
+			<button slot="target">Toggle inside 1</button>
+		</div>
+		<button>Toggle outside</button>
+	`,
+
+	async test({ assert, target, window }) {
+		const button = target.querySelectorAll('button')[1];
+		const div = target.querySelector('div');
+		await div.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<button slot="target">Toggle inside 1</button>
+				<div slot="content">Open</div>
+			</div>
+			<button>Toggle outside</button>
+		`);
+
+		await button.dispatchEvent(new window.MouseEvent('click'));
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<button slot="target">Toggle inside 2</button>
+				<div slot="content">Open</div>
+			</div>
+			<button>Toggle outside</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/bitmask-overflow-slot-6/main.svelte b/test/runtime/samples/bitmask-overflow-slot-6/main.svelte
new file mode 100644
index 0000000000..8845cb2ef5
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-slot-6/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import Slotted from './Slotted.svelte';
+	let lotsOfNumbers = Array.from({length: 50}, () => 1);
+	
+	let [a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z, aa, ab, ac, ad, ae, af, ag, ah] = lotsOfNumbers;
+	
+	let last = 1;
+	function toggle () {
+		last = 2;
+	}
+</script>
+
+<Slotted>
+	<button slot="target">
+		Toggle inside {last} 
+	</button>
+	
+	<div slot="content">
+		Open
+	</div>
+</Slotted>
+
+<button on:click={toggle}>Toggle outside</button>
\ No newline at end of file
diff --git a/test/runtime/samples/bitmask-overflow-slot/Echo.svelte b/test/runtime/samples/bitmask-overflow-slot/Echo.svelte
new file mode 100644
index 0000000000..28eaa54060
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-slot/Echo.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let dummy;
+</script>
+
+<slot dummy={dummy}></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/bitmask-overflow-slot/_config.js b/test/runtime/samples/bitmask-overflow-slot/_config.js
new file mode 100644
index 0000000000..a14ef3270f
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-slot/_config.js
@@ -0,0 +1,124 @@
+export default {
+	html: `
+		<p>0</p>
+		<p>1</p>
+		<p>2</p>
+		<p>3</p>
+		<p>4</p>
+		<p>5</p>
+		<p>6</p>
+		<p>7</p>
+		<p>8</p>
+		<p>9</p>
+		<p>10</p>
+		<p>11</p>
+		<p>12</p>
+		<p>13</p>
+		<p>14</p>
+		<p>15</p>
+		<p>16</p>
+		<p>17</p>
+		<p>18</p>
+		<p>19</p>
+		<p>20</p>
+		<p>21</p>
+		<p>22</p>
+		<p>23</p>
+		<p>24</p>
+		<p>25</p>
+		<p>26</p>
+		<p>27</p>
+		<p>28</p>
+		<p>29</p>
+		<p>30</p>
+		<p>31</p>
+		<p>32</p>
+		<p>33</p>
+		<p>34</p>
+		<p>35</p>
+		<p>36</p>
+		<p>37</p>
+		<p>38</p>
+		<p>39</p>
+		<p>40</p>
+		<p>5:36</p>
+		<p>6:37</p>
+		<p>38</p>
+		<p>0</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.reads = {};
+
+		component._0 = 'a';
+		component._30 = 'b';
+		component._31 = 'c';
+		component._32 = 'd';
+		component._40 = 'e';
+
+		component._5 = 'f';
+		component._6 = 'g';
+		component._36 = 'h';
+		component._37 = 'i';
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>a</p>
+			<p>1</p>
+			<p>2</p>
+			<p>3</p>
+			<p>4</p>
+			<p>f</p>
+			<p>g</p>
+			<p>7</p>
+			<p>8</p>
+			<p>9</p>
+			<p>10</p>
+			<p>11</p>
+			<p>12</p>
+			<p>13</p>
+			<p>14</p>
+			<p>15</p>
+			<p>16</p>
+			<p>17</p>
+			<p>18</p>
+			<p>19</p>
+			<p>20</p>
+			<p>21</p>
+			<p>22</p>
+			<p>23</p>
+			<p>24</p>
+			<p>25</p>
+			<p>26</p>
+			<p>27</p>
+			<p>28</p>
+			<p>29</p>
+			<p>b</p>
+			<p>c</p>
+			<p>d</p>
+			<p>33</p>
+			<p>34</p>
+			<p>35</p>
+			<p>h</p>
+			<p>i</p>
+			<p>38</p>
+			<p>39</p>
+			<p>e</p>
+			<p>f:h</p>
+			<p>g:i</p>
+			<p>38</p>
+			<p>a</p>
+		`);
+
+		assert.deepEqual(component.reads, {
+			_0: 1,
+			_5: 3,
+			_6: 3,
+			_30: 1,
+			_31: 1,
+			_32: 1,
+			_36: 3,
+			_37: 3,
+			_40: 1
+		});
+	}
+};
diff --git a/test/runtime/samples/bitmask-overflow-slot/main.svelte b/test/runtime/samples/bitmask-overflow-slot/main.svelte
new file mode 100644
index 0000000000..89e60ce4b9
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow-slot/main.svelte
@@ -0,0 +1,107 @@
+<script>
+	import Echo from './Echo.svelte';
+
+	export let reads = {};
+
+	export let _0 = '0';
+	export let _1 = '1';
+	export let _2 = '2';
+	export let _3 = '3';
+	export let _4 = '4';
+	export let _5 = '5';
+	export let _6 = '6';
+	export let _7 = '7';
+	export let _8 = '8';
+	export let _9 = '9';
+	export let _10 = '10';
+	export let _11 = '11';
+	export let _12 = '12';
+	export let _13 = '13';
+	export let _14 = '14';
+	export let _15 = '15';
+	export let _16 = '16';
+	export let _17 = '17';
+	export let _18 = '18';
+	export let _19 = '19';
+	export let _20 = '20';
+	export let _21 = '21';
+	export let _22 = '22';
+	export let _23 = '23';
+	export let _24 = '24';
+	export let _25 = '25';
+	export let _26 = '26';
+	export let _27 = '27';
+	export let _28 = '28';
+	export let _29 = '29';
+	export let _30 = '30';
+	export let _31 = '31';
+	export let _32 = '32';
+	export let _33 = '33';
+	export let _34 = '34';
+	export let _35 = '35';
+	export let _36 = '36';
+	export let _37 = '37';
+	export let _38 = '38';
+	export let _39 = '39';
+	export let _40 = '40';
+
+	$: foo = read(_6, '_6') + ':' + read(_37, '_37');
+	$: bar = read(_38, '_38');
+
+	const read = (value, label) => {
+		if (!reads[label]) reads[label] = 0;
+		reads[label] += 1;
+
+		return value;
+	};
+</script>
+
+<Echo dummy={_0} let:dummy>
+	<p>{read(_0, '_0')}</p>
+	<p>{read(_1, '_1')}</p>
+	<p>{read(_2, '_2')}</p>
+	<p>{read(_3, '_3')}</p>
+	<p>{read(_4, '_4')}</p>
+	<p>{read(_5, '_5')}</p>
+	<p>{read(_6, '_6')}</p>
+	<p>{read(_7, '_7')}</p>
+	<p>{read(_8, '_8')}</p>
+	<p>{read(_9, '_9')}</p>
+	<p>{read(_10, '_10')}</p>
+	<p>{read(_11, '_11')}</p>
+	<p>{read(_12, '_12')}</p>
+	<p>{read(_13, '_13')}</p>
+	<p>{read(_14, '_14')}</p>
+	<p>{read(_15, '_15')}</p>
+	<p>{read(_16, '_16')}</p>
+	<p>{read(_17, '_17')}</p>
+	<p>{read(_18, '_18')}</p>
+	<p>{read(_19, '_19')}</p>
+	<p>{read(_20, '_20')}</p>
+	<p>{read(_21, '_21')}</p>
+	<p>{read(_22, '_22')}</p>
+	<p>{read(_23, '_23')}</p>
+	<p>{read(_24, '_24')}</p>
+	<p>{read(_25, '_25')}</p>
+	<p>{read(_26, '_26')}</p>
+	<p>{read(_27, '_27')}</p>
+	<p>{read(_28, '_28')}</p>
+	<p>{read(_29, '_29')}</p>
+	<p>{read(_30, '_30')}</p>
+	<p>{read(_31, '_31')}</p>
+	<p>{read(_32, '_32')}</p>
+	<p>{read(_33, '_33')}</p>
+	<p>{read(_34, '_34')}</p>
+	<p>{read(_35, '_35')}</p>
+	<p>{read(_36, '_36')}</p>
+	<p>{read(_37, '_37')}</p>
+	<p>{read(_38, '_38')}</p>
+	<p>{read(_39, '_39')}</p>
+	<p>{read(_40, '_40')}</p>
+
+	<p>{read(_5, '_5') + ':' + read(_36, '_36')}</p>
+	<p>{foo}</p>
+	<p>{bar}</p>
+
+	<p>{dummy}</p>
+</Echo>
\ No newline at end of file
diff --git a/test/runtime/samples/bitmask-overflow/_config.js b/test/runtime/samples/bitmask-overflow/_config.js
new file mode 100644
index 0000000000..e5e54ac10e
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow/_config.js
@@ -0,0 +1,122 @@
+export default {
+	html: `
+		<p>0</p>
+		<p>1</p>
+		<p>2</p>
+		<p>3</p>
+		<p>4</p>
+		<p>5</p>
+		<p>6</p>
+		<p>7</p>
+		<p>8</p>
+		<p>9</p>
+		<p>10</p>
+		<p>11</p>
+		<p>12</p>
+		<p>13</p>
+		<p>14</p>
+		<p>15</p>
+		<p>16</p>
+		<p>17</p>
+		<p>18</p>
+		<p>19</p>
+		<p>20</p>
+		<p>21</p>
+		<p>22</p>
+		<p>23</p>
+		<p>24</p>
+		<p>25</p>
+		<p>26</p>
+		<p>27</p>
+		<p>28</p>
+		<p>29</p>
+		<p>30</p>
+		<p>31</p>
+		<p>32</p>
+		<p>33</p>
+		<p>34</p>
+		<p>35</p>
+		<p>36</p>
+		<p>37</p>
+		<p>38</p>
+		<p>39</p>
+		<p>40</p>
+		<p>5:36</p>
+		<p>6:37</p>
+		<p>38</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.reads = {};
+
+		component._0 = 'a';
+		component._30 = 'b';
+		component._31 = 'c';
+		component._32 = 'd';
+		component._40 = 'e';
+
+		component._5 = 'f';
+		component._6 = 'g';
+		component._36 = 'h';
+		component._37 = 'i';
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>a</p>
+			<p>1</p>
+			<p>2</p>
+			<p>3</p>
+			<p>4</p>
+			<p>f</p>
+			<p>g</p>
+			<p>7</p>
+			<p>8</p>
+			<p>9</p>
+			<p>10</p>
+			<p>11</p>
+			<p>12</p>
+			<p>13</p>
+			<p>14</p>
+			<p>15</p>
+			<p>16</p>
+			<p>17</p>
+			<p>18</p>
+			<p>19</p>
+			<p>20</p>
+			<p>21</p>
+			<p>22</p>
+			<p>23</p>
+			<p>24</p>
+			<p>25</p>
+			<p>26</p>
+			<p>27</p>
+			<p>28</p>
+			<p>29</p>
+			<p>b</p>
+			<p>c</p>
+			<p>d</p>
+			<p>33</p>
+			<p>34</p>
+			<p>35</p>
+			<p>h</p>
+			<p>i</p>
+			<p>38</p>
+			<p>39</p>
+			<p>e</p>
+			<p>f:h</p>
+			<p>g:i</p>
+			<p>38</p>
+		`);
+
+		assert.deepEqual(component.reads, {
+			_0: 1,
+			_5: 3,
+			_6: 3,
+			_30: 1,
+			_31: 1,
+			_32: 1,
+			_36: 3,
+			_37: 3,
+			_40: 1
+		});
+	}
+};
diff --git a/test/runtime/samples/bitmask-overflow/main.svelte b/test/runtime/samples/bitmask-overflow/main.svelte
new file mode 100644
index 0000000000..32eb8802da
--- /dev/null
+++ b/test/runtime/samples/bitmask-overflow/main.svelte
@@ -0,0 +1,101 @@
+<script>
+	export let reads = {};
+
+	export let _0 = '0';
+	export let _1 = '1';
+	export let _2 = '2';
+	export let _3 = '3';
+	export let _4 = '4';
+	export let _5 = '5';
+	export let _6 = '6';
+	export let _7 = '7';
+	export let _8 = '8';
+	export let _9 = '9';
+	export let _10 = '10';
+	export let _11 = '11';
+	export let _12 = '12';
+	export let _13 = '13';
+	export let _14 = '14';
+	export let _15 = '15';
+	export let _16 = '16';
+	export let _17 = '17';
+	export let _18 = '18';
+	export let _19 = '19';
+	export let _20 = '20';
+	export let _21 = '21';
+	export let _22 = '22';
+	export let _23 = '23';
+	export let _24 = '24';
+	export let _25 = '25';
+	export let _26 = '26';
+	export let _27 = '27';
+	export let _28 = '28';
+	export let _29 = '29';
+	export let _30 = '30';
+	export let _31 = '31';
+	export let _32 = '32';
+	export let _33 = '33';
+	export let _34 = '34';
+	export let _35 = '35';
+	export let _36 = '36';
+	export let _37 = '37';
+	export let _38 = '38';
+	export let _39 = '39';
+	export let _40 = '40';
+
+	$: foo = read(_6, '_6') + ':' + read(_37, '_37');
+	$: bar = read(_38, '_38');
+
+	const read = (value, label) => {
+		if (!reads[label]) reads[label] = 0;
+		reads[label] += 1;
+
+		return value;
+	};
+</script>
+
+<p>{read(_0, '_0')}</p>
+<p>{read(_1, '_1')}</p>
+<p>{read(_2, '_2')}</p>
+<p>{read(_3, '_3')}</p>
+<p>{read(_4, '_4')}</p>
+<p>{read(_5, '_5')}</p>
+<p>{read(_6, '_6')}</p>
+<p>{read(_7, '_7')}</p>
+<p>{read(_8, '_8')}</p>
+<p>{read(_9, '_9')}</p>
+<p>{read(_10, '_10')}</p>
+<p>{read(_11, '_11')}</p>
+<p>{read(_12, '_12')}</p>
+<p>{read(_13, '_13')}</p>
+<p>{read(_14, '_14')}</p>
+<p>{read(_15, '_15')}</p>
+<p>{read(_16, '_16')}</p>
+<p>{read(_17, '_17')}</p>
+<p>{read(_18, '_18')}</p>
+<p>{read(_19, '_19')}</p>
+<p>{read(_20, '_20')}</p>
+<p>{read(_21, '_21')}</p>
+<p>{read(_22, '_22')}</p>
+<p>{read(_23, '_23')}</p>
+<p>{read(_24, '_24')}</p>
+<p>{read(_25, '_25')}</p>
+<p>{read(_26, '_26')}</p>
+<p>{read(_27, '_27')}</p>
+<p>{read(_28, '_28')}</p>
+<p>{read(_29, '_29')}</p>
+<p>{read(_30, '_30')}</p>
+<p>{read(_31, '_31')}</p>
+<p>{read(_32, '_32')}</p>
+<p>{read(_33, '_33')}</p>
+<p>{read(_34, '_34')}</p>
+<p>{read(_35, '_35')}</p>
+<p>{read(_36, '_36')}</p>
+<p>{read(_37, '_37')}</p>
+<p>{read(_38, '_38')}</p>
+<p>{read(_39, '_39')}</p>
+<p>{read(_40, '_40')}</p>
+
+<p>{read(_5, '_5') + ':' + read(_36, '_36')}</p>
+<p>{foo}</p>
+<p>{bar}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/class-boolean/_config.js b/test/runtime/samples/class-boolean/_config.js
new file mode 100644
index 0000000000..ac02a1a425
--- /dev/null
+++ b/test/runtime/samples/class-boolean/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<div class="one"></div>'
+};
diff --git a/test/runtime/samples/class-boolean/main.svelte b/test/runtime/samples/class-boolean/main.svelte
new file mode 100644
index 0000000000..226476816b
--- /dev/null
+++ b/test/runtime/samples/class-boolean/main.svelte
@@ -0,0 +1 @@
+<div class:one={true}></div>
\ No newline at end of file
diff --git a/test/runtime/samples/class-helper/_config.js b/test/runtime/samples/class-helper/_config.js
new file mode 100644
index 0000000000..6a62476493
--- /dev/null
+++ b/test/runtime/samples/class-helper/_config.js
@@ -0,0 +1,15 @@
+export default {
+	props: {
+		user: { active: true }
+	},
+
+	html: '<div class="active"></div>',
+
+	test({ assert, component, target }) {
+		component.user = { active: false };
+
+		assert.htmlEqual(target.innerHTML, `
+			<div class></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/class-helper/main.svelte b/test/runtime/samples/class-helper/main.svelte
new file mode 100644
index 0000000000..c25b58b7f2
--- /dev/null
+++ b/test/runtime/samples/class-helper/main.svelte
@@ -0,0 +1,9 @@
+<script>
+  export let user;
+
+  function isActive(user) {
+  return user.active;
+}
+</script>
+
+<div class:active={isActive(user)}></div>
\ No newline at end of file
diff --git a/test/runtime/samples/class-in-each/_config.js b/test/runtime/samples/class-in-each/_config.js
new file mode 100644
index 0000000000..9ce2b5db8c
--- /dev/null
+++ b/test/runtime/samples/class-in-each/_config.js
@@ -0,0 +1,21 @@
+export default {
+	props: {
+		things: ['one', 'two', 'three'],
+		selected: 'two'
+	},
+
+	html: `
+		<div></div>
+		<div class="selected"></div>
+		<div></div>
+	`,
+
+	test({ assert, component, target }) {
+		component.selected = 'three';
+		assert.htmlEqual(target.innerHTML, `
+			<div></div>
+			<div class=""></div>
+			<div class="selected"></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/class-in-each/main.svelte b/test/runtime/samples/class-in-each/main.svelte
new file mode 100644
index 0000000000..c7b5d4b1b6
--- /dev/null
+++ b/test/runtime/samples/class-in-each/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let things;
+	export let selected;
+</script>
+
+{#each things as thing}
+	<div class:selected="{selected === thing}"></div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/class-shortcut-with-class/_config.js b/test/runtime/samples/class-shortcut-with-class/_config.js
new file mode 100644
index 0000000000..5f2f28555e
--- /dev/null
+++ b/test/runtime/samples/class-shortcut-with-class/_config.js
@@ -0,0 +1,17 @@
+export default {
+	props: {
+		foo: true,
+		bar: true,
+		myClass: 'one two'
+	},
+
+	html: '<div class="one two foo bar"></div>',
+
+	test({ assert, component, target }) {
+		component.foo = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div class="one two bar"></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/class-shortcut-with-class/main.svelte b/test/runtime/samples/class-shortcut-with-class/main.svelte
new file mode 100644
index 0000000000..12cde899cc
--- /dev/null
+++ b/test/runtime/samples/class-shortcut-with-class/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let myClass;
+	export let foo;
+	export let bar;
+	export let unused;
+</script>
+
+<div class={myClass} class:foo class:bar class:unused></div>
\ No newline at end of file
diff --git a/test/runtime/samples/class-shortcut/_config.js b/test/runtime/samples/class-shortcut/_config.js
new file mode 100644
index 0000000000..ac5be276b0
--- /dev/null
+++ b/test/runtime/samples/class-shortcut/_config.js
@@ -0,0 +1,16 @@
+export default {
+	props: {
+		foo: true,
+		bar: true
+	},
+
+	html: '<div class="foo bar"></div>',
+
+	test({ assert, component, target }) {
+		component.foo = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div class="bar"></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/class-shortcut/main.svelte b/test/runtime/samples/class-shortcut/main.svelte
new file mode 100644
index 0000000000..f98b8ed351
--- /dev/null
+++ b/test/runtime/samples/class-shortcut/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo;
+	export let bar;
+	export let unused;
+</script>
+
+<div class:foo class:bar class:unused></div>
\ No newline at end of file
diff --git a/test/runtime/samples/class-with-attribute/_config.js b/test/runtime/samples/class-with-attribute/_config.js
new file mode 100644
index 0000000000..7550b215ab
--- /dev/null
+++ b/test/runtime/samples/class-with-attribute/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<div class="one two three"></div>'
+};
diff --git a/test/runtime/samples/class-with-attribute/main.svelte b/test/runtime/samples/class-with-attribute/main.svelte
new file mode 100644
index 0000000000..abe0b005db
--- /dev/null
+++ b/test/runtime/samples/class-with-attribute/main.svelte
@@ -0,0 +1 @@
+<div class="one" class:two={true} class:three={true}></div>
\ No newline at end of file
diff --git a/test/runtime/samples/class-with-dynamic-attribute-and-spread/_config.js b/test/runtime/samples/class-with-dynamic-attribute-and-spread/_config.js
new file mode 100644
index 0000000000..0c357926e2
--- /dev/null
+++ b/test/runtime/samples/class-with-dynamic-attribute-and-spread/_config.js
@@ -0,0 +1,21 @@
+export default {
+	props: {
+		myClass: 'one two',
+		attributes: {
+			role: 'button'
+		}
+	},
+
+	html: '<div class="one two three" role="button"></div>',
+
+	test({ assert, component, target }) {
+		component.myClass = 'one';
+		component.attributes = {
+			'aria-label': 'Test'
+		};
+
+		assert.htmlEqual(target.innerHTML, `
+			<div class="one three" aria-label="Test"></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/class-with-dynamic-attribute-and-spread/main.svelte b/test/runtime/samples/class-with-dynamic-attribute-and-spread/main.svelte
new file mode 100644
index 0000000000..95825c777b
--- /dev/null
+++ b/test/runtime/samples/class-with-dynamic-attribute-and-spread/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let myClass;
+	export let attributes = {};
+</script>
+
+<div class={myClass} class:three={true} {...attributes}></div>
diff --git a/test/runtime/samples/class-with-dynamic-attribute/_config.js b/test/runtime/samples/class-with-dynamic-attribute/_config.js
new file mode 100644
index 0000000000..8e05c72065
--- /dev/null
+++ b/test/runtime/samples/class-with-dynamic-attribute/_config.js
@@ -0,0 +1,15 @@
+export default {
+	props: {
+		myClass: 'one two'
+	},
+
+	html: '<div class="one two three"></div>',
+
+	test({ assert, component, target }) {
+		component.myClass = 'one';
+
+		assert.htmlEqual(target.innerHTML, `
+			<div class="one three"></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/class-with-dynamic-attribute/main.svelte b/test/runtime/samples/class-with-dynamic-attribute/main.svelte
new file mode 100644
index 0000000000..3752c025d2
--- /dev/null
+++ b/test/runtime/samples/class-with-dynamic-attribute/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let myClass;
+</script>
+
+<div class={myClass} class:three={true}></div>
\ No newline at end of file
diff --git a/test/runtime/samples/class-with-spread-and-bind/_config.js b/test/runtime/samples/class-with-spread-and-bind/_config.js
new file mode 100644
index 0000000000..d1f3503b6c
--- /dev/null
+++ b/test/runtime/samples/class-with-spread-and-bind/_config.js
@@ -0,0 +1,18 @@
+export default {
+	props: {
+		primary: true
+	},
+
+	html: '<div class="test-class primary" role="button"></div>',
+
+	test({ assert, component, target }) {
+		component.primary = true;
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div class="test-class primary" role="button"></div>
+		`
+		);
+	}
+};
diff --git a/test/runtime/samples/class-with-spread-and-bind/main.svelte b/test/runtime/samples/class-with-spread-and-bind/main.svelte
new file mode 100644
index 0000000000..c7c24a2e7b
--- /dev/null
+++ b/test/runtime/samples/class-with-spread-and-bind/main.svelte
@@ -0,0 +1,11 @@
+<script>	
+	let primary = true;	
+	let elem;
+</script>
+
+<div
+	bind:this={elem}
+	class="test-class"
+	class:primary
+  {...{ role: 'button' }} 
+></div>
diff --git a/test/runtime/samples/class-with-spread/_config.js b/test/runtime/samples/class-with-spread/_config.js
new file mode 100644
index 0000000000..d49b3f053e
--- /dev/null
+++ b/test/runtime/samples/class-with-spread/_config.js
@@ -0,0 +1,21 @@
+export default {
+	props: {
+		myClass: 'one two',
+		attributes: {
+			role: 'button'
+		}
+	},
+
+	html: '<div class="one two" role="button"></div>',
+
+	test({ assert, component, target }) {
+		component.myClass = 'one';
+		component.attributes = {
+			'aria-label': 'Test'
+		};
+
+		assert.htmlEqual(target.innerHTML, `
+			<div class="one" aria-label="Test"></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/class-with-spread/main.svelte b/test/runtime/samples/class-with-spread/main.svelte
new file mode 100644
index 0000000000..54d8088581
--- /dev/null
+++ b/test/runtime/samples/class-with-spread/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let myClass;
+	export let attributes = {};
+</script>
+
+<div class={myClass} {...attributes}></div>
diff --git a/test/runtime/samples/component-binding-accessors/Nested.svelte b/test/runtime/samples/component-binding-accessors/Nested.svelte
new file mode 100644
index 0000000000..a3ce2afd9f
--- /dev/null
+++ b/test/runtime/samples/component-binding-accessors/Nested.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let value;
+</script>
+
+<input bind:value />
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-accessors/_config.js b/test/runtime/samples/component-binding-accessors/_config.js
new file mode 100644
index 0000000000..4513b43a0b
--- /dev/null
+++ b/test/runtime/samples/component-binding-accessors/_config.js
@@ -0,0 +1,18 @@
+export default {
+	async test({ assert, target, window }) {
+		const [input1, input2] = target.querySelectorAll('input');
+		assert.equal(input1.value, 'something');
+		assert.equal(input2.value, 'something');
+
+		input1.value = 'abc';
+
+		await input1.dispatchEvent(new window.Event('input'));
+		assert.equal(input1.value, 'abc');
+		assert.equal(input2.value, 'abc');
+
+		await target.querySelector('button').dispatchEvent(new window.MouseEvent('click'));
+
+		assert.equal(input1.value, 'Reset');
+		assert.equal(input2.value, 'Reset');
+	}
+};
diff --git a/test/runtime/samples/component-binding-accessors/main.svelte b/test/runtime/samples/component-binding-accessors/main.svelte
new file mode 100644
index 0000000000..1d8576643d
--- /dev/null
+++ b/test/runtime/samples/component-binding-accessors/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Nested from './Nested.svelte';
+	let value = 'something'
+	let c;
+</script>
+
+<Nested bind:this={c} bind:value />
+<input bind:value />
+
+<button on:click={() => {
+	c.value = 'Reset';
+}}>Reset</button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-aliased/Widget.svelte b/test/runtime/samples/component-binding-aliased/Widget.svelte
new file mode 100644
index 0000000000..7d173df210
--- /dev/null
+++ b/test/runtime/samples/component-binding-aliased/Widget.svelte
@@ -0,0 +1,4 @@
+<script>
+	let foo = 42;
+	export { foo as bar };
+</script>
diff --git a/test/runtime/samples/component-binding-aliased/_config.js b/test/runtime/samples/component-binding-aliased/_config.js
new file mode 100644
index 0000000000..4898d1e993
--- /dev/null
+++ b/test/runtime/samples/component-binding-aliased/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<div>42</div>
+	`
+};
diff --git a/test/runtime/samples/component-binding-aliased/main.svelte b/test/runtime/samples/component-binding-aliased/main.svelte
new file mode 100644
index 0000000000..a262c675ea
--- /dev/null
+++ b/test/runtime/samples/component-binding-aliased/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Widget from './Widget.svelte';
+	let bar;
+</script>
+
+<Widget bind:bar/>
+
+<div>{bar}</div>
diff --git a/test/runtime/samples/component-binding-blowback-b/Nested.svelte b/test/runtime/samples/component-binding-blowback-b/Nested.svelte
new file mode 100644
index 0000000000..2255fe6e17
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback-b/Nested.svelte
@@ -0,0 +1,21 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let value;
+	export let id;
+
+	const initialValues = {
+		'id-0': 'zero',
+		'id-1': 'one',
+		'id-2': 'two',
+		'id-3': 'three'
+	};
+
+	onMount(() => {
+		value = initialValues[id];
+	});
+</script>
+
+<li>
+	<slot></slot>
+</li>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-blowback-b/_config.js b/test/runtime/samples/component-binding-blowback-b/_config.js
new file mode 100644
index 0000000000..2f6350c4fb
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback-b/_config.js
@@ -0,0 +1,33 @@
+export default {
+	skip_if_ssr: true,
+
+	props: {
+		count: 3
+	},
+
+	html: `
+		<input type='number'>
+		<ol>
+			<li>id-0: value is zero</li>
+			<li>id-1: value is one</li>
+			<li>id-2: value is two</li>
+		</ol>
+	`,
+
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+
+		input.value = 4;
+		await input.dispatchEvent(new window.Event('input'));
+
+		assert.htmlEqual(target.innerHTML, `
+			<input type='number'>
+			<ol>
+				<li>id-0: value is zero</li>
+				<li>id-1: value is one</li>
+				<li>id-2: value is two</li>
+				<li>id-3: value is three</li>
+			</ol>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-blowback-b/main.svelte b/test/runtime/samples/component-binding-blowback-b/main.svelte
new file mode 100644
index 0000000000..92a618f67c
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback-b/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let count;
+	export let idToValue = Object.create(null);
+	let ids;
+
+	$: ids = new Array(count)
+		.fill(null)
+		.map((_, i) => 'id-' + i);
+</script>
+
+<input type='number' bind:value={count}>
+
+<ol>
+	{#each ids as id}
+		<Nested {id} bind:value={idToValue[id]}>
+			{id}: value is {idToValue[id]}
+		</Nested>
+	{/each}
+</ol>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-blowback-c/Nested.svelte b/test/runtime/samples/component-binding-blowback-c/Nested.svelte
new file mode 100644
index 0000000000..2255fe6e17
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback-c/Nested.svelte
@@ -0,0 +1,21 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let value;
+	export let id;
+
+	const initialValues = {
+		'id-0': 'zero',
+		'id-1': 'one',
+		'id-2': 'two',
+		'id-3': 'three'
+	};
+
+	onMount(() => {
+		value = initialValues[id];
+	});
+</script>
+
+<li>
+	<slot></slot>
+</li>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-blowback-c/_config.js b/test/runtime/samples/component-binding-blowback-c/_config.js
new file mode 100644
index 0000000000..5ff0ae34f6
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback-c/_config.js
@@ -0,0 +1,33 @@
+export default {
+	skip_if_ssr: true,
+
+	props: {
+		count: 3
+	},
+
+	html: `
+		<input type='number'>
+		<ol>
+			<li>id-2: value is two</li>
+			<li>id-1: value is one</li>
+			<li>id-0: value is zero</li>
+		</ol>
+	`,
+
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+
+		input.value = 4;
+		await input.dispatchEvent(new window.Event('input'));
+
+		assert.htmlEqual(target.innerHTML, `
+			<input type='number'>
+			<ol>
+				<li>id-3: value is three</li>
+				<li>id-2: value is two</li>
+				<li>id-1: value is one</li>
+				<li>id-0: value is zero</li>
+			</ol>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-blowback-c/main.svelte b/test/runtime/samples/component-binding-blowback-c/main.svelte
new file mode 100644
index 0000000000..75552bf358
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback-c/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let count;
+	export let idToValue = Object.create(null);
+
+	function ids(count) {
+		return new Array(count)
+			.fill(null)
+			.map((_, i) => ({ id: 'id-' + i}))
+			.reverse();
+	}
+</script>
+
+<input type='number' bind:value={count}>
+
+<ol>
+	{#each ids(count) as object (object.id)}
+		<Nested bind:value={idToValue[object.id]} id={object.id}>
+			{object.id}: value is {idToValue[object.id]}
+		</Nested>
+	{/each}
+</ol>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-blowback-d/One.svelte b/test/runtime/samples/component-binding-blowback-d/One.svelte
new file mode 100644
index 0000000000..f86da72ff2
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback-d/One.svelte
@@ -0,0 +1,18 @@
+<script>
+	import Two from './Two.svelte';
+
+	export let list;
+	export let i;
+
+	function handle_click() {
+		list = [...list, {}];
+	}
+</script>
+
+{#each list as item, j}
+	<Two bind:value={item.value} {i} {j}/>
+{/each}
+
+<button on:click={handle_click}>
+	click me
+</button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-blowback-d/Two.svelte b/test/runtime/samples/component-binding-blowback-d/Two.svelte
new file mode 100644
index 0000000000..b33a987b75
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback-d/Two.svelte
@@ -0,0 +1,4 @@
+<script>
+	export let i, j;
+	export let value = `${i}:${j}`;
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-blowback-d/_config.js b/test/runtime/samples/component-binding-blowback-d/_config.js
new file mode 100644
index 0000000000..1716eb6ff9
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback-d/_config.js
@@ -0,0 +1,23 @@
+export default {
+	html: `
+		<button>click me</button>
+		<button>click me</button>
+
+		<p>{"value":"0:0"}</p>
+		<p></p>
+	`,
+
+	async test({ assert, target, window }) {
+		const button = target.querySelectorAll('button')[1];
+
+		await button.dispatchEvent(new window.Event('click'));
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>click me</button>
+			<button>click me</button>
+
+			<p>{"value":"0:0"}</p>
+			<p>{"value":"1:0"}</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-blowback-d/main.svelte b/test/runtime/samples/component-binding-blowback-d/main.svelte
new file mode 100644
index 0000000000..d6e9412618
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback-d/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import One from "./One.svelte";
+
+	const obj = {
+		a: [{}],
+		b: []
+	};
+</script>
+
+<One bind:list={obj.a} i={0}/>
+<One bind:list={obj.b} i={1}/>
+
+<p>{obj.a.map(JSON.stringify)}</p>
+<p>{obj.b.map(JSON.stringify)}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-blowback-e/One.svelte b/test/runtime/samples/component-binding-blowback-e/One.svelte
new file mode 100644
index 0000000000..f86da72ff2
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback-e/One.svelte
@@ -0,0 +1,18 @@
+<script>
+	import Two from './Two.svelte';
+
+	export let list;
+	export let i;
+
+	function handle_click() {
+		list = [...list, {}];
+	}
+</script>
+
+{#each list as item, j}
+	<Two bind:value={item.value} {i} {j}/>
+{/each}
+
+<button on:click={handle_click}>
+	click me
+</button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-blowback-e/Two.svelte b/test/runtime/samples/component-binding-blowback-e/Two.svelte
new file mode 100644
index 0000000000..a622f559e2
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback-e/Two.svelte
@@ -0,0 +1,4 @@
+<script>
+	export let i, j;
+	export let value = { i, j };
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-blowback-e/_config.js b/test/runtime/samples/component-binding-blowback-e/_config.js
new file mode 100644
index 0000000000..1c0e6aa0e1
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback-e/_config.js
@@ -0,0 +1,23 @@
+export default {
+	html: `
+		<button>click me</button>
+		<button>click me</button>
+
+		<p>{"value":{"i":0,"j":0}}</p>
+		<p></p>
+	`,
+
+	async test({ assert, target, window }) {
+		const button = target.querySelectorAll('button')[1];
+
+		await button.dispatchEvent(new window.Event('click'));
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>click me</button>
+			<button>click me</button>
+
+			<p>{"value":{"i":0,"j":0}}</p>
+			<p>{"value":{"i":1,"j":0}}</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-blowback-e/main.svelte b/test/runtime/samples/component-binding-blowback-e/main.svelte
new file mode 100644
index 0000000000..d6e9412618
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback-e/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import One from "./One.svelte";
+
+	const obj = {
+		a: [{}],
+		b: []
+	};
+</script>
+
+<One bind:list={obj.a} i={0}/>
+<One bind:list={obj.b} i={1}/>
+
+<p>{obj.a.map(JSON.stringify)}</p>
+<p>{obj.b.map(JSON.stringify)}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-blowback-f/One.svelte b/test/runtime/samples/component-binding-blowback-f/One.svelte
new file mode 100644
index 0000000000..f86da72ff2
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback-f/One.svelte
@@ -0,0 +1,18 @@
+<script>
+	import Two from './Two.svelte';
+
+	export let list;
+	export let i;
+
+	function handle_click() {
+		list = [...list, {}];
+	}
+</script>
+
+{#each list as item, j}
+	<Two bind:value={item.value} {i} {j}/>
+{/each}
+
+<button on:click={handle_click}>
+	click me
+</button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-blowback-f/Two.svelte b/test/runtime/samples/component-binding-blowback-f/Two.svelte
new file mode 100644
index 0000000000..94caa7878d
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback-f/Two.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let i, j;
+	export let value;
+
+	onMount(() => {
+		value = { i, j };
+	});
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-blowback-f/_config.js b/test/runtime/samples/component-binding-blowback-f/_config.js
new file mode 100644
index 0000000000..46f6b379f6
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback-f/_config.js
@@ -0,0 +1,31 @@
+export default {
+	html: `
+		<button>click me</button>
+		<button>click me</button>
+
+		<p>{"value":{"i":0,"j":0}}</p>
+		<p></p>
+	`,
+
+	ssrHtml: `
+		<button>click me</button>
+		<button>click me</button>
+
+		<p>{}</p>
+		<p></p>
+	`,
+
+	async test({ assert, target, window }) {
+		const button = target.querySelectorAll('button')[1];
+
+		await button.dispatchEvent(new window.Event('click'));
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>click me</button>
+			<button>click me</button>
+
+			<p>{"value":{"i":0,"j":0}}</p>
+			<p>{"value":{"i":1,"j":0}}</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-blowback-f/main.svelte b/test/runtime/samples/component-binding-blowback-f/main.svelte
new file mode 100644
index 0000000000..d6e9412618
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback-f/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import One from "./One.svelte";
+
+	const obj = {
+		a: [{}],
+		b: []
+	};
+</script>
+
+<One bind:list={obj.a} i={0}/>
+<One bind:list={obj.b} i={1}/>
+
+<p>{obj.a.map(JSON.stringify)}</p>
+<p>{obj.b.map(JSON.stringify)}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-blowback/Widget.svelte b/test/runtime/samples/component-binding-blowback/Widget.svelte
new file mode 100644
index 0000000000..e88ac68005
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback/Widget.svelte
@@ -0,0 +1 @@
+<p>does nothing</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-blowback/_config.js b/test/runtime/samples/component-binding-blowback/_config.js
new file mode 100644
index 0000000000..964bb5547d
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback/_config.js
@@ -0,0 +1,12 @@
+export default {
+	test({ assert, component }) {
+		let count = 0;
+
+		component.$on('state', ({ changed }) => {
+			if (changed.bar) count += 1;
+		});
+
+		component.x = true;
+		assert.equal(count, 0);
+	}
+};
diff --git a/test/runtime/samples/component-binding-blowback/main.svelte b/test/runtime/samples/component-binding-blowback/main.svelte
new file mode 100644
index 0000000000..cd2e4d1c3b
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let x = false;
+	export let bar = {
+		baz: 42
+	};
+</script>
+
+{#if x}
+	<Widget bind:foo={bar.baz}/>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-computed/Nested.svelte b/test/runtime/samples/component-binding-computed/Nested.svelte
new file mode 100644
index 0000000000..e49410b7f7
--- /dev/null
+++ b/test/runtime/samples/component-binding-computed/Nested.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let value;
+	export let field;
+</script>
+
+<label>
+	{field} <input bind:value>
+</label>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-computed/_config.js b/test/runtime/samples/component-binding-computed/_config.js
new file mode 100644
index 0000000000..f43a6834a8
--- /dev/null
+++ b/test/runtime/samples/component-binding-computed/_config.js
@@ -0,0 +1,36 @@
+export default {
+	html: `
+		<label>firstname <input></label>
+		<label>lastname <input></label>
+	`,
+	ssrHtml: `
+		<label>firstname <input value=""></label>
+		<label>lastname <input value=""></label>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const input = new window.Event('input');
+		const inputs = target.querySelectorAll('input');
+
+		inputs[0].value = 'Ada';
+		await inputs[0].dispatchEvent(input);
+		assert.deepEqual(component.values, {
+			firstname: 'Ada',
+			lastname: ''
+		});
+
+		inputs[1].value = 'Lovelace';
+		await inputs[1].dispatchEvent(input);
+		assert.deepEqual(component.values, {
+			firstname: 'Ada',
+			lastname: 'Lovelace'
+		});
+
+		component.values = {
+			firstname: 'Grace',
+			lastname: 'Hopper'
+		};
+		assert.equal(inputs[0].value, 'Grace');
+		assert.equal(inputs[1].value, 'Hopper');
+	}
+};
diff --git a/test/runtime/samples/component-binding-computed/main.svelte b/test/runtime/samples/component-binding-computed/main.svelte
new file mode 100644
index 0000000000..e9b5a1be92
--- /dev/null
+++ b/test/runtime/samples/component-binding-computed/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let fields = ['firstname', 'lastname'];
+	export let values = {
+		firstname: '',
+		lastname: ''
+	};
+</script>
+
+{#each fields as field}
+	<Nested {field} bind:value={values[field]}/>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-conditional-b/Bar.svelte b/test/runtime/samples/component-binding-conditional-b/Bar.svelte
new file mode 100644
index 0000000000..a2357b74b5
--- /dev/null
+++ b/test/runtime/samples/component-binding-conditional-b/Bar.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let y = 'bar';
+</script>
+
+<p>y: {y}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-conditional-b/Baz.svelte b/test/runtime/samples/component-binding-conditional-b/Baz.svelte
new file mode 100644
index 0000000000..569f764754
--- /dev/null
+++ b/test/runtime/samples/component-binding-conditional-b/Baz.svelte
@@ -0,0 +1,3 @@
+<script>
+	export let x = true;
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-conditional-b/Foo.svelte b/test/runtime/samples/component-binding-conditional-b/Foo.svelte
new file mode 100644
index 0000000000..12835d6049
--- /dev/null
+++ b/test/runtime/samples/component-binding-conditional-b/Foo.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let y = 'foo';
+</script>
+
+<p>y: {y}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-conditional-b/_config.js b/test/runtime/samples/component-binding-conditional-b/_config.js
new file mode 100644
index 0000000000..9a48befe13
--- /dev/null
+++ b/test/runtime/samples/component-binding-conditional-b/_config.js
@@ -0,0 +1,24 @@
+export default {
+	skip_if_ssr: true, // TODO delete this line, once binding works
+
+	// This test fails, because the Bar y binding is activated before the
+	// Baz x binding, meaning that by the time Foo is created, we already
+	// have a value for y which Foo won't override. Easily worked around,
+	// probably impossible to 'fix', so this test is left here for info
+	// purposes but will probably remain skipped indefinitely.
+	skip: true,
+
+	html: `
+		<p>y: foo</p>
+		<p>y: foo</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.x = false;
+
+		assert.htmlEqual( target.innerHTML, `
+			<p>y: foo</p>
+			<p>y: foo</p>
+		` );
+	}
+};
diff --git a/test/runtime/samples/component-binding-conditional-b/main.svelte b/test/runtime/samples/component-binding-conditional-b/main.svelte
new file mode 100644
index 0000000000..568fb031fb
--- /dev/null
+++ b/test/runtime/samples/component-binding-conditional-b/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	import Foo from './Foo.svelte';
+	import Bar from './Bar.svelte';
+	import Baz from './Baz.svelte';
+
+	export let y;
+	export let x;
+</script>
+
+<p>y: {y}</p>
+
+<Baz bind:x/>
+
+{#if x}
+	<Foo bind:y/>
+{:else}
+	<Bar bind:y/>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-conditional/Bar.svelte b/test/runtime/samples/component-binding-conditional/Bar.svelte
new file mode 100644
index 0000000000..a2357b74b5
--- /dev/null
+++ b/test/runtime/samples/component-binding-conditional/Bar.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let y = 'bar';
+</script>
+
+<p>y: {y}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-conditional/Baz.svelte b/test/runtime/samples/component-binding-conditional/Baz.svelte
new file mode 100644
index 0000000000..569f764754
--- /dev/null
+++ b/test/runtime/samples/component-binding-conditional/Baz.svelte
@@ -0,0 +1,3 @@
+<script>
+	export let x = true;
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-conditional/Foo.svelte b/test/runtime/samples/component-binding-conditional/Foo.svelte
new file mode 100644
index 0000000000..12835d6049
--- /dev/null
+++ b/test/runtime/samples/component-binding-conditional/Foo.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let y = 'foo';
+</script>
+
+<p>y: {y}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-conditional/_config.js b/test/runtime/samples/component-binding-conditional/_config.js
new file mode 100644
index 0000000000..65d8dea2a7
--- /dev/null
+++ b/test/runtime/samples/component-binding-conditional/_config.js
@@ -0,0 +1,17 @@
+export default {
+	skip_if_ssr: true, // TODO delete this line, once binding works
+
+	html: `
+		<p>y: bar</p>
+		<p>y: bar</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.x = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>y: bar</p>
+			<p>y: bar</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-conditional/main.svelte b/test/runtime/samples/component-binding-conditional/main.svelte
new file mode 100644
index 0000000000..fee850a65a
--- /dev/null
+++ b/test/runtime/samples/component-binding-conditional/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	import Foo from './Foo.svelte';
+	import Bar from './Bar.svelte';
+	import Baz from './Baz.svelte';
+
+	export let y;
+	export let x;
+</script>
+
+<p>y: {y}</p>
+
+{#if x}
+	<Foo bind:y/>
+{:else}
+	<Bar bind:y/>
+{/if}
+
+<Baz bind:x/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-deep-b/ComponentSelector.svelte b/test/runtime/samples/component-binding-deep-b/ComponentSelector.svelte
new file mode 100644
index 0000000000..f2502fd374
--- /dev/null
+++ b/test/runtime/samples/component-binding-deep-b/ComponentSelector.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let selectedComponent;
+	export let components;
+</script>
+
+<select bind:value={selectedComponent}>
+	{#each components as component}
+		<option value='{component}'>{component.name}.svelte</option>
+	{/each}
+</select>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-deep-b/Editor.svelte b/test/runtime/samples/component-binding-deep-b/Editor.svelte
new file mode 100644
index 0000000000..3b2692df19
--- /dev/null
+++ b/test/runtime/samples/component-binding-deep-b/Editor.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let code;
+</script>
+
+<textarea bind:value={code}></textarea>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-deep-b/_config.js b/test/runtime/samples/component-binding-deep-b/_config.js
new file mode 100644
index 0000000000..5adee6eac1
--- /dev/null
+++ b/test/runtime/samples/component-binding-deep-b/_config.js
@@ -0,0 +1,82 @@
+const components = [
+	{
+		name: 'One',
+		source: 'one source'
+	},
+	{
+		name: 'Two',
+		source: 'two source'
+	}
+];
+
+const selectedComponent = components[0];
+
+export default {
+	skip: true, // doesn't reflect real-world bug, maybe a JSDOM quirk
+
+	props: {
+		components,
+		selectedComponent
+	},
+
+	html: `
+		<select>
+			<option value='[object Object]'>One.svelte</option>
+			<option value='[object Object]'>Two.svelte</option>
+		</select>
+
+		<textarea></textarea>
+
+		<pre>ONE SOURCE\nTWO SOURCE</pre>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const event = new window.MouseEvent('input');
+		const textarea = target.querySelector('textarea');
+
+		textarea.value = 'one source changed';
+		await textarea.dispatchEvent(event);
+
+		assert.equal(component.compiled, 'ONE SOURCE CHANGED\nTWO SOURCE');
+		assert.htmlEqual(target.innerHTML, `
+			<select>
+				<option value='[object Object]'>One.svelte</option>
+				<option value='[object Object]'>Two.svelte</option>
+			</select>
+
+			<textarea></textarea>
+
+			<pre>ONE SOURCE CHANGED\nTWO SOURCE</pre>
+		`);
+
+		// const select = target.querySelector('select');
+		// console.log(`select.options[0].selected`, select.options[0].selected)
+		// console.log(`select.options[1].selected`, select.options[1].selected)
+		// console.log(`select.value`, select.value)
+		// console.log(`select.__value`, select.__value)
+		// select.options[1].selected = true;
+		// console.log(`select.options[0].selected`, select.options[0].selected)
+		// console.log(`select.options[1].selected`, select.options[1].selected)
+		// console.log(`select.value`, select.value)
+		// console.log(`select.__value`, select.__value)
+		// select.dispatchEvent(new window.Event('change'));
+		component.selectedComponent = components[1];
+
+		assert.equal(textarea.value, 'two source');
+
+		textarea.value = 'two source changed';
+		await textarea.dispatchEvent(event);
+
+		assert.equal(component.compiled, 'ONE SOURCE CHANGED\nTWO SOURCE CHANGED');
+		assert.htmlEqual(target.innerHTML, `
+			<select>
+				<option value='[object Object]'>One.svelte</option>
+				<option value='[object Object]'>Two.svelte</option>
+			</select>
+
+			<textarea></textarea>
+
+			<pre>ONE SOURCE CHANGED\nTWO SOURCE CHANGED</pre>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-deep-b/main.svelte b/test/runtime/samples/component-binding-deep-b/main.svelte
new file mode 100644
index 0000000000..a96f65a30e
--- /dev/null
+++ b/test/runtime/samples/component-binding-deep-b/main.svelte
@@ -0,0 +1,37 @@
+<script>
+	import { beforeUpdate } from 'svelte';
+
+	import Editor from './Editor.svelte';
+	import ComponentSelector from './ComponentSelector.svelte';
+
+	export let components;
+	export let selectedComponent;
+	export let compiled;
+
+	let previouslySelectedComponent;
+
+	beforeUpdate(() => {
+		components.forEach(component => {
+			if (component === selectedComponent) return;
+			component.compiled = component.source.toUpperCase();
+		});
+
+		if (selectedComponent !== previouslySelectedComponent) {
+			selectedComponent.compiled = selectedComponent.source.toUpperCase();
+			updateBundle();
+
+			previouslySelectedComponent = selectedComponent;
+		}
+	});
+
+	function updateBundle() {
+		compiled = components.map(component => component.compiled).join('\n');
+	}
+</script>
+
+<ComponentSelector {components} bind:selectedComponent/>
+<Editor bind:code={selectedComponent.source} />
+
+<pre>
+{compiled}
+</pre>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-deep/Widget.svelte b/test/runtime/samples/component-binding-deep/Widget.svelte
new file mode 100644
index 0000000000..3714351783
--- /dev/null
+++ b/test/runtime/samples/component-binding-deep/Widget.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let value;
+</script>
+
+<input bind:value>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-deep/_config.js b/test/runtime/samples/component-binding-deep/_config.js
new file mode 100644
index 0000000000..8a2f5a56cf
--- /dev/null
+++ b/test/runtime/samples/component-binding-deep/_config.js
@@ -0,0 +1,25 @@
+export default {
+	html: `
+		<input>
+		<p>foo</p>
+	`,
+
+	ssrHtml: `
+		<input value=foo>
+		<p>foo</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const event = new window.MouseEvent('input');
+		const input = target.querySelector('input');
+
+		input.value = 'blah';
+		await input.dispatchEvent(event);
+
+		assert.deepEqual(component.deep, { name: 'blah' });
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>blah</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-deep/main.svelte b/test/runtime/samples/component-binding-deep/main.svelte
new file mode 100644
index 0000000000..a364a91e3f
--- /dev/null
+++ b/test/runtime/samples/component-binding-deep/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let deep = {
+		name: 'foo'
+	};
+</script>
+
+<Widget bind:value={deep.name}/>
+
+<p>{deep.name}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-each-nested/Widget.svelte b/test/runtime/samples/component-binding-each-nested/Widget.svelte
new file mode 100644
index 0000000000..3714351783
--- /dev/null
+++ b/test/runtime/samples/component-binding-each-nested/Widget.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let value;
+</script>
+
+<input bind:value>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-each-nested/_config.js b/test/runtime/samples/component-binding-each-nested/_config.js
new file mode 100644
index 0000000000..45644eec0f
--- /dev/null
+++ b/test/runtime/samples/component-binding-each-nested/_config.js
@@ -0,0 +1,27 @@
+export default {
+	html: `
+		<input><input><input>
+		<p>foo, bar, baz</p>
+	`,
+
+	ssrHtml: `
+		<input value=foo>
+		<input value=bar>
+		<input value=baz>
+		<p>foo, bar, baz</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const event = new window.MouseEvent('input');
+		const inputs = target.querySelectorAll('input');
+
+		inputs[0].value = 'blah';
+		await inputs[0].dispatchEvent(event);
+
+		assert.deepEqual(component.a, [{ name: 'blah' }, { name: 'bar' }, { name: 'baz' }]);
+		assert.htmlEqual(target.innerHTML, `
+			<input><input><input>
+			<p>blah, bar, baz</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-each-nested/main.svelte b/test/runtime/samples/component-binding-each-nested/main.svelte
new file mode 100644
index 0000000000..3ac4638c9a
--- /dev/null
+++ b/test/runtime/samples/component-binding-each-nested/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let a = [{ name: 'foo' }, { name: 'bar' }, { name: 'baz' }];
+	export let getName = x => x.name;
+</script>
+
+{#each a as x}
+	<Widget bind:value={x.name}/>
+{/each}
+
+<p>{a.map(getName).join(', ')}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-each-object/Widget.svelte b/test/runtime/samples/component-binding-each-object/Widget.svelte
new file mode 100644
index 0000000000..d449e6024f
--- /dev/null
+++ b/test/runtime/samples/component-binding-each-object/Widget.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let value;
+</script>
+
+<span>{value.id}</span>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-each-object/_config.js b/test/runtime/samples/component-binding-each-object/_config.js
new file mode 100644
index 0000000000..12b4094f2a
--- /dev/null
+++ b/test/runtime/samples/component-binding-each-object/_config.js
@@ -0,0 +1,20 @@
+export default {
+	props: {
+		a: [{ id: 'foo' }, { id: 'bar' }, { id: 'baz' }]
+	},
+
+	html: `
+		<span>foo</span><span>bar</span><span>baz</span>
+	`,
+
+	test({ assert, component, target }) {
+		component.a = [
+			{ id: 'yep' },
+			{ id: 'nope' }
+		];
+
+		assert.htmlEqual(target.innerHTML, `
+			<span>yep</span><span>nope</span>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-each-object/main.svelte b/test/runtime/samples/component-binding-each-object/main.svelte
new file mode 100644
index 0000000000..4f77440ae0
--- /dev/null
+++ b/test/runtime/samples/component-binding-each-object/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let a;
+</script>
+
+{#each a as x}
+	<Widget bind:value={x}/>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-each/Widget.svelte b/test/runtime/samples/component-binding-each/Widget.svelte
new file mode 100644
index 0000000000..3714351783
--- /dev/null
+++ b/test/runtime/samples/component-binding-each/Widget.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let value;
+</script>
+
+<input bind:value>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-each/_config.js b/test/runtime/samples/component-binding-each/_config.js
new file mode 100644
index 0000000000..ed49e194f4
--- /dev/null
+++ b/test/runtime/samples/component-binding-each/_config.js
@@ -0,0 +1,27 @@
+export default {
+	html: `
+		<input><input><input>
+		<p>foo, bar, baz</p>
+	`,
+
+	ssrHtml: `
+		<input value=foo>
+		<input value=bar>
+		<input value=baz>
+		<p>foo, bar, baz</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const event = new window.MouseEvent('input');
+		const inputs = target.querySelectorAll('input');
+
+		inputs[0].value = 'blah';
+		await inputs[0].dispatchEvent(event);
+
+		assert.deepEqual(component.a, ['blah', 'bar', 'baz']);
+		assert.htmlEqual(target.innerHTML, `
+			<input><input><input>
+			<p>blah, bar, baz</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-each/main.svelte b/test/runtime/samples/component-binding-each/main.svelte
new file mode 100644
index 0000000000..36a7c46225
--- /dev/null
+++ b/test/runtime/samples/component-binding-each/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let a = ['foo', 'bar', 'baz'];
+</script>
+
+{#each a as x}
+	<Widget bind:value={x}/>
+{/each}
+
+<p>{a.join(', ')}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-infinite-loop/A.svelte b/test/runtime/samples/component-binding-infinite-loop/A.svelte
new file mode 100644
index 0000000000..8ba3ec20f3
--- /dev/null
+++ b/test/runtime/samples/component-binding-infinite-loop/A.svelte
@@ -0,0 +1,8 @@
+<script>
+	import B from './B.svelte';
+
+	export let currentIdentifier;
+</script>
+
+<B bind:currentIdentifier />
+<B bind:currentIdentifier />
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-infinite-loop/B.svelte b/test/runtime/samples/component-binding-infinite-loop/B.svelte
new file mode 100644
index 0000000000..cbc8160679
--- /dev/null
+++ b/test/runtime/samples/component-binding-infinite-loop/B.svelte
@@ -0,0 +1,14 @@
+<script>
+	import C from './C.svelte';
+
+	export let list = [1, 2, 3, 2, 1];
+	export let currentIdentifier;
+</script>
+
+{#each list as item}
+	<p>
+		<C identifier="{item}" bind:currentIdentifier>
+			{item}
+		</C>
+	</p>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-infinite-loop/C.svelte b/test/runtime/samples/component-binding-infinite-loop/C.svelte
new file mode 100644
index 0000000000..0bfc2f1d4e
--- /dev/null
+++ b/test/runtime/samples/component-binding-infinite-loop/C.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let currentIdentifier;
+	export let identifier;
+
+	let isCurrentlySelected;
+
+	function toggle() {
+		currentIdentifier = isCurrentlySelected ? null : identifier
+	}
+
+	$: isCurrentlySelected = currentIdentifier === identifier;
+</script>
+
+<span
+	on:click="{toggle}"
+	class="{isCurrentlySelected ? 'selected' : ''}"
+>
+	<slot></slot>
+</span>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-infinite-loop/_config.js b/test/runtime/samples/component-binding-infinite-loop/_config.js
new file mode 100644
index 0000000000..92c5d5cd39
--- /dev/null
+++ b/test/runtime/samples/component-binding-infinite-loop/_config.js
@@ -0,0 +1,90 @@
+export default {
+	html: `
+		<p><span class=''>1</span></p>
+		<p><span class='selected'>2</span></p>
+		<p><span class=''>3</span></p>
+		<p><span class='selected'>2</span></p>
+		<p><span class=''>1</span></p>
+
+		<p><span class=''>1</span></p>
+		<p><span class='selected'>2</span></p>
+		<p><span class=''>3</span></p>
+		<p><span class='selected'>2</span></p>
+		<p><span class=''>1</span></p>
+
+		<p><span class=''>1</span></p>
+		<p><span class='selected'>2</span></p>
+		<p><span class=''>3</span></p>
+		<p><span class='selected'>2</span></p>
+		<p><span class=''>1</span></p>
+
+		<p><span class=''>1</span></p>
+		<p><span class='selected'>2</span></p>
+		<p><span class=''>3</span></p>
+		<p><span class='selected'>2</span></p>
+		<p><span class=''>1</span></p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const click = new window.MouseEvent('click');
+		const spans = target.querySelectorAll('span');
+
+		await spans[0].dispatchEvent(click);
+
+		assert.equal(component.currentIdentifier, 1);
+		assert.htmlEqual(target.innerHTML, `
+			<p><span class='selected'>1</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>3</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class='selected'>1</span></p>
+
+			<p><span class='selected'>1</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>3</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class='selected'>1</span></p>
+
+			<p><span class='selected'>1</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>3</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class='selected'>1</span></p>
+
+			<p><span class='selected'>1</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>3</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class='selected'>1</span></p>
+		`);
+
+		await spans[0].dispatchEvent(click);
+
+		assert.equal(component.currentIdentifier, null);
+		assert.htmlEqual(target.innerHTML, `
+			<p><span class=''>1</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>3</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>1</span></p>
+
+			<p><span class=''>1</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>3</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>1</span></p>
+
+			<p><span class=''>1</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>3</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>1</span></p>
+
+			<p><span class=''>1</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>3</span></p>
+			<p><span class=''>2</span></p>
+			<p><span class=''>1</span></p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-infinite-loop/main.svelte b/test/runtime/samples/component-binding-infinite-loop/main.svelte
new file mode 100644
index 0000000000..6556a7c12a
--- /dev/null
+++ b/test/runtime/samples/component-binding-infinite-loop/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import A from './A.svelte';
+
+	export let currentIdentifier = 2;
+</script>
+
+<A bind:currentIdentifier />
+<A bind:currentIdentifier />
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-nested/Bar.svelte b/test/runtime/samples/component-binding-nested/Bar.svelte
new file mode 100644
index 0000000000..19159f168d
--- /dev/null
+++ b/test/runtime/samples/component-binding-nested/Bar.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Baz from './Baz.svelte';
+
+	export let x;
+</script>
+
+<button class='bar' on:click='{() => x = "q"}'>bar</button>
+<p>bar x: {x}</p>
+
+<Baz bind:x/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-nested/Baz.svelte b/test/runtime/samples/component-binding-nested/Baz.svelte
new file mode 100644
index 0000000000..bbfe33482b
--- /dev/null
+++ b/test/runtime/samples/component-binding-nested/Baz.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let x;
+</script>
+
+<button class='baz' on:click='{() => x = "r"}'>baz</button>
+<p>baz x: {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-nested/Foo.svelte b/test/runtime/samples/component-binding-nested/Foo.svelte
new file mode 100644
index 0000000000..4a3e59afe7
--- /dev/null
+++ b/test/runtime/samples/component-binding-nested/Foo.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Bar from './Bar.svelte';
+
+	export let x;
+</script>
+
+<button class='foo' on:click='{() => x = "p"}'>foo</button>
+<p>foo x: {x}</p>
+
+<Bar bind:x/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-nested/_config.js b/test/runtime/samples/component-binding-nested/_config.js
new file mode 100644
index 0000000000..77a4d5c1ab
--- /dev/null
+++ b/test/runtime/samples/component-binding-nested/_config.js
@@ -0,0 +1,61 @@
+export default {
+	skip_if_ssr: true, // TODO delete this line, once binding works
+
+	props: {
+		x: 'initial'
+	},
+
+	html: `
+		<p>x: initial</p>
+		<button class="foo">foo</button>
+		<p>foo x: initial</p>
+		<button class="bar">bar</button>
+		<p>bar x: initial</p>
+		<button class="baz">baz</button>
+		<p>baz x: initial</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const click = new window.MouseEvent('click');
+		const buttons = [...target.querySelectorAll('button')];
+
+		await buttons[0].dispatchEvent(click);
+
+		assert.equal(component.x, 'p');
+		assert.htmlEqual(target.innerHTML, `
+			<p>x: p</p>
+			<button class="foo">foo</button>
+			<p>foo x: p</p>
+			<button class="bar">bar</button>
+			<p>bar x: p</p>
+			<button class="baz">baz</button>
+			<p>baz x: p</p>
+		`);
+
+		await buttons[1].dispatchEvent(click);
+
+		assert.equal(component.x, 'q');
+		assert.htmlEqual(target.innerHTML, `
+			<p>x: q</p>
+			<button class="foo">foo</button>
+			<p>foo x: q</p>
+			<button class="bar">bar</button>
+			<p>bar x: q</p>
+			<button class="baz">baz</button>
+			<p>baz x: q</p>
+		`);
+
+		await buttons[2].dispatchEvent(click);
+
+		assert.equal(component.x, 'r');
+		assert.htmlEqual(target.innerHTML, `
+			<p>x: r</p>
+			<button class="foo">foo</button>
+			<p>foo x: r</p>
+			<button class="bar">bar</button>
+			<p>bar x: r</p>
+			<button class="baz">baz</button>
+			<p>baz x: r</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-nested/main.svelte b/test/runtime/samples/component-binding-nested/main.svelte
new file mode 100644
index 0000000000..18f96b310c
--- /dev/null
+++ b/test/runtime/samples/component-binding-nested/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Foo from './Foo.svelte';
+
+	export let x;
+</script>
+
+<p>x: {x}</p>
+
+<Foo bind:x/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-non-leaky/Counter.svelte b/test/runtime/samples/component-binding-non-leaky/Counter.svelte
new file mode 100644
index 0000000000..12229d3aa8
--- /dev/null
+++ b/test/runtime/samples/component-binding-non-leaky/Counter.svelte
@@ -0,0 +1,5 @@
+<script>
+	let count = 0;
+</script>
+
+<button on:click='{() => count += 1}'>{count}</button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-non-leaky/_config.js b/test/runtime/samples/component-binding-non-leaky/_config.js
new file mode 100644
index 0000000000..1b6f29dd74
--- /dev/null
+++ b/test/runtime/samples/component-binding-non-leaky/_config.js
@@ -0,0 +1,27 @@
+export default {
+	html: `
+		<button>0</button>
+		<p>count: undefined</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const click = new window.MouseEvent('click');
+		const button = target.querySelector('button');
+
+		await button.dispatchEvent(click);
+
+		assert.equal(component.x, undefined);
+		assert.htmlEqual(target.innerHTML, `
+			<button>1</button>
+			<p>count: undefined</p>
+		`);
+
+		await button.dispatchEvent(click);
+
+		assert.equal(component.x, undefined);
+		assert.htmlEqual(target.innerHTML, `
+			<button>2</button>
+			<p>count: undefined</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-non-leaky/main.svelte b/test/runtime/samples/component-binding-non-leaky/main.svelte
new file mode 100644
index 0000000000..6ca1ba6ce6
--- /dev/null
+++ b/test/runtime/samples/component-binding-non-leaky/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Counter from './Counter.svelte';
+
+	let x;
+</script>
+
+<Counter bind:count={x}/>
+<p>count: {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-onMount/Mount.svelte b/test/runtime/samples/component-binding-onMount/Mount.svelte
new file mode 100644
index 0000000000..ce3b0c48f8
--- /dev/null
+++ b/test/runtime/samples/component-binding-onMount/Mount.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let element;
+	let bound = false;
+	onMount(() => {
+		if (element) bound = true;
+	});
+
+</script>
+
+<div bind:this={element}></div>
+<p>
+	Bound? {bound}
+</p>
diff --git a/test/runtime/samples/component-binding-onMount/_config.js b/test/runtime/samples/component-binding-onMount/_config.js
new file mode 100644
index 0000000000..4ae78b588a
--- /dev/null
+++ b/test/runtime/samples/component-binding-onMount/_config.js
@@ -0,0 +1,11 @@
+export default {
+	async test({ assert, target }) {
+		assert.htmlEqual(target.innerHTML, `
+		<div id="target"><div></div>
+			<p>
+				Bound? true
+			</p>
+		</div>
+	`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-onMount/main.svelte b/test/runtime/samples/component-binding-onMount/main.svelte
new file mode 100644
index 0000000000..971b13c1ce
--- /dev/null
+++ b/test/runtime/samples/component-binding-onMount/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Mount from './Mount.svelte';
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		const component = new Mount({
+			target: document.querySelector('#target'),
+			props: {},
+		});
+	});
+</script>
+
+<div id="target" />
diff --git a/test/runtime/samples/component-binding-parent-supercedes-child-b/Bar.svelte b/test/runtime/samples/component-binding-parent-supercedes-child-b/Bar.svelte
new file mode 100644
index 0000000000..d5ce18c8c8
--- /dev/null
+++ b/test/runtime/samples/component-binding-parent-supercedes-child-b/Bar.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x = 'no';
+</script>
+
+<p>Bar: {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-parent-supercedes-child-b/Foo.svelte b/test/runtime/samples/component-binding-parent-supercedes-child-b/Foo.svelte
new file mode 100644
index 0000000000..9c7ae240b7
--- /dev/null
+++ b/test/runtime/samples/component-binding-parent-supercedes-child-b/Foo.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x = 'yes';
+</script>
+
+<p>Foo: {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-parent-supercedes-child-b/_config.js b/test/runtime/samples/component-binding-parent-supercedes-child-b/_config.js
new file mode 100644
index 0000000000..4e31a4d79c
--- /dev/null
+++ b/test/runtime/samples/component-binding-parent-supercedes-child-b/_config.js
@@ -0,0 +1,31 @@
+export default {
+	html: `
+		<p>Foo: yes</p>
+		<p>x in parent: yes</p>
+	`,
+
+	async test({ assert, component, target }) {
+		component.a = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Bar: yes</p>
+			<p>x in parent: yes</p>
+		`);
+
+		component.a = true;
+		assert.equal(component.x, 'yes');
+		component.x = undefined;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Foo: undefined</p>
+			<p>x in parent: undefined</p>
+		`);
+
+		component.a = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Bar: no</p>
+			<p>x in parent: no</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-parent-supercedes-child-b/main.svelte b/test/runtime/samples/component-binding-parent-supercedes-child-b/main.svelte
new file mode 100644
index 0000000000..e6edf3b1f7
--- /dev/null
+++ b/test/runtime/samples/component-binding-parent-supercedes-child-b/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Foo from './Foo.svelte';
+	import Bar from './Bar.svelte';
+
+	export let a = true;
+	export let x;
+</script>
+
+{#if a}
+	<Foo bind:x/>
+{:else}
+	<Bar bind:x/>
+{/if}
+
+<p>x in parent: {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-parent-supercedes-child-c/Bar.svelte b/test/runtime/samples/component-binding-parent-supercedes-child-c/Bar.svelte
new file mode 100644
index 0000000000..d5ce18c8c8
--- /dev/null
+++ b/test/runtime/samples/component-binding-parent-supercedes-child-c/Bar.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x = 'no';
+</script>
+
+<p>Bar: {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-parent-supercedes-child-c/Foo.svelte b/test/runtime/samples/component-binding-parent-supercedes-child-c/Foo.svelte
new file mode 100644
index 0000000000..9c7ae240b7
--- /dev/null
+++ b/test/runtime/samples/component-binding-parent-supercedes-child-c/Foo.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x = 'yes';
+</script>
+
+<p>Foo: {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-parent-supercedes-child-c/_config.js b/test/runtime/samples/component-binding-parent-supercedes-child-c/_config.js
new file mode 100644
index 0000000000..4e31a4d79c
--- /dev/null
+++ b/test/runtime/samples/component-binding-parent-supercedes-child-c/_config.js
@@ -0,0 +1,31 @@
+export default {
+	html: `
+		<p>Foo: yes</p>
+		<p>x in parent: yes</p>
+	`,
+
+	async test({ assert, component, target }) {
+		component.a = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Bar: yes</p>
+			<p>x in parent: yes</p>
+		`);
+
+		component.a = true;
+		assert.equal(component.x, 'yes');
+		component.x = undefined;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Foo: undefined</p>
+			<p>x in parent: undefined</p>
+		`);
+
+		component.a = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Bar: no</p>
+			<p>x in parent: no</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-parent-supercedes-child-c/main.svelte b/test/runtime/samples/component-binding-parent-supercedes-child-c/main.svelte
new file mode 100644
index 0000000000..426ef04bad
--- /dev/null
+++ b/test/runtime/samples/component-binding-parent-supercedes-child-c/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Foo from './Foo.svelte';
+	import Bar from './Bar.svelte';
+
+	export let a = true;
+	export let x;
+</script>
+
+<svelte:component this="{a ? Foo : Bar}" bind:x/>
+
+<p>x in parent: {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-parent-supercedes-child/Counter.svelte b/test/runtime/samples/component-binding-parent-supercedes-child/Counter.svelte
new file mode 100644
index 0000000000..4ac9541b65
--- /dev/null
+++ b/test/runtime/samples/component-binding-parent-supercedes-child/Counter.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let count = 0;
+</script>
+
+<button on:click='{() => count += 1}'>+1</button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-parent-supercedes-child/_config.js b/test/runtime/samples/component-binding-parent-supercedes-child/_config.js
new file mode 100644
index 0000000000..4ba02c5913
--- /dev/null
+++ b/test/runtime/samples/component-binding-parent-supercedes-child/_config.js
@@ -0,0 +1,27 @@
+export default {
+	html: `
+		<button>+1</button>
+		<p>count: 10</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const click = new window.MouseEvent('click');
+		const button = target.querySelector('button');
+
+		await button.dispatchEvent(click);
+
+		assert.equal(component.x, 11);
+		assert.htmlEqual(target.innerHTML, `
+			<button>+1</button>
+			<p>count: 11</p>
+		`);
+
+		await button.dispatchEvent(click);
+
+		assert.equal(component.x, 12);
+		assert.htmlEqual(target.innerHTML, `
+			<button>+1</button>
+			<p>count: 12</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-parent-supercedes-child/main.svelte b/test/runtime/samples/component-binding-parent-supercedes-child/main.svelte
new file mode 100644
index 0000000000..e38b72daae
--- /dev/null
+++ b/test/runtime/samples/component-binding-parent-supercedes-child/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Counter from './Counter.svelte';
+
+	export let x = 10;
+</script>
+
+<Counter bind:count={x}/>
+<p>count: {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-private-state/Bar.svelte b/test/runtime/samples/component-binding-private-state/Bar.svelte
new file mode 100644
index 0000000000..3b5619a62d
--- /dev/null
+++ b/test/runtime/samples/component-binding-private-state/Bar.svelte
@@ -0,0 +1,5 @@
+<script>
+	let x = 'no';
+</script>
+
+<p>Bar: {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-private-state/Foo.svelte b/test/runtime/samples/component-binding-private-state/Foo.svelte
new file mode 100644
index 0000000000..1d899739d5
--- /dev/null
+++ b/test/runtime/samples/component-binding-private-state/Foo.svelte
@@ -0,0 +1,5 @@
+<script>
+	let x = 'yes';
+</script>
+
+<p>Foo: {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-private-state/_config.js b/test/runtime/samples/component-binding-private-state/_config.js
new file mode 100644
index 0000000000..f4f2fd6f83
--- /dev/null
+++ b/test/runtime/samples/component-binding-private-state/_config.js
@@ -0,0 +1,31 @@
+export default {
+	html: `
+		<p>Foo: yes</p>
+		<p>x in parent: undefined</p>
+	`,
+
+	async test({ assert, component, target }) {
+		component.a = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Bar: no</p>
+			<p>x in parent: undefined</p>
+		`);
+
+		component.a = true;
+		assert.equal(component.x, undefined);
+		component.x = 'maybe';
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Foo: yes</p>
+			<p>x in parent: maybe</p>
+		`);
+
+		component.a = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Bar: no</p>
+			<p>x in parent: maybe</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-private-state/main.svelte b/test/runtime/samples/component-binding-private-state/main.svelte
new file mode 100644
index 0000000000..426ef04bad
--- /dev/null
+++ b/test/runtime/samples/component-binding-private-state/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Foo from './Foo.svelte';
+	import Bar from './Bar.svelte';
+
+	export let a = true;
+	export let x;
+</script>
+
+<svelte:component this="{a ? Foo : Bar}" bind:x/>
+
+<p>x in parent: {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-reactive-property-no-extra-call/Component.svelte b/test/runtime/samples/component-binding-reactive-property-no-extra-call/Component.svelte
new file mode 100644
index 0000000000..f180f10cd8
--- /dev/null
+++ b/test/runtime/samples/component-binding-reactive-property-no-extra-call/Component.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let value;
+	export let value2;
+</script>
+
+{value}{value2}
diff --git a/test/runtime/samples/component-binding-reactive-property-no-extra-call/_config.js b/test/runtime/samples/component-binding-reactive-property-no-extra-call/_config.js
new file mode 100644
index 0000000000..7027c1a4e4
--- /dev/null
+++ b/test/runtime/samples/component-binding-reactive-property-no-extra-call/_config.js
@@ -0,0 +1,5 @@
+export default {
+	async test({ assert, component }) {
+		assert.equal(component.object_updates, component.primitive_updates);
+	}
+};
diff --git a/test/runtime/samples/component-binding-reactive-property-no-extra-call/main.svelte b/test/runtime/samples/component-binding-reactive-property-no-extra-call/main.svelte
new file mode 100644
index 0000000000..9d52ed675f
--- /dev/null
+++ b/test/runtime/samples/component-binding-reactive-property-no-extra-call/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Component from './Component.svelte';
+
+	export let primitive_updates = 0;
+	export let object_updates = 0;
+
+	const obj = { foo: '' };
+	let foo = 'bar';
+	$: if (obj) object_updates++;
+	$: if (foo) primitive_updates++;
+</script>
+
+<Component bind:value={obj.foo} bind:value2={foo} />
diff --git a/test/runtime/samples/component-binding-reactive-statement/Button.svelte b/test/runtime/samples/component-binding-reactive-statement/Button.svelte
new file mode 100644
index 0000000000..289ec42fab
--- /dev/null
+++ b/test/runtime/samples/component-binding-reactive-statement/Button.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let count
+	
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button on:click={handleClick}>
+	button {count}
+</button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-reactive-statement/_config.js b/test/runtime/samples/component-binding-reactive-statement/_config.js
new file mode 100644
index 0000000000..8b8d091c73
--- /dev/null
+++ b/test/runtime/samples/component-binding-reactive-statement/_config.js
@@ -0,0 +1,38 @@
+export default {
+	html: `
+		<button>main 0</button>
+		<button>button 0</button>
+	`,
+
+	async test({ assert, target, window }) {
+		const event = new window.MouseEvent('click');
+
+		const buttons = target.querySelectorAll('button');
+
+		await buttons[0].dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>main 1</button>
+			<button>button 1</button>
+		`);
+
+		await buttons[1].dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>main 2</button>
+			<button>button 2</button>
+		`);
+
+		// reactive update, reset to 2
+		await buttons[0].dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>main 2</button>
+			<button>button 2</button>
+		`);
+
+		// bound to main, reset to 2
+		await buttons[1].dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>main 2</button>
+			<button>button 2</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-reactive-statement/main.svelte b/test/runtime/samples/component-binding-reactive-statement/main.svelte
new file mode 100644
index 0000000000..4253c6127e
--- /dev/null
+++ b/test/runtime/samples/component-binding-reactive-statement/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import Button from './Button.svelte';
+	
+	let count = 0;
+
+	$: if (count > 2) {
+		count = 2;
+	}
+
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button on:click={handleClick}>
+	main {count}
+</button>
+
+<Button bind:count />
diff --git a/test/runtime/samples/component-binding-self-destroying/Nested.svelte b/test/runtime/samples/component-binding-self-destroying/Nested.svelte
new file mode 100644
index 0000000000..f0355d16a5
--- /dev/null
+++ b/test/runtime/samples/component-binding-self-destroying/Nested.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let show;
+</script>
+
+<button on:click="{() => show = false}">Hide</button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-self-destroying/_config.js b/test/runtime/samples/component-binding-self-destroying/_config.js
new file mode 100644
index 0000000000..17cf23881e
--- /dev/null
+++ b/test/runtime/samples/component-binding-self-destroying/_config.js
@@ -0,0 +1,27 @@
+export default {
+	props: {
+		show: true
+	},
+
+	html: `
+		<button>Hide</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const click = new window.MouseEvent('click');
+
+		await target.querySelector('button').dispatchEvent(click);
+
+		assert.equal(component.show, false);
+		assert.htmlEqual(target.innerHTML, `
+			<button>Show</button>
+		`);
+
+		await target.querySelector('button').dispatchEvent(click);
+
+		assert.equal(component.show, true);
+		assert.htmlEqual(target.innerHTML, `
+			<button>Hide</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-self-destroying/main.svelte b/test/runtime/samples/component-binding-self-destroying/main.svelte
new file mode 100644
index 0000000000..7043a52ad4
--- /dev/null
+++ b/test/runtime/samples/component-binding-self-destroying/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Nested from './Nested.svelte';
+	export let show;
+</script>
+
+{#if show}
+	<Nested bind:show/>
+{:else}
+	<button on:click="{() => show = true}">Show</button>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-store/Input.svelte b/test/runtime/samples/component-binding-store/Input.svelte
new file mode 100644
index 0000000000..792104bec8
--- /dev/null
+++ b/test/runtime/samples/component-binding-store/Input.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let value = '';
+</script>
+
+<input bind:value />
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-store/_config.js b/test/runtime/samples/component-binding-store/_config.js
new file mode 100644
index 0000000000..8bbdab17ee
--- /dev/null
+++ b/test/runtime/samples/component-binding-store/_config.js
@@ -0,0 +1,66 @@
+export default {
+	html: `
+		<input />
+		<input />
+		<div></div>
+	`,
+	ssrHtml: `
+		<input value=""/>
+		<input value=""/>
+		<div></div>
+	`,
+
+	async test({ assert, component, target, window }) {
+		let count = 0;
+		component.callback = () => {
+			count++;
+		};
+
+		const [input1, input2] = target.querySelectorAll('input');
+
+		input1.value = '1';
+		await input1.dispatchEvent(new window.Event('input'));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<input />
+				<input />
+				<div>1</div>
+			`
+		);
+		assert.equal(input1.value, '1');
+		assert.equal(input2.value, '1');
+		assert.equal(count, 1);
+
+		input2.value = '123';
+		await input2.dispatchEvent(new window.Event('input'));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<input />
+				<input />
+				<div>123</div>
+			`
+		);
+		assert.equal(input1.value, '123');
+		assert.equal(input2.value, '123');
+		assert.equal(count, 2);
+
+		input1.value = '456';
+		await input1.dispatchEvent(new window.Event('input'));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<input />
+				<input />
+				<div>456</div>
+			`
+		);
+		assert.equal(input1.value, '456');
+		assert.equal(input2.value, '456');
+		assert.equal(count, 3);
+	}
+};
diff --git a/test/runtime/samples/component-binding-store/main.svelte b/test/runtime/samples/component-binding-store/main.svelte
new file mode 100644
index 0000000000..dba08e5276
--- /dev/null
+++ b/test/runtime/samples/component-binding-store/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { writable } from 'svelte/store';
+	import Input from './Input.svelte';
+
+	let value = writable({ value: '' });
+
+	export let callback = () => {};
+
+	value.subscribe(() => {
+		callback();
+	})
+</script>
+
+<input bind:value={$value.value} />
+
+<Input bind:value={$value.value}/>
+
+<div>{$value.value}</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding/Counter.svelte b/test/runtime/samples/component-binding/Counter.svelte
new file mode 100644
index 0000000000..4ac9541b65
--- /dev/null
+++ b/test/runtime/samples/component-binding/Counter.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let count = 0;
+</script>
+
+<button on:click='{() => count += 1}'>+1</button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding/_config.js b/test/runtime/samples/component-binding/_config.js
new file mode 100644
index 0000000000..42b0d578ce
--- /dev/null
+++ b/test/runtime/samples/component-binding/_config.js
@@ -0,0 +1,29 @@
+export default {
+	skip_if_ssr: true, // TODO delete this line, once binding works
+
+	html: `
+		<button>+1</button>
+		<p>count: 0</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const click = new window.MouseEvent('click');
+		const button = target.querySelector('button');
+
+		await button.dispatchEvent(click);
+
+		assert.equal(component.x, 1);
+		assert.htmlEqual(target.innerHTML, `
+			<button>+1</button>
+			<p>count: 1</p>
+		`);
+
+		await button.dispatchEvent(click);
+
+		assert.equal(component.x, 2);
+		assert.htmlEqual(target.innerHTML, `
+			<button>+1</button>
+			<p>count: 2</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding/main.svelte b/test/runtime/samples/component-binding/main.svelte
new file mode 100644
index 0000000000..3a582fe7bd
--- /dev/null
+++ b/test/runtime/samples/component-binding/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Counter from './Counter.svelte';
+
+	export let x;
+</script>
+
+<Counter bind:count={x}/>
+<p>count: {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-data-dynamic-late/Widget.svelte b/test/runtime/samples/component-data-dynamic-late/Widget.svelte
new file mode 100644
index 0000000000..5ac3701e47
--- /dev/null
+++ b/test/runtime/samples/component-data-dynamic-late/Widget.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let p;
+</script>
+
+<p>{p}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-data-dynamic-late/_config.js b/test/runtime/samples/component-data-dynamic-late/_config.js
new file mode 100644
index 0000000000..21a06791e2
--- /dev/null
+++ b/test/runtime/samples/component-data-dynamic-late/_config.js
@@ -0,0 +1,10 @@
+export default {
+	test({ assert, component, target }) {
+		component.q = 42;
+		component.foo = true;
+
+		assert.htmlEqual( target.innerHTML, `
+			<p>42</p>
+		` );
+	}
+};
diff --git a/test/runtime/samples/component-data-dynamic-late/main.svelte b/test/runtime/samples/component-data-dynamic-late/main.svelte
new file mode 100644
index 0000000000..4e11d151cf
--- /dev/null
+++ b/test/runtime/samples/component-data-dynamic-late/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let foo = false;
+	export let q;
+</script>
+
+{#if foo}
+	<Widget p='{q}'/>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/component-data-dynamic-shorthand/Widget.svelte b/test/runtime/samples/component-data-dynamic-shorthand/Widget.svelte
new file mode 100644
index 0000000000..b1be76b4be
--- /dev/null
+++ b/test/runtime/samples/component-data-dynamic-shorthand/Widget.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+<p>foo: {foo}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-data-dynamic-shorthand/_config.js b/test/runtime/samples/component-data-dynamic-shorthand/_config.js
new file mode 100644
index 0000000000..779966d4aa
--- /dev/null
+++ b/test/runtime/samples/component-data-dynamic-shorthand/_config.js
@@ -0,0 +1,13 @@
+export default {
+	props: {
+		foo: 42
+	},
+
+	html: '<div><p>foo: 42</p></div>',
+
+	test({ assert, component, target }) {
+		component.foo = 99;
+
+		assert.equal( target.innerHTML, '<div><p>foo: 99</p></div>' );
+	}
+};
diff --git a/test/runtime/samples/component-data-dynamic-shorthand/main.svelte b/test/runtime/samples/component-data-dynamic-shorthand/main.svelte
new file mode 100644
index 0000000000..6245b9064b
--- /dev/null
+++ b/test/runtime/samples/component-data-dynamic-shorthand/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let foo;
+</script>
+
+<div>
+	<Widget {foo}/>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-data-dynamic/Widget.svelte b/test/runtime/samples/component-data-dynamic/Widget.svelte
new file mode 100644
index 0000000000..a52b8d1eaa
--- /dev/null
+++ b/test/runtime/samples/component-data-dynamic/Widget.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let foo;
+	export let baz;
+	export let qux;
+	export let quux;
+</script>
+
+<p>foo: {foo}</p>
+<p>baz: {baz} ({typeof baz})</p>
+<p>qux: {qux}</p>
+<p>quux: {quux}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-data-dynamic/_config.js b/test/runtime/samples/component-data-dynamic/_config.js
new file mode 100644
index 0000000000..40436066fa
--- /dev/null
+++ b/test/runtime/samples/component-data-dynamic/_config.js
@@ -0,0 +1,29 @@
+export default {
+	props: {
+		bar: 'lol',
+		x: 2,
+		compound: 'piece of',
+		go: { deeper: 'core' }
+	},
+
+	html: `
+		<div><p>foo: lol</p>
+		<p>baz: 42 (number)</p>
+		<p>qux: this is a piece of string</p>
+		<p>quux: core</p></div>
+	`,
+
+	test({ assert, component, target }) {
+		component.bar = 'wut';
+		component.x = 3;
+		component.compound = 'rather boring';
+		component.go = { deeper: 'heart' };
+
+		assert.htmlEqual(target.innerHTML, `
+			<div><p>foo: wut</p>
+			<p>baz: 43 (number)</p>
+			<p>qux: this is a rather boring string</p>
+			<p>quux: heart</p></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-data-dynamic/main.svelte b/test/runtime/samples/component-data-dynamic/main.svelte
new file mode 100644
index 0000000000..42ef74a185
--- /dev/null
+++ b/test/runtime/samples/component-data-dynamic/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let bar;
+	export let x;
+	export let compound;
+	export let go;
+</script>
+
+<div>
+	<Widget foo='{bar}' baz='{40 + x}' qux='this is a {compound} string' quux='{go.deeper}'/>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-data-empty/Widget.svelte b/test/runtime/samples/component-data-empty/Widget.svelte
new file mode 100644
index 0000000000..f2266de567
--- /dev/null
+++ b/test/runtime/samples/component-data-empty/Widget.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+<p>foo: '{foo}'</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-data-empty/_config.js b/test/runtime/samples/component-data-empty/_config.js
new file mode 100644
index 0000000000..486827f398
--- /dev/null
+++ b/test/runtime/samples/component-data-empty/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: "<div><p>foo: ''</p></div>"
+};
diff --git a/test/runtime/samples/component-data-empty/main.svelte b/test/runtime/samples/component-data-empty/main.svelte
new file mode 100644
index 0000000000..be6a137e8a
--- /dev/null
+++ b/test/runtime/samples/component-data-empty/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<div>
+	<Widget foo=''/>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-data-static-boolean-regression/Link.svelte b/test/runtime/samples/component-data-static-boolean-regression/Link.svelte
new file mode 100644
index 0000000000..301fd2e4a1
--- /dev/null
+++ b/test/runtime/samples/component-data-static-boolean-regression/Link.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let href;
+</script>
+
+<a href={href}>link</a>
\ No newline at end of file
diff --git a/test/runtime/samples/component-data-static-boolean-regression/_config.js b/test/runtime/samples/component-data-static-boolean-regression/_config.js
new file mode 100644
index 0000000000..93d0f1165c
--- /dev/null
+++ b/test/runtime/samples/component-data-static-boolean-regression/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: "<a href='/cool'>link</a>"
+};
diff --git a/test/runtime/samples/component-data-static-boolean-regression/main.svelte b/test/runtime/samples/component-data-static-boolean-regression/main.svelte
new file mode 100644
index 0000000000..492d1dc78a
--- /dev/null
+++ b/test/runtime/samples/component-data-static-boolean-regression/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Link from './Link.svelte';
+</script>
+
+<Link x href="/cool"/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-data-static-boolean/Foo.svelte b/test/runtime/samples/component-data-static-boolean/Foo.svelte
new file mode 100644
index 0000000000..15f9f556de
--- /dev/null
+++ b/test/runtime/samples/component-data-static-boolean/Foo.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x;
+</script>
+
+<p>x: {x} ({typeof x})</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-data-static-boolean/_config.js b/test/runtime/samples/component-data-static-boolean/_config.js
new file mode 100644
index 0000000000..7253644c64
--- /dev/null
+++ b/test/runtime/samples/component-data-static-boolean/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>x: true (boolean)</p>'
+};
diff --git a/test/runtime/samples/component-data-static-boolean/main.svelte b/test/runtime/samples/component-data-static-boolean/main.svelte
new file mode 100644
index 0000000000..edb8e749af
--- /dev/null
+++ b/test/runtime/samples/component-data-static-boolean/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Foo from './Foo.svelte';
+</script>
+
+<Foo x/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-data-static/Widget.svelte b/test/runtime/samples/component-data-static/Widget.svelte
new file mode 100644
index 0000000000..8d0b28a924
--- /dev/null
+++ b/test/runtime/samples/component-data-static/Widget.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo;
+	export let baz;
+</script>
+
+<p>foo: {foo}</p>
+<p>baz: {baz} ({typeof baz})</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-data-static/_config.js b/test/runtime/samples/component-data-static/_config.js
new file mode 100644
index 0000000000..13549b4076
--- /dev/null
+++ b/test/runtime/samples/component-data-static/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: `
+		<div>
+			<p>foo: bar</p>
+			<p>baz: 42 (number)</p>
+		</div>
+	`
+};
diff --git a/test/runtime/samples/component-data-static/main.svelte b/test/runtime/samples/component-data-static/main.svelte
new file mode 100644
index 0000000000..b116b262a0
--- /dev/null
+++ b/test/runtime/samples/component-data-static/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<div>
+	<Widget foo='bar' baz={42}/>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-event-handler-contenteditable/_config.js b/test/runtime/samples/component-event-handler-contenteditable/_config.js
new file mode 100644
index 0000000000..1628e22d01
--- /dev/null
+++ b/test/runtime/samples/component-event-handler-contenteditable/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: `
+		<div contenteditable=""></div>
+	`,
+
+	async test({ assert, target, window }) {
+		const div = target.querySelector('div');
+		const text =  window.document.createTextNode('a');
+		div.insertBefore(text, null);
+		const event = new window.InputEvent('input');
+		await div.dispatchEvent(event);
+
+		assert.equal(div.textContent, 'a');
+	}
+};
diff --git a/test/runtime/samples/component-event-handler-contenteditable/main.svelte b/test/runtime/samples/component-event-handler-contenteditable/main.svelte
new file mode 100644
index 0000000000..1eb5911df8
--- /dev/null
+++ b/test/runtime/samples/component-event-handler-contenteditable/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	let text = '';
+	const updater = (event) => {text = event.target.textContent}
+</script>
+
+<div contenteditable on:input={updater}>{text}</div>
diff --git a/test/runtime/samples/component-event-handler-dynamic/Button.svelte b/test/runtime/samples/component-event-handler-dynamic/Button.svelte
new file mode 100644
index 0000000000..9b5b7a5f67
--- /dev/null
+++ b/test/runtime/samples/component-event-handler-dynamic/Button.svelte
@@ -0,0 +1 @@
+<button on:click><slot></slot></button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-event-handler-dynamic/_config.js b/test/runtime/samples/component-event-handler-dynamic/_config.js
new file mode 100644
index 0000000000..415b860828
--- /dev/null
+++ b/test/runtime/samples/component-event-handler-dynamic/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<button>update handler</button>
+		<button>0</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const [updateButton, button] = target.querySelectorAll('button');
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+		assert.equal(component.count, 1);
+
+		await updateButton.dispatchEvent(event);
+		await button.dispatchEvent(event);
+		assert.equal(component.count, 11);
+	}
+};
diff --git a/test/runtime/samples/component-event-handler-dynamic/main.svelte b/test/runtime/samples/component-event-handler-dynamic/main.svelte
new file mode 100644
index 0000000000..7555ea8c17
--- /dev/null
+++ b/test/runtime/samples/component-event-handler-dynamic/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Button from './Button.svelte';
+	export let count = 0;
+	let clickHandler = () => count += 1;
+	function updateHandler(){
+		clickHandler = () => count += 10;
+	}
+</script>
+
+<button on:click={updateHandler}>update handler</button>
+<Button on:click={clickHandler}>{count}</Button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-event-handler-modifier-once-dynamic/Button.svelte b/test/runtime/samples/component-event-handler-modifier-once-dynamic/Button.svelte
new file mode 100644
index 0000000000..9b5b7a5f67
--- /dev/null
+++ b/test/runtime/samples/component-event-handler-modifier-once-dynamic/Button.svelte
@@ -0,0 +1 @@
+<button on:click><slot></slot></button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-event-handler-modifier-once-dynamic/_config.js b/test/runtime/samples/component-event-handler-modifier-once-dynamic/_config.js
new file mode 100644
index 0000000000..8796e0faf6
--- /dev/null
+++ b/test/runtime/samples/component-event-handler-modifier-once-dynamic/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<button>update handler</button>
+		<button>0</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const [updateButton, button] = target.querySelectorAll('button');
+		const event = new window.MouseEvent('click');
+
+		await updateButton.dispatchEvent(event);
+		await button.dispatchEvent(event);
+		assert.equal(component.count, 10);
+
+		await button.dispatchEvent(event);
+		assert.equal(component.count, 10);
+	}
+};
diff --git a/test/runtime/samples/component-event-handler-modifier-once-dynamic/main.svelte b/test/runtime/samples/component-event-handler-modifier-once-dynamic/main.svelte
new file mode 100644
index 0000000000..93ec90d5ce
--- /dev/null
+++ b/test/runtime/samples/component-event-handler-modifier-once-dynamic/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Button from './Button.svelte';
+	export let count = 0;
+	let clickHandler = () => count += 1;
+	function updateHandler(){
+		clickHandler = () => count += 10;
+	}
+</script>
+
+<button on:click={updateHandler}>update handler</button>
+<Button on:click|once={clickHandler}>{count}</Button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-event-handler-modifier-once/Button.svelte b/test/runtime/samples/component-event-handler-modifier-once/Button.svelte
new file mode 100644
index 0000000000..9b5b7a5f67
--- /dev/null
+++ b/test/runtime/samples/component-event-handler-modifier-once/Button.svelte
@@ -0,0 +1 @@
+<button on:click><slot></slot></button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-event-handler-modifier-once/_config.js b/test/runtime/samples/component-event-handler-modifier-once/_config.js
new file mode 100644
index 0000000000..41daf374c8
--- /dev/null
+++ b/test/runtime/samples/component-event-handler-modifier-once/_config.js
@@ -0,0 +1,16 @@
+export default {
+	html: `
+		<button>0</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+		assert.equal(component.count, 1);
+
+		await button.dispatchEvent(event);
+		assert.equal(component.count, 1);
+	}
+};
diff --git a/test/runtime/samples/component-event-handler-modifier-once/main.svelte b/test/runtime/samples/component-event-handler-modifier-once/main.svelte
new file mode 100644
index 0000000000..b9bca3b5eb
--- /dev/null
+++ b/test/runtime/samples/component-event-handler-modifier-once/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Button from './Button.svelte';
+	export let count = 0;
+</script>
+
+<Button on:click|once="{() => count += 1}">{count}</Button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-event-not-stale/Button.svelte b/test/runtime/samples/component-event-not-stale/Button.svelte
new file mode 100644
index 0000000000..f2decc7386
--- /dev/null
+++ b/test/runtime/samples/component-event-not-stale/Button.svelte
@@ -0,0 +1 @@
+<button on:click><slot/></button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-event-not-stale/_config.js b/test/runtime/samples/component-event-not-stale/_config.js
new file mode 100644
index 0000000000..7951afb9d5
--- /dev/null
+++ b/test/runtime/samples/component-event-not-stale/_config.js
@@ -0,0 +1,30 @@
+export default {
+	props: {
+		value: 1
+	},
+
+	test({ assert, component, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const click = new window.MouseEvent('click');
+
+		const events = [];
+		component.$on('value', event => {
+			events.push(event.detail);
+		});
+
+		buttons[0].dispatchEvent(click);
+		buttons[1].dispatchEvent(click);
+
+		component.value = 2;
+
+		buttons[0].dispatchEvent(click);
+		buttons[1].dispatchEvent(click);
+
+		assert.deepEqual(events, [
+			{ value: 1 },
+			{ value: 1 },
+			{ value: 2 },
+			{ value: 2 }
+		]);
+	}
+};
diff --git a/test/runtime/samples/component-event-not-stale/main.svelte b/test/runtime/samples/component-event-not-stale/main.svelte
new file mode 100644
index 0000000000..0b2ab2c1ee
--- /dev/null
+++ b/test/runtime/samples/component-event-not-stale/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+	import Button from './Button.svelte';
+
+	const dispatch = createEventDispatcher();
+
+	export let value;
+
+	function handleClick() {
+		dispatch('value', { value });
+	}
+</script>
+
+<Button on:click="{handleClick}">one</Button>
+<Button on:click="{() => dispatch('value', {value})}">two</Button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-events-console/Widget.svelte b/test/runtime/samples/component-events-console/Widget.svelte
new file mode 100644
index 0000000000..f54897f249
--- /dev/null
+++ b/test/runtime/samples/component-events-console/Widget.svelte
@@ -0,0 +1 @@
+<button on:click>click me</button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-events-console/_config.js b/test/runtime/samples/component-events-console/_config.js
new file mode 100644
index 0000000000..fc3b4daa85
--- /dev/null
+++ b/test/runtime/samples/component-events-console/_config.js
@@ -0,0 +1,25 @@
+export default {
+	html: '<button>click me</button>',
+
+	test({ assert, target }) {
+		const button = target.querySelector('button');
+		const messages = [];
+
+		const log = console.log;
+		console.log = msg => {
+			messages.push(msg);
+		};
+
+		try {
+			button.dispatchEvent(new window.MouseEvent('click'));
+			assert.deepEqual(messages, [
+				'clicked'
+			]);
+		} catch (err) {
+			console.log = log;
+			throw err;
+		}
+
+		console.log = log;
+	}
+};
diff --git a/test/runtime/samples/component-events-console/main.svelte b/test/runtime/samples/component-events-console/main.svelte
new file mode 100644
index 0000000000..fba004b4eb
--- /dev/null
+++ b/test/runtime/samples/component-events-console/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<Widget on:click="{() => console.log('clicked')}"/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-events-data/Widget.svelte b/test/runtime/samples/component-events-data/Widget.svelte
new file mode 100644
index 0000000000..30a3159b48
--- /dev/null
+++ b/test/runtime/samples/component-events-data/Widget.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<button on:click='{() => dispatch("select", { selection: "foo" })}'>select foo</button>
+<button on:click='{() => dispatch("select", { selection: "bar" })}'>select bar</button>
+<button on:click='{() => dispatch("select", { selection: "baz" })}'>select baz</button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-events-data/_config.js b/test/runtime/samples/component-events-data/_config.js
new file mode 100644
index 0000000000..e4ef16c6f8
--- /dev/null
+++ b/test/runtime/samples/component-events-data/_config.js
@@ -0,0 +1,24 @@
+export default {
+	test({ assert, component, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const click = new window.MouseEvent('click');
+
+		const selected = [];
+
+		component.$on('select', event => {
+			selected.push(event.detail);
+		});
+
+		buttons[1].dispatchEvent(click);
+		buttons[2].dispatchEvent(click);
+		buttons[1].dispatchEvent(click);
+		buttons[0].dispatchEvent(click);
+
+		assert.deepEqual(selected, [
+			'bar',
+			'baz',
+			'bar',
+			'foo'
+		]);
+	}
+};
diff --git a/test/runtime/samples/component-events-data/main.svelte b/test/runtime/samples/component-events-data/main.svelte
new file mode 100644
index 0000000000..ea44594ccd
--- /dev/null
+++ b/test/runtime/samples/component-events-data/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+	import Widget from './Widget.svelte';
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<div>
+	<Widget on:select='{event => dispatch("select", event.detail.selection)}'/>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-events-each/Widget.svelte b/test/runtime/samples/component-events-each/Widget.svelte
new file mode 100644
index 0000000000..205c67999b
--- /dev/null
+++ b/test/runtime/samples/component-events-each/Widget.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<button on:click='{() => dispatch("foo")}'>click me</button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-events-each/_config.js b/test/runtime/samples/component-events-each/_config.js
new file mode 100644
index 0000000000..3165dda676
--- /dev/null
+++ b/test/runtime/samples/component-events-each/_config.js
@@ -0,0 +1,30 @@
+export default {
+	props: {
+		items: ['a', 'b', 'c']
+	},
+
+	html: `
+		<div>
+			<button>click me</button>
+			<button>click me</button>
+			<button>click me</button>
+		</div>
+	`,
+
+	test({ assert, component, target, window }) {
+		const buttons = target.querySelectorAll('button');
+
+		const clicks = [];
+
+		component.$on('foo', event => {
+			clicks.push(event.detail);
+		});
+
+		const event = new window.MouseEvent('click');
+
+		buttons[0].dispatchEvent(event);
+		buttons[2].dispatchEvent(event);
+
+		assert.deepEqual(clicks, ['a', 'c']);
+	}
+};
diff --git a/test/runtime/samples/component-events-each/main.svelte b/test/runtime/samples/component-events-each/main.svelte
new file mode 100644
index 0000000000..f229873431
--- /dev/null
+++ b/test/runtime/samples/component-events-each/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	import Widget from './Widget.svelte';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	export let items;
+
+	function foo(item) {
+		dispatch('foo', item);
+	}
+</script>
+
+<div>
+	{#each items as item}
+		<Widget on:foo='{() => foo(item)}'/>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-events-this/Inner.svelte b/test/runtime/samples/component-events-this/Inner.svelte
new file mode 100644
index 0000000000..377aa17c43
--- /dev/null
+++ b/test/runtime/samples/component-events-this/Inner.svelte
@@ -0,0 +1,7 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+  const dispatch = createEventDispatcher();
+
+</script>
+
+<button on:click={() => dispatch('bar')} />
\ No newline at end of file
diff --git a/test/runtime/samples/component-events-this/Widget.svelte b/test/runtime/samples/component-events-this/Widget.svelte
new file mode 100644
index 0000000000..30b95e94f1
--- /dev/null
+++ b/test/runtime/samples/component-events-this/Widget.svelte
@@ -0,0 +1,6 @@
+<script>
+  import Inner from './Inner.svelte';
+</script>
+
+<button on:click>click me</button>
+<Inner on:bar />
\ No newline at end of file
diff --git a/test/runtime/samples/component-events-this/_config.js b/test/runtime/samples/component-events-this/_config.js
new file mode 100644
index 0000000000..180ae7367d
--- /dev/null
+++ b/test/runtime/samples/component-events-this/_config.js
@@ -0,0 +1,11 @@
+export default {
+	test({ assert, component, target, window }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		button1.dispatchEvent(new window.MouseEvent('click'));
+		button2.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.strictEqual(component.logs[0], button1);
+		assert.ok(component.logs[1] instanceof component.Inner);
+	}
+};
diff --git a/test/runtime/samples/component-events-this/main.svelte b/test/runtime/samples/component-events-this/main.svelte
new file mode 100644
index 0000000000..328a524360
--- /dev/null
+++ b/test/runtime/samples/component-events-this/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Widget from './Widget.svelte';
+	import Inner from './Inner.svelte';
+
+	export let logs = [];
+	export { Inner };
+
+	function foo() {
+		logs.push(this);
+	}
+	function bar() {
+		logs.push(this);
+	}
+</script>
+
+<Widget on:click={foo} on:bar={bar} />
\ No newline at end of file
diff --git a/test/runtime/samples/component-events/Widget.svelte b/test/runtime/samples/component-events/Widget.svelte
new file mode 100644
index 0000000000..9a7215815c
--- /dev/null
+++ b/test/runtime/samples/component-events/Widget.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { onDestroy, createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	onDestroy(() => {
+		dispatch('destroy');
+	});
+</script>
+
+<p>i am a widget</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-events/_config.js b/test/runtime/samples/component-events/_config.js
new file mode 100644
index 0000000000..26034edc99
--- /dev/null
+++ b/test/runtime/samples/component-events/_config.js
@@ -0,0 +1,23 @@
+export default {
+	props: {
+		visible: true
+	},
+
+	html: '<div><p>i am a widget</p></div>',
+
+	test({ assert, component }) {
+		let count = 0;
+
+		component.$on('widgetTornDown', function() {
+			assert.equal(this, component);
+			count += 1;
+		});
+
+		component.visible = false;
+		assert.equal(count, 1);
+
+		component.visible = true;
+		component.visible = false;
+		assert.equal(count, 2);
+	}
+};
diff --git a/test/runtime/samples/component-events/main.svelte b/test/runtime/samples/component-events/main.svelte
new file mode 100644
index 0000000000..ad33261456
--- /dev/null
+++ b/test/runtime/samples/component-events/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+	import Widget from './Widget.svelte';
+
+	const dispatch = createEventDispatcher();
+
+	export let visible;
+</script>
+
+<div>
+	{#if visible}
+		<Widget on:destroy='{() => dispatch("widgetTornDown")}'/>
+	{/if}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-if-placement/Component.svelte b/test/runtime/samples/component-if-placement/Component.svelte
new file mode 100644
index 0000000000..48d0e60ae2
--- /dev/null
+++ b/test/runtime/samples/component-if-placement/Component.svelte
@@ -0,0 +1,3 @@
+{#if true}
+	<span>Component</span>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/component-if-placement/_config.js b/test/runtime/samples/component-if-placement/_config.js
new file mode 100644
index 0000000000..abeda9e9be
--- /dev/null
+++ b/test/runtime/samples/component-if-placement/_config.js
@@ -0,0 +1,20 @@
+export default {
+	props: {
+		flag: true
+	},
+
+	html: `
+		<span>Before</span>
+		<span>Component</span>
+		<span>After</span>
+	`,
+
+	test({ assert, component, target }) {
+		component.flag = false;
+		assert.htmlEqual( target.innerHTML, `
+			<span>Before</span>
+			<span>Component</span>
+			<span>After</span>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-if-placement/main.svelte b/test/runtime/samples/component-if-placement/main.svelte
new file mode 100644
index 0000000000..f9e65b9d3b
--- /dev/null
+++ b/test/runtime/samples/component-if-placement/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Component from './Component.svelte';
+	export let flag;
+</script>
+
+<span>Before</span>
+{#if flag}
+	<Component/>
+{:else}
+	<Component/>
+{/if}
+<span>After</span>
\ No newline at end of file
diff --git a/test/runtime/samples/component-name-deconflicted-globals/Countdown.svelte b/test/runtime/samples/component-name-deconflicted-globals/Countdown.svelte
new file mode 100644
index 0000000000..0f04fa119a
--- /dev/null
+++ b/test/runtime/samples/component-name-deconflicted-globals/Countdown.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let count;
+</script>
+
+<span>{count}</span>
+
+{#if count > 1}
+	<!-- this shouldn't work — we have to use <svelte:self> instead -->
+	<Countdown count={count - 1}/>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/component-name-deconflicted-globals/_config.js b/test/runtime/samples/component-name-deconflicted-globals/_config.js
new file mode 100644
index 0000000000..66d1d1a8f1
--- /dev/null
+++ b/test/runtime/samples/component-name-deconflicted-globals/_config.js
@@ -0,0 +1,5 @@
+export default {
+	preserveIdentifiers: true,
+
+	error: 'Countdown is not defined'
+};
diff --git a/test/runtime/samples/component-name-deconflicted-globals/main.svelte b/test/runtime/samples/component-name-deconflicted-globals/main.svelte
new file mode 100644
index 0000000000..797f3086dd
--- /dev/null
+++ b/test/runtime/samples/component-name-deconflicted-globals/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Countdown from './Countdown.svelte';
+</script>
+
+<Countdown count={5}/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-name-deconflicted/Nested.svelte b/test/runtime/samples/component-name-deconflicted/Nested.svelte
new file mode 100644
index 0000000000..fe7e76dd64
--- /dev/null
+++ b/test/runtime/samples/component-name-deconflicted/Nested.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let nested;
+</script>
+
+<span>{nested}</span>
\ No newline at end of file
diff --git a/test/runtime/samples/component-name-deconflicted/_config.js b/test/runtime/samples/component-name-deconflicted/_config.js
new file mode 100644
index 0000000000..5813042745
--- /dev/null
+++ b/test/runtime/samples/component-name-deconflicted/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: `
+		<span>1</span>
+		<span>2</span>
+	`,
+
+	test({ assert, component, target }) {
+		component.list = [3, 4];
+
+		assert.htmlEqual(target.innerHTML, `
+			<span>3</span>
+			<span>4</span>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-name-deconflicted/main.svelte b/test/runtime/samples/component-name-deconflicted/main.svelte
new file mode 100644
index 0000000000..1649ad0a7d
--- /dev/null
+++ b/test/runtime/samples/component-name-deconflicted/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let list = [1, 2];
+</script>
+
+{#each list as nested}
+	{#if true}
+		<Nested {nested}/>
+	{/if}
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/component-namespace/Tooltip.svelte b/test/runtime/samples/component-namespace/Tooltip.svelte
new file mode 100644
index 0000000000..9b44ef57a8
--- /dev/null
+++ b/test/runtime/samples/component-namespace/Tooltip.svelte
@@ -0,0 +1 @@
+<p>i am a widget</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-namespace/Widget.svelte b/test/runtime/samples/component-namespace/Widget.svelte
new file mode 100644
index 0000000000..b6aa45c6a8
--- /dev/null
+++ b/test/runtime/samples/component-namespace/Widget.svelte
@@ -0,0 +1,5 @@
+<script context="module">
+  import Tooltip from './Tooltip.svelte';
+
+  export const Widget = { Tooltip };
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/component-namespace/_config.js b/test/runtime/samples/component-namespace/_config.js
new file mode 100644
index 0000000000..5b96ac8df0
--- /dev/null
+++ b/test/runtime/samples/component-namespace/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>i am a widget</p>'
+};
diff --git a/test/runtime/samples/component-namespace/main.svelte b/test/runtime/samples/component-namespace/main.svelte
new file mode 100644
index 0000000000..3f53b2b1c8
--- /dev/null
+++ b/test/runtime/samples/component-namespace/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { Widget } from './Widget.svelte';
+	let widgets = [Widget];
+</script>
+
+{#each widgets as LazyWidget}
+	<LazyWidget.Tooltip />
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/component-namespaced/Foo.svelte b/test/runtime/samples/component-namespaced/Foo.svelte
new file mode 100644
index 0000000000..67ab955233
--- /dev/null
+++ b/test/runtime/samples/component-namespaced/Foo.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+<p>foo {foo}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-namespaced/_config.js b/test/runtime/samples/component-namespaced/_config.js
new file mode 100644
index 0000000000..7ec4a35c6d
--- /dev/null
+++ b/test/runtime/samples/component-namespaced/_config.js
@@ -0,0 +1,16 @@
+export default {
+	props: {
+		a: 1
+	},
+
+	html: `
+		<p>foo 1</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.a = 2;
+		assert.htmlEqual(target.innerHTML, `
+			<p>foo 2</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-namespaced/components.svelte b/test/runtime/samples/component-namespaced/components.svelte
new file mode 100644
index 0000000000..5b9a6c5167
--- /dev/null
+++ b/test/runtime/samples/component-namespaced/components.svelte
@@ -0,0 +1,5 @@
+<script context="module">
+  import Foo from './Foo.svelte';
+
+  export const Components = { Foo };
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/component-namespaced/main.svelte b/test/runtime/samples/component-namespaced/main.svelte
new file mode 100644
index 0000000000..25862cf6f2
--- /dev/null
+++ b/test/runtime/samples/component-namespaced/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { Components } from './components.svelte';
+
+	export let a;
+</script>
+
+<Components.Foo foo={a}/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-nested-deep/Level1.svelte b/test/runtime/samples/component-nested-deep/Level1.svelte
new file mode 100644
index 0000000000..1889fa2bd0
--- /dev/null
+++ b/test/runtime/samples/component-nested-deep/Level1.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Level2 from './Level2.svelte';
+	import Level3 from './Level3.svelte';
+</script>
+
+<Level2>
+	<Level3 />
+</Level2>
\ No newline at end of file
diff --git a/test/runtime/samples/component-nested-deep/Level2.svelte b/test/runtime/samples/component-nested-deep/Level2.svelte
new file mode 100644
index 0000000000..500c4c9887
--- /dev/null
+++ b/test/runtime/samples/component-nested-deep/Level2.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Level3 from './Level3.svelte';
+</script>
+
+<span>level 2</span>
+<slot></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-nested-deep/Level3.svelte b/test/runtime/samples/component-nested-deep/Level3.svelte
new file mode 100644
index 0000000000..b153e7e37a
--- /dev/null
+++ b/test/runtime/samples/component-nested-deep/Level3.svelte
@@ -0,0 +1 @@
+<span>level 3</span>
\ No newline at end of file
diff --git a/test/runtime/samples/component-nested-deep/_config.js b/test/runtime/samples/component-nested-deep/_config.js
new file mode 100644
index 0000000000..3d5305529e
--- /dev/null
+++ b/test/runtime/samples/component-nested-deep/_config.js
@@ -0,0 +1,5 @@
+export default {
+	test({ component }) {
+		component.l1.$destroy();
+	}
+};
diff --git a/test/runtime/samples/component-nested-deep/main.svelte b/test/runtime/samples/component-nested-deep/main.svelte
new file mode 100644
index 0000000000..a7007e27ea
--- /dev/null
+++ b/test/runtime/samples/component-nested-deep/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Level1 from './Level1.svelte';
+
+	export let l1;
+</script>
+
+<Level1 bind:this={l1} />
\ No newline at end of file
diff --git a/test/runtime/samples/component-nested-deeper/Level1.svelte b/test/runtime/samples/component-nested-deeper/Level1.svelte
new file mode 100644
index 0000000000..887782f121
--- /dev/null
+++ b/test/runtime/samples/component-nested-deeper/Level1.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Level2 from './Level2.svelte';
+	import Level3 from './Level3.svelte';
+	
+	export let values;
+</script>
+
+<div class="level1">
+	{#each values as value}
+		<h4>level 1 #{value}</h4>
+		<Level2 condition="{value % 2}">
+			<Level3>
+				<span>And more stuff goes in here</span>
+			</Level3>
+		</Level2>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-nested-deeper/Level2.svelte b/test/runtime/samples/component-nested-deeper/Level2.svelte
new file mode 100644
index 0000000000..7249b0037b
--- /dev/null
+++ b/test/runtime/samples/component-nested-deeper/Level2.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let condition;
+</script>
+
+
+
+<div class="level2">
+	<h4>level 2</h4>
+	{#if condition}
+		<span>TRUE! <slot></slot></span>
+	{:else}
+		<span>FALSE! <slot></slot></span>
+	{/if}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-nested-deeper/Level3.svelte b/test/runtime/samples/component-nested-deeper/Level3.svelte
new file mode 100644
index 0000000000..0ce8c73109
--- /dev/null
+++ b/test/runtime/samples/component-nested-deeper/Level3.svelte
@@ -0,0 +1,4 @@
+<div class="level3">
+	<h4>level 3</h4>
+	<slot></slot>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-nested-deeper/_config.js b/test/runtime/samples/component-nested-deeper/_config.js
new file mode 100644
index 0000000000..828a3169ac
--- /dev/null
+++ b/test/runtime/samples/component-nested-deeper/_config.js
@@ -0,0 +1,9 @@
+export default {
+	props: {
+		values: [1, 2, 3, 4]
+	},
+
+	test({ component }) {
+		component.values = [2, 3];
+	}
+};
diff --git a/test/runtime/samples/component-nested-deeper/main.svelte b/test/runtime/samples/component-nested-deeper/main.svelte
new file mode 100644
index 0000000000..a1a6ff0de5
--- /dev/null
+++ b/test/runtime/samples/component-nested-deeper/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Level1 from './Level1.svelte';
+	
+	export let values;
+</script>
+
+<Level1 {values}/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-not-void/Link.svelte b/test/runtime/samples/component-not-void/Link.svelte
new file mode 100644
index 0000000000..18a6961518
--- /dev/null
+++ b/test/runtime/samples/component-not-void/Link.svelte
@@ -0,0 +1 @@
+<p><slot></slot></p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-not-void/_config.js b/test/runtime/samples/component-not-void/_config.js
new file mode 100644
index 0000000000..174d01f1a5
--- /dev/null
+++ b/test/runtime/samples/component-not-void/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>Hello</p>'
+};
diff --git a/test/runtime/samples/component-not-void/main.svelte b/test/runtime/samples/component-not-void/main.svelte
new file mode 100644
index 0000000000..836777832b
--- /dev/null
+++ b/test/runtime/samples/component-not-void/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Link from './Link.svelte';
+</script>
+
+<Link>Hello</Link>
\ No newline at end of file
diff --git a/test/runtime/samples/component-ref/Widget.svelte b/test/runtime/samples/component-ref/Widget.svelte
new file mode 100644
index 0000000000..3a1e7b2d49
--- /dev/null
+++ b/test/runtime/samples/component-ref/Widget.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let isWidget;
+
+	onMount(() => {
+		isWidget = true;
+	});
+</script>
+
+<p>i am a widget</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-ref/_config.js b/test/runtime/samples/component-ref/_config.js
new file mode 100644
index 0000000000..1c0cca6dc5
--- /dev/null
+++ b/test/runtime/samples/component-ref/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: '<div><p>i am a widget</p></div>',
+
+	test({ assert, component }) {
+		const { widget } = component;
+		assert.ok(widget.isWidget);
+	}
+};
diff --git a/test/runtime/samples/component-ref/main.svelte b/test/runtime/samples/component-ref/main.svelte
new file mode 100644
index 0000000000..1f51727c76
--- /dev/null
+++ b/test/runtime/samples/component-ref/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Widget from './Widget.svelte';
+	export let widget;
+</script>
+
+<div>
+	<Widget bind:this={widget}/>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-shorthand-import/Widget.svelte b/test/runtime/samples/component-shorthand-import/Widget.svelte
new file mode 100644
index 0000000000..10c1f07afe
--- /dev/null
+++ b/test/runtime/samples/component-shorthand-import/Widget.svelte
@@ -0,0 +1 @@
+<p>This is the widget.</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-shorthand-import/_config.js b/test/runtime/samples/component-shorthand-import/_config.js
new file mode 100644
index 0000000000..dd60415537
--- /dev/null
+++ b/test/runtime/samples/component-shorthand-import/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>This is the widget.</p>'
+};
diff --git a/test/runtime/samples/component-shorthand-import/main.svelte b/test/runtime/samples/component-shorthand-import/main.svelte
new file mode 100644
index 0000000000..0a9d5bba87
--- /dev/null
+++ b/test/runtime/samples/component-shorthand-import/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<Widget/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-attribute-order/Component.svelte b/test/runtime/samples/component-slot-attribute-order/Component.svelte
new file mode 100644
index 0000000000..55c0858fb9
--- /dev/null
+++ b/test/runtime/samples/component-slot-attribute-order/Component.svelte
@@ -0,0 +1 @@
+<slot name="footer" />
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-attribute-order/_config.js b/test/runtime/samples/component-slot-attribute-order/_config.js
new file mode 100644
index 0000000000..f4572317ca
--- /dev/null
+++ b/test/runtime/samples/component-slot-attribute-order/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: `
+		<button>Disable</button>
+		<button slot="footer">Button</button>
+		<button slot="footer">Button</button>
+	`,
+	async test({ assert, target, window }) {
+		const [btn, btn1, btn2] = target.querySelectorAll('button');
+
+		await btn.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.equal(btn1.disabled, true);
+		assert.equal(btn2.disabled, true);
+	}
+};
diff --git a/test/runtime/samples/component-slot-attribute-order/main.svelte b/test/runtime/samples/component-slot-attribute-order/main.svelte
new file mode 100644
index 0000000000..85f99d7579
--- /dev/null
+++ b/test/runtime/samples/component-slot-attribute-order/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Component from './Component.svelte';
+
+	let disabled = false;
+</script>
+
+<button on:click={() => disabled = !disabled}>Disable</button>
+
+<Component>
+	<button slot="footer" disabled={disabled}>Button</button>
+</Component>
+
+<Component>
+	<button disabled={disabled} slot="footer">Button</button>
+</Component>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/Nested.svelte b/test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/Nested.svelte
new file mode 100644
index 0000000000..68c17cbbe7
--- /dev/null
+++ b/test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/Nested.svelte
@@ -0,0 +1,7 @@
+<script>
+	let clientHeight;
+</script>
+
+<p bind:clientHeight>
+	<slot/>
+</p>
diff --git a/test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/_config.js b/test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/_config.js
new file mode 100644
index 0000000000..02a61bed5e
--- /dev/null
+++ b/test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/_config.js
@@ -0,0 +1,2 @@
+export default {
+};
diff --git a/test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/main.svelte b/test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/main.svelte
new file mode 100644
index 0000000000..760c9e0356
--- /dev/null
+++ b/test/runtime/samples/component-slot-binding-dimensions-destroys-cleanly/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	Hello
+</Nested>
diff --git a/test/runtime/samples/component-slot-chained/Inner.svelte b/test/runtime/samples/component-slot-chained/Inner.svelte
new file mode 100644
index 0000000000..8b6c0a40e9
--- /dev/null
+++ b/test/runtime/samples/component-slot-chained/Inner.svelte
@@ -0,0 +1 @@
+<slot/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-chained/Outer.svelte b/test/runtime/samples/component-slot-chained/Outer.svelte
new file mode 100644
index 0000000000..c09cc83395
--- /dev/null
+++ b/test/runtime/samples/component-slot-chained/Outer.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Inner from './Inner.svelte';
+</script>
+
+<Inner>
+	<slot/>
+</Inner>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-chained/_config.js b/test/runtime/samples/component-slot-chained/_config.js
new file mode 100644
index 0000000000..f2f71df8d6
--- /dev/null
+++ b/test/runtime/samples/component-slot-chained/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: 'one',
+
+	test({ assert, component, target }) {
+		component.text = 'two';
+		assert.htmlEqual(target.innerHTML, 'two');
+	}
+};
diff --git a/test/runtime/samples/component-slot-chained/main.svelte b/test/runtime/samples/component-slot-chained/main.svelte
new file mode 100644
index 0000000000..8a3eb67f8e
--- /dev/null
+++ b/test/runtime/samples/component-slot-chained/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Outer from './Outer.svelte';
+
+	export let text = 'one';
+</script>
+
+<Outer>
+	{text}
+</Outer>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-component-named-b/Hello.svelte b/test/runtime/samples/component-slot-component-named-b/Hello.svelte
new file mode 100644
index 0000000000..ba726f62c9
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named-b/Hello.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let name;
+</script>
+
+<span>Hello {name}</span>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-component-named-b/Nested.svelte b/test/runtime/samples/component-slot-component-named-b/Nested.svelte
new file mode 100644
index 0000000000..a94392ce5d
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named-b/Nested.svelte
@@ -0,0 +1 @@
+<slot name="name"></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-component-named-b/_config.js b/test/runtime/samples/component-slot-component-named-b/_config.js
new file mode 100644
index 0000000000..2b4af715c2
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named-b/_config.js
@@ -0,0 +1,7 @@
+export default {
+	preserveIdentifiers: true,
+
+	html: `
+		<span>Hello world</span>
+	`
+};
diff --git a/test/runtime/samples/component-slot-component-named-b/main.svelte b/test/runtime/samples/component-slot-component-named-b/main.svelte
new file mode 100644
index 0000000000..494a50a86c
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named-b/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Nested from './Nested.svelte';
+	import Hello from './Hello.svelte';
+
+	let name = 'world';
+</script>
+
+<Nested>
+	<Hello slot="name" {name} />
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-component-named-c/Hello.svelte b/test/runtime/samples/component-slot-component-named-c/Hello.svelte
new file mode 100644
index 0000000000..28a2bb436a
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named-c/Hello.svelte
@@ -0,0 +1 @@
+<span>Hello</span>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-component-named-c/Nested.svelte b/test/runtime/samples/component-slot-component-named-c/Nested.svelte
new file mode 100644
index 0000000000..a94392ce5d
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named-c/Nested.svelte
@@ -0,0 +1 @@
+<slot name="name"></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-component-named-c/World.svelte b/test/runtime/samples/component-slot-component-named-c/World.svelte
new file mode 100644
index 0000000000..680e6dff5b
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named-c/World.svelte
@@ -0,0 +1 @@
+<span>world</span>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-component-named-c/_config.js b/test/runtime/samples/component-slot-component-named-c/_config.js
new file mode 100644
index 0000000000..9dfed6ff53
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named-c/_config.js
@@ -0,0 +1,6 @@
+export default {
+	html: `
+		<span>Hello</span>
+		<span>world</span>
+	`
+};
diff --git a/test/runtime/samples/component-slot-component-named-c/main.svelte b/test/runtime/samples/component-slot-component-named-c/main.svelte
new file mode 100644
index 0000000000..4bf657d9cb
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named-c/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Nested from './Nested.svelte';
+	import Hello from './Hello.svelte';
+	import World from './World.svelte';
+</script>
+
+<Nested>
+	<Hello slot="name" />
+</Nested>
+
+<Nested>
+	<World slot="name" />
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-component-named/Bar.svelte b/test/runtime/samples/component-slot-component-named/Bar.svelte
new file mode 100644
index 0000000000..8124337d72
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named/Bar.svelte
@@ -0,0 +1 @@
+<p>bar</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-component-named/Foo.svelte b/test/runtime/samples/component-slot-component-named/Foo.svelte
new file mode 100644
index 0000000000..998ea4094d
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named/Foo.svelte
@@ -0,0 +1 @@
+<p>foo</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-component-named/Nested.svelte b/test/runtime/samples/component-slot-component-named/Nested.svelte
new file mode 100644
index 0000000000..665555820a
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named/Nested.svelte
@@ -0,0 +1,5 @@
+<div>
+	<slot/>
+	<slot name='bar'/>
+	<slot name='foo'/>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-component-named/_config.js b/test/runtime/samples/component-slot-component-named/_config.js
new file mode 100644
index 0000000000..f7b74a7b4f
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named/_config.js
@@ -0,0 +1,9 @@
+export default {
+	html: `
+		<div>
+			Hello
+			<p>bar</p>
+			<p>foo</p>
+		</div>
+	`
+};
diff --git a/test/runtime/samples/component-slot-component-named/main.svelte b/test/runtime/samples/component-slot-component-named/main.svelte
new file mode 100644
index 0000000000..c16f005d5d
--- /dev/null
+++ b/test/runtime/samples/component-slot-component-named/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Nested from './Nested.svelte';
+	import Foo from './Foo.svelte';
+	import Bar from './Bar.svelte';
+</script>
+
+<Nested>
+	Hello
+
+	<Foo slot='foo' />
+	<Bar slot='bar' />
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-context-props-each-nested/Nested.svelte b/test/runtime/samples/component-slot-context-props-each-nested/Nested.svelte
new file mode 100644
index 0000000000..fab3ae1890
--- /dev/null
+++ b/test/runtime/samples/component-slot-context-props-each-nested/Nested.svelte
@@ -0,0 +1,14 @@
+<script>
+	let keys = ['a', 'b'];
+	let items = ['c', 'd'];
+  export let log;
+	function setKey(key, value, item) {
+		log.push(`setKey(${key}, ${value}, ${item})`);
+  }
+</script>
+
+{#each items as item (item)}
+	{#each keys as key (key)}
+		<slot {key} {item} set={(value) => setKey(key, value, item)} />
+	{/each}
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-context-props-each-nested/_config.js b/test/runtime/samples/component-slot-context-props-each-nested/_config.js
new file mode 100644
index 0000000000..869cc555b1
--- /dev/null
+++ b/test/runtime/samples/component-slot-context-props-each-nested/_config.js
@@ -0,0 +1,36 @@
+export default {
+	html: `
+		<button type="button">Set a-c</button>
+		<button type="button">Set b-c</button>
+		<button type="button">Set a-d</button>
+		<button type="button">Set b-d</button>
+	`,
+	async test({ assert, target, window, component }) {
+		const [btn1, btn2, btn3, btn4] = target.querySelectorAll('button');
+		const click = new window.MouseEvent('click');
+
+		await btn1.dispatchEvent(click);
+		assert.deepEqual(component.log, ['setKey(a, value-a-c, c)']);
+
+		await btn2.dispatchEvent(click);
+		assert.deepEqual(component.log, [
+			'setKey(a, value-a-c, c)',
+			'setKey(b, value-b-c, c)'
+		]);
+
+		await btn3.dispatchEvent(click);
+		assert.deepEqual(component.log, [
+			'setKey(a, value-a-c, c)',
+			'setKey(b, value-b-c, c)',
+			'setKey(a, value-a-d, d)'
+		]);
+
+		await btn4.dispatchEvent(click);
+		assert.deepEqual(component.log, [
+			'setKey(a, value-a-c, c)',
+			'setKey(b, value-b-c, c)',
+			'setKey(a, value-a-d, d)',
+			'setKey(b, value-b-d, d)'
+		]);
+	}
+};
diff --git a/test/runtime/samples/component-slot-context-props-each-nested/main.svelte b/test/runtime/samples/component-slot-context-props-each-nested/main.svelte
new file mode 100644
index 0000000000..7feb55aaf6
--- /dev/null
+++ b/test/runtime/samples/component-slot-context-props-each-nested/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Nested from './Nested.svelte';
+	export let log = [];
+</script>
+
+<Nested {log} let:set let:key let:item>
+	<button type="button" on:click={() => set(`value-${key}-${item}`)}>Set {key}-{item}</button>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-context-props-each/Nested.svelte b/test/runtime/samples/component-slot-context-props-each/Nested.svelte
new file mode 100644
index 0000000000..a29ffe0376
--- /dev/null
+++ b/test/runtime/samples/component-slot-context-props-each/Nested.svelte
@@ -0,0 +1,11 @@
+<script>
+	let keys = ['a', 'b'];
+  export let log;
+	function setKey(key, value) {
+		log.push(`setKey(${key}, ${value})`);
+  }
+</script>
+
+{#each keys as key (key)}
+	<slot {key} set={(value) => setKey(key, value)} />
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-context-props-each/_config.js b/test/runtime/samples/component-slot-context-props-each/_config.js
new file mode 100644
index 0000000000..f374e7f827
--- /dev/null
+++ b/test/runtime/samples/component-slot-context-props-each/_config.js
@@ -0,0 +1,19 @@
+export default {
+	html: `
+		<button type="button">Set a</button>
+		<button type="button">Set b</button>
+	`,
+	async test({ assert, target, window, component }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+		const click = new window.MouseEvent('click');
+
+		await btn1.dispatchEvent(click);
+		assert.deepEqual(component.log, ['setKey(a, value-a)']);
+
+		await btn2.dispatchEvent(click);
+		assert.deepEqual(component.log, [
+			'setKey(a, value-a)',
+			'setKey(b, value-b)'
+		]);
+	}
+};
diff --git a/test/runtime/samples/component-slot-context-props-each/main.svelte b/test/runtime/samples/component-slot-context-props-each/main.svelte
new file mode 100644
index 0000000000..7dc17b4c95
--- /dev/null
+++ b/test/runtime/samples/component-slot-context-props-each/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Nested from './Nested.svelte';
+	export let log = [];
+</script>
+
+<Nested {log} let:set let:key>
+	<button type="button" on:click={() => set(`value-${key}`)}>Set {key}</button>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-context-props-let/Inner.svelte b/test/runtime/samples/component-slot-context-props-let/Inner.svelte
new file mode 100644
index 0000000000..6beaabbb68
--- /dev/null
+++ b/test/runtime/samples/component-slot-context-props-let/Inner.svelte
@@ -0,0 +1,9 @@
+<script>
+  export let log;
+	function setKey(key, value) {
+		log.push(`setKey(${key}, ${value})`);
+  }
+</script>
+
+<slot key="a" set={setKey} />
+<slot key="b" set={setKey} />
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-context-props-let/Nested.svelte b/test/runtime/samples/component-slot-context-props-let/Nested.svelte
new file mode 100644
index 0000000000..97c44c5145
--- /dev/null
+++ b/test/runtime/samples/component-slot-context-props-let/Nested.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Inner from './Inner.svelte';
+  export let log;
+</script>
+
+<Inner {log} let:key let:set>
+	<slot {key} set={(value) => set(key, value)} />
+</Inner>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-context-props-let/_config.js b/test/runtime/samples/component-slot-context-props-let/_config.js
new file mode 100644
index 0000000000..f374e7f827
--- /dev/null
+++ b/test/runtime/samples/component-slot-context-props-let/_config.js
@@ -0,0 +1,19 @@
+export default {
+	html: `
+		<button type="button">Set a</button>
+		<button type="button">Set b</button>
+	`,
+	async test({ assert, target, window, component }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+		const click = new window.MouseEvent('click');
+
+		await btn1.dispatchEvent(click);
+		assert.deepEqual(component.log, ['setKey(a, value-a)']);
+
+		await btn2.dispatchEvent(click);
+		assert.deepEqual(component.log, [
+			'setKey(a, value-a)',
+			'setKey(b, value-b)'
+		]);
+	}
+};
diff --git a/test/runtime/samples/component-slot-context-props-let/main.svelte b/test/runtime/samples/component-slot-context-props-let/main.svelte
new file mode 100644
index 0000000000..a061f73b3a
--- /dev/null
+++ b/test/runtime/samples/component-slot-context-props-let/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Nested from './Nested.svelte';
+	export let log = [];
+</script>
+
+<Nested {log} let:set let:key>
+	<button type="button" on:click={() => set(`value-${key}`)}>Set {key}</button>
+</Nested>
diff --git a/test/runtime/samples/component-slot-default/Nested.svelte b/test/runtime/samples/component-slot-default/Nested.svelte
new file mode 100644
index 0000000000..eab3583e4b
--- /dev/null
+++ b/test/runtime/samples/component-slot-default/Nested.svelte
@@ -0,0 +1,3 @@
+<p>
+	<slot/>
+</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-default/_config.js b/test/runtime/samples/component-slot-default/_config.js
new file mode 100644
index 0000000000..174d01f1a5
--- /dev/null
+++ b/test/runtime/samples/component-slot-default/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>Hello</p>'
+};
diff --git a/test/runtime/samples/component-slot-default/main.svelte b/test/runtime/samples/component-slot-default/main.svelte
new file mode 100644
index 0000000000..1e1ea8daa8
--- /dev/null
+++ b/test/runtime/samples/component-slot-default/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	Hello
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-duplicate-error-2/Nested.svelte b/test/runtime/samples/component-slot-duplicate-error-2/Nested.svelte
new file mode 100644
index 0000000000..32eee1534a
--- /dev/null
+++ b/test/runtime/samples/component-slot-duplicate-error-2/Nested.svelte
@@ -0,0 +1 @@
+<slot value="Hi" />
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-duplicate-error-2/_config.js b/test/runtime/samples/component-slot-duplicate-error-2/_config.js
new file mode 100644
index 0000000000..1c9fa51dc3
--- /dev/null
+++ b/test/runtime/samples/component-slot-duplicate-error-2/_config.js
@@ -0,0 +1,3 @@
+export default {
+	error: 'Duplicate slot name "foo" in <Nested>'
+};
diff --git a/test/runtime/samples/component-slot-duplicate-error-2/main.svelte b/test/runtime/samples/component-slot-duplicate-error-2/main.svelte
new file mode 100644
index 0000000000..fefa1dc861
--- /dev/null
+++ b/test/runtime/samples/component-slot-duplicate-error-2/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	<svelte:fragment slot="foo">{value}</svelte:fragment>
+	<svelte:fragment slot="foo">{value}</svelte:fragment>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-duplicate-error-3/Nested.svelte b/test/runtime/samples/component-slot-duplicate-error-3/Nested.svelte
new file mode 100644
index 0000000000..32eee1534a
--- /dev/null
+++ b/test/runtime/samples/component-slot-duplicate-error-3/Nested.svelte
@@ -0,0 +1 @@
+<slot value="Hi" />
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-duplicate-error-3/_config.js b/test/runtime/samples/component-slot-duplicate-error-3/_config.js
new file mode 100644
index 0000000000..1c9fa51dc3
--- /dev/null
+++ b/test/runtime/samples/component-slot-duplicate-error-3/_config.js
@@ -0,0 +1,3 @@
+export default {
+	error: 'Duplicate slot name "foo" in <Nested>'
+};
diff --git a/test/runtime/samples/component-slot-duplicate-error-3/main.svelte b/test/runtime/samples/component-slot-duplicate-error-3/main.svelte
new file mode 100644
index 0000000000..596c1313d6
--- /dev/null
+++ b/test/runtime/samples/component-slot-duplicate-error-3/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	<svelte:fragment slot="foo">{value}</svelte:fragment>
+	<p slot="foo">{value}</p>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-duplicate-error-4/Nested.svelte b/test/runtime/samples/component-slot-duplicate-error-4/Nested.svelte
new file mode 100644
index 0000000000..0385342cef
--- /dev/null
+++ b/test/runtime/samples/component-slot-duplicate-error-4/Nested.svelte
@@ -0,0 +1 @@
+<slot />
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-duplicate-error-4/_config.js b/test/runtime/samples/component-slot-duplicate-error-4/_config.js
new file mode 100644
index 0000000000..cfe8e7054e
--- /dev/null
+++ b/test/runtime/samples/component-slot-duplicate-error-4/_config.js
@@ -0,0 +1,3 @@
+export default {
+	error: 'Found elements without slot attribute when using slot="default"'
+};
diff --git a/test/runtime/samples/component-slot-duplicate-error-4/main.svelte b/test/runtime/samples/component-slot-duplicate-error-4/main.svelte
new file mode 100644
index 0000000000..ee1dcfad7b
--- /dev/null
+++ b/test/runtime/samples/component-slot-duplicate-error-4/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	<svelte:fragment slot="default">value</svelte:fragment>
+	<p>value</p>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-duplicate-error/Nested.svelte b/test/runtime/samples/component-slot-duplicate-error/Nested.svelte
new file mode 100644
index 0000000000..32eee1534a
--- /dev/null
+++ b/test/runtime/samples/component-slot-duplicate-error/Nested.svelte
@@ -0,0 +1 @@
+<slot value="Hi" />
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-duplicate-error/_config.js b/test/runtime/samples/component-slot-duplicate-error/_config.js
new file mode 100644
index 0000000000..1c9fa51dc3
--- /dev/null
+++ b/test/runtime/samples/component-slot-duplicate-error/_config.js
@@ -0,0 +1,3 @@
+export default {
+	error: 'Duplicate slot name "foo" in <Nested>'
+};
diff --git a/test/runtime/samples/component-slot-duplicate-error/main.svelte b/test/runtime/samples/component-slot-duplicate-error/main.svelte
new file mode 100644
index 0000000000..9024bcd46f
--- /dev/null
+++ b/test/runtime/samples/component-slot-duplicate-error/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	<p slot="foo">{value}</p>
+	<p slot="foo">{value}</p>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-dynamic/Nested.svelte b/test/runtime/samples/component-slot-dynamic/Nested.svelte
new file mode 100644
index 0000000000..da60b832e3
--- /dev/null
+++ b/test/runtime/samples/component-slot-dynamic/Nested.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo = 'a';
+</script>
+
+<slot>
+	<span>{foo}</span>
+</slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-dynamic/_config.js b/test/runtime/samples/component-slot-dynamic/_config.js
new file mode 100644
index 0000000000..9a6ed1a057
--- /dev/null
+++ b/test/runtime/samples/component-slot-dynamic/_config.js
@@ -0,0 +1,9 @@
+export default {
+	html: `
+		<p>override default slot</p>
+	`,
+
+	test({ component }) {
+		component.nested.foo = 'b';
+	}
+};
diff --git a/test/runtime/samples/component-slot-dynamic/main.svelte b/test/runtime/samples/component-slot-dynamic/main.svelte
new file mode 100644
index 0000000000..8eb876444a
--- /dev/null
+++ b/test/runtime/samples/component-slot-dynamic/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let nested;
+</script>
+
+<Nested bind:this={nested}>
+	<p>override default slot</p>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-each-block/Nested.svelte b/test/runtime/samples/component-slot-each-block/Nested.svelte
new file mode 100644
index 0000000000..8213363fa0
--- /dev/null
+++ b/test/runtime/samples/component-slot-each-block/Nested.svelte
@@ -0,0 +1,3 @@
+<div>
+	<slot/>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-each-block/_config.js b/test/runtime/samples/component-slot-each-block/_config.js
new file mode 100644
index 0000000000..d66f613bb4
--- /dev/null
+++ b/test/runtime/samples/component-slot-each-block/_config.js
@@ -0,0 +1,24 @@
+export default {
+	props: {
+		things: [1, 2, 3]
+	},
+
+	html: `
+		<div>
+			<span>1</span>
+			<span>2</span>
+			<span>3</span>
+		</div>`,
+
+	test({ assert, component, target }) {
+		component.things = [1, 2, 3, 4];
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<span>1</span>
+				<span>2</span>
+				<span>3</span>
+				<span>4</span>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-each-block/main.svelte b/test/runtime/samples/component-slot-each-block/main.svelte
new file mode 100644
index 0000000000..986c5c40e1
--- /dev/null
+++ b/test/runtime/samples/component-slot-each-block/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let things;
+</script>
+
+<Nested>
+	{#each things as thing}
+		<span>{thing}</span>
+	{/each}
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-empty-b/Nested.svelte b/test/runtime/samples/component-slot-empty-b/Nested.svelte
new file mode 100644
index 0000000000..008d9e2fbb
--- /dev/null
+++ b/test/runtime/samples/component-slot-empty-b/Nested.svelte
@@ -0,0 +1,3 @@
+<div>
+	<slot name="slot1" />
+</div>
diff --git a/test/runtime/samples/component-slot-empty-b/_config.js b/test/runtime/samples/component-slot-empty-b/_config.js
new file mode 100644
index 0000000000..388e1a3e4a
--- /dev/null
+++ b/test/runtime/samples/component-slot-empty-b/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<div><input slot="slot1"></div>'
+};
diff --git a/test/runtime/samples/component-slot-empty-b/main.svelte b/test/runtime/samples/component-slot-empty-b/main.svelte
new file mode 100644
index 0000000000..f6e2deee9b
--- /dev/null
+++ b/test/runtime/samples/component-slot-empty-b/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Nested from "./Nested.svelte";
+</script>
+<Nested>
+	<input slot="slot1">
+</Nested>
diff --git a/test/runtime/samples/component-slot-empty/Nested.svelte b/test/runtime/samples/component-slot-empty/Nested.svelte
new file mode 100644
index 0000000000..ea4c0fb6d3
--- /dev/null
+++ b/test/runtime/samples/component-slot-empty/Nested.svelte
@@ -0,0 +1 @@
+<p>no slot here</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-empty/_config.js b/test/runtime/samples/component-slot-empty/_config.js
new file mode 100644
index 0000000000..21c3572730
--- /dev/null
+++ b/test/runtime/samples/component-slot-empty/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>no slot here</p>'
+};
diff --git a/test/runtime/samples/component-slot-empty/main.svelte b/test/runtime/samples/component-slot-empty/main.svelte
new file mode 100644
index 0000000000..619060e4cb
--- /dev/null
+++ b/test/runtime/samples/component-slot-empty/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-fallback-2/Inner.svelte b/test/runtime/samples/component-slot-fallback-2/Inner.svelte
new file mode 100644
index 0000000000..d1c247ad35
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-2/Inner.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { model } from "./store.svelte";
+	export let value = '';
+</script>
+
+<input bind:value={$model} />
+{value}
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-fallback-2/Outer.svelte b/test/runtime/samples/component-slot-fallback-2/Outer.svelte
new file mode 100644
index 0000000000..1e44ba4db7
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-2/Outer.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Inner from "./Inner.svelte";
+	export let defaultValue = '';
+	export let slotProps = '';
+</script>
+
+<slot {slotProps}><Inner value={defaultValue} /></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-fallback-2/_config.js b/test/runtime/samples/component-slot-fallback-2/_config.js
new file mode 100644
index 0000000000..7c86357a8e
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-2/_config.js
@@ -0,0 +1,39 @@
+export default {
+	html: '<input> <input> <input>',
+	ssrHtml: '<input value="Blub"> <input value="Blub"> <input value="Blub">',
+
+	async test({ assert, target, component, window }) {
+		const [input1, input2, inputFallback] = target.querySelectorAll('input');
+
+		assert.equal(component.getSubscriberCount(), 3);
+
+		input1.value = 'a';
+		await input1.dispatchEvent(new window.Event('input'));
+		input1.value = 'ab';
+		await input1.dispatchEvent(new window.Event('input'));
+		assert.equal(input1.value, 'ab');
+		assert.equal(input2.value, 'ab');
+		assert.equal(inputFallback.value, 'ab');
+
+		component.props = 'hello';
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<input> hello
+			<input> hello
+			<input>
+			`
+		);
+
+		component.fallback = 'world';
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<input> hello
+			<input> hello
+			<input> world
+		`
+		);
+	}
+};
diff --git a/test/runtime/samples/component-slot-fallback-2/main.svelte b/test/runtime/samples/component-slot-fallback-2/main.svelte
new file mode 100644
index 0000000000..4583667015
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-2/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	import Outer from "./Outer.svelte";
+	import Inner from "./Inner.svelte";
+	import {model} from "./store.svelte";
+
+	export let props = '';
+	export let fallback = '';
+
+	export function getSubscriberCount() {
+		return model.getCount();
+	}
+</script>
+
+<Outer slotProps={props} defaultValue={fallback} let:slotProps>    
+	<Inner value={slotProps} />
+</Outer>
+
+<Outer slotProps={props} defaultValue={fallback} let:slotProps>    
+	<Inner value={slotProps} />
+</Outer>
+
+<Outer slotProps={props} defaultValue={fallback}>
+</Outer>
diff --git a/test/runtime/samples/component-slot-fallback-2/store.svelte b/test/runtime/samples/component-slot-fallback-2/store.svelte
new file mode 100644
index 0000000000..e377aaf314
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-2/store.svelte
@@ -0,0 +1,23 @@
+<script context="module">
+  let value = 'Blub';
+  let count = 0;
+  const subscribers = new Set();
+  export const model = {
+    subscribe(fn) {
+      subscribers.add(fn);
+      count ++;
+      fn(value);
+      return () => {
+        count--;
+        subscribers.delete(fn);
+      };
+    },
+    set(v) {
+      value = v;
+      subscribers.forEach(fn => fn(v));
+    },
+    getCount() {
+      return count;
+    }
+  };
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-fallback-3/Inner.svelte b/test/runtime/samples/component-slot-fallback-3/Inner.svelte
new file mode 100644
index 0000000000..db2af272d2
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-3/Inner.svelte
@@ -0,0 +1,6 @@
+<slot>
+	<div>Hello</div>
+	<div>world</div>
+	<div>Bye</div>
+	<div>World</div>
+</slot>
diff --git a/test/runtime/samples/component-slot-fallback-3/_config.js b/test/runtime/samples/component-slot-fallback-3/_config.js
new file mode 100644
index 0000000000..25cc65eb2d
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-3/_config.js
@@ -0,0 +1,6 @@
+export default {
+	html: `
+	<div>Hello World</div>
+	<div>Hello</div><div>world</div><div>Bye</div><div>World</div>
+	`
+};
diff --git a/test/runtime/samples/component-slot-fallback-3/main.svelte b/test/runtime/samples/component-slot-fallback-3/main.svelte
new file mode 100644
index 0000000000..eda7ea60e4
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-3/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Inner from "./Inner.svelte";
+</script>
+
+<Inner>
+	<div>Hello World</div>
+</Inner>
+
+<Inner></Inner>
diff --git a/test/runtime/samples/component-slot-fallback-4/Inner.svelte b/test/runtime/samples/component-slot-fallback-4/Inner.svelte
new file mode 100644
index 0000000000..9eb3ef1401
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-4/Inner.svelte
@@ -0,0 +1,3 @@
+<slot name="a"><!-- placeholder--></slot>
+<slot name="b"><!-- placeholder--> </slot>
+<slot name="c"><!-- placeholder--> foobar </slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-fallback-4/_config.js b/test/runtime/samples/component-slot-fallback-4/_config.js
new file mode 100644
index 0000000000..4ebe353513
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-4/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: `
+	foobar
+	`
+};
diff --git a/test/runtime/samples/component-slot-fallback-4/main.svelte b/test/runtime/samples/component-slot-fallback-4/main.svelte
new file mode 100644
index 0000000000..206ce21def
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-4/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Inner from "./Inner.svelte";
+</script>
+
+<Inner></Inner>
diff --git a/test/runtime/samples/component-slot-fallback-5/IconA.svelte b/test/runtime/samples/component-slot-fallback-5/IconA.svelte
new file mode 100644
index 0000000000..8921b6c531
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-5/IconA.svelte
@@ -0,0 +1 @@
+Icon A
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-fallback-5/IconB.svelte b/test/runtime/samples/component-slot-fallback-5/IconB.svelte
new file mode 100644
index 0000000000..8a1a95ead3
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-5/IconB.svelte
@@ -0,0 +1 @@
+Icon B
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-fallback-5/Inner.svelte b/test/runtime/samples/component-slot-fallback-5/Inner.svelte
new file mode 100644
index 0000000000..bc4b224c23
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-5/Inner.svelte
@@ -0,0 +1,13 @@
+<script>
+	import IconA from './IconA.svelte';
+	import IconB from './IconB.svelte';
+
+	let variable = false;
+</script>
+
+<button on:click={() => variable = !variable}>Click Me</button>
+<div>
+	<slot>
+		<svelte:component this={variable ? IconA : IconB} />
+	</slot>
+</div>
diff --git a/test/runtime/samples/component-slot-fallback-5/_config.js b/test/runtime/samples/component-slot-fallback-5/_config.js
new file mode 100644
index 0000000000..07d09a3be9
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-5/_config.js
@@ -0,0 +1,31 @@
+export default {
+	html: `
+	<button>Click Me</button>
+	<div>Icon B</div>
+	`,
+
+	async test({ assert, target, window }) {
+		const btn = target.querySelector('button');
+		const clickEvent = new window.MouseEvent('click');
+
+		await btn.dispatchEvent(clickEvent);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>Click Me</button>
+			<div>Icon A</div>
+			`
+		);
+
+		await btn.dispatchEvent(clickEvent);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>Click Me</button>
+			<div>Icon B</div>
+			`
+		);
+	}
+};
diff --git a/test/runtime/samples/component-slot-fallback-5/main.svelte b/test/runtime/samples/component-slot-fallback-5/main.svelte
new file mode 100644
index 0000000000..206ce21def
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-5/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Inner from "./Inner.svelte";
+</script>
+
+<Inner></Inner>
diff --git a/test/runtime/samples/component-slot-fallback-6/Foo.svelte b/test/runtime/samples/component-slot-fallback-6/Foo.svelte
new file mode 100644
index 0000000000..0385342cef
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-6/Foo.svelte
@@ -0,0 +1 @@
+<slot />
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-fallback-6/Inner.svelte b/test/runtime/samples/component-slot-fallback-6/Inner.svelte
new file mode 100644
index 0000000000..28f0fdd869
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-6/Inner.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Foo from './Foo.svelte';
+</script>
+
+<Foo>
+	<slot>
+		{JSON.stringify($$props)}
+	</slot>
+</Foo>
diff --git a/test/runtime/samples/component-slot-fallback-6/_config.js b/test/runtime/samples/component-slot-fallback-6/_config.js
new file mode 100644
index 0000000000..be47d31d03
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-6/_config.js
@@ -0,0 +1,22 @@
+// $$props reactivity in slot fallback
+export default {
+	html: `
+		<input>
+		{"value":""}
+	`,
+	ssrHtml: `
+		<input value="">
+		{"value":""}
+	`,
+
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+		input.value = 'abc';
+		await input.dispatchEvent(new window.Event('input'));
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			{"value":"abc"}
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-fallback-6/main.svelte b/test/runtime/samples/component-slot-fallback-6/main.svelte
new file mode 100644
index 0000000000..35abebef10
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-6/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Inner from "./Inner.svelte";
+	let value = '';
+</script>
+
+<input bind:value />
+
+<Inner {value} />
diff --git a/test/runtime/samples/component-slot-fallback-empty/Nested.svelte b/test/runtime/samples/component-slot-fallback-empty/Nested.svelte
new file mode 100644
index 0000000000..9e6683feb7
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-empty/Nested.svelte
@@ -0,0 +1,4 @@
+<div>
+	<slot><p class='default'>default fallback content</p></slot>
+	<slot name='bar'>bar fallback</slot>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-fallback-empty/_config.js b/test/runtime/samples/component-slot-fallback-empty/_config.js
new file mode 100644
index 0000000000..2e153d24db
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-empty/_config.js
@@ -0,0 +1,13 @@
+export default {
+	html: `
+	<div>
+		<p class="default">default fallback content</p>
+		<input slot="bar">
+	</div>
+	
+	<div>
+		<p class="default">default fallback content</p>
+		bar fallback
+	</div>
+	`
+};
diff --git a/test/runtime/samples/component-slot-fallback-empty/main.svelte b/test/runtime/samples/component-slot-fallback-empty/main.svelte
new file mode 100644
index 0000000000..7ae5f4c5d7
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback-empty/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Nested from "./Nested.svelte";
+</script>
+
+<Nested>
+	<input slot="bar">
+</Nested>
+
+<Nested>
+</Nested>
diff --git a/test/runtime/samples/component-slot-fallback/Nested.svelte b/test/runtime/samples/component-slot-fallback/Nested.svelte
new file mode 100644
index 0000000000..dcaf46e042
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback/Nested.svelte
@@ -0,0 +1,5 @@
+<div>
+	<slot><p class='default'>default fallback content</p></slot>
+	<slot name='bar'><p class='default'>bar fallback content</p></slot>
+	<slot name='foo'><p class='default'>foo fallback content</p></slot>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-fallback/_config.js b/test/runtime/samples/component-slot-fallback/_config.js
new file mode 100644
index 0000000000..64f770b5a4
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback/_config.js
@@ -0,0 +1,9 @@
+export default {
+	html: `
+		<div>
+			<p>not fallback</p>
+			<p class='default'>bar fallback content</p>
+			<p class='default'>foo fallback content</p>
+		</div>
+	`
+};
diff --git a/test/runtime/samples/component-slot-fallback/main.svelte b/test/runtime/samples/component-slot-fallback/main.svelte
new file mode 100644
index 0000000000..0bdb6f8b1d
--- /dev/null
+++ b/test/runtime/samples/component-slot-fallback/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	<p>not fallback</p>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-if-block-before-node/Nested.svelte b/test/runtime/samples/component-slot-if-block-before-node/Nested.svelte
new file mode 100644
index 0000000000..8213363fa0
--- /dev/null
+++ b/test/runtime/samples/component-slot-if-block-before-node/Nested.svelte
@@ -0,0 +1,3 @@
+<div>
+	<slot/>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-if-block-before-node/_config.js b/test/runtime/samples/component-slot-if-block-before-node/_config.js
new file mode 100644
index 0000000000..dd0fa69981
--- /dev/null
+++ b/test/runtime/samples/component-slot-if-block-before-node/_config.js
@@ -0,0 +1,16 @@
+export default {
+	html: `
+		<div>
+			<p>unconditional</p>
+		</div>`,
+
+	test({ assert, component, target }) {
+		component.foo = true;
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<p>conditional</p>
+				<p>unconditional</p>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-if-block-before-node/main.svelte b/test/runtime/samples/component-slot-if-block-before-node/main.svelte
new file mode 100644
index 0000000000..6e51f27649
--- /dev/null
+++ b/test/runtime/samples/component-slot-if-block-before-node/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let foo;
+</script>
+
+<Nested>
+	{#if foo}
+		<p>conditional</p>
+	{/if}
+
+	<p>unconditional</p>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-if-block/Nested.svelte b/test/runtime/samples/component-slot-if-block/Nested.svelte
new file mode 100644
index 0000000000..8213363fa0
--- /dev/null
+++ b/test/runtime/samples/component-slot-if-block/Nested.svelte
@@ -0,0 +1,3 @@
+<div>
+	<slot/>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-if-block/_config.js b/test/runtime/samples/component-slot-if-block/_config.js
new file mode 100644
index 0000000000..08bfef8999
--- /dev/null
+++ b/test/runtime/samples/component-slot-if-block/_config.js
@@ -0,0 +1,16 @@
+export default {
+	html: `
+		<div>
+			<p>unconditional</p>
+		</div>`,
+
+	test({ assert, component, target }) {
+		component.foo = true;
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<p>unconditional</p>
+				<p>conditional</p>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-if-block/main.svelte b/test/runtime/samples/component-slot-if-block/main.svelte
new file mode 100644
index 0000000000..465da320a9
--- /dev/null
+++ b/test/runtime/samples/component-slot-if-block/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let foo;
+</script>
+
+<Nested>
+	<p>unconditional</p>
+
+	{#if foo}
+		<p>conditional</p>
+	{/if}
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-if-else-block-before-node/Nested.svelte b/test/runtime/samples/component-slot-if-else-block-before-node/Nested.svelte
new file mode 100644
index 0000000000..8b6c0a40e9
--- /dev/null
+++ b/test/runtime/samples/component-slot-if-else-block-before-node/Nested.svelte
@@ -0,0 +1 @@
+<slot/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-if-else-block-before-node/_config.js b/test/runtime/samples/component-slot-if-else-block-before-node/_config.js
new file mode 100644
index 0000000000..8aaaa93193
--- /dev/null
+++ b/test/runtime/samples/component-slot-if-else-block-before-node/_config.js
@@ -0,0 +1,13 @@
+export default {
+	html: `
+		<p>disabled</p>
+		<p>unconditional</p>`,
+
+	test({ assert, component, target }) {
+		component.enabled = true;
+		assert.htmlEqual(target.innerHTML, `
+			<p>enabled</p>
+			<p>unconditional</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-if-else-block-before-node/main.svelte b/test/runtime/samples/component-slot-if-else-block-before-node/main.svelte
new file mode 100644
index 0000000000..0b24f77b16
--- /dev/null
+++ b/test/runtime/samples/component-slot-if-else-block-before-node/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let enabled;
+</script>
+
+<Nested>
+	{#if !enabled}
+		<p>disabled</p>
+	{:else}
+		<p>enabled</p>
+	{/if}
+
+	<p>unconditional</p>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-aliased/Nested.svelte b/test/runtime/samples/component-slot-let-aliased/Nested.svelte
new file mode 100644
index 0000000000..3758adbd7c
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-aliased/Nested.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let things;
+</script>
+
+<div>
+	{#each things as thing}
+		<slot {thing}/>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-aliased/_config.js b/test/runtime/samples/component-slot-let-aliased/_config.js
new file mode 100644
index 0000000000..d66f613bb4
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-aliased/_config.js
@@ -0,0 +1,24 @@
+export default {
+	props: {
+		things: [1, 2, 3]
+	},
+
+	html: `
+		<div>
+			<span>1</span>
+			<span>2</span>
+			<span>3</span>
+		</div>`,
+
+	test({ assert, component, target }) {
+		component.things = [1, 2, 3, 4];
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<span>1</span>
+				<span>2</span>
+				<span>3</span>
+				<span>4</span>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-let-aliased/main.svelte b/test/runtime/samples/component-slot-let-aliased/main.svelte
new file mode 100644
index 0000000000..468a58face
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-aliased/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let things;
+</script>
+
+<Nested {things} let:thing={x}>
+	<span>{x}</span>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-b/Nested.svelte b/test/runtime/samples/component-slot-let-b/Nested.svelte
new file mode 100644
index 0000000000..42963f6d1d
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-b/Nested.svelte
@@ -0,0 +1,6 @@
+<script>
+	let count = 0;
+</script>
+
+<button on:click="{() => count += 1}">+1</button>
+<slot count={count}/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-b/_config.js b/test/runtime/samples/component-slot-let-b/_config.js
new file mode 100644
index 0000000000..f13a3b2bb6
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-b/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<button>+1</button>
+		<span>0</span>
+	`,
+
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>+1</button>
+			<span>1</span>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-let-b/main.svelte b/test/runtime/samples/component-slot-let-b/main.svelte
new file mode 100644
index 0000000000..4acec62b21
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-b/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested let:count>
+	<span>{count}</span>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-c/Nested.svelte b/test/runtime/samples/component-slot-let-c/Nested.svelte
new file mode 100644
index 0000000000..d38a1403fb
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-c/Nested.svelte
@@ -0,0 +1,6 @@
+<script>
+	let count = 0;
+</script>
+
+<button on:click="{() => count += 1}">+1</button>
+<slot c={count}/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-c/_config.js b/test/runtime/samples/component-slot-let-c/_config.js
new file mode 100644
index 0000000000..fe8e68b1ac
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-c/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<button>+1</button>
+		<span>0 (undefined)</span>
+	`,
+
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>+1</button>
+			<span>1 (undefined)</span>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-let-c/main.svelte b/test/runtime/samples/component-slot-let-c/main.svelte
new file mode 100644
index 0000000000..b594964303
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-c/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested let:c let:count>
+	<span>{c} ({count})</span>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-d/Nested.svelte b/test/runtime/samples/component-slot-let-d/Nested.svelte
new file mode 100644
index 0000000000..8320e6b55d
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-d/Nested.svelte
@@ -0,0 +1,7 @@
+<script>
+	let foo = 'a';
+</script>
+
+<div on:click="{() => foo = 'b'}">
+	<slot {foo}></slot>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-d/_config.js b/test/runtime/samples/component-slot-let-d/_config.js
new file mode 100644
index 0000000000..e293ae136c
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-d/_config.js
@@ -0,0 +1,20 @@
+export default {
+	html: `
+		<div>
+			<p>a</p>
+		</div>
+	`,
+
+	async test({ assert, target, window }) {
+		const div = target.querySelector('div');
+		const click = new window.MouseEvent('click');
+
+		await div.dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<p>b</p>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-let-d/main.svelte b/test/runtime/samples/component-slot-let-d/main.svelte
new file mode 100644
index 0000000000..09801cc700
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-d/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested let:foo={bar}>
+	<p>{bar}</p>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-destructured-2/Nested.svelte b/test/runtime/samples/component-slot-let-destructured-2/Nested.svelte
new file mode 100644
index 0000000000..5dfe32bc7f
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-destructured-2/Nested.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let props;
+</script>
+
+<slot value={props} data={Array.isArray(props) ? props[0] : props.a} />
diff --git a/test/runtime/samples/component-slot-let-destructured-2/_config.js b/test/runtime/samples/component-slot-let-destructured-2/_config.js
new file mode 100644
index 0000000000..e407dcf2f8
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-destructured-2/_config.js
@@ -0,0 +1,68 @@
+export default {
+	html: `
+		<div>
+			hello world 0 hello
+			<button>Increment</button>
+		</div>
+		<div>
+			hello world 0 hello
+			<button>Increment</button>
+		</div>
+		<div>
+			hello world 0 hello
+			<button>Increment</button>
+		</div>
+	`,
+	async test({ assert, target, window }) {
+		const [button1, button2, button3] = target.querySelectorAll('button');
+		const event = new window.MouseEvent('click');
+
+		await button1.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				hello world 1 hello
+				<button>Increment</button>
+			</div>
+			<div>
+				hello world 0 hello
+				<button>Increment</button>
+			</div>
+			<div>
+				hello world 0 hello
+				<button>Increment</button>
+			</div>
+		`);
+
+		await button2.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				hello world 1 hello
+				<button>Increment</button>
+			</div>
+			<div>
+				hello world 1 hello
+				<button>Increment</button>
+			</div>
+			<div>
+				hello world 0 hello
+				<button>Increment</button>
+			</div>
+		`);
+
+		await button3.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				hello world 1 hello
+				<button>Increment</button>
+			</div>
+			<div>
+				hello world 1 hello
+				<button>Increment</button>
+			</div>
+			<div>
+				hello world 1 hello
+				<button>Increment</button>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-let-destructured-2/main.svelte b/test/runtime/samples/component-slot-let-destructured-2/main.svelte
new file mode 100644
index 0000000000..215a1390d9
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-destructured-2/main.svelte
@@ -0,0 +1,28 @@
+<script>
+	import Nested from "./Nested.svelte";
+	let c = 0, d = 0, e = 0;
+</script>
+
+<div>
+	<Nested props={['hello', 'world']} let:value={pair} let:data={foo}>
+		{pair[0]} {pair[1]} {c} {foo}
+	</Nested>
+
+	<button on:click={() => { c += 1; }}>Increment</button>
+</div>
+
+<div>
+	<Nested props={['hello', 'world']} let:value={[a, b]} let:data={foo}>
+		{a} {b} {d} {foo}
+	</Nested>
+
+	<button on:click={() => { d += 1; }}>Increment</button>
+</div>
+
+<div>
+	<Nested props={{ a: 'hello', b: 'world' }} let:value={{ a, b }} let:data={foo}>
+		{a} {b} {e} {foo}
+	</Nested>
+
+	<button on:click={() => { e += 1; }}>Increment</button>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-destructured/Nested.svelte b/test/runtime/samples/component-slot-let-destructured/Nested.svelte
new file mode 100644
index 0000000000..3758adbd7c
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-destructured/Nested.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let things;
+</script>
+
+<div>
+	{#each things as thing}
+		<slot {thing}/>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-destructured/_config.js b/test/runtime/samples/component-slot-let-destructured/_config.js
new file mode 100644
index 0000000000..d7aaae2d77
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-destructured/_config.js
@@ -0,0 +1,34 @@
+export default {
+	props: {
+		things: [
+			{ num: 1 },
+			{ num: 2 },
+			{ num: 3 }
+		]
+	},
+
+	html: `
+		<div>
+			<span>1</span>
+			<span>2</span>
+			<span>3</span>
+		</div>`,
+
+	test({ assert, component, target }) {
+		component.things = [
+			{ num: 1 },
+			{ num: 2 },
+			{ num: 3 },
+			{ num: 4 }
+		];
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<span>1</span>
+				<span>2</span>
+				<span>3</span>
+				<span>4</span>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-let-destructured/main.svelte b/test/runtime/samples/component-slot-let-destructured/main.svelte
new file mode 100644
index 0000000000..1ee93bf105
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-destructured/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let things;
+</script>
+
+<Nested {things} let:thing="{{ num }}">
+	<span>{num}</span>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-e/Nested.svelte b/test/runtime/samples/component-slot-let-e/Nested.svelte
new file mode 100644
index 0000000000..6e7b1b1a54
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-e/Nested.svelte
@@ -0,0 +1,7 @@
+<script>
+	let fooText = 'foo';
+</script>
+
+<div>
+	<slot someText={fooText}></slot>
+</div>
diff --git a/test/runtime/samples/component-slot-let-e/_config.js b/test/runtime/samples/component-slot-let-e/_config.js
new file mode 100644
index 0000000000..1f7633da0c
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-e/_config.js
@@ -0,0 +1,20 @@
+export default {
+	html: `
+		<div>
+			<p>foo</p>
+		</div>
+	`,
+
+	async test({ assert, target, window }) {
+		const div = target.querySelector('div');
+		const click = new window.MouseEvent('click');
+
+		await div.dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<p>foo</p>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-let-e/main.svelte b/test/runtime/samples/component-slot-let-e/main.svelte
new file mode 100644
index 0000000000..4662deef57
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-e/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested let:someText={someText}>
+	<p>{someText}</p>
+</Nested>
diff --git a/test/runtime/samples/component-slot-let-f/A.svelte b/test/runtime/samples/component-slot-let-f/A.svelte
new file mode 100644
index 0000000000..79428b13ec
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-f/A.svelte
@@ -0,0 +1,9 @@
+<script>
+	import B from './B.svelte';
+	export let x;
+</script>
+
+<B {x} let:reflected>
+	<span>{reflected}</span>
+	<slot {reflected} />
+</B>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-f/B.svelte b/test/runtime/samples/component-slot-let-f/B.svelte
new file mode 100644
index 0000000000..7a8dc596ba
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-f/B.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x;
+</script>
+
+<slot reflected={x}/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-f/_config.js b/test/runtime/samples/component-slot-let-f/_config.js
new file mode 100644
index 0000000000..74de38be02
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-f/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: `
+		<span>1</span>
+		<span>1</span>
+	`,
+
+	async test({ assert, target, component }) {
+		component.x = 2;
+
+		assert.htmlEqual(target.innerHTML, `
+			<span>2</span>
+			<span>2</span>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-let-f/main.svelte b/test/runtime/samples/component-slot-let-f/main.svelte
new file mode 100644
index 0000000000..71362d9b4e
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-f/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import A from './A.svelte';
+	export let x = 1;
+</script>
+
+<A {x} let:reflected>
+	<span>{reflected}</span>
+</A>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-g/A.svelte b/test/runtime/samples/component-slot-let-g/A.svelte
new file mode 100644
index 0000000000..4f4ac95014
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-g/A.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x;
+</script>
+
+<slot name="foo" reflected={x}/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-g/_config.js b/test/runtime/samples/component-slot-let-g/_config.js
new file mode 100644
index 0000000000..aaa9895ea8
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-g/_config.js
@@ -0,0 +1,22 @@
+export default {
+	html: `
+		<span slot="foo" class="1">1</span>
+		0
+	`,
+	async test({ assert, target, component, window }) {
+		component.x = 2;
+
+		assert.htmlEqual(target.innerHTML, `
+			<span slot="foo" class="2">2</span>
+			0
+		`);
+
+		const span = target.querySelector('span');
+		await span.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.htmlEqual(target.innerHTML, `
+			<span slot="foo" class="2">2</span>
+			2
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-let-g/main.svelte b/test/runtime/samples/component-slot-let-g/main.svelte
new file mode 100644
index 0000000000..e7d4890e6b
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-g/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import A from './A.svelte';
+	export let x = 1;
+	let y = 0;
+</script>
+
+<A {x}>
+	<span 
+		on:click={() => y = reflected}
+		slot="foo"
+		let:reflected
+		class={reflected}
+	>
+		{reflected}
+	</span>
+</A>
+{ y }
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-in-binding/Nested.svelte b/test/runtime/samples/component-slot-let-in-binding/Nested.svelte
new file mode 100644
index 0000000000..96f7adcfc6
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-binding/Nested.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let items;
+</script>
+
+<div>
+	{#each items as item, index}
+		<slot {index}/>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-in-binding/_config.js b/test/runtime/samples/component-slot-let-in-binding/_config.js
new file mode 100644
index 0000000000..41e77a9574
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-binding/_config.js
@@ -0,0 +1,26 @@
+export default {
+	html: `
+		<div>
+			<label>1: <input></label>
+			<label>2: <input></label>
+			<label>3: <input></label>
+		</div>
+	`,
+
+	ssrHtml: `
+		<div>
+			<label>1: <input value="a"></label>
+			<label>2: <input value="b"></label>
+			<label>3: <input value="c"></label>
+		</div>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const inputs = target.querySelectorAll('input');
+
+		inputs[2].value = 'd';
+		await inputs[2].dispatchEvent(new window.Event('input'));
+
+		assert.deepEqual(component.letters, ['a', 'b', 'd']);
+	}
+};
diff --git a/test/runtime/samples/component-slot-let-in-binding/main.svelte b/test/runtime/samples/component-slot-let-in-binding/main.svelte
new file mode 100644
index 0000000000..89531bf236
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-binding/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let letters = ['a', 'b', 'c'];
+</script>
+
+<Nested items={letters} let:index>
+	<label>
+		{index + 1}: <input bind:value={letters[index]}>
+	</label>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-in-slot-2/Inner.svelte b/test/runtime/samples/component-slot-let-in-slot-2/Inner.svelte
new file mode 100644
index 0000000000..d0ea817d54
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-slot-2/Inner.svelte
@@ -0,0 +1 @@
+<slot/>
diff --git a/test/runtime/samples/component-slot-let-in-slot-2/Outer.svelte b/test/runtime/samples/component-slot-let-in-slot-2/Outer.svelte
new file mode 100644
index 0000000000..590a70564a
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-slot-2/Outer.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let prop
+</script>
+
+<slot value={prop} />
diff --git a/test/runtime/samples/component-slot-let-in-slot-2/_config.js b/test/runtime/samples/component-slot-let-in-slot-2/_config.js
new file mode 100644
index 0000000000..96c43497db
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-slot-2/_config.js
@@ -0,0 +1,25 @@
+let logs;
+function log(value) {
+	logs.push(value);
+}
+
+export default {
+	props: {
+		prop: 'a',
+		log
+	},
+	html: '<button></button>',
+	before_test() {
+		logs = [];
+	},
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		await button.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.deepEqual(logs, ['a']);
+
+		component.prop = 'b';
+		await button.dispatchEvent(new window.MouseEvent('click'));
+		assert.deepEqual(logs, ['a', 'b']);
+	}
+};
diff --git a/test/runtime/samples/component-slot-let-in-slot-2/main.svelte b/test/runtime/samples/component-slot-let-in-slot-2/main.svelte
new file mode 100644
index 0000000000..214b0895ae
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-slot-2/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Outer from './Outer.svelte'
+	import Inner from './Inner.svelte'
+
+	export let prop
+	export let log;
+</script>
+
+<Outer {prop} let:value>
+	<Inner><button on:click={() => { log(value); }} /></Inner>
+</Outer>
diff --git a/test/runtime/samples/component-slot-let-in-slot/Inner.svelte b/test/runtime/samples/component-slot-let-in-slot/Inner.svelte
new file mode 100644
index 0000000000..d0ea817d54
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-slot/Inner.svelte
@@ -0,0 +1 @@
+<slot/>
diff --git a/test/runtime/samples/component-slot-let-in-slot/Outer.svelte b/test/runtime/samples/component-slot-let-in-slot/Outer.svelte
new file mode 100644
index 0000000000..590a70564a
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-slot/Outer.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let prop
+</script>
+
+<slot value={prop} />
diff --git a/test/runtime/samples/component-slot-let-in-slot/_config.js b/test/runtime/samples/component-slot-let-in-slot/_config.js
new file mode 100644
index 0000000000..eb16c27fda
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-slot/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		prop: 'a'
+	},
+
+	html: 'a',
+
+	test({ assert, component, target }) {
+		component.prop = 'b';
+		assert.htmlEqual( target.innerHTML, 'b' );
+	}
+};
diff --git a/test/runtime/samples/component-slot-let-in-slot/main.svelte b/test/runtime/samples/component-slot-let-in-slot/main.svelte
new file mode 100644
index 0000000000..7ebb4ebc21
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-slot/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Outer from './Outer.svelte'
+	import Inner from './Inner.svelte'
+
+	export let prop
+</script>
+
+<Outer {prop} let:value>
+	<Inner>{value}</Inner>
+</Outer>
diff --git a/test/runtime/samples/component-slot-let-missing-prop/Bar.svelte b/test/runtime/samples/component-slot-let-missing-prop/Bar.svelte
new file mode 100644
index 0000000000..d3707c7d8b
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-missing-prop/Bar.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let thing;
+</script>
+
+<p>{thing}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-missing-prop/Foo.svelte b/test/runtime/samples/component-slot-let-missing-prop/Foo.svelte
new file mode 100644
index 0000000000..49aeb95a1d
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-missing-prop/Foo.svelte
@@ -0,0 +1 @@
+<slot></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-missing-prop/_config.js b/test/runtime/samples/component-slot-let-missing-prop/_config.js
new file mode 100644
index 0000000000..b3bf13b01b
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-missing-prop/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<p>undefined</p>
+	`
+};
diff --git a/test/runtime/samples/component-slot-let-missing-prop/main.svelte b/test/runtime/samples/component-slot-let-missing-prop/main.svelte
new file mode 100644
index 0000000000..3ac3ba5363
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-missing-prop/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Foo from './Foo.svelte';
+	import Bar from './Bar.svelte';
+
+	const things = { '1': 'one' };
+</script>
+
+<Foo let:id>
+	<Bar thing={things[id]}/>
+</Foo>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-named/Nested.svelte b/test/runtime/samples/component-slot-let-named/Nested.svelte
new file mode 100644
index 0000000000..a3b09ff5b2
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-named/Nested.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let things;
+</script>
+
+<div>
+	{#each things as thing}
+		<slot name="foo" {thing}/>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-named/_config.js b/test/runtime/samples/component-slot-let-named/_config.js
new file mode 100644
index 0000000000..f65448af93
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-named/_config.js
@@ -0,0 +1,24 @@
+export default {
+	props: {
+		things: [1, 2, 3]
+	},
+
+	html: `
+		<div>
+			<div slot="foo"><span>1</span></div>
+			<div slot="foo"><span>2</span></div>
+			<div slot="foo"><span>3</span></div>
+		</div>`,
+
+	test({ assert, component, target }) {
+		component.things = [1, 2, 3, 4];
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<div slot="foo"><span>1</span></div>
+				<div slot="foo"><span>2</span></div>
+				<div slot="foo"><span>3</span></div>
+				<div slot="foo"><span>4</span></div>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-let-named/main.svelte b/test/runtime/samples/component-slot-let-named/main.svelte
new file mode 100644
index 0000000000..f9e9e3a10f
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-named/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let things;
+</script>
+
+<Nested {things}>
+	<div slot="foo" let:thing>
+		<span>{thing}</span>
+	</div>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-static/Nested.svelte b/test/runtime/samples/component-slot-let-static/Nested.svelte
new file mode 100644
index 0000000000..32eee1534a
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-static/Nested.svelte
@@ -0,0 +1 @@
+<slot value="Hi" />
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-static/_config.js b/test/runtime/samples/component-slot-let-static/_config.js
new file mode 100644
index 0000000000..ede7a679c5
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-static/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>Hi</p>'
+};
diff --git a/test/runtime/samples/component-slot-let-static/main.svelte b/test/runtime/samples/component-slot-let-static/main.svelte
new file mode 100644
index 0000000000..3eeaba976e
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-static/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested let:value>
+	<p>{value}</p>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let/Nested.svelte b/test/runtime/samples/component-slot-let/Nested.svelte
new file mode 100644
index 0000000000..3758adbd7c
--- /dev/null
+++ b/test/runtime/samples/component-slot-let/Nested.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let things;
+</script>
+
+<div>
+	{#each things as thing}
+		<slot {thing}/>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let/_config.js b/test/runtime/samples/component-slot-let/_config.js
new file mode 100644
index 0000000000..d66f613bb4
--- /dev/null
+++ b/test/runtime/samples/component-slot-let/_config.js
@@ -0,0 +1,24 @@
+export default {
+	props: {
+		things: [1, 2, 3]
+	},
+
+	html: `
+		<div>
+			<span>1</span>
+			<span>2</span>
+			<span>3</span>
+		</div>`,
+
+	test({ assert, component, target }) {
+		component.things = [1, 2, 3, 4];
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<span>1</span>
+				<span>2</span>
+				<span>3</span>
+				<span>4</span>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-let/main.svelte b/test/runtime/samples/component-slot-let/main.svelte
new file mode 100644
index 0000000000..d00bb8e41e
--- /dev/null
+++ b/test/runtime/samples/component-slot-let/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let things;
+</script>
+
+<Nested {things} let:thing>
+	<span>{thing}</span>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-name-with-hyphen/Nested.svelte b/test/runtime/samples/component-slot-name-with-hyphen/Nested.svelte
new file mode 100644
index 0000000000..7faee7a9a1
--- /dev/null
+++ b/test/runtime/samples/component-slot-name-with-hyphen/Nested.svelte
@@ -0,0 +1,3 @@
+<div>
+	<slot name="foo-bar"/>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-name-with-hyphen/_config.js b/test/runtime/samples/component-slot-name-with-hyphen/_config.js
new file mode 100644
index 0000000000..e824c6c7bc
--- /dev/null
+++ b/test/runtime/samples/component-slot-name-with-hyphen/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<div><p slot="foo-bar">Hello</p></div>'
+};
diff --git a/test/runtime/samples/component-slot-name-with-hyphen/main.svelte b/test/runtime/samples/component-slot-name-with-hyphen/main.svelte
new file mode 100644
index 0000000000..13a65b2196
--- /dev/null
+++ b/test/runtime/samples/component-slot-name-with-hyphen/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	<p slot="foo-bar">Hello</p>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-named-b/Nested.svelte b/test/runtime/samples/component-slot-named-b/Nested.svelte
new file mode 100644
index 0000000000..a94392ce5d
--- /dev/null
+++ b/test/runtime/samples/component-slot-named-b/Nested.svelte
@@ -0,0 +1 @@
+<slot name="name"></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-named-b/_config.js b/test/runtime/samples/component-slot-named-b/_config.js
new file mode 100644
index 0000000000..f2e2ba2d87
--- /dev/null
+++ b/test/runtime/samples/component-slot-named-b/_config.js
@@ -0,0 +1,7 @@
+export default {
+	preserveIdentifiers: true,
+
+	html: `
+		<span slot="name">Hello world</span>
+	`
+};
diff --git a/test/runtime/samples/component-slot-named-b/main.svelte b/test/runtime/samples/component-slot-named-b/main.svelte
new file mode 100644
index 0000000000..dd566c6888
--- /dev/null
+++ b/test/runtime/samples/component-slot-named-b/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	let name = 'world';
+</script>
+
+<Nested>
+	<span slot="name">Hello {name}</span>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-named-c/Nested.svelte b/test/runtime/samples/component-slot-named-c/Nested.svelte
new file mode 100644
index 0000000000..a94392ce5d
--- /dev/null
+++ b/test/runtime/samples/component-slot-named-c/Nested.svelte
@@ -0,0 +1 @@
+<slot name="name"></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-named-c/_config.js b/test/runtime/samples/component-slot-named-c/_config.js
new file mode 100644
index 0000000000..adfd944e26
--- /dev/null
+++ b/test/runtime/samples/component-slot-named-c/_config.js
@@ -0,0 +1,6 @@
+export default {
+	html: `
+		<span slot="name">Hello</span>
+		<span slot="name">world</span>
+	`
+};
diff --git a/test/runtime/samples/component-slot-named-c/main.svelte b/test/runtime/samples/component-slot-named-c/main.svelte
new file mode 100644
index 0000000000..86ae062850
--- /dev/null
+++ b/test/runtime/samples/component-slot-named-c/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	<span slot="name">Hello</span>
+</Nested>
+
+<Nested>
+	<span slot="name">world</span>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-named-inherits-default-lets/Nested.svelte b/test/runtime/samples/component-slot-named-inherits-default-lets/Nested.svelte
new file mode 100644
index 0000000000..472af6278e
--- /dev/null
+++ b/test/runtime/samples/component-slot-named-inherits-default-lets/Nested.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { onDestroy } from 'svelte';
+
+	let count = 0;
+
+	function increment() {
+		count += 1;
+	}
+</script>
+
+<div>
+	<slot {count}></slot>
+	<slot name="foo" {count}></slot>
+	<slot name="bar"></slot>
+
+	<button on:click={increment}>+1</button>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-named-inherits-default-lets/_config.js b/test/runtime/samples/component-slot-named-inherits-default-lets/_config.js
new file mode 100644
index 0000000000..8297162b91
--- /dev/null
+++ b/test/runtime/samples/component-slot-named-inherits-default-lets/_config.js
@@ -0,0 +1,25 @@
+export default {
+	html: `
+		<div>
+			<p>count in default slot: 0</p>
+			<p slot="foo">count in foo slot: 0</p>
+			<p slot="bar">count in bar slot: 0</p>
+			<button>+1</button>
+		</div>
+	`,
+
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+
+		await button.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<p>count in default slot: 1</p>
+				<p slot="foo">count in foo slot: 1</p>
+				<p slot="bar">count in bar slot: 1</p>
+				<button>+1</button>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-named-inherits-default-lets/main.svelte b/test/runtime/samples/component-slot-named-inherits-default-lets/main.svelte
new file mode 100644
index 0000000000..51dd28b855
--- /dev/null
+++ b/test/runtime/samples/component-slot-named-inherits-default-lets/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested let:count>
+	<p>
+		count in default slot: {count}
+	</p>
+
+	<p slot="foo" let:count>
+		count in foo slot: {count}
+	</p>
+
+	<p slot="bar">
+		count in bar slot: {count}
+	</p>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-named/Nested.svelte b/test/runtime/samples/component-slot-named/Nested.svelte
new file mode 100644
index 0000000000..665555820a
--- /dev/null
+++ b/test/runtime/samples/component-slot-named/Nested.svelte
@@ -0,0 +1,5 @@
+<div>
+	<slot/>
+	<slot name='bar'/>
+	<slot name='foo'/>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-named/_config.js b/test/runtime/samples/component-slot-named/_config.js
new file mode 100644
index 0000000000..330e219242
--- /dev/null
+++ b/test/runtime/samples/component-slot-named/_config.js
@@ -0,0 +1,9 @@
+export default {
+	html: `
+		<div>
+			Hello
+			<p slot='bar'>bar</p>
+			<p slot='foo'>foo</p>
+		</div>
+	`
+};
diff --git a/test/runtime/samples/component-slot-named/main.svelte b/test/runtime/samples/component-slot-named/main.svelte
new file mode 100644
index 0000000000..e25587c1e5
--- /dev/null
+++ b/test/runtime/samples/component-slot-named/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	Hello
+
+	<p slot='foo'>foo</p>
+	<p slot='bar'>bar</p>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-names-sanitized/Nested.svelte b/test/runtime/samples/component-slot-names-sanitized/Nested.svelte
new file mode 100644
index 0000000000..ca8328920d
--- /dev/null
+++ b/test/runtime/samples/component-slot-names-sanitized/Nested.svelte
@@ -0,0 +1,8 @@
+<div>
+	<slot name="header1" />
+	<slot name="-header2_" />
+	<slot name="3header" />
+	<slot name="_header4" />
+	<slot name="header-5" />
+	<slot name="header&5" />
+</div>
diff --git a/test/runtime/samples/component-slot-names-sanitized/_config.js b/test/runtime/samples/component-slot-names-sanitized/_config.js
new file mode 100644
index 0000000000..d75beb1b05
--- /dev/null
+++ b/test/runtime/samples/component-slot-names-sanitized/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<div>
+			<h1 slot="header1">Header 1</h1>
+			<h2 slot="-header2_">Header 2</h2>
+			<h3 slot="3header">Header 3</h3>
+			<h4 slot="_header4">Header 4</h4>
+			<h5 slot="header-5">Header 5</h5>
+			<h5 slot="header&5">Header 5b</h5>
+		</div>
+	`
+};
diff --git a/test/runtime/samples/component-slot-names-sanitized/main.svelte b/test/runtime/samples/component-slot-names-sanitized/main.svelte
new file mode 100644
index 0000000000..3e607de5fa
--- /dev/null
+++ b/test/runtime/samples/component-slot-names-sanitized/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	<h1 slot="header1">Header 1</h1>
+	<h2 slot="-header2_">Header 2</h2>
+	<h3 slot="3header">Header 3</h3>
+	<h4 slot="_header4">Header 4</h4>
+	<h5 slot="header-5">Header 5</h5>
+	<h5 slot="header&5">Header 5b</h5>
+</Nested>
diff --git a/test/runtime/samples/component-slot-nested-component/Inner.svelte b/test/runtime/samples/component-slot-nested-component/Inner.svelte
new file mode 100644
index 0000000000..4082391c60
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-component/Inner.svelte
@@ -0,0 +1,3 @@
+<div class='inner'>
+	<slot></slot>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-nested-component/Outer.svelte b/test/runtime/samples/component-slot-nested-component/Outer.svelte
new file mode 100644
index 0000000000..85e4153498
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-component/Outer.svelte
@@ -0,0 +1,3 @@
+<div class='outer'>
+	<slot></slot>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-nested-component/_config.js b/test/runtime/samples/component-slot-nested-component/_config.js
new file mode 100644
index 0000000000..922b96ae36
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-component/_config.js
@@ -0,0 +1,6 @@
+export default {
+	html: `
+		<div class='outer'>
+			<div class='inner'>foo</div>
+		</div>`
+};
diff --git a/test/runtime/samples/component-slot-nested-component/main.svelte b/test/runtime/samples/component-slot-nested-component/main.svelte
new file mode 100644
index 0000000000..45c6d437b6
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-component/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Outer from './Outer.svelte';
+	import Inner from './Inner.svelte';
+</script>
+
+<Outer>
+	<Inner>foo</Inner>
+</Outer>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-nested-error-2/Nested.svelte b/test/runtime/samples/component-slot-nested-error-2/Nested.svelte
new file mode 100644
index 0000000000..c6f086d96c
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-error-2/Nested.svelte
@@ -0,0 +1 @@
+<slot name="slot2"></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-nested-error-2/_config.js b/test/runtime/samples/component-slot-nested-error-2/_config.js
new file mode 100644
index 0000000000..08c436b16d
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-error-2/_config.js
@@ -0,0 +1,3 @@
+export default {
+	error: ["Element with a slot='...' attribute must be a child of a component or a descendant of a custom element"]
+};
diff --git a/test/runtime/samples/component-slot-nested-error-2/main.svelte b/test/runtime/samples/component-slot-nested-error-2/main.svelte
new file mode 100644
index 0000000000..a7142d6dc1
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-error-2/main.svelte
@@ -0,0 +1,11 @@
+<script>
+  import Nested from "./Nested.svelte";
+</script>
+
+<Nested>
+  <div slot="slot1">
+    <div>
+      <div slot="slot2" />
+    </div>
+  </div>
+</Nested>
diff --git a/test/runtime/samples/component-slot-nested-error-3/Nested.svelte b/test/runtime/samples/component-slot-nested-error-3/Nested.svelte
new file mode 100644
index 0000000000..c6f086d96c
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-error-3/Nested.svelte
@@ -0,0 +1 @@
+<slot name="slot2"></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-nested-error-3/_config.js b/test/runtime/samples/component-slot-nested-error-3/_config.js
new file mode 100644
index 0000000000..08c436b16d
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-error-3/_config.js
@@ -0,0 +1,3 @@
+export default {
+	error: ["Element with a slot='...' attribute must be a child of a component or a descendant of a custom element"]
+};
diff --git a/test/runtime/samples/component-slot-nested-error-3/main.svelte b/test/runtime/samples/component-slot-nested-error-3/main.svelte
new file mode 100644
index 0000000000..a63b1defde
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-error-3/main.svelte
@@ -0,0 +1,11 @@
+<script>
+  import Nested from "./Nested.svelte";
+</script>
+
+<Nested>
+  <div>
+    <div>
+      <div slot="slot2" />
+    </div>
+  </div>
+</Nested>
diff --git a/test/runtime/samples/component-slot-nested-error/Nested.svelte b/test/runtime/samples/component-slot-nested-error/Nested.svelte
new file mode 100644
index 0000000000..c6f086d96c
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-error/Nested.svelte
@@ -0,0 +1 @@
+<slot name="slot2"></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-nested-error/_config.js b/test/runtime/samples/component-slot-nested-error/_config.js
new file mode 100644
index 0000000000..08c436b16d
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-error/_config.js
@@ -0,0 +1,3 @@
+export default {
+	error: ["Element with a slot='...' attribute must be a child of a component or a descendant of a custom element"]
+};
diff --git a/test/runtime/samples/component-slot-nested-error/main.svelte b/test/runtime/samples/component-slot-nested-error/main.svelte
new file mode 100644
index 0000000000..531c96f08c
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-error/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Nested from "./Nested.svelte";
+</script>
+
+<Nested>
+	<div slot="slot1">
+		<div slot="slot2" />
+	</div>
+</Nested>
diff --git a/test/runtime/samples/component-slot-nested-if/Display.svelte b/test/runtime/samples/component-slot-nested-if/Display.svelte
new file mode 100644
index 0000000000..d9034e4be2
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-if/Display.svelte
@@ -0,0 +1,2 @@
+Display:
+<slot></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-nested-if/Input.svelte b/test/runtime/samples/component-slot-nested-if/Input.svelte
new file mode 100644
index 0000000000..fd8f22db00
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-if/Input.svelte
@@ -0,0 +1,6 @@
+<script>
+	let val;
+</script>
+
+<input bind:value={val} />
+<slot {val}></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-nested-if/_config.js b/test/runtime/samples/component-slot-nested-if/_config.js
new file mode 100644
index 0000000000..e4af352970
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-if/_config.js
@@ -0,0 +1,30 @@
+export default {
+	html: `
+    <input>
+	`,
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+
+		input.value = 'a';
+		await input.dispatchEvent(new window.Event('input'));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<input>
+			Display: a
+		`
+		);
+
+		input.value = 'abc';
+		await input.dispatchEvent(new window.Event('input'));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<input>
+			Display: abc
+		`
+		);
+	}
+};
diff --git a/test/runtime/samples/component-slot-nested-if/main.svelte b/test/runtime/samples/component-slot-nested-if/main.svelte
new file mode 100644
index 0000000000..727927b157
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-if/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Input from "./Input.svelte";
+	import Display from "./Display.svelte";
+</script>
+
+<Input let:val={foo}>
+	{#if foo}
+		<Display>{foo}</Display>
+	{/if}
+</Input>
diff --git a/test/runtime/samples/component-slot-nested-in-element/One.svelte b/test/runtime/samples/component-slot-nested-in-element/One.svelte
new file mode 100644
index 0000000000..ec1e06a598
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-in-element/One.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Two from './Two.svelte';
+</script>
+
+<Two>
+	<div slot="b">
+		<div>
+			<slot name="a"></slot>
+		</div>
+	</div>
+</Two>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-nested-in-element/Two.svelte b/test/runtime/samples/component-slot-nested-in-element/Two.svelte
new file mode 100644
index 0000000000..e3842479c5
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-in-element/Two.svelte
@@ -0,0 +1 @@
+<slot name="b"></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-nested-in-element/_config.js b/test/runtime/samples/component-slot-nested-in-element/_config.js
new file mode 100644
index 0000000000..bbdd8793c7
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-in-element/_config.js
@@ -0,0 +1,9 @@
+export default {
+	html: `
+		<div slot="b">
+			<div>
+				<div slot="a">a</div>
+			</div>
+		</div>
+	`
+};
diff --git a/test/runtime/samples/component-slot-nested-in-element/main.svelte b/test/runtime/samples/component-slot-nested-in-element/main.svelte
new file mode 100644
index 0000000000..32f5ddc312
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-in-element/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import One from './One.svelte';
+</script>
+
+<One>
+	<div slot="a">a</div>
+</One>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-nested-in-slot/One.svelte b/test/runtime/samples/component-slot-nested-in-slot/One.svelte
new file mode 100644
index 0000000000..e27437c450
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-in-slot/One.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Two from './Two.svelte';
+	export let a, b;
+</script>
+
+<Two {b} let:two>
+	<slot name="one" slot="two" one={a} two={two}></slot>
+</Two>
diff --git a/test/runtime/samples/component-slot-nested-in-slot/Two.svelte b/test/runtime/samples/component-slot-nested-in-slot/Two.svelte
new file mode 100644
index 0000000000..3f21e2d16f
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-in-slot/Two.svelte
@@ -0,0 +1,4 @@
+<script>
+  export let b;
+</script>
+<slot name="two" two={b}></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-nested-in-slot/_config.js b/test/runtime/samples/component-slot-nested-in-slot/_config.js
new file mode 100644
index 0000000000..56a9ef2668
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-in-slot/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<p slot='one'>one: 1 two: 2</p>
+	`,
+	test({ assert, component, target }) {
+		component.a = 3;
+		component.b = 4;
+		assert.htmlEqual(target.innerHTML, `
+			<p slot='one'>one: 3 two: 4</p>
+		`);
+
+		component.a = 5;
+		component.b = 6;
+		assert.htmlEqual(target.innerHTML, `
+			<p slot='one'>one: 5 two: 6</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-nested-in-slot/main.svelte b/test/runtime/samples/component-slot-nested-in-slot/main.svelte
new file mode 100644
index 0000000000..38a172e668
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested-in-slot/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import One from './One.svelte';
+	export let a = 1;
+	export let b = 2;
+</script>
+
+<One {a} {b}>
+	<p slot='one' let:one let:two>one: {one} two: {two}</p>
+</One>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-nested/Nested.svelte b/test/runtime/samples/component-slot-nested/Nested.svelte
new file mode 100644
index 0000000000..6aa4e89e57
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested/Nested.svelte
@@ -0,0 +1,5 @@
+<div>
+	<slot name='foo'>
+		<slot name='bar'></slot>
+	</slot>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-nested/_config.js b/test/runtime/samples/component-slot-nested/_config.js
new file mode 100644
index 0000000000..23ea791e63
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested/_config.js
@@ -0,0 +1,6 @@
+export default {
+	html: `
+		<div>
+			<p slot='bar'>bar</p>
+		</div>`
+};
diff --git a/test/runtime/samples/component-slot-nested/main.svelte b/test/runtime/samples/component-slot-nested/main.svelte
new file mode 100644
index 0000000000..982a918709
--- /dev/null
+++ b/test/runtime/samples/component-slot-nested/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	<p slot='bar'>bar</p>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-slot/Component.svelte b/test/runtime/samples/component-slot-slot/Component.svelte
new file mode 100644
index 0000000000..fdcb8e7f2b
--- /dev/null
+++ b/test/runtime/samples/component-slot-slot/Component.svelte
@@ -0,0 +1,3 @@
+<div>
+	<slot name="test" />
+</div>
diff --git a/test/runtime/samples/component-slot-slot/Forward.svelte b/test/runtime/samples/component-slot-slot/Forward.svelte
new file mode 100644
index 0000000000..320be9df25
--- /dev/null
+++ b/test/runtime/samples/component-slot-slot/Forward.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Component from './Component.svelte';
+</script>
+
+<Component>
+	<slot slot="test" />
+</Component>
diff --git a/test/runtime/samples/component-slot-slot/_config.js b/test/runtime/samples/component-slot-slot/_config.js
new file mode 100644
index 0000000000..32af774fac
--- /dev/null
+++ b/test/runtime/samples/component-slot-slot/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<div><span>lol</span></div>'
+};
diff --git a/test/runtime/samples/component-slot-slot/main.svelte b/test/runtime/samples/component-slot-slot/main.svelte
new file mode 100644
index 0000000000..1718494b16
--- /dev/null
+++ b/test/runtime/samples/component-slot-slot/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Forward from './Forward.svelte';
+</script>
+
+<Forward>
+	<span>
+		lol
+	</span>
+</Forward>
diff --git a/test/runtime/samples/component-slot-spread-props/Nested.svelte b/test/runtime/samples/component-slot-spread-props/Nested.svelte
new file mode 100644
index 0000000000..08fb4697a9
--- /dev/null
+++ b/test/runtime/samples/component-slot-spread-props/Nested.svelte
@@ -0,0 +1,4 @@
+<div>
+  <slot />
+  <div {...$$props}></div>
+</div>
diff --git a/test/runtime/samples/component-slot-spread-props/_config.js b/test/runtime/samples/component-slot-spread-props/_config.js
new file mode 100644
index 0000000000..7beda8d3d5
--- /dev/null
+++ b/test/runtime/samples/component-slot-spread-props/_config.js
@@ -0,0 +1,25 @@
+export default {
+	html: `
+		<div>
+			<input />
+			<div class="foo"></div>
+		</div>
+	`,
+	ssrHtml: `
+		<div>
+			<input value="" />
+			<div class="foo"></div>
+		</div>
+	`,
+
+	async test({ assert, component, target }) {
+		component.value = 'foo';
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<input />
+				<div class="foo"></div>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-spread-props/main.svelte b/test/runtime/samples/component-slot-spread-props/main.svelte
new file mode 100644
index 0000000000..69d1269217
--- /dev/null
+++ b/test/runtime/samples/component-slot-spread-props/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Nested from './Nested.svelte';
+	export let value = '';
+</script>
+
+<Nested class="foo">
+	<input bind:value />
+</Nested>
diff --git a/test/runtime/samples/component-slot-spread/Nested.svelte b/test/runtime/samples/component-slot-spread/Nested.svelte
new file mode 100644
index 0000000000..597f7bbb1b
--- /dev/null
+++ b/test/runtime/samples/component-slot-spread/Nested.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let obj;
+	export let c;
+	export let d;
+</script>
+
+<slot {c} {...obj} {d} />
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-spread/_config.js b/test/runtime/samples/component-slot-spread/_config.js
new file mode 100644
index 0000000000..dfa2bd86fc
--- /dev/null
+++ b/test/runtime/samples/component-slot-spread/_config.js
@@ -0,0 +1,55 @@
+export default {
+	props: {
+		obj: { a: 1, b: 42 },
+		c: 5,
+		d: 10
+	},
+	html: `
+		<p>1</p>
+		<p>42</p>
+		<p>5</p>
+		<p>10</p>
+	`,
+
+	test({ assert, target, component }) {
+		component.obj = { a: 2, b: 50, c: 30 };
+		assert.htmlEqual(target.innerHTML, `
+			<p>2</p>
+			<p>50</p>
+			<p>30</p>
+			<p>10</p>
+		`);
+
+		component.c = 22;
+		assert.htmlEqual(target.innerHTML, `
+			<p>2</p>
+			<p>50</p>
+			<p>30</p>
+			<p>10</p>
+		`);
+
+		component.d = 44;
+		assert.htmlEqual(target.innerHTML, `
+			<p>2</p>
+			<p>50</p>
+			<p>30</p>
+			<p>44</p>
+		`);
+		
+		component.obj = { a: 9, b: 12 };
+		assert.htmlEqual(target.innerHTML, `
+			<p>9</p>
+			<p>12</p>
+			<p>22</p>
+			<p>44</p>
+		`);
+
+		component.c = 88;
+		assert.htmlEqual(target.innerHTML, `
+			<p>9</p>
+			<p>12</p>
+			<p>88</p>
+			<p>44</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-spread/main.svelte b/test/runtime/samples/component-slot-spread/main.svelte
new file mode 100644
index 0000000000..8b3b94325c
--- /dev/null
+++ b/test/runtime/samples/component-slot-spread/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let obj;
+	export let c;
+	export let d;
+</script>
+
+<Nested {obj} {c} {d} let:a let:b let:c let:d>
+	<p>{a}</p>
+	<p>{b}</p>
+	<p>{c}</p>
+	<p>{d}</p>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-static-and-dynamic/Nested.svelte b/test/runtime/samples/component-slot-static-and-dynamic/Nested.svelte
new file mode 100644
index 0000000000..bf28fb0bcc
--- /dev/null
+++ b/test/runtime/samples/component-slot-static-and-dynamic/Nested.svelte
@@ -0,0 +1,4 @@
+<div>
+	<slot name="a"></slot>
+	<slot name="b"></slot>
+</div>
diff --git a/test/runtime/samples/component-slot-static-and-dynamic/_config.js b/test/runtime/samples/component-slot-static-and-dynamic/_config.js
new file mode 100644
index 0000000000..93ec069502
--- /dev/null
+++ b/test/runtime/samples/component-slot-static-and-dynamic/_config.js
@@ -0,0 +1,19 @@
+export default {
+	html: `
+		<div>
+			<span slot="a">static</span>
+			<span slot="b">0</span>
+		</div>
+	`,
+
+	test({ assert, component, target }) {
+		component.dynamic += 1;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<span slot="a">static</span>
+				<span slot="b">1</span>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-slot-static-and-dynamic/main.svelte b/test/runtime/samples/component-slot-static-and-dynamic/main.svelte
new file mode 100644
index 0000000000..2567da1b75
--- /dev/null
+++ b/test/runtime/samples/component-slot-static-and-dynamic/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Nested from "./Nested.svelte";
+
+	export let dynamic = 0;
+</script>
+
+
+<Nested>
+	<span slot="a">static</span>
+	<span slot="b">{dynamic}</span>
+</Nested>
diff --git a/test/runtime/samples/component-slot-used-with-default-event/Nested.svelte b/test/runtime/samples/component-slot-used-with-default-event/Nested.svelte
new file mode 100644
index 0000000000..2682f7168b
--- /dev/null
+++ b/test/runtime/samples/component-slot-used-with-default-event/Nested.svelte
@@ -0,0 +1,7 @@
+<script>
+	function click() {}
+</script>
+
+<p>
+	<slot><button on:click>Should not appear</button></slot>
+</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-used-with-default-event/_config.js b/test/runtime/samples/component-slot-used-with-default-event/_config.js
new file mode 100644
index 0000000000..174d01f1a5
--- /dev/null
+++ b/test/runtime/samples/component-slot-used-with-default-event/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>Hello</p>'
+};
diff --git a/test/runtime/samples/component-slot-used-with-default-event/main.svelte b/test/runtime/samples/component-slot-used-with-default-event/main.svelte
new file mode 100644
index 0000000000..1e1ea8daa8
--- /dev/null
+++ b/test/runtime/samples/component-slot-used-with-default-event/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	Hello
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-warning/Nested.svelte b/test/runtime/samples/component-slot-warning/Nested.svelte
new file mode 100644
index 0000000000..c6f086d96c
--- /dev/null
+++ b/test/runtime/samples/component-slot-warning/Nested.svelte
@@ -0,0 +1 @@
+<slot name="slot2"></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-warning/_config.js b/test/runtime/samples/component-slot-warning/_config.js
new file mode 100644
index 0000000000..c1785f2764
--- /dev/null
+++ b/test/runtime/samples/component-slot-warning/_config.js
@@ -0,0 +1,8 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+	warnings: [
+		'<Nested> received an unexpected slot "slot1".'
+	]
+};
diff --git a/test/runtime/samples/component-slot-warning/main.svelte b/test/runtime/samples/component-slot-warning/main.svelte
new file mode 100644
index 0000000000..c29ef3e85b
--- /dev/null
+++ b/test/runtime/samples/component-slot-warning/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Nested from "./Nested.svelte";
+</script>
+<Nested>
+	<input slot="slot1">
+	<input slot="slot2">
+</Nested>
diff --git a/test/runtime/samples/component-static-at-symbol/Email.svelte b/test/runtime/samples/component-static-at-symbol/Email.svelte
new file mode 100644
index 0000000000..711fefb829
--- /dev/null
+++ b/test/runtime/samples/component-static-at-symbol/Email.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let address;
+</script>
+
+<a href='mailto:{address}'>email</a>
\ No newline at end of file
diff --git a/test/runtime/samples/component-static-at-symbol/_config.js b/test/runtime/samples/component-static-at-symbol/_config.js
new file mode 100644
index 0000000000..0be19f091f
--- /dev/null
+++ b/test/runtime/samples/component-static-at-symbol/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: "<a href='mailto:hello@example.com'>email</a>"
+};
diff --git a/test/runtime/samples/component-static-at-symbol/main.svelte b/test/runtime/samples/component-static-at-symbol/main.svelte
new file mode 100644
index 0000000000..39f82ffd25
--- /dev/null
+++ b/test/runtime/samples/component-static-at-symbol/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Email from './Email.svelte';
+</script>
+
+<Email address='hello@example.com'/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-2/Nested.svelte b/test/runtime/samples/component-svelte-slot-2/Nested.svelte
new file mode 100644
index 0000000000..a94392ce5d
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-2/Nested.svelte
@@ -0,0 +1 @@
+<slot name="name"></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-2/_config.js b/test/runtime/samples/component-svelte-slot-2/_config.js
new file mode 100644
index 0000000000..9dfed6ff53
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-2/_config.js
@@ -0,0 +1,6 @@
+export default {
+	html: `
+		<span>Hello</span>
+		<span>world</span>
+	`
+};
diff --git a/test/runtime/samples/component-svelte-slot-2/main.svelte b/test/runtime/samples/component-svelte-slot-2/main.svelte
new file mode 100644
index 0000000000..8212f54cf8
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-2/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	<svelte:fragment slot="name">
+		<span>Hello</span>
+	</svelte:fragment>
+</Nested>
+
+<Nested>
+	<svelte:fragment slot="name">
+		<span>world</span>
+	</svelte:fragment>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-aliased/Nested.svelte b/test/runtime/samples/component-svelte-slot-let-aliased/Nested.svelte
new file mode 100644
index 0000000000..6eaf6fe3ad
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-aliased/Nested.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let things;
+</script>
+
+<div>
+	{#each things as thing}
+		<slot name="main" {thing}/>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-aliased/_config.js b/test/runtime/samples/component-svelte-slot-let-aliased/_config.js
new file mode 100644
index 0000000000..d66f613bb4
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-aliased/_config.js
@@ -0,0 +1,24 @@
+export default {
+	props: {
+		things: [1, 2, 3]
+	},
+
+	html: `
+		<div>
+			<span>1</span>
+			<span>2</span>
+			<span>3</span>
+		</div>`,
+
+	test({ assert, component, target }) {
+		component.things = [1, 2, 3, 4];
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<span>1</span>
+				<span>2</span>
+				<span>3</span>
+				<span>4</span>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-svelte-slot-let-aliased/main.svelte b/test/runtime/samples/component-svelte-slot-let-aliased/main.svelte
new file mode 100644
index 0000000000..dabf1d65ef
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-aliased/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let things;
+</script>
+
+<Nested {things} let:thing={x}>
+	<svelte:fragment slot="main">
+		<span>{x}</span>
+	</svelte:fragment>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-b/Nested.svelte b/test/runtime/samples/component-svelte-slot-let-b/Nested.svelte
new file mode 100644
index 0000000000..36c10ecbc2
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-b/Nested.svelte
@@ -0,0 +1,6 @@
+<script>
+	let count = 0;
+</script>
+
+<button on:click="{() => count += 1}">+1</button>
+<slot name="main" count={count}/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-b/_config.js b/test/runtime/samples/component-svelte-slot-let-b/_config.js
new file mode 100644
index 0000000000..f13a3b2bb6
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-b/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<button>+1</button>
+		<span>0</span>
+	`,
+
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>+1</button>
+			<span>1</span>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-svelte-slot-let-b/main.svelte b/test/runtime/samples/component-svelte-slot-let-b/main.svelte
new file mode 100644
index 0000000000..584240d14d
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-b/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested let:count>
+	<svelte:fragment slot="main">
+		<span>{count}</span>
+	</svelte:fragment>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-c/Nested.svelte b/test/runtime/samples/component-svelte-slot-let-c/Nested.svelte
new file mode 100644
index 0000000000..1220440590
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-c/Nested.svelte
@@ -0,0 +1,6 @@
+<script>
+	let count = 0;
+</script>
+
+<button on:click="{() => count += 1}">+1</button>
+<slot name='main' c={count}/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-c/_config.js b/test/runtime/samples/component-svelte-slot-let-c/_config.js
new file mode 100644
index 0000000000..fe8e68b1ac
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-c/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<button>+1</button>
+		<span>0 (undefined)</span>
+	`,
+
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>+1</button>
+			<span>1 (undefined)</span>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-svelte-slot-let-c/main.svelte b/test/runtime/samples/component-svelte-slot-let-c/main.svelte
new file mode 100644
index 0000000000..9753c45075
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-c/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	<svelte:fragment slot="main" let:c let:count>
+		<span>{c} ({count})</span>
+	</svelte:fragment>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-d/Nested.svelte b/test/runtime/samples/component-svelte-slot-let-d/Nested.svelte
new file mode 100644
index 0000000000..9f3a345acd
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-d/Nested.svelte
@@ -0,0 +1,7 @@
+<script>
+	let foo = 'a';
+</script>
+
+<div on:click="{() => foo = 'b'}">
+	<slot name="main" {foo}></slot>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-d/_config.js b/test/runtime/samples/component-svelte-slot-let-d/_config.js
new file mode 100644
index 0000000000..e293ae136c
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-d/_config.js
@@ -0,0 +1,20 @@
+export default {
+	html: `
+		<div>
+			<p>a</p>
+		</div>
+	`,
+
+	async test({ assert, target, window }) {
+		const div = target.querySelector('div');
+		const click = new window.MouseEvent('click');
+
+		await div.dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<p>b</p>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-svelte-slot-let-d/main.svelte b/test/runtime/samples/component-svelte-slot-let-d/main.svelte
new file mode 100644
index 0000000000..7ba94c7b8a
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-d/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	<svelte:fragment slot="main" let:foo={bar}>
+		<p>{bar}</p>
+	</svelte:fragment>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-destructured-2/Nested.svelte b/test/runtime/samples/component-svelte-slot-let-destructured-2/Nested.svelte
new file mode 100644
index 0000000000..f46046c78e
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-destructured-2/Nested.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let props;
+</script>
+
+<slot name="main" value={props} data={Array.isArray(props) ? props[0] : props.a} />
diff --git a/test/runtime/samples/component-svelte-slot-let-destructured-2/_config.js b/test/runtime/samples/component-svelte-slot-let-destructured-2/_config.js
new file mode 100644
index 0000000000..e407dcf2f8
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-destructured-2/_config.js
@@ -0,0 +1,68 @@
+export default {
+	html: `
+		<div>
+			hello world 0 hello
+			<button>Increment</button>
+		</div>
+		<div>
+			hello world 0 hello
+			<button>Increment</button>
+		</div>
+		<div>
+			hello world 0 hello
+			<button>Increment</button>
+		</div>
+	`,
+	async test({ assert, target, window }) {
+		const [button1, button2, button3] = target.querySelectorAll('button');
+		const event = new window.MouseEvent('click');
+
+		await button1.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				hello world 1 hello
+				<button>Increment</button>
+			</div>
+			<div>
+				hello world 0 hello
+				<button>Increment</button>
+			</div>
+			<div>
+				hello world 0 hello
+				<button>Increment</button>
+			</div>
+		`);
+
+		await button2.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				hello world 1 hello
+				<button>Increment</button>
+			</div>
+			<div>
+				hello world 1 hello
+				<button>Increment</button>
+			</div>
+			<div>
+				hello world 0 hello
+				<button>Increment</button>
+			</div>
+		`);
+
+		await button3.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				hello world 1 hello
+				<button>Increment</button>
+			</div>
+			<div>
+				hello world 1 hello
+				<button>Increment</button>
+			</div>
+			<div>
+				hello world 1 hello
+				<button>Increment</button>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-svelte-slot-let-destructured-2/main.svelte b/test/runtime/samples/component-svelte-slot-let-destructured-2/main.svelte
new file mode 100644
index 0000000000..d4d3991881
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-destructured-2/main.svelte
@@ -0,0 +1,34 @@
+<script>
+	import Nested from "./Nested.svelte";
+	let c = 0, d = 0, e = 0;
+</script>
+
+<div>
+	<Nested props={['hello', 'world']}>
+		<svelte:fragment slot="main" let:value={pair} let:data={foo}>
+			{pair[0]} {pair[1]} {c} {foo}
+		</svelte:fragment>
+	</Nested>
+
+	<button on:click={() => { c += 1; }}>Increment</button>
+</div>
+
+<div>
+	<Nested props={['hello', 'world']}>
+		<svelte:fragment slot="main" let:value={[a, b]} let:data={foo}>
+			{a} {b} {d} {foo}
+		</svelte:fragment>
+	</Nested>
+
+	<button on:click={() => { d += 1; }}>Increment</button>
+</div>
+
+<div>
+	<Nested props={{ a: 'hello', b: 'world' }}>
+		<svelte:fragment slot="main" let:value={{ a, b }} let:data={foo}>
+			{a} {b} {e} {foo}
+		</svelte:fragment>
+	</Nested>
+
+	<button on:click={() => { e += 1; }}>Increment</button>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-destructured/Nested.svelte b/test/runtime/samples/component-svelte-slot-let-destructured/Nested.svelte
new file mode 100644
index 0000000000..99afb32aa0
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-destructured/Nested.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let things;
+</script>
+
+<div>
+	{#each things as thing}
+		<slot name="item" {thing}/>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-destructured/_config.js b/test/runtime/samples/component-svelte-slot-let-destructured/_config.js
new file mode 100644
index 0000000000..d7aaae2d77
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-destructured/_config.js
@@ -0,0 +1,34 @@
+export default {
+	props: {
+		things: [
+			{ num: 1 },
+			{ num: 2 },
+			{ num: 3 }
+		]
+	},
+
+	html: `
+		<div>
+			<span>1</span>
+			<span>2</span>
+			<span>3</span>
+		</div>`,
+
+	test({ assert, component, target }) {
+		component.things = [
+			{ num: 1 },
+			{ num: 2 },
+			{ num: 3 },
+			{ num: 4 }
+		];
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<span>1</span>
+				<span>2</span>
+				<span>3</span>
+				<span>4</span>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-svelte-slot-let-destructured/main.svelte b/test/runtime/samples/component-svelte-slot-let-destructured/main.svelte
new file mode 100644
index 0000000000..923e96311c
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-destructured/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let things;
+</script>
+
+<Nested {things}>
+	<svelte:fragment slot="item" let:thing="{{ num }}">
+		<span>{num}</span>
+	</svelte:fragment>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-e/A.svelte b/test/runtime/samples/component-svelte-slot-let-e/A.svelte
new file mode 100644
index 0000000000..3ba0e62cd9
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-e/A.svelte
@@ -0,0 +1,11 @@
+<script>
+	import B from './B.svelte';
+	export let x;
+</script>
+
+<B {x} let:reflected>
+	<svelte:fragment slot="main">
+		<span>{reflected}</span>
+		<slot name="main" {reflected} />
+	</svelte:fragment>
+</B>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-e/B.svelte b/test/runtime/samples/component-svelte-slot-let-e/B.svelte
new file mode 100644
index 0000000000..352f10a249
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-e/B.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x;
+</script>
+
+<slot name="main" reflected={x}/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-e/_config.js b/test/runtime/samples/component-svelte-slot-let-e/_config.js
new file mode 100644
index 0000000000..967955dfd8
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-e/_config.js
@@ -0,0 +1,19 @@
+export default {
+	html: `
+		<span>1</span>
+		<span>1</span>
+		<span>1</span>
+		<span>1</span>
+	`,
+
+	async test({ assert, target, component }) {
+		component.x = 2;
+
+		assert.htmlEqual(target.innerHTML, `
+			<span>2</span>
+			<span>2</span>
+			<span>2</span>
+			<span>2</span>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-svelte-slot-let-e/main.svelte b/test/runtime/samples/component-svelte-slot-let-e/main.svelte
new file mode 100644
index 0000000000..80c9a868cd
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-e/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import A from './A.svelte';
+	export let x = 1;
+</script>
+
+<A {x}>
+	<svelte:fragment slot="main" let:reflected>
+		<span>{reflected}</span>
+	</svelte:fragment>	
+</A>
+
+<A {x} let:reflected>
+	<svelte:fragment slot="main">
+		<span>{reflected}</span>
+	</svelte:fragment>	
+</A>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-f/A.svelte b/test/runtime/samples/component-svelte-slot-let-f/A.svelte
new file mode 100644
index 0000000000..4f4ac95014
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-f/A.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x;
+</script>
+
+<slot name="foo" reflected={x}/>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-f/_config.js b/test/runtime/samples/component-svelte-slot-let-f/_config.js
new file mode 100644
index 0000000000..73b90885b5
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-f/_config.js
@@ -0,0 +1,22 @@
+export default {
+	html: `
+		<span class="1">1</span>
+		0
+	`,
+	async test({ assert, target, component, window }) {
+		component.x = 2;
+
+		assert.htmlEqual(target.innerHTML, `
+			<span class="2">2</span>
+			0
+		`);
+
+		const span = target.querySelector('span');
+		await span.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.htmlEqual(target.innerHTML, `
+			<span class="2">2</span>
+			2
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-svelte-slot-let-f/main.svelte b/test/runtime/samples/component-svelte-slot-let-f/main.svelte
new file mode 100644
index 0000000000..a47f1ba6de
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-f/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import A from './A.svelte';
+	export let x = 1;
+	let y = 0;
+</script>
+
+<A {x}>
+	<svelte:fragment slot="foo" let:reflected>
+		<span 
+			on:click={() => y = reflected}
+			class={reflected}
+		>
+			{reflected}
+		</span>
+	</svelte:fragment>
+</A>
+{ y }
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-in-binding/Nested.svelte b/test/runtime/samples/component-svelte-slot-let-in-binding/Nested.svelte
new file mode 100644
index 0000000000..95b4842ee6
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-in-binding/Nested.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let items;
+</script>
+
+<div>
+	{#each items as item, index}
+		<slot name="main" {index}/>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-in-binding/_config.js b/test/runtime/samples/component-svelte-slot-let-in-binding/_config.js
new file mode 100644
index 0000000000..41e77a9574
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-in-binding/_config.js
@@ -0,0 +1,26 @@
+export default {
+	html: `
+		<div>
+			<label>1: <input></label>
+			<label>2: <input></label>
+			<label>3: <input></label>
+		</div>
+	`,
+
+	ssrHtml: `
+		<div>
+			<label>1: <input value="a"></label>
+			<label>2: <input value="b"></label>
+			<label>3: <input value="c"></label>
+		</div>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const inputs = target.querySelectorAll('input');
+
+		inputs[2].value = 'd';
+		await inputs[2].dispatchEvent(new window.Event('input'));
+
+		assert.deepEqual(component.letters, ['a', 'b', 'd']);
+	}
+};
diff --git a/test/runtime/samples/component-svelte-slot-let-in-binding/main.svelte b/test/runtime/samples/component-svelte-slot-let-in-binding/main.svelte
new file mode 100644
index 0000000000..c6edd82003
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-in-binding/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let letters = ['a', 'b', 'c'];
+</script>
+
+<Nested items={letters}>
+	<svelte:fragment slot="main" let:index>
+		<label>
+			{index + 1}: <input bind:value={letters[index]}>
+		</label>
+	</svelte:fragment>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-in-slot/Inner.svelte b/test/runtime/samples/component-svelte-slot-let-in-slot/Inner.svelte
new file mode 100644
index 0000000000..50baf3aa93
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-in-slot/Inner.svelte
@@ -0,0 +1 @@
+<slot name="main"/>
diff --git a/test/runtime/samples/component-svelte-slot-let-in-slot/Outer.svelte b/test/runtime/samples/component-svelte-slot-let-in-slot/Outer.svelte
new file mode 100644
index 0000000000..d6c86307a5
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-in-slot/Outer.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let prop
+</script>
+
+<slot name="main" value={prop} />
diff --git a/test/runtime/samples/component-svelte-slot-let-in-slot/_config.js b/test/runtime/samples/component-svelte-slot-let-in-slot/_config.js
new file mode 100644
index 0000000000..eb16c27fda
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-in-slot/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		prop: 'a'
+	},
+
+	html: 'a',
+
+	test({ assert, component, target }) {
+		component.prop = 'b';
+		assert.htmlEqual( target.innerHTML, 'b' );
+	}
+};
diff --git a/test/runtime/samples/component-svelte-slot-let-in-slot/main.svelte b/test/runtime/samples/component-svelte-slot-let-in-slot/main.svelte
new file mode 100644
index 0000000000..2de0cb11ef
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-in-slot/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Outer from './Outer.svelte'
+	import Inner from './Inner.svelte'
+
+	export let prop
+</script>
+
+<Outer {prop}>
+	<svelte:fragment slot="main" let:value>
+		<Inner>
+			<svelte:fragment slot="main">
+				{value}
+			</svelte:fragment>
+		</Inner>
+	</svelte:fragment>
+</Outer>
diff --git a/test/runtime/samples/component-svelte-slot-let-named/Nested.svelte b/test/runtime/samples/component-svelte-slot-let-named/Nested.svelte
new file mode 100644
index 0000000000..a3b09ff5b2
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-named/Nested.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let things;
+</script>
+
+<div>
+	{#each things as thing}
+		<slot name="foo" {thing}/>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-named/_config.js b/test/runtime/samples/component-svelte-slot-let-named/_config.js
new file mode 100644
index 0000000000..f65448af93
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-named/_config.js
@@ -0,0 +1,24 @@
+export default {
+	props: {
+		things: [1, 2, 3]
+	},
+
+	html: `
+		<div>
+			<div slot="foo"><span>1</span></div>
+			<div slot="foo"><span>2</span></div>
+			<div slot="foo"><span>3</span></div>
+		</div>`,
+
+	test({ assert, component, target }) {
+		component.things = [1, 2, 3, 4];
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<div slot="foo"><span>1</span></div>
+				<div slot="foo"><span>2</span></div>
+				<div slot="foo"><span>3</span></div>
+				<div slot="foo"><span>4</span></div>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-svelte-slot-let-named/main.svelte b/test/runtime/samples/component-svelte-slot-let-named/main.svelte
new file mode 100644
index 0000000000..f9e9e3a10f
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-named/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let things;
+</script>
+
+<Nested {things}>
+	<div slot="foo" let:thing>
+		<span>{thing}</span>
+	</div>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-static/Nested.svelte b/test/runtime/samples/component-svelte-slot-let-static/Nested.svelte
new file mode 100644
index 0000000000..32eee1534a
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-static/Nested.svelte
@@ -0,0 +1 @@
+<slot value="Hi" />
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let-static/_config.js b/test/runtime/samples/component-svelte-slot-let-static/_config.js
new file mode 100644
index 0000000000..ede7a679c5
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-static/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>Hi</p>'
+};
diff --git a/test/runtime/samples/component-svelte-slot-let-static/main.svelte b/test/runtime/samples/component-svelte-slot-let-static/main.svelte
new file mode 100644
index 0000000000..3eeaba976e
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let-static/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested let:value>
+	<p>{value}</p>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let/Nested.svelte b/test/runtime/samples/component-svelte-slot-let/Nested.svelte
new file mode 100644
index 0000000000..3758adbd7c
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let/Nested.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let things;
+</script>
+
+<div>
+	{#each things as thing}
+		<slot {thing}/>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-let/_config.js b/test/runtime/samples/component-svelte-slot-let/_config.js
new file mode 100644
index 0000000000..d66f613bb4
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let/_config.js
@@ -0,0 +1,24 @@
+export default {
+	props: {
+		things: [1, 2, 3]
+	},
+
+	html: `
+		<div>
+			<span>1</span>
+			<span>2</span>
+			<span>3</span>
+		</div>`,
+
+	test({ assert, component, target }) {
+		component.things = [1, 2, 3, 4];
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<span>1</span>
+				<span>2</span>
+				<span>3</span>
+				<span>4</span>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-svelte-slot-let/main.svelte b/test/runtime/samples/component-svelte-slot-let/main.svelte
new file mode 100644
index 0000000000..d00bb8e41e
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-let/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let things;
+</script>
+
+<Nested {things} let:thing>
+	<span>{thing}</span>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-nested/Child.svelte b/test/runtime/samples/component-svelte-slot-nested/Child.svelte
new file mode 100644
index 0000000000..3f87a7dbf2
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-nested/Child.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	<svelte:fragment slot="name">
+		<slot />
+	</svelte:fragment>
+</Nested>
+
+<Nested>
+	<svelte:fragment slot="name">
+		<slot name="b" />
+	</svelte:fragment>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-nested/Nested.svelte b/test/runtime/samples/component-svelte-slot-nested/Nested.svelte
new file mode 100644
index 0000000000..a94392ce5d
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-nested/Nested.svelte
@@ -0,0 +1 @@
+<slot name="name"></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot-nested/_config.js b/test/runtime/samples/component-svelte-slot-nested/_config.js
new file mode 100644
index 0000000000..eecd155e1f
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-nested/_config.js
@@ -0,0 +1,6 @@
+export default {
+	html: `
+		Default
+		<p>B slot</p>
+	`
+};
diff --git a/test/runtime/samples/component-svelte-slot-nested/main.svelte b/test/runtime/samples/component-svelte-slot-nested/main.svelte
new file mode 100644
index 0000000000..e5b3e2f84a
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot-nested/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child>
+	<svelte:fragment>
+		Default
+	</svelte:fragment>
+	<svelte:fragment slot="b">
+		<p>B slot</p>
+	</svelte:fragment>
+</Child>
diff --git a/test/runtime/samples/component-svelte-slot/B.svelte b/test/runtime/samples/component-svelte-slot/B.svelte
new file mode 100644
index 0000000000..3bbf00a60c
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot/B.svelte
@@ -0,0 +1,6 @@
+<script>
+  export let name;
+</script>
+
+<div>Hello</div>
+<div>{name}</div>
diff --git a/test/runtime/samples/component-svelte-slot/Nested.svelte b/test/runtime/samples/component-svelte-slot/Nested.svelte
new file mode 100644
index 0000000000..09cfc5aa39
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot/Nested.svelte
@@ -0,0 +1,2 @@
+<div>a: <slot name="a"></slot></div>
+<div>b: <slot name="b"></slot></div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-svelte-slot/_config.js b/test/runtime/samples/component-svelte-slot/_config.js
new file mode 100644
index 0000000000..360b4709b5
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot/_config.js
@@ -0,0 +1,6 @@
+export default {
+	html: `
+		<div>a: content <span>a</span></div>
+		<div>b: <div>Hello</div><div>world</div></div>
+	`
+};
diff --git a/test/runtime/samples/component-svelte-slot/main.svelte b/test/runtime/samples/component-svelte-slot/main.svelte
new file mode 100644
index 0000000000..b27c3795ed
--- /dev/null
+++ b/test/runtime/samples/component-svelte-slot/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Nested from "./Nested.svelte";
+	import B from './B.svelte';
+	const a = 'a';
+</script>
+<Nested>
+	<svelte:fragment slot="a">
+		content <span>{ a }</span>
+	</svelte:fragment>
+	<svelte:fragment slot="b">
+		<B name="world" />
+	</svelte:fragment>
+</Nested>
diff --git a/test/runtime/samples/component-template-inline-mutation/Widget.svelte b/test/runtime/samples/component-template-inline-mutation/Widget.svelte
new file mode 100644
index 0000000000..f20c4bea50
--- /dev/null
+++ b/test/runtime/samples/component-template-inline-mutation/Widget.svelte
@@ -0,0 +1,5 @@
+<script>
+  let count = 0;
+</script>
+
+<button on:click="{() => count += 1}">{count}</button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-template-inline-mutation/_config.js b/test/runtime/samples/component-template-inline-mutation/_config.js
new file mode 100644
index 0000000000..9007d80ff5
--- /dev/null
+++ b/test/runtime/samples/component-template-inline-mutation/_config.js
@@ -0,0 +1,14 @@
+export default {
+	async test({ assert, target }) {
+		const btns = target.querySelectorAll('button');
+		const event = new window.MouseEvent('click');
+
+		await btns[0].dispatchEvent(event);
+		await btns[0].dispatchEvent(event);
+		await btns[1].dispatchEvent(event);
+		await btns[1].dispatchEvent(event);
+		await btns[1].dispatchEvent(event);
+
+		assert.equal(btns[1].innerHTML, '3');
+	}
+};
diff --git a/test/runtime/samples/component-template-inline-mutation/main.svelte b/test/runtime/samples/component-template-inline-mutation/main.svelte
new file mode 100644
index 0000000000..b77462c690
--- /dev/null
+++ b/test/runtime/samples/component-template-inline-mutation/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<Widget />
+<Widget />
\ No newline at end of file
diff --git a/test/runtime/samples/component-yield-follows-element/Foo.svelte b/test/runtime/samples/component-yield-follows-element/Foo.svelte
new file mode 100644
index 0000000000..f2faab767e
--- /dev/null
+++ b/test/runtime/samples/component-yield-follows-element/Foo.svelte
@@ -0,0 +1,2 @@
+<div>before</div>
+<slot></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/component-yield-follows-element/_config.js b/test/runtime/samples/component-yield-follows-element/_config.js
new file mode 100644
index 0000000000..93703c7dab
--- /dev/null
+++ b/test/runtime/samples/component-yield-follows-element/_config.js
@@ -0,0 +1,6 @@
+export default {
+	html: `
+		<div>before</div>
+		test
+	`
+};
diff --git a/test/runtime/samples/component-yield-follows-element/main.svelte b/test/runtime/samples/component-yield-follows-element/main.svelte
new file mode 100644
index 0000000000..3a43b58231
--- /dev/null
+++ b/test/runtime/samples/component-yield-follows-element/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Foo from './Foo.svelte';
+</script>
+
+<Foo>test</Foo>
\ No newline at end of file
diff --git a/test/runtime/samples/component-yield-if/Widget.svelte b/test/runtime/samples/component-yield-if/Widget.svelte
new file mode 100644
index 0000000000..209f43ae8e
--- /dev/null
+++ b/test/runtime/samples/component-yield-if/Widget.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let show = false;
+</script>
+
+<p>
+	{#if show}
+		<slot></slot>
+	{/if}
+</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-yield-if/_config.js b/test/runtime/samples/component-yield-if/_config.js
new file mode 100644
index 0000000000..40fe2d5427
--- /dev/null
+++ b/test/runtime/samples/component-yield-if/_config.js
@@ -0,0 +1,24 @@
+export default {
+	html: '<div><p></p></div>',
+
+	test({ assert, component, target }) {
+		const { widget } = component;
+
+		assert.equal(widget.show, false);
+
+		widget.show = true;
+		assert.htmlEqual(target.innerHTML, '<div><p>Hello</p></div>');
+
+		component.data = 'World';
+		assert.htmlEqual(target.innerHTML, '<div><p>World</p></div>');
+
+		widget.show = false;
+		assert.htmlEqual(target.innerHTML, '<div><p></p></div>');
+
+		component.data = 'Goodbye';
+		assert.htmlEqual(target.innerHTML, '<div><p></p></div>');
+
+		widget.show = true;
+		assert.htmlEqual(target.innerHTML, '<div><p>Goodbye</p></div>');
+	}
+};
diff --git a/test/runtime/samples/component-yield-if/main.svelte b/test/runtime/samples/component-yield-if/main.svelte
new file mode 100644
index 0000000000..4e02155a8b
--- /dev/null
+++ b/test/runtime/samples/component-yield-if/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let widget;
+	export let data = "Hello";
+</script>
+
+<div>
+	<Widget bind:this={widget}>{data}</Widget>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-yield-multiple-in-each/Widget.svelte b/test/runtime/samples/component-yield-multiple-in-each/Widget.svelte
new file mode 100644
index 0000000000..18a6961518
--- /dev/null
+++ b/test/runtime/samples/component-yield-multiple-in-each/Widget.svelte
@@ -0,0 +1 @@
+<p><slot></slot></p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-yield-multiple-in-each/_config.js b/test/runtime/samples/component-yield-multiple-in-each/_config.js
new file mode 100644
index 0000000000..153a3a5601
--- /dev/null
+++ b/test/runtime/samples/component-yield-multiple-in-each/_config.js
@@ -0,0 +1,17 @@
+export default {
+	html: `
+		<p>Hello Alice</p>
+		<p>Hello Bob</p>
+		<p>Hello Charles</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.people = [ 'Alice', 'Charles', 'Bob' ];
+
+		assert.htmlEqual( target.innerHTML, `
+			<p>Hello Alice</p>
+			<p>Hello Charles</p>
+			<p>Hello Bob</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-yield-multiple-in-each/main.svelte b/test/runtime/samples/component-yield-multiple-in-each/main.svelte
new file mode 100644
index 0000000000..d41424e9b7
--- /dev/null
+++ b/test/runtime/samples/component-yield-multiple-in-each/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let people = [ 'Alice', 'Bob', 'Charles' ];
+</script>
+
+{#each people as person}
+	<Widget>Hello {person}</Widget>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/component-yield-multiple-in-if/Widget.svelte b/test/runtime/samples/component-yield-multiple-in-if/Widget.svelte
new file mode 100644
index 0000000000..0f4848b8a4
--- /dev/null
+++ b/test/runtime/samples/component-yield-multiple-in-if/Widget.svelte
@@ -0,0 +1 @@
+<p class='widget'><slot></slot></p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-yield-multiple-in-if/_config.js b/test/runtime/samples/component-yield-multiple-in-if/_config.js
new file mode 100644
index 0000000000..7263cc55aa
--- /dev/null
+++ b/test/runtime/samples/component-yield-multiple-in-if/_config.js
@@ -0,0 +1,10 @@
+export default {
+	html: `
+		<div><p class='widget'>Hello</p></div>
+	`,
+
+	test({ assert, component, target }) {
+		component.arriving = false;
+		assert.htmlEqual(target.innerHTML, "<div><p class='widget'>Goodbye</p></div>");
+	}
+};
diff --git a/test/runtime/samples/component-yield-multiple-in-if/main.svelte b/test/runtime/samples/component-yield-multiple-in-if/main.svelte
new file mode 100644
index 0000000000..db518183b5
--- /dev/null
+++ b/test/runtime/samples/component-yield-multiple-in-if/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let arriving = true;
+</script>
+
+<div>
+	{#if arriving}
+		<Widget>Hello</Widget>
+	{:else}
+		<Widget>Goodbye</Widget>
+	{/if}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-yield-nested-if/Inner.svelte b/test/runtime/samples/component-yield-nested-if/Inner.svelte
new file mode 100644
index 0000000000..62120162a9
--- /dev/null
+++ b/test/runtime/samples/component-yield-nested-if/Inner.svelte
@@ -0,0 +1 @@
+Inner
\ No newline at end of file
diff --git a/test/runtime/samples/component-yield-nested-if/Outer.svelte b/test/runtime/samples/component-yield-nested-if/Outer.svelte
new file mode 100644
index 0000000000..637bae0dec
--- /dev/null
+++ b/test/runtime/samples/component-yield-nested-if/Outer.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo;
+</script>
+
+{#if foo}
+	<slot></slot>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/component-yield-nested-if/_config.js b/test/runtime/samples/component-yield-nested-if/_config.js
new file mode 100644
index 0000000000..b46996cea3
--- /dev/null
+++ b/test/runtime/samples/component-yield-nested-if/_config.js
@@ -0,0 +1,14 @@
+export default {
+	html: `
+		One
+		Inner
+	`,
+
+	test({ assert, component, target }) {
+		component.foo = false;
+		assert.htmlEqual( target.innerHTML, '' );
+
+		component.foo = true;
+		assert.htmlEqual( target.innerHTML, 'One\nInner' );
+	}
+};
diff --git a/test/runtime/samples/component-yield-nested-if/main.svelte b/test/runtime/samples/component-yield-nested-if/main.svelte
new file mode 100644
index 0000000000..2107a21ed4
--- /dev/null
+++ b/test/runtime/samples/component-yield-nested-if/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Outer from './Outer.svelte';
+	import Inner from './Inner.svelte';
+
+	export let foo = true;
+</script>
+
+<Outer {foo}>
+	One
+	<Inner/>
+</Outer>
\ No newline at end of file
diff --git a/test/runtime/samples/component-yield-parent/Widget.svelte b/test/runtime/samples/component-yield-parent/Widget.svelte
new file mode 100644
index 0000000000..18a6961518
--- /dev/null
+++ b/test/runtime/samples/component-yield-parent/Widget.svelte
@@ -0,0 +1 @@
+<p><slot></slot></p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-yield-parent/_config.js b/test/runtime/samples/component-yield-parent/_config.js
new file mode 100644
index 0000000000..1340893883
--- /dev/null
+++ b/test/runtime/samples/component-yield-parent/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: `
+		<div><p>Hello</p></div>
+	`,
+
+	test({ assert, component, target }) {
+		assert.equal( component.data, 'Hello' );
+
+		component.data = 'World';
+		assert.equal( component.data, 'World' );
+		assert.htmlEqual( target.innerHTML, `
+			<div><p>World</p></div>
+		` );
+	}
+};
diff --git a/test/runtime/samples/component-yield-parent/main.svelte b/test/runtime/samples/component-yield-parent/main.svelte
new file mode 100644
index 0000000000..8de37236ae
--- /dev/null
+++ b/test/runtime/samples/component-yield-parent/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Widget from './Widget.svelte'
+	export let data = "Hello";
+</script>
+
+<div>
+	<Widget>{data}</Widget>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-yield-placement/Modal.svelte b/test/runtime/samples/component-yield-placement/Modal.svelte
new file mode 100644
index 0000000000..6952837541
--- /dev/null
+++ b/test/runtime/samples/component-yield-placement/Modal.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+	const destroy = () => dispatch('destroy');
+</script>
+
+<div class='modal-background' on:click='{destroy}'></div>
+
+<div class='modal'>
+	<slot></slot>
+	<button on:click='{destroy}'>close modal</button>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/component-yield-placement/_config.js b/test/runtime/samples/component-yield-placement/_config.js
new file mode 100644
index 0000000000..089b3ce752
--- /dev/null
+++ b/test/runtime/samples/component-yield-placement/_config.js
@@ -0,0 +1,25 @@
+export default {
+	props: {
+		showModal: true
+	},
+
+	html: `
+		<div class='modal-background'></div>
+
+		<div class='modal'>
+			<h2>Hello!</h2>
+			<button>close modal</button>
+		</div>
+	`,
+
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>show modal</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-yield-placement/main.svelte b/test/runtime/samples/component-yield-placement/main.svelte
new file mode 100644
index 0000000000..ee1a1221eb
--- /dev/null
+++ b/test/runtime/samples/component-yield-placement/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Modal from './Modal.svelte';
+
+	export let showModal;
+</script>
+
+{#if showModal}
+	<Modal on:destroy='{() => showModal = false}'>
+		<h2>Hello!</h2>
+	</Modal>
+{:else}
+	<button on:click='{() => showModal = true}'>show modal</button>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/component-yield-static/Widget.svelte b/test/runtime/samples/component-yield-static/Widget.svelte
new file mode 100644
index 0000000000..aa6c6abd76
--- /dev/null
+++ b/test/runtime/samples/component-yield-static/Widget.svelte
@@ -0,0 +1 @@
+<b><slot></slot></b>
\ No newline at end of file
diff --git a/test/runtime/samples/component-yield-static/_config.js b/test/runtime/samples/component-yield-static/_config.js
new file mode 100644
index 0000000000..351c604bdd
--- /dev/null
+++ b/test/runtime/samples/component-yield-static/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<b>Hello</b>
+	`,
+
+	test({ assert, component, target }) {
+		component.name = 'World';
+		assert.htmlEqual( target.innerHTML, `
+			<b>Hello</b> World
+		` );
+	}
+};
diff --git a/test/runtime/samples/component-yield-static/main.svelte b/test/runtime/samples/component-yield-static/main.svelte
new file mode 100644
index 0000000000..3e99a8baa9
--- /dev/null
+++ b/test/runtime/samples/component-yield-static/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let name = '';
+</script>
+
+<Widget>Hello</Widget> {name}
\ No newline at end of file
diff --git a/test/runtime/samples/component-yield/_config.js b/test/runtime/samples/component-yield/_config.js
new file mode 100644
index 0000000000..86cb924c9b
--- /dev/null
+++ b/test/runtime/samples/component-yield/_config.js
@@ -0,0 +1,6 @@
+export default {
+	html: `
+		<p>Hello
+
+		</p>`
+};
diff --git a/test/runtime/samples/component-yield/main.svelte b/test/runtime/samples/component-yield/main.svelte
new file mode 100644
index 0000000000..ff1ec93b04
--- /dev/null
+++ b/test/runtime/samples/component-yield/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let test = true;
+</script>
+
+<p>
+	Hello
+	{#if test}
+		<slot></slot>
+	{/if}
+</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component/Widget.svelte b/test/runtime/samples/component/Widget.svelte
new file mode 100644
index 0000000000..9b44ef57a8
--- /dev/null
+++ b/test/runtime/samples/component/Widget.svelte
@@ -0,0 +1 @@
+<p>i am a widget</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component/_config.js b/test/runtime/samples/component/_config.js
new file mode 100644
index 0000000000..d768ccd1c7
--- /dev/null
+++ b/test/runtime/samples/component/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<div><p>i am a widget</p></div>'
+};
diff --git a/test/runtime/samples/component/main.svelte b/test/runtime/samples/component/main.svelte
new file mode 100644
index 0000000000..fb2f332507
--- /dev/null
+++ b/test/runtime/samples/component/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<div>
+	<Widget/>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/const-tag-await-then-destructuring/_config.js b/test/runtime/samples/const-tag-await-then-destructuring/_config.js
new file mode 100644
index 0000000000..cb40e7c456
--- /dev/null
+++ b/test/runtime/samples/const-tag-await-then-destructuring/_config.js
@@ -0,0 +1,19 @@
+export default {
+	html: '<div>12 120 70, 30+4=34</div>',
+	async test({ component, target, assert }) {
+		component.promise1 = Promise.resolve({width: 5, height: 6});
+		component.promise2 = Promise.reject({width: 6, height: 7});
+
+		await Promise.resolve();
+		assert.htmlEqual(target.innerHTML, `
+			<div>30 300 110, 50+6=56</div>
+			<div>42 420 130, 60+7=67</div>
+		`);
+
+		component.constant = 20;
+		assert.htmlEqual(target.innerHTML, `
+			<div>30 600 220, 100+6=106</div>
+			<div>42 840 260, 120+7=127</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-await-then-destructuring/main.svelte b/test/runtime/samples/const-tag-await-then-destructuring/main.svelte
new file mode 100644
index 0000000000..ab450822c6
--- /dev/null
+++ b/test/runtime/samples/const-tag-await-then-destructuring/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	export let promise1 = {width: 3, height: 4};
+	export let promise2 = {width: 5, height: 7};
+	export let constant = 10;
+
+	function calculate(width, height, constant) {
+		return { area: width * height, volume: width * height * constant };
+	}
+</script>
+
+{#await promise1 then { width, height }}
+	{@const {area, volume} = calculate(width, height, constant)}
+	{@const perimeter = (width + height) * constant}
+	{@const [_width, _height, sum] = [width * constant, height, width * constant + height]}
+	<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
+{/await}
+
+{#await promise2 catch { width, height }}
+	{@const {area, volume} = calculate(width, height, constant)}
+	{@const perimeter = (width + height) * constant}
+	{@const [_width, _height, sum] = [width * constant, height, width * constant + height]}
+	<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/const-tag-await-then/_config.js b/test/runtime/samples/const-tag-await-then/_config.js
new file mode 100644
index 0000000000..cb40e7c456
--- /dev/null
+++ b/test/runtime/samples/const-tag-await-then/_config.js
@@ -0,0 +1,19 @@
+export default {
+	html: '<div>12 120 70, 30+4=34</div>',
+	async test({ component, target, assert }) {
+		component.promise1 = Promise.resolve({width: 5, height: 6});
+		component.promise2 = Promise.reject({width: 6, height: 7});
+
+		await Promise.resolve();
+		assert.htmlEqual(target.innerHTML, `
+			<div>30 300 110, 50+6=56</div>
+			<div>42 420 130, 60+7=67</div>
+		`);
+
+		component.constant = 20;
+		assert.htmlEqual(target.innerHTML, `
+			<div>30 600 220, 100+6=106</div>
+			<div>42 840 260, 120+7=127</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-await-then/main.svelte b/test/runtime/samples/const-tag-await-then/main.svelte
new file mode 100644
index 0000000000..f8eed87115
--- /dev/null
+++ b/test/runtime/samples/const-tag-await-then/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	export let promise1 = {width: 3, height: 4};
+	export let promise2 = {width: 5, height: 7};
+	export let constant = 10;
+
+	function calculate(width, height, constant) {
+		return { area: width * height, volume: width * height * constant };
+	}
+</script>
+
+{#await promise1 then box}
+	{@const {area, volume} = calculate(box.width, box.height, constant)}
+	{@const perimeter = (box.width + box.height) * constant}
+	{@const [width, height, sum] = [box.width * constant, box.height, box.width * constant + box.height]}
+	<div>{area} {volume} {perimeter}, {width}+{height}={sum}</div>
+{/await}
+
+{#await promise2 catch box}
+	{@const {area, volume} = calculate(box.width, box.height, constant)}
+	{@const perimeter = (box.width + box.height) * constant}
+	{@const [width, height, sum] = [box.width * constant, box.height, box.width * constant + box.height]}
+	<div>{area} {volume} {perimeter}, {width}+{height}={sum}</div>
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/const-tag-component-without-let/Component.svelte b/test/runtime/samples/const-tag-component-without-let/Component.svelte
new file mode 100644
index 0000000000..e9e76f19b9
--- /dev/null
+++ b/test/runtime/samples/const-tag-component-without-let/Component.svelte
@@ -0,0 +1,2 @@
+<slot name="box1" />
+<slot />
diff --git a/test/runtime/samples/const-tag-component-without-let/_config.js b/test/runtime/samples/const-tag-component-without-let/_config.js
new file mode 100644
index 0000000000..047e034ce9
--- /dev/null
+++ b/test/runtime/samples/const-tag-component-without-let/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: `
+		<div>static dynamic</div>
+		<div>static dynamic</div>
+		<div>static dynamic</div>
+	`,
+	async test({ component, target, assert }) {
+		component.props = 'xxx';
+		assert.htmlEqual(target.innerHTML, `
+			<div>static xxx</div>
+			<div>static xxx</div>
+			<div>static xxx</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-component-without-let/main.svelte b/test/runtime/samples/const-tag-component-without-let/main.svelte
new file mode 100644
index 0000000000..9bee015c98
--- /dev/null
+++ b/test/runtime/samples/const-tag-component-without-let/main.svelte
@@ -0,0 +1,24 @@
+<script>
+	import Component from './Component.svelte';
+	export let props = "dynamic";
+</script>
+
+<Component>
+	<svelte:fragment slot="box1">
+		{@const foo = "static"}
+		{@const bar = props}
+		<div>{foo} {bar}</div>
+	</svelte:fragment>
+
+	<svelte:fragment>
+		{@const foo = "static"}
+		{@const bar = props}
+		<div>{foo} {bar}</div>
+	</svelte:fragment>
+</Component>
+
+<Component>
+	{@const foo = "static"}
+	{@const bar = props}
+	<div>{foo} {bar}</div>
+</Component>
diff --git a/test/runtime/samples/const-tag-component/Component.svelte b/test/runtime/samples/const-tag-component/Component.svelte
new file mode 100644
index 0000000000..68ba82f245
--- /dev/null
+++ b/test/runtime/samples/const-tag-component/Component.svelte
@@ -0,0 +1,7 @@
+<script>
+  export let box;
+</script>
+
+<slot name="box1" {box} />
+<slot name="box2" width={box.width} height={box.height} />
+<slot {box} />
\ No newline at end of file
diff --git a/test/runtime/samples/const-tag-component/_config.js b/test/runtime/samples/const-tag-component/_config.js
new file mode 100644
index 0000000000..66399a06fa
--- /dev/null
+++ b/test/runtime/samples/const-tag-component/_config.js
@@ -0,0 +1,46 @@
+export default {
+	html: `
+		<div>12 120 70, 30+4=34</div>
+		<div>12 120 70, 30+4=34</div>
+		<div>12 120 70, 30+4=34</div>
+		<div slot="box1">
+			<div>12 120 70, 30+4=34</div>
+		</div>
+		<div slot="box2">
+			<div>12 120 70, 30+4=34</div>
+		</div>
+		<div>12 120 70, 30+4=34</div>
+		<div>12 120 70, 30+4=34</div>
+	`,
+	async test({ component, target, assert }) {
+		component.constant = 20;
+		assert.htmlEqual(target.innerHTML, `
+			<div>12 240 140, 60+4=64</div>
+			<div>12 240 140, 60+4=64</div>
+			<div>12 240 140, 60+4=64</div>
+			<div slot="box1">
+				<div>12 240 140, 60+4=64</div>
+			</div>
+			<div slot="box2">
+				<div>12 240 140, 60+4=64</div>
+			</div>
+			<div>12 240 140, 60+4=64</div>
+			<div>12 240 140, 60+4=64</div>
+		`);
+
+		component.box = {width: 5, height: 6};
+		assert.htmlEqual(target.innerHTML, `
+			<div>30 600 220, 100+6=106</div>
+			<div>30 600 220, 100+6=106</div>
+			<div>30 600 220, 100+6=106</div>
+			<div slot="box1">
+				<div>30 600 220, 100+6=106</div>
+			</div>
+			<div slot="box2">
+				<div>30 600 220, 100+6=106</div>
+			</div>
+			<div>30 600 220, 100+6=106</div>
+			<div>30 600 220, 100+6=106</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-component/main.svelte b/test/runtime/samples/const-tag-component/main.svelte
new file mode 100644
index 0000000000..1854c3fba9
--- /dev/null
+++ b/test/runtime/samples/const-tag-component/main.svelte
@@ -0,0 +1,60 @@
+<script>
+	import Component from './Component.svelte';
+	export let box = {width: 3, height: 4};
+	export let constant = 10;
+
+	function calculate(width, height, constant) {
+		return { area: width * height, volume: width * height * constant };
+	}
+</script>
+
+<Component {box}>
+	<svelte:fragment slot="box1" let:box>
+		{@const {area, volume} = calculate(box.width, box.height, constant)}
+		{@const perimeter = (box.width + box.height) * constant}
+		{@const [width, height, sum] = [box.width * constant, box.height, box.width * constant + box.height]}	
+		<div>{area} {volume} {perimeter}, {width}+{height}={sum}</div>
+	</svelte:fragment>
+
+	<svelte:fragment slot="box2" let:width let:height>
+		{@const {area, volume} = calculate(width, height, constant)}
+		{@const perimeter = (width + height) * constant}
+		{@const [_width, _height, sum] = [width * constant, height, width * constant + height]}	
+		<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
+	</svelte:fragment>
+
+	<svelte:fragment let:box={{width, height}}>
+		{@const {area, volume} = calculate(width, height, constant)}
+		{@const perimeter = (width + height) * constant}
+		{@const [_width, _height, sum] = [width * constant, height, width * constant + height]}	
+		<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
+	</svelte:fragment>
+</Component>
+
+<Component {box} let:box>
+	<div slot="box1" let:box>
+		{@const {area, volume} = calculate(box.width, box.height, constant)}
+		{@const perimeter = (box.width + box.height) * constant}
+		{@const [width, height, sum] = [box.width * constant, box.height, box.width * constant + box.height]}	
+		<div>{area} {volume} {perimeter}, {width}+{height}={sum}</div>
+	</div>
+
+	<div slot="box2" let:width let:height>
+		{@const {area, volume} = calculate(width, height, constant)}
+		{@const perimeter = (width + height) * constant}
+		{@const [_width, _height, sum] = [width * constant, height, width * constant + height]}	
+		<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
+	</div>
+
+	{@const {area, volume} = calculate(box.width, box.height, constant)}
+	{@const perimeter = (box.width + box.height) * constant}
+	{@const [width, height, sum] = [box.width * constant, box.height, box.width * constant + box.height]}	
+	<div>{area} {volume} {perimeter}, {width}+{height}={sum}</div>
+</Component>
+
+<Component {box} let:box={{width, height}}>
+	{@const {area, volume} = calculate(width, height, constant)}
+	{@const perimeter = (width + height) * constant}
+	{@const [_width, _height, sum] = [width * constant, height, width * constant + height]}	
+	<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
+</Component>
diff --git a/test/runtime/samples/const-tag-dependencies/_config.js b/test/runtime/samples/const-tag-dependencies/_config.js
new file mode 100644
index 0000000000..5cbb2da587
--- /dev/null
+++ b/test/runtime/samples/const-tag-dependencies/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<div>7</div>
+	`,
+	async test({ component, target, assert }) {
+		component.a = 5;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>9</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-dependencies/main.svelte b/test/runtime/samples/const-tag-dependencies/main.svelte
new file mode 100644
index 0000000000..cce3b0c1f7
--- /dev/null
+++ b/test/runtime/samples/const-tag-dependencies/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let value = 4;
+	export let a = 3;
+	export let b = 4;
+</script>
+
+{#each [value] as n}
+  {@const ab = a + b}
+	<div>{ab}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/const-tag-each-arrow/_config.js b/test/runtime/samples/const-tag-each-arrow/_config.js
new file mode 100644
index 0000000000..8e8036b851
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-arrow/_config.js
@@ -0,0 +1,47 @@
+export default {
+	html: `
+			<p>#FF0000</p>
+			<p>#00FF00</p>
+			<p>#0000FF</p>
+	`,
+	async test({ component, target, assert }) {
+		component.constant = 20;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>#FF0000</p>
+			<p>#00FF00</p>
+			<p>#0000FF</p>
+		`);
+
+		component.tags = [
+			{
+				name: 'Red',
+				color: '#FF0000'
+			},
+			{
+				name: 'Green',
+				color: '#00FF00'
+			},
+			{
+				name: 'Blue',
+				color: '#0000FF'
+			},
+			{
+				name: 'Black',
+				color: '#000000'
+			},
+			{
+				name: 'White',
+				color: '#FFFFFF'
+			}
+		];
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>#FF0000</p>
+			<p>#00FF00</p>
+			<p>#0000FF</p>
+			<p>#000000</p>
+			<p>#FFFFFF</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-each-arrow/main.svelte b/test/runtime/samples/const-tag-each-arrow/main.svelte
new file mode 100644
index 0000000000..7292a7d485
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-arrow/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	export let tags = [
+		{
+			name: 'Red',
+			color: '#FF0000'
+		},
+		{
+			name: 'Green',
+			color: '#00FF00'
+		},
+		{
+			name: 'Blue',
+			color: '#0000FF'
+		}
+	];
+</script>
+
+{#each tags as tag}
+	{@const tagColor = tags.find(t => t.name === tag.name).color}
+	<p>{tagColor}</p>
+{/each}
diff --git a/test/runtime/samples/const-tag-each-const/_config.js b/test/runtime/samples/const-tag-each-const/_config.js
new file mode 100644
index 0000000000..cde4226a25
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-const/_config.js
@@ -0,0 +1,29 @@
+export default {
+	html: `
+			<p>0</p>
+			<p>bar: 1,2,3,1,1,2,3,2, num: 1</p>
+			<p>bar: 0,2,4,1,0,2,4,2, num: 2</p>
+	`,
+	async test({ component, target, assert }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>0</p>
+				<p>bar: 1,2,3,1,1,2,3,2, num: 1</p>
+				<p>bar: 0,2,4,1,0,2,4,2, num: 2</p>
+			`
+		);
+
+		component.nums = [1, 2, 3];
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>0</p>
+				<p>bar: 1,2,3,1,1,2,3,2,1,2,3,3, num: 1</p>
+				<p>bar: 0,2,4,1,0,2,4,2,0,2,4,3, num: 2</p>
+				<p>bar: -100,0,100,1,-100,0,100,2,-100,0,100,3, num: 3</p>
+		`
+		);
+	}
+};
diff --git a/test/runtime/samples/const-tag-each-const/main.svelte b/test/runtime/samples/const-tag-each-const/main.svelte
new file mode 100644
index 0000000000..182ea3cfc6
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-const/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	export let nums = [1, 2];
+	let foos = [
+		{
+			nums: [1, 2, 3],
+		},
+		{
+			nums: [0, 2, 4],
+		},
+		{
+			nums: [-100, 0, 100],
+		},
+	];
+	let foo = 0;
+</script>
+
+<p>{foo}</p>
+{#each nums as num, index}
+	{@const bar = nums.map((num) => {
+		const func = (foos, num) => {
+			return [...foos.map((foo) => foo), num];
+		}
+		return func(foos[index].nums, num);
+	})}
+	<p>bar: {bar}, num: {num}</p>
+{/each}
diff --git a/test/runtime/samples/const-tag-each-destructure/_config.js b/test/runtime/samples/const-tag-each-destructure/_config.js
new file mode 100644
index 0000000000..00f8b31540
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-destructure/_config.js
@@ -0,0 +1,30 @@
+export default {
+	html: `
+		<div>12 120 70, 30+4=34</div>
+		<div>35 350 120, 50+7=57</div>
+		<div>48 480 140, 60+8=68</div>
+	`,
+	async test({ component, target, assert }) {
+		component.constant = 20;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>12 240 140, 60+4=64</div>
+			<div>35 700 240, 100+7=107</div>
+			<div>48 960 280, 120+8=128</div>
+		`);
+
+		component.boxes = [
+			{width: 3, height: 4},
+			{width: 4, height: 5},
+			{width: 5, height: 6},
+			{width: 6, height: 7}
+		];
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>12 240 140, 60+4=64</div>
+			<div>20 400 180, 80+5=85</div>
+			<div>30 600 220, 100+6=106</div>
+			<div>42 840 260, 120+7=127</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-each-destructure/main.svelte b/test/runtime/samples/const-tag-each-destructure/main.svelte
new file mode 100644
index 0000000000..7f0391d5e6
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-destructure/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let boxes = [
+		{width: 3, height: 4},
+		{width: 5, height: 7},
+		{width: 6, height: 8},
+	];
+	export let constant = 10;
+
+	function calculate(width, height, constant) {
+		return { area: width * height, volume: width * height * constant };
+	}
+</script>
+
+{#each boxes as { width, height }}
+	{@const {area, volume} = calculate(width, height, constant)}
+	{@const perimeter = (width + height) * constant}
+	{@const [_width, _height, sum] = [width * constant, height, width * constant + height]}
+	<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/const-tag-each-duplicated-variable1/_config.js b/test/runtime/samples/const-tag-each-duplicated-variable1/_config.js
new file mode 100644
index 0000000000..1f3e5856f2
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-duplicated-variable1/_config.js
@@ -0,0 +1,29 @@
+export default {
+	html: `
+		<p>bar: 1,2,3,0,2,4,-100,0,100, num: 1</p>
+		<p>bar: 1,2,3,0,2,4,-100,0,100, num: 2</p>
+		<p>bar: 1,2,3,0,2,4,-100,0,100, num: 3</p>
+	`,
+	async test({ component, target, assert }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			  <p>bar: 1,2,3,0,2,4,-100,0,100, num: 1</p>
+				<p>bar: 1,2,3,0,2,4,-100,0,100, num: 2</p>
+				<p>bar: 1,2,3,0,2,4,-100,0,100, num: 3</p>
+			`
+		);
+
+		component.nums = [1, 2, 3, 4];
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>bar: 1,2,3,0,2,4,-100,0,100, num: 1</p>
+				<p>bar: 1,2,3,0,2,4,-100,0,100, num: 2</p>
+				<p>bar: 1,2,3,0,2,4,-100,0,100, num: 3</p>
+				<p>bar: 1,2,3,0,2,4,-100,0,100, num: 4</p>
+		`
+		);
+	}
+};
diff --git a/test/runtime/samples/const-tag-each-duplicated-variable1/main.svelte b/test/runtime/samples/const-tag-each-duplicated-variable1/main.svelte
new file mode 100644
index 0000000000..00c53dd4ff
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-duplicated-variable1/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let nums = [1, 2, 3];
+	let foos = [
+		{
+			nums: [1, 2, 3],
+		},
+		{
+			nums: [0, 2, 4],
+		},
+		{
+			nums: [-100, 0, 100],
+		},
+	];
+</script>
+
+{#each nums as num}
+	{@const bar = foos.map((foos) => foos.nums)}
+	<p>bar: {bar}, num: {num}</p>
+{/each}
diff --git a/test/runtime/samples/const-tag-each-duplicated-variable2/_config.js b/test/runtime/samples/const-tag-each-duplicated-variable2/_config.js
new file mode 100644
index 0000000000..16f48218f1
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-duplicated-variable2/_config.js
@@ -0,0 +1,32 @@
+export default {
+	html: `
+	    <p>foo: dummy-foo, num: dummy-num</p>
+		  <p>bar: 1,2,3,2,, num: 1</p>
+			<p>bar: 1,2,3,2,, num: 2</p>
+			<p>bar: 1,2,3,2,, num: 3</p>
+	`,
+	async test({ component, target, assert }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			  <p>foo: dummy-foo, num: dummy-num</p>
+			  <p>bar: 1,2,3,2,, num: 1</p>
+				<p>bar: 1,2,3,2,, num: 2</p>
+				<p>bar: 1,2,3,2,, num: 3</p>
+			`
+		);
+
+		component.nums = [1, 2, 3, 4];
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			  <p>foo: dummy-foo, num: dummy-num</p>
+				<p>bar: 1,2,3,2,4,, num: 1</p>
+				<p>bar: 1,2,3,2,4,, num: 2</p>
+				<p>bar: 1,2,3,2,4,, num: 3</p>
+				<p>bar: 1,2,3,2,4,, num: 4</p>
+		`
+		);
+	}
+};
diff --git a/test/runtime/samples/const-tag-each-duplicated-variable2/main.svelte b/test/runtime/samples/const-tag-each-duplicated-variable2/main.svelte
new file mode 100644
index 0000000000..1f7afd92fd
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-duplicated-variable2/main.svelte
@@ -0,0 +1,33 @@
+<script>
+	export let nums = [1, 2, 3];
+	let foos = [
+		{
+			nums: [1, 2, 3],
+		},
+		{
+			nums: [0, 2, 4],
+		},
+		{
+			nums: [-100, 0, 100],
+		},
+	];
+	let default_nums = [-1];
+	let foo = "dummy-foo";
+	let num = "dummy-num";
+</script>
+
+<p>foo: {foo}, num: {num}</p>
+{#each nums as num}
+	{@const bar = foos.map((foo) =>
+		foo.nums.filter((num) => {
+      if (Object.keys($$slots).length) {
+        return false;
+			} else if (Object.keys(foo).length) {
+				return nums.includes(num) || default_nums.includes(num);
+			} else {
+				return false;
+			}
+		}) || num
+	)}
+	<p>bar: {bar}, num: {num}</p>
+{/each}
diff --git a/test/runtime/samples/const-tag-each-duplicated-variable3/_config.js b/test/runtime/samples/const-tag-each-duplicated-variable3/_config.js
new file mode 100644
index 0000000000..cde4226a25
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-duplicated-variable3/_config.js
@@ -0,0 +1,29 @@
+export default {
+	html: `
+			<p>0</p>
+			<p>bar: 1,2,3,1,1,2,3,2, num: 1</p>
+			<p>bar: 0,2,4,1,0,2,4,2, num: 2</p>
+	`,
+	async test({ component, target, assert }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>0</p>
+				<p>bar: 1,2,3,1,1,2,3,2, num: 1</p>
+				<p>bar: 0,2,4,1,0,2,4,2, num: 2</p>
+			`
+		);
+
+		component.nums = [1, 2, 3];
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>0</p>
+				<p>bar: 1,2,3,1,1,2,3,2,1,2,3,3, num: 1</p>
+				<p>bar: 0,2,4,1,0,2,4,2,0,2,4,3, num: 2</p>
+				<p>bar: -100,0,100,1,-100,0,100,2,-100,0,100,3, num: 3</p>
+		`
+		);
+	}
+};
diff --git a/test/runtime/samples/const-tag-each-duplicated-variable3/main.svelte b/test/runtime/samples/const-tag-each-duplicated-variable3/main.svelte
new file mode 100644
index 0000000000..f559627d23
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-duplicated-variable3/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	export let nums = [1, 2];
+	let foos = [
+		{
+			nums: [1, 2, 3],
+		},
+		{
+			nums: [0, 2, 4],
+		},
+		{
+			nums: [-100, 0, 100],
+		},
+	];
+	let foo = 0;
+</script>
+
+<p>{foo}</p>
+{#each nums as num, index}
+	{@const bar = nums.map((num) => {
+		return (function (foos, num) {
+			return [...foos.map((foo) => foo), num];
+		})(foos[index].nums, num);
+	})}
+	<p>bar: {bar}, num: {num}</p>
+{/each}
diff --git a/test/runtime/samples/const-tag-each-else/_config.js b/test/runtime/samples/const-tag-each-else/_config.js
new file mode 100644
index 0000000000..d95be09ccc
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-else/_config.js
@@ -0,0 +1,26 @@
+export default {
+	html: `
+		<div>12 120 70, 30+4=34</div>
+		<div>35 350 120, 50+7=57</div>
+		<div>48 480 140, 60+8=68</div>
+	`,
+	async test({ component, target, assert }) {
+		component.boxes = [];
+		assert.htmlEqual(target.innerHTML, `
+			<div>10 * 2 = 20</div>
+		`);
+		
+		component.constant = 35;
+		assert.htmlEqual(target.innerHTML, `
+			<div>35 * 2 = 70</div>
+		`);
+
+		component.boxes = [
+			{width: 3, height: 4}
+		];
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>12 420 245, 105+4=109</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-each-else/main.svelte b/test/runtime/samples/const-tag-each-else/main.svelte
new file mode 100644
index 0000000000..7701a579cf
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-else/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	export let boxes = [
+		{width: 3, height: 4},
+		{width: 5, height: 7},
+		{width: 6, height: 8},
+	];
+	export let constant = 10;
+
+	function calculate(width, height, constant) {
+		return { area: width * height, volume: width * height * constant };
+	}
+</script>
+
+{#each boxes as box}
+	{@const {area, volume} = calculate(box.width, box.height, constant)}
+	{@const perimeter = (box.width + box.height) * constant}
+	{@const [width, height, sum] = [box.width * constant, box.height, box.width * constant + box.height]}
+	<div>{area} {volume} {perimeter}, {width}+{height}={sum}</div>
+{:else}
+	{@const double = constant + constant}
+	<div>{constant} * 2 = {double}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/const-tag-each-function/_config.js b/test/runtime/samples/const-tag-each-function/_config.js
new file mode 100644
index 0000000000..cde4226a25
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-function/_config.js
@@ -0,0 +1,29 @@
+export default {
+	html: `
+			<p>0</p>
+			<p>bar: 1,2,3,1,1,2,3,2, num: 1</p>
+			<p>bar: 0,2,4,1,0,2,4,2, num: 2</p>
+	`,
+	async test({ component, target, assert }) {
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>0</p>
+				<p>bar: 1,2,3,1,1,2,3,2, num: 1</p>
+				<p>bar: 0,2,4,1,0,2,4,2, num: 2</p>
+			`
+		);
+
+		component.nums = [1, 2, 3];
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>0</p>
+				<p>bar: 1,2,3,1,1,2,3,2,1,2,3,3, num: 1</p>
+				<p>bar: 0,2,4,1,0,2,4,2,0,2,4,3, num: 2</p>
+				<p>bar: -100,0,100,1,-100,0,100,2,-100,0,100,3, num: 3</p>
+		`
+		);
+	}
+};
diff --git a/test/runtime/samples/const-tag-each-function/main.svelte b/test/runtime/samples/const-tag-each-function/main.svelte
new file mode 100644
index 0000000000..2e027c6620
--- /dev/null
+++ b/test/runtime/samples/const-tag-each-function/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	export let nums = [1, 2];
+	let foos = [
+		{
+			nums: [1, 2, 3],
+		},
+		{
+			nums: [0, 2, 4],
+		},
+		{
+			nums: [-100, 0, 100],
+		},
+	];
+	let foo = 0;
+</script>
+
+<p>{foo}</p>
+{#each nums as num, index}
+	{@const bar = nums.map((num) => {
+		function func(foos, num) {
+			return [...foos.map((foo) => foo), num];
+		}
+		return func(foos[index].nums, num);
+	})}
+	<p>bar: {bar}, num: {num}</p>
+{/each}
diff --git a/test/runtime/samples/const-tag-each/_config.js b/test/runtime/samples/const-tag-each/_config.js
new file mode 100644
index 0000000000..00f8b31540
--- /dev/null
+++ b/test/runtime/samples/const-tag-each/_config.js
@@ -0,0 +1,30 @@
+export default {
+	html: `
+		<div>12 120 70, 30+4=34</div>
+		<div>35 350 120, 50+7=57</div>
+		<div>48 480 140, 60+8=68</div>
+	`,
+	async test({ component, target, assert }) {
+		component.constant = 20;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>12 240 140, 60+4=64</div>
+			<div>35 700 240, 100+7=107</div>
+			<div>48 960 280, 120+8=128</div>
+		`);
+
+		component.boxes = [
+			{width: 3, height: 4},
+			{width: 4, height: 5},
+			{width: 5, height: 6},
+			{width: 6, height: 7}
+		];
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>12 240 140, 60+4=64</div>
+			<div>20 400 180, 80+5=85</div>
+			<div>30 600 220, 100+6=106</div>
+			<div>42 840 260, 120+7=127</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-each/main.svelte b/test/runtime/samples/const-tag-each/main.svelte
new file mode 100644
index 0000000000..004f81cd83
--- /dev/null
+++ b/test/runtime/samples/const-tag-each/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let boxes = [
+		{width: 3, height: 4},
+		{width: 5, height: 7},
+		{width: 6, height: 8},
+	];
+	export let constant = 10;
+
+	function calculate(width, height, constant) {
+		return { area: width * height, volume: width * height * constant };
+	}
+</script>
+
+{#each boxes as box}
+	{@const {area, volume} = calculate(box.width, box.height, constant)}
+	{@const perimeter = (box.width + box.height) * constant}
+	{@const [width, height, sum] = [box.width * constant, box.height, box.width * constant + box.height]}
+	<div>{area} {volume} {perimeter}, {width}+{height}={sum}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/const-tag-hoisting/_config.js b/test/runtime/samples/const-tag-hoisting/_config.js
new file mode 100644
index 0000000000..f8f4a5c85e
--- /dev/null
+++ b/test/runtime/samples/const-tag-hoisting/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<div>4 ^ 4 = 256</div>
+	`,
+	async test({ component, target, assert }) {
+		component.value = 3;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>3 ^ 4 = 81</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-hoisting/main.svelte b/test/runtime/samples/const-tag-hoisting/main.svelte
new file mode 100644
index 0000000000..49fce93274
--- /dev/null
+++ b/test/runtime/samples/const-tag-hoisting/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let value = 4;
+</script>
+
+{#each [value] as n}
+	<div>{n} ^ 4 = {hypercubed}</div>
+
+	{@const squared = n * n}
+	{@const cubed = squared * n}
+	{@const hypercubed = cubed * n}
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/const-tag-if-else-if/_config.js b/test/runtime/samples/const-tag-if-else-if/_config.js
new file mode 100644
index 0000000000..072eb2e44e
--- /dev/null
+++ b/test/runtime/samples/const-tag-if-else-if/_config.js
@@ -0,0 +1,56 @@
+export default {
+	html: `
+		<div>20 x 40</div>
+		<div>20 x 40</div>
+	`,
+	props: {
+		boxes: [{ width: 20, height: 40 }]
+	},
+	async test({ component, target, assert }) {
+		component.boxes = [{ width: 40, height: 70 }];
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>40 x 70</div>
+			<div>40 x 70</div>
+		`
+		);
+		
+		component.boxes = [];
+
+		assert.htmlEqual(target.innerHTML, '');
+
+		component.boxes = [
+			{ width: 20, height: 40 },
+			{ width: 30, height: 50 }
+		];
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+		<div>20 x 40</div>
+		<div>30 x 50</div>
+		<div>20 x 40</div>
+		<div>30 x 50</div>
+		`
+		);
+
+		component.boxes = [
+			{ width: 80, height: 70 },
+			{ width: 90, height: 60 }
+		];
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+		<div>80 x 70</div>
+		<div>90 x 60</div>
+		<div>80 x 70</div>
+		<div>90 x 60</div>
+		`
+		);
+
+		component.boxes = [];
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/const-tag-if-else-if/main.svelte b/test/runtime/samples/const-tag-if-else-if/main.svelte
new file mode 100644
index 0000000000..8188625897
--- /dev/null
+++ b/test/runtime/samples/const-tag-if-else-if/main.svelte
@@ -0,0 +1,24 @@
+<script>
+	export let boxes;
+</script>
+
+{#if boxes.length > 1}
+	{@const box1 = boxes[0]}
+	{@const box2 = boxes[1]}
+	{@const { width, height } = box1}
+	<div>{width} x {height}</div>
+	<div>{box2.width} x {box2.height}</div>
+{:else if boxes.length > 0}
+	{@const box = boxes[0]}
+	{@const { width, height } = box}
+	<div>{width} x {height}</div>
+{/if}
+
+{#if boxes.length > 1}
+	<div>{boxes[0].width} x {boxes[0].height}</div>
+	<div>{boxes[1].width} x {boxes[1].height}</div>
+{:else if boxes.length > 0}
+	{@const box = boxes[0]}
+	{@const { width, height } = box}
+	<div>{width} x {height}</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/const-tag-if-else-outro/_config.js b/test/runtime/samples/const-tag-if-else-outro/_config.js
new file mode 100644
index 0000000000..56c7fc382b
--- /dev/null
+++ b/test/runtime/samples/const-tag-if-else-outro/_config.js
@@ -0,0 +1,57 @@
+export default {
+	html: `
+		<div>20 x 40</div>
+		<div>20 x 40</div>
+	`,
+	props: {
+		boxes: [{ width: 20, height: 40 }]
+	},
+	async test({ component, target, assert, raf }) {
+		component.boxes = [{ width: 40, height: 70 }];
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<div>40 x 70</div>
+			<div>40 x 70</div>
+		`
+		);
+
+		component.boxes = [];
+
+		raf.tick(0);
+		assert.htmlEqual(target.innerHTML, '');
+
+		component.boxes = [
+			{ width: 20, height: 40 },
+			{ width: 30, height: 50 }
+		];
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+		<div>20 x 40</div>
+		<div>30 x 50</div>
+		<div>20 x 40</div>
+		<div>30 x 50</div>
+		`
+		);
+
+		component.boxes = [
+			{ width: 80, height: 70 },
+			{ width: 90, height: 60 }
+		];
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+		<div>80 x 70</div>
+		<div>90 x 60</div>
+		<div>80 x 70</div>
+		<div>90 x 60</div>
+		`
+		);
+
+		component.boxes = [];
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/const-tag-if-else-outro/main.svelte b/test/runtime/samples/const-tag-if-else-outro/main.svelte
new file mode 100644
index 0000000000..90ac27fec1
--- /dev/null
+++ b/test/runtime/samples/const-tag-if-else-outro/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	export let boxes;
+	function fade() {
+		return {
+			duration: 0,
+		}
+	}
+</script>
+
+{#if boxes.length > 1}
+	{@const box1 = boxes[0]}
+	{@const box2 = boxes[1]}
+	{@const { width, height } = box1}
+	<div>{width} x {height}</div>
+	<div>{box2.width} x {box2.height}</div>
+{:else if boxes.length > 0}
+	{@const box = boxes[0]}
+	{@const { width, height } = box}
+	<div out:fade>{width} x {height}</div>
+{/if}
+
+{#if boxes.length > 1}
+	<div>{boxes[0].width} x {boxes[0].height}</div>
+	<div>{boxes[1].width} x {boxes[1].height}</div>
+{:else if boxes.length > 0}
+	{@const box = boxes[0]}
+	{@const { width, height } = box}
+	<div out:fade>{width} x {height}</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/const-tag-if-else/_config.js b/test/runtime/samples/const-tag-if-else/_config.js
new file mode 100644
index 0000000000..13e59bf836
--- /dev/null
+++ b/test/runtime/samples/const-tag-if-else/_config.js
@@ -0,0 +1,43 @@
+export default {
+	html: '<div>20 x 40</div>',
+	props: {
+		boxes: [{ width: 20, height: 40 }]
+	},
+	async test({ component, target, assert }) {
+		component.boxes = [{ width: 30, height: 60 }];
+		
+		assert.htmlEqual(target.innerHTML, `
+		<div>30 x 60</div>
+		`);
+		
+		component.boxes = [
+			{ width: 20, height: 40 },
+			{ width: 30, height: 50 }
+		];
+		
+		assert.htmlEqual(target.innerHTML, `
+		<div>20 x 40</div>
+		<div>30 x 50</div>
+		`);
+
+		component.boxes = [
+			{ width: 80, height: 70 },
+			{ width: 90, height: 60 }
+		];
+		
+		assert.htmlEqual(target.innerHTML, `
+		<div>80 x 70</div>
+		<div>90 x 60</div>
+		`);
+		
+		component.boxes = [
+			{ width: 20, height: 40 },
+			{ width: 30, height: 50 },
+			{ width: 30, height: 50 }
+		];
+		assert.htmlEqual(target.innerHTML, '<div>3</div>');
+		
+		component.boxes = [];
+		assert.htmlEqual(target.innerHTML, '<div>0</div>');
+	}
+};
diff --git a/test/runtime/samples/const-tag-if-else/main.svelte b/test/runtime/samples/const-tag-if-else/main.svelte
new file mode 100644
index 0000000000..1da3d4ea66
--- /dev/null
+++ b/test/runtime/samples/const-tag-if-else/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	export let boxes;
+</script>
+
+{#if boxes.length === 2}
+	{@const box1 = boxes[0]}
+	{@const box2 = boxes[1]}
+	{@const { width, height } = box1}
+	<div>{width} x {height}</div>
+	<div>{box2.width} x {box2.height}</div>
+{:else if boxes.length === 1}
+	{@const box = boxes[0]}
+	{@const { width, height } = box}
+	<div>{width} x {height}</div>
+{:else}
+	{@const length = boxes.length}
+	<div>{length}</div>
+{/if}
diff --git a/test/runtime/samples/const-tag-if/_config.js b/test/runtime/samples/const-tag-if/_config.js
new file mode 100644
index 0000000000..019584d016
--- /dev/null
+++ b/test/runtime/samples/const-tag-if/_config.js
@@ -0,0 +1,28 @@
+export default {
+	html: '<div>10 x 34</div>',
+	props: {
+		boxes: [{ width: 10, height: 34 }]
+	},
+	async test({ component, target, assert }) {
+		component.boxes = [{ width: 20, height: 40 }];
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+		<div>20 x 40</div>
+		`
+		);
+
+		component.boxes = [];
+		assert.htmlEqual(target.innerHTML, '');
+
+		component.boxes = [{ width: 18, height: 48 }];
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+		<div>18 x 48</div>
+		`
+		);
+	}
+};
diff --git a/test/runtime/samples/const-tag-if/main.svelte b/test/runtime/samples/const-tag-if/main.svelte
new file mode 100644
index 0000000000..8f10ceefb8
--- /dev/null
+++ b/test/runtime/samples/const-tag-if/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let boxes;
+</script>
+
+{#if boxes.length > 0}
+	{@const box = boxes[0]}
+	{@const { width, height } = box}
+	<div>{width} x {height}</div>
+{/if}
diff --git a/test/runtime/samples/const-tag-ordering/_config.js b/test/runtime/samples/const-tag-ordering/_config.js
new file mode 100644
index 0000000000..f8f4a5c85e
--- /dev/null
+++ b/test/runtime/samples/const-tag-ordering/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<div>4 ^ 4 = 256</div>
+	`,
+	async test({ component, target, assert }) {
+		component.value = 3;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>3 ^ 4 = 81</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-ordering/main.svelte b/test/runtime/samples/const-tag-ordering/main.svelte
new file mode 100644
index 0000000000..49fce93274
--- /dev/null
+++ b/test/runtime/samples/const-tag-ordering/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let value = 4;
+</script>
+
+{#each [value] as n}
+	<div>{n} ^ 4 = {hypercubed}</div>
+
+	{@const squared = n * n}
+	{@const cubed = squared * n}
+	{@const hypercubed = cubed * n}
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/const-tag-shadow-2/_config.js b/test/runtime/samples/const-tag-shadow-2/_config.js
new file mode 100644
index 0000000000..9ad4aed48c
--- /dev/null
+++ b/test/runtime/samples/const-tag-shadow-2/_config.js
@@ -0,0 +1,37 @@
+export default {
+	html: `
+		<p>1</p>
+		<p>3,6,9</p>
+		<p>2</p>
+		<p>3,6,9</p>
+		<p>3</p>
+		<p>3,6,9</p>
+	`,
+	test({ component, target, assert }) {
+		component.baz = 5;
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>1</p>
+			<p>5,10,15</p>
+			<p>2</p>
+			<p>5,10,15</p>
+			<p>3</p>
+			<p>5,10,15</p>
+		`
+		);
+
+		component.array = [3, 4, 5];
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p>3</p>
+			<p>15,20,25</p>
+			<p>4</p>
+			<p>15,20,25</p>
+			<p>5</p>
+			<p>15,20,25</p>
+		`
+		);
+	}
+};
diff --git a/test/runtime/samples/const-tag-shadow-2/main.svelte b/test/runtime/samples/const-tag-shadow-2/main.svelte
new file mode 100644
index 0000000000..c3bcb2f605
--- /dev/null
+++ b/test/runtime/samples/const-tag-shadow-2/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let array = [1, 2, 3];
+	export let baz = 3;
+	const foo = (item) => item;
+</script>
+
+{#each array as item}
+	<p>{foo(item)}</p>
+	{@const bar = array.map((item) => {
+		const bar = baz;
+		const foo = (item) => item * bar;
+		return foo(item);
+	})}
+	<p>{bar}</p>
+{/each}
diff --git a/test/runtime/samples/const-tag-shadow/_config.js b/test/runtime/samples/const-tag-shadow/_config.js
new file mode 100644
index 0000000000..312235f113
--- /dev/null
+++ b/test/runtime/samples/const-tag-shadow/_config.js
@@ -0,0 +1,43 @@
+export default {
+	html: `
+		<b>7</b>
+		<u>11</u>
+		<u>15</u>
+		<i>7</i>
+		<b>19</b>
+		<u>23</u>
+		<u>27</u>
+		<i>19</i>
+	`,
+	async test({ component, target, assert }) {
+		component.numbers = [
+			{
+				a: 4,
+				b: 5, 
+				children: [
+					{ a: 6, b: 7 },
+					{ a: 8, b: 9 }
+				]
+			},
+			{
+				a: 10,
+				b: 11, 
+				children: [
+					{ a: 12, b: 13 },
+					{ a: 14, b: 15 }
+				]
+			}
+		];
+
+		assert.htmlEqual(target.innerHTML, `
+			<b>9</b>
+			<u>13</u>
+			<u>17</u>
+			<i>9</i>
+			<b>21</b>
+			<u>25</u>
+			<u>29</u>
+			<i>21</i>
+		`);
+	}
+};
diff --git a/test/runtime/samples/const-tag-shadow/main.svelte b/test/runtime/samples/const-tag-shadow/main.svelte
new file mode 100644
index 0000000000..725121c733
--- /dev/null
+++ b/test/runtime/samples/const-tag-shadow/main.svelte
@@ -0,0 +1,31 @@
+<script>
+	export let numbers = [
+		{
+			a: 3,
+			b: 4, 
+			children: [
+				{ a: 5, b: 6 },
+				{ a: 7, b: 8 }
+			]
+		},
+		{
+			a: 9,
+			b: 10, 
+			children: [
+				{ a: 11, b: 12 },
+				{ a: 13, b: 14 }
+			]
+		}
+	];
+
+</script>
+
+{#each numbers as {a, b, children}}
+	{@const ab = a + b}
+	<b>{ab}</b>
+	{#each children as {a, b}}
+		{@const ab = a + b}
+		<u>{ab}</u>
+	{/each}
+	<i>{ab}</i>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/constructor-pass-context/Component.svelte b/test/runtime/samples/constructor-pass-context/Component.svelte
new file mode 100644
index 0000000000..ae27a0d57a
--- /dev/null
+++ b/test/runtime/samples/constructor-pass-context/Component.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { getContext } from 'svelte';
+
+	const value = getContext('key');
+	const fn = getContext('fn');
+</script>
+
+<div>{value}</div>
+<button on:click={() => fn('hello world')} />
\ No newline at end of file
diff --git a/test/runtime/samples/constructor-pass-context/_config.js b/test/runtime/samples/constructor-pass-context/_config.js
new file mode 100644
index 0000000000..02b58f5451
--- /dev/null
+++ b/test/runtime/samples/constructor-pass-context/_config.js
@@ -0,0 +1,32 @@
+export default {
+	async test({ assert, target, window }) {
+		const Component = require('./Component.svelte').default;
+
+		const called = [];
+		const component = new Component({
+			target,
+			context: new Map([
+				['key', 'svelte'],
+				['fn', (value) => called.push(value)]
+			])
+		});
+		assert.htmlEqual(target.innerHTML, '<div>svelte</div><button></button>');
+
+		const button = target.querySelector('button');
+		await button.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.deepEqual(called, ['hello world']);
+
+		component.$destroy();
+	},
+	test_ssr({ assert }) {
+		const Component = require('./Component.svelte').default;
+
+		const called = [];
+		const { html } = Component.render(undefined, { context: new Map([
+			['key', 'svelte'],
+			['fn', (value) => called.push(value)]
+		]) });
+		assert.htmlEqual(html, '<div>svelte</div><button></button>');
+	}
+};
diff --git a/test/runtime/samples/constructor-pass-context/main.svelte b/test/runtime/samples/constructor-pass-context/main.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/test/runtime/samples/constructor-prefer-passed-context/ChildComponent.svelte b/test/runtime/samples/constructor-prefer-passed-context/ChildComponent.svelte
new file mode 100644
index 0000000000..af77418a1f
--- /dev/null
+++ b/test/runtime/samples/constructor-prefer-passed-context/ChildComponent.svelte
@@ -0,0 +1,6 @@
+<script>
+	import { getContext } from 'svelte';
+	const value = getContext('foo');
+</script>
+
+<div>Value in child component: {value}</div>
diff --git a/test/runtime/samples/constructor-prefer-passed-context/_config.js b/test/runtime/samples/constructor-prefer-passed-context/_config.js
new file mode 100644
index 0000000000..5d5cf9e44a
--- /dev/null
+++ b/test/runtime/samples/constructor-prefer-passed-context/_config.js
@@ -0,0 +1,6 @@
+export default {
+	skip_if_ssr: true,
+	html: `
+		<div><div>Value in child component: undefined</div></div>
+	`
+};
diff --git a/test/runtime/samples/constructor-prefer-passed-context/main.svelte b/test/runtime/samples/constructor-prefer-passed-context/main.svelte
new file mode 100644
index 0000000000..dd051a123a
--- /dev/null
+++ b/test/runtime/samples/constructor-prefer-passed-context/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { setContext } from 'svelte';
+	import ChildComponent from './ChildComponent.svelte';
+
+	setContext('foo', true);
+
+	function render(node) {
+		new ChildComponent({
+			target: node,
+			context: new Map()
+		});
+	}
+</script>
+
+<div use:render />
diff --git a/test/runtime/samples/context-api-b/Leaf.svelte b/test/runtime/samples/context-api-b/Leaf.svelte
new file mode 100644
index 0000000000..0e6e1f34a5
--- /dev/null
+++ b/test/runtime/samples/context-api-b/Leaf.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { getContext } from 'svelte';
+	import { ID } from './Nested.svelte';
+
+	const name = getContext('test');
+</script>
+
+<div>{name}</div>
\ No newline at end of file
diff --git a/test/runtime/samples/context-api-b/Nested.svelte b/test/runtime/samples/context-api-b/Nested.svelte
new file mode 100644
index 0000000000..d7f709133f
--- /dev/null
+++ b/test/runtime/samples/context-api-b/Nested.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { getContext, setContext } from 'svelte';
+
+	export let name = '';
+
+	const parentName = getContext('test');
+	setContext('test', parentName ? parentName + '/' + name : name);
+</script>
+
+<slot></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/context-api-b/_config.js b/test/runtime/samples/context-api-b/_config.js
new file mode 100644
index 0000000000..314fd9f481
--- /dev/null
+++ b/test/runtime/samples/context-api-b/_config.js
@@ -0,0 +1,6 @@
+export default {
+	html: `
+		<div>foo/bar</div>
+		<div>foo/baz</div>
+	`
+};
diff --git a/test/runtime/samples/context-api-b/main.svelte b/test/runtime/samples/context-api-b/main.svelte
new file mode 100644
index 0000000000..ddad5267f7
--- /dev/null
+++ b/test/runtime/samples/context-api-b/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Nested from './Nested.svelte';
+	import Leaf from './Leaf.svelte';
+</script>
+
+<Nested name='foo'>
+	<Nested name='bar'>
+		<Leaf/>
+	</Nested>
+	<Nested name='baz'>
+		<Leaf/>
+	</Nested>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/context-api-c/Leaf.svelte b/test/runtime/samples/context-api-c/Leaf.svelte
new file mode 100644
index 0000000000..ae61ba063c
--- /dev/null
+++ b/test/runtime/samples/context-api-c/Leaf.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { hasContext } from 'svelte';
+
+	const has = hasContext('test');
+</script>
+
+<div>{has}</div>
\ No newline at end of file
diff --git a/test/runtime/samples/context-api-c/Nested.svelte b/test/runtime/samples/context-api-c/Nested.svelte
new file mode 100644
index 0000000000..775d55d8f1
--- /dev/null
+++ b/test/runtime/samples/context-api-c/Nested.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { setContext } from 'svelte';
+
+	export let value = '';
+
+	if (value) {
+		setContext('test', value);
+	}
+</script>
+
+<slot></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/context-api-c/_config.js b/test/runtime/samples/context-api-c/_config.js
new file mode 100644
index 0000000000..0041359a7f
--- /dev/null
+++ b/test/runtime/samples/context-api-c/_config.js
@@ -0,0 +1,6 @@
+export default {
+	html: `
+		<div>true</div>
+		<div>false</div>
+	`
+};
diff --git a/test/runtime/samples/context-api-c/main.svelte b/test/runtime/samples/context-api-c/main.svelte
new file mode 100644
index 0000000000..03ff1ae6eb
--- /dev/null
+++ b/test/runtime/samples/context-api-c/main.svelte
@@ -0,0 +1,12 @@
+<script>
+  import Nested from "./Nested.svelte";
+  import Leaf from "./Leaf.svelte";
+</script>
+
+<Nested value="bar">
+  <Leaf />
+</Nested>
+
+<Nested>
+  <Leaf />
+</Nested>
diff --git a/test/runtime/samples/context-api-d/Leaf.svelte b/test/runtime/samples/context-api-d/Leaf.svelte
new file mode 100644
index 0000000000..02b6b26e00
--- /dev/null
+++ b/test/runtime/samples/context-api-d/Leaf.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { getAllContexts } from 'svelte';
+
+	const context = getAllContexts();
+</script>
+
+{#each [...context.keys()] as key}
+	<div>{key}: {context.get(key)}</div>
+{/each}
diff --git a/test/runtime/samples/context-api-d/Nested.svelte b/test/runtime/samples/context-api-d/Nested.svelte
new file mode 100644
index 0000000000..e8a7e083c3
--- /dev/null
+++ b/test/runtime/samples/context-api-d/Nested.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { setContext } from 'svelte';
+  setContext('a', 1);
+  setContext('b', 2);
+  setContext('c', 3);
+</script>
+
+<slot></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/context-api-d/_config.js b/test/runtime/samples/context-api-d/_config.js
new file mode 100644
index 0000000000..a5b0769f8b
--- /dev/null
+++ b/test/runtime/samples/context-api-d/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: `
+		<div>a: 1</div>
+		<div>b: 2</div>
+		<div>c: 3</div>
+	`
+};
diff --git a/test/runtime/samples/context-api-d/main.svelte b/test/runtime/samples/context-api-d/main.svelte
new file mode 100644
index 0000000000..82d1021574
--- /dev/null
+++ b/test/runtime/samples/context-api-d/main.svelte
@@ -0,0 +1,8 @@
+<script>
+  import Nested from './Nested.svelte';
+  import Leaf from './Leaf.svelte';
+</script>
+
+<Nested>
+  <Leaf />
+</Nested>
diff --git a/test/runtime/samples/context-api/Tab.svelte b/test/runtime/samples/context-api/Tab.svelte
new file mode 100644
index 0000000000..af3f002521
--- /dev/null
+++ b/test/runtime/samples/context-api/Tab.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { getContext, onDestroy } from 'svelte';
+	import { TABS } from './Tabs.svelte';
+
+	const tab = {};
+	const { registerTab, unregisterTab, selectTab, selectedTab } = getContext(TABS);
+
+	registerTab(tab);
+
+	onDestroy(() => {
+		unregisterTab(tab);
+	});
+</script>
+
+<button class:selected="{$selectedTab === tab}" on:click="{() => selectTab(tab)}">
+	<slot></slot>
+</button>
\ No newline at end of file
diff --git a/test/runtime/samples/context-api/TabList.svelte b/test/runtime/samples/context-api/TabList.svelte
new file mode 100644
index 0000000000..08c86216ae
--- /dev/null
+++ b/test/runtime/samples/context-api/TabList.svelte
@@ -0,0 +1,3 @@
+<div class="tab-list">
+	<slot></slot>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/context-api/TabPanel.svelte b/test/runtime/samples/context-api/TabPanel.svelte
new file mode 100644
index 0000000000..a506ba9c07
--- /dev/null
+++ b/test/runtime/samples/context-api/TabPanel.svelte
@@ -0,0 +1,16 @@
+<script>
+	import { getContext, onDestroy } from 'svelte';
+	import { TABS } from './Tabs.svelte';
+
+	const panel = {};
+	const { registerPanel, unregisterPanel, selectedPanel } = getContext(TABS);
+	registerPanel(panel);
+
+	onDestroy(() => {
+		unregisterPanel(panel);
+	});
+</script>
+
+{#if $selectedPanel === panel}
+	<slot></slot>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/context-api/Tabs.svelte b/test/runtime/samples/context-api/Tabs.svelte
new file mode 100644
index 0000000000..6692bb31e9
--- /dev/null
+++ b/test/runtime/samples/context-api/Tabs.svelte
@@ -0,0 +1,52 @@
+
+
+<script context="module">
+	export const TABS = {};
+</script>
+
+<script>
+	import { setContext } from 'svelte';
+	import { writable } from 'svelte/store';
+
+	const tabs = [];
+	const panels = [];
+	const selectedTab = writable(null);
+	const selectedPanel = writable(null);
+
+	setContext(TABS, {
+		registerTab: tab => {
+			tabs.push(tab);
+			selectedTab.update(current => current || tab);
+		},
+
+		unregisterTab: tab => {
+			const i = tabs.indexOf(tab);
+			tabs.splice(i, 1);
+			selectedTab.update(current => current === tab ? (tabs[i] || tabs[tabs.length - 1]) : current);
+		},
+
+		registerPanel: panel => {
+			panels.push(panel);
+			selectedPanel.update(current => current || panel);
+		},
+
+		unregisterPanel: panel => {
+			const i = panels.indexOf(panel);
+			panels.splice(i, 1);
+			selectedPanel.update(current => current === panel ? (panels[i] || panels[panels.length - 1]) : current);
+		},
+
+		selectTab: tab => {
+			const i = tabs.indexOf(tab);
+			selectedTab.set(tab);
+			selectedPanel.set(panels[i]);
+		},
+
+		selectedTab,
+		selectedPanel
+	});
+</script>
+
+<div class="tabs">
+	<slot></slot>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/context-api/_config.js b/test/runtime/samples/context-api/_config.js
new file mode 100644
index 0000000000..3856aa5424
--- /dev/null
+++ b/test/runtime/samples/context-api/_config.js
@@ -0,0 +1,73 @@
+export default {
+	html: `
+		<div class="tabs">
+			<div class="tab-list">
+				<button class="selected">small</button>
+				<button>large</button>
+			</div>
+
+			<h2>Small panel</h2>
+		</div>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const click = new window.MouseEvent('click');
+		let buttons = target.querySelectorAll('button');
+
+		await buttons[1].dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div class="tabs">
+				<div class="tab-list">
+					<button class="">small</button>
+					<button class="selected">large</button>
+				</div>
+
+				<h2>Large panel</h2>
+			</div>
+		`);
+
+		component.show_medium = true;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div class="tabs">
+				<div class="tab-list">
+					<button class="">small</button>
+					<button>medium</button>
+					<button class="selected">large</button>
+				</div>
+
+				<h2>Large panel</h2>
+			</div>
+		`);
+
+		buttons = target.querySelectorAll('button');
+
+		await buttons[1].dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div class="tabs">
+				<div class="tab-list">
+					<button class="">small</button>
+					<button class="selected">medium</button>
+					<button class="">large</button>
+				</div>
+
+				<h2>Medium panel</h2>
+			</div>
+		`);
+
+		component.show_medium = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div class="tabs">
+				<div class="tab-list">
+					<button class="">small</button>
+					<button class="selected">large</button>
+				</div>
+
+				<h2>Large panel</h2>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/context-api/main.svelte b/test/runtime/samples/context-api/main.svelte
new file mode 100644
index 0000000000..5d569a2125
--- /dev/null
+++ b/test/runtime/samples/context-api/main.svelte
@@ -0,0 +1,30 @@
+<script>
+	import Tabs from './Tabs.svelte';
+	import TabList from './TabList.svelte';
+	import Tab from './Tab.svelte';
+	import TabPanel from './TabPanel.svelte';
+
+	export let show_medium = false;
+</script>
+
+<Tabs>
+	<TabList>
+		<Tab>small</Tab>
+		{#if show_medium}<Tab>medium</Tab>{/if}
+		<Tab>large</Tab>
+	</TabList>
+
+	<TabPanel>
+		<h2>Small panel</h2>
+	</TabPanel>
+
+	{#if show_medium}
+		<TabPanel>
+			<h2>Medium panel</h2>
+		</TabPanel>
+	{/if}
+
+	<TabPanel>
+		<h2>Large panel</h2>
+	</TabPanel>
+</Tabs>
\ No newline at end of file
diff --git a/test/runtime/samples/context-in-await/Child.svelte b/test/runtime/samples/context-in-await/Child.svelte
new file mode 100644
index 0000000000..1227c2857d
--- /dev/null
+++ b/test/runtime/samples/context-in-await/Child.svelte
@@ -0,0 +1,6 @@
+<script>
+	import { getContext } from 'svelte';
+	const num = getContext('test');
+</script>
+
+<p>Context value: {num}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/context-in-await/_config.js b/test/runtime/samples/context-in-await/_config.js
new file mode 100644
index 0000000000..fc498a36c2
--- /dev/null
+++ b/test/runtime/samples/context-in-await/_config.js
@@ -0,0 +1,13 @@
+export default {
+	html: `
+		<p>...waiting</p>
+	`,
+
+	async test({ assert, component, target }) {
+		await component.promise;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Context value: 123</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/context-in-await/main.svelte b/test/runtime/samples/context-in-await/main.svelte
new file mode 100644
index 0000000000..4f251f0870
--- /dev/null
+++ b/test/runtime/samples/context-in-await/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { setContext } from 'svelte';
+	import Child from './Child.svelte';
+
+	setContext('test', 123);
+
+	export let promise = Promise.resolve();
+</script>
+
+{#await promise}
+	<p>...waiting</p>
+{:then}
+	<Child />
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/context-setcontext-return/_config.js b/test/runtime/samples/context-setcontext-return/_config.js
new file mode 100644
index 0000000000..28a78f1359
--- /dev/null
+++ b/test/runtime/samples/context-setcontext-return/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<div>true</div>
+	`
+};
diff --git a/test/runtime/samples/context-setcontext-return/main.svelte b/test/runtime/samples/context-setcontext-return/main.svelte
new file mode 100644
index 0000000000..87153ee846
--- /dev/null
+++ b/test/runtime/samples/context-setcontext-return/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { setContext } from 'svelte';
+	const a = {};
+	const b = setContext('foo', a);
+</script>
+
+<div>{a === b}</div>
diff --git a/test/runtime/samples/contextual-callback-b/_config.js b/test/runtime/samples/contextual-callback-b/_config.js
new file mode 100644
index 0000000000..f2ed7f5f59
--- /dev/null
+++ b/test/runtime/samples/contextual-callback-b/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<select>
+			<option value="">please choose</option>
+			<option value="1">1</option>
+			<option disabled="" value="2">2</option>
+			<option value="3">3</option>
+			<option disabled="" value="4">4</option>
+			<option value="5">5</option>
+		</select>
+	`
+};
diff --git a/test/runtime/samples/contextual-callback-b/main.svelte b/test/runtime/samples/contextual-callback-b/main.svelte
new file mode 100644
index 0000000000..0010c01fc4
--- /dev/null
+++ b/test/runtime/samples/contextual-callback-b/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	let available = [1, 2, 3, 4, 5];
+	let taken = [2, 4];
+</script>
+
+<select>
+	<option value="">please choose</option>
+	{#each available as a}
+		<option disabled="{!!taken.find(f => f == a)}" value="{a}">{a}</option>
+	{/each}
+</select>
diff --git a/test/runtime/samples/contextual-callback/Widget.svelte b/test/runtime/samples/contextual-callback/Widget.svelte
new file mode 100644
index 0000000000..283208ccf9
--- /dev/null
+++ b/test/runtime/samples/contextual-callback/Widget.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let handleClick;
+</script>
+
+<button on:click={handleClick}>
+	click me
+</button>
\ No newline at end of file
diff --git a/test/runtime/samples/contextual-callback/_config.js b/test/runtime/samples/contextual-callback/_config.js
new file mode 100644
index 0000000000..b27a7fc868
--- /dev/null
+++ b/test/runtime/samples/contextual-callback/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: '<button>click me</button>',
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+
+		assert.equal(component.clicked, 'x');
+	}
+};
diff --git a/test/runtime/samples/contextual-callback/main.svelte b/test/runtime/samples/contextual-callback/main.svelte
new file mode 100644
index 0000000000..1ae9f8aee8
--- /dev/null
+++ b/test/runtime/samples/contextual-callback/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let clicked;
+</script>
+
+{#each ['x'] as letter}
+	<Widget handleClick="{() => clicked = letter}"/>
+{/each}
diff --git a/test/runtime/samples/css-comments/_config.js b/test/runtime/samples/css-comments/_config.js
new file mode 100644
index 0000000000..baf571fcd1
--- /dev/null
+++ b/test/runtime/samples/css-comments/_config.js
@@ -0,0 +1,7 @@
+// JSDOM makes this test pass when it should fail. weird
+export default {
+	test({ assert, target, window }) {
+		const p = target.querySelector( 'p' );
+		assert.equal( window.getComputedStyle( p ).color, 'red' );
+	}
+};
diff --git a/test/runtime/samples/css-comments/main.svelte b/test/runtime/samples/css-comments/main.svelte
new file mode 100644
index 0000000000..008cbae63e
--- /dev/null
+++ b/test/runtime/samples/css-comments/main.svelte
@@ -0,0 +1,11 @@
+<p>red</p>
+
+<style>
+	/*
+		div {}
+	*/
+
+	p {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/runtime/samples/css-false/Widget.svelte b/test/runtime/samples/css-false/Widget.svelte
new file mode 100644
index 0000000000..da7fd4e8b7
--- /dev/null
+++ b/test/runtime/samples/css-false/Widget.svelte
@@ -0,0 +1,7 @@
+<p>test</p>
+
+<style>
+	p {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/runtime/samples/css-false/_config.js b/test/runtime/samples/css-false/_config.js
new file mode 100644
index 0000000000..320efce35b
--- /dev/null
+++ b/test/runtime/samples/css-false/_config.js
@@ -0,0 +1,12 @@
+export default {
+	compileOptions: {
+		css: false
+	},
+
+	test({ assert, target, window }) {
+		const [ control, test ] = target.querySelectorAll( 'p' );
+
+		assert.equal( window.getComputedStyle( control ).color, '' );
+		assert.equal( window.getComputedStyle( test ).color, '' );
+	}
+};
diff --git a/test/runtime/samples/css-false/main.svelte b/test/runtime/samples/css-false/main.svelte
new file mode 100644
index 0000000000..5129d127ba
--- /dev/null
+++ b/test/runtime/samples/css-false/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<p>control</p>
+<Widget/>
\ No newline at end of file
diff --git a/test/runtime/samples/css-space-in-attribute/Widget.svelte b/test/runtime/samples/css-space-in-attribute/Widget.svelte
new file mode 100644
index 0000000000..b812ed8816
--- /dev/null
+++ b/test/runtime/samples/css-space-in-attribute/Widget.svelte
@@ -0,0 +1,11 @@
+<p class='foo bar'>red on black</p>
+
+<style>
+	.foo {
+		color: red;
+	}
+
+	[class*=" bar"] {
+		background: black;
+	}
+</style>
\ No newline at end of file
diff --git a/test/runtime/samples/css-space-in-attribute/_config.js b/test/runtime/samples/css-space-in-attribute/_config.js
new file mode 100644
index 0000000000..c88f72cafa
--- /dev/null
+++ b/test/runtime/samples/css-space-in-attribute/_config.js
@@ -0,0 +1,11 @@
+export default {
+	test({ assert, target, window }) {
+		const [ control, test ] = target.querySelectorAll( 'p' );
+
+		assert.equal( window.getComputedStyle( control ).color, '' );
+		assert.equal( window.getComputedStyle( control ).backgroundColor, '' );
+
+		assert.equal( window.getComputedStyle( test ).color, 'red' );
+		assert.equal( window.getComputedStyle( test ).backgroundColor, 'black' );
+	}
+};
diff --git a/test/runtime/samples/css-space-in-attribute/main.svelte b/test/runtime/samples/css-space-in-attribute/main.svelte
new file mode 100644
index 0000000000..e23e6c4e40
--- /dev/null
+++ b/test/runtime/samples/css-space-in-attribute/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<p class='foo bar'>control</p>
+<Widget/>
\ No newline at end of file
diff --git a/test/runtime/samples/css/Widget.svelte b/test/runtime/samples/css/Widget.svelte
new file mode 100644
index 0000000000..43328db0fd
--- /dev/null
+++ b/test/runtime/samples/css/Widget.svelte
@@ -0,0 +1,7 @@
+<p>test</p>
+
+<style>
+	p {
+		color: #f00;
+	}
+</style>
\ No newline at end of file
diff --git a/test/runtime/samples/css/_config.js b/test/runtime/samples/css/_config.js
new file mode 100644
index 0000000000..6119af94de
--- /dev/null
+++ b/test/runtime/samples/css/_config.js
@@ -0,0 +1,8 @@
+export default {
+	test({ assert, target, window }) {
+		const [control, test] = target.querySelectorAll('p');
+
+		assert.equal(window.getComputedStyle(control).color, '');
+		assert.equal(window.getComputedStyle(test).color, 'rgb(255, 0, 0)');
+	}
+};
diff --git a/test/runtime/samples/css/main.svelte b/test/runtime/samples/css/main.svelte
new file mode 100644
index 0000000000..5129d127ba
--- /dev/null
+++ b/test/runtime/samples/css/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<p>control</p>
+<Widget/>
\ No newline at end of file
diff --git a/test/runtime/samples/custom-method/_config.js b/test/runtime/samples/custom-method/_config.js
new file mode 100644
index 0000000000..debaa15a66
--- /dev/null
+++ b/test/runtime/samples/custom-method/_config.js
@@ -0,0 +1,27 @@
+export default {
+	html: `
+		<button>+1</button>
+		<p>0</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+		assert.equal(component.counter, 1);
+		assert.htmlEqual(target.innerHTML, `
+			<button>+1</button>
+			<p>1</p>
+		`);
+
+		await button.dispatchEvent(event);
+		assert.equal(component.counter, 2);
+		assert.htmlEqual(target.innerHTML, `
+			<button>+1</button>
+			<p>2</p>
+		`);
+
+		assert.equal(component.foo(), 42);
+	}
+};
diff --git a/test/runtime/samples/custom-method/main.svelte b/test/runtime/samples/custom-method/main.svelte
new file mode 100644
index 0000000000..cd1f4ec454
--- /dev/null
+++ b/test/runtime/samples/custom-method/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let counter = 0;
+
+	function add1() {
+		counter += 1;
+	}
+
+	export function foo() {
+		return 42;
+	}
+</script>
+
+<button on:click='{add1}'>+1</button>
+
+<p>{counter}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/deconflict-anchor/Anchor.svelte b/test/runtime/samples/deconflict-anchor/Anchor.svelte
new file mode 100644
index 0000000000..e758d60056
--- /dev/null
+++ b/test/runtime/samples/deconflict-anchor/Anchor.svelte
@@ -0,0 +1 @@
+<p>Anchor</p>
diff --git a/test/runtime/samples/deconflict-anchor/_config.js b/test/runtime/samples/deconflict-anchor/_config.js
new file mode 100644
index 0000000000..323cb7530a
--- /dev/null
+++ b/test/runtime/samples/deconflict-anchor/_config.js
@@ -0,0 +1,4 @@
+export default {
+	preserveIdentifiers: true,
+	html: '<p>Anchor</p>'
+};
diff --git a/test/runtime/samples/deconflict-anchor/main.svelte b/test/runtime/samples/deconflict-anchor/main.svelte
new file mode 100644
index 0000000000..cce6281e49
--- /dev/null
+++ b/test/runtime/samples/deconflict-anchor/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Anchor from './Anchor.svelte';
+</script>
+
+<Anchor/>
diff --git a/test/runtime/samples/deconflict-block-methods/_config.js b/test/runtime/samples/deconflict-block-methods/_config.js
new file mode 100644
index 0000000000..07c699df4d
--- /dev/null
+++ b/test/runtime/samples/deconflict-block-methods/_config.js
@@ -0,0 +1,6 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+	html: '<div>deconflicted</div>'
+};
diff --git a/test/runtime/samples/deconflict-block-methods/main.svelte b/test/runtime/samples/deconflict-block-methods/main.svelte
new file mode 100644
index 0000000000..ad75488873
--- /dev/null
+++ b/test/runtime/samples/deconflict-block-methods/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	const create = 'deconflicted';
+</script>
+
+<div>{create}</div>
diff --git a/test/runtime/samples/deconflict-builtins-2/_config.js b/test/runtime/samples/deconflict-builtins-2/_config.js
new file mode 100644
index 0000000000..fba811b880
--- /dev/null
+++ b/test/runtime/samples/deconflict-builtins-2/_config.js
@@ -0,0 +1,4 @@
+export default {
+	html: '<svg><text>hello world</text></svg>',
+	preserveIdentifiers: true
+};
diff --git a/test/runtime/samples/deconflict-builtins-2/main.svelte b/test/runtime/samples/deconflict-builtins-2/main.svelte
new file mode 100644
index 0000000000..db10a81c74
--- /dev/null
+++ b/test/runtime/samples/deconflict-builtins-2/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	let foo = 'hello world'
+</script>
+<svg>
+	<text>{foo}</text>
+</svg>
\ No newline at end of file
diff --git a/test/runtime/samples/deconflict-builtins/_config.js b/test/runtime/samples/deconflict-builtins/_config.js
new file mode 100644
index 0000000000..3751bfc25d
--- /dev/null
+++ b/test/runtime/samples/deconflict-builtins/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: '<span>got</span>',
+
+	test({ assert, component }) {
+		assert.equal(component.foo, 'got');
+	}
+};
diff --git a/test/runtime/samples/deconflict-builtins/get.js b/test/runtime/samples/deconflict-builtins/get.js
new file mode 100644
index 0000000000..78477cc40f
--- /dev/null
+++ b/test/runtime/samples/deconflict-builtins/get.js
@@ -0,0 +1,3 @@
+export function get () {
+	return 'got';
+}
diff --git a/test/runtime/samples/deconflict-builtins/main.svelte b/test/runtime/samples/deconflict-builtins/main.svelte
new file mode 100644
index 0000000000..7196d3eb5e
--- /dev/null
+++ b/test/runtime/samples/deconflict-builtins/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { get } from './get.js';
+
+	export let foo = get();
+</script>
+
+<span>{foo}</span>
\ No newline at end of file
diff --git a/test/runtime/samples/deconflict-component-name-with-global/_config.js b/test/runtime/samples/deconflict-component-name-with-global/_config.js
new file mode 100644
index 0000000000..214483fc58
--- /dev/null
+++ b/test/runtime/samples/deconflict-component-name-with-global/_config.js
@@ -0,0 +1,9 @@
+export default {
+	compileOptions: {
+		name: 'Set'
+	},
+
+	preserveIdentifiers: true,
+
+	html: '<p>true</p>'
+};
diff --git a/test/runtime/samples/deconflict-component-name-with-global/main.svelte b/test/runtime/samples/deconflict-component-name-with-global/main.svelte
new file mode 100644
index 0000000000..e5cc140b7a
--- /dev/null
+++ b/test/runtime/samples/deconflict-component-name-with-global/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	let set = new Set(['x']);
+</script>
+
+<p>{set.has('x')}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/deconflict-component-name-with-module-global/_config.js b/test/runtime/samples/deconflict-component-name-with-module-global/_config.js
new file mode 100644
index 0000000000..214483fc58
--- /dev/null
+++ b/test/runtime/samples/deconflict-component-name-with-module-global/_config.js
@@ -0,0 +1,9 @@
+export default {
+	compileOptions: {
+		name: 'Set'
+	},
+
+	preserveIdentifiers: true,
+
+	html: '<p>true</p>'
+};
diff --git a/test/runtime/samples/deconflict-component-name-with-module-global/main.svelte b/test/runtime/samples/deconflict-component-name-with-module-global/main.svelte
new file mode 100644
index 0000000000..a14f3e7a1e
--- /dev/null
+++ b/test/runtime/samples/deconflict-component-name-with-module-global/main.svelte
@@ -0,0 +1,5 @@
+<script context="module">
+	let set = new Set(['x']);
+</script>
+
+<p>{set.has('x')}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/deconflict-component-refs/_config.js b/test/runtime/samples/deconflict-component-refs/_config.js
new file mode 100644
index 0000000000..992066d1e6
--- /dev/null
+++ b/test/runtime/samples/deconflict-component-refs/_config.js
@@ -0,0 +1,25 @@
+export default {
+	html: `
+		<ul>
+			<li><input></li>
+			<li>bar</li>
+			<li>baz</li>
+		</ul>
+	`,
+
+	ssrHtml: `
+		<ul>
+			<li><input value=foo></li>
+			<li>bar</li>
+			<li>baz</li>
+		</ul>
+	`,
+
+	props: {
+		components: [
+			{ name: 'foo', edit: true },
+			{ name: 'bar', edit: false },
+			{ name: 'baz', edit: false }
+		]
+	}
+};
diff --git a/test/runtime/samples/deconflict-component-refs/main.svelte b/test/runtime/samples/deconflict-component-refs/main.svelte
new file mode 100644
index 0000000000..3f19098676
--- /dev/null
+++ b/test/runtime/samples/deconflict-component-refs/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let components;
+	let name;
+</script>
+
+<ul>
+	{#each components as component}
+		<li>
+			{#if component.edit}
+				<input bind:this={name} bind:value={component.name} />
+			{:else}
+				{component.name}
+			{/if}
+		</li>
+	{/each}
+</ul>
\ No newline at end of file
diff --git a/test/runtime/samples/deconflict-contexts/_config.js b/test/runtime/samples/deconflict-contexts/_config.js
new file mode 100644
index 0000000000..5254655d89
--- /dev/null
+++ b/test/runtime/samples/deconflict-contexts/_config.js
@@ -0,0 +1,9 @@
+export default {
+	html: `
+		<ul><li>foo</li><li>bar</li><li>baz</li></ul>
+	`,
+
+	props: {
+		components: [ 'foo', 'bar', 'baz' ]
+	}
+};
diff --git a/test/runtime/samples/deconflict-contexts/main.svelte b/test/runtime/samples/deconflict-contexts/main.svelte
new file mode 100644
index 0000000000..f971a01cf8
--- /dev/null
+++ b/test/runtime/samples/deconflict-contexts/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let components;
+</script>
+
+<ul>
+	{#each components as component}
+		<li>{component}</li>
+	{/each}
+</ul>
\ No newline at end of file
diff --git a/test/runtime/samples/deconflict-contextual-action/_config.js b/test/runtime/samples/deconflict-contextual-action/_config.js
new file mode 100644
index 0000000000..542ec2fe08
--- /dev/null
+++ b/test/runtime/samples/deconflict-contextual-action/_config.js
@@ -0,0 +1,13 @@
+let result;
+
+export default {
+	before_test() {
+		result = [];
+	},
+	props: {
+		collect: (str) => result.push(str)
+	},
+	test({ assert }) {
+		assert.deepEqual(result, ['each_action', 'import_action']);
+	}
+};
diff --git a/test/runtime/samples/deconflict-contextual-action/main.svelte b/test/runtime/samples/deconflict-contextual-action/main.svelte
new file mode 100644
index 0000000000..48862e5f9f
--- /dev/null
+++ b/test/runtime/samples/deconflict-contextual-action/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import action from './util.js';
+	export let collect;
+
+	function each_action(_, fn) {
+		fn('each_action');
+	}
+	const array = [each_action];
+</script>
+
+<div use:action={collect} />
+
+<ul>
+	{#each array as action}
+		<div use:action={collect} />
+	{/each}
+</ul>
diff --git a/test/runtime/samples/deconflict-contextual-action/util.js b/test/runtime/samples/deconflict-contextual-action/util.js
new file mode 100644
index 0000000000..32bf0ffd2e
--- /dev/null
+++ b/test/runtime/samples/deconflict-contextual-action/util.js
@@ -0,0 +1,3 @@
+export default function (_, fn) {
+	fn('import_action');
+}
diff --git a/test/runtime/samples/deconflict-contextual-bind/Widget.svelte b/test/runtime/samples/deconflict-contextual-bind/Widget.svelte
new file mode 100644
index 0000000000..3aaa59b747
--- /dev/null
+++ b/test/runtime/samples/deconflict-contextual-bind/Widget.svelte
@@ -0,0 +1,3 @@
+<script>
+	export let prop;
+</script>
diff --git a/test/runtime/samples/deconflict-contextual-bind/_config.js b/test/runtime/samples/deconflict-contextual-bind/_config.js
new file mode 100644
index 0000000000..7602cde023
--- /dev/null
+++ b/test/runtime/samples/deconflict-contextual-bind/_config.js
@@ -0,0 +1,3 @@
+export default {
+	preserveIdentifiers: true
+};
diff --git a/test/runtime/samples/deconflict-contextual-bind/main.svelte b/test/runtime/samples/deconflict-contextual-bind/main.svelte
new file mode 100644
index 0000000000..fe91deca17
--- /dev/null
+++ b/test/runtime/samples/deconflict-contextual-bind/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Widget from './Widget.svelte';
+	const values = ['foo', 'bar'];
+</script>
+
+{#each values as value}
+	<Widget bind:value/>
+{/each}
diff --git a/test/runtime/samples/deconflict-ctx/_config.js b/test/runtime/samples/deconflict-ctx/_config.js
new file mode 100644
index 0000000000..b6d8bf51be
--- /dev/null
+++ b/test/runtime/samples/deconflict-ctx/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<h1>Hello world!</h1>
+	`
+};
diff --git a/test/runtime/samples/deconflict-ctx/main.svelte b/test/runtime/samples/deconflict-ctx/main.svelte
new file mode 100644
index 0000000000..d1af46a18d
--- /dev/null
+++ b/test/runtime/samples/deconflict-ctx/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	const ctx = 'world';
+</script>
+
+<h1>Hello {ctx}!</h1>
diff --git a/test/runtime/samples/deconflict-elements-indexes/_config.js b/test/runtime/samples/deconflict-elements-indexes/_config.js
new file mode 100644
index 0000000000..cb102638f2
--- /dev/null
+++ b/test/runtime/samples/deconflict-elements-indexes/_config.js
@@ -0,0 +1,22 @@
+export default {
+	html: `
+		<div>
+			<i>one</i>
+		</div>
+	`,
+
+	preserveIdentifiers: true,
+
+	test({ assert, component, target }) {
+		const { tagList } = component;
+		tagList.push('two');
+		component.tagList = tagList;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<i>one</i>
+				<i>two</i>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/deconflict-elements-indexes/main.svelte b/test/runtime/samples/deconflict-elements-indexes/main.svelte
new file mode 100644
index 0000000000..c506848bdf
--- /dev/null
+++ b/test/runtime/samples/deconflict-elements-indexes/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let tagList = ['one'];
+
+	function remove(index) {
+		// ...
+	}
+</script>
+
+<div>
+	{#each tagList as tag, i}
+		<i on:click='{() => remove(i)}'>
+			{tag}
+		</i>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/deconflict-globals/_config.js b/test/runtime/samples/deconflict-globals/_config.js
new file mode 100644
index 0000000000..c29f022a37
--- /dev/null
+++ b/test/runtime/samples/deconflict-globals/_config.js
@@ -0,0 +1,14 @@
+export default {
+	preserveIdentifiers: true,
+	compileOptions: {
+		name: 'window'
+	},
+
+	html: `
+		<p>I hereby declare Svelte the bestest framework.</p>
+		<p>nintendo sixty four</p>
+		<p>Woops.</p>
+		<p>42</p>
+		<p>false</p>
+	`
+};
diff --git a/test/runtime/samples/deconflict-globals/main.svelte b/test/runtime/samples/deconflict-globals/main.svelte
new file mode 100644
index 0000000000..d1928ea533
--- /dev/null
+++ b/test/runtime/samples/deconflict-globals/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	const document = 'I hereby declare Svelte the bestest framework.';
+	const console = 'nintendo sixty four';
+	const Error = 'Woops.';
+	const Object = 42;
+	const Map = false;
+
+	const everyone = [document, console, Error, Object, Map];
+</script>
+
+<svelte:head>
+	<title>Cute test</title>
+</svelte:head>
+
+<svelte:window on:click></svelte:window>
+<svelte:body on:mouseenter></svelte:body>
+
+{#each everyone as someone (someone)}
+	<p>{someone}</p>
+{/each}
diff --git a/test/runtime/samples/deconflict-non-helpers/_config.js b/test/runtime/samples/deconflict-non-helpers/_config.js
new file mode 100644
index 0000000000..8bbdc872e5
--- /dev/null
+++ b/test/runtime/samples/deconflict-non-helpers/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: 'ABCD',
+
+	test({ assert, component }) {
+		assert.equal(component.compute(), 'ABCD');
+	}
+};
diff --git a/test/runtime/samples/deconflict-non-helpers/main.svelte b/test/runtime/samples/deconflict-non-helpers/main.svelte
new file mode 100644
index 0000000000..02cab9d7e6
--- /dev/null
+++ b/test/runtime/samples/deconflict-non-helpers/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { addCss, addedCss, applyComputations, renderMainFragment } from './module.js';
+
+	export let value = addCss + addedCss + applyComputations + renderMainFragment;
+
+	export function compute() {
+		return value.toUpperCase();
+	}
+</script>
+
+{compute()}
+
+<style>
+</style>
diff --git a/test/runtime/samples/deconflict-non-helpers/module.js b/test/runtime/samples/deconflict-non-helpers/module.js
new file mode 100644
index 0000000000..ff4e71e251
--- /dev/null
+++ b/test/runtime/samples/deconflict-non-helpers/module.js
@@ -0,0 +1,4 @@
+export const addCss = 'a';
+export const addedCss = 'b';
+export const applyComputations = 'c';
+export const renderMainFragment = 'd';
diff --git a/test/runtime/samples/deconflict-self/_config.js b/test/runtime/samples/deconflict-self/_config.js
new file mode 100644
index 0000000000..44bea34e09
--- /dev/null
+++ b/test/runtime/samples/deconflict-self/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>nested component</p>'
+};
diff --git a/test/runtime/samples/deconflict-self/main.svelte b/test/runtime/samples/deconflict-self/main.svelte
new file mode 100644
index 0000000000..7010a66c88
--- /dev/null
+++ b/test/runtime/samples/deconflict-self/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Main from './nested/main.svelte';
+</script>
+
+<Main/>
\ No newline at end of file
diff --git a/test/runtime/samples/deconflict-self/nested/main.svelte b/test/runtime/samples/deconflict-self/nested/main.svelte
new file mode 100644
index 0000000000..5996328206
--- /dev/null
+++ b/test/runtime/samples/deconflict-self/nested/main.svelte
@@ -0,0 +1 @@
+<p>nested component</p>
\ No newline at end of file
diff --git a/test/runtime/samples/deconflict-spread-i/_config.js b/test/runtime/samples/deconflict-spread-i/_config.js
new file mode 100644
index 0000000000..7602cde023
--- /dev/null
+++ b/test/runtime/samples/deconflict-spread-i/_config.js
@@ -0,0 +1,3 @@
+export default {
+	preserveIdentifiers: true
+};
diff --git a/test/runtime/samples/deconflict-spread-i/main.svelte b/test/runtime/samples/deconflict-spread-i/main.svelte
new file mode 100644
index 0000000000..a7b201ac4e
--- /dev/null
+++ b/test/runtime/samples/deconflict-spread-i/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	const attrs = {};
+</script>
+
+<i {...attrs}/>
\ No newline at end of file
diff --git a/test/runtime/samples/deconflict-template-1/_config.js b/test/runtime/samples/deconflict-template-1/_config.js
new file mode 100644
index 0000000000..faddb5b6fd
--- /dev/null
+++ b/test/runtime/samples/deconflict-template-1/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: 'template'
+};
diff --git a/test/runtime/samples/deconflict-template-1/main.svelte b/test/runtime/samples/deconflict-template-1/main.svelte
new file mode 100644
index 0000000000..70fc1997bd
--- /dev/null
+++ b/test/runtime/samples/deconflict-template-1/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { template } from './module.js';
+
+	export let value = template;
+</script>
+
+{value}
diff --git a/test/runtime/samples/deconflict-template-1/module.js b/test/runtime/samples/deconflict-template-1/module.js
new file mode 100644
index 0000000000..9725306dac
--- /dev/null
+++ b/test/runtime/samples/deconflict-template-1/module.js
@@ -0,0 +1 @@
+export const template = 'template';
diff --git a/test/runtime/samples/deconflict-template-2/_config.js b/test/runtime/samples/deconflict-template-2/_config.js
new file mode 100644
index 0000000000..faddb5b6fd
--- /dev/null
+++ b/test/runtime/samples/deconflict-template-2/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: 'template'
+};
diff --git a/test/runtime/samples/deconflict-template-2/main.svelte b/test/runtime/samples/deconflict-template-2/main.svelte
new file mode 100644
index 0000000000..0c2fae81de
--- /dev/null
+++ b/test/runtime/samples/deconflict-template-2/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let value = template();
+
+	function template() {
+		return 'template';
+	}
+</script>
+
+{value}
diff --git a/test/runtime/samples/deconflict-value/Widget.svelte b/test/runtime/samples/deconflict-value/Widget.svelte
new file mode 100644
index 0000000000..909dc03c89
--- /dev/null
+++ b/test/runtime/samples/deconflict-value/Widget.svelte
@@ -0,0 +1,3 @@
+<script>
+	export let value = 'foo';
+</script>
diff --git a/test/runtime/samples/deconflict-value/_config.js b/test/runtime/samples/deconflict-value/_config.js
new file mode 100644
index 0000000000..ac21772c8c
--- /dev/null
+++ b/test/runtime/samples/deconflict-value/_config.js
@@ -0,0 +1,6 @@
+export default {
+	html: `
+		<p>Reactive: foo</p>
+		<p>Value: foo</p>
+	`
+};
diff --git a/test/runtime/samples/deconflict-value/main.svelte b/test/runtime/samples/deconflict-value/main.svelte
new file mode 100644
index 0000000000..07b7c2e1f0
--- /dev/null
+++ b/test/runtime/samples/deconflict-value/main.svelte
@@ -0,0 +1,9 @@
+<script>
+  import Widget from './Widget.svelte';
+	let value;
+	$: reactive = value;
+</script>
+
+<Widget bind:value/>
+<p>Reactive: {reactive}</p>
+<p>Value: {value}</p>
diff --git a/test/runtime/samples/deconflict-vars/_config.js b/test/runtime/samples/deconflict-vars/_config.js
new file mode 100644
index 0000000000..e66ce0f141
--- /dev/null
+++ b/test/runtime/samples/deconflict-vars/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>ab</p>'
+};
diff --git a/test/runtime/samples/deconflict-vars/main.svelte b/test/runtime/samples/deconflict-vars/main.svelte
new file mode 100644
index 0000000000..72ab82f2c9
--- /dev/null
+++ b/test/runtime/samples/deconflict-vars/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	function throwError() {
+		throw new Error('nope');
+	}
+
+	const createElement = throwError;
+	const createElement$ = throwError;
+
+	export let value = template() + template$();
+
+	function template() {
+		return 'a';
+	}
+
+	function template$() {
+		return 'b';
+	}
+</script>
+
+<p>{value}</p>
diff --git a/test/runtime/samples/default-data-function/_config.js b/test/runtime/samples/default-data-function/_config.js
new file mode 100644
index 0000000000..3f091e438c
--- /dev/null
+++ b/test/runtime/samples/default-data-function/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: '<h1>Hello world!</h1>',
+
+	test({ assert, component, target }) {
+		component.name = () => 'everybody';
+		assert.htmlEqual( target.innerHTML, '<h1>Hello everybody!</h1>' );
+	}
+};
diff --git a/test/runtime/samples/default-data-function/main.svelte b/test/runtime/samples/default-data-function/main.svelte
new file mode 100644
index 0000000000..57d2df771d
--- /dev/null
+++ b/test/runtime/samples/default-data-function/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let name = () => 'world';
+</script>
+
+<h1>Hello {name()}!</h1>
diff --git a/test/runtime/samples/default-data-override/_config.js b/test/runtime/samples/default-data-override/_config.js
new file mode 100644
index 0000000000..5b21ee7492
--- /dev/null
+++ b/test/runtime/samples/default-data-override/_config.js
@@ -0,0 +1,7 @@
+export default {
+	props: {
+		name: 'everybody'
+	},
+
+	html: '<h1>Hello everybody!</h1>'
+};
diff --git a/test/runtime/samples/default-data-override/main.svelte b/test/runtime/samples/default-data-override/main.svelte
new file mode 100644
index 0000000000..a8d2fcfb7b
--- /dev/null
+++ b/test/runtime/samples/default-data-override/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let name = 'world';
+</script>
+
+<h1>Hello {name}!</h1>
diff --git a/test/runtime/samples/default-data/_config.js b/test/runtime/samples/default-data/_config.js
new file mode 100644
index 0000000000..26b3554f9f
--- /dev/null
+++ b/test/runtime/samples/default-data/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<h1>Hello world!</h1>'
+};
diff --git a/test/runtime/samples/default-data/main.svelte b/test/runtime/samples/default-data/main.svelte
new file mode 100644
index 0000000000..a8d2fcfb7b
--- /dev/null
+++ b/test/runtime/samples/default-data/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let name = 'world';
+</script>
+
+<h1>Hello {name}!</h1>
diff --git a/test/runtime/samples/destroy-twice/_config.js b/test/runtime/samples/destroy-twice/_config.js
new file mode 100644
index 0000000000..39f6cdcd57
--- /dev/null
+++ b/test/runtime/samples/destroy-twice/_config.js
@@ -0,0 +1,6 @@
+export default {
+	test({ component }) {
+		component.$destroy();
+		component.$destroy();
+	}
+};
diff --git a/test/runtime/samples/destroy-twice/main.svelte b/test/runtime/samples/destroy-twice/main.svelte
new file mode 100644
index 0000000000..78e7012b82
--- /dev/null
+++ b/test/runtime/samples/destroy-twice/main.svelte
@@ -0,0 +1 @@
+<div/>
\ No newline at end of file
diff --git a/test/runtime/samples/destructured-assignment-pattern-with-object-pattern/_config.js b/test/runtime/samples/destructured-assignment-pattern-with-object-pattern/_config.js
new file mode 100644
index 0000000000..75025e4614
--- /dev/null
+++ b/test/runtime/samples/destructured-assignment-pattern-with-object-pattern/_config.js
@@ -0,0 +1,6 @@
+export default {
+	html: `
+		<div>hello undefined</div>
+		<div>hello bar2</div>
+	`
+};
diff --git a/test/runtime/samples/destructured-assignment-pattern-with-object-pattern/main.svelte b/test/runtime/samples/destructured-assignment-pattern-with-object-pattern/main.svelte
new file mode 100644
index 0000000000..b71b25bd67
--- /dev/null
+++ b/test/runtime/samples/destructured-assignment-pattern-with-object-pattern/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	const hoge = {};
+	const { foo: { bar } = {} } = hoge;
+
+
+	const hoge2 = {};
+	const { foo2: { bar2 } = { bar2: "bar2" } } = hoge2;
+</script>
+
+<div>hello {bar}</div>
+<div>hello {bar2}</div>
diff --git a/test/runtime/samples/destructured-props-1/A.svelte b/test/runtime/samples/destructured-props-1/A.svelte
new file mode 100644
index 0000000000..d1b392ef34
--- /dev/null
+++ b/test/runtime/samples/destructured-props-1/A.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { writable } from 'svelte/store';
+
+  const THING = { a: 1, b: { c: 2, d: [3, 4, writable(5)] }, e: [6], h: 8 };
+  const default_g = 9;
+
+  export let { a, b: { c, d: [d_one,,d_three], f }, e: [e_one], g = default_g } = THING;
+  export const { a: A, b: { c: C } } = THING;
+</script>
+
+<div>
+a: {a},
+b: {typeof b},
+c: {c},
+d_one: {d_one},
+d_three: {$d_three},
+f: {f},
+g: {g},
+e: {typeof e},
+e_one: {e_one},
+A: {A},
+C: {C}
+</div>
+<div>{JSON.stringify(THING)}</div>
\ No newline at end of file
diff --git a/test/runtime/samples/destructured-props-1/_config.js b/test/runtime/samples/destructured-props-1/_config.js
new file mode 100644
index 0000000000..29feaaabab
--- /dev/null
+++ b/test/runtime/samples/destructured-props-1/_config.js
@@ -0,0 +1,9 @@
+export default {
+	html: `
+		<div>a: 1, b: undefined, c: 2, d_one: 3, d_three: 5, f: undefined, g: 9, e: undefined, e_one: 6, A: 1, C: 2</div>
+		<div>{"a":1,"b":{"c":2,"d":[3,4,{}]},"e":[6],"h":8}</div>
+		<br>
+		<div>a: a, b: undefined, c: 2, d_one: d_one, d_three: 5, f: f, g: g, e: undefined, e_one: 6, A: 1, C: 2</div>
+		<div>{"a":1,"b":{"c":2,"d":[3,4,{}]},"e":[6],"h":8}</div>
+	`
+};
diff --git a/test/runtime/samples/destructured-props-1/main.svelte b/test/runtime/samples/destructured-props-1/main.svelte
new file mode 100644
index 0000000000..dbe7c88d33
--- /dev/null
+++ b/test/runtime/samples/destructured-props-1/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import A from './A.svelte';
+</script>
+
+<A />
+<br />
+<A a="a" d_one="d_one" list_one="list_one" f="f" list_two_b="list_two_b" g="g" A="A" C="C" />
diff --git a/test/runtime/samples/destructured-props-2/A.svelte b/test/runtime/samples/destructured-props-2/A.svelte
new file mode 100644
index 0000000000..51167edbc4
--- /dev/null
+++ b/test/runtime/samples/destructured-props-2/A.svelte
@@ -0,0 +1,21 @@
+<script>
+  import { writable } from 'svelte/store';
+
+  let default_b = 5;
+  const LIST = [1, { a: 2 }, [3, writable(4)]];
+  export const [x, { a: list_two_a, b: list_two_b = default_b }, [, y]] = LIST;
+  export let [m, { a: n, b: o = default_b }, [p, q]] = LIST;
+</script>
+
+<div>
+  x: {x},
+  list_two_a: {list_two_a},
+  list_two_b: {list_two_b},
+  y: {$y},
+  m: {m},
+  n: {n},
+  o: {o},
+  p: {p},
+  q: {$q}
+</div>
+<div>{JSON.stringify(LIST)}</div>
\ No newline at end of file
diff --git a/test/runtime/samples/destructured-props-2/_config.js b/test/runtime/samples/destructured-props-2/_config.js
new file mode 100644
index 0000000000..c647f31be1
--- /dev/null
+++ b/test/runtime/samples/destructured-props-2/_config.js
@@ -0,0 +1,19 @@
+export default {
+	html: `
+		<div>x: 1, list_two_a: 2, list_two_b: 5, y: 4, m: 1, n: 2, o: 5, p: 3, q: 4</div>
+		<div>[1,{"a":2},[3,{}]]</div>
+		<br><div>x: 1, list_two_a: 2, list_two_b: 5, y: 4, m: m, n: n, o: o, p: p, q: q</div>
+		<div>[1,{"a":2},[3,{}]]</div>
+	`,
+
+	async test({ component, assert, target }) {
+		await component.update();
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>x: 1, list_two_a: 2, list_two_b: 5, y: 4, m: 1, n: 2, o: 5, p: 3, q: 4</div>
+			<div>[1,{"a":2},[3,{}]]</div>
+			<br><div>x: 1, list_two_a: 2, list_two_b: 5, y: 4, m: MM, n: NN, o: OO, p: PP, q: QQ</div>
+			<div>[1,{"a":2},[3,{}]]</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/destructured-props-2/main.svelte b/test/runtime/samples/destructured-props-2/main.svelte
new file mode 100644
index 0000000000..f0044bb567
--- /dev/null
+++ b/test/runtime/samples/destructured-props-2/main.svelte
@@ -0,0 +1,30 @@
+<script>
+	import A from './A.svelte';
+	import { writable } from 'svelte/store';
+
+	let x = 'x',
+		list_two_a = 'list_two_a',
+		list_two_b = 'list_two_b',
+		y = writable('y'),
+		m = 'm',
+		n = 'n',
+		o = 'o',
+		p = 'p',
+		q = writable('q');
+
+	export function update() {
+		x = 'XX';
+		list_two_a = 'LIST_TWO_A';
+		list_two_b = 'LIST_TWO_B';
+		y = writable('YY');
+		m = 'MM';
+		n = 'NN';
+		o = 'OO';
+		p = 'PP';
+		q = writable('QQ');
+	}
+</script>
+
+<A />
+<br />
+<A {x} {list_two_a} {list_two_b} {y} {m} {n} {o} {p} {q} />
diff --git a/test/runtime/samples/destructured-props-3/A.svelte b/test/runtime/samples/destructured-props-3/A.svelte
new file mode 100644
index 0000000000..6c5aca05b0
--- /dev/null
+++ b/test/runtime/samples/destructured-props-3/A.svelte
@@ -0,0 +1,10 @@
+<script>
+  import { writable } from 'svelte/store';
+
+  const { i, j, k } = { i: 9, j: 10, k: writable(11) }, l = 12, m = 13, n = writable(14);
+  let { a, b, c } = { a: 9, b: 10, c: writable(11) }, d = 12, e = 13, f = writable(14);
+
+  export { i, k, l, n, a, c, d, f };
+</script>
+
+<div>i: {i}, j: {j}, k: {$k}, l: {l}, m: {m}, n: {$n}, a: {a}, b: {b}, c: {$c}, d: {d}, e: {e}, f: {$f}</div>
\ No newline at end of file
diff --git a/test/runtime/samples/destructured-props-3/_config.js b/test/runtime/samples/destructured-props-3/_config.js
new file mode 100644
index 0000000000..6d2e516e0e
--- /dev/null
+++ b/test/runtime/samples/destructured-props-3/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: `
+		<div>i: 9, j: 10, k: 11, l: 12, m: 13, n: 14, a: 9, b: 10, c: 11, d: 12, e: 13, f: 14</div>
+		<br>
+		<div>i: 9, j: 10, k: 11, l: 12, m: 13, n: 14, a: a, b: 10, c: c, d: d, e: 13, f: f</div>
+	`,
+	async test({ component, target, assert }) {
+		await component.update();
+		assert.htmlEqual(target.innerHTML, `
+			<div>i: 9, j: 10, k: 11, l: 12, m: 13, n: 14, a: 9, b: 10, c: 11, d: 12, e: 13, f: 14</div>
+			<br>
+			<div>i: 9, j: 10, k: 11, l: 12, m: 13, n: 14, a: aa, b: 10, c: cc, d: dd, e: 13, f: ff</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/destructured-props-3/main.svelte b/test/runtime/samples/destructured-props-3/main.svelte
new file mode 100644
index 0000000000..8152d61aab
--- /dev/null
+++ b/test/runtime/samples/destructured-props-3/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	import A from './A.svelte';
+	import { writable } from 'svelte/store';
+
+	let i = 'i',
+		k = writable('k'),
+		l = 'l',
+		n = writable('n'),
+		a = 'a',
+		c = writable('c'),
+		d = 'd',
+		f = writable('f');
+
+	export function update() {
+		i = 'ii';
+		k = writable('kk');
+		l = 'll';
+		n = writable('nn');
+		a = 'aa';
+		c = writable('cc');
+		d = 'dd';
+		f = writable('ff');
+	}
+
+</script>
+
+<A />
+<br />
+<A {i} {k} {l} {n} {a} {c} {d} {f} />
diff --git a/test/runtime/samples/destructuring-assignment-array/_config.js b/test/runtime/samples/destructuring-assignment-array/_config.js
new file mode 100644
index 0000000000..5b39a0b86e
--- /dev/null
+++ b/test/runtime/samples/destructuring-assignment-array/_config.js
@@ -0,0 +1,23 @@
+export default {
+	html: `
+		<ul>
+			<li>Gruyere</li>
+			<li>Compté</li>
+			<li>Beaufort</li>
+			<li>Abondance</li>
+		</ul>
+	`,
+
+	async test({ assert, component, target }) {
+		await component.swap(0, 1);
+
+		assert.htmlEqual(target.innerHTML, `
+			<ul>
+				<li>Compté</li>
+				<li>Gruyere</li>
+				<li>Beaufort</li>
+				<li>Abondance</li>
+			</ul>
+		`);
+	}
+};
diff --git a/test/runtime/samples/destructuring-assignment-array/main.svelte b/test/runtime/samples/destructuring-assignment-array/main.svelte
new file mode 100644
index 0000000000..aebbfe204c
--- /dev/null
+++ b/test/runtime/samples/destructuring-assignment-array/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	let cheese = [
+		'Gruyere',
+		'Compté',
+		'Beaufort',
+		'Abondance',
+	];
+
+	export function swap(a, b) {
+		[cheese[a], cheese[b]] = [cheese[b], cheese[a]];
+	}
+</script>
+
+<ul>
+	{#each cheese as cheese}
+		<li>{cheese}</li>
+	{/each}
+</ul>
\ No newline at end of file
diff --git a/test/runtime/samples/destructuring-between-exports/_config.js b/test/runtime/samples/destructuring-between-exports/_config.js
new file mode 100644
index 0000000000..3b2ee6e9ee
--- /dev/null
+++ b/test/runtime/samples/destructuring-between-exports/_config.js
@@ -0,0 +1,8 @@
+export default {
+	props: {
+		foo: { bar: 42 }
+	},
+	html: `
+		<h1>42</h2>
+	`
+};
diff --git a/test/runtime/samples/destructuring-between-exports/main.svelte b/test/runtime/samples/destructuring-between-exports/main.svelte
new file mode 100644
index 0000000000..17cc8dc17d
--- /dev/null
+++ b/test/runtime/samples/destructuring-between-exports/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo;
+	const { bar } = foo;
+	export let baz;
+</script>
+
+<h1>{bar}</h1>
\ No newline at end of file
diff --git a/test/runtime/samples/destructuring/_config.js b/test/runtime/samples/destructuring/_config.js
new file mode 100644
index 0000000000..93e4ed3936
--- /dev/null
+++ b/test/runtime/samples/destructuring/_config.js
@@ -0,0 +1,25 @@
+export default {
+	html: '<button>click me</button>',
+
+	props: {
+		foo: 42
+	},
+
+	test({ assert, component, target, window }) {
+		const event = new window.MouseEvent('click');
+		const button = target.querySelector('button');
+
+		let count = 0;
+		let number = null;
+
+		component.$on('foo', event => {
+			count++;
+			number = event.detail.foo;
+		});
+
+		button.dispatchEvent(event);
+
+		assert.equal(count, 1);
+		assert.equal(number, 42);
+	}
+};
diff --git a/test/runtime/samples/destructuring/main.svelte b/test/runtime/samples/destructuring/main.svelte
new file mode 100644
index 0000000000..f6f7394813
--- /dev/null
+++ b/test/runtime/samples/destructuring/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	export let foo;
+</script>
+
+<button on:click='{() => dispatch("foo", { foo })}'>click me</button>
\ No newline at end of file
diff --git a/test/runtime/samples/dev-warning-destroy-twice/_config.js b/test/runtime/samples/dev-warning-destroy-twice/_config.js
new file mode 100644
index 0000000000..69ef5b1713
--- /dev/null
+++ b/test/runtime/samples/dev-warning-destroy-twice/_config.js
@@ -0,0 +1,23 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, component }) {
+		const warn = console.warn; // eslint-disable-line no-console
+
+		const warnings = [];
+		console.warn = warning => { // eslint-disable-line no-console
+			warnings.push(warning);
+		};
+
+		component.$destroy();
+		component.$destroy();
+
+		assert.deepEqual(warnings, [
+			'Component was already destroyed'
+		]);
+
+		console.warn = warn; // eslint-disable-line no-console
+	}
+};
diff --git a/test/runtime/samples/dev-warning-destroy-twice/main.svelte b/test/runtime/samples/dev-warning-destroy-twice/main.svelte
new file mode 100644
index 0000000000..78e7012b82
--- /dev/null
+++ b/test/runtime/samples/dev-warning-destroy-twice/main.svelte
@@ -0,0 +1 @@
+<div/>
\ No newline at end of file
diff --git a/test/runtime/samples/dev-warning-each-block-no-sets-maps/_config.js b/test/runtime/samples/dev-warning-each-block-no-sets-maps/_config.js
new file mode 100644
index 0000000000..036130c4e0
--- /dev/null
+++ b/test/runtime/samples/dev-warning-each-block-no-sets-maps/_config.js
@@ -0,0 +1,6 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+	error: '{#each} only iterates over array-like objects. You can use a spread to convert this iterable into an array.'
+};
diff --git a/test/runtime/samples/dev-warning-each-block-no-sets-maps/main.svelte b/test/runtime/samples/dev-warning-each-block-no-sets-maps/main.svelte
new file mode 100644
index 0000000000..e1aae26d12
--- /dev/null
+++ b/test/runtime/samples/dev-warning-each-block-no-sets-maps/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	const foo = new Set([1, 2, 3]);
+</script>
+
+{#each foo as item}
+	<div>{item}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/dev-warning-each-block-require-arraylike/_config.js b/test/runtime/samples/dev-warning-each-block-require-arraylike/_config.js
new file mode 100644
index 0000000000..ff6ef80607
--- /dev/null
+++ b/test/runtime/samples/dev-warning-each-block-require-arraylike/_config.js
@@ -0,0 +1,6 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+	error: '{#each} only iterates over array-like objects.'
+};
diff --git a/test/runtime/samples/dev-warning-each-block-require-arraylike/main.svelte b/test/runtime/samples/dev-warning-each-block-require-arraylike/main.svelte
new file mode 100644
index 0000000000..f85df8d84b
--- /dev/null
+++ b/test/runtime/samples/dev-warning-each-block-require-arraylike/main.svelte
@@ -0,0 +1,3 @@
+{#each {} as item}
+	<div>{item}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/dev-warning-helper/_config.js b/test/runtime/samples/dev-warning-helper/_config.js
new file mode 100644
index 0000000000..695d42237f
--- /dev/null
+++ b/test/runtime/samples/dev-warning-helper/_config.js
@@ -0,0 +1,13 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	props: {
+		bar: 1
+	},
+
+	html: '2',
+
+	warnings: []
+};
diff --git a/test/runtime/samples/dev-warning-helper/main.svelte b/test/runtime/samples/dev-warning-helper/main.svelte
new file mode 100644
index 0000000000..56ddbf1c5d
--- /dev/null
+++ b/test/runtime/samples/dev-warning-helper/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let bar;
+
+	function foo(bar) {
+		return bar * 2;
+	}
+</script>
+
+{foo(bar)}
\ No newline at end of file
diff --git a/test/runtime/samples/dev-warning-missing-data-binding/_config.js b/test/runtime/samples/dev-warning-missing-data-binding/_config.js
new file mode 100644
index 0000000000..1ba0dfc8ff
--- /dev/null
+++ b/test/runtime/samples/dev-warning-missing-data-binding/_config.js
@@ -0,0 +1,9 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	warnings: [
+		"<Main> was created without expected prop 'value'"
+	]
+};
diff --git a/test/runtime/samples/dev-warning-missing-data-binding/main.svelte b/test/runtime/samples/dev-warning-missing-data-binding/main.svelte
new file mode 100644
index 0000000000..cfc7830c90
--- /dev/null
+++ b/test/runtime/samples/dev-warning-missing-data-binding/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let value;
+	export let value_with_default = undefined;
+</script>
+
+<input bind:value>
\ No newline at end of file
diff --git a/test/runtime/samples/dev-warning-missing-data-component/Foo.svelte b/test/runtime/samples/dev-warning-missing-data-component/Foo.svelte
new file mode 100644
index 0000000000..99e26245ae
--- /dev/null
+++ b/test/runtime/samples/dev-warning-missing-data-component/Foo.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let x;
+	export let y;
+	export let z = undefined;
+</script>
+
+<div>{x} {y}</div>
\ No newline at end of file
diff --git a/test/runtime/samples/dev-warning-missing-data-component/_config.js b/test/runtime/samples/dev-warning-missing-data-component/_config.js
new file mode 100644
index 0000000000..ececa00a8c
--- /dev/null
+++ b/test/runtime/samples/dev-warning-missing-data-component/_config.js
@@ -0,0 +1,9 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	warnings: [
+		"<Foo> was created without expected prop 'y'"
+	]
+};
diff --git a/test/runtime/samples/dev-warning-missing-data-component/main.svelte b/test/runtime/samples/dev-warning-missing-data-component/main.svelte
new file mode 100644
index 0000000000..15a5895b3d
--- /dev/null
+++ b/test/runtime/samples/dev-warning-missing-data-component/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Foo from './Foo.svelte';
+</script>
+
+<Foo x={undefined}/>
\ No newline at end of file
diff --git a/test/runtime/samples/dev-warning-missing-data-each/_config.js b/test/runtime/samples/dev-warning-missing-data-each/_config.js
new file mode 100644
index 0000000000..7d7794eff4
--- /dev/null
+++ b/test/runtime/samples/dev-warning-missing-data-each/_config.js
@@ -0,0 +1,24 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	props: {
+		letters: [
+			{
+				id: 1,
+				char: 'a'
+			},
+			{
+				id: 2,
+				char: 'b'
+			},
+			{
+				id: 3,
+				char: 'c'
+			}
+		]
+	},
+
+	warnings: []
+};
diff --git a/test/runtime/samples/dev-warning-missing-data-each/main.svelte b/test/runtime/samples/dev-warning-missing-data-each/main.svelte
new file mode 100644
index 0000000000..55ac7a7b47
--- /dev/null
+++ b/test/runtime/samples/dev-warning-missing-data-each/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let letters;
+</script>
+
+{#each letters as letter (letter.id)}
+  <div>{letter.char}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/dev-warning-missing-data-excludes-event/_config.js b/test/runtime/samples/dev-warning-missing-data-excludes-event/_config.js
new file mode 100644
index 0000000000..62ad08624d
--- /dev/null
+++ b/test/runtime/samples/dev-warning-missing-data-excludes-event/_config.js
@@ -0,0 +1,7 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	warnings: []
+};
diff --git a/test/runtime/samples/dev-warning-missing-data-excludes-event/main.svelte b/test/runtime/samples/dev-warning-missing-data-excludes-event/main.svelte
new file mode 100644
index 0000000000..1c420cfcfa
--- /dev/null
+++ b/test/runtime/samples/dev-warning-missing-data-excludes-event/main.svelte
@@ -0,0 +1 @@
+<button on:click='{event => console.log(event)}'>click me</button>
diff --git a/test/runtime/samples/dev-warning-missing-data-function/_config.js b/test/runtime/samples/dev-warning-missing-data-function/_config.js
new file mode 100644
index 0000000000..62ad08624d
--- /dev/null
+++ b/test/runtime/samples/dev-warning-missing-data-function/_config.js
@@ -0,0 +1,7 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	warnings: []
+};
diff --git a/test/runtime/samples/dev-warning-missing-data-function/main.svelte b/test/runtime/samples/dev-warning-missing-data-function/main.svelte
new file mode 100644
index 0000000000..c60113964a
--- /dev/null
+++ b/test/runtime/samples/dev-warning-missing-data-function/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export function foo() {}
+</script>
+
+<p>
+	{foo()}
+</p>
diff --git a/test/runtime/samples/dev-warning-missing-data/_config.js b/test/runtime/samples/dev-warning-missing-data/_config.js
new file mode 100644
index 0000000000..f489491ac9
--- /dev/null
+++ b/test/runtime/samples/dev-warning-missing-data/_config.js
@@ -0,0 +1,10 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	warnings: [
+		"<Main> was created without expected prop 'foo'",
+		"<Main> was created without expected prop 'bar'"
+	]
+};
diff --git a/test/runtime/samples/dev-warning-missing-data/main.svelte b/test/runtime/samples/dev-warning-missing-data/main.svelte
new file mode 100644
index 0000000000..0e9f45ab16
--- /dev/null
+++ b/test/runtime/samples/dev-warning-missing-data/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let foo;
+	export let bar;
+</script>
+
+<p>
+	{Math.max(0, foo)}
+	{bar}
+</p>
diff --git a/test/runtime/samples/dev-warning-readonly-computed/_config.js b/test/runtime/samples/dev-warning-readonly-computed/_config.js
new file mode 100644
index 0000000000..86037d7e1f
--- /dev/null
+++ b/test/runtime/samples/dev-warning-readonly-computed/_config.js
@@ -0,0 +1,18 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	props: {
+		a: 42
+	},
+
+	test({ assert, component }) {
+		try {
+			component.foo = 1;
+			throw new Error( 'Expected an error' );
+		} catch ( err ) {
+			assert.equal( err.message, "<Main>: Cannot set read-only property 'foo'" );
+		}
+	}
+};
diff --git a/test/runtime/samples/dev-warning-readonly-computed/main.svelte b/test/runtime/samples/dev-warning-readonly-computed/main.svelte
new file mode 100644
index 0000000000..3c395561e1
--- /dev/null
+++ b/test/runtime/samples/dev-warning-readonly-computed/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let a;
+
+	export function foo() {
+		return a + 1;
+	}
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/dev-warning-readonly-window-binding/_config.js b/test/runtime/samples/dev-warning-readonly-window-binding/_config.js
new file mode 100644
index 0000000000..fc6075aef1
--- /dev/null
+++ b/test/runtime/samples/dev-warning-readonly-window-binding/_config.js
@@ -0,0 +1,14 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, component }) {
+		try {
+			component.width = 99;
+			throw new Error('Expected an error');
+		} catch (err) {
+			assert.equal(err.message, "<Main>: Cannot set read-only property 'width'");
+		}
+	}
+};
diff --git a/test/runtime/samples/dev-warning-readonly-window-binding/main.svelte b/test/runtime/samples/dev-warning-readonly-window-binding/main.svelte
new file mode 100644
index 0000000000..06194394c5
--- /dev/null
+++ b/test/runtime/samples/dev-warning-readonly-window-binding/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let width;
+</script>
+
+<svelte:window bind:innerWidth={width}/>
\ No newline at end of file
diff --git a/test/runtime/samples/dev-warning-unknown-props-2/Foo.svelte b/test/runtime/samples/dev-warning-unknown-props-2/Foo.svelte
new file mode 100644
index 0000000000..bc56c4d894
--- /dev/null
+++ b/test/runtime/samples/dev-warning-unknown-props-2/Foo.svelte
@@ -0,0 +1 @@
+Foo
diff --git a/test/runtime/samples/dev-warning-unknown-props-2/_config.js b/test/runtime/samples/dev-warning-unknown-props-2/_config.js
new file mode 100644
index 0000000000..b28724d719
--- /dev/null
+++ b/test/runtime/samples/dev-warning-unknown-props-2/_config.js
@@ -0,0 +1,9 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	warnings: [
+		"<Foo> was created with unknown prop 'fo'"
+	]
+};
diff --git a/test/runtime/samples/dev-warning-unknown-props-2/main.svelte b/test/runtime/samples/dev-warning-unknown-props-2/main.svelte
new file mode 100644
index 0000000000..1566cf3e41
--- /dev/null
+++ b/test/runtime/samples/dev-warning-unknown-props-2/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Foo from './Foo.svelte';
+</script>
+
+<Foo fo="sho"/>
diff --git a/test/runtime/samples/dev-warning-unknown-props-with-$$props/Foo.svelte b/test/runtime/samples/dev-warning-unknown-props-with-$$props/Foo.svelte
new file mode 100644
index 0000000000..375b1a6a0a
--- /dev/null
+++ b/test/runtime/samples/dev-warning-unknown-props-with-$$props/Foo.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo = undefined;
+
+</script>
+
+<div>{foo}</div>
+<div>{JSON.stringify($$restProps)}</div>
diff --git a/test/runtime/samples/dev-warning-unknown-props-with-$$props/_config.js b/test/runtime/samples/dev-warning-unknown-props-with-$$props/_config.js
new file mode 100644
index 0000000000..62ad08624d
--- /dev/null
+++ b/test/runtime/samples/dev-warning-unknown-props-with-$$props/_config.js
@@ -0,0 +1,7 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	warnings: []
+};
diff --git a/test/runtime/samples/dev-warning-unknown-props-with-$$props/main.svelte b/test/runtime/samples/dev-warning-unknown-props-with-$$props/main.svelte
new file mode 100644
index 0000000000..1566cf3e41
--- /dev/null
+++ b/test/runtime/samples/dev-warning-unknown-props-with-$$props/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Foo from './Foo.svelte';
+</script>
+
+<Foo fo="sho"/>
diff --git a/test/runtime/samples/dev-warning-unknown-props-with-$$rest/Foo.svelte b/test/runtime/samples/dev-warning-unknown-props-with-$$rest/Foo.svelte
new file mode 100644
index 0000000000..9e5c62339d
--- /dev/null
+++ b/test/runtime/samples/dev-warning-unknown-props-with-$$rest/Foo.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo = undefined;
+
+</script>
+
+<div>{foo}</div>
+<div>{JSON.stringify($$props)}</div>
diff --git a/test/runtime/samples/dev-warning-unknown-props-with-$$rest/_config.js b/test/runtime/samples/dev-warning-unknown-props-with-$$rest/_config.js
new file mode 100644
index 0000000000..62ad08624d
--- /dev/null
+++ b/test/runtime/samples/dev-warning-unknown-props-with-$$rest/_config.js
@@ -0,0 +1,7 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	warnings: []
+};
diff --git a/test/runtime/samples/dev-warning-unknown-props-with-$$rest/main.svelte b/test/runtime/samples/dev-warning-unknown-props-with-$$rest/main.svelte
new file mode 100644
index 0000000000..1566cf3e41
--- /dev/null
+++ b/test/runtime/samples/dev-warning-unknown-props-with-$$rest/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Foo from './Foo.svelte';
+</script>
+
+<Foo fo="sho"/>
diff --git a/test/runtime/samples/dev-warning-unknown-props-with-$$scope/Foo.svelte b/test/runtime/samples/dev-warning-unknown-props-with-$$scope/Foo.svelte
new file mode 100644
index 0000000000..b9f7feec24
--- /dev/null
+++ b/test/runtime/samples/dev-warning-unknown-props-with-$$scope/Foo.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let answer;
+</script>
+
+<h1>{answer}</h1>
+<div><slot></slot></div>
diff --git a/test/runtime/samples/dev-warning-unknown-props-with-$$scope/_config.js b/test/runtime/samples/dev-warning-unknown-props-with-$$scope/_config.js
new file mode 100644
index 0000000000..62ad08624d
--- /dev/null
+++ b/test/runtime/samples/dev-warning-unknown-props-with-$$scope/_config.js
@@ -0,0 +1,7 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	warnings: []
+};
diff --git a/test/runtime/samples/dev-warning-unknown-props-with-$$scope/main.svelte b/test/runtime/samples/dev-warning-unknown-props-with-$$scope/main.svelte
new file mode 100644
index 0000000000..a1656e86e0
--- /dev/null
+++ b/test/runtime/samples/dev-warning-unknown-props-with-$$scope/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Foo from './Foo.svelte';
+</script>
+
+<Foo answer={42}>
+	bar
+</Foo>
diff --git a/test/runtime/samples/dev-warning-unknown-props/Foo.svelte b/test/runtime/samples/dev-warning-unknown-props/Foo.svelte
new file mode 100644
index 0000000000..cebe5fd571
--- /dev/null
+++ b/test/runtime/samples/dev-warning-unknown-props/Foo.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo = undefined;
+</script>
+
+<div>{foo}</div>
diff --git a/test/runtime/samples/dev-warning-unknown-props/_config.js b/test/runtime/samples/dev-warning-unknown-props/_config.js
new file mode 100644
index 0000000000..b28724d719
--- /dev/null
+++ b/test/runtime/samples/dev-warning-unknown-props/_config.js
@@ -0,0 +1,9 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	warnings: [
+		"<Foo> was created with unknown prop 'fo'"
+	]
+};
diff --git a/test/runtime/samples/dev-warning-unknown-props/main.svelte b/test/runtime/samples/dev-warning-unknown-props/main.svelte
new file mode 100644
index 0000000000..1566cf3e41
--- /dev/null
+++ b/test/runtime/samples/dev-warning-unknown-props/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Foo from './Foo.svelte';
+</script>
+
+<Foo fo="sho"/>
diff --git a/test/runtime/samples/document-event/_config.js b/test/runtime/samples/document-event/_config.js
new file mode 100644
index 0000000000..d9a8866275
--- /dev/null
+++ b/test/runtime/samples/document-event/_config.js
@@ -0,0 +1,13 @@
+export default {
+	test({ assert, component, window }) {
+		assert.deepEqual(component.events, []);
+
+		const event1 = new window.Event('mouseenter');
+		window.document.body.dispatchEvent(event1);
+		assert.deepEqual(component.events, ['enter']);
+
+		const event2 = new window.Event('mouseleave');
+		window.document.body.dispatchEvent(event2);
+		assert.deepEqual(component.events, ['enter', 'leave']);
+	}
+};
diff --git a/test/runtime/samples/document-event/main.svelte b/test/runtime/samples/document-event/main.svelte
new file mode 100644
index 0000000000..078ae1ee02
--- /dev/null
+++ b/test/runtime/samples/document-event/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let events = [];
+
+	function log(event) {
+		events.push(event);
+	}
+</script>
+
+<svelte:body on:mouseenter='{() => log("enter")}' on:mouseleave='{() => log("leave")}'/>
diff --git a/test/runtime/samples/dynamic-component-bindings-recreated-b/Green.svelte b/test/runtime/samples/dynamic-component-bindings-recreated-b/Green.svelte
new file mode 100644
index 0000000000..613d3ff52a
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-bindings-recreated-b/Green.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo = 'green';
+</script>
+
+<p>green {foo}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-bindings-recreated-b/Red.svelte b/test/runtime/samples/dynamic-component-bindings-recreated-b/Red.svelte
new file mode 100644
index 0000000000..b83dfe150e
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-bindings-recreated-b/Red.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo = 'red';
+</script>
+
+<p>red {foo}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-bindings-recreated-b/_config.js b/test/runtime/samples/dynamic-component-bindings-recreated-b/_config.js
new file mode 100644
index 0000000000..2f73514e67
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-bindings-recreated-b/_config.js
@@ -0,0 +1,28 @@
+export default {
+	props: {
+		x: true
+	},
+
+	html: `
+		<p>parent green</p>
+		<p>green green</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.foo = undefined;
+		component.x = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>parent red</p>
+			<p>red red</p>
+		`);
+
+		component.foo = undefined;
+		component.x = true;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>parent green</p>
+			<p>green green</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/dynamic-component-bindings-recreated-b/main.svelte b/test/runtime/samples/dynamic-component-bindings-recreated-b/main.svelte
new file mode 100644
index 0000000000..019718e5cb
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-bindings-recreated-b/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Green from './Green.svelte';
+	import Red from './Red.svelte';
+
+	export let foo;
+	export let x;
+</script>
+
+<p>parent {foo}</p>
+<svelte:component this="{x ? Green : Red}" bind:foo />
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-bindings-recreated/Green.svelte b/test/runtime/samples/dynamic-component-bindings-recreated/Green.svelte
new file mode 100644
index 0000000000..63c2e25090
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-bindings-recreated/Green.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+<p>green {foo}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-bindings-recreated/Red.svelte b/test/runtime/samples/dynamic-component-bindings-recreated/Red.svelte
new file mode 100644
index 0000000000..aaaade509e
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-bindings-recreated/Red.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+<p>red {foo}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-bindings-recreated/_config.js b/test/runtime/samples/dynamic-component-bindings-recreated/_config.js
new file mode 100644
index 0000000000..7882996a8b
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-bindings-recreated/_config.js
@@ -0,0 +1,25 @@
+export default {
+	props: {
+		x: true,
+		foo: 'one'
+	},
+
+	html: `
+		<p>green one</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.x = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>red one</p>
+		`);
+
+		component.foo = 'two';
+		component.x = true;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>green two</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/dynamic-component-bindings-recreated/main.svelte b/test/runtime/samples/dynamic-component-bindings-recreated/main.svelte
new file mode 100644
index 0000000000..011ac923b2
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-bindings-recreated/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Green from './Green.svelte';
+	import Red from './Red.svelte';
+
+	export let x;
+	export let foo;
+</script>
+
+<svelte:component this="{x ? Green : Red}" bind:foo />
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-bindings/Bar.svelte b/test/runtime/samples/dynamic-component-bindings/Bar.svelte
new file mode 100644
index 0000000000..7f215faa3f
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-bindings/Bar.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let z;
+</script>
+
+<p>bar</p>
+<input type='checkbox' bind:checked={z}>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-bindings/Foo.svelte b/test/runtime/samples/dynamic-component-bindings/Foo.svelte
new file mode 100644
index 0000000000..5ed139be24
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-bindings/Foo.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let y;
+</script>
+
+<p>foo</p>
+<input bind:value={y}>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-bindings/_config.js b/test/runtime/samples/dynamic-component-bindings/_config.js
new file mode 100644
index 0000000000..4b76c89237
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-bindings/_config.js
@@ -0,0 +1,31 @@
+export default {
+	props: {
+		x: true
+	},
+
+	html: `
+		<p>foo</p>
+		<input>
+	`,
+
+	async test({ assert, component, target, window }) {
+		let input = target.querySelector('input');
+		input.value = 'abc';
+		await input.dispatchEvent(new window.Event('input'));
+
+		assert.equal(component.y, 'abc');
+
+		component.x = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>bar</p>
+			<input type='checkbox'>
+		`);
+
+		input = target.querySelector('input');
+		input.checked = true;
+		await input.dispatchEvent(new window.Event('change'));
+
+		assert.equal(component.z, true);
+	}
+};
diff --git a/test/runtime/samples/dynamic-component-bindings/main.svelte b/test/runtime/samples/dynamic-component-bindings/main.svelte
new file mode 100644
index 0000000000..31d0f86e5e
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-bindings/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Foo from './Foo.svelte';
+	import Bar from './Bar.svelte';
+
+	export let x;
+	export let y;
+	export let z;
+</script>
+
+<svelte:component this="{ x ? Foo : Bar }" bind:y bind:z/>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-destroy-null/_config.js b/test/runtime/samples/dynamic-component-destroy-null/_config.js
new file mode 100644
index 0000000000..c9bc1a05c0
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-destroy-null/_config.js
@@ -0,0 +1,9 @@
+export default {
+	props: {
+		x: true
+	},
+
+	test({ component }) {
+		component.x = false;
+	}
+};
diff --git a/test/runtime/samples/dynamic-component-destroy-null/main.svelte b/test/runtime/samples/dynamic-component-destroy-null/main.svelte
new file mode 100644
index 0000000000..6b58e61267
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-destroy-null/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let x;
+</script>
+
+{#if x}
+	<svelte:component this={null}/>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-events/Bar.svelte b/test/runtime/samples/dynamic-component-events/Bar.svelte
new file mode 100644
index 0000000000..4168bebd91
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-events/Bar.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<button on:click='{() => dispatch("select", { id: "bar" })}'>select bar</button>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-events/Foo.svelte b/test/runtime/samples/dynamic-component-events/Foo.svelte
new file mode 100644
index 0000000000..e5c8fa014b
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-events/Foo.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<button on:click='{() => dispatch("select", { id: "foo" })}'>select foo</button>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-events/_config.js b/test/runtime/samples/dynamic-component-events/_config.js
new file mode 100644
index 0000000000..cc54bef4e5
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-events/_config.js
@@ -0,0 +1,25 @@
+export default {
+	props: {
+		x: true
+	},
+
+	html: `
+		<button>select foo</button>
+	`,
+
+	test({ assert, component, target, window }) {
+		const click = new window.MouseEvent('click');
+
+		target.querySelector('button').dispatchEvent(click);
+		assert.equal(component.selected, 'foo');
+
+		component.x = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>select bar</button>
+		`);
+
+		target.querySelector('button').dispatchEvent(click);
+		assert.equal(component.selected, 'bar');
+	}
+};
diff --git a/test/runtime/samples/dynamic-component-events/main.svelte b/test/runtime/samples/dynamic-component-events/main.svelte
new file mode 100644
index 0000000000..f60e578289
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-events/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Foo from './Foo.svelte';
+	import Bar from './Bar.svelte';
+
+	export let x;
+	export let selected;
+</script>
+
+<svelte:component this="{x ? Foo : Bar}" on:select="{e => selected = e.detail.id}"/>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-in-if/Bar.svelte b/test/runtime/samples/dynamic-component-in-if/Bar.svelte
new file mode 100644
index 0000000000..c5bbc5bb13
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-in-if/Bar.svelte
@@ -0,0 +1 @@
+<p>Bar</p>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-in-if/Foo.svelte b/test/runtime/samples/dynamic-component-in-if/Foo.svelte
new file mode 100644
index 0000000000..c62ee08e19
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-in-if/Foo.svelte
@@ -0,0 +1 @@
+<p>Foo</p>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-in-if/_config.js b/test/runtime/samples/dynamic-component-in-if/_config.js
new file mode 100644
index 0000000000..0c6829dbcd
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-in-if/_config.js
@@ -0,0 +1,13 @@
+export default {
+	html: `
+		<p>Foo</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.x = component.Bar;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Bar</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/dynamic-component-in-if/main.svelte b/test/runtime/samples/dynamic-component-in-if/main.svelte
new file mode 100644
index 0000000000..821dadf106
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-in-if/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Foo from './Foo.svelte';
+	import Bar from './Bar.svelte';
+
+	export { Bar };
+	export let x = Foo;
+</script>
+
+{#if x}
+	<svelte:component this={x}/>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-inside-element/Bar.svelte b/test/runtime/samples/dynamic-component-inside-element/Bar.svelte
new file mode 100644
index 0000000000..2a3ebfca74
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-inside-element/Bar.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x;
+</script>
+
+<p>{x}, therefore Bar</p>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-inside-element/Foo.svelte b/test/runtime/samples/dynamic-component-inside-element/Foo.svelte
new file mode 100644
index 0000000000..d2434520f7
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-inside-element/Foo.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x;
+</script>
+
+<p>{x}, therefore Foo</p>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-inside-element/_config.js b/test/runtime/samples/dynamic-component-inside-element/_config.js
new file mode 100644
index 0000000000..ba144c96a6
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-inside-element/_config.js
@@ -0,0 +1,17 @@
+export default {
+	props: {
+		x: true
+	},
+
+	html: `
+		<div><p>true, therefore Foo</p></div>
+	`,
+
+	test({ assert, component, target }) {
+		component.x = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div><p>false, therefore Bar</p></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/dynamic-component-inside-element/main.svelte b/test/runtime/samples/dynamic-component-inside-element/main.svelte
new file mode 100644
index 0000000000..e6efa606a4
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-inside-element/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Foo from './Foo.svelte';
+	import Bar from './Bar.svelte';
+
+	export let x;
+</script>
+
+<div>
+	<svelte:component this="{ x ? Foo : Bar }" x='{x}'/>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-nulled-out-intro/_config.js b/test/runtime/samples/dynamic-component-nulled-out-intro/_config.js
new file mode 100644
index 0000000000..18ccd5f21e
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-nulled-out-intro/_config.js
@@ -0,0 +1,5 @@
+export default {
+	test({ component }) {
+		component.visible = true;
+	}
+};
diff --git a/test/runtime/samples/dynamic-component-nulled-out-intro/main.svelte b/test/runtime/samples/dynamic-component-nulled-out-intro/main.svelte
new file mode 100644
index 0000000000..eac72cf694
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-nulled-out-intro/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let visible = false;
+</script>
+
+{#if visible}
+	<svelte:component this={null}/>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-nulled-out/Foo.svelte b/test/runtime/samples/dynamic-component-nulled-out/Foo.svelte
new file mode 100644
index 0000000000..c62ee08e19
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-nulled-out/Foo.svelte
@@ -0,0 +1 @@
+<p>Foo</p>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-nulled-out/_config.js b/test/runtime/samples/dynamic-component-nulled-out/_config.js
new file mode 100644
index 0000000000..7e928aba86
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-nulled-out/_config.js
@@ -0,0 +1,19 @@
+export default {
+	html: `
+		<p>Foo</p>
+	`,
+
+	test({ assert, component, target }) {
+		const Bar = component.Bar;
+
+		component.Bar = null;
+
+		assert.htmlEqual(target.innerHTML, '');
+
+		component.Bar = Bar;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Foo</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/dynamic-component-nulled-out/main.svelte b/test/runtime/samples/dynamic-component-nulled-out/main.svelte
new file mode 100644
index 0000000000..2df6837267
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-nulled-out/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Foo from './Foo.svelte';
+
+	export let Bar = Foo;
+</script>
+
+<svelte:component this={Bar}/>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-ref/Foo.svelte b/test/runtime/samples/dynamic-component-ref/Foo.svelte
new file mode 100644
index 0000000000..bc56c4d894
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-ref/Foo.svelte
@@ -0,0 +1 @@
+Foo
diff --git a/test/runtime/samples/dynamic-component-ref/_config.js b/test/runtime/samples/dynamic-component-ref/_config.js
new file mode 100644
index 0000000000..f64a7fd195
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-ref/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: 'Foo',
+
+	test({ assert, component }) {
+		assert.ok(component.test);
+	}
+};
diff --git a/test/runtime/samples/dynamic-component-ref/main.svelte b/test/runtime/samples/dynamic-component-ref/main.svelte
new file mode 100644
index 0000000000..a7e8643cc4
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-ref/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Foo from './Foo.svelte';
+
+	export let test;
+</script>
+
+<svelte:component bind:this={test} this={Foo}/>
diff --git a/test/runtime/samples/dynamic-component-slot/Bar.svelte b/test/runtime/samples/dynamic-component-slot/Bar.svelte
new file mode 100644
index 0000000000..76cea7cb67
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-slot/Bar.svelte
@@ -0,0 +1,3 @@
+<h1>Bar</h1>
+<slot></slot>
+<slot name='other'></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-slot/Baz.svelte b/test/runtime/samples/dynamic-component-slot/Baz.svelte
new file mode 100644
index 0000000000..9c7f92262c
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-slot/Baz.svelte
@@ -0,0 +1 @@
+<div>baz</div>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-slot/Foo.svelte b/test/runtime/samples/dynamic-component-slot/Foo.svelte
new file mode 100644
index 0000000000..45e4d0001f
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-slot/Foo.svelte
@@ -0,0 +1,3 @@
+<h1>Foo</h1>
+<slot name='other'></slot>
+<slot></slot>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-slot/_config.js b/test/runtime/samples/dynamic-component-slot/_config.js
new file mode 100644
index 0000000000..aedf8bbb5b
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-slot/_config.js
@@ -0,0 +1,35 @@
+export default {
+	props: {
+		x: true
+	},
+
+	html: `
+		<h1>Foo</h1>
+		<div slot='other'>what goes up must come down</div>
+		<p>element</p>
+		you're it
+		<p>neither foo nor bar</p>
+		text
+		<span>a</span>
+		<span>b</span>
+		<span>c</span>
+		<div>baz</div>
+	`,
+
+	test({ assert, component, target }) {
+		component.x = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<h1>Bar</h1>
+			<p>element</p>
+			you're it
+			<p>neither foo nor bar</p>
+			text
+			<span>a</span>
+			<span>b</span>
+			<span>c</span>
+			<div>baz</div>
+			<div slot='other'>what goes up must come down</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/dynamic-component-slot/main.svelte b/test/runtime/samples/dynamic-component-slot/main.svelte
new file mode 100644
index 0000000000..ed357f4302
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-slot/main.svelte
@@ -0,0 +1,35 @@
+<script>
+	import Foo from './Foo.svelte';
+	import Bar from './Bar.svelte';
+	import Baz from './Baz.svelte';
+
+	export let x;
+	export let tag = 'you\'re it';
+	export let foo;
+	export let bar;
+	export let things = ['a', 'b', 'c'];
+</script>
+
+<svelte:component this="{ x ? Foo : Bar }" x='{x}'>
+	<p>element</p>
+
+	{tag}
+
+	{#if foo}
+		<p>foo</p>
+	{:else if bar}
+		<p>bar</p>
+	{:else}
+		<p>neither foo nor bar</p>
+	{/if}
+
+	text
+
+	{#each things as thing}
+		<span>{thing}</span>
+	{/each}
+
+	<Baz/>
+
+	<div slot='other'>what goes up must come down</div>
+</svelte:component>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-update-existing-instance/Bar.svelte b/test/runtime/samples/dynamic-component-update-existing-instance/Bar.svelte
new file mode 100644
index 0000000000..6b7e486eba
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-update-existing-instance/Bar.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x;
+</script>
+
+<p>Bar {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-update-existing-instance/Foo.svelte b/test/runtime/samples/dynamic-component-update-existing-instance/Foo.svelte
new file mode 100644
index 0000000000..4a4debdb12
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-update-existing-instance/Foo.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x;
+</script>
+
+<p>Foo {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component-update-existing-instance/_config.js b/test/runtime/samples/dynamic-component-update-existing-instance/_config.js
new file mode 100644
index 0000000000..adca76f5a7
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-update-existing-instance/_config.js
@@ -0,0 +1,17 @@
+export default {
+	props: {
+		x: 1
+	},
+
+	html: `
+		<p>Foo 1</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.x = 2;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>Foo 2</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/dynamic-component-update-existing-instance/main.svelte b/test/runtime/samples/dynamic-component-update-existing-instance/main.svelte
new file mode 100644
index 0000000000..6e2a8cde5e
--- /dev/null
+++ b/test/runtime/samples/dynamic-component-update-existing-instance/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Foo from './Foo.svelte';
+	import Bar from './Bar.svelte';
+
+	export let x;
+</script>
+
+<svelte:component this="{ x ? Foo : Bar }" x='{x}'/>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component/Bar.svelte b/test/runtime/samples/dynamic-component/Bar.svelte
new file mode 100644
index 0000000000..2a3ebfca74
--- /dev/null
+++ b/test/runtime/samples/dynamic-component/Bar.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x;
+</script>
+
+<p>{x}, therefore Bar</p>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component/Foo.svelte b/test/runtime/samples/dynamic-component/Foo.svelte
new file mode 100644
index 0000000000..d2434520f7
--- /dev/null
+++ b/test/runtime/samples/dynamic-component/Foo.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x;
+</script>
+
+<p>{x}, therefore Foo</p>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-component/_config.js b/test/runtime/samples/dynamic-component/_config.js
new file mode 100644
index 0000000000..64abb9bd96
--- /dev/null
+++ b/test/runtime/samples/dynamic-component/_config.js
@@ -0,0 +1,17 @@
+export default {
+	props: {
+		x: true
+	},
+
+	html: `
+		<p>true, therefore Foo</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.x = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>false, therefore Bar</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/dynamic-component/main.svelte b/test/runtime/samples/dynamic-component/main.svelte
new file mode 100644
index 0000000000..6e2a8cde5e
--- /dev/null
+++ b/test/runtime/samples/dynamic-component/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Foo from './Foo.svelte';
+	import Bar from './Bar.svelte';
+
+	export let x;
+</script>
+
+<svelte:component this="{ x ? Foo : Bar }" x='{x}'/>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-element-action-update/_config.js b/test/runtime/samples/dynamic-element-action-update/_config.js
new file mode 100644
index 0000000000..ebbe6f05a9
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-action-update/_config.js
@@ -0,0 +1,45 @@
+let logs = [];
+
+export default {
+	html: `
+		<h1>tag is h1.</h1>
+	`,
+	props: {
+		logs
+	},
+	after_test() {
+		logs = [];
+	},
+
+	async test({ assert, component, target }) {
+		assert.equal(component.tag, 'h1');
+
+		assert.deepEqual(logs, ['create: h1,opt1']);
+		component.opt = 'opt2';
+
+		assert.equal(component.tag, 'h1');
+		assert.deepEqual(logs, ['create: h1,opt1', 'update: h1,opt2']);
+
+		component.tag = 'h2';
+
+		assert.equal(component.tag, 'h2');
+		assert.deepEqual(logs, [
+			'create: h1,opt1',
+			'update: h1,opt2',
+			'destroy',
+			'create: h2,opt2'
+		]);
+		assert.htmlEqual(target.innerHTML, '<h2>tag is h2.</h2>');
+
+		component.tag = false;
+		assert.deepEqual(logs, [
+			'create: h1,opt1',
+			'update: h1,opt2',
+			'destroy',
+			'create: h2,opt2',
+			'destroy'
+		]);
+
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-action-update/main.svelte b/test/runtime/samples/dynamic-element-action-update/main.svelte
new file mode 100644
index 0000000000..da269e115e
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-action-update/main.svelte
@@ -0,0 +1,14 @@
+<script>
+  export let logs = [];
+	export let tag = "h1";
+  export let opt = "opt1";
+  function foo(node, {tag, opt}) {
+    logs.push(`create: ${tag},${opt}`);
+    return {
+      update: ({tag, opt}) => logs.push(`update: ${tag},${opt}`),
+      destroy: () => logs.push('destroy'),
+    };
+  }
+</script>
+
+<svelte:element this={tag} use:foo={{tag, opt}}>tag is {tag}.</svelte:element>
diff --git a/test/runtime/samples/dynamic-element-animation-2/_config.js b/test/runtime/samples/dynamic-element-animation-2/_config.js
new file mode 100644
index 0000000000..d7dec05009
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-animation-2/_config.js
@@ -0,0 +1,105 @@
+let originalDivGetBoundingClientRect;
+let originalSpanGetBoundingClientRect;
+let originalParagraphGetBoundingClientRect;
+
+export default {
+	skip_if_ssr: true,
+	props: {
+		things: [
+			{ id: 1, name: 'a' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 5, name: 'e' }
+		],
+		tag: 'div'
+	},
+
+	html: `
+		<div>a</div>
+		<div>b</div>
+		<div>c</div>
+		<div>d</div>
+		<div>e</div>
+	`,
+
+	before_test() {
+		originalDivGetBoundingClientRect =
+			window.HTMLDivElement.prototype.getBoundingClientRect;
+		originalSpanGetBoundingClientRect =
+			window.HTMLSpanElement.prototype.getBoundingClientRect;
+		originalParagraphGetBoundingClientRect =
+			window.HTMLParagraphElement.prototype.getBoundingClientRect;
+
+		window.HTMLDivElement.prototype.getBoundingClientRect =
+			fakeGetBoundingClientRect;
+		window.HTMLSpanElement.prototype.getBoundingClientRect =
+			fakeGetBoundingClientRect;
+		window.HTMLParagraphElement.prototype.getBoundingClientRect =
+			fakeGetBoundingClientRect;
+
+		function fakeGetBoundingClientRect() {
+			const index = [...this.parentNode.children].indexOf(this);
+			const top = index * 30;
+
+			return {
+				left: 0,
+				right: 100,
+				top,
+				bottom: top + 20
+			};
+		}
+	},
+	after_test() {
+		window.HTMLDivElement.prototype.getBoundingClientRect =
+			originalDivGetBoundingClientRect;
+		window.HTMLSpanElement.prototype.getBoundingClientRect =
+			originalSpanGetBoundingClientRect;
+		window.HTMLParagraphElement.prototype.getBoundingClientRect =
+			originalParagraphGetBoundingClientRect;
+	},
+
+	async test({ assert, component, raf }) {
+		// switch tag and things at the same time
+		await component.update('p', [
+			{ id: 5, name: 'e' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 1, name: 'a' }
+		]);
+
+		const ps = document.querySelectorAll('p');
+		assert.equal(ps[0].dy, 120);
+		assert.equal(ps[4].dy, -120);
+
+		raf.tick(50);
+		assert.equal(ps[0].dy, 60);
+		assert.equal(ps[4].dy, -60);
+
+		raf.tick(100);
+		assert.equal(ps[0].dy, 0);
+		assert.equal(ps[4].dy, 0);
+
+		await component.update('span', [
+			{ id: 1, name: 'a' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 5, name: 'e' }
+		]);
+
+		const spans = document.querySelectorAll('span');
+
+		assert.equal(spans[0].dy, 120);
+		assert.equal(spans[4].dy, -120);
+
+		raf.tick(150);
+		assert.equal(spans[0].dy, 60);
+		assert.equal(spans[4].dy, -60);
+
+		raf.tick(200);
+		assert.equal(spans[0].dy, 0);
+		assert.equal(spans[4].dy, 0);
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-animation-2/main.svelte b/test/runtime/samples/dynamic-element-animation-2/main.svelte
new file mode 100644
index 0000000000..f655a40af9
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-animation-2/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	export let things;
+	export let tag;
+
+	function flip(node, animation, params) {
+		const dx = animation.from.left - animation.to.left;
+		const dy = animation.from.top - animation.to.top;
+
+		return {
+			duration: 100,
+			tick: (t, u) => {
+				node.dx = u * dx;
+				node.dy = u * dy;
+			}
+		};
+	}
+
+	export function update(new_tag, new_things) {
+		things = new_things;
+		tag = new_tag;
+	}
+</script>
+
+{#each things as thing (thing.id)}
+	<svelte:element this={tag} animate:flip>{thing.name}</svelte:element>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-element-animation/_config.js b/test/runtime/samples/dynamic-element-animation/_config.js
new file mode 100644
index 0000000000..e3c57a868e
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-animation/_config.js
@@ -0,0 +1,62 @@
+export default {
+	props: {
+		things: [
+			{ id: 1, name: 'a' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 5, name: 'e' }
+		],
+		tag: 'div'
+	},
+
+	html: `
+		<div>a</div>
+		<div>b</div>
+		<div>c</div>
+		<div>d</div>
+		<div>e</div>
+	`,
+
+	test({ assert, component, target, raf }) {
+		component.tag = 'p';
+		assert.equal(target.querySelectorAll('p').length, 5);
+
+		component.tag = 'div';
+		let divs = target.querySelectorAll('div');
+		divs.forEach(div => {
+			div.getBoundingClientRect = function() {
+				const index = [...this.parentNode.children].indexOf(this);
+				const top = index * 30;
+
+				return {
+					left: 0,
+					right: 100,
+					top,
+					bottom: top + 20
+				};
+			};
+		});
+
+		component.things = [
+			{ id: 5, name: 'e' },
+			{ id: 2, name: 'b' },
+			{ id: 3, name: 'c' },
+			{ id: 4, name: 'd' },
+			{ id: 1, name: 'a' }
+		];
+
+		divs = target.querySelectorAll('div');
+		assert.ok(~divs[0].style.animation.indexOf('__svelte'));
+		assert.equal(divs[1].style.animation, '');
+		assert.equal(divs[2].style.animation, '');
+		assert.equal(divs[3].style.animation, '');
+		assert.ok(~divs[4].style.animation.indexOf('__svelte'));
+
+		raf.tick(100);
+		assert.deepEqual([
+			divs[0].style.animation,
+			divs[4].style.animation
+		], ['', '']);
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-animation/main.svelte b/test/runtime/samples/dynamic-element-animation/main.svelte
new file mode 100644
index 0000000000..596d12c77a
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-animation/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	export let things;
+	export let tag;
+
+	function flip(node, animation, params) {
+		const dx = animation.from.left - animation.to.left;
+		const dy = animation.from.top - animation.to.top;
+
+		return {
+			duration: 100,
+			css: (t, u) => `transform: translate(${u + dx}px, ${u * dy}px)`
+		};
+	}
+</script>
+
+{#each things as thing (thing.id)}
+	<svelte:element this={tag} animate:flip>{thing.name}</svelte:element>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-element-attribute-boolean/_config.js b/test/runtime/samples/dynamic-element-attribute-boolean/_config.js
new file mode 100644
index 0000000000..a28a33b942
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-attribute-boolean/_config.js
@@ -0,0 +1,15 @@
+export default {
+	props: {
+		disabled: false
+	},
+	html: '<button>Click me</button>',
+
+	test({ assert, component, target }) {
+		const button = target.querySelector('button');
+		assert.equal(button.disabled, false);
+
+		component.disabled = true;
+		assert.htmlEqual(target.innerHTML, '<button disabled>Click me</button>');
+		assert.equal(button.disabled, true);
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-attribute-boolean/main.svelte b/test/runtime/samples/dynamic-element-attribute-boolean/main.svelte
new file mode 100644
index 0000000000..0166d378eb
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-attribute-boolean/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let disabled = false;
+</script>
+
+<svelte:element {disabled} this="button">Click me</svelte:element>
diff --git a/test/runtime/samples/dynamic-element-attribute-spread/_config.js b/test/runtime/samples/dynamic-element-attribute-spread/_config.js
new file mode 100644
index 0000000000..d4d64b27b7
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-attribute-spread/_config.js
@@ -0,0 +1,23 @@
+export default {
+	props: {
+		props: {
+			disabled: true,
+			type: 'button',
+			'data-named': 'foo'
+		}
+	},
+	html: '<button disabled type="button" data-named="foo">Click me</button>',
+
+	test({ assert, component, target }) {
+		const button = target.querySelector('button');
+		assert.equal(button.disabled, true);
+		assert.equal(button.type, 'button');
+		assert.equal(button.dataset.named, 'foo');
+
+		component.props = { type: 'submit' };
+		assert.htmlEqual(target.innerHTML, '<button type="submit">Click me</button>');
+		assert.equal(button.disabled, false);
+		assert.equal(button.type, 'submit');
+		assert.equal(button.dataset.named, undefined);
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-attribute-spread/main.svelte b/test/runtime/samples/dynamic-element-attribute-spread/main.svelte
new file mode 100644
index 0000000000..f400218bd7
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-attribute-spread/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let props = {
+		disabled: false,
+		type: 'button',
+		'data-named': 'foo'
+	};
+</script>
+
+<svelte:element this="button" {...props}>Click me</svelte:element>
diff --git a/test/runtime/samples/dynamic-element-attribute/_config.js b/test/runtime/samples/dynamic-element-attribute/_config.js
new file mode 100644
index 0000000000..6e7c340437
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-attribute/_config.js
@@ -0,0 +1,17 @@
+export default {
+	props: {
+		tag: 'div'
+	},
+	html: '<div style="color: red;">Foo</div>',
+
+	test({ assert, component, target }) {
+		component.tag = 'h1';
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<h1 style="color: red;">Foo</h1>
+		`
+		);
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-attribute/main.svelte b/test/runtime/samples/dynamic-element-attribute/main.svelte
new file mode 100644
index 0000000000..2498e06de9
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-attribute/main.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let tag = 'div';
+</script>
+
+<svelte:element this={tag} style="color: red;">Foo</svelte:element>
diff --git a/test/runtime/samples/dynamic-element-binding-invalid/_config.js b/test/runtime/samples/dynamic-element-binding-invalid/_config.js
new file mode 100644
index 0000000000..14c6d775dc
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-binding-invalid/_config.js
@@ -0,0 +1,3 @@
+export default {
+	error: "'value' is not a valid binding on <svelte:element> elements"
+};
diff --git a/test/runtime/samples/dynamic-element-binding-invalid/main.svelte b/test/runtime/samples/dynamic-element-binding-invalid/main.svelte
new file mode 100644
index 0000000000..45f8f96061
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-binding-invalid/main.svelte
@@ -0,0 +1,6 @@
+<script>
+  const tag = "div";
+  let value;
+</script>
+
+<svelte:element this={tag} bind:value></svelte:element>
diff --git a/test/runtime/samples/dynamic-element-binding-this/_config.js b/test/runtime/samples/dynamic-element-binding-this/_config.js
new file mode 100644
index 0000000000..e0722c9375
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-binding-this/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: '<div></div>',
+
+	test({ assert, component, target }) {
+		const div = target.querySelector('div');
+		assert.equal(div, component.foo);
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-binding-this/main.svelte b/test/runtime/samples/dynamic-element-binding-this/main.svelte
new file mode 100644
index 0000000000..75e8b02ce1
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-binding-this/main.svelte
@@ -0,0 +1,6 @@
+<script>
+  const tag = "div";
+  export let foo;
+</script>
+
+<svelte:element this={tag} bind:this={foo}></svelte:element>
diff --git a/test/runtime/samples/dynamic-element-change-tag/_config.js b/test/runtime/samples/dynamic-element-change-tag/_config.js
new file mode 100644
index 0000000000..9e4bf6fd32
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-change-tag/_config.js
@@ -0,0 +1,17 @@
+export default {
+	props: {
+		tag: 'div'
+	},
+	html: '<div>Foo</div>',
+
+	test({ assert, component, target }) {
+		component.tag = 'h1';
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<h1>Foo</h1>
+		`
+		);
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-change-tag/main.svelte b/test/runtime/samples/dynamic-element-change-tag/main.svelte
new file mode 100644
index 0000000000..a9c4d5c00c
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-change-tag/main.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let tag = 'div';
+</script>
+
+<svelte:element this={tag}>Foo</svelte:element>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-element-class-directive/Link.svelte b/test/runtime/samples/dynamic-element-class-directive/Link.svelte
new file mode 100644
index 0000000000..c58b3d1dc5
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-class-directive/Link.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let item;
+</script>
+
+<svelte:element this="div" class:active={true}>
+	{item.text}
+</svelte:element>
+
+<style>
+	.active {
+		color: red;
+	}
+</style>
diff --git a/test/runtime/samples/dynamic-element-class-directive/_config.js b/test/runtime/samples/dynamic-element-class-directive/_config.js
new file mode 100644
index 0000000000..1106467919
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-class-directive/_config.js
@@ -0,0 +1,11 @@
+export default {
+	html: `
+		<div class="svelte-1vsuzn0 active">foo</div>
+		<div class="svelte-1vsuzn0 active">foo0</div>
+		<div class="svelte-1vsuzn0 active">foo0</div>
+		<div class="svelte-1vsuzn0 active">foo0</div>
+		<div class="svelte-1vsuzn0 active">foo1</div>
+		<div class="svelte-1vsuzn0 active">foo2</div>
+		<div class="svelte-1vsuzn0 active">foo3</div>
+	`
+};
diff --git a/test/runtime/samples/dynamic-element-class-directive/main.svelte b/test/runtime/samples/dynamic-element-class-directive/main.svelte
new file mode 100644
index 0000000000..58e9303100
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-class-directive/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Link from "./Link.svelte";
+	let foo = [
+		{ text: "foo0" },
+		{ text: "foo1" },
+		{ text: "foo2" },
+		{ text: "foo3" },
+	];
+</script>
+
+<Link item={{ text: "foo" }} />
+<Link item={foo[0]} />
+<Link bind:item={foo[0]} />
+{#each foo as item}
+	<Link bind:item />
+{/each}
diff --git a/test/runtime/samples/dynamic-element-empty-tag/_config.js b/test/runtime/samples/dynamic-element-empty-tag/_config.js
new file mode 100644
index 0000000000..22dc25b41e
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-empty-tag/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: ''
+};
diff --git a/test/runtime/samples/dynamic-element-empty-tag/main.svelte b/test/runtime/samples/dynamic-element-empty-tag/main.svelte
new file mode 100644
index 0000000000..e3889ce0f5
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-empty-tag/main.svelte
@@ -0,0 +1,5 @@
+<script>
+  let tag = '';
+</script>
+
+<svelte:element this={tag}>Foo</svelte:element>
diff --git a/test/runtime/samples/dynamic-element-event-handler1/_config.js b/test/runtime/samples/dynamic-element-event-handler1/_config.js
new file mode 100644
index 0000000000..03b8f7879d
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-event-handler1/_config.js
@@ -0,0 +1,21 @@
+let clicked = false;
+function handler() {
+  clicked = true;
+}
+
+export default {
+	props: {
+		handler
+	},
+	html: '<button>Foo</button>',
+
+	test({ assert, target }) {
+		assert.equal(clicked, false);
+
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+		button.dispatchEvent(click);
+
+		assert.equal(clicked, true);
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-event-handler1/main.svelte b/test/runtime/samples/dynamic-element-event-handler1/main.svelte
new file mode 100644
index 0000000000..7a7fef9c22
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-event-handler1/main.svelte
@@ -0,0 +1,6 @@
+<script>
+  const tag = "button";
+  export let handler;
+</script>
+
+<svelte:element this={tag} on:click={handler}>Foo</svelte:element>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-element-event-handler2/_config.js b/test/runtime/samples/dynamic-element-event-handler2/_config.js
new file mode 100644
index 0000000000..22cbe735a7
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-event-handler2/_config.js
@@ -0,0 +1,23 @@
+let clicked = false;
+function handler() {
+  clicked = true;
+}
+
+export default {
+	props: {
+		tag: 'div',
+		handler
+	},
+	html: '<div>Foo</div>',
+
+	test({ assert, component, target }) {
+		assert.equal(clicked, false);
+
+		component.tag = 'button';
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+		button.dispatchEvent(click);
+
+		assert.equal(clicked, true);
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-event-handler2/main.svelte b/test/runtime/samples/dynamic-element-event-handler2/main.svelte
new file mode 100644
index 0000000000..f2534c1f62
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-event-handler2/main.svelte
@@ -0,0 +1,6 @@
+<script>
+  export let tag;
+  export let handler;
+</script>
+
+<svelte:element this={tag} on:click={handler}>Foo</svelte:element>
diff --git a/test/runtime/samples/dynamic-element-expression/_config.js b/test/runtime/samples/dynamic-element-expression/_config.js
new file mode 100644
index 0000000000..acad91c901
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-expression/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<div>Foo</div>'
+};
diff --git a/test/runtime/samples/dynamic-element-expression/main.svelte b/test/runtime/samples/dynamic-element-expression/main.svelte
new file mode 100644
index 0000000000..7ec11e4ef6
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-expression/main.svelte
@@ -0,0 +1 @@
+<svelte:element this={"div"}>Foo</svelte:element>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-element-invalid-this/_config.js b/test/runtime/samples/dynamic-element-invalid-this/_config.js
new file mode 100644
index 0000000000..3aaa554991
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-invalid-this/_config.js
@@ -0,0 +1,9 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+	props: {
+		tag: 123
+	},
+	error: '<svelte:element> expects "this" attribute to be a string.'
+};
diff --git a/test/runtime/samples/dynamic-element-invalid-this/main.svelte b/test/runtime/samples/dynamic-element-invalid-this/main.svelte
new file mode 100644
index 0000000000..bcc2c293bb
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-invalid-this/main.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let tag;
+</script>
+
+<svelte:element this={tag} />
diff --git a/test/runtime/samples/dynamic-element-null-tag/_config.js b/test/runtime/samples/dynamic-element-null-tag/_config.js
new file mode 100644
index 0000000000..22dc25b41e
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-null-tag/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: ''
+};
diff --git a/test/runtime/samples/dynamic-element-null-tag/main.svelte b/test/runtime/samples/dynamic-element-null-tag/main.svelte
new file mode 100644
index 0000000000..58dc96ff2a
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-null-tag/main.svelte
@@ -0,0 +1,5 @@
+<script>
+  let tag = null;
+</script>
+
+<svelte:element this={tag}>Foo</svelte:element>
diff --git a/test/runtime/samples/dynamic-element-pass-props/_config.js b/test/runtime/samples/dynamic-element-pass-props/_config.js
new file mode 100644
index 0000000000..35f8b7abdf
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-pass-props/_config.js
@@ -0,0 +1,16 @@
+let clicked = false;
+
+export default {
+	props: {
+		tag: 'div',
+		onClick: () => clicked = true
+	},
+	html: '<div style="display: inline;">Foo</div>',
+
+	async test({ assert, target, window }) {
+		const div = target.querySelector('div');
+		await div.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.equal(clicked, true);
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-pass-props/main.svelte b/test/runtime/samples/dynamic-element-pass-props/main.svelte
new file mode 100644
index 0000000000..6a54a93f27
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-pass-props/main.svelte
@@ -0,0 +1,6 @@
+<script>
+  const tag = "div";
+  export let onClick;
+</script>
+
+<svelte:element this={tag} style="display: inline;" on:click={onClick}>Foo</svelte:element>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-element-slot/Foo.svelte b/test/runtime/samples/dynamic-element-slot/Foo.svelte
new file mode 100644
index 0000000000..51dda4b7e3
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-slot/Foo.svelte
@@ -0,0 +1,7 @@
+<h1>Foo</h1>
+<div id="default">
+	<slot></slot>
+</div>
+<div id="other">
+	<slot name='other'></slot>
+</div>
diff --git a/test/runtime/samples/dynamic-element-slot/_config.js b/test/runtime/samples/dynamic-element-slot/_config.js
new file mode 100644
index 0000000000..aa9da522a3
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-slot/_config.js
@@ -0,0 +1,29 @@
+export default {
+	props: {
+		x: true
+	},
+
+	html: `
+		<h1>Foo</h1>
+		<div id="default">
+		  <h1>This is default slot</h1>
+		</div>
+		<div id="other">
+		  <h1 slot='other'>This is other slot</h1>
+		</div>
+	`,
+
+	test({ assert, component, target }) {
+		component.tag = 'h2';
+
+		assert.htmlEqual(target.innerHTML, `
+			<h1>Foo</h1>
+			<div id="default">
+				<h2>This is default slot</h2>
+			</div>
+			<div id="other">
+				<h2 slot='other'>This is other slot</h2>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-slot/main.svelte b/test/runtime/samples/dynamic-element-slot/main.svelte
new file mode 100644
index 0000000000..4b1cd81969
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-slot/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Foo from './Foo.svelte';
+	export let tag = "h1";
+</script>
+
+<Foo>
+	<svelte:element this={tag}>This is default slot</svelte:element>
+	<svelte:element this={tag} slot='other'>This is other slot</svelte:element>
+</Foo>
+
diff --git a/test/runtime/samples/dynamic-element-store/_config.js b/test/runtime/samples/dynamic-element-store/_config.js
new file mode 100644
index 0000000000..ded19eef79
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-store/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<div></div>'
+};
diff --git a/test/runtime/samples/dynamic-element-store/main.svelte b/test/runtime/samples/dynamic-element-store/main.svelte
new file mode 100644
index 0000000000..84a577ecee
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-store/main.svelte
@@ -0,0 +1,6 @@
+<script>
+  import { writable } from 'svelte/store';
+  const foo = writable('div');
+</script>
+
+<svelte:element this={$foo}></svelte:element>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-element-string/_config.js b/test/runtime/samples/dynamic-element-string/_config.js
new file mode 100644
index 0000000000..acad91c901
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-string/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<div>Foo</div>'
+};
diff --git a/test/runtime/samples/dynamic-element-string/main.svelte b/test/runtime/samples/dynamic-element-string/main.svelte
new file mode 100644
index 0000000000..62d65d5f20
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-string/main.svelte
@@ -0,0 +1 @@
+<svelte:element this="div">Foo</svelte:element>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-element-template-literals/_config.js b/test/runtime/samples/dynamic-element-template-literals/_config.js
new file mode 100644
index 0000000000..d37164b4d8
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-template-literals/_config.js
@@ -0,0 +1,21 @@
+export default {
+	props: {
+		size: 1
+	},
+	html: '<h1>This is h1 tag</h1>',
+
+	test({ assert, component, target }) {
+		const h1 = target.firstChild;
+		component.size = 2;
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<h2>This is h2 tag</h2>
+		`
+		);
+
+		const h2 = target.firstChild;
+		assert.notEqual(h1, h2);
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-template-literals/main.svelte b/test/runtime/samples/dynamic-element-template-literals/main.svelte
new file mode 100644
index 0000000000..84b63dcca7
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-template-literals/main.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let size;
+</script>
+
+<svelte:element this="{`h${size}`}">This is h{size} tag</svelte:element>
diff --git a/test/runtime/samples/dynamic-element-transition/_config.js b/test/runtime/samples/dynamic-element-transition/_config.js
new file mode 100644
index 0000000000..cb8474afc1
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-transition/_config.js
@@ -0,0 +1,17 @@
+export default {
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+		const h1 = target.querySelector('h1');
+		assert.equal(h1.style.animation, '__svelte_3809512021_0 100ms linear 0ms 1 both');
+
+		raf.tick(150);
+		component.tag = 'h2';
+		const h2 = target.querySelector('h2');
+		assert.equal(h1.style.animation, '');
+		assert.equal(h2.style.animation, '');
+
+		raf.tick(50);
+		component.visible = false;
+		assert.equal(h2.style.animation, '__svelte_3750847757_0 100ms linear 0ms 1 both');
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-transition/main.svelte b/test/runtime/samples/dynamic-element-transition/main.svelte
new file mode 100644
index 0000000000..b8c0eff0bd
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-transition/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	export let tag = "h1";
+	export let visible;
+
+	function foo() {
+		return {
+			duration: 100,
+			css: t => {
+				return `opacity: ${t}`;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<svelte:element this={tag} transition:foo></svelte:element>
+{/if}
diff --git a/test/runtime/samples/dynamic-element-undefined-tag/_config.js b/test/runtime/samples/dynamic-element-undefined-tag/_config.js
new file mode 100644
index 0000000000..d0bd665d3d
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-undefined-tag/_config.js
@@ -0,0 +1,19 @@
+export default {
+	html: '',
+	test({ component, target, assert }) {
+		component.tag = 'h1';
+		assert.htmlEqual(target.innerHTML, '<h1>Foo</h1>');
+
+		component.tag = null;
+		assert.htmlEqual(target.innerHTML, '');
+
+		component.tag = 'div';
+		assert.htmlEqual(target.innerHTML, '<div>Foo</div>');
+
+		component.tag = false;
+		assert.htmlEqual(target.innerHTML, '');
+
+		component.tag = 'span';
+		assert.htmlEqual(target.innerHTML, '<span>Foo</span>');
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-undefined-tag/main.svelte b/test/runtime/samples/dynamic-element-undefined-tag/main.svelte
new file mode 100644
index 0000000000..6aca93ca13
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-undefined-tag/main.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let tag;
+</script>
+
+<svelte:element this={tag}>Foo</svelte:element>
diff --git a/test/runtime/samples/dynamic-element-variable/_config.js b/test/runtime/samples/dynamic-element-variable/_config.js
new file mode 100644
index 0000000000..20e0fa9418
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-variable/_config.js
@@ -0,0 +1,20 @@
+export default {
+	props: {
+		tag: 'div',
+		text: 'Foo'
+	},
+	html: '<div>Foo</div>',
+
+	test({ assert, component, target }) {
+		const div = target.firstChild;
+		component.tag = 'nav';
+		component.text = 'Bar';
+
+		assert.htmlEqual(target.innerHTML, `
+			<nav>Bar</nav>
+		`);
+
+		const h1 = target.firstChild;
+		assert.notEqual(div, h1);
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-variable/main.svelte b/test/runtime/samples/dynamic-element-variable/main.svelte
new file mode 100644
index 0000000000..d60953bba5
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-variable/main.svelte
@@ -0,0 +1,6 @@
+<script>
+  export let tag = "div";
+  export let text = "Foo";
+</script>
+
+<svelte:element this={tag}>{text}</svelte:element>
\ No newline at end of file
diff --git a/test/runtime/samples/dynamic-element-void-tag/_config.js b/test/runtime/samples/dynamic-element-void-tag/_config.js
new file mode 100644
index 0000000000..60b97e973d
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-void-tag/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		propTag: 'hr'
+	},
+	html: '<h1></h1><col><img><hr><input><br>',
+
+	test({ assert, component, target }) {
+		assert.htmlEqual(target.innerHTML, '<h1></h1><col><img><hr><input><br>');
+		component.propTag = 'link';
+		assert.htmlEqual(target.innerHTML, '<h1></h1><col><img><link><input><br>');
+	}
+};
diff --git a/test/runtime/samples/dynamic-element-void-tag/main.svelte b/test/runtime/samples/dynamic-element-void-tag/main.svelte
new file mode 100644
index 0000000000..792008aca6
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-void-tag/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let propTag;
+	const static_tag = 'input';
+	const func_tag = () => 'br';
+</script>
+
+<h1></h1>
+<svelte:element this="{'col'}"></svelte:element>
+<svelte:element this="img"></svelte:element>
+<svelte:element this="{propTag}"></svelte:element>
+<svelte:element this="{static_tag}"></svelte:element>
+<svelte:element this="{func_tag()}"></svelte:element>
diff --git a/test/runtime/samples/dynamic-element-void-with-content-1/_config.js b/test/runtime/samples/dynamic-element-void-with-content-1/_config.js
new file mode 100644
index 0000000000..4016725e21
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-void-with-content-1/_config.js
@@ -0,0 +1,9 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+	props: {
+		tag: 'br'
+	},
+	error: '<svelte:element this="br"> is self-closing and cannot have content.'
+};
diff --git a/test/runtime/samples/dynamic-element-void-with-content-1/main.svelte b/test/runtime/samples/dynamic-element-void-with-content-1/main.svelte
new file mode 100644
index 0000000000..bcf3fed2c3
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-void-with-content-1/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let tag;
+</script>
+
+<svelte:element this='{tag}'>foo</svelte:element>
diff --git a/test/runtime/samples/dynamic-element-void-with-content-2/_config.js b/test/runtime/samples/dynamic-element-void-with-content-2/_config.js
new file mode 100644
index 0000000000..4016725e21
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-void-with-content-2/_config.js
@@ -0,0 +1,9 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+	props: {
+		tag: 'br'
+	},
+	error: '<svelte:element this="br"> is self-closing and cannot have content.'
+};
diff --git a/test/runtime/samples/dynamic-element-void-with-content-2/main.svelte b/test/runtime/samples/dynamic-element-void-with-content-2/main.svelte
new file mode 100644
index 0000000000..0225654545
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-void-with-content-2/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let tag;
+</script>
+
+<svelte:element this='{tag}'><div>bar</div></svelte:element>
diff --git a/test/runtime/samples/dynamic-element-void-with-content-3/Nested.svelte b/test/runtime/samples/dynamic-element-void-with-content-3/Nested.svelte
new file mode 100644
index 0000000000..e62294a135
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-void-with-content-3/Nested.svelte
@@ -0,0 +1 @@
+<div>This is nested</div>
diff --git a/test/runtime/samples/dynamic-element-void-with-content-3/_config.js b/test/runtime/samples/dynamic-element-void-with-content-3/_config.js
new file mode 100644
index 0000000000..4016725e21
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-void-with-content-3/_config.js
@@ -0,0 +1,9 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+	props: {
+		tag: 'br'
+	},
+	error: '<svelte:element this="br"> is self-closing and cannot have content.'
+};
diff --git a/test/runtime/samples/dynamic-element-void-with-content-3/main.svelte b/test/runtime/samples/dynamic-element-void-with-content-3/main.svelte
new file mode 100644
index 0000000000..97045e1766
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-void-with-content-3/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Nested from './Nested.svelte';
+	export let tag;
+</script>
+
+<svelte:element this='{tag}'><Nested/></svelte:element>
diff --git a/test/runtime/samples/dynamic-element-void-with-content-4/Nested.svelte b/test/runtime/samples/dynamic-element-void-with-content-4/Nested.svelte
new file mode 100644
index 0000000000..e62294a135
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-void-with-content-4/Nested.svelte
@@ -0,0 +1 @@
+<div>This is nested</div>
diff --git a/test/runtime/samples/dynamic-element-void-with-content-4/_config.js b/test/runtime/samples/dynamic-element-void-with-content-4/_config.js
new file mode 100644
index 0000000000..4b2a279aaa
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-void-with-content-4/_config.js
@@ -0,0 +1,6 @@
+export default {
+	props: {
+		tag: 'br'
+	},
+	html: '<br>'
+};
diff --git a/test/runtime/samples/dynamic-element-void-with-content-4/main.svelte b/test/runtime/samples/dynamic-element-void-with-content-4/main.svelte
new file mode 100644
index 0000000000..97045e1766
--- /dev/null
+++ b/test/runtime/samples/dynamic-element-void-with-content-4/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Nested from './Nested.svelte';
+	export let tag;
+</script>
+
+<svelte:element this='{tag}'><Nested/></svelte:element>
diff --git a/test/runtime/samples/each-block-after-let/Child.svelte b/test/runtime/samples/each-block-after-let/Child.svelte
new file mode 100644
index 0000000000..35102eaaa6
--- /dev/null
+++ b/test/runtime/samples/each-block-after-let/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let value;
+</script>
+
+<slot value={value}/>
diff --git a/test/runtime/samples/each-block-after-let/_config.js b/test/runtime/samples/each-block-after-let/_config.js
new file mode 100644
index 0000000000..3d2d8b3bac
--- /dev/null
+++ b/test/runtime/samples/each-block-after-let/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: `
+		<div>a a</div>
+		<div>b</div>
+		<div>a a</div>
+	`
+};
diff --git a/test/runtime/samples/each-block-after-let/main.svelte b/test/runtime/samples/each-block-after-let/main.svelte
new file mode 100644
index 0000000000..6a9b99442a
--- /dev/null
+++ b/test/runtime/samples/each-block-after-let/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Child from './Child.svelte';
+	const value = ['a'];
+</script>
+
+<div>
+	{value[0]}
+	{#each value as n}{n}{/each}
+</div>
+<div>
+	<Child value={['b']} let:value>{value[0]}</Child>
+</div>
+<div>
+	{value[0]}
+	{#each value as n}{n}{/each}
+</div>
diff --git a/test/runtime/samples/each-block-array-literal/_config.js b/test/runtime/samples/each-block-array-literal/_config.js
new file mode 100644
index 0000000000..164e4730bc
--- /dev/null
+++ b/test/runtime/samples/each-block-array-literal/_config.js
@@ -0,0 +1,19 @@
+export default {
+	html: `
+		<button>racoon</button>
+		<button>eagle</button>
+	`,
+
+	test({ assert, component, target }) {
+		assert.htmlEqual(target.innerHTML,`
+			<button>racoon</button>
+			<button>eagle</button>
+		`);
+
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		button.dispatchEvent(event);
+		assert.equal(component.clicked, 'racoon');
+	}
+};
diff --git a/test/runtime/samples/each-block-array-literal/main.svelte b/test/runtime/samples/each-block-array-literal/main.svelte
new file mode 100644
index 0000000000..ade8430bcc
--- /dev/null
+++ b/test/runtime/samples/each-block-array-literal/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let clicked = null;
+</script>
+
+{#each ['racoon', 'eagle'] as animal}
+	<button on:click="{() => clicked = animal}">{animal}</button>
+{/each}
diff --git a/test/runtime/samples/each-block-component-no-props/Child.svelte b/test/runtime/samples/each-block-component-no-props/Child.svelte
new file mode 100644
index 0000000000..86ef4f3319
--- /dev/null
+++ b/test/runtime/samples/each-block-component-no-props/Child.svelte
@@ -0,0 +1 @@
+<p>hello</p>
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-component-no-props/_config.js b/test/runtime/samples/each-block-component-no-props/_config.js
new file mode 100644
index 0000000000..329da68324
--- /dev/null
+++ b/test/runtime/samples/each-block-component-no-props/_config.js
@@ -0,0 +1,16 @@
+export default {
+	html: `
+		<p>hello</p>
+	`,
+
+	async test({ assert, component, target }) {
+		await component.remove();
+		assert.htmlEqual(target.innerHTML, '');
+
+		await component.add();
+		assert.htmlEqual(target.innerHTML, '<p>hello</p>');
+
+		await component.remove();
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/each-block-component-no-props/main.svelte b/test/runtime/samples/each-block-component-no-props/main.svelte
new file mode 100644
index 0000000000..01299fe314
--- /dev/null
+++ b/test/runtime/samples/each-block-component-no-props/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Child from './Child.svelte';
+
+	let items = [1];
+
+	export function add() {
+		items = [1];
+	}
+
+	export function remove() {
+		items = [];
+	}
+</script>
+
+{#each items as item}
+	<Child/>
+{/each}
diff --git a/test/runtime/samples/each-block-containing-component-in-if/Nested.svelte b/test/runtime/samples/each-block-containing-component-in-if/Nested.svelte
new file mode 100644
index 0000000000..534db38385
--- /dev/null
+++ b/test/runtime/samples/each-block-containing-component-in-if/Nested.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let show;
+	export let fields;
+</script>
+
+{#if show}
+	{#each fields as field}
+		<span>{field}</span>
+	{/each}
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-containing-component-in-if/_config.js b/test/runtime/samples/each-block-containing-component-in-if/_config.js
new file mode 100644
index 0000000000..d617d23cd3
--- /dev/null
+++ b/test/runtime/samples/each-block-containing-component-in-if/_config.js
@@ -0,0 +1,32 @@
+export default {
+	props: {
+		show: false,
+		fields: [1, 2]
+	},
+
+	html: '<div></div>',
+
+	test({ assert, component, target }) {
+		component.show = true;
+		component.fields = [1, 2, 3];
+
+		assert.htmlEqual( target.innerHTML, `
+			<div>
+				<span>1</span>
+				<span>2</span>
+				<span>3</span>
+			</div>
+		` );
+
+		component.fields = [1, 2, 3, 4];
+
+		assert.htmlEqual( target.innerHTML, `
+			<div>
+				<span>1</span>
+				<span>2</span>
+				<span>3</span>
+				<span>4</span>
+			</div>
+		` );
+	}
+};
diff --git a/test/runtime/samples/each-block-containing-component-in-if/main.svelte b/test/runtime/samples/each-block-containing-component-in-if/main.svelte
new file mode 100644
index 0000000000..049948fa56
--- /dev/null
+++ b/test/runtime/samples/each-block-containing-component-in-if/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let show;
+	export let fields;
+</script>
+
+<div>
+	<Nested {show} {fields}/>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-containing-if/_config.js b/test/runtime/samples/each-block-containing-if/_config.js
new file mode 100644
index 0000000000..51284e060b
--- /dev/null
+++ b/test/runtime/samples/each-block-containing-if/_config.js
@@ -0,0 +1,12 @@
+export default {
+	test({ assert, component, target }) {
+		const items = component.items;
+		items.forEach(item => item.completed = false);
+
+		component.currentFilter = 'all';
+
+		assert.htmlEqual(target.innerHTML, `
+			<ul><li>one</li><li>two</li><li>three</li></ul>
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-containing-if/main.svelte b/test/runtime/samples/each-block-containing-if/main.svelte
new file mode 100644
index 0000000000..83aaf35c49
--- /dev/null
+++ b/test/runtime/samples/each-block-containing-if/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	export let items = [
+		{ description: 'one', completed: false },
+		{ description: 'two', completed: false },
+		{ description: 'three', completed: false }
+	];
+	export let currentFilter = 'completed';
+
+	function filter(item, currentFilter) {
+		if ( currentFilter === 'all' ) return true;
+		if ( currentFilter === 'completed' ) return item.completed;
+		if ( currentFilter === 'active' ) return !item.completed;
+	}
+</script>
+
+<ul>
+	{#each items as item}
+		{#if filter(item, currentFilter)}
+			<li>{item.description}</li>
+		{/if}
+	{/each}
+</ul>
diff --git a/test/runtime/samples/each-block-deconflict-name-context/_config.js b/test/runtime/samples/each-block-deconflict-name-context/_config.js
new file mode 100644
index 0000000000..c776a30928
--- /dev/null
+++ b/test/runtime/samples/each-block-deconflict-name-context/_config.js
@@ -0,0 +1,30 @@
+export default {
+	props: {
+		foo: {
+			bar: ['x', 'y', 'z']
+		}
+	},
+
+	html: `
+		<input>
+		<input>
+		<input>
+	`,
+
+	ssrHtml: `
+		<input value=x>
+		<input value=y>
+		<input value=z>
+	`,
+
+	test({ assert, component, target, window }) {
+		const inputs = target.querySelectorAll('input');
+
+		inputs[1].value = 'w';
+		inputs[1].dispatchEvent(new window.MouseEvent('input'));
+
+		assert.deepEqual(component.foo, {
+			bar: ['x', 'w', 'z']
+		});
+	}
+};
diff --git a/test/runtime/samples/each-block-deconflict-name-context/main.svelte b/test/runtime/samples/each-block-deconflict-name-context/main.svelte
new file mode 100644
index 0000000000..62c13b2e59
--- /dev/null
+++ b/test/runtime/samples/each-block-deconflict-name-context/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo;
+</script>
+
+{#each foo.bar as bar}
+	<input bind:value={bar}>
+{/each}
diff --git a/test/runtime/samples/each-block-destructured-array-sparse/_config.js b/test/runtime/samples/each-block-destructured-array-sparse/_config.js
new file mode 100644
index 0000000000..331c3aec1b
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-array-sparse/_config.js
@@ -0,0 +1,20 @@
+export default {
+	props: {
+		animalPawsEntries: [
+			['raccoon', 'hands'],
+			['eagle', 'wings']
+		]
+	},
+
+	html: `
+		<p>hands</p>
+		<p>wings</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.animalPawsEntries = [['foo', 'bar']];
+		assert.htmlEqual( target.innerHTML, `
+			<p>bar</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-destructured-array-sparse/main.svelte b/test/runtime/samples/each-block-destructured-array-sparse/main.svelte
new file mode 100644
index 0000000000..587017bc04
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-array-sparse/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let animalPawsEntries;
+</script>
+
+{#each animalPawsEntries as [, pawType]}
+	<p>{pawType}</p>
+{/each}
diff --git a/test/runtime/samples/each-block-destructured-array/_config.js b/test/runtime/samples/each-block-destructured-array/_config.js
new file mode 100644
index 0000000000..e2924c8656
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-array/_config.js
@@ -0,0 +1,20 @@
+export default {
+	props: {
+		animalPawsEntries: [
+			['raccoon', 'hands'],
+			['eagle', 'wings']
+		]
+	},
+
+	html: `
+		<p>raccoon: hands</p>
+		<p>eagle: wings</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.animalPawsEntries = [['foo', 'bar']];
+		assert.htmlEqual( target.innerHTML, `
+			<p>foo: bar</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-destructured-array/main.svelte b/test/runtime/samples/each-block-destructured-array/main.svelte
new file mode 100644
index 0000000000..db93ffa622
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-array/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let animalPawsEntries;
+</script>
+
+{#each animalPawsEntries as [animal, pawType]}
+	<p>{animal}: {pawType}</p>
+{/each}
diff --git a/test/runtime/samples/each-block-destructured-default-before-initialised/_config.js b/test/runtime/samples/each-block-destructured-default-before-initialised/_config.js
new file mode 100644
index 0000000000..c42261df40
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-default-before-initialised/_config.js
@@ -0,0 +1,5 @@
+export default {
+	error(assert, err) {
+		assert.ok(err.message === "Cannot access 'c' before initialization" || err.message === 'c is not defined');
+	}
+};
diff --git a/test/runtime/samples/each-block-destructured-default-before-initialised/main.svelte b/test/runtime/samples/each-block-destructured-default-before-initialised/main.svelte
new file mode 100644
index 0000000000..76eb09c0de
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-default-before-initialised/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let array = [{a: 1, c: 2}];
+</script>
+
+{#each array as { a, b = c, c }}
+	{a}{b}{c}
+{/each}
diff --git a/test/runtime/samples/each-block-destructured-default-binding/_config.js b/test/runtime/samples/each-block-destructured-default-binding/_config.js
new file mode 100644
index 0000000000..2ba27bff03
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-default-binding/_config.js
@@ -0,0 +1,23 @@
+export default {
+	html: `
+		<input />
+		<input />
+	`,
+	ssrHtml: `
+		<input value="" />
+		<input value="hello" />
+	`,
+
+	test({ assert, component, target, window }) {
+		const [input1, input2] = target.querySelectorAll('input');
+		assert.equal(input1.value, '');
+		assert.equal(input2.value, 'hello');
+
+		const inputEvent = new window.InputEvent('input');
+
+		input2.value = 'world';
+		input2.dispatchEvent(inputEvent);
+		assert.equal(input2.value, 'world');
+		assert.equal(component.array[1].value, 'world');
+	}
+};
diff --git a/test/runtime/samples/each-block-destructured-default-binding/main.svelte b/test/runtime/samples/each-block-destructured-default-binding/main.svelte
new file mode 100644
index 0000000000..e93a01038b
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-default-binding/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let array = [{ value: '' }, {}];
+</script>
+
+{#each array as { value = "hello" }}
+	<input bind:value />
+{/each}
diff --git a/test/runtime/samples/each-block-destructured-default/_config.js b/test/runtime/samples/each-block-destructured-default/_config.js
new file mode 100644
index 0000000000..0115c9d1ce
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-default/_config.js
@@ -0,0 +1,26 @@
+export default {
+	props: {
+		animalEntries: [
+			{ animal: 'raccoon', class: 'mammal', species: 'P. lotor', kilogram: 25, bmi: 0.04 },
+			{ animal: 'eagle', class: 'bird', kilogram: 5.4 },
+			{ animal: 'tiger', class: 'mammal', kilogram: 10, pound: 30 },
+			{ animal: 'lion', class: 'mammal', kilogram: 10, height: 50 },
+			{ animal: 'leopard', class: 'mammal', kilogram: 30, height: 50, bmi: 10 }
+		]
+	},
+
+	html: `
+		<p class="mammal">raccoon - P. lotor - 25kg (55 lb) - 30cm - 0.04</p>
+		<p class="bird">eagle - unknown - 5.4kg (12 lb) - 30cm - 0.006</p>
+		<p class="mammal">tiger - unknown - 10kg (30 lb) - 30cm - 0.011111111111111112</p>
+		<p class="mammal">lion - unknown - 10kg (22 lb) - 50cm - 0.004</p>
+		<p class="mammal">leopard - unknown - 30kg (66 lb) - 50cm - 10</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.animalEntries = [{ animal: 'cow', class: 'mammal', species: '‎B. taurus' }];
+		assert.htmlEqual(target.innerHTML, `
+			<p class="mammal">cow - ‎B. taurus - 50kg (110 lb) - 30cm - 0.05555555555555555</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-destructured-default/main.svelte b/test/runtime/samples/each-block-destructured-default/main.svelte
new file mode 100644
index 0000000000..44e720e174
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-default/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let animalEntries;
+	export const defaultHeight = 30;
+</script>
+
+{#each animalEntries as { animal, species = 'unknown', kilogram: weight = 50, pound = (weight * 2.2).toFixed(0), height = defaultHeight, bmi = weight / (height * height), ...props } }
+	<p {...props}>{animal} - {species} - {weight}kg ({pound} lb) - {height}cm - {bmi}</p>
+{/each}
diff --git a/test/runtime/samples/each-block-destructured-object-binding/_config.js b/test/runtime/samples/each-block-destructured-object-binding/_config.js
new file mode 100644
index 0000000000..2ab3e24397
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-object-binding/_config.js
@@ -0,0 +1,45 @@
+export default {
+	props: {
+		people: [{ name: { first: 'Doctor', last: 'Who' } }]
+	},
+
+	html: `
+		<input>
+		<input>
+		<p>Doctor Who</p>
+	`,
+
+	ssrHtml: `
+		<input value=Doctor>
+		<input value=Who>
+		<p>Doctor Who</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const inputs = target.querySelectorAll('input');
+
+		inputs[1].value = 'Oz';
+		await inputs[1].dispatchEvent(new window.Event('input'));
+
+		const { people } = component;
+
+		assert.deepEqual(people, [
+			{ name: { first: 'Doctor', last: 'Oz' } }
+		]);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<input>
+			<p>Doctor Oz</p>
+		`);
+
+		people[0].name.first = 'Frank';
+		component.people = people;
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<input>
+			<p>Frank Oz</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-destructured-object-binding/main.svelte b/test/runtime/samples/each-block-destructured-object-binding/main.svelte
new file mode 100644
index 0000000000..37993d83c1
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-object-binding/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let people;
+</script>
+
+{#each people as { name: { first: f, last: l } } }
+	<input bind:value={f}>
+	<input bind:value={l}>
+	<p>{f} {l}</p>
+{/each}
diff --git a/test/runtime/samples/each-block-destructured-object-reserved-key/_config.js b/test/runtime/samples/each-block-destructured-object-reserved-key/_config.js
new file mode 100644
index 0000000000..c04e984691
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-object-reserved-key/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<p>bar</p>
+	`
+};
diff --git a/test/runtime/samples/each-block-destructured-object-reserved-key/main.svelte b/test/runtime/samples/each-block-destructured-object-reserved-key/main.svelte
new file mode 100644
index 0000000000..c3e11c3ea1
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-object-reserved-key/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	const foo = [{ in: 'bar' }];
+</script>
+
+{#each foo as { in: bar }}
+	<p>{bar}</p>
+{/each}
diff --git a/test/runtime/samples/each-block-destructured-object-rest/_config.js b/test/runtime/samples/each-block-destructured-object-rest/_config.js
new file mode 100644
index 0000000000..be5d38b555
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-object-rest/_config.js
@@ -0,0 +1,20 @@
+export default {
+	props: {
+		animalEntries: [
+			{ animal: 'raccoon', class: 'mammal' },
+			{ animal: 'eagle', class: 'bird' }
+		]
+	},
+
+	html: `
+		<p class="mammal">raccoon</p>
+		<p class="bird">eagle</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.animalEntries = [{ animal: 'cow', class: 'mammal' }];
+		assert.htmlEqual(target.innerHTML, `
+			<p class="mammal">cow</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-destructured-object-rest/main.svelte b/test/runtime/samples/each-block-destructured-object-rest/main.svelte
new file mode 100644
index 0000000000..9c51b0ec23
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-object-rest/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let animalEntries;
+</script>
+
+{#each animalEntries as { animal, ...props } }
+	<p {...props}>{animal}</p>
+{/each}
diff --git a/test/runtime/samples/each-block-destructured-object/_config.js b/test/runtime/samples/each-block-destructured-object/_config.js
new file mode 100644
index 0000000000..feec72f402
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-object/_config.js
@@ -0,0 +1,20 @@
+export default {
+	props: {
+		animalPawsEntries: [
+			{ animal: 'raccoon', pawType: 'hands' },
+			{ animal: 'eagle', pawType: 'wings' }
+		]
+	},
+
+	html: `
+		<p>raccoon: hands</p>
+		<p>eagle: wings</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.animalPawsEntries = [{ animal: 'cow', pawType: 'hooves' }];
+		assert.htmlEqual( target.innerHTML, `
+			<p>cow: hooves</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-destructured-object/main.svelte b/test/runtime/samples/each-block-destructured-object/main.svelte
new file mode 100644
index 0000000000..8432d72335
--- /dev/null
+++ b/test/runtime/samples/each-block-destructured-object/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let animalPawsEntries;
+</script>
+
+{#each animalPawsEntries as { animal, pawType } }
+	<p>{animal}: {pawType}</p>
+{/each}
diff --git a/test/runtime/samples/each-block-dynamic-else-static/_config.js b/test/runtime/samples/each-block-dynamic-else-static/_config.js
new file mode 100644
index 0000000000..d8f45b3cdb
--- /dev/null
+++ b/test/runtime/samples/each-block-dynamic-else-static/_config.js
@@ -0,0 +1,32 @@
+export default {
+	props: {
+		animals: [ 'alpaca', 'baboon', 'capybara' ]
+	},
+
+	html: `
+		<p>alpaca</p>
+		<p>baboon</p>
+		<p>capybara</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.animals = [];
+		assert.htmlEqual( target.innerHTML, `
+			<p>no animals</p>
+		` );
+
+		// trigger an 'update' of the else block, to ensure that
+		// non-existent update method is not called
+		component.animals = [];
+
+		component.animals = ['wombat'];
+		assert.htmlEqual( target.innerHTML, `
+			<p>wombat</p>
+		` );
+
+		component.animals = ['dinosaur'];
+		assert.htmlEqual( target.innerHTML, `
+			<p>dinosaur</p>
+		` );
+	}
+};
diff --git a/test/runtime/samples/each-block-dynamic-else-static/main.svelte b/test/runtime/samples/each-block-dynamic-else-static/main.svelte
new file mode 100644
index 0000000000..ec8e82913a
--- /dev/null
+++ b/test/runtime/samples/each-block-dynamic-else-static/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let animals;
+</script>
+
+{#each animals as animal}
+	<p>{animal}</p>
+{:else}
+	<p>no animals</p>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-else-in-if/_config.js b/test/runtime/samples/each-block-else-in-if/_config.js
new file mode 100644
index 0000000000..24d1e5477a
--- /dev/null
+++ b/test/runtime/samples/each-block-else-in-if/_config.js
@@ -0,0 +1,17 @@
+export default {
+	html: `
+		<p>nothing</p>
+		<p>after</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.visible = false;
+		assert.htmlEqual(target.innerHTML, '');
+
+		component.visible = true;
+		assert.htmlEqual(target.innerHTML, `
+			<p>nothing</p>
+			<p>after</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-else-in-if/main.svelte b/test/runtime/samples/each-block-else-in-if/main.svelte
new file mode 100644
index 0000000000..d89f645d7f
--- /dev/null
+++ b/test/runtime/samples/each-block-else-in-if/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let visible = true;
+	const empty = [];
+</script>
+
+{#if visible}
+	{#each empty as item}
+		<p>{item}</p>
+	{:else}
+		<p>nothing</p>
+	{/each}
+
+	<p>after</p>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-else-mount-or-intro/Widget.svelte b/test/runtime/samples/each-block-else-mount-or-intro/Widget.svelte
new file mode 100644
index 0000000000..bc56c4d894
--- /dev/null
+++ b/test/runtime/samples/each-block-else-mount-or-intro/Widget.svelte
@@ -0,0 +1 @@
+Foo
diff --git a/test/runtime/samples/each-block-else-mount-or-intro/_config.js b/test/runtime/samples/each-block-else-mount-or-intro/_config.js
new file mode 100644
index 0000000000..15674ea651
--- /dev/null
+++ b/test/runtime/samples/each-block-else-mount-or-intro/_config.js
@@ -0,0 +1,4 @@
+export default {
+	props: { items: [] },
+	html: 'No items.'
+};
diff --git a/test/runtime/samples/each-block-else-mount-or-intro/main.svelte b/test/runtime/samples/each-block-else-mount-or-intro/main.svelte
new file mode 100644
index 0000000000..5b4d2e37a6
--- /dev/null
+++ b/test/runtime/samples/each-block-else-mount-or-intro/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let items;
+
+	import Widget from './Widget.svelte';
+</script>
+
+{#each items as item}
+	<Widget {item}/>
+{:else}
+	No items.
+{/each}
diff --git a/test/runtime/samples/each-block-else-starts-empty/_config.js b/test/runtime/samples/each-block-else-starts-empty/_config.js
new file mode 100644
index 0000000000..a20cedbbec
--- /dev/null
+++ b/test/runtime/samples/each-block-else-starts-empty/_config.js
@@ -0,0 +1,21 @@
+export default {
+	props: {
+		animals: [],
+		foo: 'something else'
+	},
+
+	html: `
+		before
+		<p>no animals, but rather something else</p>
+		after
+	`,
+
+	test({ assert, component, target }) {
+		component.animals = ['wombat'];
+		assert.htmlEqual(target.innerHTML, `
+			before
+			<p>wombat</p>
+			after
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-else-starts-empty/main.svelte b/test/runtime/samples/each-block-else-starts-empty/main.svelte
new file mode 100644
index 0000000000..3275cb1f83
--- /dev/null
+++ b/test/runtime/samples/each-block-else-starts-empty/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let animals;
+	export let foo;
+</script>
+
+before
+{#each animals as animal}
+	<p>{animal}</p>
+{:else}
+	<p>no animals, but rather {foo}</p>
+{/each}
+after
diff --git a/test/runtime/samples/each-block-else/_config.js b/test/runtime/samples/each-block-else/_config.js
new file mode 100644
index 0000000000..a5bf722a80
--- /dev/null
+++ b/test/runtime/samples/each-block-else/_config.js
@@ -0,0 +1,37 @@
+export default {
+	props: {
+		animals: ['alpaca', 'baboon', 'capybara'],
+		foo: 'something else'
+	},
+
+	html: `
+		before
+		<p>alpaca</p>
+		<p>baboon</p>
+		<p>capybara</p>
+		after
+	`,
+
+	test({ assert, component, target }) {
+		component.animals = [];
+		assert.htmlEqual(target.innerHTML, `
+			before
+			<p>no animals, but rather something else</p>
+			after
+		`);
+
+		component.foo = 'something other';
+		assert.htmlEqual(target.innerHTML, `
+			before
+			<p>no animals, but rather something other</p>
+			after
+		`);
+
+		component.animals = ['wombat'];
+		assert.htmlEqual(target.innerHTML, `
+			before
+			<p>wombat</p>
+			after
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-else/main.svelte b/test/runtime/samples/each-block-else/main.svelte
new file mode 100644
index 0000000000..3275cb1f83
--- /dev/null
+++ b/test/runtime/samples/each-block-else/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let animals;
+	export let foo;
+</script>
+
+before
+{#each animals as animal}
+	<p>{animal}</p>
+{:else}
+	<p>no animals, but rather {foo}</p>
+{/each}
+after
diff --git a/test/runtime/samples/each-block-empty-outro/Thing.svelte b/test/runtime/samples/each-block-empty-outro/Thing.svelte
new file mode 100644
index 0000000000..d3707c7d8b
--- /dev/null
+++ b/test/runtime/samples/each-block-empty-outro/Thing.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let thing;
+</script>
+
+<p>{thing}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-empty-outro/_config.js b/test/runtime/samples/each-block-empty-outro/_config.js
new file mode 100644
index 0000000000..0acf1f572f
--- /dev/null
+++ b/test/runtime/samples/each-block-empty-outro/_config.js
@@ -0,0 +1,18 @@
+export default {
+	props: {
+		visible: true,
+		empty: []
+	},
+
+	html: `
+		<div>
+			<p>text</p>
+		</div>
+	`,
+
+	test({ assert, component, target }) {
+		component.visible = false;
+
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/each-block-empty-outro/main.svelte b/test/runtime/samples/each-block-empty-outro/main.svelte
new file mode 100644
index 0000000000..338f471d31
--- /dev/null
+++ b/test/runtime/samples/each-block-empty-outro/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let visible;
+	export let empty;
+
+	import Thing from './Thing.svelte';
+</script>
+
+{#if visible}
+	<div>
+		{#each empty as thing}
+			<Thing {thing}/>
+		{/each}
+
+		<p>text</p>
+	</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-function/_config.js b/test/runtime/samples/each-block-function/_config.js
new file mode 100644
index 0000000000..fd4095690e
--- /dev/null
+++ b/test/runtime/samples/each-block-function/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: `
+		<p>1, 2, 3</p>
+		<p>2, 4, 6</p>
+		<p>3, 6, 9</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.numbers = [4, 5];
+		assert.htmlEqual( target.innerHTML, `
+			<p>16, 20</p>
+			<p>20, 25</p>
+		` );
+	}
+};
diff --git a/test/runtime/samples/each-block-function/main.svelte b/test/runtime/samples/each-block-function/main.svelte
new file mode 100644
index 0000000000..29e4f9f71e
--- /dev/null
+++ b/test/runtime/samples/each-block-function/main.svelte
@@ -0,0 +1,7 @@
+{#each numbers as i}
+	<p>{numbers.map(j => i * j).join(', ')}</p>
+{/each}
+
+<script>
+	export let numbers = [1, 2, 3];
+</script>
diff --git a/test/runtime/samples/each-block-in-if-block/_config.js b/test/runtime/samples/each-block-in-if-block/_config.js
new file mode 100644
index 0000000000..082b9b3033
--- /dev/null
+++ b/test/runtime/samples/each-block-in-if-block/_config.js
@@ -0,0 +1,13 @@
+export default {
+	props: {
+		dummy: false,
+		fruits: ['Apple', 'Banana', 'Tomato']
+	},
+
+	html: '<div><div>Apple</div><div>Banana</div><div>Tomato</div></div>',
+
+	test({ assert, component, target }) {
+		component.dummy = true;
+		assert.htmlEqual(target.innerHTML, '<div><div>Apple</div><div>Banana</div><div>Tomato</div></div>' );
+	}
+};
diff --git a/test/runtime/samples/each-block-in-if-block/main.svelte b/test/runtime/samples/each-block-in-if-block/main.svelte
new file mode 100644
index 0000000000..2746fd960a
--- /dev/null
+++ b/test/runtime/samples/each-block-in-if-block/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let fruits;
+</script>
+
+<div>
+	{#if fruits}
+		{#each fruits as fruit (fruit)}
+			<div>{fruit}</div>
+		{/each}
+	{/if}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-index-only/_config.js b/test/runtime/samples/each-block-index-only/_config.js
new file mode 100644
index 0000000000..80bbd69bd3
--- /dev/null
+++ b/test/runtime/samples/each-block-index-only/_config.js
@@ -0,0 +1,23 @@
+export default {
+	props: {
+		things: [0, 0, 0, 0, 0]
+	},
+
+	html: `
+		<p>0</p>
+		<p>1</p>
+		<p>2</p>
+		<p>3</p>
+		<p>4</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.things = [0, 0, 0];
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>0</p>
+			<p>1</p>
+			<p>2</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-index-only/main.svelte b/test/runtime/samples/each-block-index-only/main.svelte
new file mode 100644
index 0000000000..d1314cbb82
--- /dev/null
+++ b/test/runtime/samples/each-block-index-only/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let things;
+</script>
+
+{#each things as _, i}
+	<p>{i}</p>
+{/each}
diff --git a/test/runtime/samples/each-block-indexed/_config.js b/test/runtime/samples/each-block-indexed/_config.js
new file mode 100644
index 0000000000..bad727bbf1
--- /dev/null
+++ b/test/runtime/samples/each-block-indexed/_config.js
@@ -0,0 +1,6 @@
+export default {
+	props: {
+		animals: [ 'adder', 'blue whale', 'chameleon' ]
+	},
+	html: '<p>0: adder</p><p>1: blue whale</p><p>2: chameleon</p><!---->'
+};
diff --git a/test/runtime/samples/each-block-indexed/main.svelte b/test/runtime/samples/each-block-indexed/main.svelte
new file mode 100644
index 0000000000..3dc8797481
--- /dev/null
+++ b/test/runtime/samples/each-block-indexed/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let animals;
+</script>
+
+{#each animals as animal, i}
+	<p>{i}: {animal}</p>
+{/each}
diff --git a/test/runtime/samples/each-block-keyed-bind-group/_config.js b/test/runtime/samples/each-block-keyed-bind-group/_config.js
new file mode 100644
index 0000000000..0172c2efe7
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-bind-group/_config.js
@@ -0,0 +1,65 @@
+export default {
+	html: `
+		<label><input type="checkbox" value="Vanilla"> Vanilla</label>
+		<label><input type="checkbox" value="Strawberry"> Strawberry</label>
+		<label><input type="checkbox" value="Chocolate"> Chocolate</label>
+		<label><input type="checkbox" value="Lemon"> Lemon</label>
+		<label><input type="checkbox" value="Coconut"> Coconut</label>
+	`,
+
+	async test({ assert, target, window }) {
+		const [input1, input2, input3, input4, input5] = target.querySelectorAll('input');
+		const event = new window.Event('change');
+
+		input3.checked = true;
+		await input3.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label><input type="checkbox" value="Chocolate"> Chocolate</label>
+			<label><input type="checkbox" value="Vanilla"> Vanilla</label>
+			<label><input type="checkbox" value="Strawberry"> Strawberry</label>
+			<label><input type="checkbox" value="Lemon"> Lemon</label>
+			<label><input type="checkbox" value="Coconut"> Coconut</label>
+		`);
+
+		assert.equal(input1.checked, false);
+		assert.equal(input2.checked, false);
+		assert.equal(input3.checked, true);
+		assert.equal(input4.checked, false);
+		assert.equal(input5.checked, false);
+
+		input4.checked = true;
+		await input4.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label><input type="checkbox" value="Chocolate"> Chocolate</label>
+			<label><input type="checkbox" value="Lemon"> Lemon</label>
+			<label><input type="checkbox" value="Vanilla"> Vanilla</label>
+			<label><input type="checkbox" value="Strawberry"> Strawberry</label>
+			<label><input type="checkbox" value="Coconut"> Coconut</label>
+		`);
+
+		assert.equal(input1.checked, false);
+		assert.equal(input2.checked, false);
+		assert.equal(input3.checked, true);
+		assert.equal(input4.checked, true);
+		assert.equal(input5.checked, false);
+
+		input3.checked = false;
+		await input3.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label><input type="checkbox" value="Lemon"> Lemon</label>
+			<label><input type="checkbox" value="Chocolate"> Chocolate</label>
+			<label><input type="checkbox" value="Vanilla"> Vanilla</label>
+			<label><input type="checkbox" value="Strawberry"> Strawberry</label>
+			<label><input type="checkbox" value="Coconut"> Coconut</label>
+		`);
+
+		assert.equal(input1.checked, false);
+		assert.equal(input2.checked, false);
+		assert.equal(input3.checked, false);
+		assert.equal(input4.checked, true);
+		assert.equal(input5.checked, false);
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-bind-group/main.svelte b/test/runtime/samples/each-block-keyed-bind-group/main.svelte
new file mode 100644
index 0000000000..80c0db4f83
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-bind-group/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	let flavours = [
+		'Vanilla',
+		'Strawberry',
+		'Chocolate',
+		'Lemon',
+		'Coconut'
+	];
+
+	let choices = [];
+
+	// Put choices first by sorting
+	$: flavours = flavours.sort((a, b) => choices.includes(b) - choices.includes(a));
+</script>
+
+{#each flavours as flavour (flavour)}
+	<label>
+		<input type=checkbox bind:group={choices} value={flavour}>
+		{flavour}
+	</label>
+{/each}
diff --git a/test/runtime/samples/each-block-keyed-changed/_config.js b/test/runtime/samples/each-block-keyed-changed/_config.js
new file mode 100644
index 0000000000..afb3593b94
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-changed/_config.js
@@ -0,0 +1,13 @@
+export default {
+	props: {
+		titles: [{ name: 'a' }, { name: 'b' }, { name: 'c' }]
+	},
+
+	html: '<div class="container"><p>a</p><p>b</p><p>c</p></div>',
+
+	test({ assert, component, target }) {
+		component.titles = [{ name: 'b' }, { name: 'c' }, { name: 'a' }];
+
+		assert.htmlEqual(target.innerHTML, '<div class="container"><p>b</p><p>c</p><p>a</p></div>');
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-changed/main.svelte b/test/runtime/samples/each-block-keyed-changed/main.svelte
new file mode 100644
index 0000000000..1e1ef513a7
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-changed/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let titles;
+</script>
+<div class="container">
+	{#each titles as title (title.name)}
+		<p>{title.name}</p>
+	{/each}
+</div>
diff --git a/test/runtime/samples/each-block-keyed-component-action/Component.svelte b/test/runtime/samples/each-block-keyed-component-action/Component.svelte
new file mode 100644
index 0000000000..18a6c7452a
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-component-action/Component.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let action;
+</script>
+
+<div use:action />
diff --git a/test/runtime/samples/each-block-keyed-component-action/_config.js b/test/runtime/samples/each-block-keyed-component-action/_config.js
new file mode 100644
index 0000000000..af621330d3
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-component-action/_config.js
@@ -0,0 +1,21 @@
+export default {
+	test({ assert, component }) {
+		assert.equal(component.count, 0);
+
+		component.arr = ['2'];
+
+		assert.equal(component.count, 1);
+
+		component.arr = ['1', '2'];
+
+		assert.equal(component.count, 2);
+
+		component.arr = ['2', '1'];
+
+		assert.equal(component.count, 2);
+
+		component.arr = [];
+
+		assert.equal(component.count, 0);
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-component-action/main.svelte b/test/runtime/samples/each-block-keyed-component-action/main.svelte
new file mode 100644
index 0000000000..bfacdf402a
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-component-action/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Component from "./Component.svelte";
+	export let arr = [];
+	export let count = 0;
+	function action(node, params) {
+		count += 1;
+		return {
+			destroy() {
+				count -= 1;
+			}
+		};
+	}
+</script>
+
+{#each arr as item (item)}
+	<Component {action} />
+{/each}
diff --git a/test/runtime/samples/each-block-keyed-dyanmic-key/_config.js b/test/runtime/samples/each-block-keyed-dyanmic-key/_config.js
new file mode 100644
index 0000000000..949235ee48
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-dyanmic-key/_config.js
@@ -0,0 +1,31 @@
+let count = 0;
+let value = 'foo';
+
+export default {
+	props: {
+		value() {
+			count++;
+			return value;
+		}
+	},
+
+	before_test() {
+		count = 0;
+	},
+
+	html: `
+		<div>foo</div>
+		<div>foo</div>
+	`,
+
+	test({ assert, component, target }) {
+		value = 'bar';
+		component.id = 1;
+
+		assert.equal(count, 4);
+		assert.htmlEqual(target.innerHTML, `
+			<div>bar</div>
+			<div>bar</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-dyanmic-key/main.svelte b/test/runtime/samples/each-block-keyed-dyanmic-key/main.svelte
new file mode 100644
index 0000000000..9a15c7d98e
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-dyanmic-key/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let id = 0;
+	export let value;
+</script>
+
+{#each ['foo', 'bar'] as key (id + key)}
+	<div>{value()}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-keyed-dynamic-2/_config.js b/test/runtime/samples/each-block-keyed-dynamic-2/_config.js
new file mode 100644
index 0000000000..0c28656f5f
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-dynamic-2/_config.js
@@ -0,0 +1,23 @@
+export default {
+	html: `
+	<button>Click Me</button>
+	0
+	<ul></ul>
+	`,
+
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+
+		const event = new window.MouseEvent('click');
+		await button.dispatchEvent(event);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>Click Me</button>
+			1
+			<ul></ul>
+		`
+		);
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-dynamic-2/main.svelte b/test/runtime/samples/each-block-keyed-dynamic-2/main.svelte
new file mode 100644
index 0000000000..ab455a585e
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-dynamic-2/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	let num = 0;
+	let cards = [];
+	
+	function click() {
+		// updating cards via push should have no effect to the ul,
+		// since its being mutated instead of reassigned
+		cards.push(num++);
+	}
+</script>
+<button on:click={click}>
+	Click Me
+</button>
+
+{num}
+<ul>
+	{#each cards as c, i (i)}
+		<li>{c}</li>
+  {/each}
+</ul>
diff --git a/test/runtime/samples/each-block-keyed-dynamic/_config.js b/test/runtime/samples/each-block-keyed-dynamic/_config.js
new file mode 100644
index 0000000000..9ebf60975c
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-dynamic/_config.js
@@ -0,0 +1,31 @@
+export default {
+	props: {
+		todos: [
+			{ id: 123, description: 'buy milk' },
+			{ id: 234, description: 'drink milk' }
+		]
+	},
+
+	html: `
+		<p>buy milk</p>
+		<p>drink milk</p>
+	`,
+
+	test({ assert, component, target }) {
+		const [ p1, p2 ] = target.querySelectorAll('p');
+
+		component.todos = [
+			{ id: 123, description: 'buy beer' },
+			{ id: 234, description: 'drink beer' }
+		];
+		assert.htmlEqual(target.innerHTML, `
+			<p>buy beer</p>
+			<p>drink beer</p>
+		`);
+
+		const [ p3, p4 ] = target.querySelectorAll('p');
+
+		assert.equal(p1, p3);
+		assert.equal(p2, p4);
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-dynamic/main.svelte b/test/runtime/samples/each-block-keyed-dynamic/main.svelte
new file mode 100644
index 0000000000..0c50a62661
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-dynamic/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let todos;
+</script>
+
+{#each todos as todo (todo.id)}
+	<p>{todo.description}</p>
+{/each}
diff --git a/test/runtime/samples/each-block-keyed-else/_config.js b/test/runtime/samples/each-block-keyed-else/_config.js
new file mode 100644
index 0000000000..a5bf722a80
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-else/_config.js
@@ -0,0 +1,37 @@
+export default {
+	props: {
+		animals: ['alpaca', 'baboon', 'capybara'],
+		foo: 'something else'
+	},
+
+	html: `
+		before
+		<p>alpaca</p>
+		<p>baboon</p>
+		<p>capybara</p>
+		after
+	`,
+
+	test({ assert, component, target }) {
+		component.animals = [];
+		assert.htmlEqual(target.innerHTML, `
+			before
+			<p>no animals, but rather something else</p>
+			after
+		`);
+
+		component.foo = 'something other';
+		assert.htmlEqual(target.innerHTML, `
+			before
+			<p>no animals, but rather something other</p>
+			after
+		`);
+
+		component.animals = ['wombat'];
+		assert.htmlEqual(target.innerHTML, `
+			before
+			<p>wombat</p>
+			after
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-else/main.svelte b/test/runtime/samples/each-block-keyed-else/main.svelte
new file mode 100644
index 0000000000..2a82653ff1
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-else/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let animals;
+	export let foo;
+</script>
+
+before
+{#each animals as animal (animal)}
+	<p>{animal}</p>
+{:else}
+	<p>no animals, but rather {foo}</p>
+{/each}
+after
diff --git a/test/runtime/samples/each-block-keyed-empty/_config.js b/test/runtime/samples/each-block-keyed-empty/_config.js
new file mode 100644
index 0000000000..dfa810b3ff
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-empty/_config.js
@@ -0,0 +1,7 @@
+export default {
+	props: {
+		x: [{ z: 1 }, { z: 2 }]
+	},
+
+	html: ''
+};
diff --git a/test/runtime/samples/each-block-keyed-empty/main.svelte b/test/runtime/samples/each-block-keyed-empty/main.svelte
new file mode 100644
index 0000000000..f8ee322ce6
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-empty/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x;
+</script>
+
+{#each x as y (y.z)}{/each}
diff --git a/test/runtime/samples/each-block-keyed-html-b/_config.js b/test/runtime/samples/each-block-keyed-html-b/_config.js
new file mode 100644
index 0000000000..6343a31769
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-html-b/_config.js
@@ -0,0 +1,14 @@
+export default {
+	html: `
+		<div><span>hello</span> John</div>
+		<div><span>hello</span> Jill</div>
+	`,
+
+	test({ assert, component, target }) {
+		component.names = component.names.reverse();
+		assert.htmlEqual(target.innerHTML, `
+			<div><span>hello</span> Jill</div>
+			<div><span>hello</span> John</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-html-b/main.svelte b/test/runtime/samples/each-block-keyed-html-b/main.svelte
new file mode 100644
index 0000000000..02955577fc
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-html-b/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let names = ['John', 'Jill'];
+</script>
+
+{#each names as name (name)}
+	<div>
+		<span>hello</span>
+		{@html name}
+	</div>
+{/each}
+
diff --git a/test/runtime/samples/each-block-keyed-html/_config.js b/test/runtime/samples/each-block-keyed-html/_config.js
new file mode 100644
index 0000000000..3ece052d5c
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-html/_config.js
@@ -0,0 +1,10 @@
+export default {
+	html: `
+		JohnJill
+	`,
+
+	test({ assert, component, target }) {
+		component.names = component.names.reverse();
+		assert.htmlEqual(target.innerHTML, 'JillJohn');
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-html/main.svelte b/test/runtime/samples/each-block-keyed-html/main.svelte
new file mode 100644
index 0000000000..97c5f8c898
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-html/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let names = ['John', 'Jill'];
+</script>
+
+{#each names as name (name)}
+	{@html name}
+{/each}
+
diff --git a/test/runtime/samples/each-block-keyed-iife/_config.js b/test/runtime/samples/each-block-keyed-iife/_config.js
new file mode 100644
index 0000000000..da0b0aeac1
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-iife/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: `
+		<div>1</div>
+		<div>2</div>
+		<div>3</div>
+	`
+};
diff --git a/test/runtime/samples/each-block-keyed-iife/main.svelte b/test/runtime/samples/each-block-keyed-iife/main.svelte
new file mode 100644
index 0000000000..8753357bae
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-iife/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	const arr = [1, 2, 3];
+</script>
+
+{#each arr as item ((() => item)())}
+	<div>
+		{item}
+	</div>
+{/each}
diff --git a/test/runtime/samples/each-block-keyed-index-in-event-handler/_config.js b/test/runtime/samples/each-block-keyed-index-in-event-handler/_config.js
new file mode 100644
index 0000000000..6c9d754e57
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-index-in-event-handler/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<button>remove</button>
+		<button>remove</button>
+		<button>remove</button>
+	`,
+
+	async test({ assert, target, window }) {
+		const click = new window.MouseEvent('click');
+
+		await target.querySelectorAll('button')[1].dispatchEvent(click);
+		await target.querySelectorAll('button')[1].dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>remove</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-index-in-event-handler/main.svelte b/test/runtime/samples/each-block-keyed-index-in-event-handler/main.svelte
new file mode 100644
index 0000000000..7bb14e88f0
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-index-in-event-handler/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	let list = ["a", "b", "c"];
+
+	const remove = index => {
+		list.splice(index, 1);
+		list = list;
+	};
+</script>
+
+{#each list as value, index (value)}
+	{#if value}
+		<button on:click="{e => remove(index)}">
+			remove
+		</button>
+	{/if}
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-keyed-nested/Child.svelte b/test/runtime/samples/each-block-keyed-nested/Child.svelte
new file mode 100644
index 0000000000..e7ed726850
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-nested/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let id;
+</script>
+
+{id}
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-keyed-nested/_config.js b/test/runtime/samples/each-block-keyed-nested/_config.js
new file mode 100644
index 0000000000..3440874a8c
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-nested/_config.js
@@ -0,0 +1,16 @@
+export default {
+	html: `
+		1
+	`,
+
+	test({ assert, component, target }) {
+		component.desks = [
+			{
+				id: 1,
+				teams: []
+			}
+		];
+
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-nested/main.svelte b/test/runtime/samples/each-block-keyed-nested/main.svelte
new file mode 100644
index 0000000000..86f665a5e7
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-nested/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Child from './Child.svelte';
+
+	export let desks = [
+		{
+			id: 1,
+			teams: [{ id: 1 }]
+		}
+	];
+</script>
+
+{#each desks as desk (desk.id)}
+	{#each desk.teams as team (team.id)}
+		<Child id={team.id} />
+	{/each}
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-keyed-non-prop/_config.js b/test/runtime/samples/each-block-keyed-non-prop/_config.js
new file mode 100644
index 0000000000..2cccbedef0
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-non-prop/_config.js
@@ -0,0 +1,29 @@
+export default {
+	props: {
+		words: ['foo', 'bar', 'baz']
+	},
+
+	html: `
+		<p>foo</p>
+		<p>bar</p>
+		<p>baz</p>
+	`,
+
+	test({ assert, component, target }) {
+		const [p1, p2, p3] = target.querySelectorAll('p');
+
+		component.words = ['foo', 'baz'];
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>foo</p>
+			<p>baz</p>
+		`);
+
+		const [p4, p5] = target.querySelectorAll('p');
+
+		assert.ok(!target.contains(p2), '<p> element should be removed');
+
+		assert.equal(p1, p4, 'first <p> element should be retained');
+		assert.equal(p3, p5, 'last <p> element should be retained');
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-non-prop/main.svelte b/test/runtime/samples/each-block-keyed-non-prop/main.svelte
new file mode 100644
index 0000000000..9b68992d3d
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-non-prop/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let words;
+</script>
+
+{#each words as word (word)}
+	<p>{word}</p>
+{/each}
diff --git a/test/runtime/samples/each-block-keyed-object-identity/_config.js b/test/runtime/samples/each-block-keyed-object-identity/_config.js
new file mode 100644
index 0000000000..57f5422274
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-object-identity/_config.js
@@ -0,0 +1,25 @@
+export default {
+	props: {
+		todos: [
+			{ description: 'implement keyed each blocks' },
+			{ description: 'implement client-side hydration' }
+		]
+	},
+
+	html: `
+		<p>1: implement keyed each blocks</p>
+		<p>2: implement client-side hydration</p>
+	`,
+
+	test({ assert, component, target }) {
+		const [p1, p2] = target.querySelectorAll('p');
+
+		component.todos = [component.todos[1]];
+		assert.htmlEqual(target.innerHTML, '<p>1: implement client-side hydration</p>');
+
+		const [p3] = target.querySelectorAll('p');
+
+		assert.ok(!target.contains(p1), 'first <p> element should be removed');
+		assert.equal(p2, p3, 'second <p> element should be retained');
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-object-identity/main.svelte b/test/runtime/samples/each-block-keyed-object-identity/main.svelte
new file mode 100644
index 0000000000..3a1a46d7ec
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-object-identity/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let todos;
+</script>
+
+{#each todos as todo, i (todo)}
+	<p>{i+1}: {todo.description}</p>
+{/each}
diff --git a/test/runtime/samples/each-block-keyed-random-permute/_config.js b/test/runtime/samples/each-block-keyed-random-permute/_config.js
new file mode 100644
index 0000000000..88330c4509
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-random-permute/_config.js
@@ -0,0 +1,62 @@
+const VALUES = Array.from('abcdefghijklmnopqrstuvwxyz');
+
+function toObjects(array) {
+	return array.split('').map(x => ({ id: x }));
+}
+
+function permute() {
+	const values = VALUES.slice();
+	const number = Math.floor(Math.random() * VALUES.length);
+	const permuted = [];
+	for (let i = 0; i < number; i++) {
+		permuted.push(
+			...values.splice(Math.floor(Math.random() * (number - i)), 1)
+		);
+	}
+
+	return permuted.join('');
+}
+
+export default {
+	props: {
+		values: toObjects('abc')
+	},
+
+	html: '(a)(b)(c)',
+
+	test({ assert, component, target }) {
+		function test(sequence) {
+			const previous = target.textContent;
+			const expected = sequence.split('').map(x => `(${x})`).join('');
+			component.values = toObjects(sequence);
+			assert.htmlEqual(
+				target.innerHTML,
+				expected,
+				`\n${previous} -> ${expected}\n${target.textContent}`
+			);
+		}
+
+		// first, some fixed tests so that we can debug them
+		test('abc');
+		test('abcd');
+		test('abecd');
+		test('fabecd');
+		test('fabed');
+		test('beadf');
+		test('ghbeadf');
+		test('gf');
+		test('gc');
+		test('g');
+		test('');
+		test('abc');
+		test('duqbmineapjhtlofrskcg');
+		test('hdnkjougmrvftewsqpailcb');
+		test('bidhfacge');
+		test('kgjnempcboaflidh');
+		test('fekbijachgd');
+		test('kdmlgfbicheja');
+
+		// then, we party
+		for (let i = 0; i < 100; i += 1) test(permute());
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-random-permute/main.svelte b/test/runtime/samples/each-block-keyed-random-permute/main.svelte
new file mode 100644
index 0000000000..de70e90815
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-random-permute/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let values;
+</script>
+
+{#each values as value (value.id)}
+	({value.id})
+{/each}
diff --git a/test/runtime/samples/each-block-keyed-recursive/_config.js b/test/runtime/samples/each-block-keyed-recursive/_config.js
new file mode 100644
index 0000000000..7ad044228b
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-recursive/_config.js
@@ -0,0 +1,25 @@
+export default {
+	props: {
+		tree: [
+			{id: 1, sub: null},
+			{id: 2, sub: [{id: 11}]}
+		]
+	},
+
+	html: `
+		<div>1</div>
+		<div>2\n<div>11</div></div>
+	`,
+
+	test({ assert, component, target }) {
+		component.tree = [
+			{id: 1, sub: null},
+			{id: 2, sub: null}
+		];
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>1</div>
+			<div>2</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-recursive/main.svelte b/test/runtime/samples/each-block-keyed-recursive/main.svelte
new file mode 100644
index 0000000000..5e90ec501c
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-recursive/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let tree;
+</script>
+
+{#each tree as item, i (item.id)}
+	<div>
+		{item.id}
+		{#if item.sub}
+			<svelte:self tree={item.sub}/>
+		{/if}
+	</div>
+{/each}
diff --git a/test/runtime/samples/each-block-keyed-shift/Nested.svelte b/test/runtime/samples/each-block-keyed-shift/Nested.svelte
new file mode 100644
index 0000000000..82df711742
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-shift/Nested.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let title;
+</script>
+
+<p>{title}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-keyed-shift/_config.js b/test/runtime/samples/each-block-keyed-shift/_config.js
new file mode 100644
index 0000000000..4e7809445c
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-shift/_config.js
@@ -0,0 +1,27 @@
+export default {
+	props: {
+		titles: [{ name: 'a' }, { name: 'b' }, { name: 'c' }]
+	},
+
+	html: `
+		<p>a</p>
+		<p>b</p>
+		<p>c</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.titles = [{ name: 'b' }, { name: 'c' }];
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>b</p>
+			<p>c</p>
+		`);
+
+		component.titles = [{ name: 'c' }];
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>c</p>
+		`);
+
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-shift/main.svelte b/test/runtime/samples/each-block-keyed-shift/main.svelte
new file mode 100644
index 0000000000..b8954e17fd
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-shift/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let titles;
+</script>
+
+{#each titles as title (title.name)}
+	<Nested title="{title.name}"/>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-keyed-siblings/_config.js b/test/runtime/samples/each-block-keyed-siblings/_config.js
new file mode 100644
index 0000000000..a52b6c404d
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-siblings/_config.js
@@ -0,0 +1,20 @@
+export default {
+	props: {
+		ones: [{ text: '1' }],
+		twos: [{ text: '2' }]
+	},
+
+	html: `
+		<div>1</div>
+		<div>2</div>
+	`,
+
+	test({ assert, component, target }) {
+		component.ones = [{ text: '11' }];
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>11</div>
+			<div>2</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-siblings/main.svelte b/test/runtime/samples/each-block-keyed-siblings/main.svelte
new file mode 100644
index 0000000000..561ea34c19
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-siblings/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let ones;
+	export let twos;
+</script>
+
+{#each ones as one (one.text)}
+	<div>{one.text}</div>
+{/each}
+
+{#each twos as two (two.text)}
+	<div>{two.text}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-keyed-static/_config.js b/test/runtime/samples/each-block-keyed-static/_config.js
new file mode 100644
index 0000000000..57800c454f
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-static/_config.js
@@ -0,0 +1,10 @@
+export default {
+	props: {
+		x: [{ z: 1 }, { z: 2 }]
+	},
+
+	html: `
+		<p>does not change</p>
+		<p>does not change</p>
+	`
+};
diff --git a/test/runtime/samples/each-block-keyed-static/main.svelte b/test/runtime/samples/each-block-keyed-static/main.svelte
new file mode 100644
index 0000000000..96c34dfc27
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-static/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let x;
+</script>
+
+{#each x as y (y.z)}
+	<p>does not change</p>
+{/each}
diff --git a/test/runtime/samples/each-block-keyed-unshift/Nested.svelte b/test/runtime/samples/each-block-keyed-unshift/Nested.svelte
new file mode 100644
index 0000000000..82df711742
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-unshift/Nested.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let title;
+</script>
+
+<p>{title}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-keyed-unshift/_config.js b/test/runtime/samples/each-block-keyed-unshift/_config.js
new file mode 100644
index 0000000000..1056c90c50
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-unshift/_config.js
@@ -0,0 +1,20 @@
+export default {
+	props: {
+		titles: [{ name: 'b' }, { name: 'c' }]
+	},
+
+	html: `
+		<p>b</p>
+		<p>c</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.titles = [{ name: 'a' }, { name: 'b' }, { name: 'c' }];
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>a</p>
+			<p>b</p>
+			<p>c</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-unshift/main.svelte b/test/runtime/samples/each-block-keyed-unshift/main.svelte
new file mode 100644
index 0000000000..b8954e17fd
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-unshift/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let titles;
+</script>
+
+{#each titles as title (title.name)}
+	<Nested title="{title.name}"/>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-keyed/_config.js b/test/runtime/samples/each-block-keyed/_config.js
new file mode 100644
index 0000000000..c756aa453b
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed/_config.js
@@ -0,0 +1,27 @@
+export default {
+	props: {
+		todos: [
+			{ id: 123, description: 'implement keyed each blocks' },
+			{ id: 234, description: 'implement client-side hydration' }
+		]
+	},
+
+	html: `
+		<p>1: implement keyed each blocks</p>
+		<p>2: implement client-side hydration</p>
+	`,
+
+	test({ assert, component, target }) {
+		const [ p1, p2 ] = target.querySelectorAll('p');
+
+		component.todos = [
+			{ id: 234, description: 'implement client-side hydration' }
+		];
+		assert.htmlEqual(target.innerHTML, '<p>1: implement client-side hydration</p>');
+
+		const [ p3 ] = target.querySelectorAll('p');
+
+		assert.ok(!target.contains(p1), 'first <p> element should be removed');
+		assert.equal(p2, p3, 'second <p> element should be retained');
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed/main.svelte b/test/runtime/samples/each-block-keyed/main.svelte
new file mode 100644
index 0000000000..520072ab2e
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let todos;
+</script>
+
+{#each todos as todo, i (todo.id)}
+	<p>{i+1}: {todo.description}</p>
+{/each}
diff --git a/test/runtime/samples/each-block-random-permute/_config.js b/test/runtime/samples/each-block-random-permute/_config.js
new file mode 100644
index 0000000000..f81dac2ef4
--- /dev/null
+++ b/test/runtime/samples/each-block-random-permute/_config.js
@@ -0,0 +1,33 @@
+const VALUES = Array.from( 'abcdefghijklmnopqrstuvwxyz' );
+
+function permute () {
+	const values = VALUES.slice();
+	const number = Math.floor(Math.random() * VALUES.length);
+	const permuted = [];
+	for (let i = 0; i < number; i++) {
+		permuted.push( ...values.splice( Math.floor( Math.random() * ( number - i ) ), 1 ) );
+	}
+
+	return {
+		data: permuted,
+		expected: permuted.length ? `(${permuted.join(')(')})` : ''
+	};
+}
+
+let step = permute();
+
+export default {
+	props: {
+		values: step.data
+	},
+
+	html: step.expected,
+
+	test({ assert, component, target }) {
+		for (let i = 0; i < 100; i++) {
+			step = permute();
+			component.values = step.data;
+			assert.htmlEqual( target.innerHTML, step.expected );
+		}
+	}
+};
diff --git a/test/runtime/samples/each-block-random-permute/main.svelte b/test/runtime/samples/each-block-random-permute/main.svelte
new file mode 100644
index 0000000000..0e7e2596c2
--- /dev/null
+++ b/test/runtime/samples/each-block-random-permute/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let values;
+</script>
+
+{#each values as value}
+	({value})
+{/each}
diff --git a/test/runtime/samples/each-block-recursive-with-function-condition/_config.js b/test/runtime/samples/each-block-recursive-with-function-condition/_config.js
new file mode 100644
index 0000000000..0795576bae
--- /dev/null
+++ b/test/runtime/samples/each-block-recursive-with-function-condition/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: `
+		<p>OK</p>
+		<p>OK</p>
+		<pre>one</pre>
+		<pre>two</pre>
+	`
+};
diff --git a/test/runtime/samples/each-block-recursive-with-function-condition/main.svelte b/test/runtime/samples/each-block-recursive-with-function-condition/main.svelte
new file mode 100644
index 0000000000..9b62c03cf6
--- /dev/null
+++ b/test/runtime/samples/each-block-recursive-with-function-condition/main.svelte
@@ -0,0 +1,13 @@
+<script>
+let a = () => true;
+export let data = [{ foo: [{ foo: [{bar: "one"}, {bar: "two"}] }] }];
+</script>
+
+{#each data as datum}
+	{#if datum.foo && a()}
+		<p>OK</p>
+		<svelte:self data={datum.foo}/>
+	{:else}
+		<pre>{datum.bar}</pre>
+	{/if}
+{/each}
diff --git a/test/runtime/samples/each-block-scope-shadow-bind-2/_config.js b/test/runtime/samples/each-block-scope-shadow-bind-2/_config.js
new file mode 100644
index 0000000000..655aac05b7
--- /dev/null
+++ b/test/runtime/samples/each-block-scope-shadow-bind-2/_config.js
@@ -0,0 +1,23 @@
+export default {
+	html: `
+    Hello
+    <input />
+	`,
+	ssrHtml: `
+		Hello
+		<input value="Hello"/>
+	`,
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+		input.value = 'abcd';
+		await input.dispatchEvent(new window.Event('input'));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+        abcd
+        <input />
+      `
+		);
+	}
+};
diff --git a/test/runtime/samples/each-block-scope-shadow-bind-2/main.svelte b/test/runtime/samples/each-block-scope-shadow-bind-2/main.svelte
new file mode 100644
index 0000000000..f5bff01e6c
--- /dev/null
+++ b/test/runtime/samples/each-block-scope-shadow-bind-2/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let a = [
+		{ a: 'Hello' }
+	];
+</script>
+
+{#each a as { a }}
+	{a}
+	<input bind:value={a} />
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-scope-shadow-bind-3/_config.js b/test/runtime/samples/each-block-scope-shadow-bind-3/_config.js
new file mode 100644
index 0000000000..42b7a96e34
--- /dev/null
+++ b/test/runtime/samples/each-block-scope-shadow-bind-3/_config.js
@@ -0,0 +1,105 @@
+export default {
+	html: `
+		<div>
+			Hello World
+			<input />
+			<input />
+		</div>
+		<div>
+			Sapper App
+			<input />
+			<input />
+		</div>
+	`,
+
+	ssrHtml: `
+		<div>
+			Hello World
+			<input value="Hello"/>
+			<input value="World"/>
+		</div>
+		<div>
+			Sapper App
+			<input value="Sapper"/>
+			<input value="App"/>
+		</div>
+	`,
+	async test({ assert, target, window }) {
+		const [input1, input2, input3, input4] = target.querySelectorAll('input');
+		input1.value = 'Awesome';
+		await input1.dispatchEvent(new window.Event('input'));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<div>
+					Awesome World
+					<input />
+					<input />
+				</div>
+				<div>
+					Sapper App
+					<input />
+					<input />
+				</div>
+      `
+		);
+
+		input2.value = 'Svelte';
+		await input2.dispatchEvent(new window.Event('input'));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<div>
+					Awesome Svelte
+					<input />
+					<input />
+				</div>
+				<div>
+					Sapper App
+					<input />
+					<input />
+				</div>
+			`
+		);
+
+		input3.value = 'Foo';
+		await input3.dispatchEvent(new window.Event('input'));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<div>
+					Awesome Svelte
+					<input />
+					<input />
+				</div>
+				<div>
+					Foo App
+					<input />
+					<input />
+				</div>
+			`
+		);
+
+		input4.value = 'Bar';
+		await input4.dispatchEvent(new window.Event('input'));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<div>
+					Awesome Svelte
+					<input />
+					<input />
+				</div>
+				<div>
+					Foo Bar
+					<input />
+					<input />
+				</div>
+			`
+		);
+	}
+};
diff --git a/test/runtime/samples/each-block-scope-shadow-bind-3/main.svelte b/test/runtime/samples/each-block-scope-shadow-bind-3/main.svelte
new file mode 100644
index 0000000000..2e8fe5e591
--- /dev/null
+++ b/test/runtime/samples/each-block-scope-shadow-bind-3/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	let a = [
+		['Hello', 'World'],
+		['Sapper', 'App'],
+	]
+</script>
+
+{#each a as a}
+	<div>
+		{a[0]} {a[1]}
+		<input bind:value={a[0]}>
+		<input bind:value={a[1]}>
+	</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-scope-shadow-bind-4/_config.js b/test/runtime/samples/each-block-scope-shadow-bind-4/_config.js
new file mode 100644
index 0000000000..f0570577b2
--- /dev/null
+++ b/test/runtime/samples/each-block-scope-shadow-bind-4/_config.js
@@ -0,0 +1,64 @@
+export default {
+	html: `
+		<div>
+			b: Hello
+			<input />
+		</div>
+		<button>Button</button>
+	`,
+	ssrHtml: `
+		<div>
+			b: Hello
+			<input value="Hello" />
+		</div>
+		<button>Button</button>
+	`,
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+		const button = target.querySelector('button');
+
+		input.value = 'Awesome';
+		await input.dispatchEvent(new window.Event('input'));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<div>
+					b: Awesome
+					<input />
+				</div>
+				<button>Button</button>
+      `
+		);
+
+
+		await button.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<div>
+					c: World
+					<input />
+				</div>
+				<button>Button</button>
+      `
+		);
+
+		assert.equal(input.value, 'World');
+
+		input.value = 'Svelte';
+		await input.dispatchEvent(new window.Event('input'));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<div>
+					c: Svelte
+					<input />
+				</div>
+				<button>Button</button>
+      `
+		);
+	}
+};
diff --git a/test/runtime/samples/each-block-scope-shadow-bind-4/main.svelte b/test/runtime/samples/each-block-scope-shadow-bind-4/main.svelte
new file mode 100644
index 0000000000..bc4f172dd0
--- /dev/null
+++ b/test/runtime/samples/each-block-scope-shadow-bind-4/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	let a = [
+		{ a: { b: 'Hello', c: 'World' }, key: 'b' },
+	];
+</script>
+
+{#each a as { a, key }}
+	<div>
+		{key}: {a[key]}
+		<input bind:value={a[key]}>
+	</div>
+{/each}
+
+<button on:click={() => a[0].key = 'c'}>Button</button>
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-scope-shadow-bind/_config.js b/test/runtime/samples/each-block-scope-shadow-bind/_config.js
new file mode 100644
index 0000000000..655aac05b7
--- /dev/null
+++ b/test/runtime/samples/each-block-scope-shadow-bind/_config.js
@@ -0,0 +1,23 @@
+export default {
+	html: `
+    Hello
+    <input />
+	`,
+	ssrHtml: `
+		Hello
+		<input value="Hello"/>
+	`,
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+		input.value = 'abcd';
+		await input.dispatchEvent(new window.Event('input'));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+        abcd
+        <input />
+      `
+		);
+	}
+};
diff --git a/test/runtime/samples/each-block-scope-shadow-bind/main.svelte b/test/runtime/samples/each-block-scope-shadow-bind/main.svelte
new file mode 100644
index 0000000000..f3471e179f
--- /dev/null
+++ b/test/runtime/samples/each-block-scope-shadow-bind/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let a = [
+		'Hello'
+	];
+</script>
+
+{#each a as a}
+	{a}
+	<input bind:value={a} />
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-scope-shadow-self/_config.js b/test/runtime/samples/each-block-scope-shadow-self/_config.js
new file mode 100644
index 0000000000..867aadfab9
--- /dev/null
+++ b/test/runtime/samples/each-block-scope-shadow-self/_config.js
@@ -0,0 +1,13 @@
+export default {
+	async test({ assert, component, target }) {
+		assert.equal(target.querySelectorAll('input').length, 3);
+
+		const input = target.querySelector('input');
+		input.value = 'svelte';
+		await input.dispatchEvent(new window.Event('input'));
+
+		assert.equal(target.querySelectorAll('input').length, 3);
+		assert.deepEqual(component.data, { a: 'svelte', b: 'B', c: 'C' });
+		assert.deepEqual(component.x, ['a', 'b', 'c']);
+	}
+};
diff --git a/test/runtime/samples/each-block-scope-shadow-self/main.svelte b/test/runtime/samples/each-block-scope-shadow-self/main.svelte
new file mode 100644
index 0000000000..e3643c524a
--- /dev/null
+++ b/test/runtime/samples/each-block-scope-shadow-self/main.svelte
@@ -0,0 +1,15 @@
+<script> 
+	export let x = ['a', 'b', 'c'];
+	export let data = {
+		'a': 'A',
+		'b': 'B',
+		'c': 'C',
+	};
+	export function getData() {
+		return data;
+	}
+</script>
+
+{#each x as x}
+	<input type=text bind:value={data[x]}>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-scope-shadow/_config.js b/test/runtime/samples/each-block-scope-shadow/_config.js
new file mode 100644
index 0000000000..dff254a7c4
--- /dev/null
+++ b/test/runtime/samples/each-block-scope-shadow/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '(alpaca)(baboon)(capybara) (lemur)'
+};
diff --git a/test/runtime/samples/each-block-scope-shadow/main.svelte b/test/runtime/samples/each-block-scope-shadow/main.svelte
new file mode 100644
index 0000000000..58294d35b4
--- /dev/null
+++ b/test/runtime/samples/each-block-scope-shadow/main.svelte
@@ -0,0 +1,10 @@
+{#each animals as animal}
+	({animal})
+{/each}
+
+({animal})
+
+<script>
+	export let animal = 'lemur';
+	export let animals = ['alpaca', 'baboon', 'capybara'];
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-static/_config.js b/test/runtime/samples/each-block-static/_config.js
new file mode 100644
index 0000000000..fc2fb28cca
--- /dev/null
+++ b/test/runtime/samples/each-block-static/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		items: []
+	},
+
+	html: '',
+
+	test({ assert, component, target }) {
+		component.items = ['x'];
+		assert.htmlEqual(target.innerHTML, 'foo');
+	}
+};
diff --git a/test/runtime/samples/each-block-static/main.svelte b/test/runtime/samples/each-block-static/main.svelte
new file mode 100644
index 0000000000..93ae37cf1a
--- /dev/null
+++ b/test/runtime/samples/each-block-static/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let items;
+</script>
+
+{#each items as item}
+	foo
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-string/_config.js b/test/runtime/samples/each-block-string/_config.js
new file mode 100644
index 0000000000..7366c964eb
--- /dev/null
+++ b/test/runtime/samples/each-block-string/_config.js
@@ -0,0 +1,10 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+	html: `
+		<div>f</div>
+		<div>o</div>
+		<div>o</div>
+	`
+};
diff --git a/test/runtime/samples/each-block-string/main.svelte b/test/runtime/samples/each-block-string/main.svelte
new file mode 100644
index 0000000000..ae60f0f6b3
--- /dev/null
+++ b/test/runtime/samples/each-block-string/main.svelte
@@ -0,0 +1,3 @@
+{#each 'foo' as c}
+	<div>{c}</div>
+{/each}
diff --git a/test/runtime/samples/each-block-text-node/_config.js b/test/runtime/samples/each-block-text-node/_config.js
new file mode 100644
index 0000000000..4209bb3bfc
--- /dev/null
+++ b/test/runtime/samples/each-block-text-node/_config.js
@@ -0,0 +1,14 @@
+export default {
+	props: {
+		animals: [ 'alpaca', 'baboon', 'capybara' ]
+	},
+
+	html: '(alpaca)(baboon)(capybara)',
+
+	test({ assert, component, target }) {
+		component.animals = [ 'caribou', 'dogfish' ];
+		assert.htmlEqual( target.innerHTML, '(caribou)(dogfish)' );
+		component.animals = [];
+		assert.htmlEqual( target.innerHTML, '' );
+	}
+};
diff --git a/test/runtime/samples/each-block-text-node/main.svelte b/test/runtime/samples/each-block-text-node/main.svelte
new file mode 100644
index 0000000000..c9be76b431
--- /dev/null
+++ b/test/runtime/samples/each-block-text-node/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let animals;
+</script>
+
+{#each animals as animal}
+	({animal})
+{/each}
diff --git a/test/runtime/samples/each-block-unkeyed-else-2/_config.js b/test/runtime/samples/each-block-unkeyed-else-2/_config.js
new file mode 100644
index 0000000000..a5bf722a80
--- /dev/null
+++ b/test/runtime/samples/each-block-unkeyed-else-2/_config.js
@@ -0,0 +1,37 @@
+export default {
+	props: {
+		animals: ['alpaca', 'baboon', 'capybara'],
+		foo: 'something else'
+	},
+
+	html: `
+		before
+		<p>alpaca</p>
+		<p>baboon</p>
+		<p>capybara</p>
+		after
+	`,
+
+	test({ assert, component, target }) {
+		component.animals = [];
+		assert.htmlEqual(target.innerHTML, `
+			before
+			<p>no animals, but rather something else</p>
+			after
+		`);
+
+		component.foo = 'something other';
+		assert.htmlEqual(target.innerHTML, `
+			before
+			<p>no animals, but rather something other</p>
+			after
+		`);
+
+		component.animals = ['wombat'];
+		assert.htmlEqual(target.innerHTML, `
+			before
+			<p>wombat</p>
+			after
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-unkeyed-else-2/main.svelte b/test/runtime/samples/each-block-unkeyed-else-2/main.svelte
new file mode 100644
index 0000000000..3275cb1f83
--- /dev/null
+++ b/test/runtime/samples/each-block-unkeyed-else-2/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let animals;
+	export let foo;
+</script>
+
+before
+{#each animals as animal}
+	<p>{animal}</p>
+{:else}
+	<p>no animals, but rather {foo}</p>
+{/each}
+after
diff --git a/test/runtime/samples/each-block/_config.js b/test/runtime/samples/each-block/_config.js
new file mode 100644
index 0000000000..6018ab67aa
--- /dev/null
+++ b/test/runtime/samples/each-block/_config.js
@@ -0,0 +1,24 @@
+export default {
+	props: {
+		animals: [ 'alpaca', 'baboon', 'capybara' ]
+	},
+
+	html: `
+		<p>alpaca</p>
+		<p>baboon</p>
+		<p>capybara</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.animals = [ 'alpaca', 'baboon', 'caribou', 'dogfish' ];
+		assert.htmlEqual( target.innerHTML, `
+			<p>alpaca</p>
+			<p>baboon</p>
+			<p>caribou</p>
+			<p>dogfish</p>
+		` );
+
+		component.animals = [];
+		assert.htmlEqual( target.innerHTML, '' );
+	}
+};
diff --git a/test/runtime/samples/each-block/main.svelte b/test/runtime/samples/each-block/main.svelte
new file mode 100644
index 0000000000..947ec6d723
--- /dev/null
+++ b/test/runtime/samples/each-block/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let animals;
+</script>
+
+{#each animals as animal}
+	<p>{animal}</p>
+{/each}
diff --git a/test/runtime/samples/each-blocks-assignment-2/_config.js b/test/runtime/samples/each-blocks-assignment-2/_config.js
new file mode 100644
index 0000000000..93f06956d0
--- /dev/null
+++ b/test/runtime/samples/each-blocks-assignment-2/_config.js
@@ -0,0 +1,20 @@
+export default {
+	html: `
+		<span class="content">foo</span>
+		<button>Test</button>
+	`,
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+
+		const clickEvent = new window.MouseEvent('click');
+		await button.dispatchEvent(clickEvent);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<span class="content">bar</span>
+			<button>Test</button>
+		`
+		);
+	}
+};
diff --git a/test/runtime/samples/each-blocks-assignment-2/main.svelte b/test/runtime/samples/each-blocks-assignment-2/main.svelte
new file mode 100644
index 0000000000..5ef3ae83ac
--- /dev/null
+++ b/test/runtime/samples/each-blocks-assignment-2/main.svelte
@@ -0,0 +1,12 @@
+<script>
+  let obj = {
+    prop: "foo"
+  };
+
+  let arr = [obj]
+</script>
+
+{#each arr as o}
+  <span class="content">{o.prop}</span>
+  <button on:click={ () => o = { ...o, prop: "bar" } }>Test</button>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/each-blocks-assignment/_config.js b/test/runtime/samples/each-blocks-assignment/_config.js
new file mode 100644
index 0000000000..5e22381e9e
--- /dev/null
+++ b/test/runtime/samples/each-blocks-assignment/_config.js
@@ -0,0 +1,97 @@
+export default {
+	html: `
+	<button>Add</button>
+	<span class="content">1</span>
+	<button>Test</button>
+	<span class="content">2</span>
+	<button>Test</button>
+	<span class="content">3</span>
+	<button>Test</button>
+	`,
+	async test({ assert, target, window }) {
+		let [incrementBtn, ...buttons] = target.querySelectorAll('button');
+
+		const clickEvent = new window.MouseEvent('click');
+		await buttons[0].dispatchEvent(clickEvent);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>Add</button>
+			<span class="content">2</span>
+			<button>Test</button>
+			<span class="content">2</span>
+			<button>Test</button>
+			<span class="content">3</span>
+			<button>Test</button>
+		`
+		);
+
+		await buttons[0].dispatchEvent(clickEvent);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>Add</button>
+			<span class="content">4</span>
+			<button>Test</button>
+			<span class="content">2</span>
+			<button>Test</button>
+			<span class="content">3</span>
+			<button>Test</button>
+		`
+		);
+
+		await buttons[2].dispatchEvent(clickEvent);
+		await buttons[2].dispatchEvent(clickEvent);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>Add</button>
+			<span class="content">4</span>
+			<button>Test</button>
+			<span class="content">2</span>
+			<button>Test</button>
+			<span class="content">12</span>
+			<button>Test</button>
+		`
+		);
+
+		await incrementBtn.dispatchEvent(clickEvent);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>Add</button>
+			<span class="content">4</span>
+			<button>Test</button>
+			<span class="content">2</span>
+			<button>Test</button>
+			<span class="content">12</span>
+			<button>Test</button>
+			<span class="content">4</span>
+			<button>Test</button>
+		`
+		);
+
+		[incrementBtn, ...buttons] = target.querySelectorAll('button');
+
+		await buttons[3].dispatchEvent(clickEvent);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>Add</button>
+			<span class="content">4</span>
+			<button>Test</button>
+			<span class="content">2</span>
+			<button>Test</button>
+			<span class="content">12</span>
+			<button>Test</button>
+			<span class="content">8</span>
+			<button>Test</button>
+		`
+		);
+	}
+};
diff --git a/test/runtime/samples/each-blocks-assignment/main.svelte b/test/runtime/samples/each-blocks-assignment/main.svelte
new file mode 100644
index 0000000000..f74bffbe04
--- /dev/null
+++ b/test/runtime/samples/each-blocks-assignment/main.svelte
@@ -0,0 +1,13 @@
+<script>
+  let obj = {
+    prop: "foo"
+  };
+
+  let arr = [1, 2, 3]
+</script>
+
+<button on:click={() => arr = [...arr, arr.length + 1]}>Add</button>
+{#each arr as o}
+  <span class="content">{o}</span>
+  <button on:click={() => { o *= 2; }}>Test</button>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/each-blocks-expression/_config.js b/test/runtime/samples/each-blocks-expression/_config.js
new file mode 100644
index 0000000000..9f14bd81ec
--- /dev/null
+++ b/test/runtime/samples/each-blocks-expression/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>a</p><p>b</p><p>c</p><!---->'
+};
diff --git a/test/runtime/samples/each-blocks-expression/main.svelte b/test/runtime/samples/each-blocks-expression/main.svelte
new file mode 100644
index 0000000000..7079d86c1c
--- /dev/null
+++ b/test/runtime/samples/each-blocks-expression/main.svelte
@@ -0,0 +1,3 @@
+{#each [ 'a', 'b', 'c' ] as letter}
+	<p>{letter}</p>
+{/each}
diff --git a/test/runtime/samples/each-blocks-nested-b/_config.js b/test/runtime/samples/each-blocks-nested-b/_config.js
new file mode 100644
index 0000000000..ab008b4249
--- /dev/null
+++ b/test/runtime/samples/each-blocks-nested-b/_config.js
@@ -0,0 +1,35 @@
+export default {
+	props: {
+		categories: [
+			{
+				name: 'animals',
+				things: [
+					{ name: 'aardvark' },
+					{ name: 'buffalo' },
+					{ name: 'chinchilla' }
+				]
+			},
+			{
+				name: 'countries',
+				things: [
+					{ name: 'albania' },
+					{ name: 'brazil' },
+					{ name: 'china' }
+				]
+			},
+			{
+				name: 'people',
+				things: [
+					{ name: 'alice' },
+					{ name: 'bob' },
+					{ name: 'carol' },
+					{ name: 'dave' }
+				]
+			}
+		]
+	},
+	html: '<p>animals: aardvark</p><p>animals: buffalo</p><p>animals: chinchilla</p><!----><p>countries: albania</p><p>countries: brazil</p><p>countries: china</p><!----><p>people: alice</p><p>people: bob</p><p>people: carol</p><p>people: dave</p><!----><!---->',
+	test() {
+		// TODO
+	}
+};
diff --git a/test/runtime/samples/each-blocks-nested-b/main.svelte b/test/runtime/samples/each-blocks-nested-b/main.svelte
new file mode 100644
index 0000000000..2cfe4be98a
--- /dev/null
+++ b/test/runtime/samples/each-blocks-nested-b/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let categories;
+</script>
+
+{#each categories as category}
+	{#each category.things as thing}
+		<p>{category.name}: {thing.name}</p>
+	{/each}
+{/each}
diff --git a/test/runtime/samples/each-blocks-nested/_config.js b/test/runtime/samples/each-blocks-nested/_config.js
new file mode 100644
index 0000000000..04d9bd11c5
--- /dev/null
+++ b/test/runtime/samples/each-blocks-nested/_config.js
@@ -0,0 +1,11 @@
+export default {
+	props: {
+		columns: [ 'a', 'b', 'c' ],
+		rows: [ 1, 2, 3 ]
+	},
+
+	html: '<div>a, 1</div><div>a, 2</div><div>a, 3</div><!----><div>b, 1</div><div>b, 2</div><div>b, 3</div><!----><div>c, 1</div><div>c, 2</div><div>c, 3</div><!----><!---->',
+
+	// TODO
+	test() {}
+};
diff --git a/test/runtime/samples/each-blocks-nested/main.svelte b/test/runtime/samples/each-blocks-nested/main.svelte
new file mode 100644
index 0000000000..cd5c3f3e8b
--- /dev/null
+++ b/test/runtime/samples/each-blocks-nested/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let columns;
+	export let rows;
+</script>
+
+{#each columns as x}
+	{#each rows as y}
+		<div>{x}, {y}</div>
+	{/each}
+{/each}
diff --git a/test/runtime/samples/element-invalid-name/_config.js b/test/runtime/samples/element-invalid-name/_config.js
new file mode 100644
index 0000000000..d70c920a19
--- /dev/null
+++ b/test/runtime/samples/element-invalid-name/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<foo-bar>Hello</foo-bar>
+	`
+};
diff --git a/test/runtime/samples/element-invalid-name/main.svelte b/test/runtime/samples/element-invalid-name/main.svelte
new file mode 100644
index 0000000000..0ff9794228
--- /dev/null
+++ b/test/runtime/samples/element-invalid-name/main.svelte
@@ -0,0 +1 @@
+<foo-bar>Hello</foo-bar>
diff --git a/test/runtime/samples/element-source-location/Foo.svelte b/test/runtime/samples/element-source-location/Foo.svelte
new file mode 100644
index 0000000000..0bf81d7347
--- /dev/null
+++ b/test/runtime/samples/element-source-location/Foo.svelte
@@ -0,0 +1,3 @@
+<div>
+	<p>this is a paragraph</p>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/element-source-location/_config.js b/test/runtime/samples/element-source-location/_config.js
new file mode 100644
index 0000000000..be528d15eb
--- /dev/null
+++ b/test/runtime/samples/element-source-location/_config.js
@@ -0,0 +1,26 @@
+import * as path from 'path';
+
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, target }) {
+		const h1 = target.querySelector('h1');
+		const p = target.querySelector('p');
+
+		assert.deepEqual(h1.__svelte_meta.loc, {
+			file: path.relative(process.cwd(), path.resolve(__dirname, 'main.svelte')),
+			line: 4,
+			column: 0,
+			char: 53
+		});
+
+		assert.deepEqual(p.__svelte_meta.loc, {
+			file: path.relative(process.cwd(), path.resolve(__dirname, 'Foo.svelte')),
+			line: 1,
+			column: 1,
+			char: 7
+		});
+	}
+};
diff --git a/test/runtime/samples/element-source-location/main.svelte b/test/runtime/samples/element-source-location/main.svelte
new file mode 100644
index 0000000000..38855ef3ac
--- /dev/null
+++ b/test/runtime/samples/element-source-location/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Foo from './Foo.svelte';
+</script>
+
+<h1>this is a header</h1>
+<Foo/>
\ No newline at end of file
diff --git a/test/runtime/samples/empty-dom/_config.js b/test/runtime/samples/empty-dom/_config.js
new file mode 100644
index 0000000000..22dc25b41e
--- /dev/null
+++ b/test/runtime/samples/empty-dom/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: ''
+};
diff --git a/test/runtime/samples/empty-dom/main.svelte b/test/runtime/samples/empty-dom/main.svelte
new file mode 100644
index 0000000000..3098443ea3
--- /dev/null
+++ b/test/runtime/samples/empty-dom/main.svelte
@@ -0,0 +1,3 @@
+<script>
+	const a = 1 + 2;
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/empty-style-block/_config.js b/test/runtime/samples/empty-style-block/_config.js
new file mode 100644
index 0000000000..22dc25b41e
--- /dev/null
+++ b/test/runtime/samples/empty-style-block/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: ''
+};
diff --git a/test/runtime/samples/empty-style-block/main.svelte b/test/runtime/samples/empty-style-block/main.svelte
new file mode 100644
index 0000000000..6f29e9e9f9
--- /dev/null
+++ b/test/runtime/samples/empty-style-block/main.svelte
@@ -0,0 +1 @@
+<style></style>
diff --git a/test/runtime/samples/escape-template-literals/Widget.svelte b/test/runtime/samples/escape-template-literals/Widget.svelte
new file mode 100644
index 0000000000..2ba74ee888
--- /dev/null
+++ b/test/runtime/samples/escape-template-literals/Widget.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let value;
+</script>
+
+<div>{value}</div>
diff --git a/test/runtime/samples/escape-template-literals/_config.js b/test/runtime/samples/escape-template-literals/_config.js
new file mode 100644
index 0000000000..9e50f94764
--- /dev/null
+++ b/test/runtime/samples/escape-template-literals/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<code>`${foo}\\n`</code>\n<div title="`${foo}\\n`">foo</div>\n<div>`${foo}\\n`</div>'
+};
diff --git a/test/runtime/samples/escape-template-literals/main.svelte b/test/runtime/samples/escape-template-literals/main.svelte
new file mode 100644
index 0000000000..d26aa6ea63
--- /dev/null
+++ b/test/runtime/samples/escape-template-literals/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<code>`$&#123;foo}\n`</code>
+<div title="`$&#123;foo}\n`">foo</div>
+<Widget value="`$&#123;foo}\n`"/>
diff --git a/test/runtime/samples/escaped-text/_config.js b/test/runtime/samples/escaped-text/_config.js
new file mode 100644
index 0000000000..206a1afb51
--- /dev/null
+++ b/test/runtime/samples/escaped-text/_config.js
@@ -0,0 +1,29 @@
+export default {
+	html: `
+		@x
+		@@x
+		#foo
+		##foo
+		%1
+		%%2
+
+		<div>
+			@x
+			@@x
+			#foo
+			##foo
+			%1
+			%%2
+		</div>
+
+		<div>
+			@x
+			@@x
+			#foo
+			##foo
+			%1
+			%%2
+			<span>inner</span>
+		</div>
+	`
+};
diff --git a/test/runtime/samples/escaped-text/main.svelte b/test/runtime/samples/escaped-text/main.svelte
new file mode 100644
index 0000000000..cbcb7fdbb0
--- /dev/null
+++ b/test/runtime/samples/escaped-text/main.svelte
@@ -0,0 +1,25 @@
+@x
+@@x
+#foo
+##foo
+%1
+%%2
+
+<div>
+	@x
+	@@x
+	#foo
+	##foo
+	%1
+	%%2
+</div>
+
+<div>
+	@x
+	@@x
+	#foo
+	##foo
+	%1
+	%%2
+	<span>inner</span>
+</div>
diff --git a/test/runtime/samples/event-handler-async/_config.js b/test/runtime/samples/event-handler-async/_config.js
new file mode 100644
index 0000000000..b483d039ed
--- /dev/null
+++ b/test/runtime/samples/event-handler-async/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<button>nothing</button>
+	`
+};
diff --git a/test/runtime/samples/event-handler-async/main.svelte b/test/runtime/samples/event-handler-async/main.svelte
new file mode 100644
index 0000000000..b22a6af92e
--- /dev/null
+++ b/test/runtime/samples/event-handler-async/main.svelte
@@ -0,0 +1 @@
+<button on:click={async () => { await null; }}>nothing</button>
diff --git a/test/runtime/samples/event-handler-console-log/_config.js b/test/runtime/samples/event-handler-console-log/_config.js
new file mode 100644
index 0000000000..289a84e44c
--- /dev/null
+++ b/test/runtime/samples/event-handler-console-log/_config.js
@@ -0,0 +1,23 @@
+export default {
+	props: {
+		foo: 42
+	},
+
+	html: `
+		<button>click me</button>
+	`,
+
+	test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		const messages = [];
+
+		const log = console.log;
+		console.log = msg => messages.push(msg);
+		button.dispatchEvent(event);
+		console.log = log;
+
+		assert.deepEqual(messages, [42]);
+	}
+};
diff --git a/test/runtime/samples/event-handler-console-log/main.svelte b/test/runtime/samples/event-handler-console-log/main.svelte
new file mode 100644
index 0000000000..a7ef51c4c3
--- /dev/null
+++ b/test/runtime/samples/event-handler-console-log/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+<button on:click='{() => console.log(foo)}'>click me</button>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-deconflicted/_config.js b/test/runtime/samples/event-handler-deconflicted/_config.js
new file mode 100644
index 0000000000..69151997a0
--- /dev/null
+++ b/test/runtime/samples/event-handler-deconflicted/_config.js
@@ -0,0 +1,11 @@
+export default {
+	preserveIdentifiers: true,
+
+	props: {
+		click_handler: 'x'
+	},
+
+	html: `
+		<button>x</button>
+	`
+};
diff --git a/test/runtime/samples/event-handler-deconflicted/main.svelte b/test/runtime/samples/event-handler-deconflicted/main.svelte
new file mode 100644
index 0000000000..b34e17e8a3
--- /dev/null
+++ b/test/runtime/samples/event-handler-deconflicted/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let foo;
+	export let click_handler;
+</script>
+
+<button on:click="{() => foo()}">{click_handler}</button>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-destructured/_config.js b/test/runtime/samples/event-handler-destructured/_config.js
new file mode 100644
index 0000000000..2c37a17c75
--- /dev/null
+++ b/test/runtime/samples/event-handler-destructured/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: `
+		<button>clicked: false</button>
+	`,
+
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>clicked: true</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/event-handler-destructured/main.svelte b/test/runtime/samples/event-handler-destructured/main.svelte
new file mode 100644
index 0000000000..d80c7ed15c
--- /dev/null
+++ b/test/runtime/samples/event-handler-destructured/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	function get_handlers() {
+		return {
+			handle_click: () => {
+				clicked = true;
+			}
+		};
+	}
+
+	let clicked = false;
+	const { handle_click } = get_handlers();
+</script>
+
+<button on:click={handle_click}>
+	clicked: {clicked}
+</button>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-dynamic-2/_config.js b/test/runtime/samples/event-handler-dynamic-2/_config.js
new file mode 100644
index 0000000000..5fded47855
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-2/_config.js
@@ -0,0 +1,33 @@
+export default {
+	html: `
+		<button>toggle</button>
+		<p>0</p>
+		<button>handler_a</button>
+		<button>handler_b</button>
+	`,
+
+	async test({ assert, target, window }) {
+		const [toggle, handler_a, handler_b] = target.querySelectorAll('button');
+		const p = target.querySelector('p');
+
+		const event = new window.MouseEvent('click');
+
+		await handler_a.dispatchEvent(event);
+		assert.equal(p.innerHTML, '1');
+
+		await toggle.dispatchEvent(event);
+
+		await handler_a.dispatchEvent(event);
+		assert.equal(p.innerHTML, '2');
+
+		await toggle.dispatchEvent(event);
+
+		await handler_b.dispatchEvent(event);
+		assert.equal(p.innerHTML, '1');
+
+		await toggle.dispatchEvent(event);
+
+		await handler_b.dispatchEvent(event);
+		assert.equal(p.innerHTML, '2');
+	}
+};
diff --git a/test/runtime/samples/event-handler-dynamic-2/main.svelte b/test/runtime/samples/event-handler-dynamic-2/main.svelte
new file mode 100644
index 0000000000..1b2041d3b8
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-2/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	let number = 0;
+	const handler_1 = () => number = 1;
+	const handler_2 = () => number = 2;
+
+	let flag = true;
+
+	$: handler_a = flag ? handler_1 : handler_2;
+	const handler_b = writable();
+	$: handler_b.set(flag ? handler_1 : handler_2);
+</script>
+
+<button on:click={() => flag = !flag}>toggle</button>
+
+<p>{number}</p>
+
+<button on:click={handler_a}>handler_a</button>
+<button on:click={$handler_b}>handler_b</button>
diff --git a/test/runtime/samples/event-handler-dynamic-bound-var/Nested.svelte b/test/runtime/samples/event-handler-dynamic-bound-var/Nested.svelte
new file mode 100644
index 0000000000..948fc308c0
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-bound-var/Nested.svelte
@@ -0,0 +1,7 @@
+<script>
+  let text = 'Hello World';
+  export function updateText() {
+    text = 'Bye World';
+  }
+</script>
+{text}
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-dynamic-bound-var/_config.js b/test/runtime/samples/event-handler-dynamic-bound-var/_config.js
new file mode 100644
index 0000000000..fbbfee221d
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-bound-var/_config.js
@@ -0,0 +1,20 @@
+export default {
+	html: `
+		<button>Click Me</button>
+		Hello World
+	`,
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Click Me</button>
+				Bye World
+			`
+		);
+	}
+};
diff --git a/test/runtime/samples/event-handler-dynamic-bound-var/main.svelte b/test/runtime/samples/event-handler-dynamic-bound-var/main.svelte
new file mode 100644
index 0000000000..bb7d9befc4
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-bound-var/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Nested from './Nested.svelte';
+	let nested;
+</script>
+
+<button on:click={nested && nested.updateText}>Click Me</button>
+
+<Nested bind:this={nested} />
diff --git a/test/runtime/samples/event-handler-dynamic-expression/_config.js b/test/runtime/samples/event-handler-dynamic-expression/_config.js
new file mode 100644
index 0000000000..f2c876cdeb
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-expression/_config.js
@@ -0,0 +1,20 @@
+export default {
+	html: '<button>bar</button>',
+
+	async test({ assert, target, window }) {
+		const [button] = target.querySelectorAll(
+			'button'
+		);
+
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, '<button>foo</button>');
+
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, '<button>bar</button>');
+
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, '<button>foo</button>');
+	}
+};
diff --git a/test/runtime/samples/event-handler-dynamic-expression/main.svelte b/test/runtime/samples/event-handler-dynamic-expression/main.svelte
new file mode 100644
index 0000000000..f53aa7aadd
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-expression/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	let name = 'bar';
+	function foo() {
+		name = 'foo';
+	}
+	function bar() {
+		name = 'bar';
+	}
+	
+</script>
+
+<button on:click={name === 'bar' ? foo : bar}>{name}</button>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-dynamic-hash/_config.js b/test/runtime/samples/event-handler-dynamic-hash/_config.js
new file mode 100644
index 0000000000..e98d0f6104
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-hash/_config.js
@@ -0,0 +1,56 @@
+export default {
+	html: `
+	<p>
+		<button>set handler 1</button>
+		<button>set handler 2</button>
+	</p>
+	<p>0</p>
+	<button>click</button>
+	`,
+
+	async test({ assert, target, window }) {
+		const [updateButton1, updateButton2, button] = target.querySelectorAll(
+			'button'
+		);
+
+		const event = new window.MouseEvent('click');
+		let err = '';
+		window.addEventListener('error', (e) => {
+			e.preventDefault();
+			err = e.message;
+		});
+
+		await button.dispatchEvent(event);
+		assert.equal(err, '', err);
+		assert.htmlEqual(target.innerHTML, `
+			<p>
+				<button>set handler 1</button>
+				<button>set handler 2</button>
+			</p>
+			<p>0</p>
+			<button>click</button>
+		`);
+
+		await updateButton1.dispatchEvent(event);
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<p>
+				<button>set handler 1</button>
+				<button>set handler 2</button>
+			</p>
+			<p>1</p>
+			<button>click</button>
+		`);
+
+		await updateButton2.dispatchEvent(event);
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<p>
+				<button>set handler 1</button>
+				<button>set handler 2</button>
+			</p>
+			<p>2</p>
+			<button>click</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/event-handler-dynamic-hash/main.svelte b/test/runtime/samples/event-handler-dynamic-hash/main.svelte
new file mode 100644
index 0000000000..c81af02006
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-hash/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	let clickHandler = {};
+	let number = 0;
+	
+	function updateHandler1(){
+		clickHandler.f = () => number = 1;
+	}
+
+	function updateHandler2(){
+		clickHandler.f = () => number = 2;
+	}
+	
+
+</script>
+
+<p>
+<button on:click={updateHandler1}>set handler 1</button>
+<button on:click={updateHandler2}>set handler 2</button>
+</p>
+
+<p>{ number }</p>
+
+<button on:click={clickHandler.f}>click</button>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-dynamic-invalid/_config.js b/test/runtime/samples/event-handler-dynamic-invalid/_config.js
new file mode 100644
index 0000000000..beebd4459e
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-invalid/_config.js
@@ -0,0 +1,28 @@
+export default {
+	html: `<button>undef</button>
+	<button>null</button>
+	<button>invalid</button>`,
+
+	async test({ assert, target, window }) {
+		const [buttonUndef, buttonNull, buttonInvalid] = target.querySelectorAll(
+			'button'
+		);
+
+		const event = new window.MouseEvent('click');
+		let err = '';
+		window.addEventListener('error', (e) => {
+			e.preventDefault();
+			err = e.message;
+		});
+
+		// All three should not throw if proper checking is done in runtime code
+		await buttonUndef.dispatchEvent(event);
+		assert.equal(err, '', err);
+
+		await buttonNull.dispatchEvent(event);
+		assert.equal(err, '', err);
+
+		await buttonInvalid.dispatchEvent(event);
+		assert.equal(err, '', err);
+	}
+};
diff --git a/test/runtime/samples/event-handler-dynamic-invalid/main.svelte b/test/runtime/samples/event-handler-dynamic-invalid/main.svelte
new file mode 100644
index 0000000000..f4e8c5fdb7
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-invalid/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	let handlerUndef;
+	let handlerNull;
+	let handlerInvalid;
+
+	handlerUndef = undefined;
+	handlerNull = null;
+	handlerInvalid = 42;
+</script>
+
+<button on:click={handlerUndef}>undef</button>
+<button on:click={handlerNull}>null</button>
+<button on:click={handlerInvalid}>invalid</button>
diff --git a/test/runtime/samples/event-handler-dynamic-modifier-once/_config.js b/test/runtime/samples/event-handler-dynamic-modifier-once/_config.js
new file mode 100644
index 0000000000..41daf374c8
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-modifier-once/_config.js
@@ -0,0 +1,16 @@
+export default {
+	html: `
+		<button>0</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+		assert.equal(component.count, 1);
+
+		await button.dispatchEvent(event);
+		assert.equal(component.count, 1);
+	}
+};
diff --git a/test/runtime/samples/event-handler-dynamic-modifier-once/main.svelte b/test/runtime/samples/event-handler-dynamic-modifier-once/main.svelte
new file mode 100644
index 0000000000..d363d708ba
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-modifier-once/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let f;
+	export let count = 0;
+	f = () => count += 1;
+</script>
+
+<button on:click|once="{f}">{count}</button>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-dynamic-modifier-prevent-default/_config.js b/test/runtime/samples/event-handler-dynamic-modifier-prevent-default/_config.js
new file mode 100644
index 0000000000..4fa032bf37
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-modifier-prevent-default/_config.js
@@ -0,0 +1,16 @@
+export default {
+	html: `
+		<button>click me</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click', {
+			cancelable: true
+		});
+
+		await button.dispatchEvent(event);
+
+		assert.ok(component.default_was_prevented);
+	}
+};
diff --git a/test/runtime/samples/event-handler-dynamic-modifier-prevent-default/main.svelte b/test/runtime/samples/event-handler-dynamic-modifier-prevent-default/main.svelte
new file mode 100644
index 0000000000..49d42f3305
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-modifier-prevent-default/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let default_was_prevented;
+	let f;
+
+	function handle_click(event) {
+		default_was_prevented = event.defaultPrevented;
+	}
+	f = handle_click;
+</script>
+
+<button on:click|preventDefault={f}>click me</button>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-dynamic-modifier-self/_config.js b/test/runtime/samples/event-handler-dynamic-modifier-self/_config.js
new file mode 100644
index 0000000000..6bd96ba8aa
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-modifier-self/_config.js
@@ -0,0 +1,16 @@
+export default {
+	html: `
+		<div>
+			<button>click me</button>
+		</div>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+
+		assert.ok(!component.inner_clicked);
+	}
+};
diff --git a/test/runtime/samples/event-handler-dynamic-modifier-self/main.svelte b/test/runtime/samples/event-handler-dynamic-modifier-self/main.svelte
new file mode 100644
index 0000000000..b57d88ec02
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-modifier-self/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let inner_clicked;
+	let f;
+
+	function handle_click(event) {
+		inner_clicked = true;
+	}
+	f = handle_click;
+</script>
+
+<div on:click|self={f}>
+	<button>click me</button>
+</div>
diff --git a/test/runtime/samples/event-handler-dynamic-modifier-stop-propagation/_config.js b/test/runtime/samples/event-handler-dynamic-modifier-stop-propagation/_config.js
new file mode 100644
index 0000000000..8517429e5c
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-modifier-stop-propagation/_config.js
@@ -0,0 +1,19 @@
+export default {
+	html: `
+		<div>
+			<button>click me</button>
+		</div>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click', {
+			bubbles: true
+		});
+
+		await button.dispatchEvent(event);
+
+		assert.ok(component.inner_clicked);
+		assert.ok(!component.outer_clicked);
+	}
+};
diff --git a/test/runtime/samples/event-handler-dynamic-modifier-stop-propagation/main.svelte b/test/runtime/samples/event-handler-dynamic-modifier-stop-propagation/main.svelte
new file mode 100644
index 0000000000..bad7359927
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-modifier-stop-propagation/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	export let inner_clicked;
+	export let outer_clicked;
+	let f1;
+	let f2;
+
+	function handle_inner_click(event) {
+		inner_clicked = true;
+	}
+
+	function handle_outer_click(event) {
+		outer_clicked = true;
+	}
+	f1 = handle_inner_click;
+	f2 = handle_outer_click;
+</script>
+
+<div on:click={f2}>
+	<button on:click|stopPropagation={f1}>click me</button>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-dynamic-multiple/_config.js b/test/runtime/samples/event-handler-dynamic-multiple/_config.js
new file mode 100644
index 0000000000..cf17c61f60
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-multiple/_config.js
@@ -0,0 +1,14 @@
+export default {
+	html: `
+		<button>click me</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+		assert.equal(component.clickHandlerOne, 1);
+		assert.equal(component.clickHandlerTwo, 1);
+	}
+};
diff --git a/test/runtime/samples/event-handler-dynamic-multiple/main.svelte b/test/runtime/samples/event-handler-dynamic-multiple/main.svelte
new file mode 100644
index 0000000000..2dbbe61ea6
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic-multiple/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let clickHandlerOne = 0;
+	export let clickHandlerTwo = 0;
+	let f1;
+	let f2;
+
+	f1 = () => clickHandlerOne++;
+	f2 = () => clickHandlerTwo++;
+</script>
+
+<button on:click='{f1}' on:click='{f2}'>click me</button>
diff --git a/test/runtime/samples/event-handler-dynamic/_config.js b/test/runtime/samples/event-handler-dynamic/_config.js
new file mode 100644
index 0000000000..e98d0f6104
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic/_config.js
@@ -0,0 +1,56 @@
+export default {
+	html: `
+	<p>
+		<button>set handler 1</button>
+		<button>set handler 2</button>
+	</p>
+	<p>0</p>
+	<button>click</button>
+	`,
+
+	async test({ assert, target, window }) {
+		const [updateButton1, updateButton2, button] = target.querySelectorAll(
+			'button'
+		);
+
+		const event = new window.MouseEvent('click');
+		let err = '';
+		window.addEventListener('error', (e) => {
+			e.preventDefault();
+			err = e.message;
+		});
+
+		await button.dispatchEvent(event);
+		assert.equal(err, '', err);
+		assert.htmlEqual(target.innerHTML, `
+			<p>
+				<button>set handler 1</button>
+				<button>set handler 2</button>
+			</p>
+			<p>0</p>
+			<button>click</button>
+		`);
+
+		await updateButton1.dispatchEvent(event);
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<p>
+				<button>set handler 1</button>
+				<button>set handler 2</button>
+			</p>
+			<p>1</p>
+			<button>click</button>
+		`);
+
+		await updateButton2.dispatchEvent(event);
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<p>
+				<button>set handler 1</button>
+				<button>set handler 2</button>
+			</p>
+			<p>2</p>
+			<button>click</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/event-handler-dynamic/main.svelte b/test/runtime/samples/event-handler-dynamic/main.svelte
new file mode 100644
index 0000000000..17c9ae6cf0
--- /dev/null
+++ b/test/runtime/samples/event-handler-dynamic/main.svelte
@@ -0,0 +1,23 @@
+<script>
+	let clickHandler;
+	let number = 0;
+	
+	function updateHandler1(){
+		clickHandler = () => number = 1;
+	}
+
+	function updateHandler2(){
+		clickHandler = () => number = 2;
+	}
+	
+
+</script>
+
+<p>
+<button on:click={updateHandler1}>set handler 1</button>
+<button on:click={updateHandler2}>set handler 2</button>
+</p>
+
+<p>{ number }</p>
+
+<button on:click={clickHandler}>click</button>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-each-context-invalidation/_config.js b/test/runtime/samples/event-handler-each-context-invalidation/_config.js
new file mode 100644
index 0000000000..07e7170357
--- /dev/null
+++ b/test/runtime/samples/event-handler-each-context-invalidation/_config.js
@@ -0,0 +1,35 @@
+export default {
+	html: `
+		<button>off</button>
+		<button>on</button>
+		<button>off</button>
+		<p>on: 1</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const event = new window.MouseEvent('click');
+
+		await buttons[0].dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>on</button>
+			<button>on</button>
+			<button>off</button>
+			<p>on: 2</p>
+		`);
+
+		await buttons[2].dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>on</button>
+			<button>on</button>
+			<button>on</button>
+			<p>on: 3</p>
+		`);
+
+		assert.deepEqual(component.switches, [
+			{ on: true },
+			{ on: true },
+			{ on: true }
+		]);
+	}
+};
diff --git a/test/runtime/samples/event-handler-each-context-invalidation/main.svelte b/test/runtime/samples/event-handler-each-context-invalidation/main.svelte
new file mode 100644
index 0000000000..77c6b7f197
--- /dev/null
+++ b/test/runtime/samples/event-handler-each-context-invalidation/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let switches = [
+		{ on: false },
+		{ on: true },
+		{ on: false }
+	];
+</script>
+
+{#each switches as s}
+	<button on:click="{() => s.on = !s.on}">
+		{s.on ? 'on' : 'off'}
+	</button>
+{/each}
+
+<p>on: {switches.filter(s => !!s.on).length}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-each-context/_config.js b/test/runtime/samples/event-handler-each-context/_config.js
new file mode 100644
index 0000000000..d816b342bd
--- /dev/null
+++ b/test/runtime/samples/event-handler-each-context/_config.js
@@ -0,0 +1,21 @@
+export default {
+	props: {
+		items: [
+			'whatever'
+		],
+		foo: 'wrong',
+		bar: 'right'
+	},
+
+	test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		button.dispatchEvent(event);
+		assert.equal(component.foo, 'right');
+
+		component.bar = 'left';
+		button.dispatchEvent(event);
+		assert.equal(component.foo, 'left');
+	}
+};
diff --git a/test/runtime/samples/event-handler-each-context/main.svelte b/test/runtime/samples/event-handler-each-context/main.svelte
new file mode 100644
index 0000000000..e30996b261
--- /dev/null
+++ b/test/runtime/samples/event-handler-each-context/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let items;
+	export let foo;
+	export let bar;
+</script>
+
+{#each items as item}
+	<button on:click='{() => foo = bar}'>{item}</button>
+{/each}
+
+<p>foo: {foo}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-each-deconflicted/_config.js b/test/runtime/samples/event-handler-each-deconflicted/_config.js
new file mode 100644
index 0000000000..6237f39451
--- /dev/null
+++ b/test/runtime/samples/event-handler-each-deconflicted/_config.js
@@ -0,0 +1,34 @@
+export default {
+	props: {
+		foo: [1],
+		bar: [2],
+		clicked: 'neither'
+	},
+
+	html: `
+		<button>foo</button>
+		<button>bar</button>
+		<p>clicked: neither</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const event = new window.MouseEvent('click');
+
+		await buttons[0].dispatchEvent(event);
+		assert.equal(component.clicked, 'foo');
+		assert.htmlEqual(target.innerHTML, `
+			<button>foo</button>
+			<button>bar</button>
+			<p>clicked: foo</p>
+		`);
+
+		await buttons[1].dispatchEvent(event);
+		assert.equal(component.clicked, 'bar');
+		assert.htmlEqual(target.innerHTML, `
+			<button>foo</button>
+			<button>bar</button>
+			<p>clicked: bar</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/event-handler-each-deconflicted/main.svelte b/test/runtime/samples/event-handler-each-deconflicted/main.svelte
new file mode 100644
index 0000000000..96d20d4d85
--- /dev/null
+++ b/test/runtime/samples/event-handler-each-deconflicted/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let foo;
+	export let clicked;
+	export let bar;
+</script>
+
+{#each foo as f}
+	<button on:click='{() => clicked = "foo"}'>foo</button>
+{/each}
+
+{#each bar as b}
+	<button on:click='{() => clicked = "bar"}'>bar</button>
+{/each}
+
+<p>clicked: {clicked}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-each-modifier/_config.js b/test/runtime/samples/event-handler-each-modifier/_config.js
new file mode 100644
index 0000000000..8274e22eec
--- /dev/null
+++ b/test/runtime/samples/event-handler-each-modifier/_config.js
@@ -0,0 +1,42 @@
+export default {
+	async test({ assert, component, target, window }) {
+		// set first
+		await component.lists.update(() => [
+			{ text: 'item1' },
+			{ text: 'item2' },
+			{ text: 'item3' }
+		]);
+
+		await component.lists.update(() => [
+			{ text: 'item3' },
+			{ text: 'item2' },
+			{ text: 'item1' }
+		]);
+
+		await component.lists.update(() => [
+			{ text: 'item1' },
+			{ text: 'item2' },
+			{ text: 'item3' }
+		]);
+
+		assert.equal(component.updated, 4);
+
+		const [item1, item2] = target.childNodes;
+		const [item1Btn1, item1Btn2] = item1.querySelectorAll('button');
+		const [item2Btn1, item2Btn2] = item2.querySelectorAll('button');
+
+		const clickEvent = new window.MouseEvent('click');
+		
+		await item1Btn1.dispatchEvent(clickEvent);
+		assert.equal(component.getNormalCount(), 1);
+		
+		await item1Btn2.dispatchEvent(clickEvent);
+		assert.equal(component.getModifierCount(), 1);
+
+		await item2Btn1.dispatchEvent(clickEvent);
+		assert.equal(component.getNormalCount(), 2);
+		
+		await item2Btn2.dispatchEvent(clickEvent);
+		assert.equal(component.getModifierCount(), 2);
+	}
+};
diff --git a/test/runtime/samples/event-handler-each-modifier/main.svelte b/test/runtime/samples/event-handler-each-modifier/main.svelte
new file mode 100644
index 0000000000..ca7447f728
--- /dev/null
+++ b/test/runtime/samples/event-handler-each-modifier/main.svelte
@@ -0,0 +1,37 @@
+<script>
+	import {afterUpdate} from 'svelte'
+	import {writable} from 'svelte/store'
+	
+	const normal = writable(0);
+	const modifier = writable(0);
+	export let updated = 0;
+	export const lists = writable([]);
+	
+	const click = (e, type) => {
+		if(type === 'normal'){
+			$normal ++;
+		}else{
+			$modifier ++;
+		}
+	}
+	afterUpdate(() => updated++);
+
+	export function getNormalCount() {
+		return $normal;
+	}
+	export function getModifierCount() {
+		return $modifier;
+	}
+</script>
+
+{#each $lists as item (item.text)}
+	<div>
+		{item.text}
+		<button on:click={(e)=>click(e,'normal')}>
+			Normal
+		</button>
+		<button on:click|preventDefault={(e)=> click(e,'modifier')}>
+			Modifier
+		</button>
+	</div>
+{/each}
diff --git a/test/runtime/samples/event-handler-each-this/_config.js b/test/runtime/samples/event-handler-each-this/_config.js
new file mode 100644
index 0000000000..7f6528977c
--- /dev/null
+++ b/test/runtime/samples/event-handler-each-this/_config.js
@@ -0,0 +1,28 @@
+export default {
+	props: {
+		items: ['foo', 'bar', 'baz']
+	},
+
+	html: `
+		<button>foo</button>
+		<button>bar</button>
+		<button>baz</button>
+	`,
+
+	test({ assert, component, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const event = new window.MouseEvent('click');
+
+		const clicked = [];
+
+		component.$on('clicked', event => {
+			clicked.push(event.detail.node);
+		});
+
+		buttons[1].dispatchEvent(event);
+
+		assert.equal(clicked.length, 1);
+		assert.equal(clicked[0].nodeName, 'BUTTON');
+		assert.equal(clicked[0].textContent, 'bar');
+	}
+};
diff --git a/test/runtime/samples/event-handler-each-this/main.svelte b/test/runtime/samples/event-handler-each-this/main.svelte
new file mode 100644
index 0000000000..52fa53a807
--- /dev/null
+++ b/test/runtime/samples/event-handler-each-this/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	export let items;
+
+	const dispatch = createEventDispatcher();
+</script>
+
+{#each items as item}
+	<button on:click='{e => dispatch("clicked", { node: e.target })}'>{item}</button>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-each/_config.js b/test/runtime/samples/event-handler-each/_config.js
new file mode 100644
index 0000000000..9c0407860e
--- /dev/null
+++ b/test/runtime/samples/event-handler-each/_config.js
@@ -0,0 +1,30 @@
+export default {
+	props: {
+		items: [
+			'foo',
+			'bar',
+			'baz'
+		],
+		selected: 'foo'
+	},
+
+	html: `
+		<button>foo</button>
+		<button>bar</button>
+		<button>baz</button>
+		<p>selected: foo</p>
+	`,
+
+	async test({ assert, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const event = new window.MouseEvent('click');
+
+		await buttons[1].dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>foo</button>
+			<button>bar</button>
+			<button>baz</button>
+			<p>selected: bar</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/event-handler-each/main.svelte b/test/runtime/samples/event-handler-each/main.svelte
new file mode 100644
index 0000000000..777fdb1c41
--- /dev/null
+++ b/test/runtime/samples/event-handler-each/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let items;
+	export let selected;
+</script>
+
+{#each items as item}
+	<button on:click='{() => selected = item}'>{item}</button>
+{/each}
+
+<p>selected: {selected}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-event-methods/_config.js b/test/runtime/samples/event-handler-event-methods/_config.js
new file mode 100644
index 0000000000..cc72e4bb0b
--- /dev/null
+++ b/test/runtime/samples/event-handler-event-methods/_config.js
@@ -0,0 +1,12 @@
+export default {
+	test({ assert, component, target, window }) {
+		const allow = target.querySelector('.allow-propagation');
+		const stop = target.querySelector('.stop-propagation');
+
+		allow.dispatchEvent(new window.MouseEvent('click', { bubbles: true }));
+		stop.dispatchEvent(new window.MouseEvent('click', { bubbles: true }));
+
+		assert.equal(component.foo, true);
+		assert.equal(component.bar, false);
+	}
+};
diff --git a/test/runtime/samples/event-handler-event-methods/main.svelte b/test/runtime/samples/event-handler-event-methods/main.svelte
new file mode 100644
index 0000000000..ad57976b8a
--- /dev/null
+++ b/test/runtime/samples/event-handler-event-methods/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let foo = false;
+	export let bar = false;
+</script>
+
+<div on:click='{() => foo = true}'>
+	<button class='allow-propagation'>click me</button>
+</div>
+
+<div on:click='{() => bar = true}'>
+	<button class='stop-propagation' on:click='{event => event.stopPropagation()}'>click me</button>
+</div>
diff --git a/test/runtime/samples/event-handler-hoisted/_config.js b/test/runtime/samples/event-handler-hoisted/_config.js
new file mode 100644
index 0000000000..18d84aec6d
--- /dev/null
+++ b/test/runtime/samples/event-handler-hoisted/_config.js
@@ -0,0 +1,18 @@
+export default {
+	props: {
+		foo: [1],
+		a: 42
+	},
+
+	html: `
+		<button>click me</button>
+	`,
+
+	test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		button.dispatchEvent(event);
+		assert.equal(component.snapshot, 42);
+	}
+};
diff --git a/test/runtime/samples/event-handler-hoisted/main.svelte b/test/runtime/samples/event-handler-hoisted/main.svelte
new file mode 100644
index 0000000000..fa0012d191
--- /dev/null
+++ b/test/runtime/samples/event-handler-hoisted/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let snapshot;
+
+	export let foo;
+	export let a;
+
+	export function baz(a) {
+		snapshot = a;
+	}
+</script>
+
+{#each foo as bar}
+	<button on:click='{() => baz(a)}'>click me</button>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-modifier-body-once/_config.js b/test/runtime/samples/event-handler-modifier-body-once/_config.js
new file mode 100644
index 0000000000..4127034010
--- /dev/null
+++ b/test/runtime/samples/event-handler-modifier-body-once/_config.js
@@ -0,0 +1,11 @@
+export default {
+	async test({ assert, component, window }) {
+		const event = new window.MouseEvent('click');
+
+		await window.document.body.dispatchEvent(event);
+		assert.equal(component.count, 1);
+
+		await window.document.body.dispatchEvent(event);
+		assert.equal(component.count, 1);
+	}
+};
diff --git a/test/runtime/samples/event-handler-modifier-body-once/main.svelte b/test/runtime/samples/event-handler-modifier-body-once/main.svelte
new file mode 100644
index 0000000000..423a75d1f0
--- /dev/null
+++ b/test/runtime/samples/event-handler-modifier-body-once/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let count = 0;
+</script>
+
+<svelte:body on:click|once="{() => count += 1}"/>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-modifier-once/_config.js b/test/runtime/samples/event-handler-modifier-once/_config.js
new file mode 100644
index 0000000000..41daf374c8
--- /dev/null
+++ b/test/runtime/samples/event-handler-modifier-once/_config.js
@@ -0,0 +1,16 @@
+export default {
+	html: `
+		<button>0</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+		assert.equal(component.count, 1);
+
+		await button.dispatchEvent(event);
+		assert.equal(component.count, 1);
+	}
+};
diff --git a/test/runtime/samples/event-handler-modifier-once/main.svelte b/test/runtime/samples/event-handler-modifier-once/main.svelte
new file mode 100644
index 0000000000..f31f8f4983
--- /dev/null
+++ b/test/runtime/samples/event-handler-modifier-once/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let count = 0;
+</script>
+
+<button on:click|once="{() => count += 1}">{count}</button>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-modifier-prevent-default/_config.js b/test/runtime/samples/event-handler-modifier-prevent-default/_config.js
new file mode 100644
index 0000000000..4fa032bf37
--- /dev/null
+++ b/test/runtime/samples/event-handler-modifier-prevent-default/_config.js
@@ -0,0 +1,16 @@
+export default {
+	html: `
+		<button>click me</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click', {
+			cancelable: true
+		});
+
+		await button.dispatchEvent(event);
+
+		assert.ok(component.default_was_prevented);
+	}
+};
diff --git a/test/runtime/samples/event-handler-modifier-prevent-default/main.svelte b/test/runtime/samples/event-handler-modifier-prevent-default/main.svelte
new file mode 100644
index 0000000000..90aea62f01
--- /dev/null
+++ b/test/runtime/samples/event-handler-modifier-prevent-default/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let default_was_prevented;
+
+	function handle_click(event) {
+		default_was_prevented = event.defaultPrevented;
+	}
+</script>
+
+<button on:click|preventDefault={handle_click}>click me</button>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-modifier-self/_config.js b/test/runtime/samples/event-handler-modifier-self/_config.js
new file mode 100644
index 0000000000..6bd96ba8aa
--- /dev/null
+++ b/test/runtime/samples/event-handler-modifier-self/_config.js
@@ -0,0 +1,16 @@
+export default {
+	html: `
+		<div>
+			<button>click me</button>
+		</div>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+
+		assert.ok(!component.inner_clicked);
+	}
+};
diff --git a/test/runtime/samples/event-handler-modifier-self/main.svelte b/test/runtime/samples/event-handler-modifier-self/main.svelte
new file mode 100644
index 0000000000..1becf44a9e
--- /dev/null
+++ b/test/runtime/samples/event-handler-modifier-self/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let inner_clicked;
+
+	function handle_click(event) {
+		inner_clicked = true;
+	}
+</script>
+
+<div on:click|self={handle_click}>
+	<button>click me</button>
+</div>
diff --git a/test/runtime/samples/event-handler-modifier-stop-propagation/_config.js b/test/runtime/samples/event-handler-modifier-stop-propagation/_config.js
new file mode 100644
index 0000000000..8517429e5c
--- /dev/null
+++ b/test/runtime/samples/event-handler-modifier-stop-propagation/_config.js
@@ -0,0 +1,19 @@
+export default {
+	html: `
+		<div>
+			<button>click me</button>
+		</div>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click', {
+			bubbles: true
+		});
+
+		await button.dispatchEvent(event);
+
+		assert.ok(component.inner_clicked);
+		assert.ok(!component.outer_clicked);
+	}
+};
diff --git a/test/runtime/samples/event-handler-modifier-stop-propagation/main.svelte b/test/runtime/samples/event-handler-modifier-stop-propagation/main.svelte
new file mode 100644
index 0000000000..a1e3680313
--- /dev/null
+++ b/test/runtime/samples/event-handler-modifier-stop-propagation/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let inner_clicked;
+	export let outer_clicked;
+
+	function handle_inner_click(event) {
+		inner_clicked = true;
+	}
+
+	function handle_outer_click(event) {
+		outer_clicked = true;
+	}
+</script>
+
+<div on:click={handle_outer_click}>
+	<button on:click|stopPropagation={handle_inner_click}>click me</button>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-modifier-trusted/_config.js b/test/runtime/samples/event-handler-modifier-trusted/_config.js
new file mode 100644
index 0000000000..ac269e674a
--- /dev/null
+++ b/test/runtime/samples/event-handler-modifier-trusted/_config.js
@@ -0,0 +1,9 @@
+export default {
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+		assert.equal(component.trusted, true);
+	}
+};
diff --git a/test/runtime/samples/event-handler-modifier-trusted/main.svelte b/test/runtime/samples/event-handler-modifier-trusted/main.svelte
new file mode 100644
index 0000000000..504326a498
--- /dev/null
+++ b/test/runtime/samples/event-handler-modifier-trusted/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let trusted = true;
+</script>
+
+<button on:click|trusted="{() => trusted = false}">Only trusted events: {trusted?'true':'false'}</button>
diff --git a/test/runtime/samples/event-handler-multiple/_config.js b/test/runtime/samples/event-handler-multiple/_config.js
new file mode 100644
index 0000000000..cf17c61f60
--- /dev/null
+++ b/test/runtime/samples/event-handler-multiple/_config.js
@@ -0,0 +1,14 @@
+export default {
+	html: `
+		<button>click me</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+		assert.equal(component.clickHandlerOne, 1);
+		assert.equal(component.clickHandlerTwo, 1);
+	}
+};
diff --git a/test/runtime/samples/event-handler-multiple/main.svelte b/test/runtime/samples/event-handler-multiple/main.svelte
new file mode 100644
index 0000000000..f327a7fd2a
--- /dev/null
+++ b/test/runtime/samples/event-handler-multiple/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let clickHandlerOne = 0;
+	export let clickHandlerTwo = 0;
+</script>
+
+<button on:click='{() => clickHandlerOne++}' on:click='{() => clickHandlerTwo++}'>click me</button>
diff --git a/test/runtime/samples/event-handler-removal/_config.js b/test/runtime/samples/event-handler-removal/_config.js
new file mode 100644
index 0000000000..657ee04b09
--- /dev/null
+++ b/test/runtime/samples/event-handler-removal/_config.js
@@ -0,0 +1,20 @@
+// TODO gah, JSDOM appears to behave differently to real browsers here... probably need to raise an issue
+
+export default {
+	html: '<input>',
+
+	test({ assert, component }) {
+		component.input.focus();
+
+		// this should NOT trigger blur event
+		component.visible = false;
+		assert.ok(!component.blurred);
+
+		component.visible = true;
+		component.input.focus();
+
+		// this SHOULD trigger blur event
+		component.input.blur();
+		assert.ok(component.blurred);
+	}
+};
diff --git a/test/runtime/samples/event-handler-removal/main.svelte b/test/runtime/samples/event-handler-removal/main.svelte
new file mode 100644
index 0000000000..29c7e32567
--- /dev/null
+++ b/test/runtime/samples/event-handler-removal/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let input;
+	export let blurred = false;
+	export let visible = true;
+</script>
+
+{#if visible}
+	<input bind:this={input} on:blur='{() => blurred = true}'>
+{/if}
diff --git a/test/runtime/samples/event-handler-sanitize/_config.js b/test/runtime/samples/event-handler-sanitize/_config.js
new file mode 100644
index 0000000000..ddc15724a3
--- /dev/null
+++ b/test/runtime/samples/event-handler-sanitize/_config.js
@@ -0,0 +1,21 @@
+export default {
+	html: `
+		<div>toggle</div>
+	`,
+
+	async test({ assert, target, window }) {
+		const div = target.querySelector('div');
+		const event = new window.MouseEvent('some-event');
+
+		await div.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<div>toggle</div>
+			<p>hello!</p>
+		`);
+
+		await div.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<div>toggle</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/event-handler-sanitize/main.svelte b/test/runtime/samples/event-handler-sanitize/main.svelte
new file mode 100644
index 0000000000..5171820c83
--- /dev/null
+++ b/test/runtime/samples/event-handler-sanitize/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let visible;
+</script>
+
+<div on:some-event='{() => visible = !visible}'>toggle</div>
+
+{#if visible}
+	<p>hello!</p>
+{/if}
diff --git a/test/runtime/samples/event-handler-shorthand-component/Widget.svelte b/test/runtime/samples/event-handler-shorthand-component/Widget.svelte
new file mode 100644
index 0000000000..cde03db92b
--- /dev/null
+++ b/test/runtime/samples/event-handler-shorthand-component/Widget.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<button on:click='{() => dispatch("foo", { answer: 42 })}'>click me</button>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-shorthand-component/_config.js b/test/runtime/samples/event-handler-shorthand-component/_config.js
new file mode 100644
index 0000000000..22704cf1c3
--- /dev/null
+++ b/test/runtime/samples/event-handler-shorthand-component/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<button>click me</button>
+	`,
+
+	test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		let answer;
+		component.$on('foo', event => {
+			answer = event.detail.answer;
+		});
+
+		button.dispatchEvent(event);
+		assert.equal(answer, 42);
+	}
+};
diff --git a/test/runtime/samples/event-handler-shorthand-component/main.svelte b/test/runtime/samples/event-handler-shorthand-component/main.svelte
new file mode 100644
index 0000000000..df21f9e8b8
--- /dev/null
+++ b/test/runtime/samples/event-handler-shorthand-component/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<Widget on:foo/>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-shorthand-dynamic-component/Widget.svelte b/test/runtime/samples/event-handler-shorthand-dynamic-component/Widget.svelte
new file mode 100644
index 0000000000..cde03db92b
--- /dev/null
+++ b/test/runtime/samples/event-handler-shorthand-dynamic-component/Widget.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<button on:click='{() => dispatch("foo", { answer: 42 })}'>click me</button>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-shorthand-dynamic-component/_config.js b/test/runtime/samples/event-handler-shorthand-dynamic-component/_config.js
new file mode 100644
index 0000000000..22704cf1c3
--- /dev/null
+++ b/test/runtime/samples/event-handler-shorthand-dynamic-component/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<button>click me</button>
+	`,
+
+	test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		let answer;
+		component.$on('foo', event => {
+			answer = event.detail.answer;
+		});
+
+		button.dispatchEvent(event);
+		assert.equal(answer, 42);
+	}
+};
diff --git a/test/runtime/samples/event-handler-shorthand-dynamic-component/main.svelte b/test/runtime/samples/event-handler-shorthand-dynamic-component/main.svelte
new file mode 100644
index 0000000000..f6c5494ce4
--- /dev/null
+++ b/test/runtime/samples/event-handler-shorthand-dynamic-component/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<svelte:component this={Widget} on:foo/>
diff --git a/test/runtime/samples/event-handler-shorthand-sanitized/_config.js b/test/runtime/samples/event-handler-shorthand-sanitized/_config.js
new file mode 100644
index 0000000000..030e27ad1a
--- /dev/null
+++ b/test/runtime/samples/event-handler-shorthand-sanitized/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<button>click me now</button>
+	`,
+
+	test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.Event('click-now');
+
+		let clicked;
+		component.$on('click-now', () => {
+			clicked = true;
+		});
+
+		button.dispatchEvent(event);
+		assert.ok(clicked);
+	}
+};
diff --git a/test/runtime/samples/event-handler-shorthand-sanitized/main.svelte b/test/runtime/samples/event-handler-shorthand-sanitized/main.svelte
new file mode 100644
index 0000000000..05de1316ef
--- /dev/null
+++ b/test/runtime/samples/event-handler-shorthand-sanitized/main.svelte
@@ -0,0 +1 @@
+<button on:click-now>click me now</button>
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-this-methods/_config.js b/test/runtime/samples/event-handler-this-methods/_config.js
new file mode 100644
index 0000000000..d7907f752d
--- /dev/null
+++ b/test/runtime/samples/event-handler-this-methods/_config.js
@@ -0,0 +1,16 @@
+export default {
+	test({ assert, target, window }) {
+		// Click events don't focus elements in JSDOM – obviously they would
+		// in real browsers. More realistically, you'd use this for e.g.
+		// this.select(), but that's harder to test than this.focus()
+
+		const wont = target.querySelector('.wont-focus');
+		const will = target.querySelector('.will-focus');
+
+		wont.dispatchEvent(new window.MouseEvent('click'));
+		assert.equal(window.document.activeElement, window.document.body);
+
+		will.dispatchEvent(new window.MouseEvent('click'));
+		assert.equal(window.document.activeElement, will);
+	}
+};
diff --git a/test/runtime/samples/event-handler-this-methods/main.svelte b/test/runtime/samples/event-handler-this-methods/main.svelte
new file mode 100644
index 0000000000..29615b46e9
--- /dev/null
+++ b/test/runtime/samples/event-handler-this-methods/main.svelte
@@ -0,0 +1,2 @@
+<input class='wont-focus'>
+<input class='will-focus' on:click='{e => e.target.focus()}'>
diff --git a/test/runtime/samples/event-handler/_config.js b/test/runtime/samples/event-handler/_config.js
new file mode 100644
index 0000000000..f142fc9daa
--- /dev/null
+++ b/test/runtime/samples/event-handler/_config.js
@@ -0,0 +1,21 @@
+export default {
+	html: `
+		<button>toggle</button>
+	`,
+
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>toggle</button>
+			<p>hello!</p>
+		`);
+
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>toggle</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/event-handler/main.svelte b/test/runtime/samples/event-handler/main.svelte
new file mode 100644
index 0000000000..67ce998eee
--- /dev/null
+++ b/test/runtime/samples/event-handler/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let visible;
+</script>
+
+<button on:click='{() => visible = !visible}'>toggle</button>
+
+{#if visible}
+	<p>hello!</p>
+{/if}
diff --git a/test/runtime/samples/export-from/A.svelte b/test/runtime/samples/export-from/A.svelte
new file mode 100644
index 0000000000..7773727704
--- /dev/null
+++ b/test/runtime/samples/export-from/A.svelte
@@ -0,0 +1,23 @@
+<script context="module">
+  export { a, b } from './B.svelte';
+  export { c as d } from './B.svelte';
+</script>
+
+<script>
+  export { d, e } from './B.svelte';
+  export { f as g } from './B.svelte';
+  let e = 123;
+  let b = 234;
+  function foo() {
+    e = 456;
+    b = 567;
+  }
+</script>
+
+a: {typeof a}<br />
+b: {typeof b}<br />
+c: {typeof c}<br />
+d: {typeof d}<br />
+e: {typeof e}<br />
+f: {typeof f}<br />
+g: {typeof g}<br />
\ No newline at end of file
diff --git a/test/runtime/samples/export-from/B.svelte b/test/runtime/samples/export-from/B.svelte
new file mode 100644
index 0000000000..0cc1070cb5
--- /dev/null
+++ b/test/runtime/samples/export-from/B.svelte
@@ -0,0 +1,8 @@
+<script context="module">
+  export const a = 'a';
+  export const b = 'b';
+  export const c = 'c';
+  export const d = 'd';
+  export const e = 'e';
+  export const f = 'f';
+</script>
diff --git a/test/runtime/samples/export-from/_config.js b/test/runtime/samples/export-from/_config.js
new file mode 100644
index 0000000000..9e65b7501d
--- /dev/null
+++ b/test/runtime/samples/export-from/_config.js
@@ -0,0 +1,28 @@
+export default {
+	html: `
+		a,b,undefined,c
+		<br />
+		a: undefined<br />
+		b: number<br />
+		c: undefined<br />
+		d: undefined<br />
+		e: number<br />
+		f: undefined<br />
+		g: undefined<br />
+		<br />
+		{"d":"d","e":"e","g":"f"}
+	`,
+	ssrHtml: `
+		a,b,undefined,c
+		<br />
+		a: undefined<br />
+		b: number<br />
+		c: undefined<br />
+		d: undefined<br />
+		e: number<br />
+		f: undefined<br />
+		g: undefined<br />
+		<br />
+		{}
+	`
+};
diff --git a/test/runtime/samples/export-from/main.svelte b/test/runtime/samples/export-from/main.svelte
new file mode 100644
index 0000000000..18cc066c1f
--- /dev/null
+++ b/test/runtime/samples/export-from/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	import A, { a, b, c, d } from './A.svelte';
+	import {onMount} from 'svelte';
+
+	let component;
+	let props = {};
+	onMount(() => {
+		props = {
+			d: component.d,
+			e: component.e,
+			f: component.f,
+			g: component.g,
+		};
+	});
+</script>
+
+{a},{b},{c},{d}
+<br />
+<A bind:this={component} />
+<br />
+{JSON.stringify(props)}
\ No newline at end of file
diff --git a/test/runtime/samples/export-function-hoisting/_config.js b/test/runtime/samples/export-function-hoisting/_config.js
new file mode 100644
index 0000000000..f01c8b4841
--- /dev/null
+++ b/test/runtime/samples/export-function-hoisting/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: 'Compile plz'
+};
diff --git a/test/runtime/samples/export-function-hoisting/main.svelte b/test/runtime/samples/export-function-hoisting/main.svelte
new file mode 100644
index 0000000000..4b54049ed9
--- /dev/null
+++ b/test/runtime/samples/export-function-hoisting/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export function one () {
+    two()
+	}
+
+	export function two () {
+		return one()
+	}
+</script>
+
+Compile plz
diff --git a/test/runtime/samples/flush-before-bindings/Nested.svelte b/test/runtime/samples/flush-before-bindings/Nested.svelte
new file mode 100644
index 0000000000..0a1721d308
--- /dev/null
+++ b/test/runtime/samples/flush-before-bindings/Nested.svelte
@@ -0,0 +1,18 @@
+<script>
+	import Visibility from './Visibility.svelte';
+	import counter from './counter.js';
+
+	export let things = ['first thing', 'second thing'];
+	export let visibilityMap = {};
+
+	function visibleThings() {
+		counter.count += 1;
+		return things.filter(text => visibilityMap[text]);
+	}
+</script>
+
+{#each things as thing}
+	<Visibility bind:isVisible="visibilityMap[thing]">
+		<p>{thing} ({visibilityMap[thing]})</p>
+	</Visibility>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/flush-before-bindings/Visibility.svelte b/test/runtime/samples/flush-before-bindings/Visibility.svelte
new file mode 100644
index 0000000000..fa2a88f93b
--- /dev/null
+++ b/test/runtime/samples/flush-before-bindings/Visibility.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let isVisible;
+
+	onMount(() => {
+		isVisible = true;
+	});
+</script>
+
+<div>
+	<slot></slot>
+</div>
diff --git a/test/runtime/samples/flush-before-bindings/_config.js b/test/runtime/samples/flush-before-bindings/_config.js
new file mode 100644
index 0000000000..4f20299771
--- /dev/null
+++ b/test/runtime/samples/flush-before-bindings/_config.js
@@ -0,0 +1,23 @@
+// import counter from './counter.js';
+
+export default {
+	skip: true, // TODO
+
+	skip_if_ssr: true,
+
+	html: `
+		<div><p>first thing (true)</p></div>
+		<div><p>second thing (true)</p></div>
+	`,
+
+	test({ assert, component }) {
+		const visibleThings = component.visibleThings;
+		assert.deepEqual(visibleThings, ['first thing', 'second thing']);
+
+		const snapshots = component.snapshots;
+		assert.deepEqual(snapshots, [visibleThings]);
+
+		// TODO minimise the number of recomputations during oncreate
+		// assert.equal(counter.count, 1);
+	}
+};
diff --git a/test/runtime/samples/flush-before-bindings/counter.js b/test/runtime/samples/flush-before-bindings/counter.js
new file mode 100644
index 0000000000..f0fc271f84
--- /dev/null
+++ b/test/runtime/samples/flush-before-bindings/counter.js
@@ -0,0 +1,3 @@
+export default {
+	count: 0
+};
diff --git a/test/runtime/samples/flush-before-bindings/main.svelte b/test/runtime/samples/flush-before-bindings/main.svelte
new file mode 100644
index 0000000000..326222c818
--- /dev/null
+++ b/test/runtime/samples/flush-before-bindings/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { beforeUpdate } from 'svelte';
+	import Nested from './Nested.svelte';
+
+	export let snapshots;
+	export let visibleThings = [];
+
+	beforeUpdate(() => {
+		if (!snapshots) {
+			// first run
+			snapshots = [];
+		}
+
+		snapshots.push(visibleThings);
+	});
+</script>
+
+<Nested bind:visibleThings={visibleThings} />
\ No newline at end of file
diff --git a/test/runtime/samples/fragment-trailing-whitespace/_config.js b/test/runtime/samples/fragment-trailing-whitespace/_config.js
new file mode 100644
index 0000000000..549cb1be68
--- /dev/null
+++ b/test/runtime/samples/fragment-trailing-whitespace/_config.js
@@ -0,0 +1,16 @@
+const message = 'the quick brown fox jumps over the lazy dog';
+const expected = [...message].map(c => `<span>${c + ' '}</span>`).join('');
+
+export default {
+	props: {
+		message
+	},
+
+	async test({ assert, target }) {
+		const firstSpanList = target.children[0];
+		assert.equal(firstSpanList.innerHTML, expected);
+
+		const secondSpanList = target.children[1];
+		assert.equal(secondSpanList.innerHTML, expected);
+	}
+};
diff --git a/test/runtime/samples/fragment-trailing-whitespace/main.svelte b/test/runtime/samples/fragment-trailing-whitespace/main.svelte
new file mode 100644
index 0000000000..f36f2694a6
--- /dev/null
+++ b/test/runtime/samples/fragment-trailing-whitespace/main.svelte
@@ -0,0 +1,11 @@
+<script>
+    let message = "the quick brown fox jumps over the lazy dog"
+</script>
+
+<div id="first">
+    {#each message as char}
+        <span>{char} </span>
+    {/each}
+</div>
+
+<div id="second">{#each message as char}<span>{char} </span>{/each}</div>
\ No newline at end of file
diff --git a/test/runtime/samples/function-expression-inline/_config.js b/test/runtime/samples/function-expression-inline/_config.js
new file mode 100644
index 0000000000..a5dc3f7080
--- /dev/null
+++ b/test/runtime/samples/function-expression-inline/_config.js
@@ -0,0 +1,22 @@
+export default {
+	html: `
+		<button>click me</button>
+		<p>1</p>
+		<p>2</p>
+		<p>3</p>
+	`,
+
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>click me</button>
+			<p>2</p>
+			<p>4</p>
+			<p>6</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/function-expression-inline/main.svelte b/test/runtime/samples/function-expression-inline/main.svelte
new file mode 100644
index 0000000000..f3f98459a7
--- /dev/null
+++ b/test/runtime/samples/function-expression-inline/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	let list = [1, 2, 3];
+</script>
+
+<button on:click={event => {
+	list = list.map(item => {
+		return item * 2;
+	});
+}}>click me</button>
+
+{#each list as number}
+	<p>{number}</p>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/function-hoisting/_config.js b/test/runtime/samples/function-hoisting/_config.js
new file mode 100644
index 0000000000..91492d8c38
--- /dev/null
+++ b/test/runtime/samples/function-hoisting/_config.js
@@ -0,0 +1,7 @@
+export default {
+	props: {
+		greeting: 'Good day'
+	},
+
+	html: '<h1>Good day, world</h1>'
+};
diff --git a/test/runtime/samples/function-hoisting/main.svelte b/test/runtime/samples/function-hoisting/main.svelte
new file mode 100644
index 0000000000..109697193c
--- /dev/null
+++ b/test/runtime/samples/function-hoisting/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let greeting = 'Hello'
+	let name = 'world';
+
+  // both functions, and `name` are hoistable, but hoistMe does not get hoisted
+	function hoistMeMaybe () {
+		return hoistMe(name) // comment out this line => hoistMe is hoisted
+	}
+
+	function hoistMe (name) {
+		return name
+	}
+</script>
+
+<h1>{greeting}, {hoistMeMaybe()}</h1>
diff --git a/test/runtime/samples/function-in-expression/_config.js b/test/runtime/samples/function-in-expression/_config.js
new file mode 100644
index 0000000000..d3086863d3
--- /dev/null
+++ b/test/runtime/samples/function-in-expression/_config.js
@@ -0,0 +1,13 @@
+export default {
+	props: {
+		numbers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+	},
+
+	html: '1, 3, 5, 7, 9',
+
+	test({ assert, component, target }) {
+		component.numbers = [10, 11, 12, 13, 14, 15, 16];
+
+		assert.htmlEqual(target.innerHTML, '11, 13, 15');
+	}
+};
diff --git a/test/runtime/samples/function-in-expression/main.svelte b/test/runtime/samples/function-in-expression/main.svelte
new file mode 100644
index 0000000000..272c705165
--- /dev/null
+++ b/test/runtime/samples/function-in-expression/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let numbers;
+</script>
+
+{numbers.filter(x => x % 2).join(', ')}
\ No newline at end of file
diff --git a/test/runtime/samples/get-after-destroy/_config.js b/test/runtime/samples/get-after-destroy/_config.js
new file mode 100644
index 0000000000..5e3171d39a
--- /dev/null
+++ b/test/runtime/samples/get-after-destroy/_config.js
@@ -0,0 +1,13 @@
+export default {
+	props: {
+		foo: 1
+	},
+
+	html: '<div>1</div>',
+
+	test({ assert, component }) {
+		component.$destroy();
+		const { foo } = component;
+		assert.equal(foo, undefined);
+	}
+};
diff --git a/test/runtime/samples/get-after-destroy/main.svelte b/test/runtime/samples/get-after-destroy/main.svelte
new file mode 100644
index 0000000000..0831729fa5
--- /dev/null
+++ b/test/runtime/samples/get-after-destroy/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+<div>{foo}</div>
\ No newline at end of file
diff --git a/test/runtime/samples/globals-accessible-directly-process/_config.js b/test/runtime/samples/globals-accessible-directly-process/_config.js
new file mode 100644
index 0000000000..99f1025f5c
--- /dev/null
+++ b/test/runtime/samples/globals-accessible-directly-process/_config.js
@@ -0,0 +1,11 @@
+export default {
+	html: '<h1>Hello world!</h1>',
+
+	before_test() {
+		process.env.TMP_VAR = 'world';
+	},
+
+	after_test() {
+		delete process.env.TMP_VAR;
+	}
+};
diff --git a/test/runtime/samples/globals-accessible-directly-process/main.svelte b/test/runtime/samples/globals-accessible-directly-process/main.svelte
new file mode 100644
index 0000000000..3ce7c67b9d
--- /dev/null
+++ b/test/runtime/samples/globals-accessible-directly-process/main.svelte
@@ -0,0 +1 @@
+<h1>Hello {process.env.TMP_VAR}!</h1>
\ No newline at end of file
diff --git a/test/runtime/samples/globals-accessible-directly/_config.js b/test/runtime/samples/globals-accessible-directly/_config.js
new file mode 100644
index 0000000000..30e176ae1b
--- /dev/null
+++ b/test/runtime/samples/globals-accessible-directly/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: '',
+
+	test({ assert, target }) {
+		assert.htmlEqual(target.innerHTML, 'NaN');
+	}
+};
diff --git a/test/runtime/samples/globals-accessible-directly/main.svelte b/test/runtime/samples/globals-accessible-directly/main.svelte
new file mode 100644
index 0000000000..77225fa117
--- /dev/null
+++ b/test/runtime/samples/globals-accessible-directly/main.svelte
@@ -0,0 +1 @@
+{NaN}
diff --git a/test/runtime/samples/globals-not-dereferenced/_config.js b/test/runtime/samples/globals-not-dereferenced/_config.js
new file mode 100644
index 0000000000..f10f44253b
--- /dev/null
+++ b/test/runtime/samples/globals-not-dereferenced/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		x: 10
+	},
+
+	html: '5',
+
+	test({ assert, component, target }) {
+		component.x = 3;
+		assert.htmlEqual( target.innerHTML, '3' );
+	}
+};
diff --git a/test/runtime/samples/globals-not-dereferenced/main.svelte b/test/runtime/samples/globals-not-dereferenced/main.svelte
new file mode 100644
index 0000000000..a4a3b59d10
--- /dev/null
+++ b/test/runtime/samples/globals-not-dereferenced/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x;
+</script>
+
+{Math.min(x, 5)}
diff --git a/test/runtime/samples/globals-not-overwritten-by-bindings/_config.js b/test/runtime/samples/globals-not-overwritten-by-bindings/_config.js
new file mode 100644
index 0000000000..34cee8157c
--- /dev/null
+++ b/test/runtime/samples/globals-not-overwritten-by-bindings/_config.js
@@ -0,0 +1,78 @@
+export default {
+	html: `
+		<div class="todo done">
+			<input type="checkbox">
+			<input type="text">
+		</div>
+
+		<div class="todo done">
+			<input type="checkbox">
+			<input type="text">
+		</div>
+
+		<div class="todo ">
+			<input type="checkbox">
+			<input type="text">
+		</div>
+	`,
+
+	ssrHtml: `
+		<div class="todo done">
+			<input type="checkbox" checked>
+			<input type="text" value="Buy some milk">
+		</div>
+
+		<div class="todo done">
+			<input type="checkbox" checked>
+			<input type="text" value="Do the laundry">
+		</div>
+
+		<div class="todo ">
+			<input type="checkbox">
+			<input type="text" value="Find life's true purpose">
+		</div>
+	`,
+
+	props: {
+		todos: {
+			first: {
+				description: 'Buy some milk',
+				done: true
+			},
+			second: {
+				description: 'Do the laundry',
+				done: true
+			},
+			third: {
+				description: "Find life's true purpose",
+				done: false
+			}
+		}
+	},
+
+	async test({ assert, component, target, window }) {
+		const input = document.querySelectorAll('input[type="checkbox"]')[2];
+		const change = new window.Event('change');
+
+		input.checked = true;
+		await input.dispatchEvent(change);
+
+		assert.ok(component.todos.third.done);
+		assert.htmlEqual(target.innerHTML, `
+			<div class="todo done">
+				<input type="checkbox">
+				<input type="text">
+			</div>
+
+			<div class="todo done">
+				<input type="checkbox">
+				<input type="text">
+			</div>
+
+			<div class="todo done">
+				<input type="checkbox">
+				<input type="text">
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/globals-not-overwritten-by-bindings/main.svelte b/test/runtime/samples/globals-not-overwritten-by-bindings/main.svelte
new file mode 100644
index 0000000000..602c8c8805
--- /dev/null
+++ b/test/runtime/samples/globals-not-overwritten-by-bindings/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let todos;
+</script>
+
+{#each Object.keys(todos) as key}
+	<div class='todo {todos[key].done ? "done": ""}'>
+		<input type='checkbox' bind:checked={todos[key].done}>
+		<input type='text' bind:value={todos[key].description}>
+	</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/globals-shadowed-by-data/_config.js b/test/runtime/samples/globals-shadowed-by-data/_config.js
new file mode 100644
index 0000000000..1f268bdd80
--- /dev/null
+++ b/test/runtime/samples/globals-shadowed-by-data/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		x: 10
+	},
+
+	html: 'potato',
+
+	test({ assert, component, target }) {
+		component.x = 3;
+		assert.htmlEqual( target.innerHTML, 'potato' );
+	}
+};
diff --git a/test/runtime/samples/globals-shadowed-by-data/main.svelte b/test/runtime/samples/globals-shadowed-by-data/main.svelte
new file mode 100644
index 0000000000..4b439b55aa
--- /dev/null
+++ b/test/runtime/samples/globals-shadowed-by-data/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let x;
+	export let Math = {
+		min ( a, b ) {
+			return 'potato';
+		}
+	};
+</script>
+
+{Math.min(x, 5)}
diff --git a/test/runtime/samples/globals-shadowed-by-each-binding/_config.js b/test/runtime/samples/globals-shadowed-by-each-binding/_config.js
new file mode 100644
index 0000000000..50feb09bb6
--- /dev/null
+++ b/test/runtime/samples/globals-shadowed-by-each-binding/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>Alert1</p><p>Alert2</p>'
+};
diff --git a/test/runtime/samples/globals-shadowed-by-each-binding/main.svelte b/test/runtime/samples/globals-shadowed-by-each-binding/main.svelte
new file mode 100644
index 0000000000..3d0ac3f3ec
--- /dev/null
+++ b/test/runtime/samples/globals-shadowed-by-each-binding/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	const alerts = ['Alert1', 'Alert2'];
+</script>
+
+{#each alerts as alert}
+	<p>{alert}</p>
+{/each}
diff --git a/test/runtime/samples/globals-shadowed-by-helpers/_config.js b/test/runtime/samples/globals-shadowed-by-helpers/_config.js
new file mode 100644
index 0000000000..1f268bdd80
--- /dev/null
+++ b/test/runtime/samples/globals-shadowed-by-helpers/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		x: 10
+	},
+
+	html: 'potato',
+
+	test({ assert, component, target }) {
+		component.x = 3;
+		assert.htmlEqual( target.innerHTML, 'potato' );
+	}
+};
diff --git a/test/runtime/samples/globals-shadowed-by-helpers/main.svelte b/test/runtime/samples/globals-shadowed-by-helpers/main.svelte
new file mode 100644
index 0000000000..8c360f9114
--- /dev/null
+++ b/test/runtime/samples/globals-shadowed-by-helpers/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let x;
+
+	const Math = {
+		min ( a, b ) {
+			return 'potato';
+		}
+	};
+</script>
+
+{Math.min(x, 5)}
diff --git a/test/runtime/samples/hash-in-attribute/_config.js b/test/runtime/samples/hash-in-attribute/_config.js
new file mode 100644
index 0000000000..a6fe8eb909
--- /dev/null
+++ b/test/runtime/samples/hash-in-attribute/_config.js
@@ -0,0 +1,26 @@
+export default {
+	preserveIdentifiers: true,
+
+	props: {
+		links: ['a', 'b', 'c']
+	},
+
+	html: `
+		<a href="x#a">x#a</a>
+		<a href="x#b">x#b</a>
+		<a href="x#c">x#c</a>
+	`,
+
+	test({ assert, component, target }) {
+		component.links = ['d', 'e', 'f'];
+
+		const links = [...target.querySelectorAll('a')];
+		assert.deepEqual(links.map(l => l.href), ['x#d', 'x#e', 'x#f']);
+
+		assert.htmlEqual(target.innerHTML, `
+			<a href="x#d">x#d</a>
+			<a href="x#e">x#e</a>
+			<a href="x#f">x#f</a>
+		`);
+	}
+};
diff --git a/test/runtime/samples/hash-in-attribute/main.svelte b/test/runtime/samples/hash-in-attribute/main.svelte
new file mode 100644
index 0000000000..f250a8256b
--- /dev/null
+++ b/test/runtime/samples/hash-in-attribute/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let links;
+</script>
+
+{#each links as link}
+	<a href="x#{link}">x#{link}</a>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/head-detached-in-dynamic-component/A.svelte b/test/runtime/samples/head-detached-in-dynamic-component/A.svelte
new file mode 100644
index 0000000000..f05488e3e4
--- /dev/null
+++ b/test/runtime/samples/head-detached-in-dynamic-component/A.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+	<meta name="description" content="A"/>
+</svelte:head>
+
+A
\ No newline at end of file
diff --git a/test/runtime/samples/head-detached-in-dynamic-component/B.svelte b/test/runtime/samples/head-detached-in-dynamic-component/B.svelte
new file mode 100644
index 0000000000..943b307cc3
--- /dev/null
+++ b/test/runtime/samples/head-detached-in-dynamic-component/B.svelte
@@ -0,0 +1,5 @@
+<svelte:head>
+	<meta name="description" content="B"/>
+</svelte:head>
+
+B
\ No newline at end of file
diff --git a/test/runtime/samples/head-detached-in-dynamic-component/_config.js b/test/runtime/samples/head-detached-in-dynamic-component/_config.js
new file mode 100644
index 0000000000..e18589e10e
--- /dev/null
+++ b/test/runtime/samples/head-detached-in-dynamic-component/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: `
+		A
+	`,
+
+	test({ assert, component, window }) {
+		component.x = false;
+
+		const meta = window.document.querySelectorAll('meta');
+
+		assert.equal(meta.length, 1);
+		assert.equal(meta[0].name, 'description');
+		assert.equal(meta[0].content, 'B');
+	}
+};
diff --git a/test/runtime/samples/head-detached-in-dynamic-component/main.svelte b/test/runtime/samples/head-detached-in-dynamic-component/main.svelte
new file mode 100644
index 0000000000..e4acd7737a
--- /dev/null
+++ b/test/runtime/samples/head-detached-in-dynamic-component/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import A from './A.svelte';
+	import B from './B.svelte';
+
+	export let x = true;
+</script>
+
+<svelte:component this="{x ? A : B}"/>
\ No newline at end of file
diff --git a/test/runtime/samples/head-if-block/_config.js b/test/runtime/samples/head-if-block/_config.js
new file mode 100644
index 0000000000..cb8b6eccb9
--- /dev/null
+++ b/test/runtime/samples/head-if-block/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		condition: false
+	},
+
+	test({ assert, component, window }) {
+		assert.equal(window.document.title, '');
+
+		component.condition = true;
+		assert.equal(window.document.title, 'woo!!!');
+	}
+};
diff --git a/test/runtime/samples/head-if-block/main.svelte b/test/runtime/samples/head-if-block/main.svelte
new file mode 100644
index 0000000000..1656278b9e
--- /dev/null
+++ b/test/runtime/samples/head-if-block/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let condition;
+</script>
+
+<svelte:head>
+	{#if condition}
+		<title>woo!!!</title>
+	{/if}
+</svelte:head>
diff --git a/test/runtime/samples/head-if-else-block/_config.js b/test/runtime/samples/head-if-else-block/_config.js
new file mode 100644
index 0000000000..64da6ff796
--- /dev/null
+++ b/test/runtime/samples/head-if-else-block/_config.js
@@ -0,0 +1,14 @@
+export default {
+	props: {
+		condition: false
+	},
+
+	test({ assert, component, window }) {
+		assert.equal(window.document.title, '');
+		assert.equal(Boolean(window.document.getElementById('meta')), true);
+
+		component.condition = true;
+		assert.equal(window.document.title, 'woo!!!');
+		assert.equal(window.document.getElementById('meta'), null);
+	}
+};
diff --git a/test/runtime/samples/head-if-else-block/main.svelte b/test/runtime/samples/head-if-else-block/main.svelte
new file mode 100644
index 0000000000..a31bdf3330
--- /dev/null
+++ b/test/runtime/samples/head-if-else-block/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let condition;
+</script>
+
+<svelte:head>
+	{#if condition}
+		<title>woo!!!</title>
+	{:else}
+		<meta id="meta" name="title" content="woo!!!"/>
+	{/if}
+</svelte:head>
diff --git a/test/runtime/samples/head-if-else-raw-dynamic/_config.js b/test/runtime/samples/head-if-else-raw-dynamic/_config.js
new file mode 100644
index 0000000000..b6da617cb9
--- /dev/null
+++ b/test/runtime/samples/head-if-else-raw-dynamic/_config.js
@@ -0,0 +1,19 @@
+const foo = '<script type="application/json">{ "foo": "true" }</script>';
+const bar = '<script type="application/json">{ "bar": "true" }</script>';
+
+export default {
+	props: {
+		condition: false,
+		foo,
+		bar
+	},
+
+	test({ assert, component, window }) {
+		assert.equal(window.document.head.innerHTML.includes(foo), false);
+		assert.equal(window.document.head.innerHTML.includes(bar), true);
+
+		component.condition = true;
+		assert.equal(window.document.head.innerHTML.includes(foo), true);
+		assert.equal(window.document.head.innerHTML.includes(bar), false);
+	}
+};
diff --git a/test/runtime/samples/head-if-else-raw-dynamic/main.svelte b/test/runtime/samples/head-if-else-raw-dynamic/main.svelte
new file mode 100644
index 0000000000..ca322dad83
--- /dev/null
+++ b/test/runtime/samples/head-if-else-raw-dynamic/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let condition, foo, bar;
+</script>
+
+<svelte:head>
+	{#if condition}
+		{@html foo}
+	{:else}
+		{@html bar}
+	{/if}
+</svelte:head>
diff --git a/test/runtime/samples/head-raw-dynamic/Bar.svelte b/test/runtime/samples/head-raw-dynamic/Bar.svelte
new file mode 100644
index 0000000000..11e5cb9ee8
--- /dev/null
+++ b/test/runtime/samples/head-raw-dynamic/Bar.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let bar;
+</script>
+
+<svelte:head>
+	<meta id="meta" name="title" content="bar!!!"/>
+	{#if true}
+		{@html bar}
+	{/if}
+	<title>bar!!!</title>
+</svelte:head>
diff --git a/test/runtime/samples/head-raw-dynamic/Foo.svelte b/test/runtime/samples/head-raw-dynamic/Foo.svelte
new file mode 100644
index 0000000000..f4fd5741ac
--- /dev/null
+++ b/test/runtime/samples/head-raw-dynamic/Foo.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo;
+</script>
+
+<svelte:head>
+	{@html foo}
+</svelte:head>
diff --git a/test/runtime/samples/head-raw-dynamic/_config.js b/test/runtime/samples/head-raw-dynamic/_config.js
new file mode 100644
index 0000000000..61e86727ff
--- /dev/null
+++ b/test/runtime/samples/head-raw-dynamic/_config.js
@@ -0,0 +1,26 @@
+const foo = '<script type="application/json">{ "foo": "true" }</script>';
+const bar = '<script type="application/json">{ "bar": "true" }</script>';
+
+export default {
+	props: {
+		condition: 1,
+		foo,
+		bar
+	},
+
+	test({ assert, component, window }) {
+		assert.equal(window.document.head.innerHTML.includes(foo), true);
+
+		component.condition = false;
+		assert.equal(window.document.head.innerHTML.includes(foo), false);
+
+		component.condition = 2;
+		assert.equal(window.document.title, 'bar!!!');
+		assert.equal(window.document.head.innerHTML.includes(bar), true);
+		assert.equal(Boolean(window.document.getElementById('meta')), true);
+
+		component.condition = false;
+		assert.equal(window.document.head.innerHTML.includes(bar), false);
+		assert.equal(window.document.getElementById('meta'), null);
+	}
+};
diff --git a/test/runtime/samples/head-raw-dynamic/main.svelte b/test/runtime/samples/head-raw-dynamic/main.svelte
new file mode 100644
index 0000000000..69f341ae36
--- /dev/null
+++ b/test/runtime/samples/head-raw-dynamic/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Foo from './Foo.svelte';
+	import Bar from './Bar.svelte';
+
+	export let condition, foo, bar;
+</script>
+
+{#if condition === 1}
+	<Foo {foo} />
+{:else if condition === 2}
+	<Bar {bar} />
+{/if}
diff --git a/test/runtime/samples/head-title-dynamic-simple/_config.js b/test/runtime/samples/head-title-dynamic-simple/_config.js
new file mode 100644
index 0000000000..7a086419ee
--- /dev/null
+++ b/test/runtime/samples/head-title-dynamic-simple/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		foo: 'A Title'
+	},
+
+	test({ assert, component, window }) {
+		assert.equal(window.document.title, 'A Title');
+
+		component.foo = 'Also A Title';
+		assert.equal(window.document.title, 'Also A Title');
+	}
+};
diff --git a/test/runtime/samples/head-title-dynamic-simple/main.svelte b/test/runtime/samples/head-title-dynamic-simple/main.svelte
new file mode 100644
index 0000000000..7fc54ba1d2
--- /dev/null
+++ b/test/runtime/samples/head-title-dynamic-simple/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo;
+</script>
+
+<svelte:head>
+	<title>{foo}</title>
+</svelte:head>
\ No newline at end of file
diff --git a/test/runtime/samples/head-title-dynamic/_config.js b/test/runtime/samples/head-title-dynamic/_config.js
new file mode 100644
index 0000000000..2555e55b8c
--- /dev/null
+++ b/test/runtime/samples/head-title-dynamic/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		adjective: 'custom'
+	},
+
+	test({ assert, component, window }) {
+		assert.equal(window.document.title, 'a custom title');
+
+		component.adjective = 'different';
+		assert.equal(window.document.title, 'a different title');
+	}
+};
diff --git a/test/runtime/samples/head-title-dynamic/main.svelte b/test/runtime/samples/head-title-dynamic/main.svelte
new file mode 100644
index 0000000000..60888e569e
--- /dev/null
+++ b/test/runtime/samples/head-title-dynamic/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let adjective;
+</script>
+
+<svelte:head>
+	<title>a {adjective} title</title>
+	<meta name='twitter:creator' content='@sveltejs'>
+</svelte:head>
\ No newline at end of file
diff --git a/test/runtime/samples/head-title-empty/_config.js b/test/runtime/samples/head-title-empty/_config.js
new file mode 100644
index 0000000000..5b0785c797
--- /dev/null
+++ b/test/runtime/samples/head-title-empty/_config.js
@@ -0,0 +1,5 @@
+export default {
+	test({ assert, window }) {
+		assert.equal(window.document.title, '');
+	}
+};
diff --git a/test/runtime/samples/head-title-empty/main.svelte b/test/runtime/samples/head-title-empty/main.svelte
new file mode 100644
index 0000000000..3f81715df5
--- /dev/null
+++ b/test/runtime/samples/head-title-empty/main.svelte
@@ -0,0 +1,3 @@
+<svelte:head>
+	<title></title>
+</svelte:head>
\ No newline at end of file
diff --git a/test/runtime/samples/head-title-static/_config.js b/test/runtime/samples/head-title-static/_config.js
new file mode 100644
index 0000000000..184d04c092
--- /dev/null
+++ b/test/runtime/samples/head-title-static/_config.js
@@ -0,0 +1,5 @@
+export default {
+	test({ assert, window }) {
+		assert.equal(window.document.title, 'changed');
+	}
+};
diff --git a/test/runtime/samples/head-title-static/main.svelte b/test/runtime/samples/head-title-static/main.svelte
new file mode 100644
index 0000000000..7f9da20911
--- /dev/null
+++ b/test/runtime/samples/head-title-static/main.svelte
@@ -0,0 +1,4 @@
+<svelte:head>
+	<title>changed</title>
+	<meta name='twitter:creator' content='@sveltejs'>
+</svelte:head>
\ No newline at end of file
diff --git a/test/runtime/samples/hello-world/_config.js b/test/runtime/samples/hello-world/_config.js
new file mode 100644
index 0000000000..d65d690011
--- /dev/null
+++ b/test/runtime/samples/hello-world/_config.js
@@ -0,0 +1,15 @@
+export default {
+	props: {
+		name: 'world'
+	},
+
+	html: '<h1>Hello world!</h1>',
+
+	test({ assert, component, target }) {
+		component.name = 'everybody';
+		assert.htmlEqual(target.innerHTML, '<h1>Hello everybody!</h1>');
+
+		component.$destroy();
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/hello-world/main.svelte b/test/runtime/samples/hello-world/main.svelte
new file mode 100644
index 0000000000..538dc970e9
--- /dev/null
+++ b/test/runtime/samples/hello-world/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let name;
+</script>
+
+<h1>Hello {name}!</h1>
diff --git a/test/runtime/samples/helpers-not-call-expression/_config.js b/test/runtime/samples/helpers-not-call-expression/_config.js
new file mode 100644
index 0000000000..0b65615c81
--- /dev/null
+++ b/test/runtime/samples/helpers-not-call-expression/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>1,4,9</p>'
+};
diff --git a/test/runtime/samples/helpers-not-call-expression/main.svelte b/test/runtime/samples/helpers-not-call-expression/main.svelte
new file mode 100644
index 0000000000..6f69090a58
--- /dev/null
+++ b/test/runtime/samples/helpers-not-call-expression/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let numbers = [ 1, 2, 3 ];
+
+	const square = num => num * num;
+</script>
+
+<p>{numbers.map(square)}</p>
diff --git a/test/runtime/samples/helpers/_config.js b/test/runtime/samples/helpers/_config.js
new file mode 100644
index 0000000000..53c8274d59
--- /dev/null
+++ b/test/runtime/samples/helpers/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>sdrawkcab</p>'
+};
diff --git a/test/runtime/samples/helpers/main.svelte b/test/runtime/samples/helpers/main.svelte
new file mode 100644
index 0000000000..c62e3a8fba
--- /dev/null
+++ b/test/runtime/samples/helpers/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	function reverse(str) {
+		let reversed = '';
+		let i = str.length;
+		while ( i-- ) reversed += str[i];
+		return reversed;
+	}
+</script>
+
+<p>{reverse('backwards')}</p>
diff --git a/test/runtime/samples/html-entities-inside-elements/_config.js b/test/runtime/samples/html-entities-inside-elements/_config.js
new file mode 100644
index 0000000000..2537da2654
--- /dev/null
+++ b/test/runtime/samples/html-entities-inside-elements/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<p>this &lt;em&gt;should&lt;/em&gt; not be <span>&lt;strong&gt;bold&lt;/strong&gt;</span></p>
+	`
+};
diff --git a/test/runtime/samples/html-entities-inside-elements/main.svelte b/test/runtime/samples/html-entities-inside-elements/main.svelte
new file mode 100644
index 0000000000..69aa63b174
--- /dev/null
+++ b/test/runtime/samples/html-entities-inside-elements/main.svelte
@@ -0,0 +1 @@
+<p>this &lt;em&gt;should&lt;/em&gt; not be <span>&lt;strong&gt;bold&lt;/strong&gt;</span></p>
\ No newline at end of file
diff --git a/test/runtime/samples/html-entities/_config.js b/test/runtime/samples/html-entities/_config.js
new file mode 100644
index 0000000000..ddcc318e28
--- /dev/null
+++ b/test/runtime/samples/html-entities/_config.js
@@ -0,0 +1,14 @@
+export default {
+	html: `
+		<span>*</span>
+		<span>*</span>
+		<span>*</span>
+		<span>*</span>
+
+		<span></span>
+		<span>A</span>
+		<span>€</span>
+
+		<span>&amp;notanentity;</span>
+	`
+};
diff --git a/test/runtime/samples/html-entities/main.svelte b/test/runtime/samples/html-entities/main.svelte
new file mode 100644
index 0000000000..04d9846e78
--- /dev/null
+++ b/test/runtime/samples/html-entities/main.svelte
@@ -0,0 +1,10 @@
+<span>&ast;</span>
+<span>&midast;</span>
+<span>&#x0002A;</span>
+<span>&#42;</span>
+
+<span>&#10;</span>
+<span>&#65;</span>
+<span>&#128;</span>
+
+<span>&notanentity;</span>
diff --git a/test/runtime/samples/html-non-entities-inside-elements/_config.js b/test/runtime/samples/html-non-entities-inside-elements/_config.js
new file mode 100644
index 0000000000..d8e128a117
--- /dev/null
+++ b/test/runtime/samples/html-non-entities-inside-elements/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<div>'foo'<span/></div>
+	`
+};
diff --git a/test/runtime/samples/html-non-entities-inside-elements/main.svelte b/test/runtime/samples/html-non-entities-inside-elements/main.svelte
new file mode 100644
index 0000000000..7b49c004db
--- /dev/null
+++ b/test/runtime/samples/html-non-entities-inside-elements/main.svelte
@@ -0,0 +1 @@
+<div>'foo'<span/></div>
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-component-store-function-conditionals/Widget.svelte b/test/runtime/samples/if-block-component-store-function-conditionals/Widget.svelte
new file mode 100644
index 0000000000..a74ce95de5
--- /dev/null
+++ b/test/runtime/samples/if-block-component-store-function-conditionals/Widget.svelte
@@ -0,0 +1 @@
+<p>OK</p>
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-component-store-function-conditionals/_config.js b/test/runtime/samples/if-block-component-store-function-conditionals/_config.js
new file mode 100644
index 0000000000..609765d225
--- /dev/null
+++ b/test/runtime/samples/if-block-component-store-function-conditionals/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>OK</p>'
+};
diff --git a/test/runtime/samples/if-block-component-store-function-conditionals/main.svelte b/test/runtime/samples/if-block-component-store-function-conditionals/main.svelte
new file mode 100644
index 0000000000..765654f0d2
--- /dev/null
+++ b/test/runtime/samples/if-block-component-store-function-conditionals/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import {writable} from 'svelte/store';
+	import Widget from './Widget.svelte';
+	let a = (writable({}));
+	let b = () => true;
+</script>
+<!-- if (reactive && non-reactive) -->
+{#if $a || b() }
+		<Widget></Widget>
+{:else}
+	<pre>fail</pre>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-component-without-outro/Widget.svelte b/test/runtime/samples/if-block-component-without-outro/Widget.svelte
new file mode 100644
index 0000000000..c66687863a
--- /dev/null
+++ b/test/runtime/samples/if-block-component-without-outro/Widget.svelte
@@ -0,0 +1 @@
+<div>A wild component appears</div>
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-component-without-outro/_config.js b/test/runtime/samples/if-block-component-without-outro/_config.js
new file mode 100644
index 0000000000..fbcc328fa3
--- /dev/null
+++ b/test/runtime/samples/if-block-component-without-outro/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		foo: true
+	},
+
+	html: '<div>A wild component appears</div>',
+
+	test({ assert, component, target }) {
+		component.foo = false;
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/if-block-component-without-outro/main.svelte b/test/runtime/samples/if-block-component-without-outro/main.svelte
new file mode 100644
index 0000000000..2efb43b030
--- /dev/null
+++ b/test/runtime/samples/if-block-component-without-outro/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let foo;
+
+	import Widget from './Widget.svelte';
+</script>
+
+{#if foo}
+	<Widget/>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-compound-outro-no-dependencies/_config.js b/test/runtime/samples/if-block-compound-outro-no-dependencies/_config.js
new file mode 100644
index 0000000000..bcc4e256a4
--- /dev/null
+++ b/test/runtime/samples/if-block-compound-outro-no-dependencies/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: 'blah blah blah blah'
+};
diff --git a/test/runtime/samples/if-block-compound-outro-no-dependencies/main.svelte b/test/runtime/samples/if-block-compound-outro-no-dependencies/main.svelte
new file mode 100644
index 0000000000..84224116da
--- /dev/null
+++ b/test/runtime/samples/if-block-compound-outro-no-dependencies/main.svelte
@@ -0,0 +1,32 @@
+<script>
+	import { writable } from 'svelte/store';
+	const foo = writable(true);
+</script>
+
+{#if $foo}
+	blah
+{:else}
+	{#if bar()}
+		<Bar/>
+	{/if}
+{/if}
+
+{#if $foo}
+	blah
+{:else}
+	{#if bar}
+		<Baz/>
+	{/if}
+{/if}
+
+{#if $foo}
+	blah
+{:else if bar()}
+	<Bar/>
+{/if}
+
+{#if $foo}
+	blah
+{:else if bar}
+	<Bar/>
+{/if}
diff --git a/test/runtime/samples/if-block-conservative-update/_config.js b/test/runtime/samples/if-block-conservative-update/_config.js
new file mode 100644
index 0000000000..f7ba01a8fd
--- /dev/null
+++ b/test/runtime/samples/if-block-conservative-update/_config.js
@@ -0,0 +1,25 @@
+let count = 0;
+
+export default {
+	props: {
+		foo: 'potato',
+		fn: () => {
+			count += 1;
+			return true;
+		}
+	},
+
+	html: '<p>potato</p>',
+
+	before_test() {
+		count = 0;
+	},
+	test({ assert, component, target }) {
+		assert.equal(count, 1);
+
+		component.foo = 'soup';
+		assert.equal(count, 1);
+
+		assert.htmlEqual(target.innerHTML, '<p>soup</p>');
+	}
+};
diff --git a/test/runtime/samples/if-block-conservative-update/main.svelte b/test/runtime/samples/if-block-conservative-update/main.svelte
new file mode 100644
index 0000000000..93a40b0e9e
--- /dev/null
+++ b/test/runtime/samples/if-block-conservative-update/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let fn;
+	export let foo;
+</script>
+
+{#if fn()}
+	<p>{foo}</p>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-else-conservative-update/_config.js b/test/runtime/samples/if-block-else-conservative-update/_config.js
new file mode 100644
index 0000000000..b3db0bca54
--- /dev/null
+++ b/test/runtime/samples/if-block-else-conservative-update/_config.js
@@ -0,0 +1,42 @@
+let a = true;
+let count_a = 0;
+let count_b = 0;
+
+export default {
+	props: {
+		foo: 'potato',
+		fn: () => {
+			count_a += 1;
+			return a;
+		},
+		other_fn: () => {
+			count_b += 1;
+			return true;
+		}
+	},
+
+	html: '<p>potato</p>',
+
+	before_test() {
+		count_a = 0;
+		count_b = 0;
+	},
+
+	test({ assert, component, target }) {
+		assert.equal(count_a, 1);
+		assert.equal(count_b, 0);
+
+		a = false;
+		component.foo = 'soup';
+		assert.equal(count_a, 2);
+		assert.equal(count_b, 1);
+
+		assert.htmlEqual(target.innerHTML, '<p>SOUP</p>');
+
+		component.foo = 'salad';
+		assert.equal(count_a, 3);
+		assert.equal(count_b, 1);
+
+		assert.htmlEqual(target.innerHTML, '<p>SALAD</p>');
+	}
+};
diff --git a/test/runtime/samples/if-block-else-conservative-update/main.svelte b/test/runtime/samples/if-block-else-conservative-update/main.svelte
new file mode 100644
index 0000000000..ef9da266b9
--- /dev/null
+++ b/test/runtime/samples/if-block-else-conservative-update/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let fn;
+	export let other_fn;
+	export let foo;
+</script>
+
+{#if fn(foo)}
+	<p>{foo}</p>
+{:else if other_fn()}
+	<p>{foo.toUpperCase()}</p>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-else-in-each/_config.js b/test/runtime/samples/if-block-else-in-each/_config.js
new file mode 100644
index 0000000000..e75dcb15ee
--- /dev/null
+++ b/test/runtime/samples/if-block-else-in-each/_config.js
@@ -0,0 +1,9 @@
+export default {
+	props: {
+		array: [true, false]
+	},
+	html: `
+		<div>foo</div>
+		<div>bar</div>
+	`
+};
diff --git a/test/runtime/samples/if-block-else-in-each/main.svelte b/test/runtime/samples/if-block-else-in-each/main.svelte
new file mode 100644
index 0000000000..96ac5a6cdc
--- /dev/null
+++ b/test/runtime/samples/if-block-else-in-each/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let array;
+</script>
+
+{#each array as item}
+	{#if item}
+		<div>foo</div>
+	{:else}
+		<div>bar</div>
+	{/if}
+{/each}
diff --git a/test/runtime/samples/if-block-else-partial-outro/Foo.svelte b/test/runtime/samples/if-block-else-partial-outro/Foo.svelte
new file mode 100644
index 0000000000..1910281566
--- /dev/null
+++ b/test/runtime/samples/if-block-else-partial-outro/Foo.svelte
@@ -0,0 +1 @@
+foo
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-else-partial-outro/_config.js b/test/runtime/samples/if-block-else-partial-outro/_config.js
new file mode 100644
index 0000000000..ae58d25c23
--- /dev/null
+++ b/test/runtime/samples/if-block-else-partial-outro/_config.js
@@ -0,0 +1,17 @@
+export default {
+	props: {
+		x: 1,
+		y: false
+	},
+
+	html: `
+		<span>1</span>
+	`,
+
+	test({ assert, component, target }) {
+		component.x = 2;
+		assert.htmlEqual(target.innerHTML, `
+			<span>2</span>
+		`);
+	}
+};
diff --git a/test/runtime/samples/if-block-else-partial-outro/main.svelte b/test/runtime/samples/if-block-else-partial-outro/main.svelte
new file mode 100644
index 0000000000..47f986ea48
--- /dev/null
+++ b/test/runtime/samples/if-block-else-partial-outro/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let y = false;
+	export let x = 'x';
+
+	import Foo from './Foo.svelte';
+</script>
+
+{#if y}
+	<Foo/>
+{:else}
+	<span>{x}</span>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-else-update/_config.js b/test/runtime/samples/if-block-else-update/_config.js
new file mode 100644
index 0000000000..c653b6bbd1
--- /dev/null
+++ b/test/runtime/samples/if-block-else-update/_config.js
@@ -0,0 +1,46 @@
+export default {
+	async test({ assert, target, window }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+
+		const clickEvent = new window.MouseEvent('click');
+
+		await btn2.dispatchEvent(clickEvent);
+		assert.htmlEqual(target.innerHTML, `
+			<button>Toggle foo</button>
+			<button>Toggle bar</button>
+			<hr>
+			foo: false, bar: true
+			<hr>
+			bar!
+		`);
+
+		await btn1.dispatchEvent(clickEvent);
+		assert.htmlEqual(target.innerHTML, `
+			<button>Toggle foo</button>
+			<button>Toggle bar</button>
+			<hr>
+			foo: true, bar: true
+			<hr>
+			foo!
+		`);
+
+		await btn2.dispatchEvent(clickEvent);
+		assert.htmlEqual(target.innerHTML, `
+			<button>Toggle foo</button>
+			<button>Toggle bar</button>
+			<hr>
+			foo: true, bar: false
+			<hr>
+			foo!
+		`);
+
+		await btn1.dispatchEvent(clickEvent);
+		assert.htmlEqual(target.innerHTML, `
+			<button>Toggle foo</button>
+			<button>Toggle bar</button>
+			<hr>
+			foo: false, bar: false
+			<hr>
+		`);
+	}
+};
diff --git a/test/runtime/samples/if-block-else-update/main.svelte b/test/runtime/samples/if-block-else-update/main.svelte
new file mode 100644
index 0000000000..258d0422ba
--- /dev/null
+++ b/test/runtime/samples/if-block-else-update/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	let foo = false
+	let bar = [false];
+</script>
+
+<button on:click={() => foo = !foo}>
+	Toggle foo
+</button>
+<button on:click={() => bar[0] = !bar[0]}>
+	Toggle bar
+</button>
+
+<hr>
+{@html `foo: ${foo}, bar: ${bar.every(x => x)}`}
+<hr>
+
+{#if foo}
+	foo!
+{:else if bar.every(x => x)}
+	bar!
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-else/_config.js b/test/runtime/samples/if-block-else/_config.js
new file mode 100644
index 0000000000..5a60973e0d
--- /dev/null
+++ b/test/runtime/samples/if-block-else/_config.js
@@ -0,0 +1,31 @@
+export default {
+	props: {
+		foo: true,
+		bar: false
+	},
+
+	html: `
+		<p>foo</p>
+		<p>not bar</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.foo = false;
+		assert.htmlEqual( target.innerHTML, `
+			<p>not foo</p>
+			<p>not bar</p>
+		` );
+
+		component.bar = true;
+		assert.htmlEqual( target.innerHTML, `
+			<p>not foo</p>
+			<p>bar</p>
+		` );
+
+		component.foo = true;
+		assert.htmlEqual( target.innerHTML, `
+			<p>foo</p>
+			<p>bar</p>
+		` );
+	}
+};
diff --git a/test/runtime/samples/if-block-else/main.svelte b/test/runtime/samples/if-block-else/main.svelte
new file mode 100644
index 0000000000..e839f72191
--- /dev/null
+++ b/test/runtime/samples/if-block-else/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let foo;
+	export let bar;
+</script>
+
+{#if foo}
+	<p>foo</p>
+{:else}
+	<p>not foo</p>
+{/if}
+
+{#if bar}
+	<p>bar</p>
+{:else}
+	<p>not bar</p>
+{/if}
diff --git a/test/runtime/samples/if-block-elseif-no-else/_config.js b/test/runtime/samples/if-block-elseif-no-else/_config.js
new file mode 100644
index 0000000000..e9696e513c
--- /dev/null
+++ b/test/runtime/samples/if-block-elseif-no-else/_config.js
@@ -0,0 +1,19 @@
+export default {
+	props: {
+		x: 11
+	},
+
+	html: `
+		<p>x is greater than 10</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.x = 4;
+		assert.htmlEqual(target.innerHTML, `
+			<p>x is less than 5</p>
+		`);
+
+		component.x = 6;
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/if-block-elseif-no-else/main.svelte b/test/runtime/samples/if-block-elseif-no-else/main.svelte
new file mode 100644
index 0000000000..6d4f324717
--- /dev/null
+++ b/test/runtime/samples/if-block-elseif-no-else/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let x;
+</script>
+
+{#if x > 10}
+	<p>x is greater than 10</p>
+{:else if x < 5}
+	<p>x is less than 5</p>
+{/if}
diff --git a/test/runtime/samples/if-block-elseif-text/_config.js b/test/runtime/samples/if-block-elseif-text/_config.js
new file mode 100644
index 0000000000..d5031ffcf4
--- /dev/null
+++ b/test/runtime/samples/if-block-elseif-text/_config.js
@@ -0,0 +1,21 @@
+export default {
+	props: {
+		x: 11
+	},
+
+	html: `
+		before-if-after
+	`,
+
+	test({ assert, component, target }) {
+		component.x = 4;
+		assert.htmlEqual(target.innerHTML, `
+			before-elseif-after
+		`);
+
+		component.x = 6;
+		assert.htmlEqual(target.innerHTML, `
+			before-else-after
+		`);
+	}
+};
diff --git a/test/runtime/samples/if-block-elseif-text/main.svelte b/test/runtime/samples/if-block-elseif-text/main.svelte
new file mode 100644
index 0000000000..d1c161f616
--- /dev/null
+++ b/test/runtime/samples/if-block-elseif-text/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x;
+</script>
+
+before-{#if x > 10}if{:else if x < 5}elseif{:else}else{/if}-after
diff --git a/test/runtime/samples/if-block-elseif/_config.js b/test/runtime/samples/if-block-elseif/_config.js
new file mode 100644
index 0000000000..d09e88a2ef
--- /dev/null
+++ b/test/runtime/samples/if-block-elseif/_config.js
@@ -0,0 +1,21 @@
+export default {
+	props: {
+		x: 11
+	},
+
+	html: `
+		<p>x is greater than 10</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.x = 4;
+		assert.htmlEqual(target.innerHTML, `
+			<p>x is less than 5</p>
+		`);
+
+		component.x = 6;
+		assert.htmlEqual(target.innerHTML, `
+			<p>x is between 5 and 10</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/if-block-elseif/main.svelte b/test/runtime/samples/if-block-elseif/main.svelte
new file mode 100644
index 0000000000..bf22945159
--- /dev/null
+++ b/test/runtime/samples/if-block-elseif/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let x;
+</script>
+
+{#if x > 10}
+	<p>x is greater than 10</p>
+{:else if x < 5}
+	<p>x is less than 5</p>
+{:else}
+	<p>x is between 5 and 10</p>
+{/if}
diff --git a/test/runtime/samples/if-block-expression/_config.js b/test/runtime/samples/if-block-expression/_config.js
new file mode 100644
index 0000000000..9ce3ff2b52
--- /dev/null
+++ b/test/runtime/samples/if-block-expression/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>two is greater than one</p>'
+};
diff --git a/test/runtime/samples/if-block-expression/main.svelte b/test/runtime/samples/if-block-expression/main.svelte
new file mode 100644
index 0000000000..10d2c7b74f
--- /dev/null
+++ b/test/runtime/samples/if-block-expression/main.svelte
@@ -0,0 +1,3 @@
+{#if 2 > 1}
+	<p>two is greater than one</p>
+{/if}
diff --git a/test/runtime/samples/if-block-first/_config.js b/test/runtime/samples/if-block-first/_config.js
new file mode 100644
index 0000000000..01cf37dfb3
--- /dev/null
+++ b/test/runtime/samples/if-block-first/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		visible: false
+	},
+
+	html: '<div><div>before me</div></div>',
+
+	test({ assert, component, target }) {
+		component.visible = true;
+		assert.htmlEqual(target.innerHTML, '<div><div>i am visible</div><div>before me</div></div>' );
+	}
+};
diff --git a/test/runtime/samples/if-block-first/main.svelte b/test/runtime/samples/if-block-first/main.svelte
new file mode 100644
index 0000000000..b8680e7d4c
--- /dev/null
+++ b/test/runtime/samples/if-block-first/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let visible;
+</script>
+
+<div>
+	{#if visible}
+		<div>i am visible</div>
+	{/if}
+	<div>before me</div>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-no-outro-else-with-outro/Widget.svelte b/test/runtime/samples/if-block-no-outro-else-with-outro/Widget.svelte
new file mode 100644
index 0000000000..c66687863a
--- /dev/null
+++ b/test/runtime/samples/if-block-no-outro-else-with-outro/Widget.svelte
@@ -0,0 +1 @@
+<div>A wild component appears</div>
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-no-outro-else-with-outro/_config.js b/test/runtime/samples/if-block-no-outro-else-with-outro/_config.js
new file mode 100644
index 0000000000..da80f5be12
--- /dev/null
+++ b/test/runtime/samples/if-block-no-outro-else-with-outro/_config.js
@@ -0,0 +1,22 @@
+export default {
+	html: `
+		<div>A wild component appears</div>
+		<p>x</p>
+		<input type=text>
+	`,
+
+	ssrHtml: `
+		<div>A wild component appears</div>
+		<p>x</p>
+		<input type=text value=x>
+	`,
+
+	test({ assert, component, target }) {
+		component.x = 'y';
+		assert.htmlEqual(target.innerHTML, `
+			<div>A wild component appears</div>
+			<p>y</p>
+			<input type=text>
+		`);
+	}
+};
diff --git a/test/runtime/samples/if-block-no-outro-else-with-outro/main.svelte b/test/runtime/samples/if-block-no-outro-else-with-outro/main.svelte
new file mode 100644
index 0000000000..e32a7a52cb
--- /dev/null
+++ b/test/runtime/samples/if-block-no-outro-else-with-outro/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let foo;
+	export let x = 'x';
+
+	import Widget from './Widget.svelte';
+</script>
+
+{#if foo}
+	<p>foo</p>
+{:else}
+	<Widget/>
+	<p>{x}</p>
+	<input type="text" bind:value={x} />
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-or/_config.js b/test/runtime/samples/if-block-or/_config.js
new file mode 100644
index 0000000000..bd1b7df4f4
--- /dev/null
+++ b/test/runtime/samples/if-block-or/_config.js
@@ -0,0 +1,15 @@
+export default {
+	props: {
+		a: true,
+		b: false
+	},
+
+	html: '<p>i am visible</p>',
+
+	test({ assert, component, target }) {
+		component.a = false;
+		assert.htmlEqual( target.innerHTML, '' );
+		component.b = true;
+		assert.htmlEqual( target.innerHTML, '<p>i am visible</p>' );
+	}
+};
diff --git a/test/runtime/samples/if-block-or/main.svelte b/test/runtime/samples/if-block-or/main.svelte
new file mode 100644
index 0000000000..5e9268fb1d
--- /dev/null
+++ b/test/runtime/samples/if-block-or/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let a;
+	export let b;
+</script>
+
+{#if a || b}
+	<p>i am visible</p>
+{/if}
diff --git a/test/runtime/samples/if-block-outro-computed-function/Foo.svelte b/test/runtime/samples/if-block-outro-computed-function/Foo.svelte
new file mode 100644
index 0000000000..1910281566
--- /dev/null
+++ b/test/runtime/samples/if-block-outro-computed-function/Foo.svelte
@@ -0,0 +1 @@
+foo
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-outro-computed-function/_config.js b/test/runtime/samples/if-block-outro-computed-function/_config.js
new file mode 100644
index 0000000000..69fd95d008
--- /dev/null
+++ b/test/runtime/samples/if-block-outro-computed-function/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		foo: true
+	},
+
+	html: 'foo',
+
+	test({ assert, component, target }) {
+		component.foo = false;
+		assert.htmlEqual(target.innerHTML, 'bar');
+	}
+};
diff --git a/test/runtime/samples/if-block-outro-computed-function/main.svelte b/test/runtime/samples/if-block-outro-computed-function/main.svelte
new file mode 100644
index 0000000000..adf7cc3e0b
--- /dev/null
+++ b/test/runtime/samples/if-block-outro-computed-function/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Foo from './Foo.svelte'
+  export let foo = true
+	$: bar = () => true
+</script>
+
+{#if foo}
+	<Foo />
+{:else if bar()}
+	bar
+{:else}
+	else
+{/if}
diff --git a/test/runtime/samples/if-block-outro-nested-else/Component.svelte b/test/runtime/samples/if-block-outro-nested-else/Component.svelte
new file mode 100644
index 0000000000..281c6866c3
--- /dev/null
+++ b/test/runtime/samples/if-block-outro-nested-else/Component.svelte
@@ -0,0 +1 @@
+<div></div>
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-outro-nested-else/_config.js b/test/runtime/samples/if-block-outro-nested-else/_config.js
new file mode 100644
index 0000000000..06b89ea723
--- /dev/null
+++ b/test/runtime/samples/if-block-outro-nested-else/_config.js
@@ -0,0 +1,6 @@
+export default {
+	test({ component }) {
+		// Would cause "TypeError: Cannot read property 'o' of undefined"
+		component.foo = false;
+	}
+};
diff --git a/test/runtime/samples/if-block-outro-nested-else/main.svelte b/test/runtime/samples/if-block-outro-nested-else/main.svelte
new file mode 100644
index 0000000000..8b8f599e4f
--- /dev/null
+++ b/test/runtime/samples/if-block-outro-nested-else/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let foo = true;
+
+	import Component from './Component.svelte';
+</script>
+
+{#if foo}
+	{#if false}
+		<Component/>
+	{:else if false}
+		<Component/>
+	{/if}
+{/if}
diff --git a/test/runtime/samples/if-block-outro-unique-select-block-type/Component.svelte b/test/runtime/samples/if-block-outro-unique-select-block-type/Component.svelte
new file mode 100644
index 0000000000..7c89b545c5
--- /dev/null
+++ b/test/runtime/samples/if-block-outro-unique-select-block-type/Component.svelte
@@ -0,0 +1 @@
+<div></div>
diff --git a/test/runtime/samples/if-block-outro-unique-select-block-type/_config.js b/test/runtime/samples/if-block-outro-unique-select-block-type/_config.js
new file mode 100644
index 0000000000..15213e19b3
--- /dev/null
+++ b/test/runtime/samples/if-block-outro-unique-select-block-type/_config.js
@@ -0,0 +1,6 @@
+export default {
+	html: `
+		<div></div>
+		<div></div>
+	`
+};
diff --git a/test/runtime/samples/if-block-outro-unique-select-block-type/main.svelte b/test/runtime/samples/if-block-outro-unique-select-block-type/main.svelte
new file mode 100644
index 0000000000..0579a562eb
--- /dev/null
+++ b/test/runtime/samples/if-block-outro-unique-select-block-type/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	export let foo = true;
+
+	import Component from './Component.svelte';
+</script>
+
+{#if foo}
+	<Component/>
+{:else}
+	<Component/>
+{/if}
+
+{#if foo}
+	<div></div>
+{:else}
+	<div></div>
+{/if}
diff --git a/test/runtime/samples/if-block-static-with-dynamic-contents/_config.js b/test/runtime/samples/if-block-static-with-dynamic-contents/_config.js
new file mode 100644
index 0000000000..c5c99c5305
--- /dev/null
+++ b/test/runtime/samples/if-block-static-with-dynamic-contents/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		foo: 42
+	},
+
+	html: '<p>42</p>',
+
+	test({ assert, component, target }) {
+		component.foo = 43;
+		assert.htmlEqual(target.innerHTML, '<p>43</p>');
+	}
+};
diff --git a/test/runtime/samples/if-block-static-with-dynamic-contents/main.svelte b/test/runtime/samples/if-block-static-with-dynamic-contents/main.svelte
new file mode 100644
index 0000000000..57484f252f
--- /dev/null
+++ b/test/runtime/samples/if-block-static-with-dynamic-contents/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let foo;
+
+	const show = () => true;
+</script>
+
+{#if show()}
+	<p>{foo}</p>
+{/if}
diff --git a/test/runtime/samples/if-block-static-with-else-and-outros/EEE.svelte b/test/runtime/samples/if-block-static-with-else-and-outros/EEE.svelte
new file mode 100644
index 0000000000..6132a64bc7
--- /dev/null
+++ b/test/runtime/samples/if-block-static-with-else-and-outros/EEE.svelte
@@ -0,0 +1 @@
+eee
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-static-with-else-and-outros/RRR.svelte b/test/runtime/samples/if-block-static-with-else-and-outros/RRR.svelte
new file mode 100644
index 0000000000..7242373249
--- /dev/null
+++ b/test/runtime/samples/if-block-static-with-else-and-outros/RRR.svelte
@@ -0,0 +1 @@
+rrr
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-static-with-else-and-outros/_config.js b/test/runtime/samples/if-block-static-with-else-and-outros/_config.js
new file mode 100644
index 0000000000..8b2c6d2d66
--- /dev/null
+++ b/test/runtime/samples/if-block-static-with-else-and-outros/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: 'eee'
+};
diff --git a/test/runtime/samples/if-block-static-with-else-and-outros/main.svelte b/test/runtime/samples/if-block-static-with-else-and-outros/main.svelte
new file mode 100644
index 0000000000..d23cb6bcf2
--- /dev/null
+++ b/test/runtime/samples/if-block-static-with-else-and-outros/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import EEE from './EEE.svelte';
+	import RRR from './RRR.svelte';
+</script>
+
+{#if "Eva".startsWith('E')}
+	<EEE/>
+{:else}
+	<RRR/>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-static-with-else/_config.js b/test/runtime/samples/if-block-static-with-else/_config.js
new file mode 100644
index 0000000000..8b2c6d2d66
--- /dev/null
+++ b/test/runtime/samples/if-block-static-with-else/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: 'eee'
+};
diff --git a/test/runtime/samples/if-block-static-with-else/main.svelte b/test/runtime/samples/if-block-static-with-else/main.svelte
new file mode 100644
index 0000000000..cd76a83510
--- /dev/null
+++ b/test/runtime/samples/if-block-static-with-else/main.svelte
@@ -0,0 +1,5 @@
+{#if "Eva".startsWith('E')}
+	eee
+{:else}
+	rrr
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-static-with-elseif-else-and-outros/RRR.svelte b/test/runtime/samples/if-block-static-with-elseif-else-and-outros/RRR.svelte
new file mode 100644
index 0000000000..7242373249
--- /dev/null
+++ b/test/runtime/samples/if-block-static-with-elseif-else-and-outros/RRR.svelte
@@ -0,0 +1 @@
+rrr
\ No newline at end of file
diff --git a/test/runtime/samples/if-block-static-with-elseif-else-and-outros/_config.js b/test/runtime/samples/if-block-static-with-elseif-else-and-outros/_config.js
new file mode 100644
index 0000000000..8b2c6d2d66
--- /dev/null
+++ b/test/runtime/samples/if-block-static-with-elseif-else-and-outros/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: 'eee'
+};
diff --git a/test/runtime/samples/if-block-static-with-elseif-else-and-outros/main.svelte b/test/runtime/samples/if-block-static-with-elseif-else-and-outros/main.svelte
new file mode 100644
index 0000000000..b60885722e
--- /dev/null
+++ b/test/runtime/samples/if-block-static-with-elseif-else-and-outros/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import RRR from './RRR.svelte';
+
+	export let x;
+</script>
+
+{#if "Eva".startsWith('E')}
+	eee
+{:else if x}
+  def
+{:else}
+	<RRR/>
+{/if}
diff --git a/test/runtime/samples/if-block-widget/Widget.svelte b/test/runtime/samples/if-block-widget/Widget.svelte
new file mode 100644
index 0000000000..bbd986fcb1
--- /dev/null
+++ b/test/runtime/samples/if-block-widget/Widget.svelte
@@ -0,0 +1 @@
+<p>Widget</p>
diff --git a/test/runtime/samples/if-block-widget/_config.js b/test/runtime/samples/if-block-widget/_config.js
new file mode 100644
index 0000000000..44dc32a91c
--- /dev/null
+++ b/test/runtime/samples/if-block-widget/_config.js
@@ -0,0 +1,27 @@
+export default {
+	props: {
+		visible: true
+	},
+
+	html: `
+		before
+		<p>Widget</p>
+		after
+	`,
+
+	test({ assert, component, target }) {
+		component.visible = false;
+		assert.htmlEqual( target.innerHTML, `
+			before
+
+			after
+		` );
+
+		component.visible = true;
+		assert.htmlEqual( target.innerHTML, `
+			before
+			<p>Widget</p>
+			after
+		` );
+	}
+};
diff --git a/test/runtime/samples/if-block-widget/main.svelte b/test/runtime/samples/if-block-widget/main.svelte
new file mode 100644
index 0000000000..fef00e276c
--- /dev/null
+++ b/test/runtime/samples/if-block-widget/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let visible;
+</script>
+
+before
+{#if visible}
+	<Widget />
+{/if}
+after
diff --git a/test/runtime/samples/if-block/_config.js b/test/runtime/samples/if-block/_config.js
new file mode 100644
index 0000000000..a94d9aa35a
--- /dev/null
+++ b/test/runtime/samples/if-block/_config.js
@@ -0,0 +1,14 @@
+export default {
+	props: {
+		visible: true
+	},
+
+	html: '<p>i am visible</p>',
+
+	test({ assert, component, target }) {
+		component.visible = false;
+		assert.htmlEqual( target.innerHTML, '' );
+		component.visible = true;
+		assert.htmlEqual( target.innerHTML, '<p>i am visible</p>' );
+	}
+};
diff --git a/test/runtime/samples/if-block/main.svelte b/test/runtime/samples/if-block/main.svelte
new file mode 100644
index 0000000000..828ea910fc
--- /dev/null
+++ b/test/runtime/samples/if-block/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let visible;
+</script>
+
+{#if visible}
+	<p>i am visible</p>
+{/if}
diff --git a/test/runtime/samples/if-in-keyed-each/_config.js b/test/runtime/samples/if-in-keyed-each/_config.js
new file mode 100644
index 0000000000..b4a24202db
--- /dev/null
+++ b/test/runtime/samples/if-in-keyed-each/_config.js
@@ -0,0 +1,15 @@
+export default {
+	props: {
+		items: [
+			{ id: 1, name: 'one' },
+			{ id: 2, name: 'two' }
+		]
+	},
+
+	html: `
+		<ul>
+			<li>one</li>
+			<li>two</li>
+		</ul>
+	`
+};
diff --git a/test/runtime/samples/if-in-keyed-each/main.svelte b/test/runtime/samples/if-in-keyed-each/main.svelte
new file mode 100644
index 0000000000..4cf877b3d7
--- /dev/null
+++ b/test/runtime/samples/if-in-keyed-each/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let items;
+</script>
+
+<ul>
+	{#each items as item (item.id)}
+		{#if item.id}
+			<li>{item.name}</li>
+		{/if}
+	{/each}
+</ul>
\ No newline at end of file
diff --git a/test/runtime/samples/ignore-unchanged-attribute-compound/_config.js b/test/runtime/samples/ignore-unchanged-attribute-compound/_config.js
new file mode 100644
index 0000000000..741d5bc780
--- /dev/null
+++ b/test/runtime/samples/ignore-unchanged-attribute-compound/_config.js
@@ -0,0 +1,28 @@
+import counter from './counter.js';
+
+export default {
+	props: {
+		x: 1,
+		y: 2
+	},
+
+	html: `
+		<p>1</p>
+		<p class='-2-'></p>
+	`,
+
+	test({ assert, component }) {
+		counter.count = 0;
+
+		component.x = 3;
+		assert.equal(counter.count, 0);
+
+		component.x = 4;
+		component.y = 5;
+		assert.equal(counter.count, 1);
+
+		component.x = 5;
+		component.y = 5;
+		assert.equal(counter.count, 1);
+	}
+};
diff --git a/test/runtime/samples/ignore-unchanged-attribute-compound/counter.js b/test/runtime/samples/ignore-unchanged-attribute-compound/counter.js
new file mode 100644
index 0000000000..f0fc271f84
--- /dev/null
+++ b/test/runtime/samples/ignore-unchanged-attribute-compound/counter.js
@@ -0,0 +1,3 @@
+export default {
+	count: 0
+};
diff --git a/test/runtime/samples/ignore-unchanged-attribute-compound/main.svelte b/test/runtime/samples/ignore-unchanged-attribute-compound/main.svelte
new file mode 100644
index 0000000000..08dcebbbd3
--- /dev/null
+++ b/test/runtime/samples/ignore-unchanged-attribute-compound/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import counter from './counter.js';
+
+	export let x;
+	export let y;
+
+	function myHelper(value) {
+		counter.count += 1;
+		return value;
+	}
+</script>
+
+<p>{x}</p>
+<p class='-{myHelper(y)}-'></p>
diff --git a/test/runtime/samples/ignore-unchanged-attribute/_config.js b/test/runtime/samples/ignore-unchanged-attribute/_config.js
new file mode 100644
index 0000000000..c1f8b23b98
--- /dev/null
+++ b/test/runtime/samples/ignore-unchanged-attribute/_config.js
@@ -0,0 +1,28 @@
+import counter from './counter.js';
+
+export default {
+	props: {
+		x: 1,
+		y: 2
+	},
+
+	html: `
+		<p>1</p>
+		<p class='2'></p>
+	`,
+
+	test({ assert, component }) {
+		counter.count = 0;
+
+		component.x = 3;
+		assert.equal(counter.count, 0);
+
+		component.x = 4;
+		component.y = 5;
+		assert.equal(counter.count, 1);
+
+		component.x = 5;
+		component.y = 5;
+		assert.equal(counter.count, 1);
+	}
+};
diff --git a/test/runtime/samples/ignore-unchanged-attribute/counter.js b/test/runtime/samples/ignore-unchanged-attribute/counter.js
new file mode 100644
index 0000000000..f0fc271f84
--- /dev/null
+++ b/test/runtime/samples/ignore-unchanged-attribute/counter.js
@@ -0,0 +1,3 @@
+export default {
+	count: 0
+};
diff --git a/test/runtime/samples/ignore-unchanged-attribute/main.svelte b/test/runtime/samples/ignore-unchanged-attribute/main.svelte
new file mode 100644
index 0000000000..5f657cb6b3
--- /dev/null
+++ b/test/runtime/samples/ignore-unchanged-attribute/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import counter from './counter.js';
+
+	export let x;
+	export let y;
+
+	function myHelper(value) {
+		counter.count += 1;
+		return value;
+	}
+</script>
+
+<p>{x}</p>
+<p class='{myHelper(y)}'></p>
diff --git a/test/runtime/samples/ignore-unchanged-raw/_config.js b/test/runtime/samples/ignore-unchanged-raw/_config.js
new file mode 100644
index 0000000000..15e9430c30
--- /dev/null
+++ b/test/runtime/samples/ignore-unchanged-raw/_config.js
@@ -0,0 +1,28 @@
+import counter from './counter.js';
+
+export default {
+	props: {
+		x: 1,
+		y: 2
+	},
+
+	html: `
+		<p>1</p>
+		<p>2</p>
+	`,
+
+	test({ assert, component }) {
+		counter.count = 0;
+
+		component.x = 3;
+		assert.equal(counter.count, 0);
+
+		component.x = 4;
+		component.y = 5;
+		assert.equal(counter.count, 1);
+
+		component.x = 5;
+		component.y = 5;
+		assert.equal(counter.count, 1);
+	}
+};
diff --git a/test/runtime/samples/ignore-unchanged-raw/counter.js b/test/runtime/samples/ignore-unchanged-raw/counter.js
new file mode 100644
index 0000000000..f0fc271f84
--- /dev/null
+++ b/test/runtime/samples/ignore-unchanged-raw/counter.js
@@ -0,0 +1,3 @@
+export default {
+	count: 0
+};
diff --git a/test/runtime/samples/ignore-unchanged-raw/main.svelte b/test/runtime/samples/ignore-unchanged-raw/main.svelte
new file mode 100644
index 0000000000..ed2e3b2b5f
--- /dev/null
+++ b/test/runtime/samples/ignore-unchanged-raw/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import counter from './counter.js';
+
+	export let x;
+	export let y;
+
+	function myHelper(value) {
+		counter.count += 1;
+		return value;
+	}
+</script>
+
+<p>{x}</p>
+<p>{@html myHelper(y)}</p>
diff --git a/test/runtime/samples/ignore-unchanged-tag/_config.js b/test/runtime/samples/ignore-unchanged-tag/_config.js
new file mode 100644
index 0000000000..15e9430c30
--- /dev/null
+++ b/test/runtime/samples/ignore-unchanged-tag/_config.js
@@ -0,0 +1,28 @@
+import counter from './counter.js';
+
+export default {
+	props: {
+		x: 1,
+		y: 2
+	},
+
+	html: `
+		<p>1</p>
+		<p>2</p>
+	`,
+
+	test({ assert, component }) {
+		counter.count = 0;
+
+		component.x = 3;
+		assert.equal(counter.count, 0);
+
+		component.x = 4;
+		component.y = 5;
+		assert.equal(counter.count, 1);
+
+		component.x = 5;
+		component.y = 5;
+		assert.equal(counter.count, 1);
+	}
+};
diff --git a/test/runtime/samples/ignore-unchanged-tag/counter.js b/test/runtime/samples/ignore-unchanged-tag/counter.js
new file mode 100644
index 0000000000..f0fc271f84
--- /dev/null
+++ b/test/runtime/samples/ignore-unchanged-tag/counter.js
@@ -0,0 +1,3 @@
+export default {
+	count: 0
+};
diff --git a/test/runtime/samples/ignore-unchanged-tag/main.svelte b/test/runtime/samples/ignore-unchanged-tag/main.svelte
new file mode 100644
index 0000000000..6c748f5643
--- /dev/null
+++ b/test/runtime/samples/ignore-unchanged-tag/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import counter from './counter.js';
+
+	export let x;
+	export let y;
+
+	function myHelper(value) {
+		counter.count += 1;
+		return value;
+	}
+</script>
+
+<p>{x}</p>
+<p>{myHelper(y)}</p>
diff --git a/test/runtime/samples/immutable-nested/Nested.svelte b/test/runtime/samples/immutable-nested/Nested.svelte
new file mode 100644
index 0000000000..acb0b480a4
--- /dev/null
+++ b/test/runtime/samples/immutable-nested/Nested.svelte
@@ -0,0 +1,18 @@
+<script>
+	import { beforeUpdate, onMount } from 'svelte';
+
+	let mounted = false;
+	export let count = 0;
+	export let foo = { bar: 'baz' };
+
+	onMount(() => {
+		mounted = true;
+	});
+
+	beforeUpdate(() => {
+		if (mounted) count += 1;
+	});
+</script>
+
+<h3>Called {count} times.</h3>
+<p>{foo.bar} {mounted}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/immutable-nested/_config.js b/test/runtime/samples/immutable-nested/_config.js
new file mode 100644
index 0000000000..8b1dd7e68a
--- /dev/null
+++ b/test/runtime/samples/immutable-nested/_config.js
@@ -0,0 +1,36 @@
+export default {
+	immutable: true,
+
+	html: `
+		<div>
+			<h3>Called 1 times.</h3>
+			<p>baz true</p>
+		</div>
+	`,
+
+	ssrHtml: `
+		<div>
+			<h3>Called 0 times.</h3>
+			<p>baz false</p>
+		</div>`,
+
+	test({ assert, component, target }) {
+		const nested = component.nested;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<h3>Called 1 times.</h3>
+				<p>baz true</p>
+			</div>
+		`);
+
+		// eslint-disable-next-line no-self-assign
+		nested.foo = nested.foo;
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<h3>Called 1 times.</h3>
+				<p>baz true</p>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/immutable-nested/main.svelte b/test/runtime/samples/immutable-nested/main.svelte
new file mode 100644
index 0000000000..4ccf7008cd
--- /dev/null
+++ b/test/runtime/samples/immutable-nested/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let nested;
+
+	import Nested from './Nested.svelte';
+</script>
+
+<div>
+	<Nested bind:this={nested} />
+</div>
diff --git a/test/runtime/samples/immutable-option/_config.js b/test/runtime/samples/immutable-option/_config.js
new file mode 100644
index 0000000000..4962d2d3b7
--- /dev/null
+++ b/test/runtime/samples/immutable-option/_config.js
@@ -0,0 +1,11 @@
+export default {
+	immutable: true,
+
+	html: '<div><h3>Called 1 times.</h3></div>',
+
+	test({ assert, component, target }) {
+		// eslint-disable-next-line no-self-assign
+		component.foo = component.foo;
+		assert.htmlEqual(target.innerHTML, '<div><h3>Called 1 times.</h3></div>');
+	}
+};
diff --git a/test/runtime/samples/immutable-option/main.svelte b/test/runtime/samples/immutable-option/main.svelte
new file mode 100644
index 0000000000..cd0cfbcc95
--- /dev/null
+++ b/test/runtime/samples/immutable-option/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let count = 0;
+	export let foo = { bar: 'baz' };
+
+	$: if (foo) count += 1;
+</script>
+
+<div>
+	<h3>Called {count} times.</h3>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/immutable-svelte-meta-false/_config.js b/test/runtime/samples/immutable-svelte-meta-false/_config.js
new file mode 100644
index 0000000000..1506e79227
--- /dev/null
+++ b/test/runtime/samples/immutable-svelte-meta-false/_config.js
@@ -0,0 +1,11 @@
+export default {
+	immutable: true,
+
+	html: '<div><h3>Called 1 times.</h3></div>',
+
+	test({ assert, component, target }) {
+		// eslint-disable-next-line no-self-assign
+		component.foo = component.foo;
+		assert.htmlEqual(target.innerHTML, '<div><h3>Called 2 times.</h3></div>');
+	}
+};
diff --git a/test/runtime/samples/immutable-svelte-meta-false/main.svelte b/test/runtime/samples/immutable-svelte-meta-false/main.svelte
new file mode 100644
index 0000000000..861260404b
--- /dev/null
+++ b/test/runtime/samples/immutable-svelte-meta-false/main.svelte
@@ -0,0 +1,12 @@
+<svelte:options immutable={false}/>
+
+<script>
+	export let count = 0;
+	export let foo = { bar: 'baz' };
+
+	$: if (foo) count += 1;
+</script>
+
+<div>
+	<h3>Called {count} times.</h3>
+</div>
diff --git a/test/runtime/samples/immutable-svelte-meta/_config.js b/test/runtime/samples/immutable-svelte-meta/_config.js
new file mode 100644
index 0000000000..2dfb6cd3db
--- /dev/null
+++ b/test/runtime/samples/immutable-svelte-meta/_config.js
@@ -0,0 +1,9 @@
+export default {
+	html: '<div><h3>Called 1 times.</h3></div>',
+
+	test({ assert, component, target }) {
+		// eslint-disable-next-line no-self-assign
+		component.foo = component.foo;
+		assert.htmlEqual(target.innerHTML, '<div><h3>Called 1 times.</h3></div>');
+	}
+};
diff --git a/test/runtime/samples/immutable-svelte-meta/main.svelte b/test/runtime/samples/immutable-svelte-meta/main.svelte
new file mode 100644
index 0000000000..49ae354cb3
--- /dev/null
+++ b/test/runtime/samples/immutable-svelte-meta/main.svelte
@@ -0,0 +1,12 @@
+<svelte:options immutable/>
+
+<script>
+	export let count = 0;
+	export let foo = { bar: 'baz' };
+
+	$: if (foo) count += 1;
+</script>
+
+<div>
+	<h3>Called {count} times.</h3>
+</div>
diff --git a/test/runtime/samples/imported-renamed-components/ComponentOne.svelte b/test/runtime/samples/imported-renamed-components/ComponentOne.svelte
new file mode 100644
index 0000000000..3609f20ebd
--- /dev/null
+++ b/test/runtime/samples/imported-renamed-components/ComponentOne.svelte
@@ -0,0 +1 @@
+One
diff --git a/test/runtime/samples/imported-renamed-components/ComponentTwo.svelte b/test/runtime/samples/imported-renamed-components/ComponentTwo.svelte
new file mode 100644
index 0000000000..3b0086f91c
--- /dev/null
+++ b/test/runtime/samples/imported-renamed-components/ComponentTwo.svelte
@@ -0,0 +1 @@
+Two
diff --git a/test/runtime/samples/imported-renamed-components/_config.js b/test/runtime/samples/imported-renamed-components/_config.js
new file mode 100644
index 0000000000..07683b05be
--- /dev/null
+++ b/test/runtime/samples/imported-renamed-components/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: 'OneTwo'
+};
diff --git a/test/runtime/samples/imported-renamed-components/main.svelte b/test/runtime/samples/imported-renamed-components/main.svelte
new file mode 100644
index 0000000000..9055a9e9a5
--- /dev/null
+++ b/test/runtime/samples/imported-renamed-components/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import ComponentOne from './ComponentOne.svelte';
+	import ComponentTwo from './ComponentTwo.svelte';
+
+	const RenamedComponentOne = ComponentOne;
+	const RenamedComponentTwo = ComponentTwo;
+</script>
+
+<RenamedComponentOne/><RenamedComponentTwo/>
diff --git a/test/runtime/samples/initial-state-assign/_config.js b/test/runtime/samples/initial-state-assign/_config.js
new file mode 100644
index 0000000000..95a1a5e068
--- /dev/null
+++ b/test/runtime/samples/initial-state-assign/_config.js
@@ -0,0 +1,7 @@
+export default {
+	props: { bar: 'bar' },
+	html: `
+		"foo"
+		"bar"
+	`
+};
diff --git a/test/runtime/samples/initial-state-assign/main.svelte b/test/runtime/samples/initial-state-assign/main.svelte
new file mode 100644
index 0000000000..258b12fec9
--- /dev/null
+++ b/test/runtime/samples/initial-state-assign/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo = 'foo';
+	export let bar;
+</script>
+
+{JSON.stringify(foo)}
+{JSON.stringify(bar)}
diff --git a/test/runtime/samples/inline-expressions/_config.js b/test/runtime/samples/inline-expressions/_config.js
new file mode 100644
index 0000000000..50cec30468
--- /dev/null
+++ b/test/runtime/samples/inline-expressions/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		a: 1,
+		b: 2
+	},
+	html: '<p>1 + 2 = 3</p>',
+	test({ assert, component, target }) {
+		component.a = 3;
+		component.b = 4;
+		assert.equal( target.innerHTML, '<p>3 + 4 = 7</p>' );
+	}
+};
diff --git a/test/runtime/samples/inline-expressions/main.svelte b/test/runtime/samples/inline-expressions/main.svelte
new file mode 100644
index 0000000000..f51d901912
--- /dev/null
+++ b/test/runtime/samples/inline-expressions/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let a;
+	export let b;
+</script>
+
+<p>{a} + {b} = {a + b}</p>
diff --git a/test/runtime/samples/inline-style-directive-and-style-attr-merged/_config.js b/test/runtime/samples/inline-style-directive-and-style-attr-merged/_config.js
new file mode 100644
index 0000000000..f5780daf80
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-and-style-attr-merged/_config.js
@@ -0,0 +1,13 @@
+export default {
+	html: `
+		<p style="height: 40px; color: red;"></p>
+	`,
+
+	test({ assert, target, window }) {
+		const p = target.querySelector('p');
+
+		const styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'red');
+		assert.equal(styles.height, '40px');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-and-style-attr-merged/main.svelte b/test/runtime/samples/inline-style-directive-and-style-attr-merged/main.svelte
new file mode 100644
index 0000000000..6f3e86b9bf
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-and-style-attr-merged/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let color = 'red';
+</script>
+
+<p style="height: 40px; color: blue;" style:color={color} />
diff --git a/test/runtime/samples/inline-style-directive-and-style-attr/_config.js b/test/runtime/samples/inline-style-directive-and-style-attr/_config.js
new file mode 100644
index 0000000000..f5780daf80
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-and-style-attr/_config.js
@@ -0,0 +1,13 @@
+export default {
+	html: `
+		<p style="height: 40px; color: red;"></p>
+	`,
+
+	test({ assert, target, window }) {
+		const p = target.querySelector('p');
+
+		const styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'red');
+		assert.equal(styles.height, '40px');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-and-style-attr/main.svelte b/test/runtime/samples/inline-style-directive-and-style-attr/main.svelte
new file mode 100644
index 0000000000..e2ba0fa591
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-and-style-attr/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let color = 'red';
+</script>
+
+<p style="height: 40px;" style:color={color} />
diff --git a/test/runtime/samples/inline-style-directive-css-vars/_config.js b/test/runtime/samples/inline-style-directive-css-vars/_config.js
new file mode 100644
index 0000000000..c8b239a42b
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-css-vars/_config.js
@@ -0,0 +1,9 @@
+export default {
+	html: '<p style="--border-color: red;"></p>',
+
+	test({ assert, component, target }) {
+		component.myColor = 'blue';
+
+		assert.htmlEqual(target.innerHTML, '<p style="--border-color: blue;"></p>');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-css-vars/main.svelte b/test/runtime/samples/inline-style-directive-css-vars/main.svelte
new file mode 100644
index 0000000000..689a2333f5
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-css-vars/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let myColor = "red";
+</script>
+
+<p style:--border-color={myColor} />
diff --git a/test/runtime/samples/inline-style-directive-dynamic/_config.js b/test/runtime/samples/inline-style-directive-dynamic/_config.js
new file mode 100644
index 0000000000..a2214fd872
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-dynamic/_config.js
@@ -0,0 +1,10 @@
+export default {
+	html: `
+		<p style="color: red;"></p>
+	`,
+
+	test({ assert, component, target }) {
+		component.myColor = 'blue';
+		assert.htmlEqual(target.innerHTML, '<p style="color: blue;"></p>');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-dynamic/main.svelte b/test/runtime/samples/inline-style-directive-dynamic/main.svelte
new file mode 100644
index 0000000000..1d60aefa6f
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-dynamic/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let myColor = "red";
+</script>
+
+<p style:color={myColor} />
diff --git a/test/runtime/samples/inline-style-directive-multiple/_config.js b/test/runtime/samples/inline-style-directive-multiple/_config.js
new file mode 100644
index 0000000000..725d03c4fe
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-multiple/_config.js
@@ -0,0 +1,27 @@
+export default {
+	html: `
+		<p style="color: red; width: 65px; font-weight: 700;"></p>
+	`,
+
+	test({ assert, component, target, window }) {
+		const p = target.querySelector('p');
+
+		let styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'red');
+
+		component.myColor = 'pink';
+		component.width = '100vh';
+		component.absolute = true;
+		component.bold = false;
+
+		styles = window.getComputedStyle(p);
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p style="color: pink; width: 100vh; font-weight: 100; position: absolute;"></p>'
+		);
+		assert.equal(styles.color, 'pink');
+		assert.equal(styles.width, '100vh');
+		assert.equal(styles.fontWeight, '100');
+		assert.equal(styles.position, 'absolute');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-multiple/main.svelte b/test/runtime/samples/inline-style-directive-multiple/main.svelte
new file mode 100644
index 0000000000..06f03206d5
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-multiple/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let myColor = "red";
+	export let width = "65px";
+	export let absolute = false;
+	export let bold = true;
+</script>
+
+<p
+	style:color={myColor}
+	style:width
+	style:position={absolute ? "absolute" : null}
+	style:font-weight={bold ? 700 : 100}
+/>
diff --git a/test/runtime/samples/inline-style-directive-shorthand/_config.js b/test/runtime/samples/inline-style-directive-shorthand/_config.js
new file mode 100644
index 0000000000..352d4a139c
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-shorthand/_config.js
@@ -0,0 +1,25 @@
+export default {
+	html: `
+		<p style="color: red;"></p>
+		<p style="color: red;"></p>
+	`,
+
+	test({ assert, component, target, window }) {
+		const [p1, p2] = target.querySelectorAll('p');
+
+		assert.equal(window.getComputedStyle(p1).color, 'red');
+		assert.equal(window.getComputedStyle(p2).color, 'red');
+
+		component.color = 'blue';
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<p style="color: blue;"></p>
+			<p style="color: blue;"></p>
+		`
+		);
+
+		assert.equal(window.getComputedStyle(p1).color, 'blue');
+		assert.equal(window.getComputedStyle(p2).color, 'blue');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-shorthand/main.svelte b/test/runtime/samples/inline-style-directive-shorthand/main.svelte
new file mode 100644
index 0000000000..2b5f8e3db7
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-shorthand/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let color = "red";
+</script>
+
+<p style:color />
+
+{#each [1] as _}
+	<p style:color />
+{/each}
diff --git a/test/runtime/samples/inline-style-directive-spread-and-attr-empty/_config.js b/test/runtime/samples/inline-style-directive-spread-and-attr-empty/_config.js
new file mode 100644
index 0000000000..f3dcbc8823
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-spread-and-attr-empty/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<p style=""></p>
+	`
+};
diff --git a/test/runtime/samples/inline-style-directive-spread-and-attr-empty/main.svelte b/test/runtime/samples/inline-style-directive-spread-and-attr-empty/main.svelte
new file mode 100644
index 0000000000..c2d5cb4d3f
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-spread-and-attr-empty/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let spread = { style: 'color: red;' };
+	export let color = null;
+	export let style = 'color: blue';
+</script>
+
+<p
+	style:color
+	{...spread}
+	{style}
+/>
diff --git a/test/runtime/samples/inline-style-directive-spread-and-attr/_config.js b/test/runtime/samples/inline-style-directive-spread-and-attr/_config.js
new file mode 100644
index 0000000000..b3660bd5ca
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-spread-and-attr/_config.js
@@ -0,0 +1,43 @@
+export default {
+	html: `
+		<p style="color: green;"></p>
+	`,
+
+	test({ assert, component, target, window }) {
+		const p = target.querySelector('p');
+
+		let styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'green');
+
+		component.color = null;
+		assert.htmlEqual(target.innerHTML, '<p style=""></p>');
+		styles = window.getComputedStyle(p);
+		assert.equal(styles.color, '');
+
+		component.spread = { style: 'color: yellow; padding: 30px;' };
+
+		assert.htmlEqual(target.innerHTML, '<p style="padding: 30px;"></p>');
+		styles = window.getComputedStyle(p);
+		assert.equal(styles.color, '');
+		assert.equal(styles.padding, '30px');
+
+		component.spread = {};
+		component.style = 'color: blue; background-color: green;';
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p style="background-color: green;"></p>'
+		);
+		styles = window.getComputedStyle(p);
+		assert.equal(styles.color, '');
+		assert.equal(styles.backgroundColor, 'green');
+
+		component.color = 'purple';
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p style="background-color: green; color: purple;"></p>'
+		);
+		styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'purple');
+		assert.equal(styles.backgroundColor, 'green');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-spread-and-attr/main.svelte b/test/runtime/samples/inline-style-directive-spread-and-attr/main.svelte
new file mode 100644
index 0000000000..a9696df675
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-spread-and-attr/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let spread = { style: 'color: red;' };
+	export let color = 'green';
+	export let style = 'color: blue;';
+</script>
+
+<p
+	style:color
+	{style}
+	{...spread}
+/>
diff --git a/test/runtime/samples/inline-style-directive-spread-dynamic/_config.js b/test/runtime/samples/inline-style-directive-spread-dynamic/_config.js
new file mode 100644
index 0000000000..152e4036a0
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-spread-dynamic/_config.js
@@ -0,0 +1,39 @@
+export default {
+	html: `
+		<p id="my-id" style="width: 65px; color: blue;"></p>
+	`,
+
+	test({ assert, component, target, window }) {
+		const p = target.querySelector('p');
+
+		const styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'blue');
+		assert.equal(styles.width, '65px');
+		assert.equal(p.id, 'my-id');
+
+		component.color = 'red';
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p id="my-id" style="width: 65px; color: red;"></p>'
+		);
+
+		component.obj = { style: 'height: 72px;' };
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p style="height: 72px; color: red;"></p>'
+		);
+
+		component.obj = { style: 'border-radius: 2px; color: orange' };
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p style="border-radius: 2px; color: red;"></p>'
+		);
+
+		component.obj = {};
+
+		assert.htmlEqual(target.innerHTML, '<p style="color: red;"></p>');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-spread-dynamic/main.svelte b/test/runtime/samples/inline-style-directive-spread-dynamic/main.svelte
new file mode 100644
index 0000000000..a514e4856f
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-spread-dynamic/main.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let color = 'blue';
+  export let obj = { id: 'my-id', style: 'width: 65px' };
+</script>
+<p {...obj} style:color={color} />
diff --git a/test/runtime/samples/inline-style-directive-spread/_config.js b/test/runtime/samples/inline-style-directive-spread/_config.js
new file mode 100644
index 0000000000..adb8a26544
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-spread/_config.js
@@ -0,0 +1,14 @@
+export default {
+	html: `
+		<p id="my-id" style="width: 65px; color: blue;"></p>
+	`,
+
+	test({ assert, target, window }) {
+		const p = target.querySelector('p');
+
+		const styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'blue');
+		assert.equal(styles.width, '65px');
+		assert.equal(p.id, 'my-id');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-spread/main.svelte b/test/runtime/samples/inline-style-directive-spread/main.svelte
new file mode 100644
index 0000000000..51291146c7
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-spread/main.svelte
@@ -0,0 +1 @@
+<p {...{ id: "my-id", style: "width: 65px" }} style:color="blue" />
diff --git a/test/runtime/samples/inline-style-directive-string-variable-kebab-case/_config.js b/test/runtime/samples/inline-style-directive-string-variable-kebab-case/_config.js
new file mode 100644
index 0000000000..3bd6d38ea5
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-string-variable-kebab-case/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<div style="background-image: url(https://raw.githubusercontent.com/sveltejs/branding/master/svelte-vertical.png); --css-variable: rgba(0, 0, 0, 1);"></div>
+	`,
+
+	test({ assert, target, window }) {
+		const div = target.querySelector('div');
+		const styles = window.getComputedStyle(div);
+
+		assert.equal(styles['background-image'], 'url(https://raw.githubusercontent.com/sveltejs/branding/master/svelte-vertical.png)');
+		assert.equal(styles.getPropertyValue('--css-variable'), 'rgba(0, 0, 0, 1)');
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<div style="background-image: url(https://raw.githubusercontent.com/sveltejs/branding/master/svelte-vertical.png); --css-variable: rgba(0, 0, 0, 1);"></div>'
+		);
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-string-variable-kebab-case/main.svelte b/test/runtime/samples/inline-style-directive-string-variable-kebab-case/main.svelte
new file mode 100644
index 0000000000..dbfba08d64
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-string-variable-kebab-case/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	let url =
+		"https://raw.githubusercontent.com/sveltejs/branding/master/svelte-vertical.png";
+
+	let alpha = 1;
+</script>
+
+<div
+	style:background-image="url({url})"
+	style:--css-variable="rgba(0, 0, 0, {alpha})"
+/>
diff --git a/test/runtime/samples/inline-style-directive-string-variable/_config.js b/test/runtime/samples/inline-style-directive-string-variable/_config.js
new file mode 100644
index 0000000000..411a42db8e
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-string-variable/_config.js
@@ -0,0 +1,23 @@
+export default {
+	html: `
+		<p style="color: green; transform: translateX(45px); border: 100px solid pink;"></p>
+	`,
+
+	test({ assert, component, target, window }) {
+		const p = target.querySelector('p');
+
+		const styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'green');
+		assert.equal(styles.transform, 'translateX(45px)');
+		assert.equal(styles.border, '100px solid pink');
+
+		component.translate_x = '100%';
+		component.border_width = 20;
+		component.border_color = 'yellow';
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p style="color: green; transform: translateX(100%); border: 20px solid yellow;"></p>'
+		);
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-string-variable/main.svelte b/test/runtime/samples/inline-style-directive-string-variable/main.svelte
new file mode 100644
index 0000000000..1f0b5019f4
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-string-variable/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let translate_x = "45px";
+	export let border_width = 100;
+	export let border_color;
+</script>
+
+<p style:color={"green"} style:transform="translateX({translate_x})" style:border="{border_width}px solid {border_color || 'pink'}" />
diff --git a/test/runtime/samples/inline-style-directive-string/_config.js b/test/runtime/samples/inline-style-directive-string/_config.js
new file mode 100644
index 0000000000..ec32e157e5
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-string/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<p style="color: red;"></p>
+	`,
+
+	test({ assert, target, window }) {
+		const p = target.querySelector('p');
+
+		const styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'red');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive-string/main.svelte b/test/runtime/samples/inline-style-directive-string/main.svelte
new file mode 100644
index 0000000000..4e7ce22b22
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive-string/main.svelte
@@ -0,0 +1 @@
+<p style:color="red" />
diff --git a/test/runtime/samples/inline-style-directive/_config.js b/test/runtime/samples/inline-style-directive/_config.js
new file mode 100644
index 0000000000..f5732ae0af
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive/_config.js
@@ -0,0 +1,14 @@
+export default {
+	html: `
+		<div>
+			<p style="color: red;"></p>
+		</div>
+	`,
+
+	test({ assert, target, window }) {
+		const p = target.querySelector('p');
+
+		const styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'red');
+	}
+};
diff --git a/test/runtime/samples/inline-style-directive/main.svelte b/test/runtime/samples/inline-style-directive/main.svelte
new file mode 100644
index 0000000000..ff8acfce68
--- /dev/null
+++ b/test/runtime/samples/inline-style-directive/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let myColor = "red";
+</script>
+
+<div>
+	<p style:color={myColor} />
+</div>
diff --git a/test/runtime/samples/inline-style-important/_config.js b/test/runtime/samples/inline-style-important/_config.js
new file mode 100644
index 0000000000..53f4e98db3
--- /dev/null
+++ b/test/runtime/samples/inline-style-important/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<p class="svelte-y94hdy" style="color: red !important; font-size: 20px !important; opacity: 1;">red</p>
+	`,
+
+	test({ assert, component, target, window }) {
+		const p = target.querySelector('p');
+
+		let styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'red');
+		assert.equal(styles.fontSize, '20px');
+
+		component.color = 'green';
+
+		styles = window.getComputedStyle(p);
+		assert.equal(styles.color, 'green');
+	}
+};
diff --git a/test/runtime/samples/inline-style-important/main.svelte b/test/runtime/samples/inline-style-important/main.svelte
new file mode 100644
index 0000000000..d55804c35e
--- /dev/null
+++ b/test/runtime/samples/inline-style-important/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let color = `red`;
+</script>
+
+<p style="color: {color} !important; font-size: 20px !important; opacity: 1;">{color}</p>
+
+<style>
+	p {
+		color: blue !important;
+		font-size: 10px !important;
+	}
+</style>
\ No newline at end of file
diff --git a/test/runtime/samples/inline-style-optimisation-bailout/_config.js b/test/runtime/samples/inline-style-optimisation-bailout/_config.js
new file mode 100644
index 0000000000..acc41e3160
--- /dev/null
+++ b/test/runtime/samples/inline-style-optimisation-bailout/_config.js
@@ -0,0 +1,20 @@
+export default {
+	html: `
+		<p style="opacity: 0.5; color: red">color: red</p>
+	`,
+
+	test({ assert, component, target, window }) {
+		const p = target.querySelector('p');
+
+		let styles = window.getComputedStyle(p);
+		assert.equal(styles.opacity, '0.5');
+		assert.equal(styles.color, 'red');
+
+		component.styles = 'font-size: 20px';
+
+		styles = window.getComputedStyle(p);
+		assert.equal(styles.opacity, '0.5');
+		assert.equal(styles.color, '');
+		assert.equal(styles.fontSize, '20px');
+	}
+};
diff --git a/test/runtime/samples/inline-style-optimisation-bailout/main.svelte b/test/runtime/samples/inline-style-optimisation-bailout/main.svelte
new file mode 100644
index 0000000000..35b768547e
--- /dev/null
+++ b/test/runtime/samples/inline-style-optimisation-bailout/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let styles = `color: red`;
+</script>
+
+<p style="opacity: 0.5; {styles}">{styles}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/inline-style/_config.js b/test/runtime/samples/inline-style/_config.js
new file mode 100644
index 0000000000..aae0dafa74
--- /dev/null
+++ b/test/runtime/samples/inline-style/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<div style="color: red;"></div>
+	`,
+
+	test({ assert, target, window }) {
+		const div = target.querySelector('div');
+
+		const styles = window.getComputedStyle(div);
+		assert.equal(styles.color, 'red');
+	}
+};
diff --git a/test/runtime/samples/inline-style/main.svelte b/test/runtime/samples/inline-style/main.svelte
new file mode 100644
index 0000000000..0f37a04c99
--- /dev/null
+++ b/test/runtime/samples/inline-style/main.svelte
@@ -0,0 +1 @@
+<div style="color: red;"></div>
\ No newline at end of file
diff --git a/test/runtime/samples/innerhtml-interpolated-literal/_config.js b/test/runtime/samples/innerhtml-interpolated-literal/_config.js
new file mode 100644
index 0000000000..d2f4d94a31
--- /dev/null
+++ b/test/runtime/samples/innerhtml-interpolated-literal/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: `
+		<div>
+			<span class="a/42"/>
+		</div>
+	`
+};
diff --git a/test/runtime/samples/innerhtml-interpolated-literal/main.svelte b/test/runtime/samples/innerhtml-interpolated-literal/main.svelte
new file mode 100644
index 0000000000..8a3c9272a5
--- /dev/null
+++ b/test/runtime/samples/innerhtml-interpolated-literal/main.svelte
@@ -0,0 +1,3 @@
+<div>
+	<span class="a/{42}"/>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/innerhtml-with-comments/_config.js b/test/runtime/samples/innerhtml-with-comments/_config.js
new file mode 100644
index 0000000000..897d54c573
--- /dev/null
+++ b/test/runtime/samples/innerhtml-with-comments/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: `
+		<span>
+			Style:
+			<a href="https://getbootstrap.com/" target="_blank">Bootstrap</a>.
+		</span>
+	`
+};
diff --git a/test/runtime/samples/innerhtml-with-comments/main.svelte b/test/runtime/samples/innerhtml-with-comments/main.svelte
new file mode 100644
index 0000000000..e00f755072
--- /dev/null
+++ b/test/runtime/samples/innerhtml-with-comments/main.svelte
@@ -0,0 +1,5 @@
+<span>
+	Style:
+	<!-- prettier-ignore -->
+	<a href="https://getbootstrap.com/" target="_blank">Bootstrap</a>.
+</span>
\ No newline at end of file
diff --git a/test/runtime/samples/input-list/_config.js b/test/runtime/samples/input-list/_config.js
new file mode 100644
index 0000000000..26f5405e42
--- /dev/null
+++ b/test/runtime/samples/input-list/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: `
+		<input list='suggestions'>
+		<datalist id='suggestions'>
+			<option value='foo'/><option value='bar'/><option value='baz'/>
+		</datalist>
+	`
+};
diff --git a/test/runtime/samples/input-list/main.svelte b/test/runtime/samples/input-list/main.svelte
new file mode 100644
index 0000000000..70bc4d8f2c
--- /dev/null
+++ b/test/runtime/samples/input-list/main.svelte
@@ -0,0 +1,4 @@
+<input list='suggestions'>
+<datalist id='suggestions'>
+	<option value='foo'/><option value='bar'/><option value='baz'/>
+</datalist>
diff --git a/test/runtime/samples/instrumentation-auto-subscription-self-assignment/_config.js b/test/runtime/samples/instrumentation-auto-subscription-self-assignment/_config.js
new file mode 100644
index 0000000000..32cd6fc22d
--- /dev/null
+++ b/test/runtime/samples/instrumentation-auto-subscription-self-assignment/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: '[]',
+
+	async test({ assert, component, target }) {
+		await component.go();
+		assert.htmlEqual(target.innerHTML, '[42]');
+	}
+};
diff --git a/test/runtime/samples/instrumentation-auto-subscription-self-assignment/main.svelte b/test/runtime/samples/instrumentation-auto-subscription-self-assignment/main.svelte
new file mode 100644
index 0000000000..8611e773f2
--- /dev/null
+++ b/test/runtime/samples/instrumentation-auto-subscription-self-assignment/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { writable } from 'svelte/store';
+	const foo = writable([]);
+	$: bar = $foo;
+	export function go() {
+		$foo.push(42);
+		$foo = $foo;
+	}
+</script>
+
+{JSON.stringify(bar)}
diff --git a/test/runtime/samples/instrumentation-script-destructuring/_config.js b/test/runtime/samples/instrumentation-script-destructuring/_config.js
new file mode 100644
index 0000000000..b8ccf586ae
--- /dev/null
+++ b/test/runtime/samples/instrumentation-script-destructuring/_config.js
@@ -0,0 +1,29 @@
+export default {
+	html: `
+		<button>foo</button>
+		<button>bar</button>
+
+		<p>x: 0</p>
+	`,
+
+	async test({ assert, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const click = new window.MouseEvent('click');
+
+		await buttons[0].dispatchEvent(click);
+		assert.htmlEqual(target.innerHTML, `
+			<button>foo</button>
+			<button>bar</button>
+
+			<p>x: 1</p>
+		`);
+
+		await buttons[1].dispatchEvent(click);
+		assert.htmlEqual(target.innerHTML, `
+			<button>foo</button>
+			<button>bar</button>
+
+			<p>x: 2</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/instrumentation-script-destructuring/main.svelte b/test/runtime/samples/instrumentation-script-destructuring/main.svelte
new file mode 100644
index 0000000000..9c96ffe621
--- /dev/null
+++ b/test/runtime/samples/instrumentation-script-destructuring/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	let x = 0;
+
+	function foo() {
+		({ x } = { x: 1 });
+	}
+
+	function bar() {
+		([x] = [2]);
+	}
+</script>
+
+<button on:click={foo}>foo</button>
+<button on:click={bar}>bar</button>
+
+<p>x: {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/instrumentation-script-loop-scope/_config.js b/test/runtime/samples/instrumentation-script-loop-scope/_config.js
new file mode 100644
index 0000000000..1b57ed1e72
--- /dev/null
+++ b/test/runtime/samples/instrumentation-script-loop-scope/_config.js
@@ -0,0 +1,17 @@
+export default {
+	html: `
+		<button>foo</button>
+		<p>x: 0</p>
+	`,
+
+	async test({ assert, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const click = new window.MouseEvent('click');
+
+		await buttons[0].dispatchEvent(click);
+		assert.htmlEqual(target.innerHTML, `
+			<button>foo</button>
+			<p>x: 42</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/instrumentation-script-loop-scope/main.svelte b/test/runtime/samples/instrumentation-script-loop-scope/main.svelte
new file mode 100644
index 0000000000..d2ca75a82d
--- /dev/null
+++ b/test/runtime/samples/instrumentation-script-loop-scope/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	let x = 0;
+
+	function foo() {
+		(() => {
+			for (let x = 0; x < 10; x++) {}
+			x = 42;
+		})();
+	}
+</script>
+
+<button on:click={foo}>foo</button>
+
+<p>x: {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/instrumentation-script-multiple-assignments/_config.js b/test/runtime/samples/instrumentation-script-multiple-assignments/_config.js
new file mode 100644
index 0000000000..1c4663938f
--- /dev/null
+++ b/test/runtime/samples/instrumentation-script-multiple-assignments/_config.js
@@ -0,0 +1,28 @@
+export default {
+	props: {
+		foo: 0,
+		bar: 0
+	},
+
+	html: `
+		<button>click me</button>
+		<p>foo: 0</p>
+		<p>bar: 0</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+
+		assert.equal(component.foo, 4);
+		assert.equal(component.bar, 2);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>click me</button>
+			<p>foo: 4</p>
+			<p>bar: 2</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/instrumentation-script-multiple-assignments/main.svelte b/test/runtime/samples/instrumentation-script-multiple-assignments/main.svelte
new file mode 100644
index 0000000000..42eecb698d
--- /dev/null
+++ b/test/runtime/samples/instrumentation-script-multiple-assignments/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let foo, bar;
+
+	function click() {
+		foo = 4; bar = 2;
+	}
+</script>
+
+<button on:click={click}>click me</button>
+
+<p>foo: {foo}</p>
+<p>bar: {bar}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/instrumentation-script-update/_config.js b/test/runtime/samples/instrumentation-script-update/_config.js
new file mode 100644
index 0000000000..d662856a7b
--- /dev/null
+++ b/test/runtime/samples/instrumentation-script-update/_config.js
@@ -0,0 +1,17 @@
+export default {
+	html: `
+		<button>foo</button>
+		<p>x: 0</p>
+	`,
+
+	async test({ assert, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const click = new window.MouseEvent('click');
+
+		await buttons[0].dispatchEvent(click);
+		assert.htmlEqual(target.innerHTML, `
+			<button>foo</button>
+			<p>x: 1</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/instrumentation-script-update/main.svelte b/test/runtime/samples/instrumentation-script-update/main.svelte
new file mode 100644
index 0000000000..2ab583a96a
--- /dev/null
+++ b/test/runtime/samples/instrumentation-script-update/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	let x = 0;
+
+	function foo() {
+		x++;
+	}
+</script>
+
+<button on:click={foo}>foo</button>
+
+<p>x: {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/instrumentation-template-destructuring/_config.js b/test/runtime/samples/instrumentation-template-destructuring/_config.js
new file mode 100644
index 0000000000..b8ccf586ae
--- /dev/null
+++ b/test/runtime/samples/instrumentation-template-destructuring/_config.js
@@ -0,0 +1,29 @@
+export default {
+	html: `
+		<button>foo</button>
+		<button>bar</button>
+
+		<p>x: 0</p>
+	`,
+
+	async test({ assert, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const click = new window.MouseEvent('click');
+
+		await buttons[0].dispatchEvent(click);
+		assert.htmlEqual(target.innerHTML, `
+			<button>foo</button>
+			<button>bar</button>
+
+			<p>x: 1</p>
+		`);
+
+		await buttons[1].dispatchEvent(click);
+		assert.htmlEqual(target.innerHTML, `
+			<button>foo</button>
+			<button>bar</button>
+
+			<p>x: 2</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/instrumentation-template-destructuring/main.svelte b/test/runtime/samples/instrumentation-template-destructuring/main.svelte
new file mode 100644
index 0000000000..65ad5792b2
--- /dev/null
+++ b/test/runtime/samples/instrumentation-template-destructuring/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	let x = 0;
+</script>
+
+<button on:click="{() => ({ x } = { x: 1 })}">foo</button>
+<button on:click="{() => ([x] = [2])}">bar</button>
+
+<p>x: {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/instrumentation-template-loop-scope/_config.js b/test/runtime/samples/instrumentation-template-loop-scope/_config.js
new file mode 100644
index 0000000000..1b57ed1e72
--- /dev/null
+++ b/test/runtime/samples/instrumentation-template-loop-scope/_config.js
@@ -0,0 +1,17 @@
+export default {
+	html: `
+		<button>foo</button>
+		<p>x: 0</p>
+	`,
+
+	async test({ assert, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const click = new window.MouseEvent('click');
+
+		await buttons[0].dispatchEvent(click);
+		assert.htmlEqual(target.innerHTML, `
+			<button>foo</button>
+			<p>x: 42</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/instrumentation-template-loop-scope/main.svelte b/test/runtime/samples/instrumentation-template-loop-scope/main.svelte
new file mode 100644
index 0000000000..6032067ff0
--- /dev/null
+++ b/test/runtime/samples/instrumentation-template-loop-scope/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	let x = 0;
+</script>
+
+<button on:click="{() => {
+	(() => {
+		for (let x = 0; x < 10; x++) {}
+		x = 42;
+	})();
+}}">foo</button>
+
+<p>x: {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/instrumentation-template-multiple-assignments/_config.js b/test/runtime/samples/instrumentation-template-multiple-assignments/_config.js
new file mode 100644
index 0000000000..1c4663938f
--- /dev/null
+++ b/test/runtime/samples/instrumentation-template-multiple-assignments/_config.js
@@ -0,0 +1,28 @@
+export default {
+	props: {
+		foo: 0,
+		bar: 0
+	},
+
+	html: `
+		<button>click me</button>
+		<p>foo: 0</p>
+		<p>bar: 0</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+
+		assert.equal(component.foo, 4);
+		assert.equal(component.bar, 2);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>click me</button>
+			<p>foo: 4</p>
+			<p>bar: 2</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/instrumentation-template-multiple-assignments/main.svelte b/test/runtime/samples/instrumentation-template-multiple-assignments/main.svelte
new file mode 100644
index 0000000000..e2fa6fdae7
--- /dev/null
+++ b/test/runtime/samples/instrumentation-template-multiple-assignments/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let foo, bar;
+</script>
+
+<button on:click="{() => { foo = 4; bar = 2; }}">click me</button>
+
+<p>foo: {foo}</p>
+<p>bar: {bar}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/instrumentation-template-update/_config.js b/test/runtime/samples/instrumentation-template-update/_config.js
new file mode 100644
index 0000000000..d662856a7b
--- /dev/null
+++ b/test/runtime/samples/instrumentation-template-update/_config.js
@@ -0,0 +1,17 @@
+export default {
+	html: `
+		<button>foo</button>
+		<p>x: 0</p>
+	`,
+
+	async test({ assert, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const click = new window.MouseEvent('click');
+
+		await buttons[0].dispatchEvent(click);
+		assert.htmlEqual(target.innerHTML, `
+			<button>foo</button>
+			<p>x: 1</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/instrumentation-template-update/main.svelte b/test/runtime/samples/instrumentation-template-update/main.svelte
new file mode 100644
index 0000000000..8ace384c32
--- /dev/null
+++ b/test/runtime/samples/instrumentation-template-update/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let x = 0;
+</script>
+
+<button on:click="{() => x++}">foo</button>
+
+<p>x: {x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/instrumentation-update-expression/_config.js b/test/runtime/samples/instrumentation-update-expression/_config.js
new file mode 100644
index 0000000000..cc33422f6f
--- /dev/null
+++ b/test/runtime/samples/instrumentation-update-expression/_config.js
@@ -0,0 +1,31 @@
+export default {
+	html: `
+		<p>0</p>
+		<button>foo++</button>
+		<button>++foo</button>
+		<p>0</p>
+		<button>bar.bar++</button>
+		<button>++bar.bar</button>
+	`,
+	async test({ assert, target, window }) {
+		const [foo, bar] = target.querySelectorAll('p');
+		const [button1, button2, button3, button4] = target.querySelectorAll('button');
+		const event = new window.MouseEvent('click');
+
+		await button1.dispatchEvent(event);
+		assert.equal(foo.innerHTML, '1');
+		assert.equal(bar.innerHTML, '0');
+
+		await button2.dispatchEvent(event);
+		assert.equal(foo.innerHTML, '2');
+		assert.equal(bar.innerHTML, '0');
+
+		await button3.dispatchEvent(event);
+		assert.equal(foo.innerHTML, '2');
+		assert.equal(bar.innerHTML, '1');
+
+		await button4.dispatchEvent(event);
+		assert.equal(foo.innerHTML, '2');
+		assert.equal(bar.innerHTML, '2');
+	}
+};
diff --git a/test/runtime/samples/instrumentation-update-expression/main.svelte b/test/runtime/samples/instrumentation-update-expression/main.svelte
new file mode 100644
index 0000000000..0672f6330d
--- /dev/null
+++ b/test/runtime/samples/instrumentation-update-expression/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	let foo = 0;
+	let bar = { bar: 0 };
+</script>
+
+<p>{foo}</p>
+
+<button on:click={() => foo++}>foo++</button>
+<button on:click={() => ++foo}>++foo</button>
+
+<p>{bar.bar}</p>
+
+<button on:click={() => bar.bar++}>bar.bar++</button>
+<button on:click={() => ++bar.bar}>++bar.bar</button>
diff --git a/test/runtime/samples/internal-state/Foo.svelte b/test/runtime/samples/internal-state/Foo.svelte
new file mode 100644
index 0000000000..300a81fca4
--- /dev/null
+++ b/test/runtime/samples/internal-state/Foo.svelte
@@ -0,0 +1,5 @@
+<script>
+	let internal = 1;
+</script>
+
+<p>internal: {internal}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/internal-state/_config.js b/test/runtime/samples/internal-state/_config.js
new file mode 100644
index 0000000000..6b8440aaf3
--- /dev/null
+++ b/test/runtime/samples/internal-state/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: `
+		<p>internal: 1</p>
+		<button>click me</button>
+	`,
+
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>internal: 1</p>
+			<button>click me</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/internal-state/main.svelte b/test/runtime/samples/internal-state/main.svelte
new file mode 100644
index 0000000000..594ab3c837
--- /dev/null
+++ b/test/runtime/samples/internal-state/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Foo from './Foo.svelte';
+	
+	let x = 2;
+</script>
+
+<Foo internal={x}/>
+
+<button on:click="{() => x += 1}">click me</button>
\ No newline at end of file
diff --git a/test/runtime/samples/invalidation-in-if-condition/_config.js b/test/runtime/samples/invalidation-in-if-condition/_config.js
new file mode 100644
index 0000000000..25e7811889
--- /dev/null
+++ b/test/runtime/samples/invalidation-in-if-condition/_config.js
@@ -0,0 +1,17 @@
+export default {
+	html: '<button>false 0</button>',
+
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+		assert.htmlEqual(target.innerHTML, '<button>true 1</button>');
+
+		await button.dispatchEvent(click);
+		assert.htmlEqual(target.innerHTML, '<button>false 1</button>');
+
+		await button.dispatchEvent(click);
+		assert.htmlEqual(target.innerHTML, '<button>true 2</button>');
+	}
+};
diff --git a/test/runtime/samples/invalidation-in-if-condition/main.svelte b/test/runtime/samples/invalidation-in-if-condition/main.svelte
new file mode 100644
index 0000000000..810576695e
--- /dev/null
+++ b/test/runtime/samples/invalidation-in-if-condition/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	let current = { active: false };
+	let count = 0;
+
+	function toggle() {
+		if (current.active = !current.active) {
+			count += 1;
+		}
+	}
+</script>
+
+<button on:click={toggle}>{current.active} {count}</button>
\ No newline at end of file
diff --git a/test/runtime/samples/isolated-text/_config.js b/test/runtime/samples/isolated-text/_config.js
new file mode 100644
index 0000000000..4dc29eb838
--- /dev/null
+++ b/test/runtime/samples/isolated-text/_config.js
@@ -0,0 +1,6 @@
+export default {
+	html: `
+		before
+		<h1>after</h1>
+	`
+};
diff --git a/test/runtime/samples/isolated-text/main.svelte b/test/runtime/samples/isolated-text/main.svelte
new file mode 100644
index 0000000000..fa48dea46e
--- /dev/null
+++ b/test/runtime/samples/isolated-text/main.svelte
@@ -0,0 +1,5 @@
+before
+
+<!---->
+
+<h1>after</h1>
\ No newline at end of file
diff --git a/test/runtime/samples/key-block-2/_config.js b/test/runtime/samples/key-block-2/_config.js
new file mode 100644
index 0000000000..9bb7f17140
--- /dev/null
+++ b/test/runtime/samples/key-block-2/_config.js
@@ -0,0 +1,14 @@
+// with reactive content beside `key`
+export default {
+	html: '<div>00</div>',
+	async test({ assert, component, target }) {
+		const div = target.querySelector('div');
+		component.reactive = 2;
+		assert.htmlEqual(target.innerHTML, '<div>02</div>');
+		assert.strictEqual(div, target.querySelector('div'));
+
+		component.value = 5;
+		assert.htmlEqual(target.innerHTML, '<div>52</div>');
+		assert.notStrictEqual(div, target.querySelector('div'));
+	}
+};
diff --git a/test/runtime/samples/key-block-2/main.svelte b/test/runtime/samples/key-block-2/main.svelte
new file mode 100644
index 0000000000..466d20b10a
--- /dev/null
+++ b/test/runtime/samples/key-block-2/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let value = 0;
+	export let reactive = 0;
+</script>
+
+{#key value}
+	<div>{value}{reactive}</div>
+{/key}
\ No newline at end of file
diff --git a/test/runtime/samples/key-block-3/_config.js b/test/runtime/samples/key-block-3/_config.js
new file mode 100644
index 0000000000..6a41869f9b
--- /dev/null
+++ b/test/runtime/samples/key-block-3/_config.js
@@ -0,0 +1,11 @@
+// key is not used in the template
+export default {
+	html: '<div></div>',
+	async test({ assert, component, target }) {
+		const div = target.querySelector('div');
+
+		component.value = 5;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.notStrictEqual(div, target.querySelector('div'));
+	}
+};
diff --git a/test/runtime/samples/key-block-3/main.svelte b/test/runtime/samples/key-block-3/main.svelte
new file mode 100644
index 0000000000..1ed185c732
--- /dev/null
+++ b/test/runtime/samples/key-block-3/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let value = 0;
+</script>
+
+{#key value}
+	<div />
+{/key}
\ No newline at end of file
diff --git a/test/runtime/samples/key-block-array-immutable/_config.js b/test/runtime/samples/key-block-array-immutable/_config.js
new file mode 100644
index 0000000000..02823ec98a
--- /dev/null
+++ b/test/runtime/samples/key-block-array-immutable/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: '<div>1</div>',
+	async test({ assert, component, target }) {
+		let div = target.querySelector('div');
+		await component.append(2);
+		assert.htmlEqual(target.innerHTML, '<div>1</div>');
+		assert.strictEqual(div, target.querySelector('div'));
+
+		div = target.querySelector('div');
+
+		component.array = [3, 4];
+		assert.htmlEqual(target.innerHTML, '<div>3,4</div>');
+		assert.notStrictEqual(div, target.querySelector('div'));
+	}
+};
diff --git a/test/runtime/samples/key-block-array-immutable/main.svelte b/test/runtime/samples/key-block-array-immutable/main.svelte
new file mode 100644
index 0000000000..e666275af4
--- /dev/null
+++ b/test/runtime/samples/key-block-array-immutable/main.svelte
@@ -0,0 +1,14 @@
+<svelte:options immutable />
+
+<script>
+	export let array = [1];
+
+	export function append(value) {
+		array.push(value);
+		array = array;
+	}
+</script>
+
+{#key array}
+	<div>{array.join(',')}</div>
+{/key}
\ No newline at end of file
diff --git a/test/runtime/samples/key-block-array/_config.js b/test/runtime/samples/key-block-array/_config.js
new file mode 100644
index 0000000000..6c22a03ed4
--- /dev/null
+++ b/test/runtime/samples/key-block-array/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: '<div>1</div>',
+	async test({ assert, component, target }) {
+		let div = target.querySelector('div');
+		await component.append(2);
+		assert.htmlEqual(target.innerHTML, '<div>1,2</div>');
+		assert.notStrictEqual(div, target.querySelector('div'));
+
+		div = target.querySelector('div');
+
+		component.array = [3, 4];
+		assert.htmlEqual(target.innerHTML, '<div>3,4</div>');
+		assert.notStrictEqual(div, target.querySelector('div'));
+	}
+};
diff --git a/test/runtime/samples/key-block-array/main.svelte b/test/runtime/samples/key-block-array/main.svelte
new file mode 100644
index 0000000000..5a4054b043
--- /dev/null
+++ b/test/runtime/samples/key-block-array/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let array = [1];
+
+	export function append(value) {
+		array.push(value);
+		array = array;
+	}
+</script>
+
+{#key array}
+	<div>{array.join(',')}</div>
+{/key}
\ No newline at end of file
diff --git a/test/runtime/samples/key-block-component-slot/Component1.svelte b/test/runtime/samples/key-block-component-slot/Component1.svelte
new file mode 100644
index 0000000000..d0ea817d54
--- /dev/null
+++ b/test/runtime/samples/key-block-component-slot/Component1.svelte
@@ -0,0 +1 @@
+<slot/>
diff --git a/test/runtime/samples/key-block-component-slot/Component2.svelte b/test/runtime/samples/key-block-component-slot/Component2.svelte
new file mode 100644
index 0000000000..ca04744936
--- /dev/null
+++ b/test/runtime/samples/key-block-component-slot/Component2.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { onMount } from "svelte";
+
+	export let logs;
+
+	onMount(() => {
+		logs.push("mount");
+		return () => {
+			logs.push("unmount");
+		};
+	});
+</script>
diff --git a/test/runtime/samples/key-block-component-slot/_config.js b/test/runtime/samples/key-block-component-slot/_config.js
new file mode 100644
index 0000000000..d08ff11af9
--- /dev/null
+++ b/test/runtime/samples/key-block-component-slot/_config.js
@@ -0,0 +1,18 @@
+const logs = [];
+
+export default {
+	html: '<button>Reset!</button>',
+	props: {
+		logs
+	},
+	async test({ assert, target }) {
+		assert.deepEqual(logs, ['mount']);
+
+		const button = target.querySelector('button');
+
+		const click = new window.MouseEvent('click');
+		await button.dispatchEvent(click);
+
+		assert.deepEqual(logs, ['mount', 'unmount', 'mount']);
+	}
+};
diff --git a/test/runtime/samples/key-block-component-slot/main.svelte b/test/runtime/samples/key-block-component-slot/main.svelte
new file mode 100644
index 0000000000..77fde32d9c
--- /dev/null
+++ b/test/runtime/samples/key-block-component-slot/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Component1 from './Component1.svelte'
+	import Component2 from './Component2.svelte'
+
+	let reset = false
+	export let logs;
+</script>
+
+<Component1>
+	{#key reset}
+		<Component2 {logs} />
+	{/key}
+</Component1>
+
+<button on:click={() => reset = !reset}>
+	Reset!
+</button>
\ No newline at end of file
diff --git a/test/runtime/samples/key-block-expression-2/_config.js b/test/runtime/samples/key-block-expression-2/_config.js
new file mode 100644
index 0000000000..602a8364ee
--- /dev/null
+++ b/test/runtime/samples/key-block-expression-2/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: '<div>3</div>',
+	async test({ assert, component, target }) {
+		const div = target.querySelector('div');
+
+		await component.mutate();
+		assert.htmlEqual(target.innerHTML, '<div>5</div>');
+		assert.strictEqual(div, target.querySelector('div'));
+
+		await component.reassign();
+		assert.htmlEqual(target.innerHTML, '<div>7</div>');
+		assert.strictEqual(div, target.querySelector('div'));
+
+		await component.changeKey();
+		assert.htmlEqual(target.innerHTML, '<div>7</div>');
+		assert.notStrictEqual(div, target.querySelector('div'));
+	}
+};
diff --git a/test/runtime/samples/key-block-expression-2/main.svelte b/test/runtime/samples/key-block-expression-2/main.svelte
new file mode 100644
index 0000000000..5525f63761
--- /dev/null
+++ b/test/runtime/samples/key-block-expression-2/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	let obj = { key: 1, value: 3 };
+
+	export function mutate() {
+		obj.value = 5;
+	}
+	export function reassign() {
+		obj = { key: 1, value: 7 };
+	}
+	export function changeKey() {
+		obj.key = 3;
+	}
+</script>
+
+{#key obj.key}
+	<div>{obj.value}</div>
+{/key}
\ No newline at end of file
diff --git a/test/runtime/samples/key-block-expression/_config.js b/test/runtime/samples/key-block-expression/_config.js
new file mode 100644
index 0000000000..85de9f8e88
--- /dev/null
+++ b/test/runtime/samples/key-block-expression/_config.js
@@ -0,0 +1,28 @@
+export default {
+	html: '<div>000</div>',
+	async test({ assert, component, target }) {
+		let div = target.querySelector('div');
+		component.value = 2;
+		assert.htmlEqual(target.innerHTML, '<div>200</div>');
+		assert.notStrictEqual(div, target.querySelector('div'));
+
+		div = target.querySelector('div');
+
+		component.anotherValue = 5;
+		assert.htmlEqual(target.innerHTML, '<div>250</div>');
+		assert.notStrictEqual(div, target.querySelector('div'));
+
+		div = target.querySelector('div');
+
+		component.thirdValue = 9;
+		assert.htmlEqual(target.innerHTML, '<div>259</div>');
+		assert.strictEqual(div, target.querySelector('div'));
+
+		// make dirty while maintain the value of `value + anotherValue`
+		// should update the content, but not recreate the elements
+		await component.$set({ value: 4, anotherValue: 3 });
+
+		assert.htmlEqual(target.innerHTML, '<div>439</div>');
+		assert.strictEqual(div, target.querySelector('div'));
+	}
+};
diff --git a/test/runtime/samples/key-block-expression/main.svelte b/test/runtime/samples/key-block-expression/main.svelte
new file mode 100644
index 0000000000..dd752e8b8f
--- /dev/null
+++ b/test/runtime/samples/key-block-expression/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let value = 0;
+	export let anotherValue = 0;
+	export let thirdValue = 0;
+</script>
+
+{#key value + anotherValue}
+	<div>{value}{anotherValue}{thirdValue}</div>
+{/key}
\ No newline at end of file
diff --git a/test/runtime/samples/key-block-post-hydrate/_config.js b/test/runtime/samples/key-block-post-hydrate/_config.js
new file mode 100644
index 0000000000..e989d678e9
--- /dev/null
+++ b/test/runtime/samples/key-block-post-hydrate/_config.js
@@ -0,0 +1,19 @@
+export default {
+	html: `
+	<div>
+	<div><span class="name">item 1</span><span>something</span></div>
+	<div><span class="name">item 2</span><span>something</span></div>
+	<div><span class="name">item 3</span><span>something</span></div>
+	</div>
+	`,
+	test({ assert, component, target }) {
+		component.sortById = false;
+		assert.htmlEqual( target.innerHTML, `
+		<div>
+		<div><span class="name">item 3</span><span>something</span></div>
+		<div><span class="name">item 2</span><span>something</span></div>
+		<div><span class="name">item 1</span><span>something</span></div>
+		</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/key-block-post-hydrate/main.svelte b/test/runtime/samples/key-block-post-hydrate/main.svelte
new file mode 100644
index 0000000000..8ea316a0d7
--- /dev/null
+++ b/test/runtime/samples/key-block-post-hydrate/main.svelte
@@ -0,0 +1,23 @@
+<script>
+  export let sortById = true;
+  let items = [
+    { id: 1, name: "item 1", value: 3 },
+    { id: 2, name: "item 2", value: 2 },
+    { id: 3, name: "item 3", value: 1 },
+  ];
+
+  $: items = items.sort((a, b) => { return sortById ? a.id - b.id : a.value - b.value; });
+</script>
+
+<div>
+  {#each items as item (item.id)}
+  <div>
+    {#if item.name}
+      <span class="name">
+        {item.name}
+      </span>
+    {/if}
+    <span>something</span>
+  </div>
+  {/each}
+</div>
diff --git a/test/runtime/samples/key-block-static-if/_config.js b/test/runtime/samples/key-block-static-if/_config.js
new file mode 100644
index 0000000000..2dfca9d8b6
--- /dev/null
+++ b/test/runtime/samples/key-block-static-if/_config.js
@@ -0,0 +1,21 @@
+export default {
+	html: `
+		<section>
+			<div>Second</div>
+		</section>
+		<button>Click</button>
+	`,
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+
+		await button.dispatchEvent(new window.Event('click'));
+
+		assert.htmlEqual(target.innerHTML, `
+			<section>
+				<div>First</div>
+				<div>Second</div>
+			</section>
+			<button>Click</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/key-block-static-if/main.svelte b/test/runtime/samples/key-block-static-if/main.svelte
new file mode 100644
index 0000000000..cbacb77674
--- /dev/null
+++ b/test/runtime/samples/key-block-static-if/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	let slide = 0;
+	let num = false;
+	
+	const changeNum = () => num = !num;
+</script>
+
+<section>
+	{#key slide}
+		{#if num}
+			<div>First</div>
+		{/if}
+	{/key}
+	<div>Second</div>
+</section>
+
+<button on:click={changeNum}>Click</button>
\ No newline at end of file
diff --git a/test/runtime/samples/key-block-static/_config.js b/test/runtime/samples/key-block-static/_config.js
new file mode 100644
index 0000000000..8c327bcefd
--- /dev/null
+++ b/test/runtime/samples/key-block-static/_config.js
@@ -0,0 +1,9 @@
+export default {
+	html: '<div>00</div>',
+	async test({ assert, component, target }) {
+		const div = target.querySelector('div');
+		component.anotherValue = 2;
+		assert.htmlEqual(target.innerHTML, '<div>02</div>');
+		assert.strictEqual(div, target.querySelector('div'));
+	}
+};
diff --git a/test/runtime/samples/key-block-static/main.svelte b/test/runtime/samples/key-block-static/main.svelte
new file mode 100644
index 0000000000..e4ee6b5d71
--- /dev/null
+++ b/test/runtime/samples/key-block-static/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	let value = 0;
+	export let anotherValue = 0;
+</script>
+
+{#key value}
+	<div>{value}{anotherValue}</div>
+{/key}
\ No newline at end of file
diff --git a/test/runtime/samples/key-block-transition-local/_config.js b/test/runtime/samples/key-block-transition-local/_config.js
new file mode 100644
index 0000000000..50400e72b6
--- /dev/null
+++ b/test/runtime/samples/key-block-transition-local/_config.js
@@ -0,0 +1,37 @@
+export default {
+	props: {
+		x: false,
+		y: 1
+	},
+
+	test({ assert, component, target, raf }) {
+		component.x = true;
+
+		let div = target.querySelector('div');
+		assert.equal(div.foo, undefined);
+
+		// play both in and out transition when changed with `{#key}`
+		component.y = 2;
+		assert.htmlEqual(target.innerHTML, '<div></div><div></div>');
+		const [leaving, incoming] = target.querySelectorAll('div');
+
+		raf.tick(50);
+		assert.equal(leaving.foo, 0.5);
+		assert.equal(incoming.foo, 0.5);
+
+		raf.tick(100);
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(leaving.foo, 0);
+		assert.equal(incoming.foo, 1);
+
+		// do not play out transition when removed by `{#if}`
+		component.x = false;
+		assert.htmlEqual(target.innerHTML, '');
+
+		// do not play in transition when added back with `{#if}`
+		component.x = true;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		div = target.querySelector('div');
+		assert.equal(div.foo, undefined);
+	}
+};
diff --git a/test/runtime/samples/key-block-transition-local/main.svelte b/test/runtime/samples/key-block-transition-local/main.svelte
new file mode 100644
index 0000000000..05ed75b7e1
--- /dev/null
+++ b/test/runtime/samples/key-block-transition-local/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let x;
+	export let y;
+
+	function foo(node, _params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if x}
+	{#key y}
+		<div transition:foo|local></div>
+	{/key}
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/key-block-transition/_config.js b/test/runtime/samples/key-block-transition/_config.js
new file mode 100644
index 0000000000..d4bef20311
--- /dev/null
+++ b/test/runtime/samples/key-block-transition/_config.js
@@ -0,0 +1,24 @@
+export default {
+	html: '<div>0</div>',
+	async test({ assert, component, target, raf }) {
+		component.value = 2;
+
+		const [div1, div2] = target.querySelectorAll('div');
+
+		assert.htmlEqual(div1.outerHTML, '<div>0</div>');
+		assert.htmlEqual(div2.outerHTML, '<div>2</div>');
+
+		raf.tick(0);
+
+		assert.equal(div1.foo, 1);
+		assert.equal(div1.oof, 0);
+
+		assert.equal(div2.foo, 0);
+		assert.equal(div2.oof, 1);
+
+		raf.tick(200);
+
+		assert.htmlEqual(target.innerHTML, '<div>2</div>');
+		assert.equal(div2, target.querySelector('div'));
+	}
+};
diff --git a/test/runtime/samples/key-block-transition/main.svelte b/test/runtime/samples/key-block-transition/main.svelte
new file mode 100644
index 0000000000..d7fb6ec024
--- /dev/null
+++ b/test/runtime/samples/key-block-transition/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	export let value = 0;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: (t, u) => {
+				node.foo = t;
+				node.oof = u;
+			}
+		};
+	}
+</script>
+
+{#key value}
+	<div transition:foo>{value}</div>
+{/key}
\ No newline at end of file
diff --git a/test/runtime/samples/key-block/_config.js b/test/runtime/samples/key-block/_config.js
new file mode 100644
index 0000000000..119c50e21d
--- /dev/null
+++ b/test/runtime/samples/key-block/_config.js
@@ -0,0 +1,17 @@
+export default {
+	html: '<div>0</div><div>0</div>',
+	async test({ assert, component, target }) {
+		let [div1, div2] = target.querySelectorAll('div');
+
+		component.value = 5;
+		assert.htmlEqual(target.innerHTML, '<div>5</div><div>0</div>');
+		assert.notStrictEqual(div1, target.querySelectorAll('div')[0]);
+		assert.strictEqual(div2, target.querySelectorAll('div')[1]);
+		[div1, div2] = target.querySelectorAll('div');
+
+		component.reactive = 10;
+		assert.htmlEqual(target.innerHTML, '<div>5</div><div>10</div>');
+		assert.strictEqual(div1, target.querySelectorAll('div')[0]);
+		assert.strictEqual(div2, target.querySelectorAll('div')[1]);
+	}
+};
diff --git a/test/runtime/samples/key-block/main.svelte b/test/runtime/samples/key-block/main.svelte
new file mode 100644
index 0000000000..ac3c340770
--- /dev/null
+++ b/test/runtime/samples/key-block/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let value = 0;
+	export let reactive = 0;
+</script>
+
+{#key value}
+	<div>{value}</div>
+{/key}
+
+<div>{reactive}</div>
\ No newline at end of file
diff --git a/test/runtime/samples/keyed-each-dev-unique/_config.js b/test/runtime/samples/keyed-each-dev-unique/_config.js
new file mode 100644
index 0000000000..81728d9c15
--- /dev/null
+++ b/test/runtime/samples/keyed-each-dev-unique/_config.js
@@ -0,0 +1,7 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	error: 'Cannot have duplicate keys in a keyed each'
+};
diff --git a/test/runtime/samples/keyed-each-dev-unique/main.svelte b/test/runtime/samples/keyed-each-dev-unique/main.svelte
new file mode 100644
index 0000000000..870e7beaa1
--- /dev/null
+++ b/test/runtime/samples/keyed-each-dev-unique/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	const array = [1, 2, 3, 1];
+</script>
+
+{#each array as item (item)}
+	{item}
+{/each}
diff --git a/test/runtime/samples/lifecycle-events/_config.js b/test/runtime/samples/lifecycle-events/_config.js
new file mode 100644
index 0000000000..53bc4c4d88
--- /dev/null
+++ b/test/runtime/samples/lifecycle-events/_config.js
@@ -0,0 +1,8 @@
+export default {
+	test({ assert, component }) {
+		const { events } = component;
+		assert.deepEqual(events, ['mount']);
+		component.$destroy();
+		assert.deepEqual(events, ['mount', 'destroy']);
+	}
+};
diff --git a/test/runtime/samples/lifecycle-events/main.svelte b/test/runtime/samples/lifecycle-events/main.svelte
new file mode 100644
index 0000000000..e835e46195
--- /dev/null
+++ b/test/runtime/samples/lifecycle-events/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { onDestroy, onMount } from 'svelte';
+
+	export let events;
+
+	onMount(() => {
+		events = ['mount'];
+
+		return () => {
+			events.push('destroy');
+		};
+	});
+</script>
+
+<div></div>
\ No newline at end of file
diff --git a/test/runtime/samples/lifecycle-next-tick/_config.js b/test/runtime/samples/lifecycle-next-tick/_config.js
new file mode 100644
index 0000000000..35a66f7a09
--- /dev/null
+++ b/test/runtime/samples/lifecycle-next-tick/_config.js
@@ -0,0 +1,30 @@
+export default {
+	async test({ assert, component, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const click = new window.MouseEvent('click');
+
+		await buttons[0].dispatchEvent(click);
+		assert.deepEqual(component.snapshots, [
+			'before 0',
+			'after 1'
+		]);
+
+		await buttons[0].dispatchEvent(click);
+		assert.deepEqual(component.snapshots, [
+			'before 0',
+			'after 1',
+			'before 1',
+			'after 2'
+		]);
+
+		await buttons[1].dispatchEvent(click);
+		assert.deepEqual(component.snapshots, [
+			'before 0',
+			'after 1',
+			'before 1',
+			'after 2',
+			'before 2',
+			'after 2'
+		]);
+	}
+};
diff --git a/test/runtime/samples/lifecycle-next-tick/main.svelte b/test/runtime/samples/lifecycle-next-tick/main.svelte
new file mode 100644
index 0000000000..0c577c20e8
--- /dev/null
+++ b/test/runtime/samples/lifecycle-next-tick/main.svelte
@@ -0,0 +1,24 @@
+<script>
+	import { tick } from 'svelte';
+
+	export let snapshots = [];
+
+	let count = 0;
+	let buttons = [];
+
+	function increment() {
+		count += 1;
+		log();
+	}
+
+	function log() {
+		snapshots.push(`before ${buttons[0].textContent}`);
+
+		tick().then(() => {
+			snapshots.push(`after ${buttons[0].textContent}`);
+		});
+	}
+</script>
+
+<button bind:this={buttons[0]} on:click={increment}>{count}</button>
+<button bind:this={buttons[1]} on:click={log}>{count}</button>
\ No newline at end of file
diff --git a/test/runtime/samples/lifecycle-onmount-infinite-loop/Child.svelte b/test/runtime/samples/lifecycle-onmount-infinite-loop/Child.svelte
new file mode 100644
index 0000000000..ef16875b64
--- /dev/null
+++ b/test/runtime/samples/lifecycle-onmount-infinite-loop/Child.svelte
@@ -0,0 +1 @@
+Child
diff --git a/test/runtime/samples/lifecycle-onmount-infinite-loop/_config.js b/test/runtime/samples/lifecycle-onmount-infinite-loop/_config.js
new file mode 100644
index 0000000000..a76a2686ac
--- /dev/null
+++ b/test/runtime/samples/lifecycle-onmount-infinite-loop/_config.js
@@ -0,0 +1,6 @@
+export default {
+	test({ assert, component }) {
+		const { count } = component;
+		assert.deepEqual(count, 1);
+	}
+};
diff --git a/test/runtime/samples/lifecycle-onmount-infinite-loop/main.svelte b/test/runtime/samples/lifecycle-onmount-infinite-loop/main.svelte
new file mode 100644
index 0000000000..1fa4263e39
--- /dev/null
+++ b/test/runtime/samples/lifecycle-onmount-infinite-loop/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import { onMount } from 'svelte';
+	import Child from './Child.svelte';
+
+	let root;
+	export let count = 0;
+
+	onMount(() => {
+		if (count < 5) {
+			count++;
+			new Child({ target: root });
+		}
+	});
+</script>
+
+<div bind:this={root}></div>
diff --git a/test/runtime/samples/lifecycle-render-order-for-children/Item.svelte b/test/runtime/samples/lifecycle-render-order-for-children/Item.svelte
new file mode 100755
index 0000000000..91411e1e73
--- /dev/null
+++ b/test/runtime/samples/lifecycle-render-order-for-children/Item.svelte
@@ -0,0 +1,29 @@
+<script>
+	import { onMount, beforeUpdate, afterUpdate } from 'svelte';
+	import order from './order.js';
+
+	export let index;
+	export let id;
+	export let name;
+
+	function logRender () {
+		order.push(`${index}: render`);
+		return index;
+	}
+
+	beforeUpdate(() => {
+		order.push(`${index}: beforeUpdate`);
+	});
+
+	afterUpdate(() => {
+		order.push(`${index}: afterUpdate`);
+	});
+
+	onMount(() => {
+		order.push(`${index}: onMount`);
+	});
+</script>
+
+<li>
+	{logRender()}
+</li>
diff --git a/test/runtime/samples/lifecycle-render-order-for-children/_config.js b/test/runtime/samples/lifecycle-render-order-for-children/_config.js
new file mode 100644
index 0000000000..32bc35d49c
--- /dev/null
+++ b/test/runtime/samples/lifecycle-render-order-for-children/_config.js
@@ -0,0 +1,49 @@
+import order from './order.js';
+
+export default {
+	skip_if_ssr: true,
+	before_test() {
+		order.length = 0;
+	},
+	test({ assert, compileOptions }) {
+		if (compileOptions.hydratable) {
+			assert.deepEqual(order, [
+				'0: beforeUpdate',
+				'0: render',
+				'1: beforeUpdate',
+				'1: render',
+				'2: beforeUpdate',
+				'2: render',
+				'3: beforeUpdate',
+				'3: render',
+				'1: onMount',
+				'1: afterUpdate',
+				'2: onMount',
+				'2: afterUpdate',
+				'3: onMount',
+				'3: afterUpdate',
+				'0: onMount',
+				'0: afterUpdate'
+			]);
+		} else {
+			assert.deepEqual(order, [
+				'0: beforeUpdate',
+				'0: render',
+				'1: beforeUpdate',
+				'2: beforeUpdate',
+				'3: beforeUpdate',
+				'1: render',
+				'2: render',
+				'3: render',
+				'1: onMount',
+				'1: afterUpdate',
+				'2: onMount',
+				'2: afterUpdate',
+				'3: onMount',
+				'3: afterUpdate',
+				'0: onMount',
+				'0: afterUpdate'
+			]);
+		}
+	}
+};
diff --git a/test/runtime/samples/lifecycle-render-order-for-children/main.svelte b/test/runtime/samples/lifecycle-render-order-for-children/main.svelte
new file mode 100644
index 0000000000..fbb1c937e4
--- /dev/null
+++ b/test/runtime/samples/lifecycle-render-order-for-children/main.svelte
@@ -0,0 +1,33 @@
+<script>
+	import { onMount, beforeUpdate, afterUpdate } from 'svelte';
+	import order from './order.js';
+	import Item from './Item.svelte';
+
+	const parentIndex = 0;
+
+	function logRender () {
+  		order.push(`${parentIndex}: render`);
+  		return parentIndex;
+  	}
+
+  	beforeUpdate(() => {
+  		order.push(`${parentIndex}: beforeUpdate`);
+  	});
+
+  	afterUpdate(() => {
+  		order.push(`${parentIndex}: afterUpdate`);
+  	});
+
+  	onMount(() => {
+  		order.push(`${parentIndex}: onMount`);
+  	})
+</script>
+
+{logRender()}
+<ul>
+	{#each [1,2,3] as index}
+		<Item {index} />
+	{/each}
+</ul>
+
+
diff --git a/test/runtime/samples/lifecycle-render-order-for-children/order.js b/test/runtime/samples/lifecycle-render-order-for-children/order.js
new file mode 100644
index 0000000000..d6d1738de6
--- /dev/null
+++ b/test/runtime/samples/lifecycle-render-order-for-children/order.js
@@ -0,0 +1 @@
+export default [];
diff --git a/test/runtime/samples/lifecycle-render-order/_config.js b/test/runtime/samples/lifecycle-render-order/_config.js
new file mode 100644
index 0000000000..2bbab7a838
--- /dev/null
+++ b/test/runtime/samples/lifecycle-render-order/_config.js
@@ -0,0 +1,17 @@
+import order from './order.js';
+
+export default {
+	skip_if_ssr: true,
+
+	before_test() {
+		order.length = 0;
+	},
+	test({ assert }) {
+		assert.deepEqual(order, [
+			'beforeUpdate',
+			'render',
+			'onMount',
+			'afterUpdate'
+		]);
+	}
+};
diff --git a/test/runtime/samples/lifecycle-render-order/main.svelte b/test/runtime/samples/lifecycle-render-order/main.svelte
new file mode 100644
index 0000000000..719cd68327
--- /dev/null
+++ b/test/runtime/samples/lifecycle-render-order/main.svelte
@@ -0,0 +1,24 @@
+<script>
+	import { onMount, beforeUpdate, afterUpdate } from 'svelte';
+
+	import order from './order.js';
+
+	function identity(x) {
+		order.push('render');
+		return x;
+	}
+
+	beforeUpdate(() => {
+		order.push('beforeUpdate');
+	});
+
+	afterUpdate(() => {
+		order.push('afterUpdate');
+	});
+
+	onMount(() => {
+		order.push('onMount');
+	});
+</script>
+
+{identity(42)}
\ No newline at end of file
diff --git a/test/runtime/samples/lifecycle-render-order/order.js b/test/runtime/samples/lifecycle-render-order/order.js
new file mode 100644
index 0000000000..d6d1738de6
--- /dev/null
+++ b/test/runtime/samples/lifecycle-render-order/order.js
@@ -0,0 +1 @@
+export default [];
diff --git a/test/runtime/samples/loop-protect-async-opt-out/_config.js b/test/runtime/samples/loop-protect-async-opt-out/_config.js
new file mode 100644
index 0000000000..b1855c83eb
--- /dev/null
+++ b/test/runtime/samples/loop-protect-async-opt-out/_config.js
@@ -0,0 +1,9 @@
+export default {
+	compileOptions: {
+		dev: true,
+		loopGuardTimeout: 1
+	},
+	async test({ component }) {
+		await component.run_async_function();
+	}
+};
diff --git a/test/runtime/samples/loop-protect-async-opt-out/main.svelte b/test/runtime/samples/loop-protect-async-opt-out/main.svelte
new file mode 100644
index 0000000000..bc711ac5a3
--- /dev/null
+++ b/test/runtime/samples/loop-protect-async-opt-out/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export async function run_async_function() {
+		await loop();
+	}
+
+	async function loop() {
+		let i = 0;
+		while (i ++ < 5) {
+			await new Promise(resolve => setTimeout(resolve, 20));
+		}
+	}
+</script>
diff --git a/test/runtime/samples/loop-protect-generator-opt-out/_config.js b/test/runtime/samples/loop-protect-generator-opt-out/_config.js
new file mode 100644
index 0000000000..2680ecfdfb
--- /dev/null
+++ b/test/runtime/samples/loop-protect-generator-opt-out/_config.js
@@ -0,0 +1,9 @@
+export default {
+	compileOptions: {
+		dev: true,
+		loopGuardTimeout: 1
+	},
+	async test({ component }) {
+		await component.run_generator();
+	}
+};
diff --git a/test/runtime/samples/loop-protect-generator-opt-out/main.svelte b/test/runtime/samples/loop-protect-generator-opt-out/main.svelte
new file mode 100644
index 0000000000..514089435d
--- /dev/null
+++ b/test/runtime/samples/loop-protect-generator-opt-out/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export async function run_generator() {
+		const it = gen();
+		it.next();
+
+		await new Promise(resolve => setTimeout(resolve, 20));
+
+		it.next();
+	}
+
+	function* gen() {
+		while (true) {
+			yield;
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/loop-protect-inner-function/_config.js b/test/runtime/samples/loop-protect-inner-function/_config.js
new file mode 100644
index 0000000000..1b553e2475
--- /dev/null
+++ b/test/runtime/samples/loop-protect-inner-function/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: '<div></div>',
+	compileOptions: {
+		dev: true,
+		loopGuardTimeout: 100
+	}
+};
diff --git a/test/runtime/samples/loop-protect-inner-function/main.svelte b/test/runtime/samples/loop-protect-inner-function/main.svelte
new file mode 100644
index 0000000000..cf5350efde
--- /dev/null
+++ b/test/runtime/samples/loop-protect-inner-function/main.svelte
@@ -0,0 +1,7 @@
+<script>
+  let node;
+  (function () {
+    while(false) ;
+  }());
+</script>
+<div bind:this={node}></div>
\ No newline at end of file
diff --git a/test/runtime/samples/loop-protect/_config.js b/test/runtime/samples/loop-protect/_config.js
new file mode 100644
index 0000000000..230bbeb53d
--- /dev/null
+++ b/test/runtime/samples/loop-protect/_config.js
@@ -0,0 +1,7 @@
+export default {
+	error: 'Infinite loop detected',
+	compileOptions: {
+		dev: true,
+		loopGuardTimeout: 100
+	}
+};
diff --git a/test/runtime/samples/loop-protect/main.svelte b/test/runtime/samples/loop-protect/main.svelte
new file mode 100644
index 0000000000..aff13c82f1
--- /dev/null
+++ b/test/runtime/samples/loop-protect/main.svelte
@@ -0,0 +1,5 @@
+<script>
+  while(true) {
+    // do nothing
+  }
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/mixed-let-export/_config.js b/test/runtime/samples/mixed-let-export/_config.js
new file mode 100644
index 0000000000..f3da4215d9
--- /dev/null
+++ b/test/runtime/samples/mixed-let-export/_config.js
@@ -0,0 +1,9 @@
+export default {
+	props: {
+		a: 42
+	},
+
+	html: `
+		42
+	`
+};
diff --git a/test/runtime/samples/mixed-let-export/main.svelte b/test/runtime/samples/mixed-let-export/main.svelte
new file mode 100644
index 0000000000..659c73a860
--- /dev/null
+++ b/test/runtime/samples/mixed-let-export/main.svelte
@@ -0,0 +1,7 @@
+<script>
+  let a, b, c, d;
+
+  export { a, c }
+</script>
+
+{a}
diff --git a/test/runtime/samples/module-context-bind/_config.js b/test/runtime/samples/module-context-bind/_config.js
new file mode 100644
index 0000000000..32bc9c4ce9
--- /dev/null
+++ b/test/runtime/samples/module-context-bind/_config.js
@@ -0,0 +1,4 @@
+export default {
+	skip_if_ssr: true,
+	html: '<div>object</div>'
+};
diff --git a/test/runtime/samples/module-context-bind/main.svelte b/test/runtime/samples/module-context-bind/main.svelte
new file mode 100644
index 0000000000..1580102bd8
--- /dev/null
+++ b/test/runtime/samples/module-context-bind/main.svelte
@@ -0,0 +1,11 @@
+<script context='module'>
+	let foo;
+</script>
+
+<script>
+	import { onMount } from 'svelte';
+	let bar;
+	onMount(() => bar = foo);
+</script>
+
+<div bind:this={foo}>{typeof bar}</div>
diff --git a/test/runtime/samples/module-context-export/Foo.svelte b/test/runtime/samples/module-context-export/Foo.svelte
new file mode 100644
index 0000000000..c992ceef52
--- /dev/null
+++ b/test/runtime/samples/module-context-export/Foo.svelte
@@ -0,0 +1,7 @@
+<script context="module">
+	export const foo = 42;
+</script>
+<script>
+  let foo = 100;
+  console.log(foo);
+</script>
diff --git a/test/runtime/samples/module-context-export/_config.js b/test/runtime/samples/module-context-export/_config.js
new file mode 100644
index 0000000000..4c4595483a
--- /dev/null
+++ b/test/runtime/samples/module-context-export/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>(42)(99)</p>'
+};
diff --git a/test/runtime/samples/module-context-export/main.svelte b/test/runtime/samples/module-context-export/main.svelte
new file mode 100644
index 0000000000..60c130ca2f
--- /dev/null
+++ b/test/runtime/samples/module-context-export/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import { foo } from './Foo.svelte';
+	export let bar = 99;
+</script>
+
+<p>({foo})({bar})</p>
\ No newline at end of file
diff --git a/test/runtime/samples/module-context-with-instance-script/_config.js b/test/runtime/samples/module-context-with-instance-script/_config.js
new file mode 100644
index 0000000000..4c4595483a
--- /dev/null
+++ b/test/runtime/samples/module-context-with-instance-script/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>(42)(99)</p>'
+};
diff --git a/test/runtime/samples/module-context-with-instance-script/main.svelte b/test/runtime/samples/module-context-with-instance-script/main.svelte
new file mode 100644
index 0000000000..8769beaf3e
--- /dev/null
+++ b/test/runtime/samples/module-context-with-instance-script/main.svelte
@@ -0,0 +1,9 @@
+<script context="module">
+	const foo = 42;
+</script>
+
+<script>
+	export let bar = 99;
+</script>
+
+<p>({foo})({bar})</p>
\ No newline at end of file
diff --git a/test/runtime/samples/module-context/_config.js b/test/runtime/samples/module-context/_config.js
new file mode 100644
index 0000000000..83138d08f9
--- /dev/null
+++ b/test/runtime/samples/module-context/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>42</p>'
+};
diff --git a/test/runtime/samples/module-context/main.svelte b/test/runtime/samples/module-context/main.svelte
new file mode 100644
index 0000000000..851d98bea3
--- /dev/null
+++ b/test/runtime/samples/module-context/main.svelte
@@ -0,0 +1,5 @@
+<script context="module">
+	const foo = 42;
+</script>
+
+<p>{foo}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/mutation-tracking-across-sibling-scopes/_config.js b/test/runtime/samples/mutation-tracking-across-sibling-scopes/_config.js
new file mode 100644
index 0000000000..8d51c61394
--- /dev/null
+++ b/test/runtime/samples/mutation-tracking-across-sibling-scopes/_config.js
@@ -0,0 +1,12 @@
+export default {
+	async test({ assert, component, target }) {
+		assert.htmlEqual(component.div.innerHTML, '<div>+</div><div>-</div>');
+
+		const event = new window.Event('change');
+		const input = target.querySelector('input');
+		input.checked = false;
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(component.div.innerHTML, '<div>-</div><div>-</div>');
+	}
+};
diff --git a/test/runtime/samples/mutation-tracking-across-sibling-scopes/main.svelte b/test/runtime/samples/mutation-tracking-across-sibling-scopes/main.svelte
new file mode 100644
index 0000000000..9ed06657d7
--- /dev/null
+++ b/test/runtime/samples/mutation-tracking-across-sibling-scopes/main.svelte
@@ -0,0 +1,18 @@
+{#each things as thing}
+	<div>
+		<input type=checkbox bind:checked={thing.ok} />
+	</div>
+{/each}
+
+<div bind:this={div}>
+	{#each things as other}
+		<div>
+			{other.ok ? '+' : '-'}
+		</div>
+	{/each}
+</div>
+
+<script>
+	const things = [{ ok: true }, { ok: false }];
+	export let div;
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/names-deconflicted-nested/_config.js b/test/runtime/samples/names-deconflicted-nested/_config.js
new file mode 100644
index 0000000000..ec35d3e4e0
--- /dev/null
+++ b/test/runtime/samples/names-deconflicted-nested/_config.js
@@ -0,0 +1,15 @@
+export default {
+	props: {
+		array: [ [0,0,0], [0,0,0], [0,0,0] ]
+	},
+
+	html: `
+		<div>
+			<span>[ 0, 0 ]</span><span>[ 0, 1 ]</span><span>[ 0, 2 ]</span>
+		</div><div>
+			<span>[ 1, 0 ]</span><span>[ 1, 1 ]</span><span>[ 1, 2 ]</span>
+		</div><div>
+			<span>[ 2, 0 ]</span><span>[ 2, 1 ]</span><span>[ 2, 2 ]</span>
+		</div>
+	`
+};
diff --git a/test/runtime/samples/names-deconflicted-nested/main.svelte b/test/runtime/samples/names-deconflicted-nested/main.svelte
new file mode 100644
index 0000000000..4942ec5fbc
--- /dev/null
+++ b/test/runtime/samples/names-deconflicted-nested/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let array;
+</script>
+
+{#each array as row, i}
+	<div>
+		{#each row as cell, j}
+			<span>[ {i}, {j} ]</span>
+		{/each}
+	</div>
+{/each}
diff --git a/test/runtime/samples/names-deconflicted/Widget.svelte b/test/runtime/samples/names-deconflicted/Widget.svelte
new file mode 100644
index 0000000000..a8cc274a6f
--- /dev/null
+++ b/test/runtime/samples/names-deconflicted/Widget.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let index;
+	export let widget;
+</script>
+
+<p>{index + 1}: {widget.name}</p>
diff --git a/test/runtime/samples/names-deconflicted/_config.js b/test/runtime/samples/names-deconflicted/_config.js
new file mode 100644
index 0000000000..9ce1010690
--- /dev/null
+++ b/test/runtime/samples/names-deconflicted/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: '<p>1: foo</p><p>2: bar</p><p>3: baz</p>',
+
+	test({ assert, component, target }) {
+		component.widgets = [
+			{ name: 'bish' },
+			{ name: 'bosh' }
+		];
+
+		assert.htmlEqual( target.innerHTML, '<p>1: bish</p><p>2: bosh</p>' );
+	}
+};
diff --git a/test/runtime/samples/names-deconflicted/main.svelte b/test/runtime/samples/names-deconflicted/main.svelte
new file mode 100644
index 0000000000..60e3ea1320
--- /dev/null
+++ b/test/runtime/samples/names-deconflicted/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let widgets = [
+		{ name: 'foo' },
+		{ name: 'bar' },
+		{ name: 'baz' }
+	];
+</script>
+
+{#each widgets as widget, i}
+	<Widget widget='{widget}' index='{i}'/>
+{/each}
diff --git a/test/runtime/samples/nbsp-div/_config.js b/test/runtime/samples/nbsp-div/_config.js
new file mode 100644
index 0000000000..0d3264b720
--- /dev/null
+++ b/test/runtime/samples/nbsp-div/_config.js
@@ -0,0 +1,17 @@
+export default {
+	html: `<div>&nbsp;hello</div>
+	<div>&nbsp;hello&nbsp;&nbsp;</div>
+	<div>&nbsp;hello&nbsp; &nbsp;hello</div>`,
+
+	test({ assert, target }) {
+		const divList = target.querySelectorAll('div');
+		assert.equal( divList[0].textContent.charCodeAt( 0 ), 160 );
+		assert.equal( divList[1].textContent.charCodeAt( 0 ), 160 );
+		assert.equal( divList[1].textContent.charCodeAt( 6 ), 160 );
+		assert.equal( divList[1].textContent.charCodeAt( 7 ), 160 );
+		assert.equal( divList[2].textContent.charCodeAt( 0 ), 160 );
+		assert.equal( divList[2].textContent.charCodeAt( 6 ), 160 );
+		assert.equal( divList[2].textContent.charCodeAt( 7 ), 32 ); //normal space
+		assert.equal( divList[2].textContent.charCodeAt( 8 ), 160 );
+	}
+};
diff --git a/test/runtime/samples/nbsp-div/main.svelte b/test/runtime/samples/nbsp-div/main.svelte
new file mode 100644
index 0000000000..64557bfeb1
--- /dev/null
+++ b/test/runtime/samples/nbsp-div/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let name = 'hello';
+</script>
+
+<div>&nbsp;{name}</div>
+<div>&nbsp;{name}&nbsp;&nbsp;</div>
+<div>&nbsp;{name}&nbsp; &nbsp;{name}</div>
\ No newline at end of file
diff --git a/test/runtime/samples/nbsp/_config.js b/test/runtime/samples/nbsp/_config.js
new file mode 100644
index 0000000000..89fea253d2
--- /dev/null
+++ b/test/runtime/samples/nbsp/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: '<span>&nbsp;</span>',
+
+	test({ assert, target }) {
+		const text = target.querySelector( 'span' ).textContent;
+		assert.equal( text.charCodeAt( 0 ), 160 );
+	}
+};
diff --git a/test/runtime/samples/nbsp/main.svelte b/test/runtime/samples/nbsp/main.svelte
new file mode 100644
index 0000000000..11cd588757
--- /dev/null
+++ b/test/runtime/samples/nbsp/main.svelte
@@ -0,0 +1 @@
+<span>&nbsp;</span>
\ No newline at end of file
diff --git a/test/runtime/samples/nested-transition-detach-each/_config.js b/test/runtime/samples/nested-transition-detach-each/_config.js
new file mode 100644
index 0000000000..8737cfa0fa
--- /dev/null
+++ b/test/runtime/samples/nested-transition-detach-each/_config.js
@@ -0,0 +1,39 @@
+export default {
+	props: {
+		visible: false,
+		rows: [1, 2, 3],
+		cols: ['a', 'b', 'c']
+	},
+
+	html: '',
+
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+		assert.htmlEqual(target.innerHTML, `
+			<div class="row">
+				<div class="cell">1, a</div>
+				<div class="cell">1, b</div>
+				<div class="cell">1, c</div>
+			</div>
+			<div class="row">
+				<div class="cell">2, a</div>
+				<div class="cell">2, b</div>
+				<div class="cell">2, c</div>
+			</div>
+			<div class="row">
+				<div class="cell">3, a</div>
+				<div class="cell">3, b</div>
+				<div class="cell">3, c</div>
+			</div>
+		`);
+
+		component.visible = false;
+		raf.tick(0);
+		raf.tick(100);
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/nested-transition-detach-each/main.svelte b/test/runtime/samples/nested-transition-detach-each/main.svelte
new file mode 100644
index 0000000000..6f04d3fb6f
--- /dev/null
+++ b/test/runtime/samples/nested-transition-detach-each/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	export let visible;
+	export let rows;
+	export let cols;
+
+	function foo(node) {
+		return {
+			duration: 100,
+			tick: t => node.foo = t
+		};
+	}
+</script>
+
+{#if visible}
+	{#each rows as row}
+		<div out:foo class="row">
+			{#each cols as col}
+				<div out:foo class="cell">{row}, {col}</div>
+			{/each}
+		</div>
+	{/each}
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/nested-transition-detach-if-false/Folder.svelte b/test/runtime/samples/nested-transition-detach-if-false/Folder.svelte
new file mode 100644
index 0000000000..b37ba80b76
--- /dev/null
+++ b/test/runtime/samples/nested-transition-detach-if-false/Folder.svelte
@@ -0,0 +1,36 @@
+<script>
+	export let dir;
+	export let open = true;
+
+	function get_items() {
+		return dir === 'a'
+			? [
+				{
+					filename: 'a/b',
+					isDir: true
+				}
+			]
+			: [
+				{
+					filename: 'a/b/c',
+					isDir: false
+				}
+			];
+	}
+</script>
+
+<li>
+	<span>{dir}</span>
+
+	{#if open}
+		<ul>
+			{#each get_items() as item (item.filename)}
+				{#if item.isDir}
+					<svelte:self dir={item.filename}/>
+				{:else}
+					<li>{item.filename}</li>
+				{/if}
+			{/each}
+		</ul>
+	{/if}
+</li>
\ No newline at end of file
diff --git a/test/runtime/samples/nested-transition-detach-if-false/_config.js b/test/runtime/samples/nested-transition-detach-if-false/_config.js
new file mode 100644
index 0000000000..1d42094192
--- /dev/null
+++ b/test/runtime/samples/nested-transition-detach-if-false/_config.js
@@ -0,0 +1,24 @@
+export default {
+	html: `
+		<li>
+			<span>a</span>
+			<ul>
+				<li>
+					<span>a/b</span>
+					<ul>
+						<li>a/b/c</li>
+					</ul>
+				</li>
+			</ul>
+		</li>
+	`,
+
+	test({ assert, component, target }) {
+		component.folder.open = false;
+		assert.htmlEqual(target.innerHTML, `
+			<li>
+				<span>a</span>
+			</li>
+		`);
+	}
+};
diff --git a/test/runtime/samples/nested-transition-detach-if-false/main.svelte b/test/runtime/samples/nested-transition-detach-if-false/main.svelte
new file mode 100644
index 0000000000..2a7a4b49bf
--- /dev/null
+++ b/test/runtime/samples/nested-transition-detach-if-false/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let folder;
+
+	import Folder from './Folder.svelte';
+</script>
+
+<Folder bind:this={folder} dir="a"/>
\ No newline at end of file
diff --git a/test/runtime/samples/nested-transition-if-block-not-remounted/Span.svelte b/test/runtime/samples/nested-transition-if-block-not-remounted/Span.svelte
new file mode 100644
index 0000000000..b16b370950
--- /dev/null
+++ b/test/runtime/samples/nested-transition-if-block-not-remounted/Span.svelte
@@ -0,0 +1 @@
+<span><slot></slot></span>
\ No newline at end of file
diff --git a/test/runtime/samples/nested-transition-if-block-not-remounted/_config.js b/test/runtime/samples/nested-transition-if-block-not-remounted/_config.js
new file mode 100644
index 0000000000..1f2d5561fe
--- /dev/null
+++ b/test/runtime/samples/nested-transition-if-block-not-remounted/_config.js
@@ -0,0 +1,23 @@
+export default {
+	props: {
+		x: true,
+		value: 'one'
+	},
+
+	html: `
+		<div>
+			<input>
+			<span>x</span>
+		</div>
+	`,
+
+	test({ component, target }) {
+		const div = target.querySelector('div');
+
+		div.appendChild = div.insertBefore = () => {
+			throw new Error('DOM was mutated');
+		};
+
+		component.value = 'two';
+	}
+};
diff --git a/test/runtime/samples/nested-transition-if-block-not-remounted/main.svelte b/test/runtime/samples/nested-transition-if-block-not-remounted/main.svelte
new file mode 100644
index 0000000000..e6456a86f6
--- /dev/null
+++ b/test/runtime/samples/nested-transition-if-block-not-remounted/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let x;
+
+	import Span from './Span.svelte';
+</script>
+
+<div>
+	{#if x}
+		<input on:input="{() => value = this.value}">
+		<Span>x</Span>
+	{/if}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/noscript-removal/_config.js b/test/runtime/samples/noscript-removal/_config.js
new file mode 100644
index 0000000000..0fd03ea223
--- /dev/null
+++ b/test/runtime/samples/noscript-removal/_config.js
@@ -0,0 +1,33 @@
+export default {
+	ssrHtml: `
+	<noscript>foo</noscript>
+
+	<div>foo<noscript>foo</noscript></div>
+
+	<div>foo<div>foo<noscript>foo</noscript></div></div>
+	`,
+	test({ assert, target, compileOptions }) {
+		// if created on client side, should not build noscript
+		if (!compileOptions.hydratable) {
+			assert.equal(target.querySelectorAll('noscript').length, 0);
+		}
+
+		// it's okay not to remove the node during hydration
+		// will not be seen by user anyway
+		removeNoScript(target);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<div>foo</div>
+				<div>foo<div>foo</div></div>
+			`
+		);
+	}
+};
+
+function removeNoScript(target) {
+	target.querySelectorAll('noscript').forEach(elem => {
+		elem.parentNode.removeChild(elem);
+	});
+}
diff --git a/test/runtime/samples/noscript-removal/main.svelte b/test/runtime/samples/noscript-removal/main.svelte
new file mode 100644
index 0000000000..0cc2155e5d
--- /dev/null
+++ b/test/runtime/samples/noscript-removal/main.svelte
@@ -0,0 +1,5 @@
+<noscript>foo</noscript>
+
+<div>foo<noscript>foo</noscript></div>
+
+<div>foo<div>foo<noscript>foo</noscript></div></div>
diff --git a/test/runtime/samples/observable-auto-subscribe/Nested.svelte b/test/runtime/samples/observable-auto-subscribe/Nested.svelte
new file mode 100644
index 0000000000..5486ffe4ba
--- /dev/null
+++ b/test/runtime/samples/observable-auto-subscribe/Nested.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let observable;
+</script>
+
+<p>value: {$observable}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/observable-auto-subscribe/_config.js b/test/runtime/samples/observable-auto-subscribe/_config.js
new file mode 100644
index 0000000000..5570413395
--- /dev/null
+++ b/test/runtime/samples/observable-auto-subscribe/_config.js
@@ -0,0 +1,49 @@
+const subscribers = [];
+
+let value = 'initial';
+
+const observable = {
+	subscribe: fn => {
+		subscribers.push(fn);
+
+		fn(value);
+
+		return {
+			unsubscribe: () => {
+				const i = subscribers.indexOf(fn);
+				subscribers.splice(i, 1);
+			}
+		};
+	}
+};
+
+export default {
+	props: {
+		observable,
+		visible: false
+	},
+
+	html: '',
+
+	async test({ assert, component, target }) {
+		assert.equal(subscribers.length, 0);
+
+		component.visible = true;
+
+		assert.equal(subscribers.length, 1);
+		assert.htmlEqual(target.innerHTML, `
+			<p>value: initial</p>
+		`);
+
+		value = 42;
+		await subscribers.forEach(fn => fn(value));
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>value: 42</p>
+		`);
+
+		component.visible = false;
+
+		assert.equal(subscribers.length, 0);
+	}
+};
diff --git a/test/runtime/samples/observable-auto-subscribe/main.svelte b/test/runtime/samples/observable-auto-subscribe/main.svelte
new file mode 100644
index 0000000000..ab29b4e72e
--- /dev/null
+++ b/test/runtime/samples/observable-auto-subscribe/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let observable;
+	export let visible;
+</script>
+
+{#if visible}
+	<Nested {observable}/>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/ondestroy-before-cleanup/Top.svelte b/test/runtime/samples/ondestroy-before-cleanup/Top.svelte
new file mode 100644
index 0000000000..273b89d836
--- /dev/null
+++ b/test/runtime/samples/ondestroy-before-cleanup/Top.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { onDestroy } from 'svelte';
+	import container from './container.js';
+
+	let element;
+
+	onDestroy(() => {
+		container.div = element;
+	});
+</script>
+
+<div bind:this={element}></div>
diff --git a/test/runtime/samples/ondestroy-before-cleanup/_config.js b/test/runtime/samples/ondestroy-before-cleanup/_config.js
new file mode 100644
index 0000000000..e33b154b64
--- /dev/null
+++ b/test/runtime/samples/ondestroy-before-cleanup/_config.js
@@ -0,0 +1,12 @@
+import container from './container.js';
+
+export default {
+	test({ assert, component, target }) {
+		container.div = null;
+
+		const div = target.querySelector('div');
+
+		component.visible = false;
+		assert.equal(container.div, div);
+	}
+};
diff --git a/test/runtime/samples/ondestroy-before-cleanup/container.js b/test/runtime/samples/ondestroy-before-cleanup/container.js
new file mode 100644
index 0000000000..ff8b4c5632
--- /dev/null
+++ b/test/runtime/samples/ondestroy-before-cleanup/container.js
@@ -0,0 +1 @@
+export default {};
diff --git a/test/runtime/samples/ondestroy-before-cleanup/main.svelte b/test/runtime/samples/ondestroy-before-cleanup/main.svelte
new file mode 100644
index 0000000000..efd940053e
--- /dev/null
+++ b/test/runtime/samples/ondestroy-before-cleanup/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Top from './Top.svelte';
+
+	export let top;
+	export let visible = true;
+</script>
+
+{#if visible}
+	<Top bind:this={top}></Top>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/ondestroy-deep/A.svelte b/test/runtime/samples/ondestroy-deep/A.svelte
new file mode 100644
index 0000000000..a1a740bc2e
--- /dev/null
+++ b/test/runtime/samples/ondestroy-deep/A.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { onDestroy } from 'svelte';
+	import { destroyed } from './destroyed.js';
+	import B from './B.svelte';
+
+	let yes = 1;
+
+	onDestroy(() => destroyed.push('A'));
+</script>
+
+<div>
+	{#if yes}
+		<B/>
+	{/if}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/ondestroy-deep/B.svelte b/test/runtime/samples/ondestroy-deep/B.svelte
new file mode 100644
index 0000000000..78b042f2d6
--- /dev/null
+++ b/test/runtime/samples/ondestroy-deep/B.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { onDestroy } from 'svelte';
+	import { destroyed } from './destroyed.js';
+	import C from './C.svelte';
+
+	let yes = 1;
+
+	onDestroy(() => destroyed.push('B'));
+</script>
+
+<div>
+	{#if yes}
+		<C/>
+	{/if}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/ondestroy-deep/C.svelte b/test/runtime/samples/ondestroy-deep/C.svelte
new file mode 100644
index 0000000000..27f33c93fc
--- /dev/null
+++ b/test/runtime/samples/ondestroy-deep/C.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { onDestroy } from 'svelte';
+	import { destroyed } from './destroyed.js';
+
+	let yes = 1;
+
+	onDestroy(() => destroyed.push('C'));
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/ondestroy-deep/_config.js b/test/runtime/samples/ondestroy-deep/_config.js
new file mode 100644
index 0000000000..397d8c5684
--- /dev/null
+++ b/test/runtime/samples/ondestroy-deep/_config.js
@@ -0,0 +1,13 @@
+import { destroyed, reset } from './destroyed.js';
+
+export default {
+	test({ assert, component }) {
+		// for hydration, ssr may have pushed to `destroyed`
+		reset();
+
+		component.visible = false;
+		assert.deepEqual(destroyed, ['A', 'B', 'C']);
+
+		reset();
+	}
+};
diff --git a/test/runtime/samples/ondestroy-deep/destroyed.js b/test/runtime/samples/ondestroy-deep/destroyed.js
new file mode 100644
index 0000000000..45845cbd83
--- /dev/null
+++ b/test/runtime/samples/ondestroy-deep/destroyed.js
@@ -0,0 +1,3 @@
+export const destroyed = [];
+
+export const reset = () => destroyed.length = 0;
diff --git a/test/runtime/samples/ondestroy-deep/main.svelte b/test/runtime/samples/ondestroy-deep/main.svelte
new file mode 100644
index 0000000000..d584dc1b85
--- /dev/null
+++ b/test/runtime/samples/ondestroy-deep/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import A from './A.svelte';
+
+	export let visible = true;
+</script>
+
+{#if visible}
+	<A/>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/onmount-async/_config.js b/test/runtime/samples/onmount-async/_config.js
new file mode 100644
index 0000000000..f1dcc36d41
--- /dev/null
+++ b/test/runtime/samples/onmount-async/_config.js
@@ -0,0 +1,3 @@
+export default {
+	skip: +(/^v(\d+)/.exec(process.version)[1]) < 8
+};
diff --git a/test/runtime/samples/onmount-async/main.svelte b/test/runtime/samples/onmount-async/main.svelte
new file mode 100644
index 0000000000..f75c6ccd4e
--- /dev/null
+++ b/test/runtime/samples/onmount-async/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { onMount } from 'svelte';
+
+	onMount(async () => {
+		await 123
+	});
+</script>
diff --git a/test/runtime/samples/onmount-fires-when-ready-nested/ParentWidget.svelte b/test/runtime/samples/onmount-fires-when-ready-nested/ParentWidget.svelte
new file mode 100644
index 0000000000..5fc663d98f
--- /dev/null
+++ b/test/runtime/samples/onmount-fires-when-ready-nested/ParentWidget.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let foo;
+</script>
+
+<Widget/>{#if foo}<Widget/>{/if}
diff --git a/test/runtime/samples/onmount-fires-when-ready-nested/Widget.svelte b/test/runtime/samples/onmount-fires-when-ready-nested/Widget.svelte
new file mode 100644
index 0000000000..a935dcf337
--- /dev/null
+++ b/test/runtime/samples/onmount-fires-when-ready-nested/Widget.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let x;
+
+	export let inDocument;
+
+	onMount(() => {
+		inDocument = document.contains(x);
+	});
+</script>
+
+<p bind:this={x}>{inDocument}</p>
diff --git a/test/runtime/samples/onmount-fires-when-ready-nested/_config.js b/test/runtime/samples/onmount-fires-when-ready-nested/_config.js
new file mode 100644
index 0000000000..4f7ec9b051
--- /dev/null
+++ b/test/runtime/samples/onmount-fires-when-ready-nested/_config.js
@@ -0,0 +1,5 @@
+export default {
+	skip_if_ssr: true, // uses oncreate
+
+	html: '<div><p>true</p>\n<p>true</p></div>'
+};
diff --git a/test/runtime/samples/onmount-fires-when-ready-nested/main.svelte b/test/runtime/samples/onmount-fires-when-ready-nested/main.svelte
new file mode 100644
index 0000000000..a155293e26
--- /dev/null
+++ b/test/runtime/samples/onmount-fires-when-ready-nested/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Widget from './Widget.svelte';
+	import ParentWidget from './ParentWidget.svelte';
+</script>
+
+<div>
+	<Widget/>
+	<ParentWidget />
+</div>
diff --git a/test/runtime/samples/onmount-fires-when-ready/Widget.svelte b/test/runtime/samples/onmount-fires-when-ready/Widget.svelte
new file mode 100644
index 0000000000..a935dcf337
--- /dev/null
+++ b/test/runtime/samples/onmount-fires-when-ready/Widget.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let x;
+
+	export let inDocument;
+
+	onMount(() => {
+		inDocument = document.contains(x);
+	});
+</script>
+
+<p bind:this={x}>{inDocument}</p>
diff --git a/test/runtime/samples/onmount-fires-when-ready/_config.js b/test/runtime/samples/onmount-fires-when-ready/_config.js
new file mode 100644
index 0000000000..ca9f535c19
--- /dev/null
+++ b/test/runtime/samples/onmount-fires-when-ready/_config.js
@@ -0,0 +1,10 @@
+export default {
+	skip_if_ssr: true, // uses oncreate
+
+	html: '<div><p>true</p></div>',
+
+	test({ assert, component, target }) {
+		component.foo = true;
+		assert.htmlEqual(target.innerHTML, '<div><p>true</p>\n<p>true</p></div>');
+	}
+};
diff --git a/test/runtime/samples/onmount-fires-when-ready/main.svelte b/test/runtime/samples/onmount-fires-when-ready/main.svelte
new file mode 100644
index 0000000000..1204ac6719
--- /dev/null
+++ b/test/runtime/samples/onmount-fires-when-ready/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let foo;
+</script>
+
+<div>
+	<Widget/>
+
+	{#if foo}
+		<Widget/>
+	{/if}
+</div>
diff --git a/test/runtime/samples/onmount-get-current-component/_config.js b/test/runtime/samples/onmount-get-current-component/_config.js
new file mode 100644
index 0000000000..6c5c666cf0
--- /dev/null
+++ b/test/runtime/samples/onmount-get-current-component/_config.js
@@ -0,0 +1,4 @@
+export default {
+	skip_if_ssr: true,
+	html: '1'
+};
diff --git a/test/runtime/samples/onmount-get-current-component/main.svelte b/test/runtime/samples/onmount-get-current-component/main.svelte
new file mode 100644
index 0000000000..de64bc65fa
--- /dev/null
+++ b/test/runtime/samples/onmount-get-current-component/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import { onMount } from 'svelte';
+	import { get_current_component } from 'svelte/internal';
+
+	let gotException = 0;
+
+	onMount(() => {
+		try {
+			get_current_component();
+		} catch (error) {
+			gotException++;
+		}
+	});
+</script>
+
+{gotException}
diff --git a/test/runtime/samples/onmount-sibling-order/Nested.svelte b/test/runtime/samples/onmount-sibling-order/Nested.svelte
new file mode 100644
index 0000000000..da163387d9
--- /dev/null
+++ b/test/runtime/samples/onmount-sibling-order/Nested.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { onMount } from 'svelte';
+
+	import result from './result.js';
+
+	export let name;
+
+	onMount(() => {
+		result.push(`onMount ${name}`);
+	});
+</script>
+
+<p>{name}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/onmount-sibling-order/_config.js b/test/runtime/samples/onmount-sibling-order/_config.js
new file mode 100644
index 0000000000..bf8a52b2f6
--- /dev/null
+++ b/test/runtime/samples/onmount-sibling-order/_config.js
@@ -0,0 +1,16 @@
+import result from './result.js';
+
+export default {
+	// TODO is sibling onMount order important?
+	skip: true,
+
+	test({ assert }) {
+		assert.deepEqual(result, [
+			'onMount foo',
+			'onMount bar'
+		]);
+
+		result.pop();
+		result.pop();
+	}
+};
diff --git a/test/runtime/samples/onmount-sibling-order/main.svelte b/test/runtime/samples/onmount-sibling-order/main.svelte
new file mode 100644
index 0000000000..3fbf499755
--- /dev/null
+++ b/test/runtime/samples/onmount-sibling-order/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested name='foo'/>
+<Nested name='bar'/>
\ No newline at end of file
diff --git a/test/runtime/samples/onmount-sibling-order/result.js b/test/runtime/samples/onmount-sibling-order/result.js
new file mode 100644
index 0000000000..d6d1738de6
--- /dev/null
+++ b/test/runtime/samples/onmount-sibling-order/result.js
@@ -0,0 +1 @@
+export default [];
diff --git a/test/runtime/samples/option-without-select/_config.js b/test/runtime/samples/option-without-select/_config.js
new file mode 100644
index 0000000000..9925069bb1
--- /dev/null
+++ b/test/runtime/samples/option-without-select/_config.js
@@ -0,0 +1,14 @@
+export default {
+	props: {
+		foo: 'hello'
+	},
+
+	html: "<option value='hello'>hello</option>",
+
+	test({ assert, component, target }) {
+		component.foo = 'goodbye';
+		assert.htmlEqual(target.innerHTML, `
+			<option value='goodbye'>goodbye</option>
+		`);
+	}
+};
diff --git a/test/runtime/samples/option-without-select/main.svelte b/test/runtime/samples/option-without-select/main.svelte
new file mode 100644
index 0000000000..69dd8b229e
--- /dev/null
+++ b/test/runtime/samples/option-without-select/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+<option value='{foo}'>{foo}</option>
\ No newline at end of file
diff --git a/test/runtime/samples/paren-wrapped-expressions/_config.js b/test/runtime/samples/paren-wrapped-expressions/_config.js
new file mode 100644
index 0000000000..972dc51cb0
--- /dev/null
+++ b/test/runtime/samples/paren-wrapped-expressions/_config.js
@@ -0,0 +1,16 @@
+export default {
+	props: {
+		a: 'foo',
+		b: true,
+		c: [ 1, 2, 3 ]
+	},
+
+	html: `
+		<span>foo</span>
+		<span class="foo"></span>
+		<span>true</span>
+		<span>1</span>
+		<span>2</span>
+		<span>3</span>
+	`
+};
diff --git a/test/runtime/samples/paren-wrapped-expressions/main.svelte b/test/runtime/samples/paren-wrapped-expressions/main.svelte
new file mode 100644
index 0000000000..44398b3bd0
--- /dev/null
+++ b/test/runtime/samples/paren-wrapped-expressions/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let a;
+	export let b;
+	export let c;
+</script>
+
+<span>{ (a) }</span>
+<span class='{ (a) }'></span>
+{#if (b) }
+	<span>true</span>
+{/if}
+{#each (c) as x}
+	<span>{x}</span>
+{/each}
diff --git a/test/runtime/samples/pre-tag/.editorconfig b/test/runtime/samples/pre-tag/.editorconfig
new file mode 100644
index 0000000000..fa948941d5
--- /dev/null
+++ b/test/runtime/samples/pre-tag/.editorconfig
@@ -0,0 +1,2 @@
+[main.svelte]
+trim_trailing_whitespace = unset
diff --git a/test/runtime/samples/pre-tag/_config.js b/test/runtime/samples/pre-tag/_config.js
new file mode 100644
index 0000000000..c65b9df524
--- /dev/null
+++ b/test/runtime/samples/pre-tag/_config.js
@@ -0,0 +1,55 @@
+export default {
+	test({ assert, target }) {
+		// Test for <pre> tag
+		const elementPre = target.querySelector('#pre');
+		// Test for non <pre> tag
+		const elementDiv = target.querySelector('#div');
+		// Test for <pre> tag in non <pre> tag
+		const elementDivWithPre = target.querySelector('#div-with-pre');
+		// Test for <pre> tag with leading newline
+		const elementPreWithLeadingNewline = target.querySelector('#pre-with-leading-newline');
+		const elementPreWithoutLeadingNewline = target.querySelector('#pre-without-leading-newline');
+		const elementPreWithMultipleLeadingNewline = target.querySelector('#pre-with-multiple-leading-newlines');
+
+		assert.equal(
+			elementPre.innerHTML,
+			`  A
+  B
+  <span>
+    C
+    D
+  </span>
+  E
+  F
+`
+		);
+		assert.equal(
+			elementDiv.innerHTML,
+			`A
+  B
+  <span>C
+    D</span>
+  E
+  F`
+		);
+		assert.equal(
+			elementDivWithPre.innerHTML,
+			`<pre>    A
+    B
+    <span>
+      C
+      D
+    </span>
+    E
+    F
+  </pre>`
+		);
+		assert.equal(elementPreWithLeadingNewline.children[0].innerHTML, 'leading newline');
+		assert.equal(elementPreWithLeadingNewline.children[1].innerHTML, '  leading newline and spaces');
+		assert.equal(elementPreWithLeadingNewline.children[2].innerHTML, '\nleading newlines');
+		assert.equal(elementPreWithoutLeadingNewline.children[0].innerHTML, 'without spaces');
+		assert.equal(elementPreWithoutLeadingNewline.children[1].innerHTML, '  with spaces  ');
+		assert.equal(elementPreWithoutLeadingNewline.children[2].innerHTML, ' \nnewline after leading space');
+		assert.equal(elementPreWithMultipleLeadingNewline.innerHTML, '\n\nmultiple leading newlines');
+	}
+};
diff --git a/test/runtime/samples/pre-tag/main.svelte b/test/runtime/samples/pre-tag/main.svelte
new file mode 100644
index 0000000000..6ab8b161de
--- /dev/null
+++ b/test/runtime/samples/pre-tag/main.svelte
@@ -0,0 +1,56 @@
+<pre id="pre">
+  A
+  B
+  <span>
+    C
+    D
+  </span>
+  E
+  F
+</pre>
+
+<div id="div">
+  A
+  B
+  <span>
+    C
+    D
+  </span>
+  E
+  F
+</div>
+
+<div id="div-with-pre">
+  <pre>
+    A
+    B
+    <span>
+      C
+      D
+    </span>
+    E
+    F
+  </pre>
+</div>
+
+<div id="pre-with-leading-newline">
+  <pre>
+leading newline</pre>
+  <pre>
+  leading newline and spaces</pre>
+  <pre>
+
+leading newlines</pre>
+</div>
+
+<div id="pre-without-leading-newline">
+  <pre>without spaces</pre>
+  <pre>  with spaces  </pre>
+  <pre> 
+newline after leading space</pre>
+</div>
+
+<pre id="pre-with-multiple-leading-newlines">
+
+
+multiple leading newlines</pre>
diff --git a/test/runtime/samples/preload/_config.js b/test/runtime/samples/preload/_config.js
new file mode 100644
index 0000000000..d7d5fd0851
--- /dev/null
+++ b/test/runtime/samples/preload/_config.js
@@ -0,0 +1,5 @@
+export default {
+	test({ assert, mod }) {
+		assert.deepEqual(mod.preload({ foo: 1 }), { bar: 2 });
+	}
+};
diff --git a/test/runtime/samples/preload/main.svelte b/test/runtime/samples/preload/main.svelte
new file mode 100644
index 0000000000..f7f2adff18
--- /dev/null
+++ b/test/runtime/samples/preload/main.svelte
@@ -0,0 +1,7 @@
+<script context="module">
+	export function preload({ foo }) {
+		return {
+			bar: foo * 2
+		};
+	}
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/preserve-whitespaces/_config.js b/test/runtime/samples/preserve-whitespaces/_config.js
new file mode 100644
index 0000000000..ffd6423911
--- /dev/null
+++ b/test/runtime/samples/preserve-whitespaces/_config.js
@@ -0,0 +1,53 @@
+export default {
+	compileOptions: {
+		preserveWhitespace: true
+	},
+	test({ assert, target }) {
+		// Test for <pre> tag
+		const elementPre = target.querySelector('#pre');
+		// Test for non <pre> tag
+		const elementDiv = target.querySelector('#div');
+		// Test for <pre> tag in non <pre> tag
+		const elementDivWithPre = target.querySelector('#div-with-pre');
+
+		assert.equal(
+			elementPre.innerHTML,
+			`  A
+  B
+  <span>
+    C
+    D
+  </span>
+  E
+  F
+`
+		);
+		assert.equal(
+			elementDiv.innerHTML,
+			`
+  A
+  B
+  <span>
+    C
+    D
+  </span>
+  E
+  F
+`
+		);
+		assert.equal(
+			elementDivWithPre.innerHTML,
+			`
+  <pre>    A
+    B
+    <span>
+      C
+      D
+    </span>
+    E
+    F
+  </pre>
+`
+		);
+	}
+};
diff --git a/test/runtime/samples/preserve-whitespaces/main.svelte b/test/runtime/samples/preserve-whitespaces/main.svelte
new file mode 100644
index 0000000000..ef603b9883
--- /dev/null
+++ b/test/runtime/samples/preserve-whitespaces/main.svelte
@@ -0,0 +1,34 @@
+<pre id="pre">
+  A
+  B
+  <span>
+    C
+    D
+  </span>
+  E
+  F
+</pre>
+
+<div id="div">
+  A
+  B
+  <span>
+    C
+    D
+  </span>
+  E
+  F
+</div>
+
+<div id="div-with-pre">
+  <pre>
+    A
+    B
+    <span>
+      C
+      D
+    </span>
+    E
+    F
+  </pre>
+</div>
diff --git a/test/runtime/samples/prop-accessors/_config.js b/test/runtime/samples/prop-accessors/_config.js
new file mode 100644
index 0000000000..2f0f0eb442
--- /dev/null
+++ b/test/runtime/samples/prop-accessors/_config.js
@@ -0,0 +1,12 @@
+export default {
+	accessors: false,
+	test({ assert, component }) {
+		assert.equal(component.foo1, 42);
+		assert.equal(component.foo2(), 42);
+		assert.equal(component.bar, undefined);
+		component.foo1 = null;
+		component.foo2 = null;
+		assert.equal(component.foo1, 42);
+		assert.equal(component.foo2(), 42);
+	}
+};
diff --git a/test/runtime/samples/prop-accessors/main.svelte b/test/runtime/samples/prop-accessors/main.svelte
new file mode 100644
index 0000000000..a412ac3e3c
--- /dev/null
+++ b/test/runtime/samples/prop-accessors/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export const foo1 = 42;
+	export const foo2 = () => 42;
+	export let bar = 42;
+</script>
diff --git a/test/runtime/samples/prop-const/Nested.svelte b/test/runtime/samples/prop-const/Nested.svelte
new file mode 100644
index 0000000000..0e4dca42f5
--- /dev/null
+++ b/test/runtime/samples/prop-const/Nested.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let a;
+	export const b = 2;
+</script>
+
+<p>a: {a}</p>
+<p>b: {b}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/prop-const/_config.js b/test/runtime/samples/prop-const/_config.js
new file mode 100644
index 0000000000..991063a754
--- /dev/null
+++ b/test/runtime/samples/prop-const/_config.js
@@ -0,0 +1,23 @@
+export default {
+	props: {
+		a: 3,
+		b: 4
+	},
+
+	html: `
+		<p>a: 3</p>
+		<p>b: 2</p>
+	`,
+
+	async test({ assert, component, target }) {
+		await component.$set({
+			a: 5,
+			b: 6
+		});
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>a: 5</p>
+			<p>b: 2</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/prop-const/main.svelte b/test/runtime/samples/prop-const/main.svelte
new file mode 100644
index 0000000000..41d9075526
--- /dev/null
+++ b/test/runtime/samples/prop-const/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let a;
+	export let b;
+</script>
+
+<Nested a={a} b={b}/>
\ No newline at end of file
diff --git a/test/runtime/samples/prop-exports/_config.js b/test/runtime/samples/prop-exports/_config.js
new file mode 100644
index 0000000000..69a40c4fab
--- /dev/null
+++ b/test/runtime/samples/prop-exports/_config.js
@@ -0,0 +1,30 @@
+import { writable } from '../../../../store';
+
+export default {
+	props: {
+		s1: writable(42),
+		s2: writable(43),
+		p1: 2,
+		p3: 3,
+		a1: writable(1),
+		a2: 4,
+		a6: writable(29),
+		for: 'loop',
+		continue: '...'
+	},
+
+	html: `
+		$s1=42
+		$s2=43
+		p1=2
+		p3=3
+		$v1=1
+		v2=4
+		vi1=4
+		$vs1=1
+		vl0=hello
+		vl1=test
+		$s3=29
+		loop...
+	`
+};
diff --git a/test/runtime/samples/prop-exports/main.svelte b/test/runtime/samples/prop-exports/main.svelte
new file mode 100644
index 0000000000..93c217a158
--- /dev/null
+++ b/test/runtime/samples/prop-exports/main.svelte
@@ -0,0 +1,51 @@
+<script>
+  // export multiple subscribables in one line
+  export let u1, s1, u2, s2
+
+  let p1, p2, p3
+
+  // export previously declared props
+  export { p1, p3 }
+
+  // aliased props <component a1={...} a2={...}> assign to v1, v2
+  let v1, v2
+  export { v1 as a1, v2 as a2 }
+
+  // aliased export with initializer
+  let vi1 = v2
+  export { vi1 as a3 }
+
+  // aliased subscribable export
+  let vs1 = v1
+  export { vs1 as a4 }
+
+  // literal initializer
+  let vl0 = 'hello'
+  export { vl0 }
+
+  // aliased with literal initializer
+  let vl1 = 'test'
+  export { vl1 as a5 }
+
+  // aliased store surrounded by non-aliased non-stores
+  let n1, n2, s3
+  export { n1, s3 as a6, n2 }
+
+  // keyword exports
+  let k1, k2
+  export { k1 as for, k2 as continue }
+
+</script>
+
+$s1={$s1}
+$s2={$s2}
+p1={p1}
+p3={p3}
+$v1={$v1}
+v2={v2}
+vi1={vi1}
+$vs1={$vs1}
+vl0={vl0}
+vl1={vl1}
+$s3={$s3}
+{k1}{k2}
diff --git a/test/runtime/samples/prop-not-action/Nested.svelte b/test/runtime/samples/prop-not-action/Nested.svelte
new file mode 100644
index 0000000000..7c8cd59210
--- /dev/null
+++ b/test/runtime/samples/prop-not-action/Nested.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let user;
+</script>
+
+<h1>Hello {user.name}!</h1>
\ No newline at end of file
diff --git a/test/runtime/samples/prop-not-action/_config.js b/test/runtime/samples/prop-not-action/_config.js
new file mode 100644
index 0000000000..1f4ffa4749
--- /dev/null
+++ b/test/runtime/samples/prop-not-action/_config.js
@@ -0,0 +1,9 @@
+export default {
+	props: {
+		currentUser: { name: 'world' }
+	},
+
+	html: `
+		<h1>Hello world!</h1>
+	`
+};
diff --git a/test/runtime/samples/prop-not-action/main.svelte b/test/runtime/samples/prop-not-action/main.svelte
new file mode 100644
index 0000000000..e1c40bc070
--- /dev/null
+++ b/test/runtime/samples/prop-not-action/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Nested from './Nested.svelte';
+	export let currentUser;
+</script>
+
+<Nested user={currentUser}/>
\ No newline at end of file
diff --git a/test/runtime/samples/prop-quoted/Nested.svelte b/test/runtime/samples/prop-quoted/Nested.svelte
new file mode 100644
index 0000000000..681f7126b2
--- /dev/null
+++ b/test/runtime/samples/prop-quoted/Nested.svelte
@@ -0,0 +1 @@
+{$$props['x-y-z']}
\ No newline at end of file
diff --git a/test/runtime/samples/prop-quoted/_config.js b/test/runtime/samples/prop-quoted/_config.js
new file mode 100644
index 0000000000..aa2f2ec329
--- /dev/null
+++ b/test/runtime/samples/prop-quoted/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		foo: 1
+	},
+
+	html: '1',
+
+	async test({ assert, component, target }) {
+		component.foo = 2;
+		assert.htmlEqual(target.innerHTML, '2');
+	}
+};
diff --git a/test/runtime/samples/prop-quoted/main.svelte b/test/runtime/samples/prop-quoted/main.svelte
new file mode 100644
index 0000000000..0249017762
--- /dev/null
+++ b/test/runtime/samples/prop-quoted/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let foo;
+</script>
+
+<Nested x-y-z={foo}/>
\ No newline at end of file
diff --git a/test/runtime/samples/prop-subscribable/_config.js b/test/runtime/samples/prop-subscribable/_config.js
new file mode 100644
index 0000000000..fcd8fb8b07
--- /dev/null
+++ b/test/runtime/samples/prop-subscribable/_config.js
@@ -0,0 +1,11 @@
+import { writable } from '../../../../store';
+
+export default {
+	props: {
+		b: writable(42)
+	},
+
+	html: `
+		42
+	`
+};
diff --git a/test/runtime/samples/prop-subscribable/main.svelte b/test/runtime/samples/prop-subscribable/main.svelte
new file mode 100644
index 0000000000..6721635efd
--- /dev/null
+++ b/test/runtime/samples/prop-subscribable/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let a;
+	export let b;
+	export let c;
+</script>
+
+{$b}
\ No newline at end of file
diff --git a/test/runtime/samples/prop-without-semicolon-b/_config.js b/test/runtime/samples/prop-without-semicolon-b/_config.js
new file mode 100644
index 0000000000..6cdc86c521
--- /dev/null
+++ b/test/runtime/samples/prop-without-semicolon-b/_config.js
@@ -0,0 +1,7 @@
+export default {
+	props: {
+		name: 'world'
+	},
+
+	html: '<h1>Hello world!</h1>'
+};
diff --git a/test/runtime/samples/prop-without-semicolon-b/main.svelte b/test/runtime/samples/prop-without-semicolon-b/main.svelte
new file mode 100644
index 0000000000..671fb95186
--- /dev/null
+++ b/test/runtime/samples/prop-without-semicolon-b/main.svelte
@@ -0,0 +1,6 @@
+<h1>Hello {name}!</h1>
+
+<script>
+	export let name
+	(() => {})()
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/prop-without-semicolon/_config.js b/test/runtime/samples/prop-without-semicolon/_config.js
new file mode 100644
index 0000000000..26b3554f9f
--- /dev/null
+++ b/test/runtime/samples/prop-without-semicolon/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<h1>Hello world!</h1>'
+};
diff --git a/test/runtime/samples/prop-without-semicolon/main.svelte b/test/runtime/samples/prop-without-semicolon/main.svelte
new file mode 100644
index 0000000000..49a34d15ec
--- /dev/null
+++ b/test/runtime/samples/prop-without-semicolon/main.svelte
@@ -0,0 +1,5 @@
+<h1>Hello {name}!</h1>
+
+<script>
+	export let name='world'
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/props-reactive-b/_config.js b/test/runtime/samples/props-reactive-b/_config.js
new file mode 100644
index 0000000000..541fd26e02
--- /dev/null
+++ b/test/runtime/samples/props-reactive-b/_config.js
@@ -0,0 +1,30 @@
+export default {
+	props: {
+		a: 1,
+		b: 2
+	},
+
+	html: `
+		<p>a: 1</p>
+		<p>b: 2</p>
+		<p>c: 3</p>
+	`,
+
+	async test({ assert, component, target }) {
+		await component.$set({ a: 4 });
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>a: 4</p>
+			<p>b: 2</p>
+			<p>c: 6</p>
+		`);
+
+		await component.$set({ b: 5 });
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>a: 4</p>
+			<p>b: 5</p>
+			<p>c: 9</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/props-reactive-b/main.svelte b/test/runtime/samples/props-reactive-b/main.svelte
new file mode 100644
index 0000000000..45d6fc0cad
--- /dev/null
+++ b/test/runtime/samples/props-reactive-b/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let a;
+	$: c = a + $$props.b;
+</script>
+
+<p>a: {a}</p>
+<p>b: {$$props.b}</p>
+<p>c: {c}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/props-reactive-only-with-change/Comp.svelte b/test/runtime/samples/props-reactive-only-with-change/Comp.svelte
new file mode 100644
index 0000000000..0eaf8a40d4
--- /dev/null
+++ b/test/runtime/samples/props-reactive-only-with-change/Comp.svelte
@@ -0,0 +1,6 @@
+<script>
+  export let id;
+  export let callback;
+
+  $: $$props, callback(id);
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/props-reactive-only-with-change/_config.js b/test/runtime/samples/props-reactive-only-with-change/_config.js
new file mode 100644
index 0000000000..8ed82fc8ec
--- /dev/null
+++ b/test/runtime/samples/props-reactive-only-with-change/_config.js
@@ -0,0 +1,30 @@
+let callbacks = [];
+
+export default {
+	props: {
+		callback: (value) => callbacks.push(value),
+		val1: '1',
+		val2: '2'
+	},
+
+	before_test() {
+		callbacks = [];
+	},
+
+	async test({ assert, component }) {
+		assert.equal(callbacks.length, 2);
+		assert.equal(JSON.stringify(callbacks), '["1","2"]');
+
+		component.val1 = '3';
+		assert.equal(callbacks.length, 3);
+		assert.equal(JSON.stringify(callbacks), '["1","2","1"]');
+
+		component.val1 = '4';
+		assert.equal(callbacks.length, 4);
+		assert.equal(JSON.stringify(callbacks), '["1","2","1","1"]');
+
+		component.val2 = '5';
+		assert.equal(callbacks.length, 5);
+		assert.equal(JSON.stringify(callbacks), '["1","2","1","1","2"]');
+	}
+};
diff --git a/test/runtime/samples/props-reactive-only-with-change/main.svelte b/test/runtime/samples/props-reactive-only-with-change/main.svelte
new file mode 100644
index 0000000000..73ddd137f5
--- /dev/null
+++ b/test/runtime/samples/props-reactive-only-with-change/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Comp from './Comp.svelte';
+	export let callback;
+	export let val1, val2;
+</script>
+
+<Comp id="1" {callback} value={val1} />
+<Comp id="2" {callback} value={val2} />
\ No newline at end of file
diff --git a/test/runtime/samples/props-reactive-slot/Comp.svelte b/test/runtime/samples/props-reactive-slot/Comp.svelte
new file mode 100644
index 0000000000..bf9e12a58a
--- /dev/null
+++ b/test/runtime/samples/props-reactive-slot/Comp.svelte
@@ -0,0 +1 @@
+<slot props={$$props}/>
\ No newline at end of file
diff --git a/test/runtime/samples/props-reactive-slot/_config.js b/test/runtime/samples/props-reactive-slot/_config.js
new file mode 100644
index 0000000000..6129866605
--- /dev/null
+++ b/test/runtime/samples/props-reactive-slot/_config.js
@@ -0,0 +1,21 @@
+export default {
+	html: `
+		<h1>hi</h1>
+		<button>Change</button>
+	`,
+
+	async test({ assert, target, window }) {
+		const btn = target.querySelector('button');
+		const clickEvent = new window.MouseEvent('click');
+
+		await btn.dispatchEvent(clickEvent);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<h1>changed</h1>
+			<button>Change</button>
+		`
+		);
+	}
+};
diff --git a/test/runtime/samples/props-reactive-slot/main.svelte b/test/runtime/samples/props-reactive-slot/main.svelte
new file mode 100644
index 0000000000..84777bf8ab
--- /dev/null
+++ b/test/runtime/samples/props-reactive-slot/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Comp from './Comp.svelte'
+	let p = "hi"
+</script>
+
+<Comp someprop={p} let:props>
+	<h1>
+		{props.someprop}
+	</h1>
+</Comp>
+
+<button on:click={()=> p = "changed"}>Change
+</button>
\ No newline at end of file
diff --git a/test/runtime/samples/props-reactive/Nested.svelte b/test/runtime/samples/props-reactive/Nested.svelte
new file mode 100644
index 0000000000..094aa8f36a
--- /dev/null
+++ b/test/runtime/samples/props-reactive/Nested.svelte
@@ -0,0 +1,9 @@
+<script>
+	let props;
+	$: {
+		let { foo, bar, baz, ...others } = $$props;
+		props = others;
+	}
+</script>
+
+<p>{props.qux}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/props-reactive/_config.js b/test/runtime/samples/props-reactive/_config.js
new file mode 100644
index 0000000000..4c27ac0618
--- /dev/null
+++ b/test/runtime/samples/props-reactive/_config.js
@@ -0,0 +1,20 @@
+export default {
+	props: {
+		a: 1,
+		b: 2,
+		c: 3,
+		d: 4
+	},
+
+	html: `
+		<p>4</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.d = 5;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>5</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/props-reactive/main.svelte b/test/runtime/samples/props-reactive/main.svelte
new file mode 100644
index 0000000000..615df8d294
--- /dev/null
+++ b/test/runtime/samples/props-reactive/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let a;
+	export let b;
+	export let c;
+	export let d;
+</script>
+
+<Nested foo={a} bar={b} baz={c} qux={d}/>
\ No newline at end of file
diff --git a/test/runtime/samples/props/RenderProps.svelte b/test/runtime/samples/props/RenderProps.svelte
new file mode 100644
index 0000000000..7026545f00
--- /dev/null
+++ b/test/runtime/samples/props/RenderProps.svelte
@@ -0,0 +1,3 @@
+<script></script>
+
+<p>{JSON.stringify($$props)}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/props/_config.js b/test/runtime/samples/props/_config.js
new file mode 100644
index 0000000000..64015cdc6b
--- /dev/null
+++ b/test/runtime/samples/props/_config.js
@@ -0,0 +1,17 @@
+export default {
+	props: {
+		x: 1
+	},
+
+	html: `
+		<p>{"x":1}</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.x = 2;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>{"x":2}</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/props/main.svelte b/test/runtime/samples/props/main.svelte
new file mode 100644
index 0000000000..4a04faf348
--- /dev/null
+++ b/test/runtime/samples/props/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import RenderProps from './RenderProps.svelte';
+
+	export let x;
+</script>
+
+<RenderProps {x}>
+	<p>some (unused) slotted content, to create an internal prop</p>
+</RenderProps>
\ No newline at end of file
diff --git a/test/runtime/samples/raw-anchor-first-child/_config.js b/test/runtime/samples/raw-anchor-first-child/_config.js
new file mode 100644
index 0000000000..f9e6b76626
--- /dev/null
+++ b/test/runtime/samples/raw-anchor-first-child/_config.js
@@ -0,0 +1,13 @@
+export default {
+	props: {
+		raw: '<span>foo</span>'
+	},
+
+	test({ assert, component, target }) {
+		const span = target.querySelector('span');
+		assert.ok(!span.previousSibling);
+
+		component.raw = '<span>bar</span>';
+		assert.htmlEqual(target.innerHTML, '<div><span>bar</span></div>');
+	}
+};
diff --git a/test/runtime/samples/raw-anchor-first-child/main.svelte b/test/runtime/samples/raw-anchor-first-child/main.svelte
new file mode 100644
index 0000000000..39d7937a7d
--- /dev/null
+++ b/test/runtime/samples/raw-anchor-first-child/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let raw;
+	export let maybe;
+</script>
+
+<div>{@html raw}{#if maybe}after{/if}</div>
diff --git a/test/runtime/samples/raw-anchor-first-last-child/_config.js b/test/runtime/samples/raw-anchor-first-last-child/_config.js
new file mode 100644
index 0000000000..30acfe4d0f
--- /dev/null
+++ b/test/runtime/samples/raw-anchor-first-last-child/_config.js
@@ -0,0 +1,13 @@
+export default {
+	props: {
+		raw: '<span>foo</span>'
+	},
+
+	test({ assert, component, target }) {
+		const span = target.querySelector('span');
+		assert.ok(!span.previousSibling);
+		assert.ok(!span.nextSibling);
+
+		component.raw = '<span>bar</span>';
+	}
+};
diff --git a/test/runtime/samples/raw-anchor-first-last-child/main.svelte b/test/runtime/samples/raw-anchor-first-last-child/main.svelte
new file mode 100644
index 0000000000..205abb75e8
--- /dev/null
+++ b/test/runtime/samples/raw-anchor-first-last-child/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let raw;
+</script>
+
+<div>{@html raw}</div>
diff --git a/test/runtime/samples/raw-anchor-last-child/_config.js b/test/runtime/samples/raw-anchor-last-child/_config.js
new file mode 100644
index 0000000000..dcc8ac6db6
--- /dev/null
+++ b/test/runtime/samples/raw-anchor-last-child/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		raw: '<span>foo</span>'
+	},
+
+	test({ assert, component, target }) {
+		const span = target.querySelector('span');
+		assert.ok(!span.nextSibling);
+
+		component.raw = '<span>bar</span>';
+	}
+};
diff --git a/test/runtime/samples/raw-anchor-last-child/main.svelte b/test/runtime/samples/raw-anchor-last-child/main.svelte
new file mode 100644
index 0000000000..48a6b9e5b6
--- /dev/null
+++ b/test/runtime/samples/raw-anchor-last-child/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let maybe;
+	export let raw;
+</script>
+
+<div>{#if maybe}after{/if}{@html raw}</div>
diff --git a/test/runtime/samples/raw-anchor-next-previous-sibling/_config.js b/test/runtime/samples/raw-anchor-next-previous-sibling/_config.js
new file mode 100644
index 0000000000..c6d2b561c0
--- /dev/null
+++ b/test/runtime/samples/raw-anchor-next-previous-sibling/_config.js
@@ -0,0 +1,13 @@
+export default {
+	props: {
+		raw: '<span>foo</span>'
+	},
+
+	test({ assert, component, target }) {
+		const span = target.querySelector('span');
+		assert.equal(span.previousSibling.nodeName, 'BR');
+		assert.equal(span.nextSibling.nodeName, 'BR');
+
+		component.raw = '<span>bar</span>';
+	}
+};
diff --git a/test/runtime/samples/raw-anchor-next-previous-sibling/main.svelte b/test/runtime/samples/raw-anchor-next-previous-sibling/main.svelte
new file mode 100644
index 0000000000..963ce1bd91
--- /dev/null
+++ b/test/runtime/samples/raw-anchor-next-previous-sibling/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let raw;
+</script>
+
+before<br>{@html raw}<br>after
diff --git a/test/runtime/samples/raw-anchor-next-sibling/_config.js b/test/runtime/samples/raw-anchor-next-sibling/_config.js
new file mode 100644
index 0000000000..1982f28da5
--- /dev/null
+++ b/test/runtime/samples/raw-anchor-next-sibling/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		raw: '<span>foo</span>'
+	},
+
+	test({ assert, component, target }) {
+		const span = target.querySelector('span');
+		assert.equal(span.previousSibling.nodeName, 'BR');
+
+		component.raw = '<span>bar</span>';
+	}
+};
diff --git a/test/runtime/samples/raw-anchor-next-sibling/main.svelte b/test/runtime/samples/raw-anchor-next-sibling/main.svelte
new file mode 100644
index 0000000000..5add0fc7d3
--- /dev/null
+++ b/test/runtime/samples/raw-anchor-next-sibling/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let raw;
+	export let maybe;
+</script>
+
+before<br>{@html raw}{#if maybe}after{/if}
diff --git a/test/runtime/samples/raw-anchor-previous-sibling/_config.js b/test/runtime/samples/raw-anchor-previous-sibling/_config.js
new file mode 100644
index 0000000000..1982f28da5
--- /dev/null
+++ b/test/runtime/samples/raw-anchor-previous-sibling/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		raw: '<span>foo</span>'
+	},
+
+	test({ assert, component, target }) {
+		const span = target.querySelector('span');
+		assert.equal(span.previousSibling.nodeName, 'BR');
+
+		component.raw = '<span>bar</span>';
+	}
+};
diff --git a/test/runtime/samples/raw-anchor-previous-sibling/main.svelte b/test/runtime/samples/raw-anchor-previous-sibling/main.svelte
new file mode 100644
index 0000000000..5add0fc7d3
--- /dev/null
+++ b/test/runtime/samples/raw-anchor-previous-sibling/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let raw;
+	export let maybe;
+</script>
+
+before<br>{@html raw}{#if maybe}after{/if}
diff --git a/test/runtime/samples/raw-mustache-as-root/RawMustache.svelte b/test/runtime/samples/raw-mustache-as-root/RawMustache.svelte
new file mode 100644
index 0000000000..d94954f49b
--- /dev/null
+++ b/test/runtime/samples/raw-mustache-as-root/RawMustache.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let content;
+</script>
+
+{@html content}
\ No newline at end of file
diff --git a/test/runtime/samples/raw-mustache-as-root/_config.js b/test/runtime/samples/raw-mustache-as-root/_config.js
new file mode 100644
index 0000000000..a38c0b1c81
--- /dev/null
+++ b/test/runtime/samples/raw-mustache-as-root/_config.js
@@ -0,0 +1,33 @@
+export default {
+	html: `
+		<button>Switch</button>
+		<p>Another first line</p>
+		<p>This line should be last.</p>
+	`,
+	async test({ assert, target, window }) {
+		const btn = target.querySelector('button');
+		const clickEvent = new window.MouseEvent('click');
+
+		await btn.dispatchEvent(clickEvent);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Switch</button>
+				<p>First line</p>
+				<p>This line should be last.</p>
+			`
+		);
+
+		await btn.dispatchEvent(clickEvent);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Switch</button>
+				<p>Another first line</p>
+				<p>This line should be last.</p>
+			`
+		);
+	}
+};
diff --git a/test/runtime/samples/raw-mustache-as-root/main.svelte b/test/runtime/samples/raw-mustache-as-root/main.svelte
new file mode 100644
index 0000000000..7ccce0cd9b
--- /dev/null
+++ b/test/runtime/samples/raw-mustache-as-root/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import RawMustache from './RawMustache.svelte';
+
+	let content1 = `<p>First line</p>`;
+	let content2 = `<p>Another first line</p>`;
+
+	let show = false;
+	$: content = show ? content1 : content2;
+</script>
+
+<button on:click={() => show = !show}>
+	Switch
+</button>
+
+<RawMustache {content} />
+
+<p>This line should be last.</p>
\ No newline at end of file
diff --git a/test/runtime/samples/raw-mustache-before-element/_config.js b/test/runtime/samples/raw-mustache-before-element/_config.js
new file mode 100644
index 0000000000..e00ca11a20
--- /dev/null
+++ b/test/runtime/samples/raw-mustache-before-element/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>x<span>baz</span></p>'
+};
diff --git a/test/runtime/samples/raw-mustache-before-element/main.svelte b/test/runtime/samples/raw-mustache-before-element/main.svelte
new file mode 100644
index 0000000000..69c1d0107d
--- /dev/null
+++ b/test/runtime/samples/raw-mustache-before-element/main.svelte
@@ -0,0 +1 @@
+<p>{@html 'x'}<span>baz</span></p>
\ No newline at end of file
diff --git a/test/runtime/samples/raw-mustache-inside-head/_config.js b/test/runtime/samples/raw-mustache-inside-head/_config.js
new file mode 100644
index 0000000000..6d28a6e8c4
--- /dev/null
+++ b/test/runtime/samples/raw-mustache-inside-head/_config.js
@@ -0,0 +1,16 @@
+export default {
+	async test({ assert, target, window }) {
+		const btn = target.querySelector('button');
+		const clickEvent = new window.MouseEvent('click');
+
+		assert.equal(window.document.head.innerHTML.includes('<style>body { color: blue; }</style><style>body { color: green; }</style>'), true);
+
+		await btn.dispatchEvent(clickEvent);
+
+		assert.equal(window.document.head.innerHTML.includes('<style>body { color: red; }</style><style>body { color: green; }</style>'), true);
+
+		await btn.dispatchEvent(clickEvent);
+
+		assert.equal(window.document.head.innerHTML.includes('<style>body { color: blue; }</style><style>body { color: green; }</style>'), true);
+	}
+};
diff --git a/test/runtime/samples/raw-mustache-inside-head/main.svelte b/test/runtime/samples/raw-mustache-inside-head/main.svelte
new file mode 100644
index 0000000000..25b9fdeee9
--- /dev/null
+++ b/test/runtime/samples/raw-mustache-inside-head/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	let content1 = `<style>body { color: red; }</style>`;
+	let content2 = `<style>body { color: blue; }</style>`
+
+	let show = false;
+	$: content = show ? content1 : content2;
+</script>
+
+<button on:click={() => show = !show}>
+	Switch
+</button>
+
+<svelte:head>
+	{@html content}
+	<style>body { color: green; }</style>
+</svelte:head>
diff --git a/test/runtime/samples/raw-mustache-inside-slot/Component.svelte b/test/runtime/samples/raw-mustache-inside-slot/Component.svelte
new file mode 100644
index 0000000000..fcabccae48
--- /dev/null
+++ b/test/runtime/samples/raw-mustache-inside-slot/Component.svelte
@@ -0,0 +1,2 @@
+<slot />
+<p>This line should be last.</p>
\ No newline at end of file
diff --git a/test/runtime/samples/raw-mustache-inside-slot/_config.js b/test/runtime/samples/raw-mustache-inside-slot/_config.js
new file mode 100644
index 0000000000..a38c0b1c81
--- /dev/null
+++ b/test/runtime/samples/raw-mustache-inside-slot/_config.js
@@ -0,0 +1,33 @@
+export default {
+	html: `
+		<button>Switch</button>
+		<p>Another first line</p>
+		<p>This line should be last.</p>
+	`,
+	async test({ assert, target, window }) {
+		const btn = target.querySelector('button');
+		const clickEvent = new window.MouseEvent('click');
+
+		await btn.dispatchEvent(clickEvent);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Switch</button>
+				<p>First line</p>
+				<p>This line should be last.</p>
+			`
+		);
+
+		await btn.dispatchEvent(clickEvent);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>Switch</button>
+				<p>Another first line</p>
+				<p>This line should be last.</p>
+			`
+		);
+	}
+};
diff --git a/test/runtime/samples/raw-mustache-inside-slot/main.svelte b/test/runtime/samples/raw-mustache-inside-slot/main.svelte
new file mode 100644
index 0000000000..a022a68e95
--- /dev/null
+++ b/test/runtime/samples/raw-mustache-inside-slot/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Component from './Component.svelte';
+
+	let content1 = `<p>First line</p>`;
+	let content2 = `<p>Another first line</p>`
+
+	let show = false;
+	$: content = show ? content1 : content2;
+</script>
+
+<button on:click={() => show = !show}>
+	Switch
+</button>
+
+<Component>
+	{@html content}
+</Component>
\ No newline at end of file
diff --git a/test/runtime/samples/raw-mustaches-preserved/_config.js b/test/runtime/samples/raw-mustaches-preserved/_config.js
new file mode 100644
index 0000000000..d4d57025d2
--- /dev/null
+++ b/test/runtime/samples/raw-mustaches-preserved/_config.js
@@ -0,0 +1,17 @@
+export default {
+	skip_if_ssr: true,
+
+	props: {
+		raw: '<p>does not change</p>'
+	},
+
+	html: '<div><p>does not change</p></div>',
+
+	test({ assert, component, target }) {
+		const p = target.querySelector('p');
+
+		component.raw = '<p>does not change</p>';
+		assert.equal(target.innerHTML, '<div><p>does not change</p></div>');
+		assert.strictEqual(target.querySelector('p'), p);
+	}
+};
diff --git a/test/runtime/samples/raw-mustaches-preserved/main.svelte b/test/runtime/samples/raw-mustaches-preserved/main.svelte
new file mode 100644
index 0000000000..205abb75e8
--- /dev/null
+++ b/test/runtime/samples/raw-mustaches-preserved/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let raw;
+</script>
+
+<div>{@html raw}</div>
diff --git a/test/runtime/samples/raw-mustaches-td-tr/_config.js b/test/runtime/samples/raw-mustaches-td-tr/_config.js
new file mode 100644
index 0000000000..3b165bb65e
--- /dev/null
+++ b/test/runtime/samples/raw-mustaches-td-tr/_config.js
@@ -0,0 +1,18 @@
+export default {
+	props: {
+		raw: '<tr><td>1</td><td>2</td></tr>'
+	},
+
+	html: `
+		<table>
+			<tbody>
+				<tr>
+					<td>5</td><td>7</td>
+				</tr>
+				<tr>
+					<td>1</td><td>2</td>
+				</tr>
+			</tbody>
+		</table>
+	`
+};
diff --git a/test/runtime/samples/raw-mustaches-td-tr/main.svelte b/test/runtime/samples/raw-mustaches-td-tr/main.svelte
new file mode 100644
index 0000000000..07d7299e43
--- /dev/null
+++ b/test/runtime/samples/raw-mustaches-td-tr/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let raw;
+</script>
+
+<table>
+	<tbody>
+		<tr>
+			<td>5</td><td>7</td>
+		</tr>
+		{@html raw}
+	</tbody>
+</table>
\ No newline at end of file
diff --git a/test/runtime/samples/raw-mustaches/_config.js b/test/runtime/samples/raw-mustaches/_config.js
new file mode 100644
index 0000000000..a69b91d2d8
--- /dev/null
+++ b/test/runtime/samples/raw-mustaches/_config.js
@@ -0,0 +1,17 @@
+export default {
+
+	props: {
+		raw: '<span><em>raw html!!!\\o/</span></em>'
+	},
+
+	html: 'before<span><em>raw html!!!\\o/</span></em>after',
+
+	test({ assert, component, target }) {
+		component.raw = '';
+		assert.equal(target.innerHTML, 'beforeafter');
+		component.raw = 'how about <strong>unclosed elements?';
+		assert.equal(target.innerHTML, 'beforehow about <strong>unclosed elements?</strong>after');
+		component.$destroy();
+		assert.equal(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/raw-mustaches/main.svelte b/test/runtime/samples/raw-mustaches/main.svelte
new file mode 100644
index 0000000000..e6b2ed57df
--- /dev/null
+++ b/test/runtime/samples/raw-mustaches/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let raw;
+</script>
+
+before{@html raw}after
diff --git a/test/runtime/samples/reactive-assignment-in-assignment-rhs/_config.js b/test/runtime/samples/reactive-assignment-in-assignment-rhs/_config.js
new file mode 100644
index 0000000000..0402f34a2f
--- /dev/null
+++ b/test/runtime/samples/reactive-assignment-in-assignment-rhs/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<h1>1 1</h1>'
+};
diff --git a/test/runtime/samples/reactive-assignment-in-assignment-rhs/main.svelte b/test/runtime/samples/reactive-assignment-in-assignment-rhs/main.svelte
new file mode 100644
index 0000000000..2f83d54a56
--- /dev/null
+++ b/test/runtime/samples/reactive-assignment-in-assignment-rhs/main.svelte
@@ -0,0 +1,7 @@
+<script>
+  let foo;
+  let bar;
+  bar = (foo = 1);
+</script>
+
+<h1>{foo} {bar}</h1>
diff --git a/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store-2/_config.js b/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store-2/_config.js
new file mode 100644
index 0000000000..62f47a01c3
--- /dev/null
+++ b/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store-2/_config.js
@@ -0,0 +1,8 @@
+// destructure to store value
+export default {
+	html: '<h1>2 2 xxx 5 6 9 10 2</h1>',
+	async test({ assert, target, component }) {
+		await component.update();
+		assert.htmlEqual(target.innerHTML, '<h1>11 11 yyy 12 13 14 15 11</h1>');
+	}
+};
diff --git a/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store-2/main.svelte b/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store-2/main.svelte
new file mode 100644
index 0000000000..c1bf63d9cd
--- /dev/null
+++ b/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store-2/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	let eid = writable(1);
+	let foo;
+	const u = writable(2);
+	const v = writable(3);
+	const w = writable(4);
+	const x = writable(5);
+	const y = writable(6);
+	[$u, $v, $w] = [
+		{id: eid = writable(foo = 2), name: 'xxx'},
+		5,
+		6
+	];
+	({ a: $x, b: $y } = { a: 9, b: 10 });
+	$: z = $u.id;
+
+	export function update() {
+		[$u, $v, $w] = [
+			{id: eid = writable(foo = 11), name: 'yyy'},
+			12,
+			13
+		];
+		({ a: $x, b: $y } = { a: 14, b: 15 });
+	}
+</script>
+
+<h1>{foo} {$eid} {$u.name} {$v} {$w} {$x} {$y} {$z}</h1>
diff --git a/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store-3/_config.js b/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store-3/_config.js
new file mode 100644
index 0000000000..bc34b3893c
--- /dev/null
+++ b/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store-3/_config.js
@@ -0,0 +1,20 @@
+import { store } from './store.js';
+
+export default {
+	html: '<h1>0</h1>',
+	before_test() {
+		store.reset();
+	},
+	async test({ assert, target }) {
+		store.set(42);
+
+		await Promise.resolve();
+
+		assert.htmlEqual(target.innerHTML, '<h1>42</h1>');
+
+		assert.equal(store.numberOfTimesSubscribeCalled(), 1);
+	},
+	test_ssr({ assert }) {
+		assert.equal(store.numberOfTimesSubscribeCalled(), 1);
+	}
+};
diff --git a/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store-3/main.svelte b/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store-3/main.svelte
new file mode 100644
index 0000000000..3486dedaf1
--- /dev/null
+++ b/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store-3/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { store } from './store';
+</script>
+
+<h1>{$store}</h1>
diff --git a/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store-3/store.js b/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store-3/store.js
new file mode 100644
index 0000000000..3917a96b17
--- /dev/null
+++ b/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store-3/store.js
@@ -0,0 +1,18 @@
+import { writable } from '../../../../store';
+const _store = writable(0);
+let count = 0;
+
+export const store = {
+	..._store,
+	subscribe(fn) {
+		count++;
+		return _store.subscribe(fn);
+	},
+	reset() {
+		count = 0;
+		_store.set(0);
+	},
+	numberOfTimesSubscribeCalled() {
+		return count;
+	}
+};
diff --git a/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/_config.js b/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/_config.js
new file mode 100644
index 0000000000..d235d2a1a0
--- /dev/null
+++ b/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/_config.js
@@ -0,0 +1,8 @@
+// destructure to store
+export default {
+	html: '<h1>2 2 xxx 5 6 9 10 2</h1>',
+	async test({ assert, target, component }) {
+		await component.update();
+		assert.htmlEqual(target.innerHTML, '<h1>11 11 yyy 12 13 14 15 11</h1>');
+	}
+};
diff --git a/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/main.svelte b/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/main.svelte
new file mode 100644
index 0000000000..cd49223535
--- /dev/null
+++ b/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	let eid = writable(1);
+	let foo;
+	let u;
+	let v;
+	let w;
+	let x;
+	let y;
+	[u, v, w] = [
+		{id: eid = writable(foo = 2), name: 'xxx'},
+		5,
+		writable(6)
+	];
+	({ a: x, b: y } = { a: writable(9), b: writable(10) });
+	$: z = u.id;
+
+	export function update() {
+		[u, v, w] = [
+			{id: eid = writable(foo = 11), name: 'yyy'},
+			12,
+			writable(13)
+		];
+		({ a: x, b: y } = { a: writable(14), b: writable(15) });
+	}
+</script>
+
+<h1>{foo} {$eid} {u.name} {v} {$w} {$x} {$y} {$z}</h1>
diff --git a/test/runtime/samples/reactive-assignment-in-complex-declaration/_config.js b/test/runtime/samples/reactive-assignment-in-complex-declaration/_config.js
new file mode 100644
index 0000000000..0636620619
--- /dev/null
+++ b/test/runtime/samples/reactive-assignment-in-complex-declaration/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<h1>2 2</h1>'
+};
diff --git a/test/runtime/samples/reactive-assignment-in-complex-declaration/main.svelte b/test/runtime/samples/reactive-assignment-in-complex-declaration/main.svelte
new file mode 100644
index 0000000000..dec1a490af
--- /dev/null
+++ b/test/runtime/samples/reactive-assignment-in-complex-declaration/main.svelte
@@ -0,0 +1,9 @@
+<script>
+  let eid = 1;
+  let foo;
+  let employees = [
+    {id: eid = (foo = 2), name: 'xxx'},
+  ]
+</script>
+
+<h1>{foo} {eid}</h1>
diff --git a/test/runtime/samples/reactive-assignment-in-declaration/_config.js b/test/runtime/samples/reactive-assignment-in-declaration/_config.js
new file mode 100644
index 0000000000..0402f34a2f
--- /dev/null
+++ b/test/runtime/samples/reactive-assignment-in-declaration/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<h1>1 1</h1>'
+};
diff --git a/test/runtime/samples/reactive-assignment-in-declaration/main.svelte b/test/runtime/samples/reactive-assignment-in-declaration/main.svelte
new file mode 100644
index 0000000000..edac4427bb
--- /dev/null
+++ b/test/runtime/samples/reactive-assignment-in-declaration/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let foo;
+	let bar = (foo = 1);
+	function a() {
+		bar = (foo = 1);
+	}
+</script>
+
+<h1>{foo} {bar}</h1>
diff --git a/test/runtime/samples/reactive-assignment-in-for-loop-head/_config.js b/test/runtime/samples/reactive-assignment-in-for-loop-head/_config.js
new file mode 100644
index 0000000000..8f57423d5c
--- /dev/null
+++ b/test/runtime/samples/reactive-assignment-in-for-loop-head/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<h1>0 0</h1>'
+};
diff --git a/test/runtime/samples/reactive-assignment-in-for-loop-head/main.svelte b/test/runtime/samples/reactive-assignment-in-for-loop-head/main.svelte
new file mode 100644
index 0000000000..b007f6fe8b
--- /dev/null
+++ b/test/runtime/samples/reactive-assignment-in-for-loop-head/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	let foo1;
+	let foo2;
+	for (let bar = (foo1 = 0); bar < 5; bar += 1) {
+		foo2 = foo1;
+	}
+	function a() {
+		for (let bar = (foo1 = 0); bar < 5; bar += 1) {
+			foo2 = foo1;
+		}
+	}
+</script>
+
+<h1>{foo1} {foo2}</h1>
diff --git a/test/runtime/samples/reactive-block-break/_config.js b/test/runtime/samples/reactive-block-break/_config.js
new file mode 100644
index 0000000000..e00bb9f480
--- /dev/null
+++ b/test/runtime/samples/reactive-block-break/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<h1>1 2</h1>'
+};
diff --git a/test/runtime/samples/reactive-block-break/main.svelte b/test/runtime/samples/reactive-block-break/main.svelte
new file mode 100644
index 0000000000..5b0aa005c0
--- /dev/null
+++ b/test/runtime/samples/reactive-block-break/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	let foo = 0;
+	let bar;
+	$: {
+		bar = foo + 1;
+		if (foo) {
+			break $;
+		}
+		bar = foo + 2;
+	}
+	foo = 1;
+</script>
+
+<h1>{foo} {bar}</h1>
\ No newline at end of file
diff --git a/test/runtime/samples/reactive-compound-operator/_config.js b/test/runtime/samples/reactive-compound-operator/_config.js
new file mode 100644
index 0000000000..dd59fbbf0a
--- /dev/null
+++ b/test/runtime/samples/reactive-compound-operator/_config.js
@@ -0,0 +1,27 @@
+export default {
+	html: `
+		<button>+1</button>
+		<p>count: 0</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const click = new window.MouseEvent('click');
+		const button = target.querySelector('button');
+
+		await button.dispatchEvent(click);
+
+		assert.equal(component.x, 2);
+		assert.htmlEqual(target.innerHTML, `
+			<button>+1</button>
+			<p>count: 2</p>
+		`);
+
+		await button.dispatchEvent(click);
+
+		assert.equal(component.x, 6);
+		assert.htmlEqual(target.innerHTML, `
+			<button>+1</button>
+			<p>count: 6</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-compound-operator/main.svelte b/test/runtime/samples/reactive-compound-operator/main.svelte
new file mode 100644
index 0000000000..52654aed59
--- /dev/null
+++ b/test/runtime/samples/reactive-compound-operator/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let x = 0;
+
+	$: x *= 2;
+</script>
+
+<button on:click='{() => x += 1}'>+1</button>
+<p>count: {x}</p>
diff --git a/test/runtime/samples/reactive-function-called-reassigned/_config.js b/test/runtime/samples/reactive-function-called-reassigned/_config.js
new file mode 100644
index 0000000000..3469c285af
--- /dev/null
+++ b/test/runtime/samples/reactive-function-called-reassigned/_config.js
@@ -0,0 +1,30 @@
+let value;
+let called = 0;
+function callback(_value) {
+	called ++;
+	value = _value;
+}
+
+export default {
+	props: {
+		callback
+	},
+	before_test() {
+		called = 0;
+	},
+	async test({ assert, target, window }) {
+		assert.equal(called, 1);
+
+		const input = target.querySelector('input');
+
+		const event = new window.Event('input');
+		input.value = 'h';
+		await input.dispatchEvent(event);
+
+		assert.equal(called, 2);
+		assert.equal(value.length, 3);
+		assert.equal(value[0], 'h');
+		assert.equal(value[1], '2');
+		assert.equal(value[2], '3');
+	}
+};
diff --git a/test/runtime/samples/reactive-function-called-reassigned/main.svelte b/test/runtime/samples/reactive-function-called-reassigned/main.svelte
new file mode 100644
index 0000000000..10a3c79d14
--- /dev/null
+++ b/test/runtime/samples/reactive-function-called-reassigned/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	const refs = ['1','2','3']
+	export let callback = () => {};
+
+	$: callback(refs);
+</script>
+
+{#each refs as ref}
+	<input bind:value={ref} />
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/reactive-function-inline/_config.js b/test/runtime/samples/reactive-function-inline/_config.js
new file mode 100644
index 0000000000..45afe8929f
--- /dev/null
+++ b/test/runtime/samples/reactive-function-inline/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: '<p>0</p>',
+
+	test({ assert, component, target }) {
+		component.selected = 3;
+		assert.htmlEqual(target.innerHTML, '<p>3</p>');
+	}
+};
diff --git a/test/runtime/samples/reactive-function-inline/main.svelte b/test/runtime/samples/reactive-function-inline/main.svelte
new file mode 100644
index 0000000000..2a129c4a5d
--- /dev/null
+++ b/test/runtime/samples/reactive-function-inline/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	let list = [0, 1, 2, 3, 4];
+	export let selected = 0;
+</script>
+
+<p>{list.filter(x => x === selected)}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/reactive-function/_config.js b/test/runtime/samples/reactive-function/_config.js
new file mode 100644
index 0000000000..b3c6a65dbb
--- /dev/null
+++ b/test/runtime/samples/reactive-function/_config.js
@@ -0,0 +1,14 @@
+export default {
+	html: '<p>50</p>',
+
+	test({ assert, component, target }) {
+		component.range = [50, 100];
+		assert.htmlEqual(target.innerHTML, '<p>75</p>');
+
+		component.range = [50, 60];
+		assert.htmlEqual(target.innerHTML, '<p>55</p>');
+
+		component.x = 8;
+		assert.htmlEqual(target.innerHTML, '<p>58</p>');
+	}
+};
diff --git a/test/runtime/samples/reactive-function/main.svelte b/test/runtime/samples/reactive-function/main.svelte
new file mode 100644
index 0000000000..e6f7465b7e
--- /dev/null
+++ b/test/runtime/samples/reactive-function/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let domain = [0, 10];
+	export let range = [0, 100];
+	export let x = 5;
+
+	let scale;
+
+	$: scale = num => {
+		const t = domain[0] + (num - domain[0]) / (domain[1] - domain[0]);
+		return range[0] + t * (range[1] - range[0]);
+	};
+</script>
+
+<p>{scale(x)}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/reactive-import-statement-2/_config.js b/test/runtime/samples/reactive-import-statement-2/_config.js
new file mode 100644
index 0000000000..fc6d8f008d
--- /dev/null
+++ b/test/runtime/samples/reactive-import-statement-2/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>prop value</p>'
+};
diff --git a/test/runtime/samples/reactive-import-statement-2/data.js b/test/runtime/samples/reactive-import-statement-2/data.js
new file mode 100644
index 0000000000..56fb86982c
--- /dev/null
+++ b/test/runtime/samples/reactive-import-statement-2/data.js
@@ -0,0 +1,3 @@
+export const obj = {
+	prop: 'prop value'
+};
diff --git a/test/runtime/samples/reactive-import-statement-2/main.svelte b/test/runtime/samples/reactive-import-statement-2/main.svelte
new file mode 100644
index 0000000000..2582974b71
--- /dev/null
+++ b/test/runtime/samples/reactive-import-statement-2/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { obj } from './data.js';
+
+	$: prop = obj.prop;
+	obj.foo = 'a different prop';
+</script>
+
+<p>{prop}</p>
diff --git a/test/runtime/samples/reactive-import-statement/_config.js b/test/runtime/samples/reactive-import-statement/_config.js
new file mode 100644
index 0000000000..45a844afa0
--- /dev/null
+++ b/test/runtime/samples/reactive-import-statement/_config.js
@@ -0,0 +1,38 @@
+import * as path from 'path';
+
+export default {
+	html: `
+		import
+		<p>1 + 2 + 3 + 4 = 10</p>
+		local
+		<p>1 + 2 + 3 + 4 = 10</p>
+		<button>Add a number</button>
+	`,
+	before_test() {
+		delete require.cache[path.resolve(__dirname, 'data.js')];
+	},
+	async test({ assert, target, window }) {
+		const btn = target.querySelector('button');
+		const clickEvent = new window.MouseEvent('click');
+
+		await btn.dispatchEvent(clickEvent);
+		
+		assert.htmlEqual(target.innerHTML, `
+			import
+			<p>1 + 2 + 3 + 4 + 5 = 15</p>
+			local
+			<p>1 + 2 + 3 + 4 + 5 = 15</p>
+			<button>Add a number</button>
+		`);
+
+		await btn.dispatchEvent(clickEvent);
+		
+		assert.htmlEqual(target.innerHTML, `
+			import
+			<p>1 + 2 + 3 + 4 + 5 + 6 = 21</p>
+			local
+			<p>1 + 2 + 3 + 4 + 5 + 6 = 21</p>
+			<button>Add a number</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-import-statement/data.js b/test/runtime/samples/reactive-import-statement/data.js
new file mode 100644
index 0000000000..22f2f374ab
--- /dev/null
+++ b/test/runtime/samples/reactive-import-statement/data.js
@@ -0,0 +1 @@
+export const numbers = [1, 2, 3, 4];
diff --git a/test/runtime/samples/reactive-import-statement/main.svelte b/test/runtime/samples/reactive-import-statement/main.svelte
new file mode 100644
index 0000000000..daded0494f
--- /dev/null
+++ b/test/runtime/samples/reactive-import-statement/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import { numbers } from './data.js';
+	const local_numbers = [1, 2, 3, 4];
+
+	function addNumber() {
+		numbers[numbers.length] = numbers.length + 1;
+		local_numbers[local_numbers.length] = local_numbers.length + 1;
+	}
+
+	$: sum = numbers.reduce((t, n) => t + n, 0);
+	$: local_sum = local_numbers.reduce((t, n) => t + n, 0);
+</script>
+
+import <p>{numbers.join(' + ')} = {sum}</p>
+local <p>{local_numbers.join(' + ')} = {local_sum}</p>
+
+<button on:click={addNumber}>
+	Add a number
+</button>
\ No newline at end of file
diff --git a/test/runtime/samples/reactive-statement-module-vars/_config.js b/test/runtime/samples/reactive-statement-module-vars/_config.js
new file mode 100644
index 0000000000..63b89cd164
--- /dev/null
+++ b/test/runtime/samples/reactive-statement-module-vars/_config.js
@@ -0,0 +1,18 @@
+export default {
+	html: `
+		a: moduleA
+		b: moduleB
+		moduleA: moduleA
+		moduleB: moduleB
+	`,
+	async test({ assert, target, component }) {
+		await component.updateModuleA();
+
+		assert.htmlEqual(target.innerHTML, `
+			a: moduleA
+			b: moduleB
+			moduleA: moduleA
+			moduleB: moduleB
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-statement-module-vars/main.svelte b/test/runtime/samples/reactive-statement-module-vars/main.svelte
new file mode 100644
index 0000000000..70e0404657
--- /dev/null
+++ b/test/runtime/samples/reactive-statement-module-vars/main.svelte
@@ -0,0 +1,15 @@
+<script context="module">
+	let moduleA = 'moduleA';
+	let moduleB = 'moduleB';
+</script>
+<script>
+	export function updateModuleA() {
+		moduleA = 'something else';
+	}
+	$: a = moduleA;
+	$: b = moduleB;
+</script>
+a: {a}
+b: {b}
+moduleA: {moduleA}
+moduleB: {moduleB}
diff --git a/test/runtime/samples/reactive-update-expression/_config.js b/test/runtime/samples/reactive-update-expression/_config.js
new file mode 100644
index 0000000000..111460f7dd
--- /dev/null
+++ b/test/runtime/samples/reactive-update-expression/_config.js
@@ -0,0 +1,29 @@
+export default {
+	html: `
+	<button>+1</button>
+	<p>count: 1</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const click = new window.MouseEvent('click');
+		const button = target.querySelector('button');
+
+		assert.equal(component.x, 1);
+
+		await button.dispatchEvent(click);
+
+		assert.equal(component.x, 3);
+		assert.htmlEqual(target.innerHTML, `
+			<button>+1</button>
+			<p>count: 3</p>
+		`);
+
+		await button.dispatchEvent(click);
+
+		assert.equal(component.x, 5);
+		assert.htmlEqual(target.innerHTML, `
+			<button>+1</button>
+			<p>count: 5</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-update-expression/main.svelte b/test/runtime/samples/reactive-update-expression/main.svelte
new file mode 100644
index 0000000000..0e0b45ddd6
--- /dev/null
+++ b/test/runtime/samples/reactive-update-expression/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let x = 0;
+
+  $: x++;
+
+  function onClick() {
+    x += 1;
+  }
+</script>
+
+<button on:click='{() => x += 1}'>+1</button>
+<p>count: {x}</p>
diff --git a/test/runtime/samples/reactive-value-assign-property/_config.js b/test/runtime/samples/reactive-value-assign-property/_config.js
new file mode 100644
index 0000000000..b6d8bf51be
--- /dev/null
+++ b/test/runtime/samples/reactive-value-assign-property/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<h1>Hello world!</h1>
+	`
+};
diff --git a/test/runtime/samples/reactive-value-assign-property/main.svelte b/test/runtime/samples/reactive-value-assign-property/main.svelte
new file mode 100644
index 0000000000..58e0fdb03c
--- /dev/null
+++ b/test/runtime/samples/reactive-value-assign-property/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	$: user = {};
+	$: user.name = 'world';
+</script>
+
+<h1>Hello {user.name}!</h1>
\ No newline at end of file
diff --git a/test/runtime/samples/reactive-value-coerce-precedence/_config.js b/test/runtime/samples/reactive-value-coerce-precedence/_config.js
new file mode 100644
index 0000000000..4fe47e26fa
--- /dev/null
+++ b/test/runtime/samples/reactive-value-coerce-precedence/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<h1>true</h1>
+	`
+};
diff --git a/test/runtime/samples/reactive-value-coerce-precedence/main.svelte b/test/runtime/samples/reactive-value-coerce-precedence/main.svelte
new file mode 100644
index 0000000000..fc73456e9e
--- /dev/null
+++ b/test/runtime/samples/reactive-value-coerce-precedence/main.svelte
@@ -0,0 +1 @@
+<h1>{1 === 1}</h1>
\ No newline at end of file
diff --git a/test/runtime/samples/reactive-value-coerce/_config.js b/test/runtime/samples/reactive-value-coerce/_config.js
new file mode 100644
index 0000000000..9cf9d7d8ee
--- /dev/null
+++ b/test/runtime/samples/reactive-value-coerce/_config.js
@@ -0,0 +1,10 @@
+export default {
+	html: '1-1',
+
+	test: ({ assert, component, target }) => {
+		component.a.b[0] = 2;
+		component.a = component.a; // eslint-disable-line no-self-assign
+
+		assert.htmlEqual(target.innerHTML, '2-2');
+	}
+};
diff --git a/test/runtime/samples/reactive-value-coerce/main.svelte b/test/runtime/samples/reactive-value-coerce/main.svelte
new file mode 100644
index 0000000000..b7b67e91a6
--- /dev/null
+++ b/test/runtime/samples/reactive-value-coerce/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let a = { b: [1] };
+
+	const identity = x => x;
+</script>
+
+{a.b}-{identity(a.b)}
diff --git a/test/runtime/samples/reactive-value-dependency-not-referenced/_config.js b/test/runtime/samples/reactive-value-dependency-not-referenced/_config.js
new file mode 100644
index 0000000000..893b183d78
--- /dev/null
+++ b/test/runtime/samples/reactive-value-dependency-not-referenced/_config.js
@@ -0,0 +1,26 @@
+export default {
+	html: `
+		<p>42</p>
+		<p>42</p>
+	`,
+
+	async test({ assert, component, target }) {
+		await component.updateStore(undefined);
+		assert.htmlEqual(target.innerHTML, '<p>undefined</p><p>42</p>');
+
+		await component.updateStore(33);
+		assert.htmlEqual(target.innerHTML, '<p>33</p><p>42</p>');
+
+		await component.updateStore(undefined);
+		assert.htmlEqual(target.innerHTML, '<p>undefined</p><p>42</p>');
+
+		await component.updateVar(undefined);
+		assert.htmlEqual(target.innerHTML, '<p>undefined</p><p>undefined</p>');
+
+		await component.updateVar(33);
+		assert.htmlEqual(target.innerHTML, '<p>undefined</p><p>33</p>');
+
+		await component.updateVar(undefined);
+		assert.htmlEqual(target.innerHTML, '<p>undefined</p><p>undefined</p>');
+	}
+};
diff --git a/test/runtime/samples/reactive-value-dependency-not-referenced/main.svelte b/test/runtime/samples/reactive-value-dependency-not-referenced/main.svelte
new file mode 100644
index 0000000000..57e6ba84f3
--- /dev/null
+++ b/test/runtime/samples/reactive-value-dependency-not-referenced/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import { writable } from 'svelte/store';
+	let store = writable(42);
+	let variable = 42;
+	let value;
+	let value2;
+	$: value = $store;
+	$: value2 = variable;
+
+	export function updateStore(value) {
+		store.set(value);
+	}
+	export function updateVar(value) {
+		variable = value;
+	}
+</script>
+
+<p>{ value }</p>
+<p>{ value2 }</p>
\ No newline at end of file
diff --git a/test/runtime/samples/reactive-value-function-hoist-b/_config.js b/test/runtime/samples/reactive-value-function-hoist-b/_config.js
new file mode 100644
index 0000000000..04c4fd3f11
--- /dev/null
+++ b/test/runtime/samples/reactive-value-function-hoist-b/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: `
+		<button>Click me</button>
+	`,
+
+	async test({ assert, target, window }) {
+		const event = new window.MouseEvent('click');
+		const button = target.querySelector('button');
+
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>A,B,C</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-value-function-hoist-b/main.svelte b/test/runtime/samples/reactive-value-function-hoist-b/main.svelte
new file mode 100644
index 0000000000..2e9ee6eefe
--- /dev/null
+++ b/test/runtime/samples/reactive-value-function-hoist-b/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let array = ['a', 'b', 'c'];
+	$: uppercase = array.map(str => str.toUpperCase());
+
+	function onClick() {
+		this.innerHTML = uppercase.join(',');
+	}
+</script>
+
+<button on:click={onClick}>Click me</button>
diff --git a/test/runtime/samples/reactive-value-function-hoist/_config.js b/test/runtime/samples/reactive-value-function-hoist/_config.js
new file mode 100644
index 0000000000..6198a57ef6
--- /dev/null
+++ b/test/runtime/samples/reactive-value-function-hoist/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: `
+		<button>Click me</button>
+	`,
+
+	async test({ assert, target, window }) {
+		const event = new window.MouseEvent('click');
+		const button = target.querySelector('button');
+
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>4</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-value-function-hoist/main.svelte b/test/runtime/samples/reactive-value-function-hoist/main.svelte
new file mode 100644
index 0000000000..0f2dadb561
--- /dev/null
+++ b/test/runtime/samples/reactive-value-function-hoist/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	let num = 2;
+	$: square = num * num;
+
+	function onClick() {
+		this.innerHTML = square;
+	}
+</script>
+
+<button on:click={onClick}>Click me</button>
diff --git a/test/runtime/samples/reactive-value-function/_config.js b/test/runtime/samples/reactive-value-function/_config.js
new file mode 100644
index 0000000000..2a84953576
--- /dev/null
+++ b/test/runtime/samples/reactive-value-function/_config.js
@@ -0,0 +1,9 @@
+export default {
+	html: '1-2',
+
+	async test({ assert, component, target }) {
+		await component.update();
+
+		assert.htmlEqual(target.innerHTML, '3-4');
+	}
+};
diff --git a/test/runtime/samples/reactive-value-function/main.svelte b/test/runtime/samples/reactive-value-function/main.svelte
new file mode 100644
index 0000000000..5b132d638e
--- /dev/null
+++ b/test/runtime/samples/reactive-value-function/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	let foo = () => 1;
+
+	function bar() {
+		return 2;
+	}
+
+	export function update() {
+		foo = () => 3;
+		bar = () => 4;
+	}
+</script>
+
+{foo()}-{bar()}
diff --git a/test/runtime/samples/reactive-value-mutate-const/_config.js b/test/runtime/samples/reactive-value-mutate-const/_config.js
new file mode 100644
index 0000000000..da0a19dd28
--- /dev/null
+++ b/test/runtime/samples/reactive-value-mutate-const/_config.js
@@ -0,0 +1,17 @@
+export default {
+	html: `
+		<button>Mutate a</button>
+		<div>{}</div>
+	`,
+
+	async test({ assert, target }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+		assert.htmlEqual(target.innerHTML, `
+			<button>Mutate a</button>
+			<div>{"foo":42}</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-value-mutate-const/main.svelte b/test/runtime/samples/reactive-value-mutate-const/main.svelte
new file mode 100644
index 0000000000..403544e5f1
--- /dev/null
+++ b/test/runtime/samples/reactive-value-mutate-const/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	const a = {};
+	const b = {};
+	$: b.foo = a.foo;
+</script>
+
+<button on:click={() => a.foo = 42}>Mutate a</button>
+<div>{JSON.stringify(b)}</div>
+
diff --git a/test/runtime/samples/reactive-value-mutate/_config.js b/test/runtime/samples/reactive-value-mutate/_config.js
new file mode 100644
index 0000000000..66979f1e31
--- /dev/null
+++ b/test/runtime/samples/reactive-value-mutate/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '{"bar":42}'
+};
diff --git a/test/runtime/samples/reactive-value-mutate/main.svelte b/test/runtime/samples/reactive-value-mutate/main.svelte
new file mode 100644
index 0000000000..59fc5b7eb5
--- /dev/null
+++ b/test/runtime/samples/reactive-value-mutate/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let foo = {};
+	let bar = 42;
+	$: foo.bar = bar;
+</script>
+
+{JSON.stringify(foo)}
diff --git a/test/runtime/samples/reactive-values-deconflicted/_config.js b/test/runtime/samples/reactive-values-deconflicted/_config.js
new file mode 100644
index 0000000000..c9ab700bd8
--- /dev/null
+++ b/test/runtime/samples/reactive-values-deconflicted/_config.js
@@ -0,0 +1,10 @@
+export default {
+	html: '<span>waiting</span>',
+
+	test({ assert, component, target }) {
+		component.x = 'ready';
+		assert.htmlEqual(target.innerHTML, `
+			<span>ready</span>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-values-deconflicted/main.svelte b/test/runtime/samples/reactive-values-deconflicted/main.svelte
new file mode 100644
index 0000000000..b7a6a6f85c
--- /dev/null
+++ b/test/runtime/samples/reactive-values-deconflicted/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let x = 'waiting';
+
+	let state;
+	$: state = x;
+</script>
+
+<span>{state}</span>
\ No newline at end of file
diff --git a/test/runtime/samples/reactive-values-exported/_config.js b/test/runtime/samples/reactive-values-exported/_config.js
new file mode 100644
index 0000000000..9f782835f3
--- /dev/null
+++ b/test/runtime/samples/reactive-values-exported/_config.js
@@ -0,0 +1,18 @@
+export default {
+	props: {
+		x: 1
+	},
+
+	html: `
+		<p>1 1 1</p>
+	`,
+
+	test({ assert, component }) {
+		assert.equal(component.y, 1);
+		assert.equal(component.z, 1);
+
+		component.x = 2;
+		assert.equal(component.y, 2);
+		assert.equal(component.z, 2);
+	}
+};
diff --git a/test/runtime/samples/reactive-values-exported/main.svelte b/test/runtime/samples/reactive-values-exported/main.svelte
new file mode 100644
index 0000000000..169fb7fcd8
--- /dev/null
+++ b/test/runtime/samples/reactive-values-exported/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let x, y
+
+	$: y = x;
+
+	export let z;
+	$: z = x;
+</script>
+
+<p>{x} {y} {z}</p>
diff --git a/test/runtime/samples/reactive-values-fixed/_config.js b/test/runtime/samples/reactive-values-fixed/_config.js
new file mode 100644
index 0000000000..9f25b3e24e
--- /dev/null
+++ b/test/runtime/samples/reactive-values-fixed/_config.js
@@ -0,0 +1,11 @@
+export default {
+	html: `
+		<p>4</p>
+	`,
+
+	test({ assert, target }) {
+		assert.htmlEqual(target.innerHTML, `
+			<p>4</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-values-fixed/main.svelte b/test/runtime/samples/reactive-values-fixed/main.svelte
new file mode 100644
index 0000000000..53445e03ba
--- /dev/null
+++ b/test/runtime/samples/reactive-values-fixed/main.svelte
@@ -0,0 +1,6 @@
+<script>
+  const num = 2;
+  $: squared = num * num;
+</script>
+
+<p>{squared}</p>
diff --git a/test/runtime/samples/reactive-values-function-dependency/_config.js b/test/runtime/samples/reactive-values-function-dependency/_config.js
new file mode 100644
index 0000000000..b9ece1f685
--- /dev/null
+++ b/test/runtime/samples/reactive-values-function-dependency/_config.js
@@ -0,0 +1,9 @@
+export default {
+	html: '<p>2</p>',
+
+	test({ assert, component, target }) {
+		component.y = 2;
+		assert.equal(component.x, 4);
+		assert.equal(target.innerHTML, '<p>4</p>');
+	}
+};
diff --git a/test/runtime/samples/reactive-values-function-dependency/main.svelte b/test/runtime/samples/reactive-values-function-dependency/main.svelte
new file mode 100644
index 0000000000..3a8dc83263
--- /dev/null
+++ b/test/runtime/samples/reactive-values-function-dependency/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	let _x;
+
+	function getX () {
+		return _x;
+	}
+
+	export let y = 1;
+
+	let xGetter;
+	export let x;
+
+	$: {
+		_x = y * 2;
+		xGetter = getX;
+	}
+
+	$: x = xGetter();
+</script>
+
+<p>{x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/reactive-values-implicit-destructured/_config.js b/test/runtime/samples/reactive-values-implicit-destructured/_config.js
new file mode 100644
index 0000000000..80e4b8ea44
--- /dev/null
+++ b/test/runtime/samples/reactive-values-implicit-destructured/_config.js
@@ -0,0 +1,25 @@
+export default {
+	props: {
+		coords: [0, 0],
+		numbers: { answer: 42 }
+	},
+
+	html: `
+		<p>0,0</p>
+		<p>42</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.coords = [1, 2];
+		assert.htmlEqual(target.innerHTML, `
+			<p>1,2</p>
+			<p>42</p>
+		`);
+
+		component.numbers = { answer: 43 };
+		assert.htmlEqual(target.innerHTML, `
+			<p>1,2</p>
+			<p>43</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-values-implicit-destructured/main.svelte b/test/runtime/samples/reactive-values-implicit-destructured/main.svelte
new file mode 100644
index 0000000000..abf5f01471
--- /dev/null
+++ b/test/runtime/samples/reactive-values-implicit-destructured/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let coords;
+	export let numbers;
+
+	$: [x, y] = coords;
+	$: ({ answer } = numbers);
+</script>
+
+<p>{x},{y}</p>
+<p>{answer}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/reactive-values-implicit-self-dependency/_config.js b/test/runtime/samples/reactive-values-implicit-self-dependency/_config.js
new file mode 100644
index 0000000000..f215de098e
--- /dev/null
+++ b/test/runtime/samples/reactive-values-implicit-self-dependency/_config.js
@@ -0,0 +1,19 @@
+export default {
+	html: `
+		<p>1 / 1</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.num = 3;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>3 / 3</p>
+		`);
+
+		component.num = 2;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>2 / 3</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-values-implicit-self-dependency/main.svelte b/test/runtime/samples/reactive-values-implicit-self-dependency/main.svelte
new file mode 100644
index 0000000000..378b71d326
--- /dev/null
+++ b/test/runtime/samples/reactive-values-implicit-self-dependency/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let num = 1;
+
+	$: max = Math.max(num, max || 0);
+</script>
+
+<p>{num} / {max}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/reactive-values-implicit/_config.js b/test/runtime/samples/reactive-values-implicit/_config.js
new file mode 100644
index 0000000000..fae6f9e701
--- /dev/null
+++ b/test/runtime/samples/reactive-values-implicit/_config.js
@@ -0,0 +1,14 @@
+export default {
+	html: `
+		<p>1 + 2 = 3</p>
+		<p>3 * 3 = 9</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.a = 3;
+		assert.htmlEqual(target.innerHTML, `
+			<p>3 + 2 = 5</p>
+			<p>5 * 5 = 25</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-values-implicit/main.svelte b/test/runtime/samples/reactive-values-implicit/main.svelte
new file mode 100644
index 0000000000..745ba643e1
--- /dev/null
+++ b/test/runtime/samples/reactive-values-implicit/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let a = 1;
+	export let b = 2;
+
+	$: c = a + b;
+	$: cSquared = c * c;
+</script>
+
+<p>{a} + {b} = {c}</p>
+<p>{c} * {c} = {cSquared}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/reactive-values-no-dependencies/_config.js b/test/runtime/samples/reactive-values-no-dependencies/_config.js
new file mode 100644
index 0000000000..71a63c9189
--- /dev/null
+++ b/test/runtime/samples/reactive-values-no-dependencies/_config.js
@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<p>10 - 90</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.width = 50;
+		assert.htmlEqual(target.innerHTML, `
+			<p>10 - 40</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-values-no-dependencies/main.svelte b/test/runtime/samples/reactive-values-no-dependencies/main.svelte
new file mode 100644
index 0000000000..bf54b8e241
--- /dev/null
+++ b/test/runtime/samples/reactive-values-no-dependencies/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let width = 100;
+
+	const padding = 10;
+
+	$: x1 = padding;
+	$: x2 = width - padding;
+</script>
+
+<p>{x1} - {x2}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/reactive-values-no-implicit-member-expression/_config.js b/test/runtime/samples/reactive-values-no-implicit-member-expression/_config.js
new file mode 100644
index 0000000000..05a8159589
--- /dev/null
+++ b/test/runtime/samples/reactive-values-no-implicit-member-expression/_config.js
@@ -0,0 +1,5 @@
+export default {
+	test({ assert, window }) {
+		assert.equal(window.document.title, 'foo');
+	}
+};
diff --git a/test/runtime/samples/reactive-values-no-implicit-member-expression/main.svelte b/test/runtime/samples/reactive-values-no-implicit-member-expression/main.svelte
new file mode 100644
index 0000000000..a631d4d9f8
--- /dev/null
+++ b/test/runtime/samples/reactive-values-no-implicit-member-expression/main.svelte
@@ -0,0 +1,3 @@
+<script>
+	$: document.title = 'foo';
+</script>
diff --git a/test/runtime/samples/reactive-values-non-cyclical-declaration-order-independent/_config.js b/test/runtime/samples/reactive-values-non-cyclical-declaration-order-independent/_config.js
new file mode 100644
index 0000000000..989e6d458c
--- /dev/null
+++ b/test/runtime/samples/reactive-values-non-cyclical-declaration-order-independent/_config.js
@@ -0,0 +1,11 @@
+export default {
+	html: `
+		<p>2+2=4</p>
+	`,
+
+	test({ assert, target }) {
+		assert.htmlEqual(target.innerHTML, `
+			<p>2+2=4</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-values-non-cyclical-declaration-order-independent/main.svelte b/test/runtime/samples/reactive-values-non-cyclical-declaration-order-independent/main.svelte
new file mode 100644
index 0000000000..766ca7aa86
--- /dev/null
+++ b/test/runtime/samples/reactive-values-non-cyclical-declaration-order-independent/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	$: c = a + b;
+	$: a = 2;
+	$: b = a;
+</script>
+
+<p>{a}+{b}={c}</p>
diff --git a/test/runtime/samples/reactive-values-non-cyclical/_config.js b/test/runtime/samples/reactive-values-non-cyclical/_config.js
new file mode 100644
index 0000000000..e134a669ee
--- /dev/null
+++ b/test/runtime/samples/reactive-values-non-cyclical/_config.js
@@ -0,0 +1,17 @@
+export default {
+	props: {
+		x: 42
+	},
+
+	html: `
+		<p>42 42</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.x = 43;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>43 43</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-values-non-cyclical/main.svelte b/test/runtime/samples/reactive-values-non-cyclical/main.svelte
new file mode 100644
index 0000000000..061a38857a
--- /dev/null
+++ b/test/runtime/samples/reactive-values-non-cyclical/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let x;
+
+	let a;
+	let b;
+
+	$: a = b;
+	$: b = (function(a) {
+		return a;
+	}(x));
+</script>
+
+<p>{a} {b}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/reactive-values-overwrite/_config.js b/test/runtime/samples/reactive-values-overwrite/_config.js
new file mode 100644
index 0000000000..644a49ec0d
--- /dev/null
+++ b/test/runtime/samples/reactive-values-overwrite/_config.js
@@ -0,0 +1,21 @@
+export default {
+	html: `
+		<p>doubled: 2</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.a = 2;
+
+		assert.equal(component.doubled, 4);
+		assert.htmlEqual(target.innerHTML, `
+			<p>doubled: 4</p>
+		`);
+
+		component.doubled = 3;
+
+		assert.equal(component.doubled, 3);
+		assert.htmlEqual(target.innerHTML, `
+			<p>doubled: 3</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-values-overwrite/main.svelte b/test/runtime/samples/reactive-values-overwrite/main.svelte
new file mode 100644
index 0000000000..bb49c3ad94
--- /dev/null
+++ b/test/runtime/samples/reactive-values-overwrite/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let a = 1;
+	export let doubled;
+
+	$: doubled = a * 2;
+</script>
+
+<p>doubled: {doubled}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/reactive-values-second-order/_config.js b/test/runtime/samples/reactive-values-second-order/_config.js
new file mode 100644
index 0000000000..c70fb0641c
--- /dev/null
+++ b/test/runtime/samples/reactive-values-second-order/_config.js
@@ -0,0 +1,8 @@
+export default {
+	test({ assert, component }) {
+		assert.equal(component.qux, 2);
+
+		component.foo = 2;
+		assert.equal(component.qux, 4);
+	}
+};
diff --git a/test/runtime/samples/reactive-values-second-order/main.svelte b/test/runtime/samples/reactive-values-second-order/main.svelte
new file mode 100644
index 0000000000..1d0e840c08
--- /dev/null
+++ b/test/runtime/samples/reactive-values-second-order/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let foo = 1, bar, baz, qux;
+
+	$: {
+		bar = foo;
+		baz = foo;
+	}
+
+	$: {
+		qux = bar + baz;
+	}
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/reactive-values-self-dependency-b/_config.js b/test/runtime/samples/reactive-values-self-dependency-b/_config.js
new file mode 100644
index 0000000000..9b2b5a2dd6
--- /dev/null
+++ b/test/runtime/samples/reactive-values-self-dependency-b/_config.js
@@ -0,0 +1,19 @@
+export default {
+	html: `
+		<p>count: 0</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.count = 5;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>count: 5</p>
+		`);
+
+		component.count = 50;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>count: 9</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-values-self-dependency-b/main.svelte b/test/runtime/samples/reactive-values-self-dependency-b/main.svelte
new file mode 100644
index 0000000000..c429097c09
--- /dev/null
+++ b/test/runtime/samples/reactive-values-self-dependency-b/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let count = 0;
+
+	$: if (count >= 10) {
+		count = 9;
+	}
+</script>
+
+<p>count: {count}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/reactive-values-self-dependency/_config.js b/test/runtime/samples/reactive-values-self-dependency/_config.js
new file mode 100644
index 0000000000..5a3d1978fb
--- /dev/null
+++ b/test/runtime/samples/reactive-values-self-dependency/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: `
+		<p>1 + 2 = 3</p>
+		<p>Times calculated: 1</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.a = 3;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>3 + 2 = 5</p>
+			<p>Times calculated: 2</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-values-self-dependency/main.svelte b/test/runtime/samples/reactive-values-self-dependency/main.svelte
new file mode 100644
index 0000000000..938a1ddd74
--- /dev/null
+++ b/test/runtime/samples/reactive-values-self-dependency/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let a = 1;
+	export let b = 2;
+	let c;
+
+	let count = 0;
+
+	$: {
+		c = a + b;
+		count = count + 1;
+	}
+</script>
+
+<p>{a} + {b} = {c}</p>
+<p>Times calculated: {count}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/reactive-values-store-destructured-undefined/_config.js b/test/runtime/samples/reactive-values-store-destructured-undefined/_config.js
new file mode 100644
index 0000000000..5e3f15f5dc
--- /dev/null
+++ b/test/runtime/samples/reactive-values-store-destructured-undefined/_config.js
@@ -0,0 +1,6 @@
+export default {
+	html: `
+		<p>undefined</p>
+		<p>undefined</p>
+	`
+};
diff --git a/test/runtime/samples/reactive-values-store-destructured-undefined/main.svelte b/test/runtime/samples/reactive-values-store-destructured-undefined/main.svelte
new file mode 100644
index 0000000000..152e0e3e2e
--- /dev/null
+++ b/test/runtime/samples/reactive-values-store-destructured-undefined/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { writable } from 'svelte/store';
+	const store = writable([]);
+	$: ({ foo1 } = $store);
+	$: [foo2] = $store;
+</script>
+
+<p>{foo1}</p>
+<p>{foo2}</p>
diff --git a/test/runtime/samples/reactive-values-subscript-assignment/_config.js b/test/runtime/samples/reactive-values-subscript-assignment/_config.js
new file mode 100644
index 0000000000..e29fe2c676
--- /dev/null
+++ b/test/runtime/samples/reactive-values-subscript-assignment/_config.js
@@ -0,0 +1,11 @@
+export default {
+	test({ assert, component }) {
+		assert.deepEqual(component.foo, {});
+		component.bar = 'hello';
+		assert.deepEqual(component.foo, { hello: true });
+		component.bar = 'world';
+		assert.deepEqual(component.foo, { hello: true, world: true });
+		component.bar = false;
+		assert.deepEqual(component.foo, { hello: true, world: true });
+	}
+};
diff --git a/test/runtime/samples/reactive-values-subscript-assignment/main.svelte b/test/runtime/samples/reactive-values-subscript-assignment/main.svelte
new file mode 100644
index 0000000000..9753032618
--- /dev/null
+++ b/test/runtime/samples/reactive-values-subscript-assignment/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo = {};
+	export let bar;
+	$: if (bar) {
+		foo[bar] = true;
+	}
+</script>
diff --git a/test/runtime/samples/reactive-values-uninitialised/_config.js b/test/runtime/samples/reactive-values-uninitialised/_config.js
new file mode 100644
index 0000000000..ef72d70652
--- /dev/null
+++ b/test/runtime/samples/reactive-values-uninitialised/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>aca</p>'
+};
diff --git a/test/runtime/samples/reactive-values-uninitialised/main.svelte b/test/runtime/samples/reactive-values-uninitialised/main.svelte
new file mode 100644
index 0000000000..2cacc411d2
--- /dev/null
+++ b/test/runtime/samples/reactive-values-uninitialised/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let a = 'a';
+	let b;
+	$: c = a;
+
+	function foo() {
+		b = c === 'a' ? 'b' : 'c';
+	}
+	foo();
+</script>
+
+<p>{a}{b}{c}</p>
diff --git a/test/runtime/samples/reactive-values/_config.js b/test/runtime/samples/reactive-values/_config.js
new file mode 100644
index 0000000000..345166046a
--- /dev/null
+++ b/test/runtime/samples/reactive-values/_config.js
@@ -0,0 +1,16 @@
+export default {
+	html: `
+		<p>1 + 2 = 3</p>
+		<p>3 * 3 = 9</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.a = 3;
+		assert.equal(component.c, 5);
+		assert.equal(component.cSquared, 25);
+		assert.htmlEqual(target.innerHTML, `
+			<p>3 + 2 = 5</p>
+			<p>5 * 5 = 25</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/reactive-values/main.svelte b/test/runtime/samples/reactive-values/main.svelte
new file mode 100644
index 0000000000..61d2d20045
--- /dev/null
+++ b/test/runtime/samples/reactive-values/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let a = 1;
+	export let b = 2;
+	export let c;
+	export let cSquared;
+
+	$: c = a + b;
+	$: cSquared = c * c;
+</script>
+
+<p>{a} + {b} = {c}</p>
+<p>{c} * {c} = {cSquared}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/renamed-instance-exports/_config.js b/test/runtime/samples/renamed-instance-exports/_config.js
new file mode 100644
index 0000000000..965df3b4f3
--- /dev/null
+++ b/test/runtime/samples/renamed-instance-exports/_config.js
@@ -0,0 +1,10 @@
+export default {
+	test({ assert, component }) {
+		assert.equal(component.bar1, 42);
+		assert.equal(component.bar2, 42);
+		component.bar1 = 100;
+		component.bar2 = 100;
+		assert.equal(component.bar1, 42);
+		assert.equal(component.bar2, 100);
+	}
+};
diff --git a/test/runtime/samples/renamed-instance-exports/main.svelte b/test/runtime/samples/renamed-instance-exports/main.svelte
new file mode 100644
index 0000000000..7c991f56c4
--- /dev/null
+++ b/test/runtime/samples/renamed-instance-exports/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	const foo1 = 42;
+	let foo2 = 42;
+	export { foo1 as bar1, foo2 as bar2 };
+</script>
diff --git a/test/runtime/samples/script-style-non-top-level/_config.js b/test/runtime/samples/script-style-non-top-level/_config.js
new file mode 100644
index 0000000000..22186b345d
--- /dev/null
+++ b/test/runtime/samples/script-style-non-top-level/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: `
+		<div>
+			<style>div { color: red; }</style>
+			<script>alert(\`<>\`);</script>
+		</div>
+	`
+};
diff --git a/test/runtime/samples/script-style-non-top-level/main.svelte b/test/runtime/samples/script-style-non-top-level/main.svelte
new file mode 100644
index 0000000000..73b0dfcf38
--- /dev/null
+++ b/test/runtime/samples/script-style-non-top-level/main.svelte
@@ -0,0 +1,4 @@
+<div>
+	<style>div { color: red; }</style>
+	<script>alert(`<>`);</script>
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/select-bind-array/_config.js b/test/runtime/samples/select-bind-array/_config.js
new file mode 100644
index 0000000000..317196e8c3
--- /dev/null
+++ b/test/runtime/samples/select-bind-array/_config.js
@@ -0,0 +1,22 @@
+const items = [ { id: 'a' }, { id: 'b' } ];
+
+export default {
+	skip_if_ssr: true,
+
+	props: {
+		foo: 'b',
+		items
+	},
+
+	test({ assert, component, target }) {
+		const options = target.querySelectorAll( 'option' );
+
+		assert.equal( options[0].selected, false );
+		assert.equal( options[1].selected, true );
+
+		component.foo = items[0].id;
+
+		assert.equal( options[0].selected, true );
+		assert.equal( options[1].selected, false );
+	}
+};
diff --git a/test/runtime/samples/select-bind-array/main.svelte b/test/runtime/samples/select-bind-array/main.svelte
new file mode 100644
index 0000000000..4f8a3dda02
--- /dev/null
+++ b/test/runtime/samples/select-bind-array/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let foo;
+	export let items;
+</script>
+
+<select bind:value={foo}>
+	{#each items as item}
+		<option value='{item.id}'>{item.id}</option>
+	{/each}
+</select>
diff --git a/test/runtime/samples/select-bind-in-array/_config.js b/test/runtime/samples/select-bind-in-array/_config.js
new file mode 100644
index 0000000000..79c5641324
--- /dev/null
+++ b/test/runtime/samples/select-bind-in-array/_config.js
@@ -0,0 +1,16 @@
+const items = [ { id: 'a' }, { id: 'b' } ];
+
+export default {
+	skip_if_ssr: true,
+
+	props: {
+		items
+	},
+
+	test({ assert, component }) {
+		const items = component.items;
+
+		assert.equal( items[0].id, 'a' );
+		assert.equal( items[1].id, 'b' );
+	}
+};
diff --git a/test/runtime/samples/select-bind-in-array/main.svelte b/test/runtime/samples/select-bind-in-array/main.svelte
new file mode 100644
index 0000000000..29a67b0a8b
--- /dev/null
+++ b/test/runtime/samples/select-bind-in-array/main.svelte
@@ -0,0 +1,10 @@
+<script>
+  export let items;
+</script>
+
+{#each items as item}
+  <select bind:value={item.id}>
+    <option value='a'>a</option>
+    <option value='b'>b</option>
+  </select>
+{/each}
diff --git a/test/runtime/samples/select-change-handler/_config.js b/test/runtime/samples/select-change-handler/_config.js
new file mode 100644
index 0000000000..9620ca5aba
--- /dev/null
+++ b/test/runtime/samples/select-change-handler/_config.js
@@ -0,0 +1,20 @@
+export default {
+	props: {
+		options: [ { id: 'a' }, { id: 'b' }, { id: 'c' } ],
+		selected: 'b'
+	},
+
+	test({ assert, component, target, window }) {
+		const select = target.querySelector('select');
+		assert.equal(select.value, 'b');
+
+		const event = new window.Event('change');
+
+		select.value = 'c';
+		select.dispatchEvent(event);
+
+		assert.equal(select.value, 'c');
+		assert.equal(component.lastChangedTo, 'c');
+		assert.equal(component.selected, 'c');
+	}
+};
diff --git a/test/runtime/samples/select-change-handler/main.svelte b/test/runtime/samples/select-change-handler/main.svelte
new file mode 100644
index 0000000000..436752176a
--- /dev/null
+++ b/test/runtime/samples/select-change-handler/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let selected;
+	export let options;
+	export let lastChangedTo;
+
+	export function updateLastChangedTo(result) {
+		lastChangedTo = result;
+	}
+</script>
+
+<select bind:value={selected} on:change="{() => updateLastChangedTo(selected)}">
+	{#each options as option}
+		<option value="{option.id}">{option.id}</option>
+	{/each}
+</select>
diff --git a/test/runtime/samples/select-no-whitespace/_config.js b/test/runtime/samples/select-no-whitespace/_config.js
new file mode 100644
index 0000000000..b00b800033
--- /dev/null
+++ b/test/runtime/samples/select-no-whitespace/_config.js
@@ -0,0 +1,6 @@
+export default {
+	test({ assert, target }) {
+		const select = target.querySelector( 'select' );
+		assert.equal( select.childNodes.length, 3 );
+	}
+};
diff --git a/test/runtime/samples/select-no-whitespace/main.svelte b/test/runtime/samples/select-no-whitespace/main.svelte
new file mode 100644
index 0000000000..1a91345534
--- /dev/null
+++ b/test/runtime/samples/select-no-whitespace/main.svelte
@@ -0,0 +1,5 @@
+<select>
+	<option>a</option>
+	<option>b</option>
+	<option>c</option>
+</select>
\ No newline at end of file
diff --git a/test/runtime/samples/select-one-way-bind-object/_config.js b/test/runtime/samples/select-one-way-bind-object/_config.js
new file mode 100644
index 0000000000..bc6ab286b3
--- /dev/null
+++ b/test/runtime/samples/select-one-way-bind-object/_config.js
@@ -0,0 +1,22 @@
+const items = [ {}, {} ];
+
+export default {
+	skip_if_ssr: true,
+
+	props: {
+		foo: items[0],
+		items
+	},
+
+	test({ assert, component, target }) {
+		const options = target.querySelectorAll( 'option' );
+
+		assert.equal( options[0].selected, true );
+		assert.equal( options[1].selected, false );
+
+		component.foo = items[1];
+
+		assert.equal( options[0].selected, false );
+		assert.equal( options[1].selected, true );
+	}
+};
diff --git a/test/runtime/samples/select-one-way-bind-object/main.svelte b/test/runtime/samples/select-one-way-bind-object/main.svelte
new file mode 100644
index 0000000000..c940b3a50e
--- /dev/null
+++ b/test/runtime/samples/select-one-way-bind-object/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let foo;
+	export let items;
+</script>
+
+<select value="{foo}">
+	<option value='{items[0]}'>a</option>
+	<option value='{items[1]}'>b</option>
+</select>
diff --git a/test/runtime/samples/select-one-way-bind/_config.js b/test/runtime/samples/select-one-way-bind/_config.js
new file mode 100644
index 0000000000..94288e5e60
--- /dev/null
+++ b/test/runtime/samples/select-one-way-bind/_config.js
@@ -0,0 +1,19 @@
+export default {
+	skip_if_ssr: true,
+
+	props: {
+		foo: 'a'
+	},
+
+	test({ assert, component, target }) {
+		const options = target.querySelectorAll( 'option' );
+
+		assert.equal( options[0].selected, true );
+		assert.equal( options[1].selected, false );
+
+		component.foo = 'b';
+
+		assert.equal( options[0].selected, false );
+		assert.equal( options[1].selected, true );
+	}
+};
diff --git a/test/runtime/samples/select-one-way-bind/main.svelte b/test/runtime/samples/select-one-way-bind/main.svelte
new file mode 100644
index 0000000000..21ba398e4c
--- /dev/null
+++ b/test/runtime/samples/select-one-way-bind/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let foo;
+</script>
+
+<select value="{foo}">
+	<option>a</option>
+	<option>b</option>
+</select>
diff --git a/test/runtime/samples/select-props/_config.js b/test/runtime/samples/select-props/_config.js
new file mode 100644
index 0000000000..93915d5b82
--- /dev/null
+++ b/test/runtime/samples/select-props/_config.js
@@ -0,0 +1,15 @@
+export default {
+	test({ assert, component, window }) {
+		const selects = document.querySelectorAll('select');
+
+		const event1 = new window.Event('change');
+		selects[0].value = 'b';
+		selects[0].dispatchEvent(event1);
+
+		const event2 = new window.Event('change');
+		selects[1].value = 'b';
+		selects[1].dispatchEvent(event2);
+
+		assert.deepEqual(component.log, [1, 2]);
+	}
+};
diff --git a/test/runtime/samples/select-props/main.svelte b/test/runtime/samples/select-props/main.svelte
new file mode 100644
index 0000000000..ff3855f085
--- /dev/null
+++ b/test/runtime/samples/select-props/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let foo = [ 1, 2 ];
+	export let log = [];
+
+	export function handler(bar) {
+		log = log.concat(bar);
+	}
+</script>
+
+{#each foo as bar}
+	<select on:change='{() => handler(bar)}'>
+		<option>a</option>
+		<option>b</option>
+	</select>
+{/each}
diff --git a/test/runtime/samples/select/_config.js b/test/runtime/samples/select/_config.js
new file mode 100644
index 0000000000..eb400a3cab
--- /dev/null
+++ b/test/runtime/samples/select/_config.js
@@ -0,0 +1,31 @@
+export default {
+	props: {
+		item: {
+			name: 'One',
+			key: 'a'
+		}
+	},
+
+	html: `
+		<select>
+			<option value="a">One</option>
+			<option value="b">Two</option>
+			<option value="c">Three</option>
+		</select>
+	`,
+
+	test({ assert, component, target }) {
+		assert.htmlEqual(target.innerHTML,`
+			<select>
+				<option value="a">One</option>
+				<option value="b">Two</option>
+				<option value="c">Three</option>
+			</select>
+		`);
+
+		assert.equal(target.querySelector('select').value, 'a');
+
+		component.$destroy();
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/select/main.svelte b/test/runtime/samples/select/main.svelte
new file mode 100644
index 0000000000..837d0e0fd9
--- /dev/null
+++ b/test/runtime/samples/select/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let item;
+</script>
+
+<select>
+	<option value="{item.key}">{item.name}</option>
+	<option value="b">Two</option>
+	<option value="c">Three</option>
+</select>
diff --git a/test/runtime/samples/self-reference-component/Countdown.svelte b/test/runtime/samples/self-reference-component/Countdown.svelte
new file mode 100644
index 0000000000..21178f2567
--- /dev/null
+++ b/test/runtime/samples/self-reference-component/Countdown.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let count;
+</script>
+
+{#if count > 0}
+	<slot count={count-1}></slot>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/self-reference-component/_config.js b/test/runtime/samples/self-reference-component/_config.js
new file mode 100644
index 0000000000..c3456b59c2
--- /dev/null
+++ b/test/runtime/samples/self-reference-component/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '5 4 3 2 1 0'
+};
diff --git a/test/runtime/samples/self-reference-component/main.svelte b/test/runtime/samples/self-reference-component/main.svelte
new file mode 100644
index 0000000000..fd28ec4e40
--- /dev/null
+++ b/test/runtime/samples/self-reference-component/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Countdown from './Countdown.svelte';
+	export let count = 5;
+</script>
+
+{count}
+
+<Countdown {count} let:count={i}>
+	<svelte:self count={i} />
+</Countdown>
\ No newline at end of file
diff --git a/test/runtime/samples/self-reference-tree/_config.js b/test/runtime/samples/self-reference-tree/_config.js
new file mode 100644
index 0000000000..cfa7528d31
--- /dev/null
+++ b/test/runtime/samples/self-reference-tree/_config.js
@@ -0,0 +1,65 @@
+export default {
+	props: {
+		file: {
+			name: '/',
+			type: 'folder',
+			children: [
+				{
+					name: 'foo.jpg',
+					type: 'image'
+				},
+				{
+					name: 'bar.jpg',
+					type: 'image'
+				},
+				{
+					name: 'baz',
+					type: 'folder',
+					children: [
+						{
+							name: '.DS_Store',
+							type: 'junk'
+						},
+						{
+							name: 'README.md',
+							type: 'markdown'
+						}
+					]
+				}
+			]
+		}
+	},
+
+	html: `
+		<article class='file folder'>
+			<span class='name'>/</span>
+
+			<ul>
+				<li>
+					<article class='file image'>
+						<span class='name'>foo.jpg</span>
+					</article>
+				</li><li>
+					<article class='file image'>
+						<span class='name'>bar.jpg</span>
+					</article>
+				</li><li>
+					<article class='file folder'>
+						<span class='name'>baz</span>
+						<ul>
+							<li>
+								<article class='file junk'>
+									<span class='name'>.DS_Store</span>
+								</article>
+							</li><li>
+								<article class='file markdown'>
+									<span class='name'>README.md</span>
+								</article>
+							</li>
+						</ul>
+					</article>
+				</li>
+			</ul>
+		</article>
+	`
+};
diff --git a/test/runtime/samples/self-reference-tree/main.svelte b/test/runtime/samples/self-reference-tree/main.svelte
new file mode 100644
index 0000000000..132f13e859
--- /dev/null
+++ b/test/runtime/samples/self-reference-tree/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let file;
+</script>
+
+<article class='file {file.type}'>
+	<span class='name'>{file.name}</span>
+
+	{#if file.type === 'folder'}
+		<ul>
+			{#each file.children as child}
+				<li><svelte:self file='{child}'/></li>
+			{/each}
+		</ul>
+	{/if}
+</article>
\ No newline at end of file
diff --git a/test/runtime/samples/self-reference/_config.js b/test/runtime/samples/self-reference/_config.js
new file mode 100644
index 0000000000..1bcb660621
--- /dev/null
+++ b/test/runtime/samples/self-reference/_config.js
@@ -0,0 +1,14 @@
+export default {
+	props: {
+		depth: 5
+	},
+
+	html: `
+		<span>5</span>
+		<span>4</span>
+		<span>3</span>
+		<span>2</span>
+		<span>1</span>
+		<span>0</span>
+	`
+};
diff --git a/test/runtime/samples/self-reference/main.svelte b/test/runtime/samples/self-reference/main.svelte
new file mode 100644
index 0000000000..7c89fc0506
--- /dev/null
+++ b/test/runtime/samples/self-reference/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let depth;
+</script>
+
+<span>{depth}</span>
+{#if depth > 0}
+	<svelte:self depth='{depth - 1}'/>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/semicolon-hoisting/_config.js b/test/runtime/samples/semicolon-hoisting/_config.js
new file mode 100644
index 0000000000..22dc25b41e
--- /dev/null
+++ b/test/runtime/samples/semicolon-hoisting/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: ''
+};
diff --git a/test/runtime/samples/semicolon-hoisting/main.svelte b/test/runtime/samples/semicolon-hoisting/main.svelte
new file mode 100644
index 0000000000..234fa715d2
--- /dev/null
+++ b/test/runtime/samples/semicolon-hoisting/main.svelte
@@ -0,0 +1,6 @@
+<script>
+    let time = new Date()
+    let timeZone = 'UTC'
+    ;(() => {
+    })()
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/set-after-destroy/_config.js b/test/runtime/samples/set-after-destroy/_config.js
new file mode 100644
index 0000000000..3411f0cc79
--- /dev/null
+++ b/test/runtime/samples/set-after-destroy/_config.js
@@ -0,0 +1,10 @@
+export default {
+	props: {
+		x: 1
+	},
+
+	test({ component }) {
+		component.$destroy();
+		component.x = 2;
+	}
+};
diff --git a/test/runtime/samples/set-after-destroy/main.svelte b/test/runtime/samples/set-after-destroy/main.svelte
new file mode 100644
index 0000000000..11d49265a3
--- /dev/null
+++ b/test/runtime/samples/set-after-destroy/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x;
+</script>
+
+<div>{x}</div>
\ No newline at end of file
diff --git a/test/runtime/samples/set-in-oncreate/_config.js b/test/runtime/samples/set-in-oncreate/_config.js
new file mode 100644
index 0000000000..6f54649e14
--- /dev/null
+++ b/test/runtime/samples/set-in-oncreate/_config.js
@@ -0,0 +1,5 @@
+export default {
+	skip_if_ssr: true, // uses oncreate
+
+	html: '<p>2</p>'
+};
diff --git a/test/runtime/samples/set-in-oncreate/main.svelte b/test/runtime/samples/set-in-oncreate/main.svelte
new file mode 100644
index 0000000000..66463c030a
--- /dev/null
+++ b/test/runtime/samples/set-in-oncreate/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let foo = 1;
+
+	onMount(() => {
+		foo = 2;
+	});
+</script>
+
+<p>{foo}</p>
diff --git a/test/runtime/samples/set-in-onstate-dedupes-renders/Widget.svelte b/test/runtime/samples/set-in-onstate-dedupes-renders/Widget.svelte
new file mode 100644
index 0000000000..d72b4d48e1
--- /dev/null
+++ b/test/runtime/samples/set-in-onstate-dedupes-renders/Widget.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { beforeUpdate } from 'svelte';
+
+	export let foo;
+	export let bar;
+
+	beforeUpdate(() => {
+		if (foo.x !== bar.x) {
+			throw new Error('mismatch');
+		}
+	});
+</script>
+
+<div>{foo.x}</div>
\ No newline at end of file
diff --git a/test/runtime/samples/set-in-onstate-dedupes-renders/_config.js b/test/runtime/samples/set-in-onstate-dedupes-renders/_config.js
new file mode 100644
index 0000000000..9f50a3cf25
--- /dev/null
+++ b/test/runtime/samples/set-in-onstate-dedupes-renders/_config.js
@@ -0,0 +1,7 @@
+export default {
+	skip: true, // nice-to-have – tricky though, so skipping for now
+
+	test({ component }) {
+		component.foo = { x: 2 };
+	}
+};
diff --git a/test/runtime/samples/set-in-onstate-dedupes-renders/main.svelte b/test/runtime/samples/set-in-onstate-dedupes-renders/main.svelte
new file mode 100644
index 0000000000..cf87944bb8
--- /dev/null
+++ b/test/runtime/samples/set-in-onstate-dedupes-renders/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { beforeUpdate } from 'svelte';
+
+	import Widget from './Widget.svelte';
+
+	export let foo = { x: 1 };
+	export let bar = { x: 1 };
+
+	beforeUpdate(() => {
+		bar = foo;
+	});
+</script>
+
+<Widget foo='{foo}' bar='{bar}'/>
diff --git a/test/runtime/samples/set-in-onstate/_config.js b/test/runtime/samples/set-in-onstate/_config.js
new file mode 100644
index 0000000000..f54527f3c2
--- /dev/null
+++ b/test/runtime/samples/set-in-onstate/_config.js
@@ -0,0 +1,16 @@
+export default {
+	skip_if_ssr: true, // uses oncreate
+
+	html: `
+		<p>1</p>
+		<p>2</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.foo = 2;
+		assert.htmlEqual(target.innerHTML, `
+			<p>2</p>
+			<p>4</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/set-in-onstate/main.svelte b/test/runtime/samples/set-in-onstate/main.svelte
new file mode 100644
index 0000000000..9009324f78
--- /dev/null
+++ b/test/runtime/samples/set-in-onstate/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { beforeUpdate } from 'svelte';
+
+	export let foo = 1;
+	export let bar;
+
+	beforeUpdate(() => {
+		bar = foo * 2;
+	});
+</script>
+
+<p>{foo}</p>
+<p>{bar}</p>
diff --git a/test/runtime/samples/set-null-text-node/_config.js b/test/runtime/samples/set-null-text-node/_config.js
new file mode 100644
index 0000000000..a106ee9069
--- /dev/null
+++ b/test/runtime/samples/set-null-text-node/_config.js
@@ -0,0 +1,13 @@
+export default {
+	props: { foo: null },
+
+	html: 'foo is null',
+
+	test({ assert, component, target }) {
+		component.foo = 42;
+		assert.htmlEqual(target.innerHTML, 'foo is 42');
+
+		component.foo = null;
+		assert.htmlEqual(target.innerHTML, 'foo is null');
+	}
+};
diff --git a/test/runtime/samples/set-null-text-node/main.svelte b/test/runtime/samples/set-null-text-node/main.svelte
new file mode 100644
index 0000000000..825f9c7462
--- /dev/null
+++ b/test/runtime/samples/set-null-text-node/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+foo is {foo}
\ No newline at end of file
diff --git a/test/runtime/samples/set-prevents-loop/Foo.svelte b/test/runtime/samples/set-prevents-loop/Foo.svelte
new file mode 100644
index 0000000000..7c89b545c5
--- /dev/null
+++ b/test/runtime/samples/set-prevents-loop/Foo.svelte
@@ -0,0 +1 @@
+<div></div>
diff --git a/test/runtime/samples/set-prevents-loop/_config.js b/test/runtime/samples/set-prevents-loop/_config.js
new file mode 100644
index 0000000000..ff8b4c5632
--- /dev/null
+++ b/test/runtime/samples/set-prevents-loop/_config.js
@@ -0,0 +1 @@
+export default {};
diff --git a/test/runtime/samples/set-prevents-loop/main.svelte b/test/runtime/samples/set-prevents-loop/main.svelte
new file mode 100644
index 0000000000..f946037ee6
--- /dev/null
+++ b/test/runtime/samples/set-prevents-loop/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Foo from './Foo.svelte';
+
+	export let visible = true;
+	export let answer = 42;
+</script>
+
+{#if visible}
+	<Foo bind:answer/>
+{:else}
+	<Foo bind:answer/>
+{/if}
diff --git a/test/runtime/samples/set-undefined-attr/_config.js b/test/runtime/samples/set-undefined-attr/_config.js
new file mode 100644
index 0000000000..49c4216e57
--- /dev/null
+++ b/test/runtime/samples/set-undefined-attr/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: "<div draggable='false'></div>",
+
+	ssrHtml: "<div foo='1' draggable='false'></div>"
+};
diff --git a/test/runtime/samples/set-undefined-attr/main.svelte b/test/runtime/samples/set-undefined-attr/main.svelte
new file mode 100644
index 0000000000..77a1885415
--- /dev/null
+++ b/test/runtime/samples/set-undefined-attr/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let foo = 1;
+	export let bar;
+	export let _class;
+
+	onMount(() => {
+		foo = undefined;
+	});
+</script>
+
+<div {foo} {bar} class={_class} draggable='false'></div>
diff --git a/test/runtime/samples/shorthand-method-in-template/Foo.svelte b/test/runtime/samples/shorthand-method-in-template/Foo.svelte
new file mode 100644
index 0000000000..bbe542622d
--- /dev/null
+++ b/test/runtime/samples/shorthand-method-in-template/Foo.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let bar;
+</script>
+
+{bar.answer()}
\ No newline at end of file
diff --git a/test/runtime/samples/shorthand-method-in-template/_config.js b/test/runtime/samples/shorthand-method-in-template/_config.js
new file mode 100644
index 0000000000..b097a46716
--- /dev/null
+++ b/test/runtime/samples/shorthand-method-in-template/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '42'
+};
diff --git a/test/runtime/samples/shorthand-method-in-template/main.svelte b/test/runtime/samples/shorthand-method-in-template/main.svelte
new file mode 100644
index 0000000000..9ebd11aacb
--- /dev/null
+++ b/test/runtime/samples/shorthand-method-in-template/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Foo from './Foo.svelte';
+</script>
+
+<Foo bar={{
+	answer() {
+		return 42;
+	}
+}} />
\ No newline at end of file
diff --git a/test/runtime/samples/sigil-component-prop/Widget.svelte b/test/runtime/samples/sigil-component-prop/Widget.svelte
new file mode 100644
index 0000000000..2ba74ee888
--- /dev/null
+++ b/test/runtime/samples/sigil-component-prop/Widget.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let value;
+</script>
+
+<div>{value}</div>
diff --git a/test/runtime/samples/sigil-component-prop/_config.js b/test/runtime/samples/sigil-component-prop/_config.js
new file mode 100644
index 0000000000..105f8b468c
--- /dev/null
+++ b/test/runtime/samples/sigil-component-prop/_config.js
@@ -0,0 +1,7 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+	props: { foo: 'foo' },
+	html: '<div>foo @ foo # foo</div>'
+};
diff --git a/test/runtime/samples/sigil-component-prop/main.svelte b/test/runtime/samples/sigil-component-prop/main.svelte
new file mode 100644
index 0000000000..28c66c5bd6
--- /dev/null
+++ b/test/runtime/samples/sigil-component-prop/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Widget from './Widget.svelte';
+	export let foo;
+</script>
+
+<Widget value='foo @ {foo} # foo'>
+</Widget>
\ No newline at end of file
diff --git a/test/runtime/samples/sigil-expression-function-body/_config.js b/test/runtime/samples/sigil-expression-function-body/_config.js
new file mode 100644
index 0000000000..8d88d1fd08
--- /dev/null
+++ b/test/runtime/samples/sigil-expression-function-body/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '@foo'
+};
diff --git a/test/runtime/samples/sigil-expression-function-body/main.svelte b/test/runtime/samples/sigil-expression-function-body/main.svelte
new file mode 100644
index 0000000000..074496d6f4
--- /dev/null
+++ b/test/runtime/samples/sigil-expression-function-body/main.svelte
@@ -0,0 +1 @@
+{(() => '@foo')()}
diff --git a/test/runtime/samples/sigil-static-#/_config.js b/test/runtime/samples/sigil-static-#/_config.js
new file mode 100644
index 0000000000..3bf2601f70
--- /dev/null
+++ b/test/runtime/samples/sigil-static-#/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '#foo'
+};
diff --git a/test/runtime/samples/sigil-static-#/main.svelte b/test/runtime/samples/sigil-static-#/main.svelte
new file mode 100644
index 0000000000..5529b9b4ce
--- /dev/null
+++ b/test/runtime/samples/sigil-static-#/main.svelte
@@ -0,0 +1 @@
+#foo
\ No newline at end of file
diff --git a/test/runtime/samples/sigil-static-@/_config.js b/test/runtime/samples/sigil-static-@/_config.js
new file mode 100644
index 0000000000..8d88d1fd08
--- /dev/null
+++ b/test/runtime/samples/sigil-static-@/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '@foo'
+};
diff --git a/test/runtime/samples/sigil-static-@/main.svelte b/test/runtime/samples/sigil-static-@/main.svelte
new file mode 100644
index 0000000000..d88b8ee03d
--- /dev/null
+++ b/test/runtime/samples/sigil-static-@/main.svelte
@@ -0,0 +1 @@
+@foo
\ No newline at end of file
diff --git a/test/runtime/samples/single-static-element/_config.js b/test/runtime/samples/single-static-element/_config.js
new file mode 100644
index 0000000000..2b2f08306c
--- /dev/null
+++ b/test/runtime/samples/single-static-element/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<span>test</span>'
+};
diff --git a/test/runtime/samples/single-static-element/main.svelte b/test/runtime/samples/single-static-element/main.svelte
new file mode 100644
index 0000000000..61dba8bc46
--- /dev/null
+++ b/test/runtime/samples/single-static-element/main.svelte
@@ -0,0 +1 @@
+<span>test</span>
diff --git a/test/runtime/samples/single-text-node/_config.js b/test/runtime/samples/single-text-node/_config.js
new file mode 100644
index 0000000000..0241f32d22
--- /dev/null
+++ b/test/runtime/samples/single-text-node/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: 'text'
+};
diff --git a/test/runtime/samples/single-text-node/main.svelte b/test/runtime/samples/single-text-node/main.svelte
new file mode 100644
index 0000000000..8e27be7d61
--- /dev/null
+++ b/test/runtime/samples/single-text-node/main.svelte
@@ -0,0 +1 @@
+text
diff --git a/test/runtime/samples/slot-if-block-update-no-anchor/_config.js b/test/runtime/samples/slot-if-block-update-no-anchor/_config.js
new file mode 100644
index 0000000000..f05d79c265
--- /dev/null
+++ b/test/runtime/samples/slot-if-block-update-no-anchor/_config.js
@@ -0,0 +1,7 @@
+export default {
+	test({ assert, target, component }) {
+		assert.htmlEqual(target.innerHTML, '<span></span>');
+		component.enabled = true;
+		assert.htmlEqual(target.innerHTML, '<span>enabled</span>');
+	}
+};
diff --git a/test/runtime/samples/slot-if-block-update-no-anchor/main.svelte b/test/runtime/samples/slot-if-block-update-no-anchor/main.svelte
new file mode 100644
index 0000000000..7960f35bc9
--- /dev/null
+++ b/test/runtime/samples/slot-if-block-update-no-anchor/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let enabled = false;
+</script>
+
+<span>
+	<slot>
+		{#if enabled}enabled{/if}
+	</slot>
+</span>
diff --git a/test/runtime/samples/slot-in-custom-element/_config.js b/test/runtime/samples/slot-in-custom-element/_config.js
new file mode 100644
index 0000000000..a0b97ec6d0
--- /dev/null
+++ b/test/runtime/samples/slot-in-custom-element/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: `
+		<custom-element>
+			<header slot='header'>header header header</header>
+		</custom-element>
+	`
+};
diff --git a/test/runtime/samples/slot-in-custom-element/main.svelte b/test/runtime/samples/slot-in-custom-element/main.svelte
new file mode 100644
index 0000000000..fca685a6aa
--- /dev/null
+++ b/test/runtime/samples/slot-in-custom-element/main.svelte
@@ -0,0 +1,3 @@
+<custom-element>
+	<header slot='header'>header header header</header>
+</custom-element>
\ No newline at end of file
diff --git a/test/runtime/samples/spread-component-2/Widget.svelte b/test/runtime/samples/spread-component-2/Widget.svelte
new file mode 100644
index 0000000000..ae27aeb5e5
--- /dev/null
+++ b/test/runtime/samples/spread-component-2/Widget.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let foo;
+	export let baz;
+	export let qux;
+	export let quux;
+	export let selected;
+</script>
+
+<p>foo: {foo}</p>
+<p>baz: {baz} ({typeof baz})</p>
+<p>qux: {qux}</p>
+<p>quux: {quux}</p>
+<p>selected: {selected}</p>
diff --git a/test/runtime/samples/spread-component-2/_config.js b/test/runtime/samples/spread-component-2/_config.js
new file mode 100644
index 0000000000..e5441bc4b9
--- /dev/null
+++ b/test/runtime/samples/spread-component-2/_config.js
@@ -0,0 +1,76 @@
+export default {
+	props: {
+		list: [{
+			foo: 'lol',
+			baz: 40 + 2,
+			qux: 5,
+			quux: 'core'
+		}, {
+			foo: 'lolzz',
+			baz: 50 + 2,
+			qux: 1,
+			quux: 'quuxx'
+		}]
+	},
+
+	html: `
+		<div>
+			<p>foo: lol</p>
+			<p>baz: 42 (number)</p>
+			<p>qux: 0</p>
+			<p>quux: core</p>
+			<p>selected: true</p>
+			<p>foo: lolzz</p>
+			<p>baz: 52 (number)</p>
+			<p>qux: 0</p>
+			<p>quux: quuxx</p>
+			<p>selected: false</p>
+		</div>
+	`,
+
+	test({ assert, component, target }) {
+		component.list = [{
+			foo: 'lol',
+			baz: 40 + 3,
+			qux: 8,
+			quux: 'heart'
+		}, {
+			foo: 'lolzz',
+			baz: 50 + 3,
+			qux: 8,
+			quux: 'heartxx'
+		}];
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<p>foo: lol</p>
+				<p>baz: 43 (number)</p>
+				<p>qux: 0</p>
+				<p>quux: heart</p>
+				<p>selected: true</p>
+				<p>foo: lolzz</p>
+				<p>baz: 53 (number)</p>
+				<p>qux: 0</p>
+				<p>quux: heartxx</p>
+				<p>selected: false</p>
+			</div>
+		`);
+
+		component.qux = 1;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>
+				<p>foo: lol</p>
+				<p>baz: 43 (number)</p>
+				<p>qux: 1</p>
+				<p>quux: heart</p>
+				<p>selected: false</p>
+				<p>foo: lolzz</p>
+				<p>baz: 53 (number)</p>
+				<p>qux: 1</p>
+				<p>quux: heartxx</p>
+				<p>selected: true</p>
+			</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/spread-component-2/main.svelte b/test/runtime/samples/spread-component-2/main.svelte
new file mode 100644
index 0000000000..436e11f9c5
--- /dev/null
+++ b/test/runtime/samples/spread-component-2/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let list;
+	export let qux = 0;
+</script>
+
+<div>
+	{#each list as item, index (item.foo)}
+		<Widget {...item} qux={qux} selected={qux === index} />
+	{/each}
+</div>
diff --git a/test/runtime/samples/spread-component-dynamic-non-object-multiple-dependencies/Widget.svelte b/test/runtime/samples/spread-component-dynamic-non-object-multiple-dependencies/Widget.svelte
new file mode 100644
index 0000000000..3433ffc243
--- /dev/null
+++ b/test/runtime/samples/spread-component-dynamic-non-object-multiple-dependencies/Widget.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let foo;
+	export let baz;
+	export let qux;
+	export let corge;
+</script>
+
+<p>foo: {foo}</p>
+<p>baz: {baz}</p>
+<p>qux: {qux}</p>
+<p>corge: {corge}</p>
diff --git a/test/runtime/samples/spread-component-dynamic-non-object-multiple-dependencies/_config.js b/test/runtime/samples/spread-component-dynamic-non-object-multiple-dependencies/_config.js
new file mode 100644
index 0000000000..d7ad47b01f
--- /dev/null
+++ b/test/runtime/samples/spread-component-dynamic-non-object-multiple-dependencies/_config.js
@@ -0,0 +1,53 @@
+export default {
+	props: {
+		props: {
+			foo: 'lol',
+			baz: 40 + 2
+		}
+	},
+
+	html: `
+		<div><p>foo: lol</p>
+		<p>baz: 42</p>
+		<p>qux: named</p>
+		<p>corge: b</p>
+	`,
+
+	test({ assert, component, target }) {
+		const html = `
+			<div><p>foo: undefined</p>
+			<p>baz: undefined</p>
+			<p>qux: named</p>
+			<p>corge: b</p>
+		`;
+
+		// test undefined
+		component.props = undefined;
+		assert.htmlEqual(target.innerHTML, html);
+
+		// set object props
+		component.props = this.props.props;
+		assert.htmlEqual(target.innerHTML, this.html);
+
+		// test null
+		component.props = null;
+		assert.htmlEqual(target.innerHTML, html);
+
+		// set object props
+		component.props = this.props.props;
+		assert.htmlEqual(target.innerHTML, this.html);
+
+		// test boolean
+		component.props = true;
+		assert.htmlEqual(target.innerHTML, html);
+
+		// set object props
+		component.props = this.props.props;
+		assert.htmlEqual(target.innerHTML, this.html);
+
+		// test number
+		component.props = 123;
+		assert.htmlEqual(target.innerHTML, html);
+
+	}
+};
diff --git a/test/runtime/samples/spread-component-dynamic-non-object-multiple-dependencies/main.svelte b/test/runtime/samples/spread-component-dynamic-non-object-multiple-dependencies/main.svelte
new file mode 100644
index 0000000000..5f9f9cbff0
--- /dev/null
+++ b/test/runtime/samples/spread-component-dynamic-non-object-multiple-dependencies/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let props;
+
+	export let corge = false;
+	export let a = 'a';
+	export let b = 'b';
+</script>
+
+<div>
+	<Widget corge={corge ? a : b} {...props} qux="named"/>
+</div>
diff --git a/test/runtime/samples/spread-component-dynamic-non-object/Widget.svelte b/test/runtime/samples/spread-component-dynamic-non-object/Widget.svelte
new file mode 100644
index 0000000000..bc168d4956
--- /dev/null
+++ b/test/runtime/samples/spread-component-dynamic-non-object/Widget.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let foo;
+	export let baz;
+	export let qux;
+</script>
+
+<p>foo: {foo}</p>
+<p>baz: {baz}</p>
+<p>qux: {qux}</p>
diff --git a/test/runtime/samples/spread-component-dynamic-non-object/_config.js b/test/runtime/samples/spread-component-dynamic-non-object/_config.js
new file mode 100644
index 0000000000..fa8de8ad94
--- /dev/null
+++ b/test/runtime/samples/spread-component-dynamic-non-object/_config.js
@@ -0,0 +1,51 @@
+export default {
+	props: {
+		props: {
+			foo: 'lol',
+			baz: 40 + 2
+		}
+	},
+
+	html: `
+		<div><p>foo: lol</p>
+		<p>baz: 42</p>
+		<p>qux: named</p>
+	`,
+
+	test({ assert, component, target }) {
+		const html = `
+			<div><p>foo: undefined</p>
+			<p>baz: undefined</p>
+			<p>qux: named</p>
+		`;
+
+		// test undefined
+		component.props = undefined;
+		assert.htmlEqual(target.innerHTML, html);
+
+		// set object props
+		component.props = this.props.props;
+		assert.htmlEqual(target.innerHTML, this.html);
+
+		// test null
+		component.props = null;
+		assert.htmlEqual(target.innerHTML, html);
+
+		// set object props
+		component.props = this.props.props;
+		assert.htmlEqual(target.innerHTML, this.html);
+
+		// test boolean
+		component.props = true;
+		assert.htmlEqual(target.innerHTML, html);
+
+		// set object props
+		component.props = this.props.props;
+		assert.htmlEqual(target.innerHTML, this.html);
+
+		// test number
+		component.props = 123;
+		assert.htmlEqual(target.innerHTML, html);
+
+	}
+};
diff --git a/test/runtime/samples/spread-component-dynamic-non-object/main.svelte b/test/runtime/samples/spread-component-dynamic-non-object/main.svelte
new file mode 100644
index 0000000000..3ca281903e
--- /dev/null
+++ b/test/runtime/samples/spread-component-dynamic-non-object/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let props;
+</script>
+
+<div>
+	<Widget {...props} qux="named"/>
+</div>
diff --git a/test/runtime/samples/spread-component-dynamic-undefined/_config.js b/test/runtime/samples/spread-component-dynamic-undefined/_config.js
new file mode 100644
index 0000000000..ba41df3e54
--- /dev/null
+++ b/test/runtime/samples/spread-component-dynamic-undefined/_config.js
@@ -0,0 +1,17 @@
+export default {
+	props: {
+		props: {
+			a: 1
+		}
+	},
+
+	html: '',
+
+	test({ assert, component, target }) {
+		component.props = {
+			a: 2
+		};
+
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/spread-component-dynamic-undefined/main.svelte b/test/runtime/samples/spread-component-dynamic-undefined/main.svelte
new file mode 100644
index 0000000000..69abad13e6
--- /dev/null
+++ b/test/runtime/samples/spread-component-dynamic-undefined/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let props;
+</script>
+
+<svelte:component this={undefined} {...props} />
\ No newline at end of file
diff --git a/test/runtime/samples/spread-component-dynamic/Foo.svelte b/test/runtime/samples/spread-component-dynamic/Foo.svelte
new file mode 100644
index 0000000000..4cffe5d3ce
--- /dev/null
+++ b/test/runtime/samples/spread-component-dynamic/Foo.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let a;
+</script>
+
+<p>a: {a}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/spread-component-dynamic/_config.js b/test/runtime/samples/spread-component-dynamic/_config.js
new file mode 100644
index 0000000000..7992a30514
--- /dev/null
+++ b/test/runtime/samples/spread-component-dynamic/_config.js
@@ -0,0 +1,19 @@
+export default {
+	props: {
+		props: {
+			a: 1
+		}
+	},
+
+	html: `
+		<p>a: 1</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.props = {
+			a: 2
+		};
+
+		assert.htmlEqual(target.innerHTML, '<p>a: 2</p>');
+	}
+};
diff --git a/test/runtime/samples/spread-component-dynamic/main.svelte b/test/runtime/samples/spread-component-dynamic/main.svelte
new file mode 100644
index 0000000000..879a5c2cd5
--- /dev/null
+++ b/test/runtime/samples/spread-component-dynamic/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Foo from './Foo.svelte';
+
+	export let props;
+</script>
+
+<svelte:component this={Foo} {...props} />
\ No newline at end of file
diff --git a/test/runtime/samples/spread-component-literal/Widget.svelte b/test/runtime/samples/spread-component-literal/Widget.svelte
new file mode 100644
index 0000000000..e00796baf3
--- /dev/null
+++ b/test/runtime/samples/spread-component-literal/Widget.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+<p>foo: {foo}</p>
diff --git a/test/runtime/samples/spread-component-literal/_config.js b/test/runtime/samples/spread-component-literal/_config.js
new file mode 100644
index 0000000000..d1613218d5
--- /dev/null
+++ b/test/runtime/samples/spread-component-literal/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<div><p>foo: bar</p></div>
+	`
+};
diff --git a/test/runtime/samples/spread-component-literal/main.svelte b/test/runtime/samples/spread-component-literal/main.svelte
new file mode 100644
index 0000000000..13fdf99b69
--- /dev/null
+++ b/test/runtime/samples/spread-component-literal/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<div>
+	<Widget {...{ foo: 'bar' }}/>
+</div>
diff --git a/test/runtime/samples/spread-component-multiple-dependencies/Widget.svelte b/test/runtime/samples/spread-component-multiple-dependencies/Widget.svelte
new file mode 100644
index 0000000000..373bf23f51
--- /dev/null
+++ b/test/runtime/samples/spread-component-multiple-dependencies/Widget.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let foo;
+	export let baz;
+</script>
+
+{foo} {baz}
diff --git a/test/runtime/samples/spread-component-multiple-dependencies/_config.js b/test/runtime/samples/spread-component-multiple-dependencies/_config.js
new file mode 100644
index 0000000000..ee2c0feda8
--- /dev/null
+++ b/test/runtime/samples/spread-component-multiple-dependencies/_config.js
@@ -0,0 +1,10 @@
+export default {
+	html: 'b baz',
+	test({ assert, component, target }) {
+		component.foo = true;
+		assert.htmlEqual(
+			target.innerHTML,
+			'a baz'
+		);
+	}
+};
diff --git a/test/runtime/samples/spread-component-multiple-dependencies/main.svelte b/test/runtime/samples/spread-component-multiple-dependencies/main.svelte
new file mode 100644
index 0000000000..a60043391a
--- /dev/null
+++ b/test/runtime/samples/spread-component-multiple-dependencies/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let foo = false;
+	export let a = 'a';
+	export let b = 'b';
+	export let bar = { baz: 'baz' };
+
+	import Widget from './Widget.svelte';
+</script>
+
+<Widget foo={foo ? a : b} {...bar}/>
diff --git a/test/runtime/samples/spread-component-side-effects/Widget.svelte b/test/runtime/samples/spread-component-side-effects/Widget.svelte
new file mode 100644
index 0000000000..69349e66b4
--- /dev/null
+++ b/test/runtime/samples/spread-component-side-effects/Widget.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let i;
+	export let foo;
+	export let qux;
+</script>
+
+<p>i: {i}</p>
+<p>foo: {foo}</p>
+<p>qux: {qux}</p>
diff --git a/test/runtime/samples/spread-component-side-effects/_config.js b/test/runtime/samples/spread-component-side-effects/_config.js
new file mode 100644
index 0000000000..35c4fb7474
--- /dev/null
+++ b/test/runtime/samples/spread-component-side-effects/_config.js
@@ -0,0 +1,19 @@
+export default {
+	props: {},
+
+	html: `
+		<div><p>i: 1</p>
+		<p>foo: foo</p>
+		<p>qux: named</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.foo = 'lol';
+
+		assert.htmlEqual(target.innerHTML, `
+			<div><p>i: 2</p>
+			<p>foo: lol</p>
+			<p>qux: named</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/spread-component-side-effects/main.svelte b/test/runtime/samples/spread-component-side-effects/main.svelte
new file mode 100644
index 0000000000..8c2dcfd2c3
--- /dev/null
+++ b/test/runtime/samples/spread-component-side-effects/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let foo = 'foo';
+
+	let i = 0
+
+	const getProps = (foo) => {
+		i += 1;
+		return { foo,  i };
+	}
+</script>
+
+<div>
+	<Widget {...getProps(foo)} qux="named"/>
+</div>
diff --git a/test/runtime/samples/spread-component-with-bind/Widget.svelte b/test/runtime/samples/spread-component-with-bind/Widget.svelte
new file mode 100644
index 0000000000..63d78cdcb5
--- /dev/null
+++ b/test/runtime/samples/spread-component-with-bind/Widget.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let value;
+</script>
+
+<p>{value}</p>
+<input bind:value/>
\ No newline at end of file
diff --git a/test/runtime/samples/spread-component-with-bind/_config.js b/test/runtime/samples/spread-component-with-bind/_config.js
new file mode 100644
index 0000000000..5394fa80e0
--- /dev/null
+++ b/test/runtime/samples/spread-component-with-bind/_config.js
@@ -0,0 +1,23 @@
+export default {
+	html: `
+		<p>foo</p>
+		<input>
+	`,
+
+	ssrHtml: `
+		<p>foo</p>
+		<input value=foo>
+	`,
+
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+
+		input.value = 'bar';
+		await input.dispatchEvent(new window.Event('input'));
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>bar</p>
+			<input>
+		`);
+	}
+};
diff --git a/test/runtime/samples/spread-component-with-bind/main.svelte b/test/runtime/samples/spread-component-with-bind/main.svelte
new file mode 100644
index 0000000000..98375e2348
--- /dev/null
+++ b/test/runtime/samples/spread-component-with-bind/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let props = {};
+	export let x = 'foo';
+</script>
+
+<svelte:component this={Widget} {...props} bind:value={x} />
\ No newline at end of file
diff --git a/test/runtime/samples/spread-component/Widget.svelte b/test/runtime/samples/spread-component/Widget.svelte
new file mode 100644
index 0000000000..40de25bb55
--- /dev/null
+++ b/test/runtime/samples/spread-component/Widget.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let foo;
+	export let baz;
+	export let qux;
+	export let quux;
+</script>
+
+<p>foo: {foo}</p>
+<p>baz: {baz} ({typeof baz})</p>
+<p>qux: {qux}</p>
+<p>quux: {quux}</p>
diff --git a/test/runtime/samples/spread-component/_config.js b/test/runtime/samples/spread-component/_config.js
new file mode 100644
index 0000000000..b2cf9d704f
--- /dev/null
+++ b/test/runtime/samples/spread-component/_config.js
@@ -0,0 +1,33 @@
+export default {
+	props: {
+		props: {
+			foo: 'lol',
+			baz: 40 + 2,
+			qux: `this is a ${'piece of'} string`,
+			quux: 'core'
+		}
+	},
+
+	html: `
+		<div><p>foo: lol</p>
+		<p>baz: 42 (number)</p>
+		<p>qux: named</p>
+		<p>quux: core</p></div>
+	`,
+
+	test({ assert, component, target }) {
+		component.props = {
+			foo: 'wut',
+			baz: 40 + 3,
+			qux: `this is a ${'rather boring'} string`,
+			quux: 'heart'
+		};
+
+		assert.htmlEqual(target.innerHTML, `
+			<div><p>foo: wut</p>
+			<p>baz: 43 (number)</p>
+			<p>qux: named</p>
+			<p>quux: heart</p></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/spread-component/main.svelte b/test/runtime/samples/spread-component/main.svelte
new file mode 100644
index 0000000000..3ca281903e
--- /dev/null
+++ b/test/runtime/samples/spread-component/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let props;
+</script>
+
+<div>
+	<Widget {...props} qux="named"/>
+</div>
diff --git a/test/runtime/samples/spread-each-component/Nested.svelte b/test/runtime/samples/spread-each-component/Nested.svelte
new file mode 100644
index 0000000000..c599d10913
--- /dev/null
+++ b/test/runtime/samples/spread-each-component/Nested.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let a;
+	export let b;
+</script>
+
+<div data-a={a} data-b={b}></div>
\ No newline at end of file
diff --git a/test/runtime/samples/spread-each-component/_config.js b/test/runtime/samples/spread-each-component/_config.js
new file mode 100644
index 0000000000..66d2381875
--- /dev/null
+++ b/test/runtime/samples/spread-each-component/_config.js
@@ -0,0 +1,24 @@
+export default {
+	html: `
+		<div data-a="1" data-b="2"></div>
+		<div data-a="3" data-b="4"></div>
+	`,
+
+	props: {
+		things: [
+			{ a: 1, b: 2 },
+			{ a: 3, b: 4 }
+		]
+	},
+
+	test({ assert, component, target }) {
+		const { things } = component;
+
+		component.things = things.reverse();
+
+		assert.htmlEqual(target.innerHTML, `
+			<div data-a="3" data-b="4"></div>
+			<div data-a="1" data-b="2"></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/spread-each-component/main.svelte b/test/runtime/samples/spread-each-component/main.svelte
new file mode 100644
index 0000000000..f8c0cebaba
--- /dev/null
+++ b/test/runtime/samples/spread-each-component/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let things;
+</script>
+
+{#each things as thing}
+	<Nested {...thing}/>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/spread-each-element/_config.js b/test/runtime/samples/spread-each-element/_config.js
new file mode 100644
index 0000000000..579f840099
--- /dev/null
+++ b/test/runtime/samples/spread-each-element/_config.js
@@ -0,0 +1,24 @@
+export default {
+	html: `
+		<div data-a="1" data-b="2"></div>
+		<div data-c="3" data-d="4"></div>
+	`,
+
+	props: {
+		things: [
+			{ 'data-a': 1, 'data-b': 2 },
+			{ 'data-c': 3, 'data-d': 4 }
+		]
+	},
+
+	test({ assert, component, target }) {
+		const { things } = component;
+
+		component.things = things.reverse();
+
+		assert.htmlEqual(target.innerHTML, `
+			<div data-c="3" data-d="4"></div>
+			<div data-a="1" data-b="2"></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/spread-each-element/main.svelte b/test/runtime/samples/spread-each-element/main.svelte
new file mode 100644
index 0000000000..086ac22b6a
--- /dev/null
+++ b/test/runtime/samples/spread-each-element/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let things;
+</script>
+
+{#each things as thing}
+	<div {...thing}></div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/spread-element-boolean/_config.js b/test/runtime/samples/spread-element-boolean/_config.js
new file mode 100644
index 0000000000..3ceeb3f677
--- /dev/null
+++ b/test/runtime/samples/spread-element-boolean/_config.js
@@ -0,0 +1,25 @@
+export default {
+	props: {
+		props: {
+			disabled: true
+		}
+	},
+
+	html: `
+		<button disabled>click me</button>
+	`,
+
+	test({ assert, component, target }) {
+		const button = target.querySelector('button');
+
+		assert.ok(button.disabled);
+
+		component.props = { disabled: false };
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>click me</button>'
+		);
+		assert.ok(!button.disabled);
+	}
+};
diff --git a/test/runtime/samples/spread-element-boolean/main.svelte b/test/runtime/samples/spread-element-boolean/main.svelte
new file mode 100644
index 0000000000..7fa26ed3ab
--- /dev/null
+++ b/test/runtime/samples/spread-element-boolean/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let props;
+</script>
+
+<button {...props} >click me</button>
\ No newline at end of file
diff --git a/test/runtime/samples/spread-element-class/_config.js b/test/runtime/samples/spread-element-class/_config.js
new file mode 100644
index 0000000000..b699848210
--- /dev/null
+++ b/test/runtime/samples/spread-element-class/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: "<div class='foo bar'>hello</div>",
+	test({ assert, component, target }) {
+		component.blah = 'goodbye';
+		assert.htmlEqual(target.innerHTML, "<div class='foo bar'>goodbye</div>");
+	}
+};
diff --git a/test/runtime/samples/spread-element-class/main.svelte b/test/runtime/samples/spread-element-class/main.svelte
new file mode 100644
index 0000000000..026132287b
--- /dev/null
+++ b/test/runtime/samples/spread-element-class/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let blah = 'hello';
+</script>
+
+<div class:bar={true} {...{ class: 'foo' }}>{blah}</div>
diff --git a/test/runtime/samples/spread-element-input-bind-group-with-value-attr/_config.js b/test/runtime/samples/spread-element-input-bind-group-with-value-attr/_config.js
new file mode 100644
index 0000000000..5176fb976c
--- /dev/null
+++ b/test/runtime/samples/spread-element-input-bind-group-with-value-attr/_config.js
@@ -0,0 +1,15 @@
+export default {
+	props: {
+		props: {
+			'data-foo': 'bar'
+		}
+	},
+
+	html: '<input data-foo="bar" type="radio" value="abc">',
+
+	async test({ assert, target }) {
+		const input = target.querySelector('input');
+		assert.equal(input.value, 'abc');
+		assert.equal(input.__value, 'abc');
+	}
+};
diff --git a/test/runtime/samples/spread-element-input-bind-group-with-value-attr/main.svelte b/test/runtime/samples/spread-element-input-bind-group-with-value-attr/main.svelte
new file mode 100644
index 0000000000..ce6b76f093
--- /dev/null
+++ b/test/runtime/samples/spread-element-input-bind-group-with-value-attr/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let props;
+	let radioValue;
+</script>
+
+<input type="radio" value="abc" {...props} bind:group={radioValue} />
diff --git a/test/runtime/samples/spread-element-input-select-multiple/_config.js b/test/runtime/samples/spread-element-input-select-multiple/_config.js
new file mode 100644
index 0000000000..1ddcd9eb6d
--- /dev/null
+++ b/test/runtime/samples/spread-element-input-select-multiple/_config.js
@@ -0,0 +1,39 @@
+export default {
+	async test({ assert, component, target, window }) {
+		const [input1, input2] = target.querySelectorAll('input');
+		const select = target.querySelector('select');
+		const [option1, option2] = select.childNodes;
+
+		let selections = Array.from(select.selectedOptions);
+		assert.equal(selections.length, 2);
+		assert.ok(selections.includes(option1));
+		assert.ok(selections.includes(option2));
+
+		const event = new window.Event('change');
+
+		input1.checked = false;
+		await input1.dispatchEvent(event);
+
+		selections = Array.from(select.selectedOptions);
+		assert.equal(selections.length, 1);
+		assert.ok(!selections.includes(option1));
+		assert.ok(selections.includes(option2));
+
+		input2.checked = false;
+		await input2.dispatchEvent(event);
+		input1.checked = true;
+		await input1.dispatchEvent(event);
+
+		selections = Array.from(select.selectedOptions);
+		assert.equal(selections.length, 1);
+		assert.ok(selections.includes(option1));
+		assert.ok(!selections.includes(option2));
+
+		component.spread = { value: ['Hello', 'World'] };
+
+		selections = Array.from(select.selectedOptions);
+		assert.equal(selections.length, 2);
+		assert.ok(selections.includes(option1));
+		assert.ok(selections.includes(option2));
+	}
+};
diff --git a/test/runtime/samples/spread-element-input-select-multiple/main.svelte b/test/runtime/samples/spread-element-input-select-multiple/main.svelte
new file mode 100644
index 0000000000..d2fb12dd20
--- /dev/null
+++ b/test/runtime/samples/spread-element-input-select-multiple/main.svelte
@@ -0,0 +1,12 @@
+<script>
+  let value = ['Hello', 'World'];
+  export let spread = {};
+</script>
+
+<select multiple {value} {...spread}>
+  <option>Hello</option>
+  <option>World</option>
+</select>
+
+<input type="checkbox" value="Hello" bind:group={value}>
+<input type="checkbox" value="World" bind:group={value}>
\ No newline at end of file
diff --git a/test/runtime/samples/spread-element-input-select/_config.js b/test/runtime/samples/spread-element-input-select/_config.js
new file mode 100644
index 0000000000..7971a2a3fc
--- /dev/null
+++ b/test/runtime/samples/spread-element-input-select/_config.js
@@ -0,0 +1,25 @@
+export default {
+	async test({ assert, component, target }) {
+		const select = target.querySelector('select');
+		const [option1, option2] = select.childNodes;
+
+		let selections = Array.from(select.selectedOptions);
+		assert.equal(selections.length, 1);
+		assert.ok(!selections.includes(option1));
+		assert.ok(selections.includes(option2));
+
+		component.value = 'Hello';
+
+		selections = Array.from(select.selectedOptions);
+		assert.equal(selections.length, 1);
+		assert.ok(selections.includes(option1));
+		assert.ok(!selections.includes(option2));
+
+		component.spread = { value: 'World' };
+
+		selections = Array.from(select.selectedOptions);
+		assert.equal(selections.length, 1);
+		assert.ok(!selections.includes(option1));
+		assert.ok(selections.includes(option2));
+	}
+};
diff --git a/test/runtime/samples/spread-element-input-select/main.svelte b/test/runtime/samples/spread-element-input-select/main.svelte
new file mode 100644
index 0000000000..41554d794f
--- /dev/null
+++ b/test/runtime/samples/spread-element-input-select/main.svelte
@@ -0,0 +1,9 @@
+<script>
+  export let value = 'World';
+  export let spread = {};
+</script>
+
+<select {value} {...spread}>
+  <option>Hello</option>
+  <option>World</option>
+</select>
diff --git a/test/runtime/samples/spread-element-input-value-undefined/_config.js b/test/runtime/samples/spread-element-input-value-undefined/_config.js
new file mode 100644
index 0000000000..9f5c0b8e77
--- /dev/null
+++ b/test/runtime/samples/spread-element-input-value-undefined/_config.js
@@ -0,0 +1,12 @@
+export default {
+	async test({ assert, component, target }) {
+		const input = target.querySelector('input');
+		component.value = undefined;
+
+		assert.equal(input.value, 'undefined');
+
+		component.value = 'foobar';
+
+		assert.equal(input.value, 'foobar');
+	}
+};
diff --git a/test/runtime/samples/spread-element-input-value-undefined/main.svelte b/test/runtime/samples/spread-element-input-value-undefined/main.svelte
new file mode 100644
index 0000000000..5c9121dc03
--- /dev/null
+++ b/test/runtime/samples/spread-element-input-value-undefined/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let value = '';
+</script>
+
+<input {value} {...{}} />
\ No newline at end of file
diff --git a/test/runtime/samples/spread-element-input-value/InputOne.svelte b/test/runtime/samples/spread-element-input-value/InputOne.svelte
new file mode 100644
index 0000000000..92ecb7b9a9
--- /dev/null
+++ b/test/runtime/samples/spread-element-input-value/InputOne.svelte
@@ -0,0 +1,18 @@
+<script>
+  import { omit } from './utils.js';
+
+  export let value;
+	
+	function onInput(e) {  
+    value = e.target.value;
+  }
+
+  $: props = omit($$props, 'value');
+</script>
+
+<input
+	type="text"
+	{...props}
+	on:input={onInput}
+	{value}
+/>
diff --git a/test/runtime/samples/spread-element-input-value/InputTwo.svelte b/test/runtime/samples/spread-element-input-value/InputTwo.svelte
new file mode 100644
index 0000000000..33ec0622a4
--- /dev/null
+++ b/test/runtime/samples/spread-element-input-value/InputTwo.svelte
@@ -0,0 +1,19 @@
+<script>
+  import { omit } from './utils.js';
+
+  export let value;
+	
+	function onInput(e) {  
+    value = e.target.value;
+  }
+
+  $: props = omit($$props, 'value', 'minlength');
+</script>
+	
+<input
+	type="text"
+	minlength="10"
+	value={value}
+  {...props}
+	on:input={onInput}
+/>
diff --git a/test/runtime/samples/spread-element-input-value/_config.js b/test/runtime/samples/spread-element-input-value/_config.js
new file mode 100644
index 0000000000..0df088159a
--- /dev/null
+++ b/test/runtime/samples/spread-element-input-value/_config.js
@@ -0,0 +1,62 @@
+export default {
+	async test({ assert, component, target, window }) {
+		const [input1, input2] = target.querySelectorAll('input');
+
+		// we are not able emulate user interaction in jsdom,
+		// therefore, jsdom could not validate minlength / maxlength
+
+		// we simulate user input with
+		// setting input.value + dispathEvent
+
+		// and we determine if svelte does not set the `input.value` again by
+		// spying on the setter of `input.value`
+
+		const spy1 = spyOnValueSetter(input1, input1.value);
+		const spy2 = spyOnValueSetter(input2, input2.value);
+		
+		const event = new window.Event('input');
+		
+		input1.value = '12345';
+		spy1.reset();
+		await input1.dispatchEvent(event);
+
+		assert.ok(!spy1.isSetCalled());
+		
+		input2.value = '12345';
+		spy2.reset();
+		await input2.dispatchEvent(event);
+
+		assert.ok(!spy2.isSetCalled());
+
+		spy1.reset();
+		component.val1 = '56789';
+		assert.ok(spy1.isSetCalled());
+
+		spy2.reset();
+		component.val2 = '56789';
+		assert.ok(spy2.isSetCalled());
+	}
+};
+
+function spyOnValueSetter(input, initialValue) {
+	let value = initialValue;
+	let isSet = false;
+	Object.defineProperty(input, 'value', {
+		get() {
+			return value;
+		},
+		set(_value) {
+			value = _value;
+			isSet = true;
+		}
+	});
+
+	return {
+		isSetCalled() {
+			return isSet;
+		},
+		reset() {
+			isSet = false;
+		}
+	};
+}
diff --git a/test/runtime/samples/spread-element-input-value/main.svelte b/test/runtime/samples/spread-element-input-value/main.svelte
new file mode 100644
index 0000000000..bb5f0e00bf
--- /dev/null
+++ b/test/runtime/samples/spread-element-input-value/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import InputOne from './InputOne.svelte';
+	import InputTwo from './InputTwo.svelte';
+	export let val1 = '';
+	export let val2 = '';
+</script>
+
+<InputOne bind:value={val1} required minlength="10" />
+<InputTwo bind:value={val2} required minlength="10" />
\ No newline at end of file
diff --git a/test/runtime/samples/spread-element-input-value/utils.js b/test/runtime/samples/spread-element-input-value/utils.js
new file mode 100644
index 0000000000..ee941bda55
--- /dev/null
+++ b/test/runtime/samples/spread-element-input-value/utils.js
@@ -0,0 +1,6 @@
+export function omit(obj, ...keysToOmit) {
+	return Object.keys(obj).reduce((acc, key) => {
+		if (keysToOmit.indexOf(key) === -1) acc[key] = obj[key];
+		return acc;
+	}, {});
+}
diff --git a/test/runtime/samples/spread-element-input/_config.js b/test/runtime/samples/spread-element-input/_config.js
new file mode 100644
index 0000000000..2e68e9832f
--- /dev/null
+++ b/test/runtime/samples/spread-element-input/_config.js
@@ -0,0 +1,9 @@
+export default {
+	props: {
+		props: {
+			'data-foo': 'bar'
+		}
+	},
+
+	html: '<input data-foo="bar">'
+};
diff --git a/test/runtime/samples/spread-element-input/main.svelte b/test/runtime/samples/spread-element-input/main.svelte
new file mode 100644
index 0000000000..c933863b98
--- /dev/null
+++ b/test/runtime/samples/spread-element-input/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let value;
+	export let props;
+</script>
+
+<input bind:value {...props}>
\ No newline at end of file
diff --git a/test/runtime/samples/spread-element-multiple-dependencies/_config.js b/test/runtime/samples/spread-element-multiple-dependencies/_config.js
new file mode 100644
index 0000000000..6183e6bf6e
--- /dev/null
+++ b/test/runtime/samples/spread-element-multiple-dependencies/_config.js
@@ -0,0 +1,10 @@
+export default {
+	html: "<div class='b' title='baz'></div>",
+	test({ assert, component, target }) {
+		component.foo = true;
+		assert.htmlEqual(
+			target.innerHTML,
+			"<div class='a' title='baz'></div>"
+		);
+	}
+};
diff --git a/test/runtime/samples/spread-element-multiple-dependencies/main.svelte b/test/runtime/samples/spread-element-multiple-dependencies/main.svelte
new file mode 100644
index 0000000000..a1ed0ba645
--- /dev/null
+++ b/test/runtime/samples/spread-element-multiple-dependencies/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let foo = false;
+	export let a = 'a';
+	export let b = 'b';
+	export let bar = { title: 'baz' };
+</script>
+
+<div class={foo ? a : b} {...bar}></div>
diff --git a/test/runtime/samples/spread-element-multiple/_config.js b/test/runtime/samples/spread-element-multiple/_config.js
new file mode 100644
index 0000000000..38afe2fe8e
--- /dev/null
+++ b/test/runtime/samples/spread-element-multiple/_config.js
@@ -0,0 +1,31 @@
+export default {
+	props: {
+		a: {
+			'data-one': 1,
+			'data-two': 2
+		},
+		c: {
+			'data-b': 'overridden'
+		},
+		d: 'deeeeee'
+	},
+
+	html: `
+		<div data-one="1" data-two="2" data-b="overridden" data-d="deeeeee" >test</div>
+	`,
+
+	test({ assert, component, target }) {
+		component.a = {
+			'data-one': 10
+		};
+		component.c = {
+			'data-c': 'new'
+		};
+		component.d = 'DEEEEEE';
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<div data-one="10" data-b="b" data-c="new" data-d="DEEEEEE" >test</div>'
+		);
+	}
+};
diff --git a/test/runtime/samples/spread-element-multiple/main.svelte b/test/runtime/samples/spread-element-multiple/main.svelte
new file mode 100644
index 0000000000..a71100306e
--- /dev/null
+++ b/test/runtime/samples/spread-element-multiple/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let a;
+	export let c;
+	export let d;
+</script>
+
+<div {...a} data-b="b" {...c} data-d={d} >test</div>
\ No newline at end of file
diff --git a/test/runtime/samples/spread-element-readonly/_config.js b/test/runtime/samples/spread-element-readonly/_config.js
new file mode 100644
index 0000000000..5e33acb0aa
--- /dev/null
+++ b/test/runtime/samples/spread-element-readonly/_config.js
@@ -0,0 +1,9 @@
+export default {
+	skip_if_ssr: true, // DOM and SSR output is different, a separate SSR test exists
+	html: '<input form="qux" list="quu" />',
+
+	test({ assert, target }) {
+		const div = target.querySelector('input');
+		assert.equal(div.value, 'bar');
+	}
+};
diff --git a/test/runtime/samples/spread-element-readonly/main.svelte b/test/runtime/samples/spread-element-readonly/main.svelte
new file mode 100644
index 0000000000..fc8c849396
--- /dev/null
+++ b/test/runtime/samples/spread-element-readonly/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let props = {
+		value: 'bar',
+		form: 'qux',
+		list: 'quu',
+	};
+</script>
+
+<input {...props} />
diff --git a/test/runtime/samples/spread-element-removal/_config.js b/test/runtime/samples/spread-element-removal/_config.js
new file mode 100644
index 0000000000..1fd2443369
--- /dev/null
+++ b/test/runtime/samples/spread-element-removal/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<input>'
+};
diff --git a/test/runtime/samples/spread-element-removal/main.svelte b/test/runtime/samples/spread-element-removal/main.svelte
new file mode 100644
index 0000000000..f6adc82c80
--- /dev/null
+++ b/test/runtime/samples/spread-element-removal/main.svelte
@@ -0,0 +1 @@
+<input placeholder='foo' {...{ placeholder: null }}>
diff --git a/test/runtime/samples/spread-element-scope/_config.js b/test/runtime/samples/spread-element-scope/_config.js
new file mode 100644
index 0000000000..457524ca37
--- /dev/null
+++ b/test/runtime/samples/spread-element-scope/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: `
+		<div class="foo svelte-xg5rbo">red</div>
+		<div class="qux svelte-xg5rbo">red</div>
+		<div class="bar svelte-xg5rbo">red and bold</div>
+	`
+};
diff --git a/test/runtime/samples/spread-element-scope/main.svelte b/test/runtime/samples/spread-element-scope/main.svelte
new file mode 100644
index 0000000000..7a25f90939
--- /dev/null
+++ b/test/runtime/samples/spread-element-scope/main.svelte
@@ -0,0 +1,10 @@
+<style>
+	div { color: red; }
+	.bar { font-weight: bold; }
+</style>
+
+<div {...{ class: 'bar' }} class='foo'>red</div>
+
+<div class='foo' {...{ class: 'qux' }}>red</div>
+
+<div {...{ class: 'bar' }}>red and bold</div>
diff --git a/test/runtime/samples/spread-element-select-value-undefined/Select.svelte b/test/runtime/samples/spread-element-select-value-undefined/Select.svelte
new file mode 100644
index 0000000000..6f5dadf001
--- /dev/null
+++ b/test/runtime/samples/spread-element-select-value-undefined/Select.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let options = [];
+	export let value = "";
+	export let label = "";
+</script>
+
+<select bind:value {...$$restProps}>
+	{#each options as option}
+		<option>{option}</option>
+	{/each}
+</select>
+<p>{label}</p>
diff --git a/test/runtime/samples/spread-element-select-value-undefined/_config.js b/test/runtime/samples/spread-element-select-value-undefined/_config.js
new file mode 100644
index 0000000000..0c2c76a119
--- /dev/null
+++ b/test/runtime/samples/spread-element-select-value-undefined/_config.js
@@ -0,0 +1,11 @@
+export default {
+	async test({ assert, component, target }) {
+		const select = target.querySelector('select');
+
+		assert.equal(select.value, '1');
+
+		component.label = 'hoge';
+
+		assert.equal(select.value, '1');
+	}
+};
diff --git a/test/runtime/samples/spread-element-select-value-undefined/main.svelte b/test/runtime/samples/spread-element-select-value-undefined/main.svelte
new file mode 100644
index 0000000000..57a2e3cf3e
--- /dev/null
+++ b/test/runtime/samples/spread-element-select-value-undefined/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Select from "./Select.svelte";
+	let value = {
+		a: "1",
+		b: "1",
+	};
+	const options = ["1", "2", "3"];
+	export let label = "test";
+</script>
+
+<Select bind:value={value.a} {options} label={label} />
diff --git a/test/runtime/samples/spread-element/_config.js b/test/runtime/samples/spread-element/_config.js
new file mode 100644
index 0000000000..2332891b67
--- /dev/null
+++ b/test/runtime/samples/spread-element/_config.js
@@ -0,0 +1,21 @@
+export default {
+	html: '<div data-named="value" data-foo="bar">red</div>',
+
+	test({ assert, component, target }) {
+		const div = target.querySelector( 'div' );
+
+		assert.equal( div.dataset.foo, 'bar' );
+		assert.equal( div.dataset.named, 'value' );
+
+		component.color = 'blue';
+		component.props = { 'data-foo': 'baz', 'data-named': 'qux' };
+		assert.htmlEqual( target.innerHTML, '<div data-named="value" data-foo="baz">blue</div>' );
+		assert.equal( div.dataset.foo, 'baz' );
+		assert.equal( div.dataset.named, 'value' );
+
+		component.color = 'blue';
+		component.props = {};
+		assert.htmlEqual( target.innerHTML, '<div data-named="value">blue</div>' );
+		assert.equal( div.dataset.foo, undefined );
+	}
+};
diff --git a/test/runtime/samples/spread-element/main.svelte b/test/runtime/samples/spread-element/main.svelte
new file mode 100644
index 0000000000..bf469e30ed
--- /dev/null
+++ b/test/runtime/samples/spread-element/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let props = {
+		'data-foo': 'bar',
+		'data-named': 'qux'
+	};
+	export let color = 'red';
+</script>
+
+<div {...props} data-named="value">{color}</div>
diff --git a/test/runtime/samples/spread-own-props/Widget.svelte b/test/runtime/samples/spread-own-props/Widget.svelte
new file mode 100644
index 0000000000..40de25bb55
--- /dev/null
+++ b/test/runtime/samples/spread-own-props/Widget.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let foo;
+	export let baz;
+	export let qux;
+	export let quux;
+</script>
+
+<p>foo: {foo}</p>
+<p>baz: {baz} ({typeof baz})</p>
+<p>qux: {qux}</p>
+<p>quux: {quux}</p>
diff --git a/test/runtime/samples/spread-own-props/_config.js b/test/runtime/samples/spread-own-props/_config.js
new file mode 100644
index 0000000000..e834cc95f1
--- /dev/null
+++ b/test/runtime/samples/spread-own-props/_config.js
@@ -0,0 +1,31 @@
+export default {
+	props: {
+		foo: 'lol',
+		baz: 40 + 2,
+		qux: `this is a ${'piece of'} string`,
+		quux: 'core'
+	},
+
+	html: `
+		<div><p>foo: lol</p>
+		<p>baz: 42 (number)</p>
+		<p>qux: named</p>
+		<p>quux: core</p></div>
+	`,
+
+	async test({ assert, component, target }) {
+		await component.$set({
+			foo: 'wut',
+			baz: 40 + 3,
+			qux: `this is a ${'rather boring'} string`,
+			quux: 'heart'
+		});
+
+		assert.htmlEqual(target.innerHTML, `
+			<div><p>foo: wut</p>
+			<p>baz: 43 (number)</p>
+			<p>qux: named</p>
+			<p>quux: heart</p></div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/spread-own-props/main.svelte b/test/runtime/samples/spread-own-props/main.svelte
new file mode 100644
index 0000000000..4c9338ffea
--- /dev/null
+++ b/test/runtime/samples/spread-own-props/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<div>
+	<Widget {...$$props} qux="named"/>
+</div>
diff --git a/test/runtime/samples/spread-reuse-levels/Nested.svelte b/test/runtime/samples/spread-reuse-levels/Nested.svelte
new file mode 100644
index 0000000000..800d6cd602
--- /dev/null
+++ b/test/runtime/samples/spread-reuse-levels/Nested.svelte
@@ -0,0 +1,21 @@
+<script>
+	import { beforeUpdate } from 'svelte';
+
+	export let a, b, c;
+
+	let changed = {};
+	let previous = {};
+
+	beforeUpdate(() => {
+		changed.a = a !== previous.a;
+		changed.b = b !== previous.b;
+		changed.c = c !== previous.c;
+
+		previous.a = a;
+		previous.b = b;
+		previous.c = c;
+	});
+</script>
+
+<pre>{JSON.stringify({ a, b, c })}</pre>
+<pre>{JSON.stringify(changed)}</pre>
\ No newline at end of file
diff --git a/test/runtime/samples/spread-reuse-levels/_config.js b/test/runtime/samples/spread-reuse-levels/_config.js
new file mode 100644
index 0000000000..5acd36bdf8
--- /dev/null
+++ b/test/runtime/samples/spread-reuse-levels/_config.js
@@ -0,0 +1,20 @@
+export default {
+	html: `
+		<pre>{"a":1,"b":[1],"c":42}</pre>
+		<pre>{"a":false,"b":false,"c":false}</pre>
+	`,
+
+	ssrHtml: `
+		<pre>{"a":1,"b":[1],"c":42}</pre>
+		<pre>{}</pre>
+	`,
+
+	test({ assert, component, target }) {
+		component.a = 2;
+
+		assert.htmlEqual(target.innerHTML, `
+			<pre>{"a":2,"b":[1],"c":42}</pre>
+			<pre>{"a":true,"b":false,"c":false}</pre>
+		`);
+	}
+};
diff --git a/test/runtime/samples/spread-reuse-levels/main.svelte b/test/runtime/samples/spread-reuse-levels/main.svelte
new file mode 100644
index 0000000000..a22ecfc1bb
--- /dev/null
+++ b/test/runtime/samples/spread-reuse-levels/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let a = 1;
+	let x = {};
+</script>
+
+<Nested {...x} {a} b={[1]} c={42}/>
\ No newline at end of file
diff --git a/test/runtime/samples/spring/_config.js b/test/runtime/samples/spring/_config.js
new file mode 100644
index 0000000000..5fd33b2e51
--- /dev/null
+++ b/test/runtime/samples/spring/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<p>0</p>'
+};
diff --git a/test/runtime/samples/spring/main.svelte b/test/runtime/samples/spring/main.svelte
new file mode 100644
index 0000000000..39c9afde1d
--- /dev/null
+++ b/test/runtime/samples/spring/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { spring } from 'svelte/motion';
+
+	const x = spring(0);
+	x.set(1);
+</script>
+
+<p>{$x}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/state-deconflicted/_config.js b/test/runtime/samples/state-deconflicted/_config.js
new file mode 100644
index 0000000000..ff1b10b481
--- /dev/null
+++ b/test/runtime/samples/state-deconflicted/_config.js
@@ -0,0 +1,52 @@
+export default {
+	props: {
+		state: 'deconflicted',
+		states: [
+			'Alabama',
+			'Alaska',
+			'Arizona',
+			'Arkansas',
+			'...and some others'
+		]
+	},
+
+	html: `
+		<p>Current state: deconflicted</p>
+
+		<ul>
+			<li>Alabama</li>
+			<li>Alaska</li>
+			<li>Arizona</li>
+			<li>Arkansas</li>
+			<li>...and some others</li>
+		</ul>
+	`,
+
+	test({ assert, component, target }) {
+		component.states = [
+			'Maine',
+			'Maryland',
+			'Massachusetts',
+			'Michigan',
+			'Minnesota',
+			'Mississippi',
+			'Missouri',
+			'Montana'
+		];
+
+		assert.htmlEqual( target.innerHTML, `
+			<p>Current state: deconflicted</p>
+
+			<ul>
+				<li>Maine</li>
+				<li>Maryland</li>
+				<li>Massachusetts</li>
+				<li>Michigan</li>
+				<li>Minnesota</li>
+				<li>Mississippi</li>
+				<li>Missouri</li>
+				<li>Montana</li>
+			</ul>
+		` );
+	}
+};
diff --git a/test/runtime/samples/state-deconflicted/main.svelte b/test/runtime/samples/state-deconflicted/main.svelte
new file mode 100644
index 0000000000..a03a5a7919
--- /dev/null
+++ b/test/runtime/samples/state-deconflicted/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let state;
+	export let states;
+</script>
+
+<p>Current state: {state}</p>
+
+<ul>
+	{#each states as state}
+		<li>{state}</li>
+	{/each}
+</ul>
\ No newline at end of file
diff --git a/test/runtime/samples/store-assignment-updates-destructure/_config.js b/test/runtime/samples/store-assignment-updates-destructure/_config.js
new file mode 100644
index 0000000000..7a1023614c
--- /dev/null
+++ b/test/runtime/samples/store-assignment-updates-destructure/_config.js
@@ -0,0 +1,11 @@
+export default {
+	html: `
+		<div>$userName1: user1</div>
+		<div>$userName2: undefined</div>
+		<div>$userName3: undefined</div>
+		<div>$userName4: user4</div>
+		<div>$userName5: undefined</div>
+		<div>$userName6: user6</div>
+		<div>$userName7: undefined</div>
+	`
+};
diff --git a/test/runtime/samples/store-assignment-updates-destructure/main.svelte b/test/runtime/samples/store-assignment-updates-destructure/main.svelte
new file mode 100644
index 0000000000..71e02fe16d
--- /dev/null
+++ b/test/runtime/samples/store-assignment-updates-destructure/main.svelte
@@ -0,0 +1,34 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	let userName1 = writable('init1');
+	let userName2 = writable('init2');
+	let userName3 = writable('init3');
+	let userName4 = writable('init4');
+	let userName5 = writable('init5');
+	let userName6 = writable('init6');
+	let userName7 = writable('init7');
+	
+	let obj = {
+		userName1: 'user1', 
+		userName2: 'user2', 
+		userName3: 'user3', 
+		$userName4: 'user4',
+		userName5: 'user5',
+		$userName6: 'user6',
+		userName7: 'user7',
+	};
+	
+	({userName1: $userName1, $userName2 } = obj);
+	({$userName3} = obj);
+	({$userName4} = obj);
+	({$userName5, $userName6, $userName7} = obj);
+</script>
+
+<div>$userName1: {$userName1}</div>
+<div>$userName2: {$userName2}</div>
+<div>$userName3: {$userName3}</div>
+<div>$userName4: {$userName4}</div>
+<div>$userName5: {$userName5}</div>
+<div>$userName6: {$userName6}</div>
+<div>$userName7: {$userName7}</div>
diff --git a/test/runtime/samples/store-assignment-updates-property/_config.js b/test/runtime/samples/store-assignment-updates-property/_config.js
new file mode 100644
index 0000000000..467e7782d6
--- /dev/null
+++ b/test/runtime/samples/store-assignment-updates-property/_config.js
@@ -0,0 +1,31 @@
+export default {
+	html: `
+		<p>a: {"foo":3,"bar":2}</p>
+		<p>b: {"foo":3}</p>
+		<button></button>
+		<button></button>
+	`,
+
+	async test({ assert, target, window }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+		const click = new window.MouseEvent('click');
+
+		await btn1.dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>a: {"foo":4,"bar":2}</p>
+			<p>b: {"foo":4,"baz":0}</p>
+			<button></button>
+			<button></button>
+		`);
+
+		await btn2.dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>a: {"foo":5,"bar":2}</p>
+			<p>b: {"foo":5,"qux":0}</p>
+			<button></button>
+			<button></button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/store-assignment-updates-property/main.svelte b/test/runtime/samples/store-assignment-updates-property/main.svelte
new file mode 100644
index 0000000000..c3196a278c
--- /dev/null
+++ b/test/runtime/samples/store-assignment-updates-property/main.svelte
@@ -0,0 +1,24 @@
+<script>
+	import { writable } from '../../../../store';
+
+	const a = writable({ foo: 1, bar: 2 });
+	$a.foo = 3;
+
+	const b = writable({ foo: 1, bar: 2 });
+	$b = { foo: 3 };
+
+	function update() {
+		$a.foo = $a.foo + 1;
+		$b = { foo: $b.foo + 1, qux: 0 };
+	}
+</script>
+
+<p>a: {JSON.stringify($a)}</p>
+<p>b: {JSON.stringify($b)}</p>
+
+<button on:click={() => {
+	$a.foo = $a.foo + 1;
+	$b = { foo: $b.foo + 1, baz: 0 };
+}} />
+
+<button on:click={update} />
\ No newline at end of file
diff --git a/test/runtime/samples/store-assignment-updates-reactive/_config.js b/test/runtime/samples/store-assignment-updates-reactive/_config.js
new file mode 100644
index 0000000000..a9606d9d68
--- /dev/null
+++ b/test/runtime/samples/store-assignment-updates-reactive/_config.js
@@ -0,0 +1,42 @@
+import { writable } from '../../../../store';
+
+const c = writable(0);
+
+export default {
+	props: {
+		c
+	},
+
+	html: `
+		<p>a: 0</p>
+		<p>b: 0</p>
+		<p>c: 0</p>
+
+		<button>+1</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>a: 1</p>
+			<p>b: 1</p>
+			<p>c: 1</p>
+
+			<button>+1</button>
+		`);
+
+		await component.c.set(42);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>a: 42</p>
+			<p>b: 42</p>
+			<p>c: 42</p>
+
+			<button>+1</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/store-assignment-updates-reactive/main.svelte b/test/runtime/samples/store-assignment-updates-reactive/main.svelte
new file mode 100644
index 0000000000..9975ea87b8
--- /dev/null
+++ b/test/runtime/samples/store-assignment-updates-reactive/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	import { writable } from '../../../../store';
+
+	const a = writable();
+	const b = writable();
+	export let c;
+
+	$: $a = $b;
+	$: $b = $c;
+
+	function increment() {
+		$c += 1;
+	}
+</script>
+
+<p>a: {$a}</p>
+<p>b: {$b}</p>
+<p>c: {$c}</p>
+
+<button on:click={increment}>+1</button>
\ No newline at end of file
diff --git a/test/runtime/samples/store-assignment-updates/_config.js b/test/runtime/samples/store-assignment-updates/_config.js
new file mode 100644
index 0000000000..c4a09a978e
--- /dev/null
+++ b/test/runtime/samples/store-assignment-updates/_config.js
@@ -0,0 +1,31 @@
+import { writable } from '../../../../store';
+
+export default {
+	props: {
+		count: writable(0)
+	},
+
+	html: `
+		<button>count 0</button>
+		<p>doubled: 0</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>count 1</button>
+			<p>doubled: 2</p>
+		`);
+
+		await component.count.set(42);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>count 42</button>
+			<p>doubled: 84</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/store-assignment-updates/main.svelte b/test/runtime/samples/store-assignment-updates/main.svelte
new file mode 100644
index 0000000000..804730bd62
--- /dev/null
+++ b/test/runtime/samples/store-assignment-updates/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { derived } from 'svelte/store';
+
+	export let count;
+
+	const doubled = derived(count, $count => $count * 2);
+</script>
+
+<button on:click="{() => $count += 1}">count {$count}</button>
+<p>doubled: {$doubled}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/store-auto-resubscribe-immediate/_config.js b/test/runtime/samples/store-auto-resubscribe-immediate/_config.js
new file mode 100644
index 0000000000..47a901d793
--- /dev/null
+++ b/test/runtime/samples/store-auto-resubscribe-immediate/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '{"answer":4}'
+};
diff --git a/test/runtime/samples/store-auto-resubscribe-immediate/main.svelte b/test/runtime/samples/store-auto-resubscribe-immediate/main.svelte
new file mode 100644
index 0000000000..8dd40ae7ae
--- /dev/null
+++ b/test/runtime/samples/store-auto-resubscribe-immediate/main.svelte
@@ -0,0 +1,31 @@
+<script>
+	import { writable } from '../../../../store';
+
+	let value = writable({ foo: 1, bar: 2 });
+	$value.foo = $value.foo + $value.bar; // 3
+	$value.bar = $value.foo * $value.bar; // 6
+
+	// should resubscribe immediately
+	value = writable({ foo: $value.foo + 2, bar: $value.bar - 2 }); // { foo: 5, bar: 4 }
+
+	// should mutate the store value
+	$value.baz = $value.foo + $value.bar; // { foo: 5, bar: 4, baz: 9 }
+
+	// should resubscribe immediately
+	value = writable({ qux: $value.baz - $value.foo }); // { qux: 4 }
+
+	// making sure instrumentation returns the expression value
+	$value = {
+		one: writable(
+			$value = {
+				two: ({ $value } = { $value: { fred: $value.qux } }) // { fred: 4 }
+			} // { two: { $value: { fred: 4 } } }
+		) // { one: { two: { $value: { fred: 4 } } } }
+	};
+
+	const one = $value.one;
+
+	value.update(val => ({ answer: $one.two.$value.fred })); // { answer: 4 }
+</script>
+
+{JSON.stringify($value)}
diff --git a/test/runtime/samples/store-auto-subscribe-event-callback/_config.js b/test/runtime/samples/store-auto-subscribe-event-callback/_config.js
new file mode 100644
index 0000000000..7897036809
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-event-callback/_config.js
@@ -0,0 +1,22 @@
+export default {
+	html: `
+	<input class="input" placeholder="Type here" type="text">
+	Dirty: false
+	Valid: false
+	`,
+
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+
+		input.value = 'foo';
+		const inputEvent = new window.InputEvent('input');
+
+		await input.dispatchEvent(inputEvent);
+
+		assert.htmlEqual(target.innerHTML, `
+		<input class="input" placeholder="Type here" type="text">
+		Dirty: true
+		Valid: true
+		`);
+	}
+};
diff --git a/test/runtime/samples/store-auto-subscribe-event-callback/main.svelte b/test/runtime/samples/store-auto-subscribe-event-callback/main.svelte
new file mode 100644
index 0000000000..eca7c202cd
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-event-callback/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	export function createValidator() {
+		const { subscribe, set } = writable({ dirty: false, valid: false });
+
+		function action(node, binding) {
+			return {
+				update(value) {
+					set({ dirty: true, valid: value !== '' });
+				}
+			};
+		}
+
+		return [{ subscribe }, action];
+	}
+	const [validity, validate] = createValidator();
+	let email = null;
+</script>
+
+<input class="input"
+	type="text"
+	bind:value={email}
+	placeholder="Type here"
+	use:validate={email}
+/>
+
+Dirty: {$validity.dirty}
+Valid: {$validity.valid}
diff --git a/test/runtime/samples/store-auto-subscribe-immediate-multiple-vars/_config.js b/test/runtime/samples/store-auto-subscribe-immediate-multiple-vars/_config.js
new file mode 100644
index 0000000000..fdaa951666
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-immediate-multiple-vars/_config.js
@@ -0,0 +1,9 @@
+export default {
+	html: `
+		<p>42</p>
+	`,
+
+	async test({ assert, component }) {
+		assert.equal(component.initial_foo, 42);
+	}
+};
diff --git a/test/runtime/samples/store-auto-subscribe-immediate-multiple-vars/main.svelte b/test/runtime/samples/store-auto-subscribe-immediate-multiple-vars/main.svelte
new file mode 100644
index 0000000000..e98b6002a1
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-immediate-multiple-vars/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { writable } from 'svelte/store';
+	const foo = writable(42), bar = 'something else';
+	export let initial_foo = $foo;
+</script>
+
+<p>{initial_foo}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/store-auto-subscribe-immediate/_config.js b/test/runtime/samples/store-auto-subscribe-immediate/_config.js
new file mode 100644
index 0000000000..fdaa951666
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-immediate/_config.js
@@ -0,0 +1,9 @@
+export default {
+	html: `
+		<p>42</p>
+	`,
+
+	async test({ assert, component }) {
+		assert.equal(component.initial_foo, 42);
+	}
+};
diff --git a/test/runtime/samples/store-auto-subscribe-immediate/main.svelte b/test/runtime/samples/store-auto-subscribe-immediate/main.svelte
new file mode 100644
index 0000000000..b809bb81f6
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-immediate/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { writable } from 'svelte/store';
+	let foo = writable(42);
+	export let initial_foo = $foo;
+</script>
+
+<p>{initial_foo}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/store-auto-subscribe-implicit/_config.js b/test/runtime/samples/store-auto-subscribe-implicit/_config.js
new file mode 100644
index 0000000000..f132901bf0
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-implicit/_config.js
@@ -0,0 +1,28 @@
+import { writable } from '../../../../store';
+
+export default {
+	props: {
+		count: writable(0)
+	},
+
+	html: `
+		<button>count 0</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>count 1</button>
+		`);
+
+		await component.count.set(42);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>count 42</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/store-auto-subscribe-implicit/main.svelte b/test/runtime/samples/store-auto-subscribe-implicit/main.svelte
new file mode 100644
index 0000000000..849de85acf
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-implicit/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let count;
+</script>
+
+<button on:click="{() => count.update(n => n + 1)}">count {$count}</button>
\ No newline at end of file
diff --git a/test/runtime/samples/store-auto-subscribe-in-each/_config.js b/test/runtime/samples/store-auto-subscribe-in-each/_config.js
new file mode 100644
index 0000000000..8c8fa001d8
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-in-each/_config.js
@@ -0,0 +1,40 @@
+import { writable } from '../../../../store';
+
+export default {
+	skip: true,
+
+	props: {
+		things: [
+			writable('a'),
+			writable('b'),
+			writable('c')
+		]
+	},
+
+	html: `
+		<button>a</button>
+		<button>b</button>
+		<button>c</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const click = new window.MouseEvent('click');
+
+		await buttons[1].dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>a</button>
+			<button>B</button>
+			<button>c</button>
+		`);
+
+		await component.things[1].set('d');
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>d</button>
+			<button>B</button>
+			<button>c</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/store-auto-subscribe-in-each/main.svelte b/test/runtime/samples/store-auto-subscribe-in-each/main.svelte
new file mode 100644
index 0000000000..baf120838c
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-in-each/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let things;
+</script>
+
+{#each things as thing}
+	<button on:click="{() => thing.update(n => n.toUpperCase())}">{$thing}</button>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/App.svelte b/test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/App.svelte
new file mode 100644
index 0000000000..250305b62c
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/App.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let store_container;
+
+	$: ({ store } = store_container);
+	$: value = $store;
+</script>
+<div>{value}</div>
+<div>{$store}</div>
diff --git a/test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/_config.js b/test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/_config.js
new file mode 100644
index 0000000000..560eb44a9a
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: `
+		<div>Hello World</div>
+		<div>Hello World</div>
+	`,
+
+	async test({ assert, component, target }) {
+		await component.update_value('Hi Svelte');
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>Hi Svelte</div>
+			<div>Hi Svelte</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/main.svelte b/test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/main.svelte
new file mode 100644
index 0000000000..4e771617bb
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-in-reactive-declaration-2/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { writable } from 'svelte/store';
+	import Child from './App.svelte';
+
+	const store_container = { store: writable('Hello World') };
+
+	export function update_value(value) {
+		store_container.store = writable(value);
+	}
+</script>
+
+<Child {store_container} />
diff --git a/test/runtime/samples/store-auto-subscribe-in-reactive-declaration/_config.js b/test/runtime/samples/store-auto-subscribe-in-reactive-declaration/_config.js
new file mode 100644
index 0000000000..cf1bdce68a
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-in-reactive-declaration/_config.js
@@ -0,0 +1,28 @@
+import { writable } from '../../../../store';
+
+export default {
+	props: {
+		count: writable(0)
+	},
+
+	html: `
+		<button>double 0</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>double 2</button>
+		`);
+
+		await component.count.set(42);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>double 84</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/store-auto-subscribe-in-reactive-declaration/main.svelte b/test/runtime/samples/store-auto-subscribe-in-reactive-declaration/main.svelte
new file mode 100644
index 0000000000..3233d38d2d
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-in-reactive-declaration/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let count;
+
+	let double;
+	$: double = $count * 2;
+</script>
+
+<button on:click="{() => count.update(n => n + 1)}">double {double}</button>
\ No newline at end of file
diff --git a/test/runtime/samples/store-auto-subscribe-in-script/_config.js b/test/runtime/samples/store-auto-subscribe-in-script/_config.js
new file mode 100644
index 0000000000..7ea7eac87b
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-in-script/_config.js
@@ -0,0 +1,26 @@
+import { writable } from '../../../../store';
+
+const count = writable(0);
+
+export default {
+	props: {
+		count
+	},
+
+	html: `
+		<button>+1</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		assert.equal(component.get_count(), 0);
+
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+		assert.equal(component.get_count(), 1);
+
+		await count.set(42);
+		assert.equal(component.get_count(), 42);
+	}
+};
diff --git a/test/runtime/samples/store-auto-subscribe-in-script/main.svelte b/test/runtime/samples/store-auto-subscribe-in-script/main.svelte
new file mode 100644
index 0000000000..b47bddf9c1
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-in-script/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let count;
+
+	export function get_count() {
+		return $count;
+	}
+</script>
+
+<button on:click="{() => count.update(n => n + 1)}">+1</button>
\ No newline at end of file
diff --git a/test/runtime/samples/store-auto-subscribe-missing-global-script/_config.js b/test/runtime/samples/store-auto-subscribe-missing-global-script/_config.js
new file mode 100644
index 0000000000..f3df26c0de
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-missing-global-script/_config.js
@@ -0,0 +1,3 @@
+export default {
+	error: 'missingGlobal is not defined'
+};
diff --git a/test/runtime/samples/store-auto-subscribe-missing-global-script/main.svelte b/test/runtime/samples/store-auto-subscribe-missing-global-script/main.svelte
new file mode 100644
index 0000000000..210734b71d
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-missing-global-script/main.svelte
@@ -0,0 +1,3 @@
+<script>
+	$: $missingGlobal;
+</script>
diff --git a/test/runtime/samples/store-auto-subscribe-missing-global-template/_config.js b/test/runtime/samples/store-auto-subscribe-missing-global-template/_config.js
new file mode 100644
index 0000000000..f3df26c0de
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-missing-global-template/_config.js
@@ -0,0 +1,3 @@
+export default {
+	error: 'missingGlobal is not defined'
+};
diff --git a/test/runtime/samples/store-auto-subscribe-missing-global-template/main.svelte b/test/runtime/samples/store-auto-subscribe-missing-global-template/main.svelte
new file mode 100644
index 0000000000..196836edef
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-missing-global-template/main.svelte
@@ -0,0 +1 @@
+<p>{$missingGlobal}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/store-auto-subscribe-nullish/_config.js b/test/runtime/samples/store-auto-subscribe-nullish/_config.js
new file mode 100644
index 0000000000..52e21cef05
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-nullish/_config.js
@@ -0,0 +1,13 @@
+import { writable } from '../../../../store';
+
+export default {
+	html: `
+		<p>undefined</p>
+	`,
+	async test({ assert, component, target }) {
+		component.store = writable('foo');
+		assert.htmlEqual(target.innerHTML, `
+			<p>foo</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/store-auto-subscribe-nullish/main.svelte b/test/runtime/samples/store-auto-subscribe-nullish/main.svelte
new file mode 100644
index 0000000000..9c1ed4a560
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe-nullish/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let store;
+</script>
+
+<p>{$store}</p>
diff --git a/test/runtime/samples/store-auto-subscribe/_config.js b/test/runtime/samples/store-auto-subscribe/_config.js
new file mode 100644
index 0000000000..f132901bf0
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe/_config.js
@@ -0,0 +1,28 @@
+import { writable } from '../../../../store';
+
+export default {
+	props: {
+		count: writable(0)
+	},
+
+	html: `
+		<button>count 0</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		const click = new window.MouseEvent('click');
+
+		await button.dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>count 1</button>
+		`);
+
+		await component.count.set(42);
+
+		assert.htmlEqual(target.innerHTML, `
+			<button>count 42</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/store-auto-subscribe/main.svelte b/test/runtime/samples/store-auto-subscribe/main.svelte
new file mode 100644
index 0000000000..849de85acf
--- /dev/null
+++ b/test/runtime/samples/store-auto-subscribe/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let count;
+</script>
+
+<button on:click="{() => count.update(n => n + 1)}">count {$count}</button>
\ No newline at end of file
diff --git a/test/runtime/samples/store-contextual/_config.js b/test/runtime/samples/store-contextual/_config.js
new file mode 100644
index 0000000000..0b7aa6cf33
--- /dev/null
+++ b/test/runtime/samples/store-contextual/_config.js
@@ -0,0 +1,76 @@
+import { writable } from '../../../../store';
+
+const todos = [
+	writable({ done: false, text: 'write docs' }),
+	writable({ done: false, text: 'implement contextual stores' }),
+	writable({ done: false, text: 'go outside' })
+];
+
+export default {
+	error: 'Stores must be declared at the top level of the component (this may change in a future version of Svelte)',
+
+	props: {
+		todos
+	},
+
+	html: `
+		<label>
+			<input type=checkbox>
+			[todo] write docs
+		</label>
+
+		<label>
+			<input type=checkbox>
+			[todo] implement contextual stores
+		</label>
+
+		<label>
+			<input type=checkbox>
+			[todo] go outside
+		</label>
+	`,
+
+	async test({ assert, target, window }) {
+		const inputs = target.querySelectorAll('input');
+		const change = new window.MouseEvent('change');
+
+		inputs[1].checked = true;
+		await inputs[1].dispatchEvent(change);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label>
+				<input type=checkbox>
+				[todo] write docs
+			</label>
+
+			<label>
+				<input type=checkbox>
+				[done] implement contextual stores
+			</label>
+
+			<label>
+				<input type=checkbox>
+				[todo] go outside
+			</label>
+		`);
+
+		await todos[0].update(todo => ({ done: !todo.done, text: todo.text }));
+
+		assert.htmlEqual(target.innerHTML, `
+			<label>
+				<input type=checkbox>
+				[done] write docs
+			</label>
+
+			<label>
+				<input type=checkbox>
+				[done] implement contextual stores
+			</label>
+
+			<label>
+				<input type=checkbox>
+				[todo] go outside
+			</label>
+		`);
+	}
+};
diff --git a/test/runtime/samples/store-contextual/main.svelte b/test/runtime/samples/store-contextual/main.svelte
new file mode 100644
index 0000000000..3687271fdd
--- /dev/null
+++ b/test/runtime/samples/store-contextual/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let todos;
+</script>
+
+{#each todos as todo}
+	<label>
+		<input type=checkbox on:change={e => todo.update(t => ({ done: e.target.checked, text: t.text }))}>
+		{$todo.done ? '[done]' : '[todo]'} {$todo.text}
+	</label>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/store-dev-mode-error/_config.js b/test/runtime/samples/store-dev-mode-error/_config.js
new file mode 100644
index 0000000000..74f4189c36
--- /dev/null
+++ b/test/runtime/samples/store-dev-mode-error/_config.js
@@ -0,0 +1,11 @@
+export default {
+	compileOptions: {
+		dev: true
+	},
+
+	props: {
+		count: 0
+	},
+
+	error: "'count' is not a store with a 'subscribe' method"
+};
diff --git a/test/runtime/samples/store-dev-mode-error/main.svelte b/test/runtime/samples/store-dev-mode-error/main.svelte
new file mode 100644
index 0000000000..849de85acf
--- /dev/null
+++ b/test/runtime/samples/store-dev-mode-error/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let count;
+</script>
+
+<button on:click="{() => count.update(n => n + 1)}">count {$count}</button>
\ No newline at end of file
diff --git a/test/runtime/samples/store-each-binding-deep/_config.js b/test/runtime/samples/store-each-binding-deep/_config.js
new file mode 100644
index 0000000000..c5f2402ae2
--- /dev/null
+++ b/test/runtime/samples/store-each-binding-deep/_config.js
@@ -0,0 +1,14 @@
+export default {
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+
+		const event = new window.Event('input');
+		input.value = 'changed';
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>changed</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/store-each-binding-deep/main.svelte b/test/runtime/samples/store-each-binding-deep/main.svelte
new file mode 100644
index 0000000000..8f1cabf5b8
--- /dev/null
+++ b/test/runtime/samples/store-each-binding-deep/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	let itemStore = writable({prop: {things: [{name: "item store"}]}});
+</script>
+
+{#each $itemStore.prop.things as thing }
+	<input bind:value={thing.name} >
+{/each}
+
+<p>{$itemStore.prop.things[0].name}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/store-each-binding-destructuring/_config.js b/test/runtime/samples/store-each-binding-destructuring/_config.js
new file mode 100644
index 0000000000..c5f2402ae2
--- /dev/null
+++ b/test/runtime/samples/store-each-binding-destructuring/_config.js
@@ -0,0 +1,14 @@
+export default {
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+
+		const event = new window.Event('input');
+		input.value = 'changed';
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>changed</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/store-each-binding-destructuring/main.svelte b/test/runtime/samples/store-each-binding-destructuring/main.svelte
new file mode 100644
index 0000000000..0b68038e73
--- /dev/null
+++ b/test/runtime/samples/store-each-binding-destructuring/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	const items = writable([
+		 { id: 0, text: 'initial' }
+	]);
+</script>
+
+{#each $items as { text }}
+	<input bind:value={text}>
+{/each}
+
+<p>{$items[0].text}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/store-each-binding/_config.js b/test/runtime/samples/store-each-binding/_config.js
new file mode 100644
index 0000000000..c5f2402ae2
--- /dev/null
+++ b/test/runtime/samples/store-each-binding/_config.js
@@ -0,0 +1,14 @@
+export default {
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+
+		const event = new window.Event('input');
+		input.value = 'changed';
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>changed</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/store-each-binding/main.svelte b/test/runtime/samples/store-each-binding/main.svelte
new file mode 100644
index 0000000000..917d5c2001
--- /dev/null
+++ b/test/runtime/samples/store-each-binding/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	const items = writable([
+		 { id: 0, text: 'initial' }
+	]);
+</script>
+
+{#each $items as item}
+	<input bind:value={item.text}>
+{/each}
+
+<p>{$items[0].text}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/store-imported-module-b/_config.js b/test/runtime/samples/store-imported-module-b/_config.js
new file mode 100644
index 0000000000..f3c168e4c1
--- /dev/null
+++ b/test/runtime/samples/store-imported-module-b/_config.js
@@ -0,0 +1,3 @@
+export default {
+	error: 'Cannot reference store value inside <script context="module">'
+};
diff --git a/test/runtime/samples/store-imported-module-b/foo.js b/test/runtime/samples/store-imported-module-b/foo.js
new file mode 100644
index 0000000000..72d8e95cb1
--- /dev/null
+++ b/test/runtime/samples/store-imported-module-b/foo.js
@@ -0,0 +1,3 @@
+import { writable } from '../../../../store';
+
+export default writable(42);
diff --git a/test/runtime/samples/store-imported-module-b/main.svelte b/test/runtime/samples/store-imported-module-b/main.svelte
new file mode 100644
index 0000000000..7abc91d4ed
--- /dev/null
+++ b/test/runtime/samples/store-imported-module-b/main.svelte
@@ -0,0 +1,6 @@
+<script context="module">
+	import foo from './foo.js';
+	const answer = $foo;
+</script>
+
+<p>{answer}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/store-imported-module/_config.js b/test/runtime/samples/store-imported-module/_config.js
new file mode 100644
index 0000000000..42605d128c
--- /dev/null
+++ b/test/runtime/samples/store-imported-module/_config.js
@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<p>42</p>
+	`
+};
diff --git a/test/runtime/samples/store-imported-module/foo.js b/test/runtime/samples/store-imported-module/foo.js
new file mode 100644
index 0000000000..72d8e95cb1
--- /dev/null
+++ b/test/runtime/samples/store-imported-module/foo.js
@@ -0,0 +1,3 @@
+import { writable } from '../../../../store';
+
+export default writable(42);
diff --git a/test/runtime/samples/store-imported-module/main.svelte b/test/runtime/samples/store-imported-module/main.svelte
new file mode 100644
index 0000000000..8710e3d1c6
--- /dev/null
+++ b/test/runtime/samples/store-imported-module/main.svelte
@@ -0,0 +1,9 @@
+<script context="module">
+	import foo from './foo.js';
+</script>
+
+<script>
+	const answer = $foo;
+</script>
+
+<p>{answer}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/store-imported/_config.js b/test/runtime/samples/store-imported/_config.js
new file mode 100644
index 0000000000..ca03c73b84
--- /dev/null
+++ b/test/runtime/samples/store-imported/_config.js
@@ -0,0 +1,7 @@
+export default {
+	compileOptions: { dev: true }, // tests `@validate_store` code generation
+
+	html: `
+		<p>42</p>
+	`
+};
diff --git a/test/runtime/samples/store-imported/foo.js b/test/runtime/samples/store-imported/foo.js
new file mode 100644
index 0000000000..72d8e95cb1
--- /dev/null
+++ b/test/runtime/samples/store-imported/foo.js
@@ -0,0 +1,3 @@
+import { writable } from '../../../../store';
+
+export default writable(42);
diff --git a/test/runtime/samples/store-imported/main.svelte b/test/runtime/samples/store-imported/main.svelte
new file mode 100644
index 0000000000..dc1199a83d
--- /dev/null
+++ b/test/runtime/samples/store-imported/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import foo from './foo.js';
+	const answer = $foo;
+</script>
+
+<p>{answer}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/store-imports-hoisted/_config.js b/test/runtime/samples/store-imports-hoisted/_config.js
new file mode 100644
index 0000000000..ca03c73b84
--- /dev/null
+++ b/test/runtime/samples/store-imports-hoisted/_config.js
@@ -0,0 +1,7 @@
+export default {
+	compileOptions: { dev: true }, // tests `@validate_store` code generation
+
+	html: `
+		<p>42</p>
+	`
+};
diff --git a/test/runtime/samples/store-imports-hoisted/foo.js b/test/runtime/samples/store-imports-hoisted/foo.js
new file mode 100644
index 0000000000..72d8e95cb1
--- /dev/null
+++ b/test/runtime/samples/store-imports-hoisted/foo.js
@@ -0,0 +1,3 @@
+import { writable } from '../../../../store';
+
+export default writable(42);
diff --git a/test/runtime/samples/store-imports-hoisted/main.svelte b/test/runtime/samples/store-imports-hoisted/main.svelte
new file mode 100644
index 0000000000..223572962e
--- /dev/null
+++ b/test/runtime/samples/store-imports-hoisted/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import foo from './foo.js';
+	foo.bar = 'baz';
+	const answer = $foo;
+</script>
+
+<p>{answer}</p>
diff --git a/test/runtime/samples/store-increment-updates-reactive/_config.js b/test/runtime/samples/store-increment-updates-reactive/_config.js
new file mode 100644
index 0000000000..04bf79d3a3
--- /dev/null
+++ b/test/runtime/samples/store-increment-updates-reactive/_config.js
@@ -0,0 +1,8 @@
+export default {
+	html: '0',
+
+	async test({ assert, component, target }) {
+		await component.increment();
+		assert.htmlEqual(target.innerHTML, '1');
+	}
+};
diff --git a/test/runtime/samples/store-increment-updates-reactive/main.svelte b/test/runtime/samples/store-increment-updates-reactive/main.svelte
new file mode 100644
index 0000000000..63d4b68dc1
--- /dev/null
+++ b/test/runtime/samples/store-increment-updates-reactive/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { writable } from '../../../../store';
+
+	const foo = writable(0);
+
+	export function increment() {
+		$foo++;
+	}
+</script>
+
+{$foo}
diff --git a/test/runtime/samples/store-invalidation-while-update-1/_config.js b/test/runtime/samples/store-invalidation-while-update-1/_config.js
new file mode 100644
index 0000000000..bc78193ae7
--- /dev/null
+++ b/test/runtime/samples/store-invalidation-while-update-1/_config.js
@@ -0,0 +1,50 @@
+export default {
+	html: `
+		<input>
+		<div></div>
+		<div>simple</div>
+		<button>click me</button>
+	`,
+	ssrHtml: `
+		<input value="">
+		<div></div>
+		<div>simple</div>
+		<button>click me</button>
+	`,
+
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+		const button = target.querySelector('button');
+
+		const inputEvent = new window.InputEvent('input');
+		const clickEvent = new window.MouseEvent('click');
+
+		input.value = 'foo';
+		await input.dispatchEvent(inputEvent);
+
+		assert.htmlEqual(target.innerHTML, `
+		<input>
+		<div>foo</div>
+		<div>foo</div>
+		<button>click me</button>
+		`);
+
+		await button.dispatchEvent(clickEvent);
+		assert.htmlEqual(target.innerHTML, `
+		<input>
+		<div>foo</div>
+		<div>clicked</div>
+		<button>click me</button>
+		`);
+
+		input.value = 'bar';
+		await input.dispatchEvent(inputEvent);
+
+		assert.htmlEqual(target.innerHTML, `
+		<input>
+		<div>bar</div>
+		<div>bar</div>
+		<button>click me</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/store-invalidation-while-update-1/main.svelte b/test/runtime/samples/store-invalidation-while-update-1/main.svelte
new file mode 100644
index 0000000000..f74808ee2e
--- /dev/null
+++ b/test/runtime/samples/store-invalidation-while-update-1/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	import {writable} from 'svelte/store';
+
+	function action(node, binding) {
+		return {
+			update: (value) => s.set(value),
+		}    
+	}
+	let s = writable("simple");
+	let v = "";
+	
+	function click() {
+		s.set('clicked');
+	}
+</script>
+
+<input bind:value={v} use:action={v}>
+<div>{v}</div>
+<div>{$s}</div>
+<button on:click={click}>click me</button>
diff --git a/test/runtime/samples/store-invalidation-while-update-2/_config.js b/test/runtime/samples/store-invalidation-while-update-2/_config.js
new file mode 100644
index 0000000000..78104ef293
--- /dev/null
+++ b/test/runtime/samples/store-invalidation-while-update-2/_config.js
@@ -0,0 +1,50 @@
+export default {
+	html: `
+		<div></div>
+		<div>simple</div>
+		<input>
+		<button>click me</button>
+	`,
+	ssrHtml: `
+		<div></div>
+		<div>simple</div>
+		<input value="">
+		<button>click me</button>
+	`,
+
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+		const button = target.querySelector('button');
+
+		const inputEvent = new window.InputEvent('input');
+		const clickEvent = new window.MouseEvent('click');
+
+		input.value = 'foo';
+		await input.dispatchEvent(inputEvent);
+
+		assert.htmlEqual(target.innerHTML, `
+		<div>foo</div>
+		<div>foo</div>
+		<input>
+		<button>click me</button>
+		`);
+
+		await button.dispatchEvent(clickEvent);
+		assert.htmlEqual(target.innerHTML, `
+		<div>foo</div>
+		<div>clicked</div>
+		<input>
+		<button>click me</button>
+		`);
+
+		input.value = 'bar';
+		await input.dispatchEvent(inputEvent);
+
+		assert.htmlEqual(target.innerHTML, `
+		<div>bar</div>
+		<div>bar</div>
+		<input>
+		<button>click me</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/store-invalidation-while-update-2/main.svelte b/test/runtime/samples/store-invalidation-while-update-2/main.svelte
new file mode 100644
index 0000000000..83e13742ce
--- /dev/null
+++ b/test/runtime/samples/store-invalidation-while-update-2/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	import {writable} from 'svelte/store';
+
+	function action(node, binding) {
+		return {
+			update: (value) => s.set(value),
+		}    
+	}
+	let s = writable("simple");
+	let v = "";
+	
+	function click() {
+		s.set('clicked');
+	}
+</script>
+
+<div>{v}</div>
+<div>{$s}</div>
+<input bind:value={v} use:action={v}>
+<button on:click={click}>click me</button>
diff --git a/test/runtime/samples/store-prevent-user-declarations/_config.js b/test/runtime/samples/store-prevent-user-declarations/_config.js
new file mode 100644
index 0000000000..d79ced4e38
--- /dev/null
+++ b/test/runtime/samples/store-prevent-user-declarations/_config.js
@@ -0,0 +1,9 @@
+import { writable } from '../../../../store';
+
+export default {
+	props: {
+		count: writable(0)
+	},
+
+	error: 'The $ prefix is reserved, and cannot be used for variable and import names'
+};
diff --git a/test/runtime/samples/store-prevent-user-declarations/main.svelte b/test/runtime/samples/store-prevent-user-declarations/main.svelte
new file mode 100644
index 0000000000..78bed1d520
--- /dev/null
+++ b/test/runtime/samples/store-prevent-user-declarations/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let count;
+	let $count;
+</script>
+
+<button on:click="{() => count.update(n => n + 1)}">count {$count}</button>
\ No newline at end of file
diff --git a/test/runtime/samples/store-resubscribe-b/_config.js b/test/runtime/samples/store-resubscribe-b/_config.js
new file mode 100644
index 0000000000..b097a46716
--- /dev/null
+++ b/test/runtime/samples/store-resubscribe-b/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '42'
+};
diff --git a/test/runtime/samples/store-resubscribe-b/main.svelte b/test/runtime/samples/store-resubscribe-b/main.svelte
new file mode 100644
index 0000000000..0bc321f698
--- /dev/null
+++ b/test/runtime/samples/store-resubscribe-b/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { writable } from 'svelte/store';
+	let foo = writable(0);
+	foo = writable(42);
+</script>
+
+{$foo}
diff --git a/test/runtime/samples/store-resubscribe-c/_config.js b/test/runtime/samples/store-resubscribe-c/_config.js
new file mode 100644
index 0000000000..756e39bcb0
--- /dev/null
+++ b/test/runtime/samples/store-resubscribe-c/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '31 42'
+};
diff --git a/test/runtime/samples/store-resubscribe-c/main.svelte b/test/runtime/samples/store-resubscribe-c/main.svelte
new file mode 100644
index 0000000000..c52a5402bd
--- /dev/null
+++ b/test/runtime/samples/store-resubscribe-c/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import { writable } from 'svelte/store';
+	const context = {
+		store1: writable(31),
+		store2: writable(42)
+	};
+	let store1;
+	let store2;
+	({
+		store1,
+		store2
+	} = context);
+</script>
+
+{$store1}
+{$store2}
diff --git a/test/runtime/samples/store-resubscribe-export/_config.js b/test/runtime/samples/store-resubscribe-export/_config.js
new file mode 100644
index 0000000000..f6630aa045
--- /dev/null
+++ b/test/runtime/samples/store-resubscribe-export/_config.js
@@ -0,0 +1,29 @@
+let unsubscribeCalled = false;
+
+const fakeStore = val => ({
+	subscribe: cb => {
+		cb(val);
+		return {
+			unsubscribe: () => {
+				unsubscribeCalled = true;
+			}
+		};
+	}
+});
+
+export default {
+	props: {
+		foo: fakeStore(1)
+	},
+	html: `
+		<h1>1</h1>
+	`,
+
+	async test({ assert, component, target }) {
+		component.foo = fakeStore(5);
+
+		assert.htmlEqual(target.innerHTML, '<h1>5</h1>');
+
+		assert.ok(unsubscribeCalled);
+	}
+};
diff --git a/test/runtime/samples/store-resubscribe-export/main.svelte b/test/runtime/samples/store-resubscribe-export/main.svelte
new file mode 100644
index 0000000000..44b00544b7
--- /dev/null
+++ b/test/runtime/samples/store-resubscribe-export/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import { writable } from 'svelte/store';
+	export let foo = writable(0);
+</script>
+
+<h1>{$foo}</h1>
diff --git a/test/runtime/samples/store-resubscribe-observable/_config.js b/test/runtime/samples/store-resubscribe-observable/_config.js
new file mode 100644
index 0000000000..b097a46716
--- /dev/null
+++ b/test/runtime/samples/store-resubscribe-observable/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '42'
+};
diff --git a/test/runtime/samples/store-resubscribe-observable/main.svelte b/test/runtime/samples/store-resubscribe-observable/main.svelte
new file mode 100644
index 0000000000..4ea2112b11
--- /dev/null
+++ b/test/runtime/samples/store-resubscribe-observable/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { writable } from 'svelte/store';
+	function fake_observable(store) {
+		return { subscribe: cb => ({ unsubscribe: store.subscribe(cb) }) };
+	}
+
+	let foo = fake_observable(writable(0));
+	foo = fake_observable(writable(42));
+</script>
+
+{$foo}
diff --git a/test/runtime/samples/store-resubscribe/_config.js b/test/runtime/samples/store-resubscribe/_config.js
new file mode 100644
index 0000000000..82d40f9add
--- /dev/null
+++ b/test/runtime/samples/store-resubscribe/_config.js
@@ -0,0 +1,36 @@
+export default {
+	html: `
+		<h1>0</h1>
+		<button>+1</button>
+		<button>reset</button>
+	`,
+
+	async test({ assert, target, window }) {
+		const buttons = target.querySelectorAll('button');
+		const click = new window.MouseEvent('click');
+
+		await buttons[0].dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<h1>1</h1>
+			<button>+1</button>
+			<button>reset</button>
+		`);
+
+		await buttons[1].dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<h1>0</h1>
+			<button>+1</button>
+			<button>reset</button>
+		`);
+
+		await buttons[0].dispatchEvent(click);
+
+		assert.htmlEqual(target.innerHTML, `
+			<h1>1</h1>
+			<button>+1</button>
+			<button>reset</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/store-resubscribe/main.svelte b/test/runtime/samples/store-resubscribe/main.svelte
new file mode 100644
index 0000000000..97239e8c4c
--- /dev/null
+++ b/test/runtime/samples/store-resubscribe/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { writable } from 'svelte/store';
+	let foo = writable(0);
+</script>
+
+<h1>{$foo}</h1>
+<button on:click="{() => foo.update(n => n + 1)}">+1</button>
+<button on:click="{() => foo = writable(0)}">reset</button>
\ No newline at end of file
diff --git a/test/runtime/samples/store-shadow-scope-declaration/_config.js b/test/runtime/samples/store-shadow-scope-declaration/_config.js
new file mode 100644
index 0000000000..ff8b4c5632
--- /dev/null
+++ b/test/runtime/samples/store-shadow-scope-declaration/_config.js
@@ -0,0 +1 @@
+export default {};
diff --git a/test/runtime/samples/store-shadow-scope-declaration/main.svelte b/test/runtime/samples/store-shadow-scope-declaration/main.svelte
new file mode 100644
index 0000000000..fa76d33df8
--- /dev/null
+++ b/test/runtime/samples/store-shadow-scope-declaration/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	function test(store) {
+		// allow declaring $store as parameter
+		// it's not referring to the store value of the 
+		// `store` variable in the upper scope
+		return derived(store, $store => {
+
+		});
+	}
+
+	function test2(store) {
+		// allow declaring the `$store` variable
+		// it is not referring to the store value of the `store` variable
+		let $store;
+	}
+</script>
+
+<div
+	on:test={(store) => {
+		derived(store, $store => {});
+	}}
+	on:test2={(store) => {
+		let $store;
+	}}
+/>
diff --git a/test/runtime/samples/store-shadow-scope/_config.js b/test/runtime/samples/store-shadow-scope/_config.js
new file mode 100644
index 0000000000..a197325a2d
--- /dev/null
+++ b/test/runtime/samples/store-shadow-scope/_config.js
@@ -0,0 +1,3 @@
+export default {
+	error: 'Stores must be declared at the top level of the component (this may change in a future version of Svelte)'
+};
diff --git a/test/runtime/samples/store-shadow-scope/main.svelte b/test/runtime/samples/store-shadow-scope/main.svelte
new file mode 100644
index 0000000000..72c4a06c2a
--- /dev/null
+++ b/test/runtime/samples/store-shadow-scope/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { writable } from 'svelte/store';
+	const store = writable();
+
+	function foo() {
+		let store = 1;
+		$store = 2;
+	}
+</script>
diff --git a/test/runtime/samples/store-template-expression-scope/_config.js b/test/runtime/samples/store-template-expression-scope/_config.js
new file mode 100644
index 0000000000..a197325a2d
--- /dev/null
+++ b/test/runtime/samples/store-template-expression-scope/_config.js
@@ -0,0 +1,3 @@
+export default {
+	error: 'Stores must be declared at the top level of the component (this may change in a future version of Svelte)'
+};
diff --git a/test/runtime/samples/store-template-expression-scope/main.svelte b/test/runtime/samples/store-template-expression-scope/main.svelte
new file mode 100644
index 0000000000..1c9ccb2933
--- /dev/null
+++ b/test/runtime/samples/store-template-expression-scope/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { writable } from 'svelte/store';
+	const store = writable();
+</script>
+
+<button
+	on:click={(store) => {
+		$store = Math.random();
+	}} />
diff --git a/test/runtime/samples/store-unreferenced/Nested.svelte b/test/runtime/samples/store-unreferenced/Nested.svelte
new file mode 100644
index 0000000000..4af1890781
--- /dev/null
+++ b/test/runtime/samples/store-unreferenced/Nested.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { count } from './store.js';
+</script>
+
+<p>count: {$count}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/store-unreferenced/_config.js b/test/runtime/samples/store-unreferenced/_config.js
new file mode 100644
index 0000000000..ce416bca5d
--- /dev/null
+++ b/test/runtime/samples/store-unreferenced/_config.js
@@ -0,0 +1,15 @@
+import { count } from './store.js';
+
+export default {
+	html: '<p>count: 0</p>',
+
+	before_test() {
+		count.set(0);
+	},
+
+	async test({ assert, component, target }) {
+		await component.increment();
+
+		assert.htmlEqual(target.innerHTML, '<p>count: 1</p>');
+	}
+};
diff --git a/test/runtime/samples/store-unreferenced/main.svelte b/test/runtime/samples/store-unreferenced/main.svelte
new file mode 100644
index 0000000000..f55a5bdbdf
--- /dev/null
+++ b/test/runtime/samples/store-unreferenced/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import Nested from './Nested.svelte';
+	import { count } from './store.js';
+
+	export function increment() {
+		$count++;
+	}
+</script>
+
+<Nested />
\ No newline at end of file
diff --git a/test/runtime/samples/store-unreferenced/store.js b/test/runtime/samples/store-unreferenced/store.js
new file mode 100644
index 0000000000..b799c0ffc4
--- /dev/null
+++ b/test/runtime/samples/store-unreferenced/store.js
@@ -0,0 +1,3 @@
+import { writable } from '../../../../store';
+
+export const count = writable(0);
diff --git a/test/runtime/samples/svg-attributes/_config.js b/test/runtime/samples/svg-attributes/_config.js
new file mode 100644
index 0000000000..44f7d3a368
--- /dev/null
+++ b/test/runtime/samples/svg-attributes/_config.js
@@ -0,0 +1,14 @@
+export default {
+	html: `
+		<svg>
+			<g>
+				<circle class='red'/>
+			</g>
+		</svg>
+	`,
+
+	test({ assert, target }) {
+		const circle = target.querySelector('circle');
+		assert.equal(circle.getAttribute('class'), 'red');
+	}
+};
diff --git a/test/runtime/samples/svg-attributes/main.svelte b/test/runtime/samples/svg-attributes/main.svelte
new file mode 100644
index 0000000000..81a6552a96
--- /dev/null
+++ b/test/runtime/samples/svg-attributes/main.svelte
@@ -0,0 +1,5 @@
+<svg>
+	<g>
+		<circle class='red'/>
+	</g>
+</svg>
diff --git a/test/runtime/samples/svg-child-component-declared-namespace-shorthand/Rect.svelte b/test/runtime/samples/svg-child-component-declared-namespace-shorthand/Rect.svelte
new file mode 100644
index 0000000000..3871f86c21
--- /dev/null
+++ b/test/runtime/samples/svg-child-component-declared-namespace-shorthand/Rect.svelte
@@ -0,0 +1,10 @@
+<svelte:options namespace="svg"/>
+
+<script>
+	export let x;
+	export let y;
+	export let width;
+	export let height;
+</script>
+
+<rect x='{x}' y='{y}' width='{width}' height='{height}'/>
diff --git a/test/runtime/samples/svg-child-component-declared-namespace-shorthand/_config.js b/test/runtime/samples/svg-child-component-declared-namespace-shorthand/_config.js
new file mode 100644
index 0000000000..a3676db286
--- /dev/null
+++ b/test/runtime/samples/svg-child-component-declared-namespace-shorthand/_config.js
@@ -0,0 +1,22 @@
+export default {
+	props: {
+		x: 0,
+		y: 0,
+		width: 100,
+		height: 100
+	},
+
+	html: '<svg><rect x="0" y="0" width="100" height="100"></rect></svg>',
+
+	test({ assert, component, target }) {
+		const svg = target.querySelector( 'svg' );
+		const rect = target.querySelector( 'rect' );
+
+		assert.equal( svg.namespaceURI, 'http://www.w3.org/2000/svg' );
+		assert.equal( rect.namespaceURI, 'http://www.w3.org/2000/svg' );
+
+		component.width = 150;
+		component.height = 50;
+		assert.equal( target.innerHTML, '<svg><rect x="0" y="0" width="150" height="50"></rect></svg>' );
+	}
+};
diff --git a/test/runtime/samples/svg-child-component-declared-namespace-shorthand/main.svelte b/test/runtime/samples/svg-child-component-declared-namespace-shorthand/main.svelte
new file mode 100644
index 0000000000..aa65b2b453
--- /dev/null
+++ b/test/runtime/samples/svg-child-component-declared-namespace-shorthand/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Rect from './Rect.svelte';
+
+	export let x;
+	export let y;
+	export let width;
+	export let height;
+</script>
+
+<svg>
+	<Rect x='{x}' y='{y}' width='{width}' height='{height}'/>
+</svg>
diff --git a/test/runtime/samples/svg-child-component-declared-namespace/Rect.svelte b/test/runtime/samples/svg-child-component-declared-namespace/Rect.svelte
new file mode 100644
index 0000000000..fe672ede16
--- /dev/null
+++ b/test/runtime/samples/svg-child-component-declared-namespace/Rect.svelte
@@ -0,0 +1,10 @@
+<svelte:options namespace="http://www.w3.org/2000/svg"/>
+
+<script>
+	export let x;
+	export let y;
+	export let width;
+	export let height;
+</script>
+
+<rect x='{x}' y='{y}' width='{width}' height='{height}'/>
diff --git a/test/runtime/samples/svg-child-component-declared-namespace/_config.js b/test/runtime/samples/svg-child-component-declared-namespace/_config.js
new file mode 100644
index 0000000000..a3676db286
--- /dev/null
+++ b/test/runtime/samples/svg-child-component-declared-namespace/_config.js
@@ -0,0 +1,22 @@
+export default {
+	props: {
+		x: 0,
+		y: 0,
+		width: 100,
+		height: 100
+	},
+
+	html: '<svg><rect x="0" y="0" width="100" height="100"></rect></svg>',
+
+	test({ assert, component, target }) {
+		const svg = target.querySelector( 'svg' );
+		const rect = target.querySelector( 'rect' );
+
+		assert.equal( svg.namespaceURI, 'http://www.w3.org/2000/svg' );
+		assert.equal( rect.namespaceURI, 'http://www.w3.org/2000/svg' );
+
+		component.width = 150;
+		component.height = 50;
+		assert.equal( target.innerHTML, '<svg><rect x="0" y="0" width="150" height="50"></rect></svg>' );
+	}
+};
diff --git a/test/runtime/samples/svg-child-component-declared-namespace/main.svelte b/test/runtime/samples/svg-child-component-declared-namespace/main.svelte
new file mode 100644
index 0000000000..aa65b2b453
--- /dev/null
+++ b/test/runtime/samples/svg-child-component-declared-namespace/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Rect from './Rect.svelte';
+
+	export let x;
+	export let y;
+	export let width;
+	export let height;
+</script>
+
+<svg>
+	<Rect x='{x}' y='{y}' width='{width}' height='{height}'/>
+</svg>
diff --git a/test/runtime/samples/svg-class/_config.js b/test/runtime/samples/svg-class/_config.js
new file mode 100644
index 0000000000..ce32d1fb93
--- /dev/null
+++ b/test/runtime/samples/svg-class/_config.js
@@ -0,0 +1,12 @@
+// this looks like another JSDOM quirk — svg.className = 'foo' behaves
+// differently from browsers. So this test succeeds even when it should fail
+export default {
+	html: "<svg class='foo'></svg>",
+
+	test({ assert, target }) {
+		const svg = target.querySelector('svg');
+
+		assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(svg.getAttribute('class'), 'foo');
+	}
+};
diff --git a/test/runtime/samples/svg-class/main.svelte b/test/runtime/samples/svg-class/main.svelte
new file mode 100644
index 0000000000..10c023ee88
--- /dev/null
+++ b/test/runtime/samples/svg-class/main.svelte
@@ -0,0 +1 @@
+<svg class='foo'></svg>
diff --git a/test/runtime/samples/svg-each-block-anchor/_config.js b/test/runtime/samples/svg-each-block-anchor/_config.js
new file mode 100644
index 0000000000..a4e6f9e042
--- /dev/null
+++ b/test/runtime/samples/svg-each-block-anchor/_config.js
@@ -0,0 +1,25 @@
+export default {
+	props: {
+		foo: ['a'],
+		bar: ['c']
+	},
+
+	html: `
+		<svg>
+			<g class='foo'>a</g>
+			<g class='bar'>c</g>
+		</svg>
+	`,
+
+	test({ assert, component, target }) {
+		component.foo = ['a', 'b'];
+
+		assert.htmlEqual(target.innerHTML, `
+			<svg>
+				<g class='foo'>a</g>
+				<g class='foo'>b</g>
+				<g class='bar'>c</g>
+			</svg>
+		`);
+	}
+};
diff --git a/test/runtime/samples/svg-each-block-anchor/main.svelte b/test/runtime/samples/svg-each-block-anchor/main.svelte
new file mode 100644
index 0000000000..fcb0170b6e
--- /dev/null
+++ b/test/runtime/samples/svg-each-block-anchor/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let foo;
+	export let bar;
+</script>
+
+<svg>
+	{#each foo as x}
+		<g class='foo'></g>
+	{/each}
+
+	{#each bar as y}
+		<g class='bar'></g>
+	{/each}
+</svg>
\ No newline at end of file
diff --git a/test/runtime/samples/svg-each-block-namespace/_config.js b/test/runtime/samples/svg-each-block-namespace/_config.js
new file mode 100644
index 0000000000..c43734885f
--- /dev/null
+++ b/test/runtime/samples/svg-each-block-namespace/_config.js
@@ -0,0 +1,14 @@
+export default {
+	html: `
+		<svg>
+			<circle cx='0' cy='100' r='100' fill='red'/><circle cx='100' cy='100' r='100' fill='green'/><circle cx='200' cy='100' r='100' fill='blue'/>
+		</svg>
+	`,
+
+	test({ assert, target }) {
+		const circles = target.querySelectorAll('circle');
+		assert.equal(circles[0].namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(circles[1].namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(circles[2].namespaceURI, 'http://www.w3.org/2000/svg');
+	}
+};
diff --git a/test/runtime/samples/svg-each-block-namespace/main.svelte b/test/runtime/samples/svg-each-block-namespace/main.svelte
new file mode 100644
index 0000000000..94bf834c68
--- /dev/null
+++ b/test/runtime/samples/svg-each-block-namespace/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let colours = [ 'red', 'green', 'blue' ];
+</script>
+
+<svg>
+	{#each colours as colour, i}
+		<circle cx='{i * 100}' cy='100' r='100' fill='{colour}'/>
+	{/each}
+</svg>
diff --git a/test/runtime/samples/svg-foreignobject-namespace/_config.js b/test/runtime/samples/svg-foreignobject-namespace/_config.js
new file mode 100644
index 0000000000..950e35e79d
--- /dev/null
+++ b/test/runtime/samples/svg-foreignobject-namespace/_config.js
@@ -0,0 +1,17 @@
+export default {
+	html: `
+		<svg>
+			<foreignObject x="0" y="0" width="100" height="100">
+				<p>some text</p>
+			</foreignObject>
+		</svg>
+	`,
+
+	test({ assert, target }) {
+		const foreignObject = target.querySelector('foreignObject');
+		assert.equal(foreignObject.namespaceURI, 'http://www.w3.org/2000/svg');
+
+		const p = target.querySelector('p');
+		assert.equal(p.namespaceURI, 'http://www.w3.org/1999/xhtml');
+	}
+};
diff --git a/test/runtime/samples/svg-foreignobject-namespace/main.svelte b/test/runtime/samples/svg-foreignobject-namespace/main.svelte
new file mode 100644
index 0000000000..e841e0d417
--- /dev/null
+++ b/test/runtime/samples/svg-foreignobject-namespace/main.svelte
@@ -0,0 +1,5 @@
+<svg>
+	<foreignObject x="0" y="0" width="100" height="100">
+		<p>some text</p>
+	</foreignObject>
+</svg>
diff --git a/test/runtime/samples/svg-html-tag/_config.js b/test/runtime/samples/svg-html-tag/_config.js
new file mode 100644
index 0000000000..f35bfc21d5
--- /dev/null
+++ b/test/runtime/samples/svg-html-tag/_config.js
@@ -0,0 +1,35 @@
+export default {
+	html: `
+			<svg width="100" height="60">
+				<circle cx="25" cy="30" r="24" fill="#FFD166"></circle>
+				<circle cx="75" cy="30" r="24" fill="#118AB2"></circle>
+			</svg>
+		`,
+	test({ assert, target, component }) {
+
+		let svg = target.querySelector('svg');
+		let circles = target.querySelectorAll('circle');
+		assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(2, circles.length);
+		assert.equal(circles[0].namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(circles[1].namespaceURI, 'http://www.w3.org/2000/svg');
+
+		component.width = 200;
+		component.height = 120;
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<svg width="200" height="120">
+				<circle cx="50" cy="60" r="24" fill="#FFD166"></circle>
+				<circle cx="150" cy="60" r="24" fill="#118AB2"></circle>
+			</svg>
+		`
+		);
+		svg = target.querySelector('svg');
+		circles = target.querySelectorAll('circle');
+		assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(2, circles.length);
+		assert.equal(circles[0].namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(circles[1].namespaceURI, 'http://www.w3.org/2000/svg');
+	}
+};
diff --git a/test/runtime/samples/svg-html-tag/main.svelte b/test/runtime/samples/svg-html-tag/main.svelte
new file mode 100644
index 0000000000..dfeb6b04d3
--- /dev/null
+++ b/test/runtime/samples/svg-html-tag/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let width = 100
+	export let height = 60
+	$: circle = `<circle cx="${width/4}" cy="${height/2}" r="24" fill="#FFD166"/>`
+</script>
+
+<svg width="{width}" height="{height}">
+  {@html circle}
+  <circle cx="{width/4*3}" cy="{height/2}" r="24" fill="#118AB2"/>
+</svg>
diff --git a/test/runtime/samples/svg-html-tag2/_config.js b/test/runtime/samples/svg-html-tag2/_config.js
new file mode 100644
index 0000000000..3c07cd7499
--- /dev/null
+++ b/test/runtime/samples/svg-html-tag2/_config.js
@@ -0,0 +1,39 @@
+export default {
+	html: `
+			<svg width="100" height="60">
+				<rect>
+					<circle cx="25" cy="30" r="24" fill="#FFD166"></circle>
+					<circle cx="75" cy="30" r="24" fill="#118AB2"></circle>
+				</rect>
+			</svg>
+		`,
+	test({ assert, target, component }) {
+
+		let svg = target.querySelector('svg');
+		let circles = target.querySelectorAll('circle');
+		assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(2, circles.length);
+		assert.equal(circles[0].namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(circles[1].namespaceURI, 'http://www.w3.org/2000/svg');
+
+		component.width = 200;
+		component.height = 120;
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<svg width="200" height="120">
+				<rect>
+					<circle cx="50" cy="60" r="24" fill="#FFD166"></circle>
+					<circle cx="150" cy="60" r="24" fill="#118AB2"></circle>
+				</rect>
+			</svg>
+		`
+		);
+		svg = target.querySelector('svg');
+		circles = target.querySelectorAll('circle');
+		assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(2, circles.length);
+		assert.equal(circles[0].namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(circles[1].namespaceURI, 'http://www.w3.org/2000/svg');
+	}
+};
diff --git a/test/runtime/samples/svg-html-tag2/main.svelte b/test/runtime/samples/svg-html-tag2/main.svelte
new file mode 100644
index 0000000000..d8192955d9
--- /dev/null
+++ b/test/runtime/samples/svg-html-tag2/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let width = 100
+	export let height = 60
+	$: circle = `<circle cx="${width/4}" cy="${height/2}" r="24" fill="#FFD166"/>`
+</script>
+
+<svg width="{width}" height="{height}">
+	<rect>
+		{@html circle}
+		<circle cx="{width/4*3}" cy="{height/2}" r="24" fill="#118AB2"/>
+	</rect>
+</svg>
diff --git a/test/runtime/samples/svg-html-tag3/_config.js b/test/runtime/samples/svg-html-tag3/_config.js
new file mode 100644
index 0000000000..1209d298fe
--- /dev/null
+++ b/test/runtime/samples/svg-html-tag3/_config.js
@@ -0,0 +1,33 @@
+export default {
+	html: `
+			<svg>
+			  <foreignObject>
+				  <circle cx="25" cy="30" r="24" fill="#FFD166"></circle>
+				</foreignObject>
+			</svg>
+		`,
+	test({ assert, target, component }) {
+
+		let svg = target.querySelector('svg');
+		let circle = target.querySelector('circle');
+		assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(circle.namespaceURI, 'http://www.w3.org/1999/xhtml');
+
+		component.width = 200;
+		component.height = 120;
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<svg>
+			  <foreignObject>
+				  <circle cx="50" cy="60" r="24" fill="#FFD166"></circle>
+				</foreignObject>
+			</svg>
+		`
+		);
+		svg = target.querySelector('svg');
+		circle = target.querySelector('circle');
+		assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(circle.namespaceURI, 'http://www.w3.org/1999/xhtml');
+	}
+};
diff --git a/test/runtime/samples/svg-html-tag3/main.svelte b/test/runtime/samples/svg-html-tag3/main.svelte
new file mode 100644
index 0000000000..86dbb5aa7a
--- /dev/null
+++ b/test/runtime/samples/svg-html-tag3/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let width = 100
+	export let height = 60
+	$: circle = `<circle cx="${width/4}" cy="${height/2}" r="24" fill="#FFD166"/>`
+</script>
+
+<svg>
+	<foreignObject>
+		{@html circle}
+	</foreignObject>
+</svg>
diff --git a/test/runtime/samples/svg-multiple/_config.js b/test/runtime/samples/svg-multiple/_config.js
new file mode 100644
index 0000000000..4f002d302c
--- /dev/null
+++ b/test/runtime/samples/svg-multiple/_config.js
@@ -0,0 +1,30 @@
+export default {
+	props: {
+		x: 0,
+		y: 0,
+		width: 100,
+		height: 100
+	},
+
+	html: `
+		<svg><rect x="0" y="0" width="100" height="100"></rect></svg>
+		<svg><rect x="0" y="0" width="100" height="100"></rect></svg>
+	`,
+
+	test({ assert, component, target }) {
+		const svgs = target.querySelectorAll( 'svg' );
+		const rects = target.querySelectorAll( 'rect' );
+
+		assert.equal( svgs[0].namespaceURI, 'http://www.w3.org/2000/svg' );
+		assert.equal( svgs[0].namespaceURI, 'http://www.w3.org/2000/svg' );
+		assert.equal( rects[1].namespaceURI, 'http://www.w3.org/2000/svg' );
+		assert.equal( rects[1].namespaceURI, 'http://www.w3.org/2000/svg' );
+
+		component.width = 150;
+		component.height = 50;
+		assert.htmlEqual( target.innerHTML, `
+			<svg><rect x="0" y="0" width="150" height="50"></rect></svg>
+			<svg><rect x="0" y="0" width="150" height="50"></rect></svg>
+		` );
+	}
+};
diff --git a/test/runtime/samples/svg-multiple/main.svelte b/test/runtime/samples/svg-multiple/main.svelte
new file mode 100644
index 0000000000..454f486fd1
--- /dev/null
+++ b/test/runtime/samples/svg-multiple/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let x;
+	export let y;
+	export let width;
+	export let height;
+</script>
+
+<svg>
+	<rect x='{x}' y='{y}' width='{width}' height='{height}'/>
+</svg>
+
+<svg>
+	<rect x='{x}' y='{y}' width='{width}' height='{height}'/>
+</svg>
diff --git a/test/runtime/samples/svg-no-whitespace/_config.js b/test/runtime/samples/svg-no-whitespace/_config.js
new file mode 100644
index 0000000000..2f7a917f16
--- /dev/null
+++ b/test/runtime/samples/svg-no-whitespace/_config.js
@@ -0,0 +1,9 @@
+export default {
+	test({ assert, target }) {
+		const svg = target.querySelector( 'svg' );
+
+		assert.equal( svg.childNodes.length, 2 );
+		assert.equal( svg.childNodes[0].nodeName, 'rect' );
+		assert.equal( svg.childNodes[1].nodeName, 'rect' );
+	}
+};
diff --git a/test/runtime/samples/svg-no-whitespace/main.svelte b/test/runtime/samples/svg-no-whitespace/main.svelte
new file mode 100644
index 0000000000..1a937b3188
--- /dev/null
+++ b/test/runtime/samples/svg-no-whitespace/main.svelte
@@ -0,0 +1,5 @@
+<svg>
+	<rect/>
+
+	<rect/>
+</svg>
diff --git a/test/runtime/samples/svg-slot-namespace/Widget.svelte b/test/runtime/samples/svg-slot-namespace/Widget.svelte
new file mode 100644
index 0000000000..ebfe572dc7
--- /dev/null
+++ b/test/runtime/samples/svg-slot-namespace/Widget.svelte
@@ -0,0 +1,3 @@
+<svg>
+	<slot />
+</svg>
diff --git a/test/runtime/samples/svg-slot-namespace/_config.js b/test/runtime/samples/svg-slot-namespace/_config.js
new file mode 100644
index 0000000000..b53f5b0294
--- /dev/null
+++ b/test/runtime/samples/svg-slot-namespace/_config.js
@@ -0,0 +1,17 @@
+export default {
+	html: `
+		<div>
+			<svg>
+				<line x1="0" y1="0" x2="100" y2="100" />
+			</svg>
+		</div>
+	`,
+
+	test({ assert, target }) {
+		const div = target.querySelector('div');
+		assert.equal(div.namespaceURI, 'http://www.w3.org/1999/xhtml');
+
+		const line = target.querySelector('line');
+		assert.equal(line.namespaceURI, 'http://www.w3.org/2000/svg');
+	}
+};
diff --git a/test/runtime/samples/svg-slot-namespace/main.svelte b/test/runtime/samples/svg-slot-namespace/main.svelte
new file mode 100644
index 0000000000..d6bac9f065
--- /dev/null
+++ b/test/runtime/samples/svg-slot-namespace/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Widget from './Widget.svelte'
+</script>
+
+<div>
+	<Widget>
+		<line x1="0" y1="0" x2="100" y2="100" />
+	</Widget>
+</div>
diff --git a/test/runtime/samples/svg-spread/_config.js b/test/runtime/samples/svg-spread/_config.js
new file mode 100644
index 0000000000..a198120a08
--- /dev/null
+++ b/test/runtime/samples/svg-spread/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: `
+		<svg height="400" width="400">
+			<rect x="50" y="50" width="100" height="75" fill="#ff0000"></rect>
+		</svg>
+	`
+};
diff --git a/test/runtime/samples/svg-spread/main.svelte b/test/runtime/samples/svg-spread/main.svelte
new file mode 100644
index 0000000000..a7a143814b
--- /dev/null
+++ b/test/runtime/samples/svg-spread/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	const style = { fill: '#ff0000', x: '50', y: '50', width: '100', height: '75'};
+</script>
+
+<svg width="400" height="400">
+	<rect {...style}/>
+</svg>
diff --git a/test/runtime/samples/svg-tspan-preserve-space/_config.js b/test/runtime/samples/svg-tspan-preserve-space/_config.js
new file mode 100644
index 0000000000..1042ba1821
--- /dev/null
+++ b/test/runtime/samples/svg-tspan-preserve-space/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<svg><text x=0 y=50><tspan>foo</tspan> bar<tspan>foo</tspan> bar</text></svg>'
+};
diff --git a/test/runtime/samples/svg-tspan-preserve-space/main.svelte b/test/runtime/samples/svg-tspan-preserve-space/main.svelte
new file mode 100644
index 0000000000..df43d575a9
--- /dev/null
+++ b/test/runtime/samples/svg-tspan-preserve-space/main.svelte
@@ -0,0 +1 @@
+<svg><text x=0 y=50><tspan>foo</tspan> {"bar"}<tspan>foo</tspan> bar</text></svg>
\ No newline at end of file
diff --git a/test/runtime/samples/svg-with-style/_config.js b/test/runtime/samples/svg-with-style/_config.js
new file mode 100644
index 0000000000..dd37cfee46
--- /dev/null
+++ b/test/runtime/samples/svg-with-style/_config.js
@@ -0,0 +1,13 @@
+export default {
+	props: {
+		x: 'bar'
+	},
+
+	html: `
+		<svg>
+			<circle class="svelte-i03x00" cx=50 cy=50 r=50 />
+			<circle class="foo svelte-i03x00" cx=150 cy=50 r=50 />
+			<circle class="bar svelte-i03x00" cx=250 cy=50 r=50 />
+		</svg>
+	`
+};
diff --git a/test/runtime/samples/svg-with-style/main.svelte b/test/runtime/samples/svg-with-style/main.svelte
new file mode 100644
index 0000000000..424834134e
--- /dev/null
+++ b/test/runtime/samples/svg-with-style/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let x;
+</script>
+
+<svg>
+	<circle cx=50 cy=50 r=50/>
+	<circle class='foo' cx=150 cy=50 r=50/>
+	<circle class='{x}' cx=250 cy=50 r=50/>
+</svg>
+
+<style>
+	circle {
+		fill: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/runtime/samples/svg-xlink/_config.js b/test/runtime/samples/svg-xlink/_config.js
new file mode 100644
index 0000000000..d3018b3698
--- /dev/null
+++ b/test/runtime/samples/svg-xlink/_config.js
@@ -0,0 +1,17 @@
+export default {
+	html: `
+		<svg>
+			<defs>
+				<circle id='stamp' r='10' fill='blue'/>
+			</defs>
+
+			<use xlink:href='#stamp' x='20' y='20'/>
+		</svg>
+	`,
+	test({ assert, target }) {
+		const use = target.querySelector('use');
+		const href = use.attributes[ 'xlink:href' ];
+
+		assert.equal(href.namespaceURI, 'http://www.w3.org/1999/xlink');
+	}
+};
diff --git a/test/runtime/samples/svg-xlink/main.svelte b/test/runtime/samples/svg-xlink/main.svelte
new file mode 100644
index 0000000000..d24b1510a7
--- /dev/null
+++ b/test/runtime/samples/svg-xlink/main.svelte
@@ -0,0 +1,7 @@
+<svg>
+	<defs>
+		<circle id='stamp' r='10' fill='blue'/>
+	</defs>
+
+	<use xlink:href='#stamp' x='20' y='20'/>
+</svg>
diff --git a/test/runtime/samples/svg-xmlns/_config.js b/test/runtime/samples/svg-xmlns/_config.js
new file mode 100644
index 0000000000..5cec8da04a
--- /dev/null
+++ b/test/runtime/samples/svg-xmlns/_config.js
@@ -0,0 +1,24 @@
+export default {
+	skip_if_ssr: true,
+
+	props: {
+		x: 0,
+		y: 0,
+		width: 100,
+		height: 100
+	},
+
+	html: '<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="100" height="100"></rect></svg>',
+
+	test({ assert, component, target }) {
+		const svg = target.querySelector( 'svg' );
+		const rect = target.querySelector( 'rect' );
+
+		assert.equal( svg.namespaceURI, 'http://www.w3.org/2000/svg' );
+		assert.equal( rect.namespaceURI, 'http://www.w3.org/2000/svg' );
+
+		component.width = 150;
+		component.height = 50;
+		assert.equal( target.innerHTML, '<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="150" height="50"></rect></svg>' );
+	}
+};
diff --git a/test/runtime/samples/svg-xmlns/main.svelte b/test/runtime/samples/svg-xmlns/main.svelte
new file mode 100644
index 0000000000..a415a12afc
--- /dev/null
+++ b/test/runtime/samples/svg-xmlns/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let x;
+	export let y;
+	export let width;
+	export let height;
+</script>
+
+<svg xmlns='http://www.w3.org/2000/svg'>
+	<rect x='{x}' y='{y}' width='{width}' height='{height}'/>
+</svg>
diff --git a/test/runtime/samples/svg/_config.js b/test/runtime/samples/svg/_config.js
new file mode 100644
index 0000000000..a3676db286
--- /dev/null
+++ b/test/runtime/samples/svg/_config.js
@@ -0,0 +1,22 @@
+export default {
+	props: {
+		x: 0,
+		y: 0,
+		width: 100,
+		height: 100
+	},
+
+	html: '<svg><rect x="0" y="0" width="100" height="100"></rect></svg>',
+
+	test({ assert, component, target }) {
+		const svg = target.querySelector( 'svg' );
+		const rect = target.querySelector( 'rect' );
+
+		assert.equal( svg.namespaceURI, 'http://www.w3.org/2000/svg' );
+		assert.equal( rect.namespaceURI, 'http://www.w3.org/2000/svg' );
+
+		component.width = 150;
+		component.height = 50;
+		assert.equal( target.innerHTML, '<svg><rect x="0" y="0" width="150" height="50"></rect></svg>' );
+	}
+};
diff --git a/test/runtime/samples/svg/main.svelte b/test/runtime/samples/svg/main.svelte
new file mode 100644
index 0000000000..25abd331a4
--- /dev/null
+++ b/test/runtime/samples/svg/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let x;
+	export let y;
+	export let width;
+	export let height;
+</script>
+
+<svg>
+	<rect x='{x}' y='{y}' width='{width}' height='{height}'/>
+</svg>
diff --git a/test/runtime/samples/target-dom-detached/App.svelte b/test/runtime/samples/target-dom-detached/App.svelte
new file mode 100644
index 0000000000..251e480307
--- /dev/null
+++ b/test/runtime/samples/target-dom-detached/App.svelte
@@ -0,0 +1,11 @@
+<script>
+	let name = 'World';
+</script>
+
+<div>Hello {name}</div>
+
+<style>
+	div {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/runtime/samples/target-dom-detached/_config.js b/test/runtime/samples/target-dom-detached/_config.js
new file mode 100644
index 0000000000..055d1868eb
--- /dev/null
+++ b/test/runtime/samples/target-dom-detached/_config.js
@@ -0,0 +1,16 @@
+export default {
+	skip_if_ssr: true,
+	compileOptions: {
+		cssHash: () => 'svelte-xyz'
+	},
+	async test({ assert, component, window }) {
+		assert.htmlEqual(
+			window.document.head.innerHTML,
+			'<style id="svelte-xyz">div.svelte-xyz{color:red}</style>'
+		);
+		assert.htmlEqual(
+			component.div.innerHTML,
+			'<div class="svelte-xyz">Hello World</div>'
+		);
+	}
+};
diff --git a/test/runtime/samples/target-dom-detached/main.svelte b/test/runtime/samples/target-dom-detached/main.svelte
new file mode 100644
index 0000000000..42e7dffee9
--- /dev/null
+++ b/test/runtime/samples/target-dom-detached/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	import App from './App.svelte';
+	import { onMount } from 'svelte';
+
+	export let div;
+
+	onMount(() => {
+		div = document.createElement('div');
+
+		const app = new App({
+			target: div
+		});
+
+		return () => {
+			app.$destroy();
+		}
+	});
+</script>
diff --git a/test/runtime/samples/target-dom/App.svelte b/test/runtime/samples/target-dom/App.svelte
new file mode 100644
index 0000000000..251e480307
--- /dev/null
+++ b/test/runtime/samples/target-dom/App.svelte
@@ -0,0 +1,11 @@
+<script>
+	let name = 'World';
+</script>
+
+<div>Hello {name}</div>
+
+<style>
+	div {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/runtime/samples/target-dom/_config.js b/test/runtime/samples/target-dom/_config.js
new file mode 100644
index 0000000000..055d1868eb
--- /dev/null
+++ b/test/runtime/samples/target-dom/_config.js
@@ -0,0 +1,16 @@
+export default {
+	skip_if_ssr: true,
+	compileOptions: {
+		cssHash: () => 'svelte-xyz'
+	},
+	async test({ assert, component, window }) {
+		assert.htmlEqual(
+			window.document.head.innerHTML,
+			'<style id="svelte-xyz">div.svelte-xyz{color:red}</style>'
+		);
+		assert.htmlEqual(
+			component.div.innerHTML,
+			'<div class="svelte-xyz">Hello World</div>'
+		);
+	}
+};
diff --git a/test/runtime/samples/target-dom/main.svelte b/test/runtime/samples/target-dom/main.svelte
new file mode 100644
index 0000000000..68d2990552
--- /dev/null
+++ b/test/runtime/samples/target-dom/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	import App from './App.svelte';
+	import { onMount } from 'svelte';
+
+	export let div;
+
+	onMount(() => {
+		const app = new App({
+			target: div
+		});
+
+		return () => {
+			app.$destroy();
+		}
+	});
+</script>
+
+<div bind:this={div} />
\ No newline at end of file
diff --git a/test/runtime/samples/target-shadow-dom/App.svelte b/test/runtime/samples/target-shadow-dom/App.svelte
new file mode 100644
index 0000000000..251e480307
--- /dev/null
+++ b/test/runtime/samples/target-shadow-dom/App.svelte
@@ -0,0 +1,11 @@
+<script>
+	let name = 'World';
+</script>
+
+<div>Hello {name}</div>
+
+<style>
+	div {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/runtime/samples/target-shadow-dom/_config.js b/test/runtime/samples/target-shadow-dom/_config.js
new file mode 100644
index 0000000000..ff775d15fd
--- /dev/null
+++ b/test/runtime/samples/target-shadow-dom/_config.js
@@ -0,0 +1,13 @@
+export default {
+	skip_if_ssr: true,
+	compileOptions: {
+		cssHash: () => 'svelte-xyz'
+	},
+	async test({ assert, component, window }) {
+		assert.htmlEqual(window.document.head.innerHTML, '');
+		assert.htmlEqual(component.div.shadowRoot.innerHTML, `
+			<style id="svelte-xyz">div.svelte-xyz{color:red}</style>
+			<div class="svelte-xyz">Hello World</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/target-shadow-dom/main.svelte b/test/runtime/samples/target-shadow-dom/main.svelte
new file mode 100644
index 0000000000..cb47ad01f0
--- /dev/null
+++ b/test/runtime/samples/target-shadow-dom/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import App from './App.svelte';
+	import { onMount } from 'svelte';
+
+	export let div;
+	onMount(() => {
+		const root = div.attachShadow({ mode: 'open' });
+
+		const app = new App({
+			target: root
+		});
+
+		return () => {
+			app.$destroy();
+		}
+	});
+</script>
+
+<div bind:this={div} />
\ No newline at end of file
diff --git a/test/runtime/samples/template/_config.js b/test/runtime/samples/template/_config.js
new file mode 100644
index 0000000000..6e92d771bd
--- /dev/null
+++ b/test/runtime/samples/template/_config.js
@@ -0,0 +1,31 @@
+export default {
+	// solo: 1,
+
+	html: `
+	<template id="t1">
+	    <div>foo</div>
+	</template>
+	<template id="t2">123</template>
+	`,
+
+	test({ assert, target }) {
+		
+		const template = target.querySelector('#t1');
+		assert.htmlEqual(template.innerHTML, `
+		<div>foo</div>
+   	    `);
+		const content = template.content.cloneNode(true);
+		const div = content.children[0];
+		assert.htmlEqual(div.outerHTML, `
+			<div>foo</div>
+		`);
+
+
+		const template2 = target.querySelector('#t2');
+		assert.equal(template2.childNodes.length, 0); 
+		assert.equal(template2.content.childNodes.length, 1);
+		assert.equal(template2.content.firstChild.textContent, '123');
+		assert.htmlEqual(template2.innerHTML, '123');
+
+	}
+};
diff --git a/test/runtime/samples/template/main.svelte b/test/runtime/samples/template/main.svelte
new file mode 100644
index 0000000000..2e2f5b6c29
--- /dev/null
+++ b/test/runtime/samples/template/main.svelte
@@ -0,0 +1,4 @@
+<template id="t1">
+	<div>foo</div>
+</template>
+<template id="t2">123</template>
\ No newline at end of file
diff --git a/test/runtime/samples/textarea-children/_config.js b/test/runtime/samples/textarea-children/_config.js
new file mode 100644
index 0000000000..5aeba13493
--- /dev/null
+++ b/test/runtime/samples/textarea-children/_config.js
@@ -0,0 +1,17 @@
+export default {
+	skip_if_ssr: true, // SSR behaviour is awkwardly different
+
+	props: {
+		foo: 42
+	},
+
+	html: '<textarea></textarea>',
+
+	test({ assert, component, target }) {
+		const textarea = target.querySelector( 'textarea' );
+		assert.strictEqual( textarea.value, '\t<p>not actually an element. 42</p>\n' );
+
+		component.foo = 43;
+		assert.strictEqual( textarea.value, '\t<p>not actually an element. 43</p>\n' );
+	}
+};
diff --git a/test/runtime/samples/textarea-children/main.svelte b/test/runtime/samples/textarea-children/main.svelte
new file mode 100644
index 0000000000..6579577ad9
--- /dev/null
+++ b/test/runtime/samples/textarea-children/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo;
+</script>
+
+<textarea>
+	<p>not actually an element. {foo}</p>
+</textarea>
\ No newline at end of file
diff --git a/test/runtime/samples/textarea-content/.editorconfig b/test/runtime/samples/textarea-content/.editorconfig
new file mode 100644
index 0000000000..fa948941d5
--- /dev/null
+++ b/test/runtime/samples/textarea-content/.editorconfig
@@ -0,0 +1,2 @@
+[main.svelte]
+trim_trailing_whitespace = unset
diff --git a/test/runtime/samples/textarea-content/_config.js b/test/runtime/samples/textarea-content/_config.js
new file mode 100644
index 0000000000..336c03fada
--- /dev/null
+++ b/test/runtime/samples/textarea-content/_config.js
@@ -0,0 +1,34 @@
+export default {
+	test({ assert, target }) {
+		// Test for <textarea> tag
+		const elementTextarea = target.querySelector('#textarea');
+		// Test for <textarea> tag in non <textarea> tag
+		const elementDivWithTextarea = target.querySelector('#div-with-textarea');
+		// Test for <textarea> tag with leading newline
+		const elementTextareaWithLeadingNewline = target.querySelector('#textarea-with-leading-newline');
+		const elementTextareaWithoutLeadingNewline = target.querySelector('#textarea-without-leading-newline');
+		const elementTextareaWithMultipleLeadingNewline = target.querySelector('#textarea-with-multiple-leading-newlines');
+		const elementDivWithTextareaWithMultipleLeadingNewline = target.querySelector('#div-with-textarea-with-multiple-leading-newlines');
+
+		assert.equal(
+			elementTextarea.value,
+			`  A
+  B
+`
+		);
+		assert.equal(
+			elementDivWithTextarea.children[0].value,
+			`    A
+    B
+  `
+		);
+		assert.equal(elementTextareaWithLeadingNewline.children[0].value, 'leading newline');
+		assert.equal(elementTextareaWithLeadingNewline.children[1].value, '  leading newline and spaces');
+		assert.equal(elementTextareaWithLeadingNewline.children[2].value, '\nleading newlines');
+		assert.equal(elementTextareaWithoutLeadingNewline.children[0].value, 'without spaces');
+		assert.equal(elementTextareaWithoutLeadingNewline.children[1].value, '  with spaces  ');
+		assert.equal(elementTextareaWithoutLeadingNewline.children[2].value, ' \nnewline after leading space');
+		assert.equal(elementTextareaWithMultipleLeadingNewline.value, '\n\nmultiple leading newlines');
+		assert.equal(elementDivWithTextareaWithMultipleLeadingNewline.children[0].value, '\n\nmultiple leading newlines');
+	}
+};
diff --git a/test/runtime/samples/textarea-content/main.svelte b/test/runtime/samples/textarea-content/main.svelte
new file mode 100644
index 0000000000..e2e052ca7a
--- /dev/null
+++ b/test/runtime/samples/textarea-content/main.svelte
@@ -0,0 +1,40 @@
+<textarea id="textarea">
+  A
+  B
+</textarea>
+
+<div id="div-with-textarea">
+  <textarea>
+    A
+    B
+  </textarea>
+</div>
+
+<div id="textarea-with-leading-newline">
+  <textarea>
+leading newline</textarea>
+  <textarea>
+  leading newline and spaces</textarea>
+  <textarea>
+
+leading newlines</textarea>
+</div>
+
+<div id="textarea-without-leading-newline">
+  <textarea>without spaces</textarea>
+  <textarea>  with spaces  </textarea>
+  <textarea> 
+newline after leading space</textarea>
+</div>
+
+<textarea id="textarea-with-multiple-leading-newlines">
+
+
+multiple leading newlines</textarea>
+
+<div id="div-with-textarea-with-multiple-leading-newlines">
+  <textarea>
+
+
+multiple leading newlines</textarea>
+</div>
diff --git a/test/runtime/samples/textarea-value/_config.js b/test/runtime/samples/textarea-value/_config.js
new file mode 100644
index 0000000000..93079e5928
--- /dev/null
+++ b/test/runtime/samples/textarea-value/_config.js
@@ -0,0 +1,17 @@
+export default {
+	skip_if_ssr: true, // SSR behaviour is awkwardly different
+
+	props: {
+		foo: 42
+	},
+
+	html: '<textarea></textarea>',
+
+	test({ assert, component, target }) {
+		const textarea = target.querySelector( 'textarea' );
+		assert.strictEqual( textarea.value, '42' );
+
+		component.foo = 43;
+		assert.strictEqual( textarea.value, '43' );
+	}
+};
diff --git a/test/runtime/samples/textarea-value/main.svelte b/test/runtime/samples/textarea-value/main.svelte
new file mode 100644
index 0000000000..7eaf783f7f
--- /dev/null
+++ b/test/runtime/samples/textarea-value/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+<textarea value='{foo}'/>
\ No newline at end of file
diff --git a/test/runtime/samples/this-in-function-expressions/_config.js b/test/runtime/samples/this-in-function-expressions/_config.js
new file mode 100644
index 0000000000..57f23a472b
--- /dev/null
+++ b/test/runtime/samples/this-in-function-expressions/_config.js
@@ -0,0 +1,10 @@
+export default {
+	async test({ assert, target, window }) {
+		const [, btn] = target.querySelectorAll('button');
+		const clickEvent = new window.MouseEvent('click');
+
+		await btn.dispatchEvent(clickEvent);
+
+		assert.equal(btn.x, 1);
+	}
+};
diff --git a/test/runtime/samples/this-in-function-expressions/main.svelte b/test/runtime/samples/this-in-function-expressions/main.svelte
new file mode 100644
index 0000000000..af732920e9
--- /dev/null
+++ b/test/runtime/samples/this-in-function-expressions/main.svelte
@@ -0,0 +1,2 @@
+<button on:click="{() => { this.x = 1; }}" />
+<button on:click="{function () { this.x = 1; }}" />
diff --git a/test/runtime/samples/transition-abort/_config.js b/test/runtime/samples/transition-abort/_config.js
new file mode 100644
index 0000000000..c0f702cb76
--- /dev/null
+++ b/test/runtime/samples/transition-abort/_config.js
@@ -0,0 +1,31 @@
+// expect aborting halfway through outro transition
+// to behave the same in `{#if}` block as in `{:else}` block
+export default {
+	html: `
+		<div>a</div>
+
+		<div>a</div>
+	`,
+
+	async test({ assert, component, target, raf }) {
+		component.visible = false;
+
+		// abort halfway through the outro transition
+		raf.tick(50);
+
+		await component.$set({
+			visible: true,
+			array: ['a', 'b', 'c']
+		});
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>a</div>
+			<div>b</div>
+			<div>c</div>
+
+			<div>a</div>
+			<div>b</div>
+			<div>c</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/transition-abort/main.svelte b/test/runtime/samples/transition-abort/main.svelte
new file mode 100644
index 0000000000..b574229712
--- /dev/null
+++ b/test/runtime/samples/transition-abort/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	export let array = ['a'];
+	export let visible = true;
+
+	function slide(_, params) {
+		return params;
+	}
+</script>
+
+{#if visible}
+	{#each array as item}
+		<div transition:slide={{duration:100}}>{item}</div>
+	{/each}
+{/if}
+
+{#if !visible}
+{:else}
+	{#each array as item}
+		<div transition:slide={{duration:100}}>{item}</div>
+	{/each}
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-css-deferred-removal/_config.js b/test/runtime/samples/transition-css-deferred-removal/_config.js
new file mode 100644
index 0000000000..9bf429cd9e
--- /dev/null
+++ b/test/runtime/samples/transition-css-deferred-removal/_config.js
@@ -0,0 +1,24 @@
+export default {
+	props: {
+		visible: true
+	},
+
+	test({ assert, component, target, raf }) {
+		component.visible = false;
+
+		const outer = target.querySelector('.outer');
+		const inner = target.querySelector('.inner');
+
+		const animations = [
+			outer.style.animation,
+			inner.style.animation
+		];
+
+		raf.tick(150);
+
+		assert.deepEqual([
+			outer.style.animation,
+			inner.style.animation
+		], animations);
+	}
+};
diff --git a/test/runtime/samples/transition-css-deferred-removal/main.svelte b/test/runtime/samples/transition-css-deferred-removal/main.svelte
new file mode 100644
index 0000000000..34a98ca081
--- /dev/null
+++ b/test/runtime/samples/transition-css-deferred-removal/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	export let visible;
+
+	function foo(node) {
+		return {
+			duration: 200,
+			css: t => {
+				return `opacity: ${t}`;
+			}
+		};
+	}
+
+	function bar(node) {
+		return {
+			duration: 100,
+			css: t => {
+				return `left: ${t * 100}px`;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<span class='outer' out:foo>
+		<span class='inner' out:bar>
+			double transition
+		</span>
+	</span>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-css-duration/_config.js b/test/runtime/samples/transition-css-duration/_config.js
new file mode 100644
index 0000000000..b2a9fb3476
--- /dev/null
+++ b/test/runtime/samples/transition-css-duration/_config.js
@@ -0,0 +1,13 @@
+export default {
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+		const div = target.querySelector('div');
+
+		raf.tick(25);
+
+		component.visible = false;
+
+		raf.tick(26);
+		assert.ok(~div.style.animation.indexOf('25ms'));
+	}
+};
diff --git a/test/runtime/samples/transition-css-duration/main.svelte b/test/runtime/samples/transition-css-duration/main.svelte
new file mode 100644
index 0000000000..c79672f21b
--- /dev/null
+++ b/test/runtime/samples/transition-css-duration/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let visible;
+
+	function foo() {
+		return {
+			duration: 100,
+			css: t => {
+				return `opacity: ${t}`;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo></div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-css-iframe/Foo.svelte b/test/runtime/samples/transition-css-iframe/Foo.svelte
new file mode 100644
index 0000000000..c79672f21b
--- /dev/null
+++ b/test/runtime/samples/transition-css-iframe/Foo.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let visible;
+
+	function foo() {
+		return {
+			duration: 100,
+			css: t => {
+				return `opacity: ${t}`;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo></div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-css-iframe/Frame.svelte b/test/runtime/samples/transition-css-iframe/Frame.svelte
new file mode 100644
index 0000000000..c7ac9cf76f
--- /dev/null
+++ b/test/runtime/samples/transition-css-iframe/Frame.svelte
@@ -0,0 +1,58 @@
+<script>
+import { onMount, onDestroy, tick } from 'svelte';
+
+export let component;
+
+let frame;
+let doc;
+let content;
+
+$: mountComponent(doc, component);
+$: updateProps($$props);
+
+function mountComponent(doc) {
+  if (content) content.$destroy();
+  if (doc && component) {
+    const { component, ...props } = $$props;
+    content = new component({ target: doc.body, props });
+  }
+}
+
+function updateProps(props) {
+  if (content) {
+    const { component, ...rest } = props;
+    content.$set(rest);
+  }
+}
+
+function loadHandler() {
+  doc = frame.contentDocument;
+  // import styles
+  Array.from(document.querySelectorAll('style, link[rel="stylesheet"]'))
+    .forEach(node => doc.head.appendChild(node.cloneNode(true)));
+}
+
+onMount(async () => {
+  await tick();
+  if (frame.contentDocument.readyState === 'complete' && frame.contentDocument.defaultView) {
+    loadHandler();
+  } else {
+    frame.addEventListener('load', loadHandler);
+  }
+});
+
+onDestroy(() => {
+  if (frame) frame.removeEventListener('load', loadHandler);
+  if (content) content.$destroy();
+});
+</script>
+
+<iframe bind:this={frame} title="frame"></iframe>
+
+<style>
+iframe {
+  border: none;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/test/runtime/samples/transition-css-iframe/_config.js b/test/runtime/samples/transition-css-iframe/_config.js
new file mode 100644
index 0000000000..a7d98dc474
--- /dev/null
+++ b/test/runtime/samples/transition-css-iframe/_config.js
@@ -0,0 +1,18 @@
+export default {
+	skip_if_ssr: true,
+
+	async test({ assert, component, target, raf }) {
+		const frame = target.querySelector('iframe');
+		await Promise.resolve();
+
+		component.visible = true;
+		const div = frame.contentDocument.querySelector('div');
+
+		raf.tick(25);
+
+		component.visible = false;
+
+		raf.tick(26);
+		assert.ok(~div.style.animation.indexOf('25ms'));
+	}
+};
diff --git a/test/runtime/samples/transition-css-iframe/main.svelte b/test/runtime/samples/transition-css-iframe/main.svelte
new file mode 100644
index 0000000000..b1686ff15e
--- /dev/null
+++ b/test/runtime/samples/transition-css-iframe/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Frame from './Frame.svelte';
+	import Foo from './Foo.svelte';
+
+	export let visible;
+</script>
+
+<Frame component={Foo} {visible}/>
\ No newline at end of file
diff --git a/test/runtime/samples/transition-css-in-out-in-with-param/_config.js b/test/runtime/samples/transition-css-in-out-in-with-param/_config.js
new file mode 100644
index 0000000000..7d0dfa9a07
--- /dev/null
+++ b/test/runtime/samples/transition-css-in-out-in-with-param/_config.js
@@ -0,0 +1,21 @@
+export default {
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+		const div = target.querySelector('div');
+
+		// animation duration of `in` should be 10ms.
+		assert.equal(div.style.animation, '__svelte_1670736059_0 10ms linear 0ms 1 both');
+
+		// animation duration of `out` should be 5ms.
+		component.visible = false;
+		assert.equal(div.style.animation, '__svelte_1670736059_0 10ms linear 0ms 1 both, __svelte_1998461463_0 5ms linear 0ms 1 both');
+
+		// change param
+		raf.tick(1);
+		component.param = true;
+		component.visible = true;
+
+		// animation duration of `in` should be 20ms.
+		assert.equal(div.style.animation, '__svelte_722598827_0 20ms linear 0ms 1 both');
+	}
+};
diff --git a/test/runtime/samples/transition-css-in-out-in-with-param/main.svelte b/test/runtime/samples/transition-css-in-out-in-with-param/main.svelte
new file mode 100644
index 0000000000..616e2e0e8b
--- /dev/null
+++ b/test/runtime/samples/transition-css-in-out-in-with-param/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	export let visible = false;
+	export let param = false;
+
+	function getInParam() {
+		return { 
+			duration: param ? 20 : 10,
+			css: t => {
+				return `opacity: ${t}`;
+			}
+		};
+	}
+
+	function getOutParam() {
+		return { 
+			duration: param ? 15 : 5,
+			css: t => {
+				return `opacity: ${t}`;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div in:getInParam out:getOutParam></div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-css-in-out-in/_config.js b/test/runtime/samples/transition-css-in-out-in/_config.js
new file mode 100644
index 0000000000..5debe6abd6
--- /dev/null
+++ b/test/runtime/samples/transition-css-in-out-in/_config.js
@@ -0,0 +1,20 @@
+export default {
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+		const div = target.querySelector('div');
+
+		assert.equal(div.style.animation, '__svelte_3809512021_0 100ms linear 0ms 1 both');
+
+		raf.tick(50);
+		component.visible = false;
+
+		// both in and out styles
+		assert.equal(div.style.animation, '__svelte_3809512021_0 100ms linear 0ms 1 both, __svelte_3750847757_0 100ms linear 0ms 1 both');
+
+		raf.tick(75);
+		component.visible = true;
+
+		// reset original styles
+		assert.equal(div.style.animation, '__svelte_3809512021_0 100ms linear 0ms 1 both');
+	}
+};
diff --git a/test/runtime/samples/transition-css-in-out-in/main.svelte b/test/runtime/samples/transition-css-in-out-in/main.svelte
new file mode 100644
index 0000000000..5108452a39
--- /dev/null
+++ b/test/runtime/samples/transition-css-in-out-in/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	export let visible;
+
+	function foo() {
+		return {
+			duration: 100,
+			css: t => {
+				return `opacity: ${t}`;
+			}
+		};
+	}
+
+	function bar() {
+		return {
+			duration: 100,
+			css: t => {
+				return `opacity: ${t}`;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div in:foo out:bar></div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-aborted-outro-in-each/_config.js b/test/runtime/samples/transition-js-aborted-outro-in-each/_config.js
new file mode 100644
index 0000000000..75843d624e
--- /dev/null
+++ b/test/runtime/samples/transition-js-aborted-outro-in-each/_config.js
@@ -0,0 +1,39 @@
+export default {
+	props: {
+		things: [
+			'one',
+			'two',
+			'three'
+		]
+	},
+
+	test({ assert, component, target, raf }) {
+		const { things } = component;
+
+		component.things = [];
+		const spans = target.querySelectorAll('span');
+
+		raf.tick(25);
+		assert.equal(spans[0].foo, 0.75);
+		assert.equal(spans[1].foo, undefined);
+		assert.equal(spans[2].foo, undefined);
+
+		raf.tick(125);
+		assert.equal(spans[0].foo, 0);
+		assert.equal(spans[1].foo, 0.25);
+		assert.equal(spans[2].foo, 0.75);
+
+		component.things = things;
+		raf.tick(225);
+
+		assert.htmlEqual(target.innerHTML, `
+			<span>one</span>
+			<span>two</span>
+			<span>three</span>
+		`);
+
+		assert.equal(spans[0].foo, 1);
+		assert.equal(spans[1].foo, 1);
+		assert.equal(spans[2].foo, 1);
+	}
+};
diff --git a/test/runtime/samples/transition-js-aborted-outro-in-each/main.svelte b/test/runtime/samples/transition-js-aborted-outro-in-each/main.svelte
new file mode 100644
index 0000000000..689d301488
--- /dev/null
+++ b/test/runtime/samples/transition-js-aborted-outro-in-each/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	export let things;
+
+	function foo(node, params) {
+		return {
+			delay: params.delay,
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#each things as thing, i}
+	<span out:foo="{{delay: i * 50}}">{thing}</span>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-aborted-outro/_config.js b/test/runtime/samples/transition-js-aborted-outro/_config.js
new file mode 100644
index 0000000000..7ecc212739
--- /dev/null
+++ b/test/runtime/samples/transition-js-aborted-outro/_config.js
@@ -0,0 +1,24 @@
+export default {
+	props: {
+		visible: true
+	},
+
+	test({ assert, component, target, raf }) {
+		component.visible = false;
+		const span = target.querySelector('span');
+
+		raf.tick(50);
+		assert.equal(span.foo, 0.5);
+
+		component.visible = true;
+		assert.equal(span.foo, 1);
+
+		raf.tick(75);
+		assert.equal(span.foo, 1);
+
+		raf.tick(100);
+		assert.htmlEqual(target.innerHTML, `
+			<span>hello</span>
+		`);
+	}
+};
diff --git a/test/runtime/samples/transition-js-aborted-outro/main.svelte b/test/runtime/samples/transition-js-aborted-outro/main.svelte
new file mode 100644
index 0000000000..564b88a388
--- /dev/null
+++ b/test/runtime/samples/transition-js-aborted-outro/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let visible;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<span out:foo>hello</span>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-args-dynamic/_config.js b/test/runtime/samples/transition-js-args-dynamic/_config.js
new file mode 100644
index 0000000000..50bf9eeefc
--- /dev/null
+++ b/test/runtime/samples/transition-js-args-dynamic/_config.js
@@ -0,0 +1,15 @@
+export default {
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+
+		const div = target.querySelector('div');
+
+		assert.equal(div.value, 0);
+
+		raf.tick(200);
+
+		div.value = 'test';
+		component.visible = false;
+		assert.equal(div.value, 'test');
+	}
+};
diff --git a/test/runtime/samples/transition-js-args-dynamic/main.svelte b/test/runtime/samples/transition-js-args-dynamic/main.svelte
new file mode 100644
index 0000000000..1bb149de32
--- /dev/null
+++ b/test/runtime/samples/transition-js-args-dynamic/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	export let visible = false;
+	export let value = 0;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: () => {
+				node.value = value;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo={{value}}></div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-args/_config.js b/test/runtime/samples/transition-js-args/_config.js
new file mode 100644
index 0000000000..5fb9f1e93d
--- /dev/null
+++ b/test/runtime/samples/transition-js-args/_config.js
@@ -0,0 +1,14 @@
+export default {
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+
+		const div = target.querySelector('div');
+
+		assert.equal(div.foo, 0);
+		assert.equal(div.oof, 1);
+
+		raf.tick(50);
+		assert.equal(div.foo, 0.5);
+		assert.equal(div.oof, 0.5);
+	}
+};
diff --git a/test/runtime/samples/transition-js-args/main.svelte b/test/runtime/samples/transition-js-args/main.svelte
new file mode 100644
index 0000000000..969d6ef114
--- /dev/null
+++ b/test/runtime/samples/transition-js-args/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	export let visible = false;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: (t, u) => {
+				node.foo = t;
+				node.oof = u;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo></div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-await-block-outros/_config.js b/test/runtime/samples/transition-js-await-block-outros/_config.js
new file mode 100644
index 0000000000..7233e3f67f
--- /dev/null
+++ b/test/runtime/samples/transition-js-await-block-outros/_config.js
@@ -0,0 +1,174 @@
+let fulfil;
+
+export default {
+	props: {
+		promise: new Promise((f) => {
+			fulfil = f;
+		})
+	},
+	intro: true,
+
+	async test({ assert, target, component, raf }) {
+		assert.htmlEqual(target.innerHTML, '<p class="pending" foo="0.0">loading...</p>');
+
+		let time = 0;
+
+		raf.tick(time += 50);
+		assert.htmlEqual(target.innerHTML, '<p class="pending" foo="0.5">loading...</p>');
+
+		await fulfil(42);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p class="then" foo="0.0">42</p>
+			<p class="pending" foo="0.5">loading...</p>
+		`);
+
+		// see the transition 30% complete
+		raf.tick(time += 30);
+		assert.htmlEqual(target.innerHTML, `
+			<p class="then" foo="0.3">42</p>
+			<p class="pending" foo="0.2">loading...</p>
+		`);
+
+		// completely transition in the {:then} block
+		raf.tick(time += 70);
+		assert.htmlEqual(target.innerHTML, `
+			<p class="then" foo="1.0">42</p>
+		`);
+
+		// update promise #1
+		component.promise = new Promise((f) => {
+			fulfil = f;
+		});
+		await Promise.resolve();
+
+		assert.htmlEqual(target.innerHTML, `
+			<p class="then" foo="1.0">42</p>
+			<p class="pending" foo="0.0">loading...</p>
+		`);
+
+		raf.tick(time += 100);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p class="pending" foo="1.0">loading...</p>
+		`);
+
+		await fulfil(43);
+		assert.htmlEqual(target.innerHTML, `
+			<p class="pending" foo="1.0">loading...</p>
+			<p class="then" foo="0.0">43</p>
+		`);
+
+		raf.tick(time += 100);
+		assert.htmlEqual(target.innerHTML, `
+			<p class="then" foo="1.0">43</p>
+		`);
+
+		// update promise #2
+		component.promise = new Promise((f) => {
+			fulfil = f;
+		});
+		await Promise.resolve();
+
+		assert.htmlEqual(target.innerHTML, `
+			<p class="then" foo="1.0">43</p>
+			<p class="pending" foo="0.0">loading...</p>
+		`);
+
+		raf.tick(time += 50);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p class="then" foo="0.5">43</p>
+			<p class="pending" foo="0.5">loading...</p>
+		`);
+
+		await fulfil(44);
+		assert.htmlEqual(target.innerHTML, `
+			<p class="then" foo="0.5">43</p>
+			<p class="pending" foo="0.5">loading...</p>
+			<p class="then" foo="0.0">44</p>
+		`);
+
+		raf.tick(time += 100);
+		assert.htmlEqual(target.innerHTML, `
+			<p class="then" foo="1.0">44</p>
+		`);
+
+		// update promise #3 - quick succession
+		component.promise = new Promise((f) => {
+			fulfil = f;
+		});
+		await Promise.resolve();
+		assert.htmlEqual(target.innerHTML, `
+			<p class="then" foo="1.0">44</p>
+			<p class="pending" foo="0.0">loading...</p>
+		`);
+
+		raf.tick(time += 40);
+		assert.htmlEqual(target.innerHTML, `
+			<p class="then" foo="0.6">44</p>
+			<p class="pending" foo="0.4">loading...</p>
+		`);
+
+		await fulfil(45);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p class="then" foo="0.6">44</p>
+			<p class="pending" foo="0.4">loading...</p>
+			<p class="then" foo="0.0">45</p>
+		`);
+
+		raf.tick(time += 20);
+		assert.htmlEqual(target.innerHTML, `
+			<p class="then" foo="0.4">44</p>
+			<p class="pending" foo="0.2">loading...</p>
+			<p class="then" foo="0.2">45</p>
+		`);
+
+		component.promise = new Promise((f) => {
+			fulfil = f;
+		});
+		await Promise.resolve();
+
+		assert.htmlEqual(target.innerHTML, `
+			<p class="then" foo="0.4">44</p>
+			<p class="pending" foo="0.2">loading...</p>
+			<p class="then" foo="0.2">45</p>
+			<p class="pending" foo="0.0">loading...</p>
+		`);
+
+		raf.tick(time += 10);
+		assert.htmlEqual(target.innerHTML, `
+			<p class="then" foo="0.3">44</p>
+			<p class="pending" foo="0.1">loading...</p>
+			<p class="then" foo="0.1">45</p>
+			<p class="pending" foo="0.1">loading...</p>
+		`);
+
+		await fulfil(46);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p class="then" foo="0.3">44</p>
+			<p class="pending" foo="0.1">loading...</p>
+			<p class="then" foo="0.1">45</p>
+			<p class="pending" foo="0.1">loading...</p>
+			<p class="then" foo="0.0">46</p>
+		`);
+
+		raf.tick(time += 10);
+		assert.htmlEqual(target.innerHTML, `
+			<p class="then" foo="0.2">44</p>
+			<p class="then" foo="0.1">46</p>
+		`);
+
+		raf.tick(time += 20);
+		assert.htmlEqual(target.innerHTML, `
+			<p class="then" foo="0.3">46</p>
+		`);
+
+		raf.tick(time += 70);
+		assert.htmlEqual(target.innerHTML, `
+			<p class="then" foo="1.0">46</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/transition-js-await-block-outros/main.svelte b/test/runtime/samples/transition-js-await-block-outros/main.svelte
new file mode 100644
index 0000000000..6060b7672b
--- /dev/null
+++ b/test/runtime/samples/transition-js-await-block-outros/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	export let promise;
+
+	function foo(node) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.setAttribute('foo', t.toFixed(1));
+			}
+		};
+	}
+</script>
+
+{#await promise}
+	<p class='pending' transition:foo>loading...</p>
+{:then value}
+	<p class='then' transition:foo>{value}</p>
+{:catch error}
+	<p class='catch' transition:foo>{error.message}</p>
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-await-block/_config.js b/test/runtime/samples/transition-js-await-block/_config.js
new file mode 100644
index 0000000000..696a2dd5d4
--- /dev/null
+++ b/test/runtime/samples/transition-js-await-block/_config.js
@@ -0,0 +1,34 @@
+let fulfil;
+
+const promise = new Promise((f) => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		promise
+	},
+
+	intro: true,
+
+	test({ assert, target, raf }) {
+		const p = target.querySelector('p');
+
+		assert.equal(p.className, 'pending');
+		assert.equal(p.foo, 0);
+
+		raf.tick(50);
+		assert.equal(p.foo, 0.5);
+
+		fulfil(42);
+
+		return promise.then(() => {
+			raf.tick(80);
+			const ps = document.querySelectorAll('p');
+			assert.equal(ps[1].className, 'pending');
+			assert.equal(ps[0].className, 'then');
+			assert.equal(ps[1].foo, 0.2);
+			assert.equal(ps[0].foo, 0.3);
+		});
+	}
+};
diff --git a/test/runtime/samples/transition-js-await-block/main.svelte b/test/runtime/samples/transition-js-await-block/main.svelte
new file mode 100644
index 0000000000..0a0bb0005d
--- /dev/null
+++ b/test/runtime/samples/transition-js-await-block/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	export let promise;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#await promise}
+	<p class='pending' transition:foo>loading...</p>
+{:then value}
+	<p class='then' transition:foo>{value}</p>
+{:catch error}
+	<p class='catch' transition:foo>{error.message}</p>
+{/await}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-context/_config.js b/test/runtime/samples/transition-js-context/_config.js
new file mode 100644
index 0000000000..6bc20d3dd1
--- /dev/null
+++ b/test/runtime/samples/transition-js-context/_config.js
@@ -0,0 +1,11 @@
+export default {
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 42);
+
+		raf.tick(50);
+		assert.equal(div.foo, 42);
+	}
+};
diff --git a/test/runtime/samples/transition-js-context/main.svelte b/test/runtime/samples/transition-js-context/main.svelte
new file mode 100644
index 0000000000..d56ca61a6f
--- /dev/null
+++ b/test/runtime/samples/transition-js-context/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	export let x = 42;
+	export let visible = false;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = x;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo></div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-deferred-b/_config.js b/test/runtime/samples/transition-js-deferred-b/_config.js
new file mode 100644
index 0000000000..031943f6e3
--- /dev/null
+++ b/test/runtime/samples/transition-js-deferred-b/_config.js
@@ -0,0 +1,13 @@
+export default {
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+
+		return Promise.resolve().then(() => {
+			const div = target.querySelector('.foo');
+			assert.equal(div.foo, 0);
+
+			raf.tick(50);
+			assert.equal(div.foo, 0.5);
+		});
+	}
+};
diff --git a/test/runtime/samples/transition-js-deferred-b/main.svelte b/test/runtime/samples/transition-js-deferred-b/main.svelte
new file mode 100644
index 0000000000..2cd1dc3e7c
--- /dev/null
+++ b/test/runtime/samples/transition-js-deferred-b/main.svelte
@@ -0,0 +1,46 @@
+<script>
+	export let visible;
+
+	let foo_text;
+	let bar_text;
+
+	function foo(node, params) {
+		foo_text = node.textContent;
+
+		return () => {
+			if (bar_text !== `b`) {
+				throw new Error(`foo ran prematurely`);
+			}
+
+			return {
+				duration: 100,
+				tick: t => {
+					node.foo = t;
+				}
+			};
+		};
+	}
+
+	function bar(node, params) {
+		bar_text = node.textContent;
+
+		return () => {
+			if (foo_text !== `a`) {
+				throw new Error(`bar ran prematurely`);
+			}
+
+			return {
+				duration: 100,
+				tick: t => {
+					node.foo = t;
+				}
+			};
+		};
+	}
+</script>
+
+{#if visible}
+	<div class="foo" in:foo>a</div>
+{:else}
+	<div out:bar>b</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-deferred/_config.js b/test/runtime/samples/transition-js-deferred/_config.js
new file mode 100644
index 0000000000..9e4c0e82bb
--- /dev/null
+++ b/test/runtime/samples/transition-js-deferred/_config.js
@@ -0,0 +1,13 @@
+export default {
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+
+		return Promise.resolve().then(() => {
+			const div = target.querySelector('div');
+			assert.equal(div.foo, 0);
+
+			raf.tick(50);
+			assert.equal(div.foo, 0.5);
+		});
+	}
+};
diff --git a/test/runtime/samples/transition-js-deferred/main.svelte b/test/runtime/samples/transition-js-deferred/main.svelte
new file mode 100644
index 0000000000..063773df39
--- /dev/null
+++ b/test/runtime/samples/transition-js-deferred/main.svelte
@@ -0,0 +1,46 @@
+<script>
+	export let visible;
+
+	let foo_text;
+	let bar_text;
+
+	function foo(node, params) {
+		foo_text = node.textContent;
+
+		return () => {
+			if (bar_text !== `b`) {
+				throw new Error(`foo ran prematurely`);
+			}
+
+			return {
+				duration: 100,
+				tick: t => {
+					node.foo = t;
+				}
+			};
+		};
+	}
+
+	function bar(node, params) {
+		bar_text = node.textContent;
+
+		return () => {
+			if (foo_text !== `a`) {
+				throw new Error(`bar ran prematurely`);
+			}
+
+			return {
+				duration: 100,
+				tick: t => {
+					node.foo = t;
+				}
+			};
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo>a</div>
+{:else}
+	<div transition:bar>b</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-delay-in-out/_config.js b/test/runtime/samples/transition-js-delay-in-out/_config.js
new file mode 100644
index 0000000000..5a17eead20
--- /dev/null
+++ b/test/runtime/samples/transition-js-delay-in-out/_config.js
@@ -0,0 +1,22 @@
+export default {
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(50);
+		assert.equal(div.foo, 0);
+
+		raf.tick(150);
+		assert.equal(div.foo, 1);
+
+		component.visible = false;
+		assert.equal(div.bar, undefined);
+
+		raf.tick(200);
+		assert.equal(div.bar, 1);
+
+		raf.tick(300);
+		assert.equal(div.bar, 0);
+	}
+};
diff --git a/test/runtime/samples/transition-js-delay-in-out/main.svelte b/test/runtime/samples/transition-js-delay-in-out/main.svelte
new file mode 100644
index 0000000000..bfef30b59c
--- /dev/null
+++ b/test/runtime/samples/transition-js-delay-in-out/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	export let visible;
+
+	function foo(node, params) {
+		return {
+			delay: 50,
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+
+	function bar(node, params) {
+		return {
+			delay: 50,
+			duration: 100,
+			tick: t => {
+				node.bar = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div in:foo out:bar>delayed</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-delay/_config.js b/test/runtime/samples/transition-js-delay/_config.js
new file mode 100644
index 0000000000..aeb42b5d0f
--- /dev/null
+++ b/test/runtime/samples/transition-js-delay/_config.js
@@ -0,0 +1,27 @@
+export default {
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(50);
+		assert.equal(div.foo, 0);
+
+		raf.tick(100);
+		assert.equal(div.foo, 0.5);
+
+		component.visible = false;
+
+		raf.tick(125);
+		assert.equal(div.foo, 0.75);
+
+		raf.tick(150);
+		assert.equal(div.foo, 1);
+
+		raf.tick(175);
+		assert.equal(div.foo, 0.75);
+
+		raf.tick(250);
+		assert.equal(div.foo, 0);
+	}
+};
diff --git a/test/runtime/samples/transition-js-delay/main.svelte b/test/runtime/samples/transition-js-delay/main.svelte
new file mode 100644
index 0000000000..dbe3427973
--- /dev/null
+++ b/test/runtime/samples/transition-js-delay/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	export let visible;
+
+	function foo(node, params) {
+		return {
+			delay: 50,
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo>delayed</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-destroyed-before-end/_config.js b/test/runtime/samples/transition-js-destroyed-before-end/_config.js
new file mode 100644
index 0000000000..8033c7c00c
--- /dev/null
+++ b/test/runtime/samples/transition-js-destroyed-before-end/_config.js
@@ -0,0 +1,17 @@
+export default {
+	props: {
+		visible: true
+	},
+
+	test({ assert, component, target, raf }) {
+		component.visible = false;
+		const div = target.querySelector('div');
+
+		raf.tick(50);
+		assert.equal(div.foo, 0.5);
+
+		component.$destroy();
+
+		raf.tick(100);
+	}
+};
diff --git a/test/runtime/samples/transition-js-destroyed-before-end/main.svelte b/test/runtime/samples/transition-js-destroyed-before-end/main.svelte
new file mode 100644
index 0000000000..3ec92de494
--- /dev/null
+++ b/test/runtime/samples/transition-js-destroyed-before-end/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let visible;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo>destroy me</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-dynamic-component/A.svelte b/test/runtime/samples/transition-js-dynamic-component/A.svelte
new file mode 100644
index 0000000000..e1764ec76d
--- /dev/null
+++ b/test/runtime/samples/transition-js-dynamic-component/A.svelte
@@ -0,0 +1,12 @@
+<script>
+	function a(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.a = t;
+			}
+		};
+	}
+</script>
+
+<div transition:a>a</div>
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-dynamic-component/B.svelte b/test/runtime/samples/transition-js-dynamic-component/B.svelte
new file mode 100644
index 0000000000..d242d866fc
--- /dev/null
+++ b/test/runtime/samples/transition-js-dynamic-component/B.svelte
@@ -0,0 +1,12 @@
+<script>
+	function b(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.b = t;
+			}
+		};
+	}
+</script>
+
+<div transition:b>b</div>
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-dynamic-component/_config.js b/test/runtime/samples/transition-js-dynamic-component/_config.js
new file mode 100644
index 0000000000..b59bd41af8
--- /dev/null
+++ b/test/runtime/samples/transition-js-dynamic-component/_config.js
@@ -0,0 +1,34 @@
+export default {
+	props: {
+		x: true
+	},
+
+	html: `
+		<div>a</div>
+	`,
+
+	test({ assert, component, target, raf }) {
+		component.x = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>a</div>
+			<div>b</div>
+		`);
+
+		const [a, b] = target.querySelectorAll('div');
+
+		raf.tick(25);
+
+		assert.equal(a.a, 0.75);
+		assert.equal(b.b, 0.25);
+
+		raf.tick(100);
+
+		assert.equal(a.a, 0);
+		assert.equal(b.b, 1);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>b</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/transition-js-dynamic-component/main.svelte b/test/runtime/samples/transition-js-dynamic-component/main.svelte
new file mode 100644
index 0000000000..08697ec1a9
--- /dev/null
+++ b/test/runtime/samples/transition-js-dynamic-component/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import A from './A.svelte';
+	import B from './B.svelte';
+
+	export let x;
+</script>
+
+<svelte:component this="{x ? A : B}"/>
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-dynamic-if-block-bidi/_config.js b/test/runtime/samples/transition-js-dynamic-if-block-bidi/_config.js
new file mode 100644
index 0000000000..95fe7b01f3
--- /dev/null
+++ b/test/runtime/samples/transition-js-dynamic-if-block-bidi/_config.js
@@ -0,0 +1,36 @@
+export default {
+	props: {
+		name: 'world'
+	},
+
+	test({ assert, component, target, raf }) {
+		global.count = 0;
+
+		component.visible = true;
+		assert.equal(global.count, 1);
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(75);
+		component.name = 'everybody';
+		assert.equal(div.foo, 0.75);
+		assert.htmlEqual(div.innerHTML, 'hello everybody!');
+
+		component.visible = false;
+		component.name = 'again';
+		assert.htmlEqual(div.innerHTML, 'hello everybody!');
+
+		raf.tick(125);
+		assert.equal(div.foo, 0.25);
+
+		component.visible = true;
+		raf.tick(175);
+		assert.equal(div.foo, 0.75);
+		assert.htmlEqual(div.innerHTML, 'hello again!');
+
+		raf.tick(200);
+		assert.equal(div.foo, 1);
+
+		raf.tick(225);
+	}
+};
diff --git a/test/runtime/samples/transition-js-dynamic-if-block-bidi/main.svelte b/test/runtime/samples/transition-js-dynamic-if-block-bidi/main.svelte
new file mode 100644
index 0000000000..5c28cc164c
--- /dev/null
+++ b/test/runtime/samples/transition-js-dynamic-if-block-bidi/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	export let visible;
+	export let name;
+
+	function foo(node, params) {
+		global.count += 1;
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo>hello {name}!</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-each-block-intro-outro/_config.js b/test/runtime/samples/transition-js-each-block-intro-outro/_config.js
new file mode 100644
index 0000000000..9a0326fbb0
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-block-intro-outro/_config.js
@@ -0,0 +1,41 @@
+export default {
+	props: {
+		visible: false,
+		things: [ 'a', 'b', 'c' ]
+	},
+
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+		const divs = target.querySelectorAll('div');
+		assert.equal(divs[0].foo, 0);
+		assert.equal(divs[1].foo, 0);
+		assert.equal(divs[2].foo, 0);
+
+		raf.tick(50);
+		assert.equal(divs[0].foo, 0.5);
+		assert.equal(divs[1].foo, 0.5);
+		assert.equal(divs[2].foo, 0.5);
+
+		component.visible = false;
+
+		raf.tick(70);
+		assert.equal(divs[0].foo, 0.7);
+		assert.equal(divs[1].foo, 0.7);
+		assert.equal(divs[2].foo, 0.7);
+
+		assert.equal(divs[0].bar, 0.8);
+		assert.equal(divs[1].bar, 0.8);
+		assert.equal(divs[2].bar, 0.8);
+
+		component.visible = true;
+
+		raf.tick(100);
+		assert.equal(divs[0].foo, 0.3);
+		assert.equal(divs[1].foo, 0.3);
+		assert.equal(divs[2].foo, 0.3);
+
+		assert.equal(divs[0].bar, 1);
+		assert.equal(divs[1].bar, 1);
+		assert.equal(divs[2].bar, 1);
+	}
+};
diff --git a/test/runtime/samples/transition-js-each-block-intro-outro/main.svelte b/test/runtime/samples/transition-js-each-block-intro-outro/main.svelte
new file mode 100644
index 0000000000..a582a22eb8
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-block-intro-outro/main.svelte
@@ -0,0 +1,28 @@
+<script>
+	export let things;
+	export let visible;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+
+	function bar(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.bar = t;
+			}
+		};
+	}
+</script>
+
+{#each things as thing}
+	{#if visible}
+		<div in:foo out:bar>{thing}</div>
+	{/if}
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-each-block-intro/_config.js b/test/runtime/samples/transition-js-each-block-intro/_config.js
new file mode 100644
index 0000000000..14e17ae8a9
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-block-intro/_config.js
@@ -0,0 +1,32 @@
+export default {
+	props: {
+		things: ['a', 'b', 'c']
+	},
+
+	intro: true,
+
+	test({ assert, component, target, raf }) {
+		let divs = target.querySelectorAll('div');
+		assert.equal(divs[0].foo, 0);
+		assert.equal(divs[1].foo, 0);
+		assert.equal(divs[2].foo, 0);
+
+		raf.tick(50);
+		assert.equal(divs[0].foo, 0.5);
+		assert.equal(divs[1].foo, 0.5);
+		assert.equal(divs[2].foo, 0.5);
+
+		component.things = ['a', 'b', 'c', 'd'];
+		divs = target.querySelectorAll('div');
+		assert.equal(divs[0].foo, 0.5);
+		assert.equal(divs[1].foo, 0.5);
+		assert.equal(divs[2].foo, 0.5);
+		assert.equal(divs[3].foo, 0);
+
+		raf.tick(75);
+		assert.equal(divs[0].foo, 0.75);
+		assert.equal(divs[1].foo, 0.75);
+		assert.equal(divs[2].foo, 0.75);
+		assert.equal(divs[3].foo, 0.25);
+	}
+};
diff --git a/test/runtime/samples/transition-js-each-block-intro/main.svelte b/test/runtime/samples/transition-js-each-block-intro/main.svelte
new file mode 100644
index 0000000000..d19924af61
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-block-intro/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let things;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#each things as thing}
+	<div in:foo>{thing}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-each-block-keyed-intro-outro/_config.js b/test/runtime/samples/transition-js-each-block-keyed-intro-outro/_config.js
new file mode 100644
index 0000000000..5d1ae5d3e9
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-block-keyed-intro-outro/_config.js
@@ -0,0 +1,63 @@
+export default {
+	props: {
+		things: [
+			{ name: 'a' },
+			{ name: 'b' },
+			{ name: 'c' }
+		]
+	},
+
+	intro: true,
+
+	test({ assert, component, target, raf }) {
+		const divs = target.querySelectorAll('div');
+		divs[0].i = 0; // for debugging
+		divs[1].i = 1;
+		divs[2].i = 2;
+
+		assert.equal(divs[0].foo, 0);
+		assert.equal(divs[1].foo, 0);
+		assert.equal(divs[2].foo, 0);
+
+		raf.tick(100);
+		assert.equal(divs[0].foo, 1);
+		assert.equal(divs[1].foo, 1);
+		assert.equal(divs[2].foo, 1);
+
+		component.things = [
+			{ name: 'a' },
+			{ name: 'c' }
+		];
+
+		const divs2 = target.querySelectorAll('div');
+		assert.strictEqual(divs[0], divs2[0]);
+		assert.strictEqual(divs[1], divs2[1]);
+		assert.strictEqual(divs[2], divs2[2]);
+
+		raf.tick(150);
+		assert.equal(divs[0].foo, 1);
+		assert.equal(divs[1].foo, 0.5);
+		assert.equal(divs[2].foo, 1);
+
+		component.things = [
+			{ name: 'a' },
+			{ name: 'b' },
+			{ name: 'c' }
+		];
+
+		raf.tick(175);
+		assert.equal(divs[0].foo, 1);
+		assert.equal(divs[1].foo, 0.75);
+		assert.equal(divs[2].foo, 1);
+
+		raf.tick(225);
+		const divs3 = target.querySelectorAll('div');
+		assert.strictEqual(divs[0], divs3[0]);
+		assert.strictEqual(divs[1], divs3[1]);
+		assert.strictEqual(divs[2], divs3[2]);
+
+		assert.equal(divs[0].foo, 1);
+		assert.equal(divs[1].foo, 1);
+		assert.equal(divs[2].foo, 1);
+	}
+};
diff --git a/test/runtime/samples/transition-js-each-block-keyed-intro-outro/main.svelte b/test/runtime/samples/transition-js-each-block-keyed-intro-outro/main.svelte
new file mode 100644
index 0000000000..89282dafeb
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-block-keyed-intro-outro/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let things;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#each things as thing (thing.name)}
+	<div transition:foo>{thing.name}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-each-block-keyed-intro/_config.js b/test/runtime/samples/transition-js-each-block-keyed-intro/_config.js
new file mode 100644
index 0000000000..f6b1416789
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-block-keyed-intro/_config.js
@@ -0,0 +1,47 @@
+export default {
+	props: {
+		things: [
+			{ name: 'a' },
+			{ name: 'b' },
+			{ name: 'c' }
+		]
+	},
+
+	intro: true,
+
+	test({ assert, component, target, raf }) {
+		let divs = target.querySelectorAll('div');
+		assert.equal(divs[0].foo, 0);
+		assert.equal(divs[1].foo, 0);
+		assert.equal(divs[2].foo, 0);
+
+		raf.tick(50);
+		assert.equal(divs[0].foo, 0.5);
+		assert.equal(divs[1].foo, 0.5);
+		assert.equal(divs[2].foo, 0.5);
+
+		component.things = [
+			{ name: 'a' },
+			{ name: 'woo!' },
+			{ name: 'b' },
+			{ name: 'c' }
+		];
+		assert.htmlEqual(target.innerHTML, `
+			<div>a</div>
+			<div>woo!</div>
+			<div>b</div>
+			<div>c</div>
+		`);
+		divs = target.querySelectorAll('div');
+		assert.equal(divs[0].foo, 0.5);
+		assert.equal(divs[1].foo, 0);
+		assert.equal(divs[2].foo, 0.5);
+		assert.equal(divs[3].foo, 0.5);
+
+		raf.tick(75);
+		assert.equal(divs[0].foo, 0.75);
+		assert.equal(divs[1].foo, 0.25);
+		assert.equal(divs[2].foo, 0.75);
+		assert.equal(divs[3].foo, 0.75);
+	}
+};
diff --git a/test/runtime/samples/transition-js-each-block-keyed-intro/main.svelte b/test/runtime/samples/transition-js-each-block-keyed-intro/main.svelte
new file mode 100644
index 0000000000..69697b444f
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-block-keyed-intro/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let things;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#each things as thing (thing.name)}
+	<div in:foo>{thing.name}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-each-block-keyed-outro/_config.js b/test/runtime/samples/transition-js-each-block-keyed-outro/_config.js
new file mode 100644
index 0000000000..f3677ef89a
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-block-keyed-outro/_config.js
@@ -0,0 +1,28 @@
+export default {
+	props: {
+		things: [
+			{ name: 'a' },
+			{ name: 'b' },
+			{ name: 'c' }
+		]
+	},
+
+	test({ assert, component, target, raf }) {
+		const divs = target.querySelectorAll( 'div' );
+
+		component.things = [
+			{ name: 'a' },
+			{ name: 'c' }
+		];
+
+		const divs2 = target.querySelectorAll( 'div' );
+		assert.strictEqual( divs[0], divs2[0] );
+		assert.strictEqual( divs[1], divs2[1] );
+		assert.strictEqual( divs[2], divs2[2] );
+
+		raf.tick( 50 );
+		assert.equal( divs[0].foo, undefined );
+		assert.equal( divs[1].foo, 0.5 );
+		assert.equal( divs[2].foo, undefined );
+	}
+};
diff --git a/test/runtime/samples/transition-js-each-block-keyed-outro/main.svelte b/test/runtime/samples/transition-js-each-block-keyed-outro/main.svelte
new file mode 100644
index 0000000000..58d425d135
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-block-keyed-outro/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let things;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#each things as thing (thing.name)}
+	<div out:foo>{thing.name}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-each-block-outro/_config.js b/test/runtime/samples/transition-js-each-block-outro/_config.js
new file mode 100644
index 0000000000..b36a3d93eb
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-block-outro/_config.js
@@ -0,0 +1,19 @@
+export default {
+	props: {
+		things: [ 'a', 'b', 'c' ]
+	},
+
+	test({ assert, component, target, raf }) {
+		const divs = target.querySelectorAll( 'div' );
+
+		component.things = [ 'a' ];
+
+		raf.tick( 50 );
+		assert.equal( divs[0].foo, undefined );
+		assert.equal( divs[1].foo, 0.5 );
+		assert.equal( divs[2].foo, 0.5 );
+
+		raf.tick( 100 );
+		assert.htmlEqual(target.innerHTML, '<div>a</div>');
+	}
+};
diff --git a/test/runtime/samples/transition-js-each-block-outro/main.svelte b/test/runtime/samples/transition-js-each-block-outro/main.svelte
new file mode 100644
index 0000000000..77301a25f5
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-block-outro/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let things;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#each things as thing}
+	<div out:foo>{thing}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-each-else-block-intro-outro/_config.js b/test/runtime/samples/transition-js-each-else-block-intro-outro/_config.js
new file mode 100644
index 0000000000..692713840d
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-else-block-intro-outro/_config.js
@@ -0,0 +1,54 @@
+export default {
+	props: {
+		things: ['a', 'b', 'c']
+	},
+
+	test({ assert, component, target, raf }) {
+		component.things = [];
+		let div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(200);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(300);
+		assert.equal(div.foo, 0.75);
+
+		raf.tick(400);
+		assert.equal(div.foo, 1);
+
+		raf.tick(600);
+		component.things = ['a', 'b', 'c'];
+
+		raf.tick(700);
+		assert.equal(div.foo, 1);
+		assert.equal(div.bar, 0.75);
+
+		raf.tick(800);
+		assert.equal(div.foo, 1);
+		assert.equal(div.bar, 0.5);
+
+		raf.tick(900);
+		assert.equal(div.foo, 1);
+		assert.equal(div.bar, 0.25);
+
+		// test outro before intro complete
+		raf.tick(1000);
+		component.things = [];
+		div = target.querySelector('div');
+
+		raf.tick(1200);
+		assert.equal(div.foo, 0.5);
+
+		component.things = ['a', 'b', 'c'];
+		raf.tick(1300);
+		assert.equal(div.foo, 0.75);
+		assert.equal(div.bar, 0.75);
+
+		raf.tick(1400);
+		assert.equal(div.foo, 1);
+		assert.equal(div.bar, 0.5);
+
+		raf.tick(2000);
+	}
+};
diff --git a/test/runtime/samples/transition-js-each-else-block-intro-outro/main.svelte b/test/runtime/samples/transition-js-each-else-block-intro-outro/main.svelte
new file mode 100644
index 0000000000..1691e77f52
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-else-block-intro-outro/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	export let things;
+
+	function foo(node, params) {
+		return {
+			duration: 400,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+
+	function bar(node, params) {
+		return {
+			duration: 400,
+			tick: t => {
+				node.bar = t;
+			}
+		};
+	}
+</script>
+
+{#each things as thing}
+	<p>{thing}</p>
+{:else}
+	<div in:foo out:bar>else</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-each-else-block-intro/_config.js b/test/runtime/samples/transition-js-each-else-block-intro/_config.js
new file mode 100644
index 0000000000..77edb37ef2
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-else-block-intro/_config.js
@@ -0,0 +1,22 @@
+export default {
+	props: {
+		things: ['a', 'b', 'c']
+	},
+
+	test({ assert, component, target, raf }) {
+		component.things = [];
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(200);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(300);
+		assert.equal(div.foo, 0.75);
+
+		raf.tick(400);
+		assert.equal(div.foo, 1);
+
+		raf.tick(500);
+	}
+};
diff --git a/test/runtime/samples/transition-js-each-else-block-intro/main.svelte b/test/runtime/samples/transition-js-each-else-block-intro/main.svelte
new file mode 100644
index 0000000000..bda8746c46
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-else-block-intro/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	export let things;
+
+	function foo(node, params) {
+		return {
+			duration: 400,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#each things as thing}
+	<p>{thing}</p>
+{:else}
+	<div in:foo>else</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-each-else-block-outro/_config.js b/test/runtime/samples/transition-js-each-else-block-outro/_config.js
new file mode 100644
index 0000000000..fb5d9cb823
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-else-block-outro/_config.js
@@ -0,0 +1,20 @@
+export default {
+	props: {
+		things: []
+	},
+	test({ assert, component, target, raf }) {
+		const div = target.querySelector('div');
+		component.things = ['a', 'b', 'c'];
+
+		raf.tick(200);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(300);
+		assert.equal(div.foo, 0.25);
+
+		raf.tick(400);
+		assert.equal(div.foo, 0);
+
+		raf.tick(500);
+	}
+};
diff --git a/test/runtime/samples/transition-js-each-else-block-outro/main.svelte b/test/runtime/samples/transition-js-each-else-block-outro/main.svelte
new file mode 100644
index 0000000000..246c146127
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-else-block-outro/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	export let things;
+
+	function foo(node, params) {
+		return {
+			duration: 400,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#each things as thing}
+	<p>{thing}</p>
+{:else}
+	<div out:foo>else</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-each-keyed-unchanged/_config.js b/test/runtime/samples/transition-js-each-keyed-unchanged/_config.js
new file mode 100644
index 0000000000..ddf83e4397
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-keyed-unchanged/_config.js
@@ -0,0 +1,25 @@
+export default {
+	props: {
+		numbers: [1, 2, 3, 4, 5]
+	},
+
+	test({ assert, component, target }) {
+		const divs1 = target.querySelectorAll('div');
+		assert.equal(divs1[0].foo, undefined);
+
+		component.numbers = [1, 2, 5, 4, 3];
+		const divs2 = target.querySelectorAll('div');
+
+		assert.equal(divs1[0], divs2[0]);
+		assert.equal(divs1[1], divs2[1]);
+		assert.equal(divs1[2], divs2[4]);
+		assert.equal(divs1[3], divs2[3]);
+		assert.equal(divs1[4], divs2[2]);
+
+		assert.equal(divs1[0].foo, undefined);
+		assert.equal(divs1[1].foo, undefined);
+		assert.equal(divs1[2].foo, undefined);
+		assert.equal(divs1[3].foo, undefined);
+		assert.equal(divs1[4].foo, undefined);
+	}
+};
diff --git a/test/runtime/samples/transition-js-each-keyed-unchanged/main.svelte b/test/runtime/samples/transition-js-each-keyed-unchanged/main.svelte
new file mode 100644
index 0000000000..ef2426c2db
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-keyed-unchanged/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let numbers;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#each numbers as num, i (num)}
+	<div transition:foo>{num}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-each-outro-cancelled/_config.js b/test/runtime/samples/transition-js-each-outro-cancelled/_config.js
new file mode 100644
index 0000000000..9f9bd35f05
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-outro-cancelled/_config.js
@@ -0,0 +1,57 @@
+export default {
+	html: '<section></section>',
+	async test({ assert, component, target, raf }) {
+		await component.add();
+		await component.add();
+
+		let time = 0;
+
+		assert.htmlEqual(target.innerHTML, `
+			<section>
+				<div t="0">Thing 1</div>
+				<div t="0">Thing 2</div>
+			</section>
+		`);
+
+		raf.tick(time += 400);
+
+		assert.htmlEqual(target.innerHTML, `
+			<section>
+				<div t="1">Thing 1</div>
+				<div t="1">Thing 2</div>
+			</section>
+		`);
+
+		await component.toggle();
+		// transition halfway
+		raf.tick(time += 200);
+
+		assert.htmlEqual(target.innerHTML, `
+			<section t="0.5">
+				<div t="1">Thing 1</div>
+				<div t="1">Thing 2</div>
+			</section>
+		`);
+
+		await component.toggle();
+		// transition back
+		raf.tick(time += 200);
+
+		assert.htmlEqual(target.innerHTML, `
+			<section t="1">
+				<div t="1">Thing 1</div>
+				<div t="1">Thing 2</div>
+			</section>
+		`);
+
+		await component.remove(1);
+
+		raf.tick(time += 400);
+
+		assert.htmlEqual(target.innerHTML, `
+			<section t="1">
+				<div t="1">Thing 2</div>
+			</section>
+		`);
+	}
+};
diff --git a/test/runtime/samples/transition-js-each-outro-cancelled/main.svelte b/test/runtime/samples/transition-js-each-outro-cancelled/main.svelte
new file mode 100644
index 0000000000..7c08be492f
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-outro-cancelled/main.svelte
@@ -0,0 +1,29 @@
+<script>
+	function fade(node) {
+		return {
+			duration: 400,
+			tick(t) {
+				node.setAttribute('t', t);
+			}
+		};
+	}
+
+	let shown = true;
+	let _id = 1;
+	let items = [];
+
+	export const toggle = () => (shown = !shown);
+	export const add = () => {
+		items = items.concat({ _id, name: `Thing ${_id}` });
+		_id++;
+	};
+	export const remove = (id) => (items = items.filter(({ _id }) => _id !== id));
+</script>
+
+{#if shown}
+	<section transition:fade>
+		{#each items as thing (thing._id)}
+			<div in:fade|local out:fade|local>{thing.name}</div>
+		{/each}
+	</section>
+{/if}
diff --git a/test/runtime/samples/transition-js-each-unchanged/_config.js b/test/runtime/samples/transition-js-each-unchanged/_config.js
new file mode 100644
index 0000000000..2dfa1f65ac
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-unchanged/_config.js
@@ -0,0 +1,25 @@
+export default {
+	props: {
+		numbers: [1, 2, 3, 4, 5]
+	},
+
+	test({ assert, component, target }) {
+		const divs1 = target.querySelectorAll('div');
+		assert.equal(divs1[0].foo, undefined);
+
+		component.numbers = [1, 2, 5, 4, 3];
+		const divs2 = target.querySelectorAll('div');
+
+		assert.equal(divs1[0], divs2[0]);
+		assert.equal(divs1[1], divs2[1]);
+		assert.equal(divs1[2], divs2[2]);
+		assert.equal(divs1[3], divs2[3]);
+		assert.equal(divs1[4], divs2[4]);
+
+		assert.equal(divs1[0].foo, undefined);
+		assert.equal(divs1[1].foo, undefined);
+		assert.equal(divs1[2].foo, undefined);
+		assert.equal(divs1[3].foo, undefined);
+		assert.equal(divs1[4].foo, undefined);
+	}
+};
diff --git a/test/runtime/samples/transition-js-each-unchanged/main.svelte b/test/runtime/samples/transition-js-each-unchanged/main.svelte
new file mode 100644
index 0000000000..d1cee7bd23
--- /dev/null
+++ b/test/runtime/samples/transition-js-each-unchanged/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let numbers;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#each numbers as num, i}
+	<div transition:foo>{num}</div>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-events-in-out/_config.js b/test/runtime/samples/transition-js-events-in-out/_config.js
new file mode 100644
index 0000000000..588a4edbd7
--- /dev/null
+++ b/test/runtime/samples/transition-js-events-in-out/_config.js
@@ -0,0 +1,71 @@
+export default {
+	props: {
+		visible: false,
+		things: ['a', 'b', 'c', 'd']
+	},
+
+	// intro: true,
+
+	html: `
+		<p>waiting...</p>
+	`,
+
+	async test({ assert, component, target, raf }) {
+		component.visible = true;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>introstart</p>
+			<p>a</p>
+			<p>b</p>
+			<p>c</p>
+			<p>d</p>
+		`);
+
+		await raf.tick(50);
+
+		assert.deepEqual(component.intros.sort(), ['a', 'b', 'c', 'd']);
+		assert.equal(component.intro_count, 4);
+
+		await raf.tick(100);
+		assert.equal(component.intro_count, 0);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>introend</p>
+			<p>a</p>
+			<p>b</p>
+			<p>c</p>
+			<p>d</p>
+		`);
+
+		component.visible = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>outrostart</p>
+			<p>a</p>
+			<p>b</p>
+			<p>c</p>
+			<p>d</p>
+		`);
+
+		await raf.tick(150);
+		assert.deepEqual(component.outros.sort(), ['a', 'b', 'c', 'd']);
+		assert.equal(component.outro_count, 4);
+
+		await raf.tick(200);
+		assert.equal(component.outro_count, 0);
+
+		component.visible = true;
+
+		await raf.tick(250);
+		assert.deepEqual(component.intros.sort(), ['a', 'a', 'b', 'b', 'c', 'c', 'd', 'd']);
+		assert.equal(component.intro_count, 4);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>introstart</p>
+			<p>a</p>
+			<p>b</p>
+			<p>c</p>
+			<p>d</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/transition-js-events-in-out/main.svelte b/test/runtime/samples/transition-js-events-in-out/main.svelte
new file mode 100644
index 0000000000..33129f529b
--- /dev/null
+++ b/test/runtime/samples/transition-js-events-in-out/main.svelte
@@ -0,0 +1,59 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let things;
+	export let visible;
+
+	export let intros = [];
+	export let outros = [];
+	export let intro_count = 0;
+	export let outro_count = 0;
+
+	let status = 'waiting...';
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+
+	function introstart(e) {
+		intros.push(e.target.textContent);
+		intro_count += 1;
+		status = 'introstart';
+	}
+
+	function introend(e) {
+		intro_count -= 1;
+		status = 'introend';
+	}
+
+	function outrostart(e) {
+		outros.push(e.target.textContent);
+		outro_count += 1;
+		status = 'outrostart';
+	}
+
+	function outroend(e) {
+		outro_count -= 1;
+		status = 'outroend';
+	}
+</script>
+
+<p>{status}</p>
+
+{#each things as thing}
+	{#if visible}
+		<p
+			in:foo
+			out:foo
+			on:introstart={introstart}
+			on:introend={introend}
+			on:outrostart={outrostart}
+			on:outroend={outroend}
+		>{thing}</p>
+	{/if}
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-events/_config.js b/test/runtime/samples/transition-js-events/_config.js
new file mode 100644
index 0000000000..54b068dace
--- /dev/null
+++ b/test/runtime/samples/transition-js-events/_config.js
@@ -0,0 +1,70 @@
+export default {
+	props: {
+		visible: false,
+		things: ['a', 'b', 'c', 'd']
+	},
+
+	// intro: true,
+
+	html: `
+		<p>waiting...</p>
+	`,
+
+	async test({ assert, component, target, raf }) {
+		component.visible = true;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>introstart</p>
+			<p>a</p>
+			<p>b</p>
+			<p>c</p>
+			<p>d</p>
+		`);
+
+		raf.tick(50);
+		assert.deepEqual(component.intros.sort(), ['a', 'b', 'c', 'd']);
+		assert.equal(component.intro_count, 4);
+
+		await raf.tick(100);
+		assert.equal(component.intro_count, 0);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>introend</p>
+			<p>a</p>
+			<p>b</p>
+			<p>c</p>
+			<p>d</p>
+		`);
+
+		component.visible = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>outrostart</p>
+			<p>a</p>
+			<p>b</p>
+			<p>c</p>
+			<p>d</p>
+		`);
+
+		raf.tick(150);
+		assert.deepEqual(component.outros.sort(), ['a', 'b', 'c', 'd']);
+		assert.equal(component.outro_count, 4);
+
+		raf.tick(200);
+		assert.equal(component.outro_count, 0);
+
+		component.visible = true;
+
+		await raf.tick(250);
+		assert.deepEqual(component.intros.sort(), ['a', 'a', 'b', 'b', 'c', 'c', 'd', 'd']);
+		assert.equal(component.intro_count, 4);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>introstart</p>
+			<p>a</p>
+			<p>b</p>
+			<p>c</p>
+			<p>d</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/transition-js-events/main.svelte b/test/runtime/samples/transition-js-events/main.svelte
new file mode 100644
index 0000000000..22ceb40006
--- /dev/null
+++ b/test/runtime/samples/transition-js-events/main.svelte
@@ -0,0 +1,58 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let things;
+	export let visible;
+
+	export let intros = [];
+	export let outros = [];
+	export let intro_count = 0;
+	export let outro_count = 0;
+
+	let status = 'waiting...';
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+
+	function introstart(e) {
+		intros.push(e.target.textContent);
+		intro_count += 1;
+		status = 'introstart';
+	}
+
+	function introend(e) {
+		intro_count -= 1;
+		status = 'introend';
+	}
+
+	function outrostart(e) {
+		outros.push(e.target.textContent);
+		outro_count += 1;
+		status = 'outrostart';
+	}
+
+	function outroend(e) {
+		outro_count -= 1;
+		status = 'outroend';
+	}
+</script>
+
+<p>{status}</p>
+
+{#each things as thing}
+	{#if visible}
+		<p
+			transition:foo
+			on:introstart={introstart}
+			on:introend={introend}
+			on:outrostart={outrostart}
+			on:outroend={outroend}
+		>{thing}</p>
+	{/if}
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-if-block-bidi/_config.js b/test/runtime/samples/transition-js-if-block-bidi/_config.js
new file mode 100644
index 0000000000..68242ecbbf
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-block-bidi/_config.js
@@ -0,0 +1,28 @@
+export default {
+	test({ assert, component, target, raf }) {
+		global.count = 0;
+
+		component.visible = true;
+		assert.equal(global.count, 1);
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(300);
+		assert.equal(div.foo, 0.75);
+
+		component.visible = false;
+		assert.equal(global.count, 1);
+
+		raf.tick(500);
+		assert.equal(div.foo, 0.25);
+
+		component.visible = true;
+		raf.tick(700);
+		assert.equal(div.foo, 0.75);
+
+		raf.tick(800);
+		assert.equal(div.foo, 1);
+
+		raf.tick(900);
+	}
+};
diff --git a/test/runtime/samples/transition-js-if-block-bidi/main.svelte b/test/runtime/samples/transition-js-if-block-bidi/main.svelte
new file mode 100644
index 0000000000..1a34ef51b2
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-block-bidi/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	export let visible;
+
+	function foo(node, params) {
+		global.count += 1;
+		return {
+			duration: 400,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo>foo bidi</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-if-block-in-each-block-bidi-2/_config.js b/test/runtime/samples/transition-js-if-block-in-each-block-bidi-2/_config.js
new file mode 100644
index 0000000000..ed88103f2c
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-block-in-each-block-bidi-2/_config.js
@@ -0,0 +1,28 @@
+export default {
+	props: {
+		visible: false,
+		threshold: 5
+	},
+
+	html: `
+		<div>1</div>
+		<div>2</div>
+		<div>3</div>
+		<div>4</div>
+		<div>5</div>
+	`,
+
+	test({ assert, component, target, raf }) {
+		raf.tick(100);
+
+		component.threshold = 4;
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, `
+			<div>1</div>
+			<div>2</div>
+			<div>3</div>
+			<div>4</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/transition-js-if-block-in-each-block-bidi-2/main.svelte b/test/runtime/samples/transition-js-if-block-in-each-block-bidi-2/main.svelte
new file mode 100644
index 0000000000..cffb940f38
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-block-in-each-block-bidi-2/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	export let visible;
+	export let threshold;
+
+	function foo(node) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#each [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as number}
+	{#if visible}
+		{#if threshold >= number}
+			<div transition:foo>{number}</div>
+		{/if}
+	{:else}
+		{#if threshold >= number}
+			<div transition:foo>{number}</div>
+		{/if}
+	{/if}
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-if-block-in-each-block-bidi-3/_config.js b/test/runtime/samples/transition-js-if-block-in-each-block-bidi-3/_config.js
new file mode 100644
index 0000000000..09511fe976
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-block-in-each-block-bidi-3/_config.js
@@ -0,0 +1,33 @@
+export default {
+	props: {
+		visible: false,
+		threshold: 5
+	},
+
+	html: `
+		<div>1</div>
+		<div>2</div>
+		<div>3</div>
+		<div>4</div>
+		<div>5</div>
+	`,
+
+	test({ assert, component, target, raf }) {
+		raf.tick(100);
+
+		component.threshold = 4;
+		raf.tick(150);
+		component.threshold = 5;
+		raf.tick(200);
+
+		component.threshold = 5.5;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>1</div>
+			<div>2</div>
+			<div>3</div>
+			<div>4</div>
+			<div>5</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/transition-js-if-block-in-each-block-bidi-3/main.svelte b/test/runtime/samples/transition-js-if-block-in-each-block-bidi-3/main.svelte
new file mode 100644
index 0000000000..cffb940f38
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-block-in-each-block-bidi-3/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	export let visible;
+	export let threshold;
+
+	function foo(node) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#each [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as number}
+	{#if visible}
+		{#if threshold >= number}
+			<div transition:foo>{number}</div>
+		{/if}
+	{:else}
+		{#if threshold >= number}
+			<div transition:foo>{number}</div>
+		{/if}
+	{/if}
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-if-block-in-each-block-bidi/_config.js b/test/runtime/samples/transition-js-if-block-in-each-block-bidi/_config.js
new file mode 100644
index 0000000000..b02ccffc81
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-block-in-each-block-bidi/_config.js
@@ -0,0 +1,45 @@
+export default {
+	props: {
+		threshold: 5
+	},
+
+	html: `
+		<div>1</div>
+		<div>2</div>
+		<div>3</div>
+		<div>4</div>
+		<div>5</div>
+	`,
+
+	intro: true,
+
+	test({ assert, component, target, raf }) {
+		const divs = target.querySelectorAll('div');
+
+		assert.equal(divs[0].foo, 0);
+
+		raf.tick(100);
+		assert.equal(divs[0].foo, 1);
+
+		component.threshold = 4;
+		assert.equal(divs[4].foo, 1);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, `
+			<div>1</div>
+			<div>2</div>
+			<div>3</div>
+			<div>4</div>
+		`);
+
+		component.threshold = 3;
+		assert.equal(divs[3].foo, 1);
+
+		raf.tick(300);
+		assert.htmlEqual(target.innerHTML, `
+			<div>1</div>
+			<div>2</div>
+			<div>3</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/transition-js-if-block-in-each-block-bidi/main.svelte b/test/runtime/samples/transition-js-if-block-in-each-block-bidi/main.svelte
new file mode 100644
index 0000000000..5e8979b2d4
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-block-in-each-block-bidi/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	export let threshold;
+
+	function foo(node) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#each [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as number}
+	{#if threshold >= number}
+		<div transition:foo>{number}</div>
+	{/if}
+{/each}
diff --git a/test/runtime/samples/transition-js-if-block-intro-outro/_config.js b/test/runtime/samples/transition-js-if-block-intro-outro/_config.js
new file mode 100644
index 0000000000..89fbaac1e6
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-block-intro-outro/_config.js
@@ -0,0 +1,44 @@
+export default {
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+		let div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(200);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(400);
+		assert.equal(div.foo, 1);
+
+		raf.tick(500);
+		assert.equal(div.foo, 1);
+
+		component.visible = false;
+		raf.tick(600);
+		assert.equal(div.foo, 1);
+		assert.equal(div.bar, 0.75);
+
+		raf.tick(900);
+		assert.equal(div.foo, 1);
+		assert.equal(div.bar, 0);
+
+		// test outro before intro complete
+		raf.tick(1000);
+		component.visible = true;
+		div = target.querySelector('div');
+
+		raf.tick(1200);
+		assert.equal(div.foo, 0.5);
+
+		component.visible = false;
+		raf.tick(1300);
+		assert.equal(div.foo, 0.75);
+		assert.equal(div.bar, 0.75);
+
+		raf.tick(1400);
+		assert.equal(div.foo, 1);
+		assert.equal(div.bar, 0.5);
+
+		raf.tick(2000);
+	}
+};
diff --git a/test/runtime/samples/transition-js-if-block-intro-outro/main.svelte b/test/runtime/samples/transition-js-if-block-intro-outro/main.svelte
new file mode 100644
index 0000000000..812356106a
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-block-intro-outro/main.svelte
@@ -0,0 +1,25 @@
+<script>
+	export let visible;
+
+	function foo(node, params) {
+		return {
+			duration: 400,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+
+	function bar(node, params) {
+		return {
+			duration: 400,
+			tick: t => {
+				node.bar = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div in:foo out:bar>foo then bar</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-if-block-intro/_config.js b/test/runtime/samples/transition-js-if-block-intro/_config.js
new file mode 100644
index 0000000000..8be3b718f8
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-block-intro/_config.js
@@ -0,0 +1,15 @@
+export default {
+	test({ assert, component, target, window, raf }) {
+		component.visible = true;
+		const div = target.querySelector('div');
+		assert.equal(window.getComputedStyle(div).opacity, 0);
+
+		raf.tick(200);
+		assert.equal(window.getComputedStyle(div).opacity, 0.5);
+
+		raf.tick(400);
+		assert.equal(window.getComputedStyle(div).opacity, 1);
+
+		raf.tick(500);
+	}
+};
diff --git a/test/runtime/samples/transition-js-if-block-intro/main.svelte b/test/runtime/samples/transition-js-if-block-intro/main.svelte
new file mode 100644
index 0000000000..3be2daa56e
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-block-intro/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let visible;
+
+	function fade(node, params) {
+		return {
+			duration: 400,
+			tick: t => {
+				node.style.opacity = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div in:fade>fades in</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-if-block-outro-timeout/_config.js b/test/runtime/samples/transition-js-if-block-outro-timeout/_config.js
new file mode 100644
index 0000000000..3ead1ad6b4
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-block-outro-timeout/_config.js
@@ -0,0 +1,19 @@
+export default {
+	test({ assert, component, target, window, raf }) {
+		component.visible = true;
+		const div = target.querySelector('div');
+
+		component.visible = false;
+		assert.equal(window.getComputedStyle(div).opacity, 1);
+
+		raf.tick(200);
+		assert.equal(window.getComputedStyle(div).opacity, 0.5);
+
+		raf.tick(400);
+		assert.equal(window.getComputedStyle(div).opacity, 0);
+
+		raf.tick(600);
+		assert.equal(component.div, undefined);
+		assert.equal(target.querySelector('div'), undefined);
+	}
+};
diff --git a/test/runtime/samples/transition-js-if-block-outro-timeout/main.svelte b/test/runtime/samples/transition-js-if-block-outro-timeout/main.svelte
new file mode 100644
index 0000000000..8b77998a94
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-block-outro-timeout/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	export let div;
+	export let visible;
+
+	function fade(node, params) {
+		return {
+			duration: 400,
+			tick: t => {
+				node.style.opacity = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div out:fade style="opacity: 1;" bind:this={div}>yes</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-if-else-block-dynamic-outro/_config.js b/test/runtime/samples/transition-js-if-else-block-dynamic-outro/_config.js
new file mode 100644
index 0000000000..c3f6334576
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-else-block-dynamic-outro/_config.js
@@ -0,0 +1,21 @@
+export default {
+	props: {
+		z: 'z'
+	},
+
+	test({ assert, component, target, raf }) {
+		assert.equal(target.querySelector('div'), component.no);
+
+		component.x = true;
+
+		raf.tick(25);
+		assert.equal(component.yes.foo, undefined);
+		assert.equal(component.no.foo, 0.75);
+
+		raf.tick(75);
+		assert.equal(component.yes.foo, undefined);
+		assert.equal(component.no.foo, 0.25);
+
+		raf.tick(100);
+	}
+};
diff --git a/test/runtime/samples/transition-js-if-else-block-dynamic-outro/main.svelte b/test/runtime/samples/transition-js-if-else-block-dynamic-outro/main.svelte
new file mode 100644
index 0000000000..3fba1c9830
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-else-block-dynamic-outro/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	export let yes;
+	export let no;
+
+	export let x;
+	export let z;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if x}
+	<div bind:this={yes} out:foo>{z}</div>
+{:else}
+	<div bind:this={no} out:foo>{z}</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-if-else-block-intro/_config.js b/test/runtime/samples/transition-js-if-else-block-intro/_config.js
new file mode 100644
index 0000000000..1f3b6fd118
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-else-block-intro/_config.js
@@ -0,0 +1,21 @@
+export default {
+	intro: true,
+
+	test({ assert, component, target, raf }) {
+		assert.equal(target.querySelector('div'), component.no);
+		assert.equal(component.no.foo, 0);
+
+		raf.tick(200);
+		assert.equal(component.no.foo, 0.5);
+
+		raf.tick(500);
+		component.x = true;
+		assert.equal(component.no, undefined);
+		assert.equal(component.yes.foo, 0);
+
+		raf.tick(700);
+		assert.equal(component.yes.foo, 0.5);
+
+		raf.tick(1000);
+	}
+};
diff --git a/test/runtime/samples/transition-js-if-else-block-intro/main.svelte b/test/runtime/samples/transition-js-if-else-block-intro/main.svelte
new file mode 100644
index 0000000000..d25cbb0412
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-else-block-intro/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	export let yes;
+	export let no;
+
+	export let x;
+
+	function foo(node, params) {
+		return {
+			duration: 400,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if x}
+	<div bind:this={yes} in:foo>yes</div>
+{:else}
+	<div bind:this={no} in:foo>no</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-if-else-block-not-dynamic-outro/_config.js b/test/runtime/samples/transition-js-if-else-block-not-dynamic-outro/_config.js
new file mode 100644
index 0000000000..9bd793c3ad
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-else-block-not-dynamic-outro/_config.js
@@ -0,0 +1,38 @@
+export default {
+	async test({ assert, component, target, raf }) {
+		const t = target.querySelector('#t');
+
+		await (component.condition = false);
+
+		let time = 0;
+		raf.tick(time += 25);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div id="t" foo="0.75">TRUE</div>
+			<div id="f">FALSE</div>
+		`);
+
+		// toggling back in the middle of the out transition
+		// will reuse the previous element
+		await (component.condition = true);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div id="f">FALSE</div>
+			<div id="t" foo="1">TRUE</div>
+		`);
+		assert.equal(target.querySelector('#t'), t);
+
+		raf.tick(time += 25);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div id="f" foo="0.75">FALSE</div>
+			<div id="t" foo="1">TRUE</div>
+		`);
+
+		raf.tick(time += 75);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div id="t" foo="1">TRUE</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/transition-js-if-else-block-not-dynamic-outro/main.svelte b/test/runtime/samples/transition-js-if-else-block-not-dynamic-outro/main.svelte
new file mode 100644
index 0000000000..93205aeaac
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-else-block-not-dynamic-outro/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	export let condition = true;
+
+	function foo(node) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.setAttribute('foo', t);
+			}
+		};
+	}
+</script>
+
+{#if condition}
+	<div id="t" out:foo>TRUE</div>
+{:else}
+	<div id="f" out:foo>FALSE</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-if-else-block-outro/_config.js b/test/runtime/samples/transition-js-if-else-block-outro/_config.js
new file mode 100644
index 0000000000..0d56cba09b
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-else-block-outro/_config.js
@@ -0,0 +1,17 @@
+export default {
+	test({ assert, component, target, raf }) {
+		assert.equal(target.querySelector('div'), component.no);
+
+		component.x = true;
+
+		raf.tick(25);
+		assert.equal(component.yes.foo, undefined);
+		assert.equal(component.no.foo, 0.75);
+
+		raf.tick(75);
+		assert.equal(component.yes.foo, undefined);
+		assert.equal(component.no.foo, 0.25);
+
+		raf.tick(100);
+	}
+};
diff --git a/test/runtime/samples/transition-js-if-else-block-outro/main.svelte b/test/runtime/samples/transition-js-if-else-block-outro/main.svelte
new file mode 100644
index 0000000000..c0c20e3c87
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-else-block-outro/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	export let yes;
+	export let no;
+
+	export let x;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if x}
+	<div bind:this={yes} out:foo>yes</div>
+{:else}
+	<div bind:this={no} out:foo>no</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-if-elseif-block-outro/_config.js b/test/runtime/samples/transition-js-if-elseif-block-outro/_config.js
new file mode 100644
index 0000000000..9a61c2e45b
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-elseif-block-outro/_config.js
@@ -0,0 +1,23 @@
+export default {
+	props: {
+		x: false,
+		y: true
+	},
+
+	test({ assert, component, target, raf }) {
+		assert.equal(target.querySelector('div'), component.no);
+
+		component.x = true;
+		component.y = false;
+
+		raf.tick(25);
+		assert.equal(component.yes.foo, undefined);
+		assert.equal(component.no.foo, 0.75);
+
+		raf.tick(75);
+		assert.equal(component.yes.foo, undefined);
+		assert.equal(component.no.foo, 0.25);
+
+		raf.tick(100);
+	}
+};
diff --git a/test/runtime/samples/transition-js-if-elseif-block-outro/main.svelte b/test/runtime/samples/transition-js-if-elseif-block-outro/main.svelte
new file mode 100644
index 0000000000..99c535dca2
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-elseif-block-outro/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	export let yes;
+	export let no;
+
+	export let x;
+	export let y;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if x}
+	<div bind:this={yes} out:foo>yes</div>
+{:else if y}
+	<div bind:this={no} out:foo>no</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-if-outro-unrelated-component-binding-update/Component.svelte b/test/runtime/samples/transition-js-if-outro-unrelated-component-binding-update/Component.svelte
new file mode 100644
index 0000000000..adb9aaea0e
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-outro-unrelated-component-binding-update/Component.svelte
@@ -0,0 +1,18 @@
+<script>
+	export let condition;
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+	let bool = true;
+</script>
+
+<button on:click={() => (condition = false)} />
+<button on:click={() => (bool = !bool)} />
+{#if bool}
+	<div out:foo />
+{/if}
diff --git a/test/runtime/samples/transition-js-if-outro-unrelated-component-binding-update/_config.js b/test/runtime/samples/transition-js-if-outro-unrelated-component-binding-update/_config.js
new file mode 100644
index 0000000000..3f1b714a7c
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-outro-unrelated-component-binding-update/_config.js
@@ -0,0 +1,9 @@
+export default {
+	async test({ assert, target, window, raf }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+		await button.dispatchEvent(event);
+		raf.tick(500);
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/transition-js-if-outro-unrelated-component-binding-update/main.svelte b/test/runtime/samples/transition-js-if-outro-unrelated-component-binding-update/main.svelte
new file mode 100644
index 0000000000..bb781ad73c
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-outro-unrelated-component-binding-update/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Component from "./Component.svelte";
+	let condition = true;
+</script>
+
+{#if condition}
+	<Component bind:condition />
+{/if}
diff --git a/test/runtime/samples/transition-js-if-outro-unrelated-component-store-update/Component.svelte b/test/runtime/samples/transition-js-if-outro-unrelated-component-store-update/Component.svelte
new file mode 100644
index 0000000000..1096c92468
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-outro-unrelated-component-store-update/Component.svelte
@@ -0,0 +1,18 @@
+<script>
+	export let condition;
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+	$condition;
+	let bool = true;
+</script>
+
+<button on:click={() => (bool = !bool)} />
+{#if bool}
+	<div out:foo />
+{/if}
diff --git a/test/runtime/samples/transition-js-if-outro-unrelated-component-store-update/_config.js b/test/runtime/samples/transition-js-if-outro-unrelated-component-store-update/_config.js
new file mode 100644
index 0000000000..beea5d4a77
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-outro-unrelated-component-store-update/_config.js
@@ -0,0 +1,7 @@
+export default {
+	async test({ assert, target, component, raf }) {
+		await component.condition.set(false);
+		raf.tick(500);
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/transition-js-if-outro-unrelated-component-store-update/main.svelte b/test/runtime/samples/transition-js-if-outro-unrelated-component-store-update/main.svelte
new file mode 100644
index 0000000000..b5193f6dd4
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-outro-unrelated-component-store-update/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { writable } from "svelte/store";
+	import Component from "./Component.svelte";
+	export let condition = writable(true);
+</script>
+
+{#if $condition}
+	<button on:click={() => ($condition = false)} id="1" />
+	<Component {condition} />
+{/if}
diff --git a/test/runtime/samples/transition-js-initial/_config.js b/test/runtime/samples/transition-js-initial/_config.js
new file mode 100644
index 0000000000..770b2a8cc9
--- /dev/null
+++ b/test/runtime/samples/transition-js-initial/_config.js
@@ -0,0 +1,11 @@
+export default {
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(50);
+		assert.equal(div.foo, 0.5);
+	}
+};
diff --git a/test/runtime/samples/transition-js-initial/main.svelte b/test/runtime/samples/transition-js-initial/main.svelte
new file mode 100644
index 0000000000..848055f663
--- /dev/null
+++ b/test/runtime/samples/transition-js-initial/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let visible = false;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo></div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-intro-enabled-by-option/_config.js b/test/runtime/samples/transition-js-intro-enabled-by-option/_config.js
new file mode 100644
index 0000000000..b4d4dd2053
--- /dev/null
+++ b/test/runtime/samples/transition-js-intro-enabled-by-option/_config.js
@@ -0,0 +1,13 @@
+export default {
+	intro: true,
+
+	skip_if_hydrate: true,
+
+	test({ assert, target, raf }) {
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(50);
+		assert.equal(div.foo, 0.5);
+	}
+};
diff --git a/test/runtime/samples/transition-js-intro-enabled-by-option/main.svelte b/test/runtime/samples/transition-js-intro-enabled-by-option/main.svelte
new file mode 100644
index 0000000000..64d17e0db3
--- /dev/null
+++ b/test/runtime/samples/transition-js-intro-enabled-by-option/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+<div transition:foo></div>
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-intro-skipped-by-default-nested/Widget.svelte b/test/runtime/samples/transition-js-intro-skipped-by-default-nested/Widget.svelte
new file mode 100644
index 0000000000..64d17e0db3
--- /dev/null
+++ b/test/runtime/samples/transition-js-intro-skipped-by-default-nested/Widget.svelte
@@ -0,0 +1,12 @@
+<script>
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+<div transition:foo></div>
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-intro-skipped-by-default-nested/_config.js b/test/runtime/samples/transition-js-intro-skipped-by-default-nested/_config.js
new file mode 100644
index 0000000000..cada0124c6
--- /dev/null
+++ b/test/runtime/samples/transition-js-intro-skipped-by-default-nested/_config.js
@@ -0,0 +1,9 @@
+export default {
+	test({ assert, target, raf }) {
+		const div = target.querySelector('div');
+		assert.equal(div.foo, undefined);
+
+		raf.tick(50);
+		assert.equal(div.foo, undefined);
+	}
+};
diff --git a/test/runtime/samples/transition-js-intro-skipped-by-default-nested/main.svelte b/test/runtime/samples/transition-js-intro-skipped-by-default-nested/main.svelte
new file mode 100644
index 0000000000..0a9d5bba87
--- /dev/null
+++ b/test/runtime/samples/transition-js-intro-skipped-by-default-nested/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<Widget/>
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-intro-skipped-by-default/_config.js b/test/runtime/samples/transition-js-intro-skipped-by-default/_config.js
new file mode 100644
index 0000000000..cada0124c6
--- /dev/null
+++ b/test/runtime/samples/transition-js-intro-skipped-by-default/_config.js
@@ -0,0 +1,9 @@
+export default {
+	test({ assert, target, raf }) {
+		const div = target.querySelector('div');
+		assert.equal(div.foo, undefined);
+
+		raf.tick(50);
+		assert.equal(div.foo, undefined);
+	}
+};
diff --git a/test/runtime/samples/transition-js-intro-skipped-by-default/main.svelte b/test/runtime/samples/transition-js-intro-skipped-by-default/main.svelte
new file mode 100644
index 0000000000..64d17e0db3
--- /dev/null
+++ b/test/runtime/samples/transition-js-intro-skipped-by-default/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+<div transition:foo></div>
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-local-and-global/_config.js b/test/runtime/samples/transition-js-local-and-global/_config.js
new file mode 100644
index 0000000000..09aefb6913
--- /dev/null
+++ b/test/runtime/samples/transition-js-local-and-global/_config.js
@@ -0,0 +1,67 @@
+export default {
+	props: {
+		x: false,
+		y: true
+	},
+
+	test({ assert, component, target, raf }) {
+		// first, toggle x — first element should snap in
+		// and out while second one transitions
+		component.x = true;
+
+		let divs = target.querySelectorAll('div');
+		assert.equal(divs[0].foo, undefined);
+		assert.equal(divs[1].foo, 0);
+
+		raf.tick(50);
+		assert.equal(divs[0].foo, undefined);
+		assert.equal(divs[1].foo, 0.5);
+
+		raf.tick(100);
+
+		component.x = false;
+		assert.htmlEqual(target.innerHTML, `
+			<div>snaps if x changes</div>
+			<div>transitions if x changes</div>
+		`);
+
+		raf.tick(150);
+		assert.equal(divs[0].foo, undefined);
+		assert.equal(divs[1].foo, 0.5);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+
+		// then toggle y
+		component.y = false;
+		component.x = true;
+		component.y = true;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>snaps if x changes</div>
+			<div>transitions if x changes</div>
+		`);
+		divs = target.querySelectorAll('div');
+
+		raf.tick(250);
+		assert.equal(divs[0].foo, 0.5);
+		assert.equal(divs[1].foo, 0.5);
+
+		raf.tick(300);
+		assert.equal(divs[0].foo, 1);
+		assert.equal(divs[1].foo, 1);
+
+		component.y = false;
+		assert.htmlEqual(target.innerHTML, `
+			<div>snaps if x changes</div>
+			<div>transitions if x changes</div>
+		`);
+
+		raf.tick(320);
+		assert.equal(divs[0].foo, 0.8);
+		assert.equal(divs[1].foo, 0.8);
+
+		raf.tick(400);
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/transition-js-local-and-global/main.svelte b/test/runtime/samples/transition-js-local-and-global/main.svelte
new file mode 100644
index 0000000000..18fbaa1b78
--- /dev/null
+++ b/test/runtime/samples/transition-js-local-and-global/main.svelte
@@ -0,0 +1,20 @@
+<script>
+	export let x;
+	export let y;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if x}
+	{#if y}
+		<div transition:foo|local>snaps if x changes</div>
+		<div transition:foo>transitions if x changes</div>
+	{/if}
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-local-nested-await/_config.js b/test/runtime/samples/transition-js-local-nested-await/_config.js
new file mode 100644
index 0000000000..b07d88741f
--- /dev/null
+++ b/test/runtime/samples/transition-js-local-nested-await/_config.js
@@ -0,0 +1,31 @@
+let fulfil;
+
+const promise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		x: false,
+		promise
+	},
+
+	test({ assert, component, target, raf }) {
+		component.x = true;
+		fulfil();
+
+		return promise.then(() => {
+			const div = target.querySelector('div');
+			assert.equal(div.foo, 0);
+
+			raf.tick(100);
+			assert.equal(div.foo, 1);
+
+			component.x = false;
+			assert.htmlEqual(target.innerHTML, '');
+
+			raf.tick(150);
+			assert.equal(div.foo, 1);
+		});
+	}
+};
diff --git a/test/runtime/samples/transition-js-local-nested-await/main.svelte b/test/runtime/samples/transition-js-local-nested-await/main.svelte
new file mode 100644
index 0000000000..618dd3088d
--- /dev/null
+++ b/test/runtime/samples/transition-js-local-nested-await/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let x;
+	export let promise;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if x}
+	{#await promise then value}
+		<div transition:foo|local></div>
+	{/await}
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-local-nested-component/Widget.svelte b/test/runtime/samples/transition-js-local-nested-component/Widget.svelte
new file mode 100644
index 0000000000..f3baa4b004
--- /dev/null
+++ b/test/runtime/samples/transition-js-local-nested-component/Widget.svelte
@@ -0,0 +1,12 @@
+<script>
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+<div transition:foo|local></div>
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-local-nested-component/_config.js b/test/runtime/samples/transition-js-local-nested-component/_config.js
new file mode 100644
index 0000000000..87d7aaa233
--- /dev/null
+++ b/test/runtime/samples/transition-js-local-nested-component/_config.js
@@ -0,0 +1,24 @@
+export default {
+	props: {
+		x: false
+	},
+
+	test({ assert, component, target, raf }) {
+		component.x = true;
+
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(100);
+		assert.equal(div.foo, 1);
+
+		component.x = false;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+
+		raf.tick(150);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/transition-js-local-nested-component/main.svelte b/test/runtime/samples/transition-js-local-nested-component/main.svelte
new file mode 100644
index 0000000000..761ef9d860
--- /dev/null
+++ b/test/runtime/samples/transition-js-local-nested-component/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let x;
+
+	import Widget from './Widget.svelte';
+</script>
+
+{#if x}
+	<Widget/>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-local-nested-each-keyed/_config.js b/test/runtime/samples/transition-js-local-nested-each-keyed/_config.js
new file mode 100644
index 0000000000..14ad247187
--- /dev/null
+++ b/test/runtime/samples/transition-js-local-nested-each-keyed/_config.js
@@ -0,0 +1,30 @@
+export default {
+	props: {
+		x: false,
+		things: ['a']
+	},
+
+	test({ assert, component, target, raf }) {
+		component.x = true;
+
+		const div1 = target.querySelector('div');
+		assert.equal(div1.foo, undefined);
+
+		raf.tick(100);
+		assert.equal(div1.foo, undefined);
+
+		component.things = ['a', 'b'];
+		assert.htmlEqual(target.innerHTML, '<div></div><div></div>');
+
+		const div2 = target.querySelector('div:last-child');
+		assert.equal(div1.foo, undefined);
+		assert.equal(div2.foo, 0);
+
+		raf.tick(200);
+		assert.equal(div1.foo, undefined);
+		assert.equal(div2.foo, 1);
+
+		component.x = false;
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/transition-js-local-nested-each-keyed/main.svelte b/test/runtime/samples/transition-js-local-nested-each-keyed/main.svelte
new file mode 100644
index 0000000000..90b6d110a7
--- /dev/null
+++ b/test/runtime/samples/transition-js-local-nested-each-keyed/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let x;
+	export let things;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if x}
+	{#each things as thing (thing)}
+		<div transition:foo|local></div>
+	{/each}
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-local-nested-each/_config.js b/test/runtime/samples/transition-js-local-nested-each/_config.js
new file mode 100644
index 0000000000..14ad247187
--- /dev/null
+++ b/test/runtime/samples/transition-js-local-nested-each/_config.js
@@ -0,0 +1,30 @@
+export default {
+	props: {
+		x: false,
+		things: ['a']
+	},
+
+	test({ assert, component, target, raf }) {
+		component.x = true;
+
+		const div1 = target.querySelector('div');
+		assert.equal(div1.foo, undefined);
+
+		raf.tick(100);
+		assert.equal(div1.foo, undefined);
+
+		component.things = ['a', 'b'];
+		assert.htmlEqual(target.innerHTML, '<div></div><div></div>');
+
+		const div2 = target.querySelector('div:last-child');
+		assert.equal(div1.foo, undefined);
+		assert.equal(div2.foo, 0);
+
+		raf.tick(200);
+		assert.equal(div1.foo, undefined);
+		assert.equal(div2.foo, 1);
+
+		component.x = false;
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/transition-js-local-nested-each/main.svelte b/test/runtime/samples/transition-js-local-nested-each/main.svelte
new file mode 100644
index 0000000000..feaadd9283
--- /dev/null
+++ b/test/runtime/samples/transition-js-local-nested-each/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let x;
+	export let things;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if x}
+	{#each things as thing}
+		<div transition:foo|local></div>
+	{/each}
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-local-nested-if/_config.js b/test/runtime/samples/transition-js-local-nested-if/_config.js
new file mode 100644
index 0000000000..9f4e5a0bb0
--- /dev/null
+++ b/test/runtime/samples/transition-js-local-nested-if/_config.js
@@ -0,0 +1,40 @@
+export default {
+	props: {
+		x: false,
+		y: true
+	},
+
+	test({ assert, component, target, raf }) {
+		component.x = true;
+
+		let div = target.querySelector('div');
+		assert.equal(div.foo, undefined);
+
+		component.y = false;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		div = target.querySelector('div');
+
+		raf.tick(50);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(100);
+		assert.htmlEqual(target.innerHTML, '');
+
+		component.x = false;
+		component.y = true;
+		assert.htmlEqual(target.innerHTML, '');
+
+		component.x = true;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		div = target.querySelector('div');
+
+		component.y = false;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+
+		raf.tick(150);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/transition-js-local-nested-if/main.svelte b/test/runtime/samples/transition-js-local-nested-if/main.svelte
new file mode 100644
index 0000000000..cbdfbd8c25
--- /dev/null
+++ b/test/runtime/samples/transition-js-local-nested-if/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let x;
+	export let y;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if x}
+	{#if y}
+		<div transition:foo|local></div>
+	{/if}
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-local/_config.js b/test/runtime/samples/transition-js-local/_config.js
new file mode 100644
index 0000000000..f2d2c0384d
--- /dev/null
+++ b/test/runtime/samples/transition-js-local/_config.js
@@ -0,0 +1,40 @@
+export default {
+	props: {
+		x: false,
+		y: true
+	},
+
+	test({ assert, component, target, raf }) {
+		component.x = true;
+
+		let div = target.querySelector('div');
+		assert.equal(div.foo, undefined);
+
+		component.y = false;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		div = target.querySelector('div');
+
+		raf.tick(50);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(100);
+		assert.htmlEqual(target.innerHTML, '');
+
+		component.x = false;
+		component.y = true;
+		assert.htmlEqual(target.innerHTML, '');
+
+		component.x = true;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		div = target.querySelector('div');
+
+		component.y = false;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+
+		raf.tick(120);
+		assert.equal(div.foo, 0.8);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/transition-js-local/main.svelte b/test/runtime/samples/transition-js-local/main.svelte
new file mode 100644
index 0000000000..cbdfbd8c25
--- /dev/null
+++ b/test/runtime/samples/transition-js-local/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let x;
+	export let y;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if x}
+	{#if y}
+		<div transition:foo|local></div>
+	{/if}
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-nested-await/_config.js b/test/runtime/samples/transition-js-nested-await/_config.js
new file mode 100644
index 0000000000..e0f26580cc
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-await/_config.js
@@ -0,0 +1,34 @@
+let fulfil;
+
+const promise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		x: false,
+		promise
+	},
+
+	test({ assert, component, target, raf }) {
+		component.x = true;
+		fulfil();
+
+		return promise.then(() => {
+			const div = target.querySelector('div');
+			assert.equal(div.foo, 0);
+
+			raf.tick(100);
+			assert.equal(div.foo, 1);
+
+			component.x = false;
+			assert.htmlEqual(target.innerHTML, '<div></div>');
+
+			raf.tick(150);
+			assert.equal(div.foo, 0.5);
+
+			raf.tick(200);
+			assert.htmlEqual(target.innerHTML, '');
+		});
+	}
+};
diff --git a/test/runtime/samples/transition-js-nested-await/main.svelte b/test/runtime/samples/transition-js-nested-await/main.svelte
new file mode 100644
index 0000000000..bcd531c44c
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-await/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let x;
+	export let promise;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if x}
+	{#await promise then value}
+		<div transition:foo></div>
+	{/await}
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-nested-component/Widget.svelte b/test/runtime/samples/transition-js-nested-component/Widget.svelte
new file mode 100644
index 0000000000..64d17e0db3
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-component/Widget.svelte
@@ -0,0 +1,12 @@
+<script>
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+<div transition:foo></div>
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-nested-component/_config.js b/test/runtime/samples/transition-js-nested-component/_config.js
new file mode 100644
index 0000000000..87d7aaa233
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-component/_config.js
@@ -0,0 +1,24 @@
+export default {
+	props: {
+		x: false
+	},
+
+	test({ assert, component, target, raf }) {
+		component.x = true;
+
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(100);
+		assert.equal(div.foo, 1);
+
+		component.x = false;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+
+		raf.tick(150);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/transition-js-nested-component/main.svelte b/test/runtime/samples/transition-js-nested-component/main.svelte
new file mode 100644
index 0000000000..8cfaa3bf02
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-component/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let x;
+</script>
+
+{#if x}
+	<Widget/>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-nested-each-delete/_config.js b/test/runtime/samples/transition-js-nested-each-delete/_config.js
new file mode 100644
index 0000000000..041cbebc66
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-each-delete/_config.js
@@ -0,0 +1,26 @@
+export default {
+	props: {
+		visible: true,
+		things: ['a', 'b', 'c']
+	},
+
+	test({ assert, component, target, raf }) {
+		assert.htmlEqual(target.innerHTML, `
+			<div>a</div>
+			<div>b</div>
+			<div>c</div>
+		`);
+
+		component.things = ['a'];
+
+		raf.tick(100);
+		assert.htmlEqual(target.innerHTML, `
+			<div>a</div>
+		`);
+
+		component.visible = false;
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/transition-js-nested-each-delete/main.svelte b/test/runtime/samples/transition-js-nested-each-delete/main.svelte
new file mode 100644
index 0000000000..e2cf13add3
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-each-delete/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let visible;
+	export let things;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	{#each things as thing}
+		<div transition:foo>{thing}</div>
+	{/each}
+{/if}
diff --git a/test/runtime/samples/transition-js-nested-each-keyed-2/Widget.svelte b/test/runtime/samples/transition-js-nested-each-keyed-2/Widget.svelte
new file mode 100644
index 0000000000..d24d136080
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-each-keyed-2/Widget.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let things;
+</script>
+
+{#each things as thing (thing)}
+  <div></div>
+{/each}
diff --git a/test/runtime/samples/transition-js-nested-each-keyed-2/_config.js b/test/runtime/samples/transition-js-nested-each-keyed-2/_config.js
new file mode 100644
index 0000000000..1040d1af53
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-each-keyed-2/_config.js
@@ -0,0 +1,11 @@
+export default {
+	props: {
+		x: true,
+		things: ['a', 'b']
+	},
+
+	test({ assert, component, target }) {
+		component.x = false;
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/transition-js-nested-each-keyed-2/main.svelte b/test/runtime/samples/transition-js-nested-each-keyed-2/main.svelte
new file mode 100644
index 0000000000..8a8ef57576
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-each-keyed-2/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let x;
+	export let things;
+
+	import Widget from './Widget.svelte';
+</script>
+
+{#if x}
+	<Widget {things}/>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-nested-each-keyed/_config.js b/test/runtime/samples/transition-js-nested-each-keyed/_config.js
new file mode 100644
index 0000000000..a74aba5610
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-each-keyed/_config.js
@@ -0,0 +1,25 @@
+export default {
+	props: {
+		x: false,
+		things: ['a']
+	},
+
+	test({ assert, component, target, raf }) {
+		component.x = true;
+
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(100);
+		assert.equal(div.foo, 1);
+
+		component.x = false;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+
+		raf.tick(150);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/transition-js-nested-each-keyed/main.svelte b/test/runtime/samples/transition-js-nested-each-keyed/main.svelte
new file mode 100644
index 0000000000..5f86eebf70
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-each-keyed/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let x;
+	export let things;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if x}
+	{#each things as thing (thing)}
+		<div transition:foo></div>
+	{/each}
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-nested-each/_config.js b/test/runtime/samples/transition-js-nested-each/_config.js
new file mode 100644
index 0000000000..a74aba5610
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-each/_config.js
@@ -0,0 +1,25 @@
+export default {
+	props: {
+		x: false,
+		things: ['a']
+	},
+
+	test({ assert, component, target, raf }) {
+		component.x = true;
+
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(100);
+		assert.equal(div.foo, 1);
+
+		component.x = false;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+
+		raf.tick(150);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/transition-js-nested-each/main.svelte b/test/runtime/samples/transition-js-nested-each/main.svelte
new file mode 100644
index 0000000000..f9be834a01
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-each/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let x;
+	export let things;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if x}
+	{#each things as thing}
+		<div transition:foo></div>
+	{/each}
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-nested-if/_config.js b/test/runtime/samples/transition-js-nested-if/_config.js
new file mode 100644
index 0000000000..9e4c634967
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-if/_config.js
@@ -0,0 +1,25 @@
+export default {
+	props: {
+		x: false,
+		y: true
+	},
+
+	test({ assert, component, target, raf }) {
+		component.x = true;
+
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(100);
+		assert.equal(div.foo, 1);
+
+		component.x = false;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+
+		raf.tick(150);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};
diff --git a/test/runtime/samples/transition-js-nested-if/main.svelte b/test/runtime/samples/transition-js-nested-if/main.svelte
new file mode 100644
index 0000000000..fac9e062ff
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-if/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let x;
+	export let y;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if x}
+	{#if y}
+		<div transition:foo></div>
+	{/if}
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-nested-intro/Child.svelte b/test/runtime/samples/transition-js-nested-intro/Child.svelte
new file mode 100644
index 0000000000..341a0822e1
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-intro/Child.svelte
@@ -0,0 +1,13 @@
+<script>
+	function foo(node, params) {
+		return {
+			delay: 50,
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+<div transition:foo><slot></slot></div>
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-nested-intro/_config.js b/test/runtime/samples/transition-js-nested-intro/_config.js
new file mode 100644
index 0000000000..5d27f84839
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-intro/_config.js
@@ -0,0 +1,19 @@
+export default {
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(50);
+		assert.equal(div.foo, 0);
+
+		raf.tick(100);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(125);
+		assert.equal(div.foo, 0.75);
+
+		raf.tick(150);
+		assert.equal(div.foo, 1);
+	}
+};
diff --git a/test/runtime/samples/transition-js-nested-intro/main.svelte b/test/runtime/samples/transition-js-nested-intro/main.svelte
new file mode 100644
index 0000000000..5ae29bee7b
--- /dev/null
+++ b/test/runtime/samples/transition-js-nested-intro/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Child from './Child.svelte';
+	export let visible;
+</script>
+
+{#if visible}
+	<Child>delayed</Child>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-parameterised-with-state/_config.js b/test/runtime/samples/transition-js-parameterised-with-state/_config.js
new file mode 100644
index 0000000000..07dd1ad906
--- /dev/null
+++ b/test/runtime/samples/transition-js-parameterised-with-state/_config.js
@@ -0,0 +1,19 @@
+export default {
+	props: {
+		duration: 200
+	},
+
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(50);
+		assert.equal(div.foo, 100);
+
+		raf.tick(100);
+		assert.equal(div.foo, 200);
+
+		raf.tick(101);
+	}
+};
diff --git a/test/runtime/samples/transition-js-parameterised-with-state/main.svelte b/test/runtime/samples/transition-js-parameterised-with-state/main.svelte
new file mode 100644
index 0000000000..d5512f0075
--- /dev/null
+++ b/test/runtime/samples/transition-js-parameterised-with-state/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	export let visible;
+	export let duration;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t * params.k;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:foo='{{k: duration}}'>fades in</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-parameterised/_config.js b/test/runtime/samples/transition-js-parameterised/_config.js
new file mode 100644
index 0000000000..222e9e713e
--- /dev/null
+++ b/test/runtime/samples/transition-js-parameterised/_config.js
@@ -0,0 +1,15 @@
+export default {
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(50);
+		assert.equal(div.foo, 100);
+
+		raf.tick(100);
+		assert.equal(div.foo, 200);
+
+		raf.tick(101);
+	}
+};
diff --git a/test/runtime/samples/transition-js-parameterised/main.svelte b/test/runtime/samples/transition-js-parameterised/main.svelte
new file mode 100644
index 0000000000..7e022ae269
--- /dev/null
+++ b/test/runtime/samples/transition-js-parameterised/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	export let visible;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t * params.k;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div in:foo='{{k: 200}}'>fades in</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-slot-2/Nested.svelte b/test/runtime/samples/transition-js-slot-2/Nested.svelte
new file mode 100644
index 0000000000..4cd6a9b375
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-2/Nested.svelte
@@ -0,0 +1,18 @@
+<script>
+	export let visible;
+
+	function fade(node) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:fade>
+		<slot></slot>
+	</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-slot-2/_config.js b/test/runtime/samples/transition-js-slot-2/_config.js
new file mode 100644
index 0000000000..1785941252
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-2/_config.js
@@ -0,0 +1,24 @@
+// cancelled the transition halfway
+export default {
+	html: `
+		<div>Foo</div>
+	`,
+
+	async test({ assert, component, target, raf }) {
+		await component.hide();
+		const div = target.querySelector('div');
+
+		raf.tick(50);
+		assert.equal(div.foo, 0.5);
+
+		await component.show();
+
+		assert.htmlEqual(target.innerHTML, '<div>Bar</div>');
+
+		raf.tick(75);
+		assert.equal(div.foo, 0.75);
+
+		raf.tick(100);
+		assert.equal(div.foo, 1);
+	}
+};
diff --git a/test/runtime/samples/transition-js-slot-2/main.svelte b/test/runtime/samples/transition-js-slot-2/main.svelte
new file mode 100644
index 0000000000..2d45b5ca30
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-2/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	let name = 'Foo';
+	let visible = true;
+
+	export function show() {
+		visible = true;
+	}
+	export function hide() {
+		visible = false;
+		name = 'Bar';
+	}
+</script>
+
+<Nested {visible}>
+	{name}
+</Nested>
diff --git a/test/runtime/samples/transition-js-slot-3/Nested.svelte b/test/runtime/samples/transition-js-slot-3/Nested.svelte
new file mode 100644
index 0000000000..8a5b9ec2df
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-3/Nested.svelte
@@ -0,0 +1,27 @@
+<script>
+	let visible = true;
+	let data = 'Foo';
+
+	export function show() {
+		visible = true;
+	}
+	export function hide() {
+		visible = false;
+		data = 'Bar';
+	}
+
+	function fade(node) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:fade>
+		<slot {data}></slot>
+	</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-slot-3/_config.js b/test/runtime/samples/transition-js-slot-3/_config.js
new file mode 100644
index 0000000000..0dfe3281fc
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-3/_config.js
@@ -0,0 +1,23 @@
+export default {
+	html: `
+		<div>Foo</div>
+	`,
+
+	async test({ assert, component, target, raf }) {
+		await component.hide();
+		const div = target.querySelector('div');
+
+		raf.tick(50);
+		assert.equal(div.foo, 0.5);
+
+		await component.show();
+
+		assert.htmlEqual(target.innerHTML, '<div>Bar</div>');
+
+		raf.tick(75);
+		assert.equal(div.foo, 0.75);
+
+		raf.tick(100);
+		assert.equal(div.foo, 1);
+	}
+};
diff --git a/test/runtime/samples/transition-js-slot-3/main.svelte b/test/runtime/samples/transition-js-slot-3/main.svelte
new file mode 100644
index 0000000000..f10ad356e1
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-3/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	let nested;
+
+	export function show() {
+		nested.show();
+	}
+	export function hide() {
+		nested.hide();
+	}
+</script>
+
+<Nested bind:this={nested} let:data>
+	{data}
+</Nested>
diff --git a/test/runtime/samples/transition-js-slot-4-cancelled/Nested.svelte b/test/runtime/samples/transition-js-slot-4-cancelled/Nested.svelte
new file mode 100644
index 0000000000..04eea750fd
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-4-cancelled/Nested.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let visible;
+	export let slotProps;
+
+	function fade(node) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:fade>
+		<slot {slotProps}></slot>
+	</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-slot-4-cancelled/_config.js b/test/runtime/samples/transition-js-slot-4-cancelled/_config.js
new file mode 100644
index 0000000000..8be95f0150
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-4-cancelled/_config.js
@@ -0,0 +1,35 @@
+// updated props in the middle of transitions
+// and cancelled the transition halfway
+export default {
+	html: `
+		<div>outside Foo Foo Foo</div>
+		<div>inside Foo Foo Foo</div>
+	`,
+	props: {
+		props: 'Foo'
+	},
+
+	async test({ assert, component, target, raf }) {
+		await component.hide();
+		const [, div] = target.querySelectorAll('div');
+
+		raf.tick(50);
+		assert.equal(div.foo, 0.5);
+
+		component.props = 'Bar';
+		assert.htmlEqual(target.innerHTML, `
+			<div>outside Bar Bar Bar</div>
+			<div>inside Foo Foo Foo</div>
+		`);
+
+		await component.show();
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>outside Bar Bar Bar</div>
+			<div>inside Bar Bar Bar</div>
+		`);
+
+		raf.tick(100);
+		assert.equal(div.foo, 1);
+	}
+};
diff --git a/test/runtime/samples/transition-js-slot-4-cancelled/main.svelte b/test/runtime/samples/transition-js-slot-4-cancelled/main.svelte
new file mode 100644
index 0000000000..1003419244
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-4-cancelled/main.svelte
@@ -0,0 +1,22 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	let visible = true;
+	let state = 'Foo';
+	let slotProps = 'Foo';
+	export let props;
+
+	export function show() {
+		visible = true;
+	}
+	export function hide() {
+		visible = false;
+		state = 'Bar';
+		slotProps = 'Bar';
+	}
+</script>
+
+<div>outside {state} {props} {slotProps}</div>
+<Nested {visible} {slotProps} let:slotProps>
+	inside {state} {props} {slotProps}
+</Nested>
diff --git a/test/runtime/samples/transition-js-slot-5-cancelled-overflow/Nested.svelte b/test/runtime/samples/transition-js-slot-5-cancelled-overflow/Nested.svelte
new file mode 100644
index 0000000000..10050b6a10
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-5-cancelled-overflow/Nested.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let visible;
+	export let slotProps;
+
+	function fade(node) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:fade>
+		<slot {slotProps}></slot>
+	</div>
+{/if}
diff --git a/test/runtime/samples/transition-js-slot-5-cancelled-overflow/_config.js b/test/runtime/samples/transition-js-slot-5-cancelled-overflow/_config.js
new file mode 100644
index 0000000000..556f75eccd
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-5-cancelled-overflow/_config.js
@@ -0,0 +1,40 @@
+// updated props in the middle of transitions
+// and cancelled the transition halfway
+// + spreaded props + overflow context
+
+export default {
+	html: `
+		<div>outside Foo Foo Foo</div>
+		<div>inside Foo Foo Foo</div>
+		0
+	`,
+	props: {
+		props: 'Foo'
+	},
+
+	async test({ assert, component, target, raf }) {
+		await component.hide();
+		const [, div] = target.querySelectorAll('div');
+
+		raf.tick(50);
+		assert.equal(div.foo, 0.5);
+
+		component.props = 'Bar';
+		assert.htmlEqual(target.innerHTML, `
+			<div>outside Bar Bar Bar</div>
+			<div>inside Foo Foo Foo</div>
+			0
+		`);
+
+		await component.show();
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>outside Bar Bar Bar</div>
+			<div>inside Bar Bar Bar</div>
+			0
+		`);
+
+		raf.tick(100);
+		assert.equal(div.foo, 1);
+	}
+};
diff --git a/test/runtime/samples/transition-js-slot-5-cancelled-overflow/main.svelte b/test/runtime/samples/transition-js-slot-5-cancelled-overflow/main.svelte
new file mode 100644
index 0000000000..9c46fd0521
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-5-cancelled-overflow/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let a1=0,a2=0,a3=0,a4=0,a5=0,a6=0,a7=0,a8=0,a9=0,a10=0,a11=0, a12=0,a13=0,a14=0,a15=0,a16=0,a17=0,a18=0,a19=0,a20=0,a21=0, a22=0,a23=0,a24=0,a25=0,a26=0,a27=0,a28=0,a29=0,a30=0,a31=0,a32=0,a33=0;
+
+	let visible = true;
+	let state = 'Foo';
+	let slotProps = 'Foo';
+	export let props;
+
+	export function show() {
+		visible = true;
+	}
+	export function hide() {
+		visible = false;
+		state = 'Bar';
+		slotProps = 'Bar';
+	}
+</script>
+
+<div>outside {state} {props} {slotProps}</div>
+
+<Nested {visible} {slotProps} let:slotProps>
+	inside {state} {props} {slotProps}
+</Nested>
+
+{a1+a2+a3+a4+a5+a6+a7+a8+a9+a10+a11+a12+a13+a14+a15+a16+a17+a18+a19+a20+a21+a22+a23+a24+a25+a26+a27+a28+a29+a30+a31+a32+a33}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-slot-6-spread-cancelled/Nested.svelte b/test/runtime/samples/transition-js-slot-6-spread-cancelled/Nested.svelte
new file mode 100644
index 0000000000..b1853993d3
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-6-spread-cancelled/Nested.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let visible;
+	export let slotProps;
+
+	function fade(node) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:fade>
+		<slot {...slotProps}></slot>
+	</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-slot-6-spread-cancelled/Nested2.svelte b/test/runtime/samples/transition-js-slot-6-spread-cancelled/Nested2.svelte
new file mode 100644
index 0000000000..52f89858a0
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-6-spread-cancelled/Nested2.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let visible;
+	let slotProps = { slotProps: 'XXX' };
+
+	function fade(node) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:fade>
+		<slot {...slotProps}></slot>
+	</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-slot-6-spread-cancelled/_config.js b/test/runtime/samples/transition-js-slot-6-spread-cancelled/_config.js
new file mode 100644
index 0000000000..960e02a8f6
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-6-spread-cancelled/_config.js
@@ -0,0 +1,40 @@
+// updated props in the middle of transitions
+// and cancelled the transition halfway
+// with spreaded props
+
+export default {
+	html: `
+		<div>outside Foo Foo Foo</div>
+		<div>inside Foo Foo Foo</div>
+		<div>inside Foo Foo XXX</div>
+	`,
+	props: {
+		props: 'Foo'
+	},
+
+	async test({ assert, component, target, raf }) {
+		await component.hide();
+		const [, div] = target.querySelectorAll('div');
+
+		raf.tick(50);
+		assert.equal(div.foo, 0.5);
+
+		component.props = 'Bar';
+		assert.htmlEqual(target.innerHTML, `
+			<div>outside Bar Bar Bar</div>
+			<div>inside Foo Foo Foo</div>
+			<div>inside Foo Foo XXX</div>
+		`);
+
+		await component.show();
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>outside Bar Bar Bar</div>
+			<div>inside Bar Bar Bar</div>
+			<div>inside Bar Bar XXX</div>
+		`);
+
+		raf.tick(100);
+		assert.equal(div.foo, 1);
+	}
+};
diff --git a/test/runtime/samples/transition-js-slot-6-spread-cancelled/main.svelte b/test/runtime/samples/transition-js-slot-6-spread-cancelled/main.svelte
new file mode 100644
index 0000000000..5dd8ce348e
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-6-spread-cancelled/main.svelte
@@ -0,0 +1,26 @@
+<script>
+	import Nested from './Nested.svelte';
+	import Nested2 from './Nested2.svelte';
+
+	let visible = true;
+	let state = 'Foo';
+	let slotProps = { slotProps: 'Foo' };
+	export let props;
+
+	export function show() {
+		visible = true;
+	}
+	export function hide() {
+		visible = false;
+		state = 'Bar';
+		slotProps = { slotProps: 'Bar' };
+	}
+</script>
+
+<div>outside {state} {props} {slotProps.slotProps}</div>
+<Nested {visible} {slotProps} let:slotProps>
+	inside {state} {props} {slotProps}
+</Nested>
+<Nested2 {visible} let:slotProps>
+	inside {state} {props} {slotProps}
+</Nested2>
diff --git a/test/runtime/samples/transition-js-slot-7-spread-cancelled-overflow/Nested.svelte b/test/runtime/samples/transition-js-slot-7-spread-cancelled-overflow/Nested.svelte
new file mode 100644
index 0000000000..b01200fd9f
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-7-spread-cancelled-overflow/Nested.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let visible;
+	export let slotProps;
+
+	function fade(node) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:fade>
+		<slot {...slotProps}></slot>
+	</div>
+{/if}
diff --git a/test/runtime/samples/transition-js-slot-7-spread-cancelled-overflow/_config.js b/test/runtime/samples/transition-js-slot-7-spread-cancelled-overflow/_config.js
new file mode 100644
index 0000000000..556f75eccd
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-7-spread-cancelled-overflow/_config.js
@@ -0,0 +1,40 @@
+// updated props in the middle of transitions
+// and cancelled the transition halfway
+// + spreaded props + overflow context
+
+export default {
+	html: `
+		<div>outside Foo Foo Foo</div>
+		<div>inside Foo Foo Foo</div>
+		0
+	`,
+	props: {
+		props: 'Foo'
+	},
+
+	async test({ assert, component, target, raf }) {
+		await component.hide();
+		const [, div] = target.querySelectorAll('div');
+
+		raf.tick(50);
+		assert.equal(div.foo, 0.5);
+
+		component.props = 'Bar';
+		assert.htmlEqual(target.innerHTML, `
+			<div>outside Bar Bar Bar</div>
+			<div>inside Foo Foo Foo</div>
+			0
+		`);
+
+		await component.show();
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>outside Bar Bar Bar</div>
+			<div>inside Bar Bar Bar</div>
+			0
+		`);
+
+		raf.tick(100);
+		assert.equal(div.foo, 1);
+	}
+};
diff --git a/test/runtime/samples/transition-js-slot-7-spread-cancelled-overflow/main.svelte b/test/runtime/samples/transition-js-slot-7-spread-cancelled-overflow/main.svelte
new file mode 100644
index 0000000000..000b29ee7f
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-7-spread-cancelled-overflow/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let a1=0,a2=0,a3=0,a4=0,a5=0,a6=0,a7=0,a8=0,a9=0,a10=0,a11=0, a12=0,a13=0,a14=0,a15=0,a16=0,a17=0,a18=0,a19=0,a20=0,a21=0, a22=0,a23=0,a24=0,a25=0,a26=0,a27=0,a28=0,a29=0,a30=0,a31=0,a32=0,a33=0;
+
+	let visible = true;
+	let state = 'Foo';
+	let slotProps = { slotProps: 'Foo' };
+	export let props;
+
+	export function show() {
+		visible = true;
+	}
+	export function hide() {
+		visible = false;
+		state = 'Bar';
+		slotProps = { slotProps: 'Bar' };
+	}
+</script>
+
+<div>outside {state} {props} {slotProps.slotProps}</div>
+
+<Nested {visible} {slotProps} let:slotProps>
+	inside {state} {props} {slotProps}
+</Nested>
+
+{a1+a2+a3+a4+a5+a6+a7+a8+a9+a10+a11+a12+a13+a14+a15+a16+a17+a18+a19+a20+a21+a22+a23+a24+a25+a26+a27+a28+a29+a30+a31+a32+a33}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-slot-fallback/_config.js b/test/runtime/samples/transition-js-slot-fallback/_config.js
new file mode 100644
index 0000000000..0dfe3281fc
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-fallback/_config.js
@@ -0,0 +1,23 @@
+export default {
+	html: `
+		<div>Foo</div>
+	`,
+
+	async test({ assert, component, target, raf }) {
+		await component.hide();
+		const div = target.querySelector('div');
+
+		raf.tick(50);
+		assert.equal(div.foo, 0.5);
+
+		await component.show();
+
+		assert.htmlEqual(target.innerHTML, '<div>Bar</div>');
+
+		raf.tick(75);
+		assert.equal(div.foo, 0.75);
+
+		raf.tick(100);
+		assert.equal(div.foo, 1);
+	}
+};
diff --git a/test/runtime/samples/transition-js-slot-fallback/main.svelte b/test/runtime/samples/transition-js-slot-fallback/main.svelte
new file mode 100644
index 0000000000..3392792043
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-fallback/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	let visible = true;
+	let data = 'Foo';
+
+	export function show() {
+		visible = true;
+	}
+	export function hide() {
+		visible = false;
+		data = 'Bar';
+	}
+
+	function fade(node) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:fade>
+		<slot>{data}</slot>
+	</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-slot/Nested.svelte b/test/runtime/samples/transition-js-slot/Nested.svelte
new file mode 100644
index 0000000000..bc67b3c221
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot/Nested.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let visible;
+</script>
+
+<div>
+	{#if visible}
+		<slot/>
+	{/if}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-slot/_config.js b/test/runtime/samples/transition-js-slot/_config.js
new file mode 100644
index 0000000000..3c1cbeec10
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot/_config.js
@@ -0,0 +1,26 @@
+export default {
+	props: {
+		visible: false
+	},
+
+	html: `
+		<div></div>
+	`,
+
+	test({ assert, component, target, raf }) {
+		component.visible = true;
+		const p = target.querySelector('p');
+		assert.equal(p.foo, 0);
+
+		raf.tick(50);
+		assert.equal(p.foo, 0.5);
+
+		component.visible = false;
+
+		raf.tick(75);
+		assert.equal(p.foo, 0.25);
+
+		raf.tick(100);
+		assert.equal(p.foo, 0);
+	}
+};
diff --git a/test/runtime/samples/transition-js-slot/main.svelte b/test/runtime/samples/transition-js-slot/main.svelte
new file mode 100644
index 0000000000..afbcd68167
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let visible;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+<Nested {visible}>
+	<p transition:foo>slotted</p>
+</Nested>
\ No newline at end of file
diff --git a/test/runtime/samples/unchanged-expression-escape/_config.js b/test/runtime/samples/unchanged-expression-escape/_config.js
new file mode 100644
index 0000000000..38c5728a06
--- /dev/null
+++ b/test/runtime/samples/unchanged-expression-escape/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: `
+		<p>Hello world, what's up? this & that</p>
+		<p>Hello world, what's up? this & that</p>
+		<p>Hello world, what's up?<span></span> this & that</p>
+	`
+};
diff --git a/test/runtime/samples/unchanged-expression-escape/main.svelte b/test/runtime/samples/unchanged-expression-escape/main.svelte
new file mode 100644
index 0000000000..de61ba5906
--- /dev/null
+++ b/test/runtime/samples/unchanged-expression-escape/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let name = 'world';
+</script>
+
+<p>Hello {name}, what's up? this & that</p>
+<p>Hello world, what's up? this & that</p>
+<p>Hello {name}, what's up?<span /> this & that</p>
\ No newline at end of file
diff --git a/test/runtime/samples/unchanged-expression-xss/_config.js b/test/runtime/samples/unchanged-expression-xss/_config.js
new file mode 100644
index 0000000000..4b9f1deff2
--- /dev/null
+++ b/test/runtime/samples/unchanged-expression-xss/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: "<p>&lt;b\nstyle='color:\nred;'&gt;RED?!?&lt;/b&gt;</p>"
+};
diff --git a/test/runtime/samples/unchanged-expression-xss/main.svelte b/test/runtime/samples/unchanged-expression-xss/main.svelte
new file mode 100644
index 0000000000..c2003d07ae
--- /dev/null
+++ b/test/runtime/samples/unchanged-expression-xss/main.svelte
@@ -0,0 +1,5 @@
+<script>
+  const content = `<b style='color: red;'>RED?!?</b>`
+</script>
+
+<p>{content}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/whitespace-each-block/_config.js b/test/runtime/samples/whitespace-each-block/_config.js
new file mode 100644
index 0000000000..9f3f5735ed
--- /dev/null
+++ b/test/runtime/samples/whitespace-each-block/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		characters: ['a', 'b', 'c']
+	},
+
+	test({ assert, target }) {
+		assert.equal(
+			target.textContent,
+			'a b c '
+		);
+	}
+};
diff --git a/test/runtime/samples/whitespace-each-block/main.svelte b/test/runtime/samples/whitespace-each-block/main.svelte
new file mode 100644
index 0000000000..cdb3a6baec
--- /dev/null
+++ b/test/runtime/samples/whitespace-each-block/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let characters;
+</script>
+
+{#each characters as char}
+	<span>{char} </span>
+{/each}
\ No newline at end of file
diff --git a/test/runtime/samples/whitespace-list/_config.js b/test/runtime/samples/whitespace-list/_config.js
new file mode 100644
index 0000000000..c3c9d31333
--- /dev/null
+++ b/test/runtime/samples/whitespace-list/_config.js
@@ -0,0 +1,22 @@
+export default {
+	props: {
+		// so it doesn't use innerHTML
+		one: 'one',
+		two: 'two',
+		three: 'three'
+	},
+
+	html: `
+		<ul>
+			<li>one</li>
+			<li>two</li>
+			<li>three</li>
+		</ul>
+	`,
+
+	test({ assert, target }) {
+		const ul = target.querySelector('ul');
+
+		assert.equal(ul.childNodes.length, 5);
+	}
+};
diff --git a/test/runtime/samples/whitespace-list/main.svelte b/test/runtime/samples/whitespace-list/main.svelte
new file mode 100644
index 0000000000..2fdec4d6a3
--- /dev/null
+++ b/test/runtime/samples/whitespace-list/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let one;
+	export let two;
+	export let three;
+</script>
+
+<ul>
+	<li>{one}</li>
+	<li>{two}</li>
+	<li>{three}</li>
+</ul>
\ No newline at end of file
diff --git a/test/runtime/samples/whitespace-normal/_config.js b/test/runtime/samples/whitespace-normal/_config.js
new file mode 100644
index 0000000000..90ca0b42c0
--- /dev/null
+++ b/test/runtime/samples/whitespace-normal/_config.js
@@ -0,0 +1,12 @@
+export default {
+	props: {
+		name: 'world'
+	},
+
+	test({ assert, target }) {
+		assert.equal(
+			target.textContent,
+			'Hello world! How are you?'
+		);
+	}
+};
diff --git a/test/runtime/samples/whitespace-normal/main.svelte b/test/runtime/samples/whitespace-normal/main.svelte
new file mode 100644
index 0000000000..f5cf8316d4
--- /dev/null
+++ b/test/runtime/samples/whitespace-normal/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let name;
+</script>
+
+<h1>Hello <strong>{name}! </strong><span>How are you?</span></h1>
diff --git a/test/runtime/samples/window-bind-scroll-update/_config.js b/test/runtime/samples/window-bind-scroll-update/_config.js
new file mode 100644
index 0000000000..60bdb4b7f6
--- /dev/null
+++ b/test/runtime/samples/window-bind-scroll-update/_config.js
@@ -0,0 +1,37 @@
+import { env, useFakeTimers } from '../../../helpers';
+
+let clock;
+
+export default {
+	before_test()  {
+		clock = useFakeTimers();
+
+		const window = env();
+		Object.defineProperties(window, {
+			pageYOffset: {
+				value: 0,
+				configurable: true
+			},
+			pageXOffset: {
+				value: 0,
+				configurable: true
+			}
+		});
+	},
+
+	after_test() {
+		clock.removeFakeTimers();
+		clock = null;
+	},
+
+	async test({ assert, component, window }) {
+		assert.equal(window.pageYOffset, 0);
+
+		// clear the previous 'scrolling' state
+		clock.flush();
+		component.scrollY = 100;
+
+		clock.flush();
+		assert.equal(window.pageYOffset, 100);
+	}
+};
diff --git a/test/runtime/samples/window-bind-scroll-update/main.svelte b/test/runtime/samples/window-bind-scroll-update/main.svelte
new file mode 100644
index 0000000000..8f00d15089
--- /dev/null
+++ b/test/runtime/samples/window-bind-scroll-update/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let scrollY;
+</script>
+
+<svelte:window bind:scrollY/>
+
+<div style='width: 100%; height: 9999px;'></div>
\ No newline at end of file
diff --git a/test/runtime/samples/window-binding-multiple-handlers/_config.js b/test/runtime/samples/window-binding-multiple-handlers/_config.js
new file mode 100644
index 0000000000..2f7c6be562
--- /dev/null
+++ b/test/runtime/samples/window-binding-multiple-handlers/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<button>Click</button>'
+};
diff --git a/test/runtime/samples/window-binding-multiple-handlers/main.svelte b/test/runtime/samples/window-binding-multiple-handlers/main.svelte
new file mode 100644
index 0000000000..7601d745e4
--- /dev/null
+++ b/test/runtime/samples/window-binding-multiple-handlers/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let width;
+	export let height;
+</script>
+
+<svelte:window bind:innerWidth={width} bind:innerHeight={height}/>
+<button on:click={() => {}}>Click</button>
diff --git a/test/runtime/samples/window-binding-resize/_config.js b/test/runtime/samples/window-binding-resize/_config.js
new file mode 100644
index 0000000000..c99e92a07b
--- /dev/null
+++ b/test/runtime/samples/window-binding-resize/_config.js
@@ -0,0 +1,39 @@
+export default {
+	html: '<div>1024x768</div>',
+
+	before_test() {
+		Object.defineProperties(window, {
+			innerWidth: {
+				value: 1024,
+				configurable: true
+			},
+			innerHeight: {
+				value: 768,
+				configurable: true
+			}
+		});
+	},
+
+	skip_if_ssr: true, // there's some kind of weird bug with this test... it compiles with the wrong require.extensions hook for some bizarre reason
+
+	async test({ assert, target, window }) {
+		const event = new window.Event('resize');
+
+		Object.defineProperties(window, {
+			innerWidth: {
+				value: 567,
+				configurable: true
+			},
+			innerHeight: {
+				value: 456,
+				configurable: true
+			}
+		});
+
+		await window.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>567x456</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/window-binding-resize/main.svelte b/test/runtime/samples/window-binding-resize/main.svelte
new file mode 100644
index 0000000000..405f4e6e23
--- /dev/null
+++ b/test/runtime/samples/window-binding-resize/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let width;
+	export let height;
+</script>
+
+<svelte:window bind:innerWidth={width} bind:innerHeight={height}/>
+
+<div>{width}x{height}</div>
\ No newline at end of file
diff --git a/test/runtime/samples/window-binding-scroll-store/_config.js b/test/runtime/samples/window-binding-scroll-store/_config.js
new file mode 100644
index 0000000000..47951506bf
--- /dev/null
+++ b/test/runtime/samples/window-binding-scroll-store/_config.js
@@ -0,0 +1,29 @@
+export default {
+	skip_if_ssr: true,
+	before_test() {
+		Object.defineProperties(window, {
+			pageYOffset: {
+				value: 0,
+				configurable: true
+			}
+		});
+	},
+	async test({ assert, target, window }) {
+		assert.equal(window.pageYOffset, 0);
+
+		const event = new window.Event('scroll');
+		Object.defineProperties(window, {
+			pageYOffset: {
+				value: 234,
+				configurable: true
+			}
+		});
+
+		await window.dispatchEvent(event);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			'<p style="position: fixed; top: 1em; left: 1em;">scroll\ny\nis\n234.\n234\n*\n234\n=\n54756</p><div style="height: 9999px;"></div>'
+		);
+	}
+};
diff --git a/test/runtime/samples/window-binding-scroll-store/main.svelte b/test/runtime/samples/window-binding-scroll-store/main.svelte
new file mode 100644
index 0000000000..fe225520d7
--- /dev/null
+++ b/test/runtime/samples/window-binding-scroll-store/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { writable, derived } from 'svelte/store';
+	const y = writable(0);
+	const y_squared = derived(y, $y => $y * $y);
+</script>
+
+<svelte:window bind:scrollY={$y}/>
+
+<p style="position: fixed; top: 1em; left: 1em;">
+	scroll y is {$y}. {$y} * {$y} = {$y_squared}
+</p>
+
+<div style="height: 9999px">
+	
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/window-event-context/_config.js b/test/runtime/samples/window-event-context/_config.js
new file mode 100644
index 0000000000..c07dd811b5
--- /dev/null
+++ b/test/runtime/samples/window-event-context/_config.js
@@ -0,0 +1,22 @@
+export default {
+	props: {
+		foo: true
+	},
+
+	html: 'true',
+
+	skip: /^v4/.test(process.version), // node 4 apparently does some dumb stuff
+	skip_if_ssr: true, // there's some kind of weird bug with this test... it compiles with the wrong require.extensions hook for some bizarre reason
+
+	async test({ assert, component, target, window }) {
+		const event = new window.Event('click');
+
+		await window.dispatchEvent(event);
+		assert.equal(component.foo, false);
+		assert.htmlEqual(target.innerHTML, 'false');
+
+		await window.dispatchEvent(event);
+		assert.equal(component.foo, true);
+		assert.htmlEqual(target.innerHTML, 'true');
+	}
+};
diff --git a/test/runtime/samples/window-event-context/main.svelte b/test/runtime/samples/window-event-context/main.svelte
new file mode 100644
index 0000000000..4f9dc24ba1
--- /dev/null
+++ b/test/runtime/samples/window-event-context/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo;
+</script>
+
+<svelte:window on:click='{() => foo = !foo}'/>
+
+{foo}
\ No newline at end of file
diff --git a/test/runtime/samples/window-event-custom/_config.js b/test/runtime/samples/window-event-custom/_config.js
new file mode 100644
index 0000000000..2e3b577b86
--- /dev/null
+++ b/test/runtime/samples/window-event-custom/_config.js
@@ -0,0 +1,15 @@
+export default {
+	html: '<p>escaped: false</p>',
+
+	async test({ assert, target, window }) {
+		const event = new window.KeyboardEvent('keydown', {
+			key: 'Escape'
+		});
+
+		await window.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>escaped: true</p>
+		`);
+	}
+};
diff --git a/test/runtime/samples/window-event-custom/main.svelte b/test/runtime/samples/window-event-custom/main.svelte
new file mode 100644
index 0000000000..ff286f4309
--- /dev/null
+++ b/test/runtime/samples/window-event-custom/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let escaped = false;
+
+	function esc(node, callback) {
+		function onKeyDown(event) {
+			if (event.key === 'Escape') callback(event);
+		}
+		node.addEventListener('keydown', onKeyDown);
+		return {
+			destroy() {
+				node.removeEventListener('keydown', onKeyDown);
+			}
+		};
+	}
+</script>
+
+<svelte:window use:esc="{() => escaped = true}" />
+
+<p>escaped: {escaped}</p>
diff --git a/test/runtime/samples/window-event/_config.js b/test/runtime/samples/window-event/_config.js
new file mode 100644
index 0000000000..9abde274e9
--- /dev/null
+++ b/test/runtime/samples/window-event/_config.js
@@ -0,0 +1,26 @@
+export default {
+	html: '<div>undefinedxundefined</div>',
+
+	skip_if_ssr: true, // there's some kind of weird bug with this test... it compiles with the wrong require.extensions hook for some bizarre reason
+
+	async test({ assert, target, window }) {
+		const event = new window.Event('resize');
+
+		Object.defineProperties(window, {
+			innerWidth: {
+				value: 567,
+				configurable: true
+			},
+			innerHeight: {
+				value: 456,
+				configurable: true
+			}
+		});
+
+		await window.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>567x456</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/window-event/main.svelte b/test/runtime/samples/window-event/main.svelte
new file mode 100644
index 0000000000..e246902063
--- /dev/null
+++ b/test/runtime/samples/window-event/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	export let width;
+	export let height;
+</script>
+
+<svelte:window on:resize={function () { width = this.innerWidth, height = this.innerHeight; }}/>
+
+<div>{width}x{height}</div>
\ No newline at end of file
diff --git a/test/server-side-rendering/index.ts b/test/server-side-rendering/index.ts
new file mode 100644
index 0000000000..2a4e0596e7
--- /dev/null
+++ b/test/server-side-rendering/index.ts
@@ -0,0 +1,248 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import glob from 'tiny-glob/sync.js';
+
+import {
+	assert,
+	showOutput,
+	loadConfig,
+	loadSvelte,
+	setupHtmlEqual,
+	tryToLoadJson,
+	cleanRequireCache,
+	shouldUpdateExpected,
+	mkdirp
+} from '../helpers';
+import { set_current_component } from '../../internal';
+
+function tryToReadFile(file) {
+	try {
+		return fs.readFileSync(file, 'utf-8');
+	} catch (err) {
+		if (err.code !== 'ENOENT') throw err;
+		return null;
+	}
+}
+
+const sveltePath = process.cwd().split('\\').join('/');
+let compile = null;
+
+describe('ssr', () => {
+	before(() => {
+		compile = loadSvelte(true).compile;
+
+		return setupHtmlEqual();
+	});
+
+	let saved_window;
+	before(() => saved_window = global.window);
+	after(() => global.window = saved_window);
+
+	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
+		if (dir[0] === '.') return;
+
+		const config = loadConfig(`${__dirname}/samples/${dir}/_config.js`);
+
+		// add .solo to a sample directory name to only run that test, or
+		// .show to always show the output. or both
+		const solo = config.solo || /\.solo/.test(dir);
+		const show = /\.show/.test(dir);
+
+		if (solo && process.env.CI) {
+			throw new Error('Forgot to remove `solo: true` from test');
+		}
+
+		(solo ? it.only : it)(dir, (done) => {
+
+			try {
+
+				dir = path.resolve(`${__dirname}/samples`, dir);
+
+				cleanRequireCache();
+
+				const compileOptions = {
+					sveltePath,
+					...config.compileOptions,
+					generate: 'ssr',
+					format: 'cjs'
+				};
+
+				require('../../register')(compileOptions);
+
+				const Component = require(`${dir}/main.svelte`).default;
+
+				const expectedHtml = tryToReadFile(`${dir}/_expected.html`);
+				const expectedCss = tryToReadFile(`${dir}/_expected.css`) || '';
+
+				const props = tryToLoadJson(`${dir}/data.json`) || undefined;
+
+				const rendered = Component.render(props);
+				const { html, css, head } = rendered;
+
+				fs.writeFileSync(`${dir}/_actual.html`, html);
+				if (css.code) fs.writeFileSync(`${dir}/_actual.css`, css.code);
+
+				try {
+					if (config.withoutNormalizeHtml) {
+						assert.strictEqual(html.trim().replace(/\r\n/g, '\n'), expectedHtml.trim().replace(/\r\n/g, '\n'));
+					} else {
+						(compileOptions.preserveComments
+							? assert.htmlEqualWithComments
+							: assert.htmlEqual)(html, expectedHtml);
+					}
+				} catch (error) {
+					if (shouldUpdateExpected()) {
+						fs.writeFileSync(`${dir}/_expected.html`, html);
+						console.log(`Updated ${dir}/_expected.html.`);
+					} else {
+						throw error;
+					}
+				}
+
+				try {
+					assert.equal(
+						css.code.replace(/^\s+/gm, '').replace(/[\r\n]/g, ''),
+						expectedCss.replace(/^\s+/gm, '').replace(/[\r\n]/g, '')
+					);
+				} catch (error) {
+					if (shouldUpdateExpected()) {
+						fs.writeFileSync(`${dir}/_expected.css`, css.code);
+						console.log(`Updated ${dir}/_expected.css.`);
+					} else {
+						throw error;
+					}
+				}
+
+				if (fs.existsSync(`${dir}/_expected-head.html`)) {
+					fs.writeFileSync(`${dir}/_actual-head.html`, head);
+
+					try {
+						assert.htmlEqual(
+							head,
+							fs.readFileSync(`${dir}/_expected-head.html`, 'utf-8')
+						);
+					} catch (error) {
+						if (shouldUpdateExpected()) {
+							fs.writeFileSync(`${dir}/_expected-head.html`, head);
+							console.log(`Updated ${dir}/_expected-head.html.`);
+						} else {
+							throw error;
+						}
+					}
+				}
+
+				if (show) showOutput(dir, { generate: 'ssr', format: 'cjs' });
+				done();
+			} catch (err) {
+				showOutput(dir, { generate: 'ssr', format: 'cjs' });
+				err.stack += `\n\ncmd-click: ${path.relative(process.cwd(), dir)}/main.svelte`;
+				done(err);
+			} finally {
+				set_current_component(null);
+			}
+		});
+	});
+
+	// duplicate client-side tests, as far as possible
+	runRuntimeSamples('runtime');
+	runRuntimeSamples('runtime-puppeteer');
+
+	function runRuntimeSamples(suite) {
+		fs.readdirSync(`test/${suite}/samples`).forEach(dir => {
+			if (dir[0] === '.') return;
+
+			const config = loadConfig(`./${suite}/samples/${dir}/_config.js`);
+			const solo = config.solo || /\.solo/.test(dir);
+
+			if (solo && process.env.CI) {
+				throw new Error('Forgot to remove `solo: true` from test');
+			}
+
+			if (config.skip_if_ssr) return;
+
+			(config.skip ? it.skip : solo ? it.only : it)(dir, () => {
+				const cwd = path.resolve(`test/${suite}/samples`, dir);
+
+				cleanRequireCache();
+
+				delete global.window;
+
+				const compileOptions = {
+					sveltePath,
+					...config.compileOptions,
+					generate: 'ssr',
+					format: 'cjs'
+				};
+
+				require('../../register')(compileOptions);
+
+				glob('**/*.svelte', { cwd }).forEach(file => {
+					if (file[0] === '_') return;
+
+					const dir  = `${cwd}/_output/ssr`;
+					const out = `${dir}/${file.replace(/\.svelte$/, '.js')}`;
+
+					if (fs.existsSync(out)) {
+						fs.unlinkSync(out);
+					}
+
+					mkdirp(dir);
+
+					try {
+						const { js } = compile(
+							fs.readFileSync(`${cwd}/${file}`, 'utf-8'),
+							{
+								...compileOptions,
+								filename: file
+							}
+						);
+
+						fs.writeFileSync(out, js.code);
+					} catch (err) {
+						// do nothing
+					}
+				});
+
+				try {
+					if (config.before_test) config.before_test();
+
+					const Component = require(`../${suite}/samples/${dir}/main.svelte`).default;
+					const { html } = Component.render(config.props, {
+						store: (config.store !== true) && config.store
+					});
+
+					if (config.ssrHtml) {
+						assert.htmlEqual(html, config.ssrHtml);
+					} else if (config.html) {
+						assert.htmlEqual(html, config.html);
+					}
+
+					if (config.test_ssr) {
+						config.test_ssr({ assert });
+					}
+
+					if (config.after_test) config.after_test();
+
+					if (config.show) {
+						showOutput(cwd, compileOptions);
+					}
+				} catch (err) {
+					err.stack += `\n\ncmd-click: ${path.relative(process.cwd(), cwd)}/main.svelte`;
+
+					if (config.error) {
+						if (typeof config.error === 'function') {
+							config.error(assert, err);
+						} else {
+							assert.equal(err.message, config.error);
+						}
+					} else {
+						showOutput(cwd, compileOptions);
+						throw err;
+					}
+				} finally {
+					set_current_component(null);
+				}
+			});
+		});
+	}
+});
diff --git a/test/server-side-rendering/samples/attribute-boolean/_expected.html b/test/server-side-rendering/samples/attribute-boolean/_expected.html
new file mode 100644
index 0000000000..5b36bb6c3f
--- /dev/null
+++ b/test/server-side-rendering/samples/attribute-boolean/_expected.html
@@ -0,0 +1,2 @@
+<textarea readonly></textarea>
+<textarea autocomplete="no"></textarea>
diff --git a/test/server-side-rendering/samples/attribute-boolean/main.svelte b/test/server-side-rendering/samples/attribute-boolean/main.svelte
new file mode 100644
index 0000000000..0852e12418
--- /dev/null
+++ b/test/server-side-rendering/samples/attribute-boolean/main.svelte
@@ -0,0 +1,2 @@
+<textarea readonly></textarea>
+<textarea autocomplete={'no'}></textarea>
diff --git a/test/server-side-rendering/samples/attribute-dynamic/_expected.html b/test/server-side-rendering/samples/attribute-dynamic/_expected.html
new file mode 100644
index 0000000000..5d9e40d299
--- /dev/null
+++ b/test/server-side-rendering/samples/attribute-dynamic/_expected.html
@@ -0,0 +1 @@
+<div style='font-family: sans-serif; color: aquamarine;'>aquamarine sans-serif</div>
diff --git a/test/server-side-rendering/samples/attribute-dynamic/data.json b/test/server-side-rendering/samples/attribute-dynamic/data.json
new file mode 100644
index 0000000000..774a6ed7b1
--- /dev/null
+++ b/test/server-side-rendering/samples/attribute-dynamic/data.json
@@ -0,0 +1,4 @@
+{
+	"font": "sans-serif",
+	"color": "aquamarine"
+}
diff --git a/test/server-side-rendering/samples/attribute-dynamic/main.svelte b/test/server-side-rendering/samples/attribute-dynamic/main.svelte
new file mode 100644
index 0000000000..07cfce149a
--- /dev/null
+++ b/test/server-side-rendering/samples/attribute-dynamic/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let font;
+	export let color;
+</script>
+
+<div style='font-family: {font}; color: {color};'>{color} {font}</div>
diff --git a/test/server-side-rendering/samples/attribute-escape-quotes-spread-2/_expected.html b/test/server-side-rendering/samples/attribute-escape-quotes-spread-2/_expected.html
new file mode 100644
index 0000000000..b3970f88ba
--- /dev/null
+++ b/test/server-side-rendering/samples/attribute-escape-quotes-spread-2/_expected.html
@@ -0,0 +1,5 @@
+<div
+	bar="'></div><script>alert(42)</script>"
+	foo="&quot;></div><script>alert(42)</script>"
+	qux="&amp;&amp;&amp;"
+></div>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/attribute-escape-quotes-spread-2/main.svelte b/test/server-side-rendering/samples/attribute-escape-quotes-spread-2/main.svelte
new file mode 100644
index 0000000000..22f5526f3e
--- /dev/null
+++ b/test/server-side-rendering/samples/attribute-escape-quotes-spread-2/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let foo = '"></div><script>alert(42)</' + 'script>';
+  export let bar = "'></div><script>alert(42)</" + 'script>';
+  export let props = {
+		['"></div><script>alert(42)</' + 'script>']: 'baz',
+		qux: '&&&',
+	};
+</script>
+
+<div {foo} bar={bar} {...props}></div>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/attribute-escaped-quotes-spread/_expected.html b/test/server-side-rendering/samples/attribute-escaped-quotes-spread/_expected.html
new file mode 100644
index 0000000000..b3970f88ba
--- /dev/null
+++ b/test/server-side-rendering/samples/attribute-escaped-quotes-spread/_expected.html
@@ -0,0 +1,5 @@
+<div
+	bar="'></div><script>alert(42)</script>"
+	foo="&quot;></div><script>alert(42)</script>"
+	qux="&amp;&amp;&amp;"
+></div>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/attribute-escaped-quotes-spread/main.svelte b/test/server-side-rendering/samples/attribute-escaped-quotes-spread/main.svelte
new file mode 100644
index 0000000000..66047eb09a
--- /dev/null
+++ b/test/server-side-rendering/samples/attribute-escaped-quotes-spread/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let props = {
+		foo: '"></div><script>alert(42)</' + 'script>',
+		bar: "'></div><script>alert(42)</" + 'script>',
+		['"></div><script>alert(42)</' + 'script>']: 'baz',
+		qux: '&&&',
+	};
+</script>
+
+<div {...props}></div>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/attribute-escaped-quotes/_expected.html b/test/server-side-rendering/samples/attribute-escaped-quotes/_expected.html
new file mode 100644
index 0000000000..e99c5b0f6e
--- /dev/null
+++ b/test/server-side-rendering/samples/attribute-escaped-quotes/_expected.html
@@ -0,0 +1,4 @@
+<div
+	foo="&#34;></div>\<script>alert(42)</script>"
+	bar="&#34;></div>\<script>alert(42)</script>"
+></div>
diff --git a/test/server-side-rendering/samples/attribute-escaped-quotes/main.svelte b/test/server-side-rendering/samples/attribute-escaped-quotes/main.svelte
new file mode 100644
index 0000000000..aeed0f20d1
--- /dev/null
+++ b/test/server-side-rendering/samples/attribute-escaped-quotes/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let foo = '"></div>\\<script>alert(42)</' + 'script>';
+	export let bar = { toString: () => '"></div>\\<script>alert(42)<\/script>' };
+</script>
+
+<div foo={foo} bar={bar}></div>
diff --git a/test/server-side-rendering/samples/attribute-spread-with-null/_expected.html b/test/server-side-rendering/samples/attribute-spread-with-null/_expected.html
new file mode 100644
index 0000000000..281c6866c3
--- /dev/null
+++ b/test/server-side-rendering/samples/attribute-spread-with-null/_expected.html
@@ -0,0 +1 @@
+<div></div>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/attribute-spread-with-null/main.svelte b/test/server-side-rendering/samples/attribute-spread-with-null/main.svelte
new file mode 100644
index 0000000000..adfa9e6919
--- /dev/null
+++ b/test/server-side-rendering/samples/attribute-spread-with-null/main.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let id = null;
+</script>
+
+<div {id} {...$$restProps} />
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/attribute-static/_expected.html b/test/server-side-rendering/samples/attribute-static/_expected.html
new file mode 100644
index 0000000000..3cb2e4b233
--- /dev/null
+++ b/test/server-side-rendering/samples/attribute-static/_expected.html
@@ -0,0 +1 @@
+<div class='foo'></div>
diff --git a/test/server-side-rendering/samples/attribute-static/main.svelte b/test/server-side-rendering/samples/attribute-static/main.svelte
new file mode 100644
index 0000000000..3cb2e4b233
--- /dev/null
+++ b/test/server-side-rendering/samples/attribute-static/main.svelte
@@ -0,0 +1 @@
+<div class='foo'></div>
diff --git a/test/server-side-rendering/samples/bindings-empty-string/_expected.html b/test/server-side-rendering/samples/bindings-empty-string/_expected.html
new file mode 100644
index 0000000000..8344e198fa
--- /dev/null
+++ b/test/server-side-rendering/samples/bindings-empty-string/_expected.html
@@ -0,0 +1 @@
+<input value=''>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/bindings-empty-string/main.svelte b/test/server-side-rendering/samples/bindings-empty-string/main.svelte
new file mode 100644
index 0000000000..7257d0f85e
--- /dev/null
+++ b/test/server-side-rendering/samples/bindings-empty-string/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo = '';
+</script>
+
+<input bind:value={foo} >
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/bindings-group/_expected.html b/test/server-side-rendering/samples/bindings-group/_expected.html
new file mode 100644
index 0000000000..06d4242b07
--- /dev/null
+++ b/test/server-side-rendering/samples/bindings-group/_expected.html
@@ -0,0 +1,5 @@
+<div>Cheese</div>
+<input type="radio" value="Plain" checked>
+<input type="radio" value="Whole wheat">
+<input type="checkbox" value="Beans">
+<input type="checkbox" value="Cheese" checked>
diff --git a/test/server-side-rendering/samples/bindings-group/main.svelte b/test/server-side-rendering/samples/bindings-group/main.svelte
new file mode 100644
index 0000000000..a88d3fb200
--- /dev/null
+++ b/test/server-side-rendering/samples/bindings-group/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	let tortilla = 'Plain';
+	let fillings = ['Cheese'];
+</script>
+
+<div>{fillings.toString()}</div>
+
+<input type="radio" bind:group={tortilla} value="Plain">
+<input type="radio" bind:group={tortilla} value="Whole wheat">
+
+<input type="checkbox" bind:group={fillings} value="Beans">
+<input type="checkbox" bind:group={fillings} value="Cheese">
diff --git a/test/server-side-rendering/samples/bindings-readonly/_expected.html b/test/server-side-rendering/samples/bindings-readonly/_expected.html
new file mode 100644
index 0000000000..af678acde0
--- /dev/null
+++ b/test/server-side-rendering/samples/bindings-readonly/_expected.html
@@ -0,0 +1,4 @@
+<div></div>
+<audio></audio>
+<video></video>
+<input type="file">
diff --git a/test/server-side-rendering/samples/bindings-readonly/main.svelte b/test/server-side-rendering/samples/bindings-readonly/main.svelte
new file mode 100644
index 0000000000..3ff98a3ead
--- /dev/null
+++ b/test/server-side-rendering/samples/bindings-readonly/main.svelte
@@ -0,0 +1,44 @@
+<script>
+	export let clientWidth = 1;
+	export let clientHeight = 2;
+	export let offsetHeight = 3;
+	export let offsetWidth = 4;
+
+	export let audioDuration = 5;
+	export let audioBuffered = 6;
+	export let audioSeekable = 7;
+	export let audioPlayed = 8;
+
+	export let videoDuration = 9;
+	export let videoBuffered = 10;
+	export let videoSeekable = 11;
+	export let videoPlayed = 12;
+
+	export let value = '/some/file';
+</script>
+
+<div
+	bind:clientWidth
+	bind:clientHeight
+	bind:offsetWidth
+	bind:offsetHeight
+></div>
+
+<audio
+	bind:duration="{audioDuration}"
+	bind:buffered="{audioBuffered}"
+	bind:seekable="{audioSeekable}"
+	bind:played="{audioPlayed}"
+></audio>
+
+<video
+	bind:duration="{videoDuration}"
+	bind:buffered="{videoBuffered}"
+	bind:seekable="{videoSeekable}"
+	bind:played="{videoPlayed}"
+></video>
+
+<input
+  type="file"
+	bind:value
+/>
diff --git a/test/server-side-rendering/samples/bindings-zero/_expected.html b/test/server-side-rendering/samples/bindings-zero/_expected.html
new file mode 100644
index 0000000000..d634c4b80f
--- /dev/null
+++ b/test/server-side-rendering/samples/bindings-zero/_expected.html
@@ -0,0 +1,2 @@
+<input value="0" type="number">
+<input value="0" type="range">
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/bindings-zero/main.svelte b/test/server-side-rendering/samples/bindings-zero/main.svelte
new file mode 100644
index 0000000000..5689bb8d9c
--- /dev/null
+++ b/test/server-side-rendering/samples/bindings-zero/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	export let foo = 0;
+</script>
+
+<input type="number" bind:value={foo} >
+<input type="range" bind:value={foo} >
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/bindings/_expected.html b/test/server-side-rendering/samples/bindings/_expected.html
new file mode 100644
index 0000000000..fd3487caa7
--- /dev/null
+++ b/test/server-side-rendering/samples/bindings/_expected.html
@@ -0,0 +1 @@
+<input value='bar'>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/bindings/main.svelte b/test/server-side-rendering/samples/bindings/main.svelte
new file mode 100644
index 0000000000..c1ba2ed02a
--- /dev/null
+++ b/test/server-side-rendering/samples/bindings/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo = 'bar';
+</script>
+
+<input bind:value={foo} >
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/comment-preserve/_config.js b/test/server-side-rendering/samples/comment-preserve/_config.js
new file mode 100644
index 0000000000..f440f86013
--- /dev/null
+++ b/test/server-side-rendering/samples/comment-preserve/_config.js
@@ -0,0 +1,5 @@
+export default {
+	compileOptions: {
+		preserveComments: true
+	}
+};
diff --git a/test/server-side-rendering/samples/comment-preserve/_expected.html b/test/server-side-rendering/samples/comment-preserve/_expected.html
new file mode 100644
index 0000000000..8ecd344816
--- /dev/null
+++ b/test/server-side-rendering/samples/comment-preserve/_expected.html
@@ -0,0 +1,3 @@
+<p>before</p>
+<!-- a comment -->
+<p>after</p>
diff --git a/test/server-side-rendering/samples/comment-preserve/main.svelte b/test/server-side-rendering/samples/comment-preserve/main.svelte
new file mode 100644
index 0000000000..8ecd344816
--- /dev/null
+++ b/test/server-side-rendering/samples/comment-preserve/main.svelte
@@ -0,0 +1,3 @@
+<p>before</p>
+<!-- a comment -->
+<p>after</p>
diff --git a/test/server-side-rendering/samples/comment/_expected.html b/test/server-side-rendering/samples/comment/_expected.html
new file mode 100644
index 0000000000..ba0d202ece
--- /dev/null
+++ b/test/server-side-rendering/samples/comment/_expected.html
@@ -0,0 +1,2 @@
+<p>before</p>
+<p>after</p>
diff --git a/test/server-side-rendering/samples/comment/main.svelte b/test/server-side-rendering/samples/comment/main.svelte
new file mode 100644
index 0000000000..8ecd344816
--- /dev/null
+++ b/test/server-side-rendering/samples/comment/main.svelte
@@ -0,0 +1,3 @@
+<p>before</p>
+<!-- a comment -->
+<p>after</p>
diff --git a/test/server-side-rendering/samples/component-binding-renamed/Foo.svelte b/test/server-side-rendering/samples/component-binding-renamed/Foo.svelte
new file mode 100644
index 0000000000..fd78630d30
--- /dev/null
+++ b/test/server-side-rendering/samples/component-binding-renamed/Foo.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x = 1;
+</script>
+
+:foo:
diff --git a/test/server-side-rendering/samples/component-binding-renamed/_expected.html b/test/server-side-rendering/samples/component-binding-renamed/_expected.html
new file mode 100644
index 0000000000..6bd7771f11
--- /dev/null
+++ b/test/server-side-rendering/samples/component-binding-renamed/_expected.html
@@ -0,0 +1 @@
+1:foo:1
diff --git a/test/server-side-rendering/samples/component-binding-renamed/main.svelte b/test/server-side-rendering/samples/component-binding-renamed/main.svelte
new file mode 100644
index 0000000000..927239e1ec
--- /dev/null
+++ b/test/server-side-rendering/samples/component-binding-renamed/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Foo from './Foo.svelte';
+
+	export let x;
+	export let y;
+</script>
+
+{y}<Foo bind:x={y}/>{y}
diff --git a/test/server-side-rendering/samples/component-binding/Foo.svelte b/test/server-side-rendering/samples/component-binding/Foo.svelte
new file mode 100644
index 0000000000..fd78630d30
--- /dev/null
+++ b/test/server-side-rendering/samples/component-binding/Foo.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let x = 1;
+</script>
+
+:foo:
diff --git a/test/server-side-rendering/samples/component-binding/_expected.html b/test/server-side-rendering/samples/component-binding/_expected.html
new file mode 100644
index 0000000000..6bd7771f11
--- /dev/null
+++ b/test/server-side-rendering/samples/component-binding/_expected.html
@@ -0,0 +1 @@
+1:foo:1
diff --git a/test/server-side-rendering/samples/component-binding/main.svelte b/test/server-side-rendering/samples/component-binding/main.svelte
new file mode 100644
index 0000000000..c7f2d56566
--- /dev/null
+++ b/test/server-side-rendering/samples/component-binding/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Foo from './Foo.svelte';
+
+	export let x;
+</script>
+
+{x}<Foo bind:x/>{x}
diff --git a/test/server-side-rendering/samples/component-data-dynamic/Widget.svelte b/test/server-side-rendering/samples/component-data-dynamic/Widget.svelte
new file mode 100644
index 0000000000..40de25bb55
--- /dev/null
+++ b/test/server-side-rendering/samples/component-data-dynamic/Widget.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let foo;
+	export let baz;
+	export let qux;
+	export let quux;
+</script>
+
+<p>foo: {foo}</p>
+<p>baz: {baz} ({typeof baz})</p>
+<p>qux: {qux}</p>
+<p>quux: {quux}</p>
diff --git a/test/server-side-rendering/samples/component-data-dynamic/_expected.html b/test/server-side-rendering/samples/component-data-dynamic/_expected.html
new file mode 100644
index 0000000000..432cfba85a
--- /dev/null
+++ b/test/server-side-rendering/samples/component-data-dynamic/_expected.html
@@ -0,0 +1,4 @@
+<div><p>foo: lol</p>
+<p>baz: 42 (number)</p>
+<p>qux: this is a piece of string</p>
+<p>quux: core</p></div>
diff --git a/test/server-side-rendering/samples/component-data-dynamic/data.json b/test/server-side-rendering/samples/component-data-dynamic/data.json
new file mode 100644
index 0000000000..89604b3e8b
--- /dev/null
+++ b/test/server-side-rendering/samples/component-data-dynamic/data.json
@@ -0,0 +1,6 @@
+{
+	"bar": "lol",
+	"x": 2,
+	"compound": "piece of",
+	"go": { "deeper": "core" }
+}
diff --git a/test/server-side-rendering/samples/component-data-dynamic/main.svelte b/test/server-side-rendering/samples/component-data-dynamic/main.svelte
new file mode 100644
index 0000000000..ce7f22d6ea
--- /dev/null
+++ b/test/server-side-rendering/samples/component-data-dynamic/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let bar;
+	export let x;
+	export let compound;
+	export let go;
+</script>
+
+<div>
+	<Widget foo='{bar}' baz='{40 + x}' qux='this is a {compound} string' quux='{go.deeper}'/>
+</div>
diff --git a/test/server-side-rendering/samples/component-data-empty/Widget.svelte b/test/server-side-rendering/samples/component-data-empty/Widget.svelte
new file mode 100644
index 0000000000..c94758843a
--- /dev/null
+++ b/test/server-side-rendering/samples/component-data-empty/Widget.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+<p>foo: '{foo}'</p>
diff --git a/test/server-side-rendering/samples/component-data-empty/_expected.html b/test/server-side-rendering/samples/component-data-empty/_expected.html
new file mode 100644
index 0000000000..ecaf8e5897
--- /dev/null
+++ b/test/server-side-rendering/samples/component-data-empty/_expected.html
@@ -0,0 +1 @@
+<div><p>foo: ''</p></div>
diff --git a/test/server-side-rendering/samples/component-data-empty/main.svelte b/test/server-side-rendering/samples/component-data-empty/main.svelte
new file mode 100644
index 0000000000..472429d7f6
--- /dev/null
+++ b/test/server-side-rendering/samples/component-data-empty/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<div>
+	<Widget foo=''/>
+</div>
diff --git a/test/server-side-rendering/samples/component-refs-and-attributes/Widget.svelte b/test/server-side-rendering/samples/component-refs-and-attributes/Widget.svelte
new file mode 100644
index 0000000000..c5be3ed3af
--- /dev/null
+++ b/test/server-side-rendering/samples/component-refs-and-attributes/Widget.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+<p>{foo}</p>
diff --git a/test/server-side-rendering/samples/component-refs-and-attributes/_expected.html b/test/server-side-rendering/samples/component-refs-and-attributes/_expected.html
new file mode 100644
index 0000000000..6e2823ce8f
--- /dev/null
+++ b/test/server-side-rendering/samples/component-refs-and-attributes/_expected.html
@@ -0,0 +1 @@
+<div><p>42</p></div>
diff --git a/test/server-side-rendering/samples/component-refs-and-attributes/main.svelte b/test/server-side-rendering/samples/component-refs-and-attributes/main.svelte
new file mode 100644
index 0000000000..5c86521df5
--- /dev/null
+++ b/test/server-side-rendering/samples/component-refs-and-attributes/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let widget;
+
+	import Widget from './Widget.svelte';
+
+	export let foo = 42;
+</script>
+
+<div><Widget bind:this={widget} foo='{foo}'/></div>
diff --git a/test/server-side-rendering/samples/component-refs/Widget.svelte b/test/server-side-rendering/samples/component-refs/Widget.svelte
new file mode 100644
index 0000000000..65b40ecf9b
--- /dev/null
+++ b/test/server-side-rendering/samples/component-refs/Widget.svelte
@@ -0,0 +1 @@
+<p>widget</p>
diff --git a/test/server-side-rendering/samples/component-refs/_expected.html b/test/server-side-rendering/samples/component-refs/_expected.html
new file mode 100644
index 0000000000..6aa6573932
--- /dev/null
+++ b/test/server-side-rendering/samples/component-refs/_expected.html
@@ -0,0 +1 @@
+<div><p>widget</p></div>
diff --git a/test/server-side-rendering/samples/component-refs/main.svelte b/test/server-side-rendering/samples/component-refs/main.svelte
new file mode 100644
index 0000000000..6ec0bc5438
--- /dev/null
+++ b/test/server-side-rendering/samples/component-refs/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let widget;
+
+	import Widget from './Widget.svelte';
+</script>
+
+<div><Widget bind:this={widget}/></div>
diff --git a/test/server-side-rendering/samples/component-with-different-extension/Widget.svelte b/test/server-side-rendering/samples/component-with-different-extension/Widget.svelte
new file mode 100644
index 0000000000..460a2a1c01
--- /dev/null
+++ b/test/server-side-rendering/samples/component-with-different-extension/Widget.svelte
@@ -0,0 +1 @@
+<p>i am a widget</p>
diff --git a/test/server-side-rendering/samples/component-with-different-extension/_expected.html b/test/server-side-rendering/samples/component-with-different-extension/_expected.html
new file mode 100644
index 0000000000..3551c5971e
--- /dev/null
+++ b/test/server-side-rendering/samples/component-with-different-extension/_expected.html
@@ -0,0 +1 @@
+<div><p>i am a widget</p></div>
diff --git a/test/server-side-rendering/samples/component-with-different-extension/main.svelte b/test/server-side-rendering/samples/component-with-different-extension/main.svelte
new file mode 100644
index 0000000000..ac0b429163
--- /dev/null
+++ b/test/server-side-rendering/samples/component-with-different-extension/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<div>
+	<Widget/>
+</div>
diff --git a/test/server-side-rendering/samples/component-yield/Widget.svelte b/test/server-side-rendering/samples/component-yield/Widget.svelte
new file mode 100644
index 0000000000..d7159b1799
--- /dev/null
+++ b/test/server-side-rendering/samples/component-yield/Widget.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let data = 'this should not appear';
+</script>
+
+<p><slot></slot></p>
diff --git a/test/server-side-rendering/samples/component-yield/_expected.html b/test/server-side-rendering/samples/component-yield/_expected.html
new file mode 100644
index 0000000000..49139417a2
--- /dev/null
+++ b/test/server-side-rendering/samples/component-yield/_expected.html
@@ -0,0 +1,3 @@
+<div>
+	<p>Hello</p>
+</div>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/component-yield/main.svelte b/test/server-side-rendering/samples/component-yield/main.svelte
new file mode 100644
index 0000000000..2dbd669a78
--- /dev/null
+++ b/test/server-side-rendering/samples/component-yield/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let data = 'Hello';
+</script>
+
+<div>
+	<Widget>{data}</Widget>
+</div>
diff --git a/test/server-side-rendering/samples/component/Widget.svelte b/test/server-side-rendering/samples/component/Widget.svelte
new file mode 100644
index 0000000000..460a2a1c01
--- /dev/null
+++ b/test/server-side-rendering/samples/component/Widget.svelte
@@ -0,0 +1 @@
+<p>i am a widget</p>
diff --git a/test/server-side-rendering/samples/component/_expected.html b/test/server-side-rendering/samples/component/_expected.html
new file mode 100644
index 0000000000..3551c5971e
--- /dev/null
+++ b/test/server-side-rendering/samples/component/_expected.html
@@ -0,0 +1 @@
+<div><p>i am a widget</p></div>
diff --git a/test/server-side-rendering/samples/component/main.svelte b/test/server-side-rendering/samples/component/main.svelte
new file mode 100644
index 0000000000..ac0b429163
--- /dev/null
+++ b/test/server-side-rendering/samples/component/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<div>
+	<Widget/>
+</div>
diff --git a/test/server-side-rendering/samples/computed/_expected.html b/test/server-side-rendering/samples/computed/_expected.html
new file mode 100644
index 0000000000..0219d548a6
--- /dev/null
+++ b/test/server-side-rendering/samples/computed/_expected.html
@@ -0,0 +1,2 @@
+<p>1 + 2 = 3</p>
+<p>3 * 3 = 9</p>
diff --git a/test/server-side-rendering/samples/computed/data.json b/test/server-side-rendering/samples/computed/data.json
new file mode 100644
index 0000000000..27d5db50b5
--- /dev/null
+++ b/test/server-side-rendering/samples/computed/data.json
@@ -0,0 +1,4 @@
+{
+	"a": 1,
+	"b": 2
+}
diff --git a/test/server-side-rendering/samples/computed/main.svelte b/test/server-side-rendering/samples/computed/main.svelte
new file mode 100644
index 0000000000..4143af2e0a
--- /dev/null
+++ b/test/server-side-rendering/samples/computed/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let a;
+	export let b;
+
+	function c() {
+		return a + b;
+	}
+
+	function cSquared() {
+		return c() * c();
+	}
+</script>
+
+<p>{a} + {b} = {c()}</p>
+<p>{c()} * {c()} = {cSquared()}</p>
diff --git a/test/server-side-rendering/samples/constructor-prefer-passed-context/ChildComponent.svelte b/test/server-side-rendering/samples/constructor-prefer-passed-context/ChildComponent.svelte
new file mode 100644
index 0000000000..af77418a1f
--- /dev/null
+++ b/test/server-side-rendering/samples/constructor-prefer-passed-context/ChildComponent.svelte
@@ -0,0 +1,6 @@
+<script>
+	import { getContext } from 'svelte';
+	const value = getContext('foo');
+</script>
+
+<div>Value in child component: {value}</div>
diff --git a/test/server-side-rendering/samples/constructor-prefer-passed-context/_expected.html b/test/server-side-rendering/samples/constructor-prefer-passed-context/_expected.html
new file mode 100644
index 0000000000..d9a67c64e9
--- /dev/null
+++ b/test/server-side-rendering/samples/constructor-prefer-passed-context/_expected.html
@@ -0,0 +1 @@
+<div><div>Value in child component: undefined</div></div>
diff --git a/test/server-side-rendering/samples/constructor-prefer-passed-context/main.svelte b/test/server-side-rendering/samples/constructor-prefer-passed-context/main.svelte
new file mode 100644
index 0000000000..eaf89dd813
--- /dev/null
+++ b/test/server-side-rendering/samples/constructor-prefer-passed-context/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { setContext } from 'svelte';
+	import ChildComponent from './ChildComponent.svelte';
+
+	setContext('foo', true);
+
+	const content = ChildComponent.render({}, { context: new Map() }).html;
+</script>
+
+<div>{@html content}</div>
diff --git a/test/server-side-rendering/samples/default-data-override/_expected.html b/test/server-side-rendering/samples/default-data-override/_expected.html
new file mode 100644
index 0000000000..d1b089dc53
--- /dev/null
+++ b/test/server-side-rendering/samples/default-data-override/_expected.html
@@ -0,0 +1 @@
+<p>2</p>
diff --git a/test/server-side-rendering/samples/default-data-override/data.json b/test/server-side-rendering/samples/default-data-override/data.json
new file mode 100644
index 0000000000..7625ba3b3c
--- /dev/null
+++ b/test/server-side-rendering/samples/default-data-override/data.json
@@ -0,0 +1,3 @@
+{
+	"foo": 2
+}
diff --git a/test/server-side-rendering/samples/default-data-override/main.svelte b/test/server-side-rendering/samples/default-data-override/main.svelte
new file mode 100644
index 0000000000..3e42f1d4e5
--- /dev/null
+++ b/test/server-side-rendering/samples/default-data-override/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo = 1;
+</script>
+
+<p>{foo}</p>
diff --git a/test/server-side-rendering/samples/default-data/_expected.html b/test/server-side-rendering/samples/default-data/_expected.html
new file mode 100644
index 0000000000..c460ecf3a5
--- /dev/null
+++ b/test/server-side-rendering/samples/default-data/_expected.html
@@ -0,0 +1 @@
+<p>1</p>
diff --git a/test/server-side-rendering/samples/default-data/main.svelte b/test/server-side-rendering/samples/default-data/main.svelte
new file mode 100644
index 0000000000..3e42f1d4e5
--- /dev/null
+++ b/test/server-side-rendering/samples/default-data/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo = 1;
+</script>
+
+<p>{foo}</p>
diff --git a/test/server-side-rendering/samples/directives/_expected.html b/test/server-side-rendering/samples/directives/_expected.html
new file mode 100644
index 0000000000..f80f9a3d92
--- /dev/null
+++ b/test/server-side-rendering/samples/directives/_expected.html
@@ -0,0 +1 @@
+<button>click me</button>
diff --git a/test/server-side-rendering/samples/directives/main.svelte b/test/server-side-rendering/samples/directives/main.svelte
new file mode 100644
index 0000000000..d8842a8673
--- /dev/null
+++ b/test/server-side-rendering/samples/directives/main.svelte
@@ -0,0 +1 @@
+<button on:click='{() => foo = "bar"}'>click me</button>
diff --git a/test/server-side-rendering/samples/dynamic-element-string/_expected.html b/test/server-side-rendering/samples/dynamic-element-string/_expected.html
new file mode 100644
index 0000000000..cb98432e14
--- /dev/null
+++ b/test/server-side-rendering/samples/dynamic-element-string/_expected.html
@@ -0,0 +1 @@
+<div>Foo</div>
diff --git a/test/server-side-rendering/samples/dynamic-element-string/main.svelte b/test/server-side-rendering/samples/dynamic-element-string/main.svelte
new file mode 100644
index 0000000000..62d65d5f20
--- /dev/null
+++ b/test/server-side-rendering/samples/dynamic-element-string/main.svelte
@@ -0,0 +1 @@
+<svelte:element this="div">Foo</svelte:element>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/dynamic-element-variable/_expected.html b/test/server-side-rendering/samples/dynamic-element-variable/_expected.html
new file mode 100644
index 0000000000..3ae445f54c
--- /dev/null
+++ b/test/server-side-rendering/samples/dynamic-element-variable/_expected.html
@@ -0,0 +1,2 @@
+<h1>Foo</h1>
+<div>Bar</div>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/dynamic-element-variable/main.svelte b/test/server-side-rendering/samples/dynamic-element-variable/main.svelte
new file mode 100644
index 0000000000..9aaba18bf1
--- /dev/null
+++ b/test/server-side-rendering/samples/dynamic-element-variable/main.svelte
@@ -0,0 +1,7 @@
+<script>
+  let heading = 'h1';
+  let tag = 'div';
+</script>
+
+<svelte:element this={heading}>Foo</svelte:element>
+<svelte:element this={tag}>Bar</svelte:element>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/dynamic-text-escaped/_expected.html b/test/server-side-rendering/samples/dynamic-text-escaped/_expected.html
new file mode 100644
index 0000000000..20f85b71be
--- /dev/null
+++ b/test/server-side-rendering/samples/dynamic-text-escaped/_expected.html
@@ -0,0 +1 @@
+&lt;p&gt;this should be &lt;em&gt;escaped&lt;/em&gt; &amp; so should &#39;this&#39;&lt;/p&gt;
diff --git a/test/server-side-rendering/samples/dynamic-text-escaped/data.json b/test/server-side-rendering/samples/dynamic-text-escaped/data.json
new file mode 100644
index 0000000000..ece574c8bd
--- /dev/null
+++ b/test/server-side-rendering/samples/dynamic-text-escaped/data.json
@@ -0,0 +1,3 @@
+{
+	"foo": "<p>this should be <em>escaped</em> & so should 'this'</p>"
+}
diff --git a/test/server-side-rendering/samples/dynamic-text-escaped/main.svelte b/test/server-side-rendering/samples/dynamic-text-escaped/main.svelte
new file mode 100644
index 0000000000..5acf558f3b
--- /dev/null
+++ b/test/server-side-rendering/samples/dynamic-text-escaped/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+{foo}
diff --git a/test/server-side-rendering/samples/dynamic-text/_expected.html b/test/server-side-rendering/samples/dynamic-text/_expected.html
new file mode 100644
index 0000000000..7658ad2c24
--- /dev/null
+++ b/test/server-side-rendering/samples/dynamic-text/_expected.html
@@ -0,0 +1 @@
+it works
diff --git a/test/server-side-rendering/samples/dynamic-text/data.json b/test/server-side-rendering/samples/dynamic-text/data.json
new file mode 100644
index 0000000000..0f008a185b
--- /dev/null
+++ b/test/server-side-rendering/samples/dynamic-text/data.json
@@ -0,0 +1,3 @@
+{
+	"foo": "it works"
+}
diff --git a/test/server-side-rendering/samples/dynamic-text/main.svelte b/test/server-side-rendering/samples/dynamic-text/main.svelte
new file mode 100644
index 0000000000..5acf558f3b
--- /dev/null
+++ b/test/server-side-rendering/samples/dynamic-text/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+{foo}
diff --git a/test/server-side-rendering/samples/each-block/_expected.html b/test/server-side-rendering/samples/each-block/_expected.html
new file mode 100644
index 0000000000..86df2b82da
--- /dev/null
+++ b/test/server-side-rendering/samples/each-block/_expected.html
@@ -0,0 +1 @@
+<p>1: alligator</p><p>2: beetle</p><p>3: cuckoo</p>
diff --git a/test/server-side-rendering/samples/each-block/data.json b/test/server-side-rendering/samples/each-block/data.json
new file mode 100644
index 0000000000..febcba093c
--- /dev/null
+++ b/test/server-side-rendering/samples/each-block/data.json
@@ -0,0 +1,7 @@
+{
+	"animals": [
+		"alligator",
+		"beetle",
+		"cuckoo"
+	]
+}
diff --git a/test/server-side-rendering/samples/each-block/main.svelte b/test/server-side-rendering/samples/each-block/main.svelte
new file mode 100644
index 0000000000..ef1c5f0838
--- /dev/null
+++ b/test/server-side-rendering/samples/each-block/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let animals;
+</script>
+
+{#each animals as animal, i}
+	<p>{i + 1}: {animal}</p>
+{/each}
diff --git a/test/server-side-rendering/samples/empty-elements-closed/_expected.html b/test/server-side-rendering/samples/empty-elements-closed/_expected.html
new file mode 100644
index 0000000000..a6725f5e12
--- /dev/null
+++ b/test/server-side-rendering/samples/empty-elements-closed/_expected.html
@@ -0,0 +1,2 @@
+<a></a>
+<p></p>
diff --git a/test/server-side-rendering/samples/empty-elements-closed/main.svelte b/test/server-side-rendering/samples/empty-elements-closed/main.svelte
new file mode 100644
index 0000000000..a6725f5e12
--- /dev/null
+++ b/test/server-side-rendering/samples/empty-elements-closed/main.svelte
@@ -0,0 +1,2 @@
+<a></a>
+<p></p>
diff --git a/test/server-side-rendering/samples/entities/_expected.html b/test/server-side-rendering/samples/entities/_expected.html
new file mode 100644
index 0000000000..852764fc3f
--- /dev/null
+++ b/test/server-side-rendering/samples/entities/_expected.html
@@ -0,0 +1 @@
+it's working
diff --git a/test/server-side-rendering/samples/entities/data.json b/test/server-side-rendering/samples/entities/data.json
new file mode 100644
index 0000000000..fb52b739cf
--- /dev/null
+++ b/test/server-side-rendering/samples/entities/data.json
@@ -0,0 +1,3 @@
+{
+	"foo": "it's working"
+}
diff --git a/test/server-side-rendering/samples/entities/main.svelte b/test/server-side-rendering/samples/entities/main.svelte
new file mode 100644
index 0000000000..5acf558f3b
--- /dev/null
+++ b/test/server-side-rendering/samples/entities/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+{foo}
diff --git a/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_config.js b/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_config.js
new file mode 100644
index 0000000000..ae9b250f86
--- /dev/null
+++ b/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_config.js
@@ -0,0 +1,5 @@
+export default {
+	compileOptions: {
+		hydratable: true
+	}
+};
diff --git a/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected-head.html b/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected-head.html
new file mode 100644
index 0000000000..107753cdd0
--- /dev/null
+++ b/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected-head.html
@@ -0,0 +1,4 @@
+<title>Some Title</title>
+<link rel="canonical" href="/" data-svelte="svelte-1s8aodm">
+<meta name="description" content="some description" data-svelte="svelte-1s8aodm">
+<meta name="keywords" content="some keywords" data-svelte="svelte-1s8aodm">
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected.html b/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected.html
new file mode 100644
index 0000000000..a469e618fa
--- /dev/null
+++ b/test/server-side-rendering/samples/head-meta-hydrate-duplicate/_expected.html
@@ -0,0 +1,3 @@
+
+
+<div>Just a dummy page.</div>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/head-meta-hydrate-duplicate/main.svelte b/test/server-side-rendering/samples/head-meta-hydrate-duplicate/main.svelte
new file mode 100644
index 0000000000..1a8b125dd2
--- /dev/null
+++ b/test/server-side-rendering/samples/head-meta-hydrate-duplicate/main.svelte
@@ -0,0 +1,8 @@
+<svelte:head>
+  <title>Some Title</title>
+  <link rel="canonical" href="/">
+  <meta name="description" content="some description">
+  <meta name="keywords" content="some keywords">
+</svelte:head>
+
+<div>Just a dummy page.</div>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/head-multiple-title/A.svelte b/test/server-side-rendering/samples/head-multiple-title/A.svelte
new file mode 100644
index 0000000000..b139b4ff77
--- /dev/null
+++ b/test/server-side-rendering/samples/head-multiple-title/A.svelte
@@ -0,0 +1,3 @@
+<svelte:head>
+	<title>A</title>
+</svelte:head>
diff --git a/test/server-side-rendering/samples/head-multiple-title/B.svelte b/test/server-side-rendering/samples/head-multiple-title/B.svelte
new file mode 100644
index 0000000000..4a29ecb04c
--- /dev/null
+++ b/test/server-side-rendering/samples/head-multiple-title/B.svelte
@@ -0,0 +1,3 @@
+<svelte:head>
+	<title>B</title>
+</svelte:head>
diff --git a/test/server-side-rendering/samples/head-multiple-title/_expected-head.html b/test/server-side-rendering/samples/head-multiple-title/_expected-head.html
new file mode 100644
index 0000000000..af5c5feba4
--- /dev/null
+++ b/test/server-side-rendering/samples/head-multiple-title/_expected-head.html
@@ -0,0 +1 @@
+<title>B</title>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/head-multiple-title/_expected.html b/test/server-side-rendering/samples/head-multiple-title/_expected.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/test/server-side-rendering/samples/head-multiple-title/data.json b/test/server-side-rendering/samples/head-multiple-title/data.json
new file mode 100644
index 0000000000..eab238e816
--- /dev/null
+++ b/test/server-side-rendering/samples/head-multiple-title/data.json
@@ -0,0 +1,3 @@
+{
+	"adjective": "custom"
+}
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/head-multiple-title/main.svelte b/test/server-side-rendering/samples/head-multiple-title/main.svelte
new file mode 100644
index 0000000000..fb9a70b923
--- /dev/null
+++ b/test/server-side-rendering/samples/head-multiple-title/main.svelte
@@ -0,0 +1,10 @@
+<script>
+	import A from './A.svelte';
+	import B from './B.svelte';
+</script>
+
+<svelte:head>
+	<title>Main</title>
+</svelte:head>
+<A />
+<B />
diff --git a/test/server-side-rendering/samples/head-title/_expected-head.html b/test/server-side-rendering/samples/head-title/_expected-head.html
new file mode 100644
index 0000000000..7d696352f9
--- /dev/null
+++ b/test/server-side-rendering/samples/head-title/_expected-head.html
@@ -0,0 +1 @@
+<title>a custom title</title>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/head-title/_expected.html b/test/server-side-rendering/samples/head-title/_expected.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/test/server-side-rendering/samples/head-title/data.json b/test/server-side-rendering/samples/head-title/data.json
new file mode 100644
index 0000000000..eab238e816
--- /dev/null
+++ b/test/server-side-rendering/samples/head-title/data.json
@@ -0,0 +1,3 @@
+{
+	"adjective": "custom"
+}
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/head-title/main.svelte b/test/server-side-rendering/samples/head-title/main.svelte
new file mode 100644
index 0000000000..a5ea171406
--- /dev/null
+++ b/test/server-side-rendering/samples/head-title/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let adjective;
+</script>
+
+<svelte:head>
+	<title>a {adjective} title</title>
+</svelte:head>
diff --git a/test/server-side-rendering/samples/helpers/_expected.html b/test/server-side-rendering/samples/helpers/_expected.html
new file mode 100644
index 0000000000..ca54385e2b
--- /dev/null
+++ b/test/server-side-rendering/samples/helpers/_expected.html
@@ -0,0 +1 @@
+<p>3</p>
diff --git a/test/server-side-rendering/samples/helpers/main.svelte b/test/server-side-rendering/samples/helpers/main.svelte
new file mode 100644
index 0000000000..6001057908
--- /dev/null
+++ b/test/server-side-rendering/samples/helpers/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo = 1;
+
+	const thrice = num => 3 * num;
+</script>
+
+<p>{thrice(foo)}</p>
diff --git a/test/server-side-rendering/samples/if-block-false/_expected.html b/test/server-side-rendering/samples/if-block-false/_expected.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/test/server-side-rendering/samples/if-block-false/data.json b/test/server-side-rendering/samples/if-block-false/data.json
new file mode 100644
index 0000000000..5b42b1ce4f
--- /dev/null
+++ b/test/server-side-rendering/samples/if-block-false/data.json
@@ -0,0 +1,3 @@
+{
+	"foo": false
+}
diff --git a/test/server-side-rendering/samples/if-block-false/main.svelte b/test/server-side-rendering/samples/if-block-false/main.svelte
new file mode 100644
index 0000000000..45b54f74da
--- /dev/null
+++ b/test/server-side-rendering/samples/if-block-false/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo;
+</script>
+
+{#if foo}
+	<p>foo is true</p>
+{/if}
diff --git a/test/server-side-rendering/samples/if-block-true/_expected.html b/test/server-side-rendering/samples/if-block-true/_expected.html
new file mode 100644
index 0000000000..b6f3d8a330
--- /dev/null
+++ b/test/server-side-rendering/samples/if-block-true/_expected.html
@@ -0,0 +1 @@
+<p>foo is true</p>
diff --git a/test/server-side-rendering/samples/if-block-true/data.json b/test/server-side-rendering/samples/if-block-true/data.json
new file mode 100644
index 0000000000..79cc1f44f6
--- /dev/null
+++ b/test/server-side-rendering/samples/if-block-true/data.json
@@ -0,0 +1,3 @@
+{
+	"foo": true
+}
diff --git a/test/server-side-rendering/samples/if-block-true/main.svelte b/test/server-side-rendering/samples/if-block-true/main.svelte
new file mode 100644
index 0000000000..45b54f74da
--- /dev/null
+++ b/test/server-side-rendering/samples/if-block-true/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo;
+</script>
+
+{#if foo}
+	<p>foo is true</p>
+{/if}
diff --git a/test/server-side-rendering/samples/import-non-component/_expected.html b/test/server-side-rendering/samples/import-non-component/_expected.html
new file mode 100644
index 0000000000..7d15db249e
--- /dev/null
+++ b/test/server-side-rendering/samples/import-non-component/_expected.html
@@ -0,0 +1,2 @@
+<div>i got 99 problems</div>
+<div>the answer is 42</div>
diff --git a/test/server-side-rendering/samples/import-non-component/answer.js b/test/server-side-rendering/samples/import-non-component/answer.js
new file mode 100644
index 0000000000..7a4e8a723a
--- /dev/null
+++ b/test/server-side-rendering/samples/import-non-component/answer.js
@@ -0,0 +1 @@
+export default 42;
diff --git a/test/server-side-rendering/samples/import-non-component/main.svelte b/test/server-side-rendering/samples/import-non-component/main.svelte
new file mode 100644
index 0000000000..1a2814bbd5
--- /dev/null
+++ b/test/server-side-rendering/samples/import-non-component/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import answer from './answer.js';
+	import problems from './problems.js';
+</script>
+
+<div>i got {problems} problems</div>
+<div>the answer is {answer}</div>
diff --git a/test/server-side-rendering/samples/import-non-component/problems.js b/test/server-side-rendering/samples/import-non-component/problems.js
new file mode 100644
index 0000000000..4a45ec6222
--- /dev/null
+++ b/test/server-side-rendering/samples/import-non-component/problems.js
@@ -0,0 +1 @@
+export default 99;
diff --git a/test/server-side-rendering/samples/pre-tag/.editorconfig b/test/server-side-rendering/samples/pre-tag/.editorconfig
new file mode 100644
index 0000000000..d53d6a3faf
--- /dev/null
+++ b/test/server-side-rendering/samples/pre-tag/.editorconfig
@@ -0,0 +1,2 @@
+[{main.svelte,_expected.html}]
+trim_trailing_whitespace = unset
diff --git a/test/server-side-rendering/samples/pre-tag/_config.js b/test/server-side-rendering/samples/pre-tag/_config.js
new file mode 100644
index 0000000000..39b31839f5
--- /dev/null
+++ b/test/server-side-rendering/samples/pre-tag/_config.js
@@ -0,0 +1,3 @@
+export default {
+	withoutNormalizeHtml: true
+};
diff --git a/test/server-side-rendering/samples/pre-tag/_expected.html b/test/server-side-rendering/samples/pre-tag/_expected.html
new file mode 100644
index 0000000000..5459102786
--- /dev/null
+++ b/test/server-side-rendering/samples/pre-tag/_expected.html
@@ -0,0 +1,39 @@
+<pre>  A
+  B
+  <span>
+    C
+    D
+  </span>
+  E
+  F
+</pre>
+
+<div>A
+  B
+  <span>C
+    D
+  </span>
+  E
+  F
+</div>
+
+<div><pre>    A
+    B
+    <span>
+      C
+      D
+    </span>
+    E
+    F
+  </pre></div>
+
+<div id="pre-with-leading-newline"><pre>leading newline</pre>
+  <pre>  leading newline and spaces</pre>
+  <pre>
+
+leading newlines</pre></div>
+
+<div id="pre-without-leading-newline"><pre>without spaces</pre>
+  <pre>  with spaces  </pre>
+  <pre> 
+newline after leading space</pre></div>
diff --git a/test/server-side-rendering/samples/pre-tag/main.svelte b/test/server-side-rendering/samples/pre-tag/main.svelte
new file mode 100644
index 0000000000..be3bf9e7ff
--- /dev/null
+++ b/test/server-side-rendering/samples/pre-tag/main.svelte
@@ -0,0 +1,51 @@
+<pre>
+  A
+  B
+  <span>
+    C
+    D
+  </span>
+  E
+  F
+</pre>
+
+<div>
+  A
+  B
+  <span>
+    C
+    D
+  </span>
+  E
+  F
+</div>
+
+<div>
+  <pre>
+    A
+    B
+    <span>
+      C
+      D
+    </span>
+    E
+    F
+  </pre>
+</div>
+
+<div id="pre-with-leading-newline">
+  <pre>
+leading newline</pre>
+  <pre>
+  leading newline and spaces</pre>
+  <pre>
+
+leading newlines</pre>
+</div>
+
+<div id="pre-without-leading-newline">
+  <pre>without spaces</pre>
+  <pre>  with spaces  </pre>
+  <pre> 
+newline after leading space</pre>
+</div>
diff --git a/test/server-side-rendering/samples/preserve-whitespaces/_config.js b/test/server-side-rendering/samples/preserve-whitespaces/_config.js
new file mode 100644
index 0000000000..41eb78446c
--- /dev/null
+++ b/test/server-side-rendering/samples/preserve-whitespaces/_config.js
@@ -0,0 +1,6 @@
+export default {
+	withoutNormalizeHtml: true,
+	compileOptions: {
+		preserveWhitespace: true
+	}
+};
diff --git a/test/server-side-rendering/samples/preserve-whitespaces/_expected.html b/test/server-side-rendering/samples/preserve-whitespaces/_expected.html
new file mode 100644
index 0000000000..c712354f6a
--- /dev/null
+++ b/test/server-side-rendering/samples/preserve-whitespaces/_expected.html
@@ -0,0 +1,32 @@
+<pre>  A
+  B
+  <span>
+    C
+    D
+  </span>
+  E
+  F
+</pre>
+
+<div>
+  A
+  B
+  <span>
+    C
+    D
+  </span>
+  E
+  F
+</div>
+
+<div>
+  <pre>    A
+    B
+    <span>
+      C
+      D
+    </span>
+    E
+    F
+  </pre>
+</div>
diff --git a/test/server-side-rendering/samples/preserve-whitespaces/main.svelte b/test/server-side-rendering/samples/preserve-whitespaces/main.svelte
new file mode 100644
index 0000000000..fb240817f7
--- /dev/null
+++ b/test/server-side-rendering/samples/preserve-whitespaces/main.svelte
@@ -0,0 +1,34 @@
+<pre>
+  A
+  B
+  <span>
+    C
+    D
+  </span>
+  E
+  F
+</pre>
+
+<div>
+  A
+  B
+  <span>
+    C
+    D
+  </span>
+  E
+  F
+</div>
+
+<div>
+  <pre>
+    A
+    B
+    <span>
+      C
+      D
+    </span>
+    E
+    F
+  </pre>
+</div>
diff --git a/test/server-side-rendering/samples/raw-mustaches/_expected.html b/test/server-side-rendering/samples/raw-mustaches/_expected.html
new file mode 100644
index 0000000000..d4c7678446
--- /dev/null
+++ b/test/server-side-rendering/samples/raw-mustaches/_expected.html
@@ -0,0 +1 @@
+before<span><em>raw html!!!\o/</span></em>after
diff --git a/test/server-side-rendering/samples/raw-mustaches/data.json b/test/server-side-rendering/samples/raw-mustaches/data.json
new file mode 100644
index 0000000000..450f2a60dc
--- /dev/null
+++ b/test/server-side-rendering/samples/raw-mustaches/data.json
@@ -0,0 +1,3 @@
+{
+	"raw": "<span><em>raw html!!!\\o/</span></em>"
+}
diff --git a/test/server-side-rendering/samples/raw-mustaches/main.svelte b/test/server-side-rendering/samples/raw-mustaches/main.svelte
new file mode 100644
index 0000000000..e6b2ed57df
--- /dev/null
+++ b/test/server-side-rendering/samples/raw-mustaches/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let raw;
+</script>
+
+before{@html raw}after
diff --git a/test/server-side-rendering/samples/sanitize-name/[foo].svelte b/test/server-side-rendering/samples/sanitize-name/[foo].svelte
new file mode 100644
index 0000000000..5ed8b34a53
--- /dev/null
+++ b/test/server-side-rendering/samples/sanitize-name/[foo].svelte
@@ -0,0 +1 @@
+<p>foo!</p>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/sanitize-name/_expected.html b/test/server-side-rendering/samples/sanitize-name/_expected.html
new file mode 100644
index 0000000000..5ed8b34a53
--- /dev/null
+++ b/test/server-side-rendering/samples/sanitize-name/_expected.html
@@ -0,0 +1 @@
+<p>foo!</p>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/sanitize-name/main.svelte b/test/server-side-rendering/samples/sanitize-name/main.svelte
new file mode 100644
index 0000000000..1438843da9
--- /dev/null
+++ b/test/server-side-rendering/samples/sanitize-name/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Foo from './[foo].svelte';
+</script>
+
+<Foo/>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/spread-attributes-boolean/_expected.html b/test/server-side-rendering/samples/spread-attributes-boolean/_expected.html
new file mode 100644
index 0000000000..06048d3efa
--- /dev/null
+++ b/test/server-side-rendering/samples/spread-attributes-boolean/_expected.html
@@ -0,0 +1,2 @@
+<input readonly>
+<input>
diff --git a/test/server-side-rendering/samples/spread-attributes-boolean/main.svelte b/test/server-side-rendering/samples/spread-attributes-boolean/main.svelte
new file mode 100644
index 0000000000..3d865c0082
--- /dev/null
+++ b/test/server-side-rendering/samples/spread-attributes-boolean/main.svelte
@@ -0,0 +1,2 @@
+<input {...{ readonly: 1 }}>
+<input {...{ readonly: 0 }}>
diff --git a/test/server-side-rendering/samples/spread-attributes-white-space/_expected.html b/test/server-side-rendering/samples/spread-attributes-white-space/_expected.html
new file mode 100644
index 0000000000..24473a7b12
--- /dev/null
+++ b/test/server-side-rendering/samples/spread-attributes-white-space/_expected.html
@@ -0,0 +1,5 @@
+<input value="
+	bar
+">
+
+<input class="white space ">
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/spread-attributes-white-space/main.svelte b/test/server-side-rendering/samples/spread-attributes-white-space/main.svelte
new file mode 100644
index 0000000000..6919d9ea54
--- /dev/null
+++ b/test/server-side-rendering/samples/spread-attributes-white-space/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	let props = {
+		value: '\n\tbar\n',
+	};
+</script>
+
+<input {...props} />
+
+<input class="
+	white
+	space
+" {...({})}>
diff --git a/test/server-side-rendering/samples/spread-attributes/_expected.html b/test/server-side-rendering/samples/spread-attributes/_expected.html
new file mode 100644
index 0000000000..b78eafb8f4
--- /dev/null
+++ b/test/server-side-rendering/samples/spread-attributes/_expected.html
@@ -0,0 +1 @@
+<input value="bar" form="qux" list="quu" />
diff --git a/test/server-side-rendering/samples/spread-attributes/main.svelte b/test/server-side-rendering/samples/spread-attributes/main.svelte
new file mode 100644
index 0000000000..fc8c849396
--- /dev/null
+++ b/test/server-side-rendering/samples/spread-attributes/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let props = {
+		value: 'bar',
+		form: 'qux',
+		list: 'quu',
+	};
+</script>
+
+<input {...props} />
diff --git a/test/server-side-rendering/samples/static-div/_expected.html b/test/server-side-rendering/samples/static-div/_expected.html
new file mode 100644
index 0000000000..7c89b545c5
--- /dev/null
+++ b/test/server-side-rendering/samples/static-div/_expected.html
@@ -0,0 +1 @@
+<div></div>
diff --git a/test/server-side-rendering/samples/static-div/main.svelte b/test/server-side-rendering/samples/static-div/main.svelte
new file mode 100644
index 0000000000..7c89b545c5
--- /dev/null
+++ b/test/server-side-rendering/samples/static-div/main.svelte
@@ -0,0 +1 @@
+<div></div>
diff --git a/test/server-side-rendering/samples/static-text/_expected.html b/test/server-side-rendering/samples/static-text/_expected.html
new file mode 100644
index 0000000000..7b57bd29ea
--- /dev/null
+++ b/test/server-side-rendering/samples/static-text/_expected.html
@@ -0,0 +1 @@
+some text
diff --git a/test/server-side-rendering/samples/static-text/main.svelte b/test/server-side-rendering/samples/static-text/main.svelte
new file mode 100644
index 0000000000..7b57bd29ea
--- /dev/null
+++ b/test/server-side-rendering/samples/static-text/main.svelte
@@ -0,0 +1 @@
+some text
diff --git a/test/server-side-rendering/samples/styles-nested/One.svelte b/test/server-side-rendering/samples/styles-nested/One.svelte
new file mode 100644
index 0000000000..94b44675c8
--- /dev/null
+++ b/test/server-side-rendering/samples/styles-nested/One.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Two from './Two.svelte';
+
+	export let message;
+</script>
+
+<div>green: {message}</div>
+
+<!-- Two styles should *not* be included -->
+<!-- <Two {message}/> -->
+
+<style>
+	div {
+		color: green;
+	}
+</style>
diff --git a/test/server-side-rendering/samples/styles-nested/Two.svelte b/test/server-side-rendering/samples/styles-nested/Two.svelte
new file mode 100644
index 0000000000..47bc709e2a
--- /dev/null
+++ b/test/server-side-rendering/samples/styles-nested/Two.svelte
@@ -0,0 +1,7 @@
+<div>blue: {message}</div>
+
+<style>
+	div {
+		color: blue;
+	}
+</style>
diff --git a/test/server-side-rendering/samples/styles-nested/_expected.css b/test/server-side-rendering/samples/styles-nested/_expected.css
new file mode 100644
index 0000000000..775ae8a91c
--- /dev/null
+++ b/test/server-side-rendering/samples/styles-nested/_expected.css
@@ -0,0 +1,2 @@
+div.svelte-bzh57p{color:red}
+div.svelte-4yw8vx{color:green}
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/styles-nested/_expected.html b/test/server-side-rendering/samples/styles-nested/_expected.html
new file mode 100644
index 0000000000..2227662e25
--- /dev/null
+++ b/test/server-side-rendering/samples/styles-nested/_expected.html
@@ -0,0 +1,8 @@
+<div class="svelte-bzh57p">red</div>
+<div class="svelte-4yw8vx">green: foo</div>
+
+
+
+<div class="svelte-4yw8vx">green: bar</div>
+
+
diff --git a/test/server-side-rendering/samples/styles-nested/main.svelte b/test/server-side-rendering/samples/styles-nested/main.svelte
new file mode 100644
index 0000000000..d6f1d594e3
--- /dev/null
+++ b/test/server-side-rendering/samples/styles-nested/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import One from './One.svelte';
+</script>
+
+<div>red</div>
+<One message='foo'/>
+<One message='bar'/>
+
+<style>
+	div {
+		color: red;
+	}
+</style>
diff --git a/test/server-side-rendering/samples/styles/_expected.css b/test/server-side-rendering/samples/styles/_expected.css
new file mode 100644
index 0000000000..2025c64f84
--- /dev/null
+++ b/test/server-side-rendering/samples/styles/_expected.css
@@ -0,0 +1 @@
+div.svelte-bzh57p{color:red}
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/styles/_expected.html b/test/server-side-rendering/samples/styles/_expected.html
new file mode 100644
index 0000000000..4c164bd844
--- /dev/null
+++ b/test/server-side-rendering/samples/styles/_expected.html
@@ -0,0 +1 @@
+<div class="svelte-bzh57p">red</div>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/styles/main.svelte b/test/server-side-rendering/samples/styles/main.svelte
new file mode 100644
index 0000000000..bfe5a23214
--- /dev/null
+++ b/test/server-side-rendering/samples/styles/main.svelte
@@ -0,0 +1,7 @@
+<div>red</div>
+
+<style>
+	div {
+		color: red;
+	}
+</style>
diff --git a/test/server-side-rendering/samples/text-area-bind/_expected.html b/test/server-side-rendering/samples/text-area-bind/_expected.html
new file mode 100644
index 0000000000..c3c8441f56
--- /dev/null
+++ b/test/server-side-rendering/samples/text-area-bind/_expected.html
@@ -0,0 +1 @@
+<textarea>hello</textarea>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/text-area-bind/main.svelte b/test/server-side-rendering/samples/text-area-bind/main.svelte
new file mode 100644
index 0000000000..7126e09375
--- /dev/null
+++ b/test/server-side-rendering/samples/text-area-bind/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	  let value = 'hello';
+</script>
+
+<textarea bind:value></textarea>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/textarea-children/_expected.html b/test/server-side-rendering/samples/textarea-children/_expected.html
new file mode 100644
index 0000000000..792567e4ca
--- /dev/null
+++ b/test/server-side-rendering/samples/textarea-children/_expected.html
@@ -0,0 +1,3 @@
+<textarea>
+	<p>not actually an element. 42</p>
+</textarea>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/textarea-children/main.svelte b/test/server-side-rendering/samples/textarea-children/main.svelte
new file mode 100644
index 0000000000..5f37f40d5e
--- /dev/null
+++ b/test/server-side-rendering/samples/textarea-children/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let foo = 42;
+</script>
+
+<textarea>
+	<p>not actually an element. {foo}</p>
+</textarea>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/textarea-content/.editorconfig b/test/server-side-rendering/samples/textarea-content/.editorconfig
new file mode 100644
index 0000000000..d53d6a3faf
--- /dev/null
+++ b/test/server-side-rendering/samples/textarea-content/.editorconfig
@@ -0,0 +1,2 @@
+[{main.svelte,_expected.html}]
+trim_trailing_whitespace = unset
diff --git a/test/server-side-rendering/samples/textarea-content/_config.js b/test/server-side-rendering/samples/textarea-content/_config.js
new file mode 100644
index 0000000000..39b31839f5
--- /dev/null
+++ b/test/server-side-rendering/samples/textarea-content/_config.js
@@ -0,0 +1,3 @@
+export default {
+	withoutNormalizeHtml: true
+};
diff --git a/test/server-side-rendering/samples/textarea-content/_expected.html b/test/server-side-rendering/samples/textarea-content/_expected.html
new file mode 100644
index 0000000000..5ca4604bb6
--- /dev/null
+++ b/test/server-side-rendering/samples/textarea-content/_expected.html
@@ -0,0 +1,28 @@
+<textarea id="textarea">  A
+  B
+</textarea>
+
+<div id="div-with-textarea"><textarea>    A
+    B
+  </textarea></div>
+
+<div id="textarea-with-leading-newline"><textarea>leading newline</textarea>
+  <textarea>  leading newline and spaces</textarea>
+  <textarea>
+
+leading newlines</textarea></div>
+
+<div id="textarea-without-leading-newline"><textarea>without spaces</textarea>
+  <textarea>  with spaces  </textarea>
+  <textarea> 
+newline after leading space</textarea></div>
+
+<textarea id="textarea-with-multiple-leading-newlines">
+
+
+multiple leading newlines</textarea>
+
+<div id="div-with-textarea-with-multiple-leading-newlines"><textarea>
+
+
+multiple leading newlines</textarea></div>
diff --git a/test/server-side-rendering/samples/textarea-content/main.svelte b/test/server-side-rendering/samples/textarea-content/main.svelte
new file mode 100644
index 0000000000..e2e052ca7a
--- /dev/null
+++ b/test/server-side-rendering/samples/textarea-content/main.svelte
@@ -0,0 +1,40 @@
+<textarea id="textarea">
+  A
+  B
+</textarea>
+
+<div id="div-with-textarea">
+  <textarea>
+    A
+    B
+  </textarea>
+</div>
+
+<div id="textarea-with-leading-newline">
+  <textarea>
+leading newline</textarea>
+  <textarea>
+  leading newline and spaces</textarea>
+  <textarea>
+
+leading newlines</textarea>
+</div>
+
+<div id="textarea-without-leading-newline">
+  <textarea>without spaces</textarea>
+  <textarea>  with spaces  </textarea>
+  <textarea> 
+newline after leading space</textarea>
+</div>
+
+<textarea id="textarea-with-multiple-leading-newlines">
+
+
+multiple leading newlines</textarea>
+
+<div id="div-with-textarea-with-multiple-leading-newlines">
+  <textarea>
+
+
+multiple leading newlines</textarea>
+</div>
diff --git a/test/server-side-rendering/samples/textarea-value/_expected.html b/test/server-side-rendering/samples/textarea-value/_expected.html
new file mode 100644
index 0000000000..cd39aabde5
--- /dev/null
+++ b/test/server-side-rendering/samples/textarea-value/_expected.html
@@ -0,0 +1 @@
+<textarea>42</textarea>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/textarea-value/main.svelte b/test/server-side-rendering/samples/textarea-value/main.svelte
new file mode 100644
index 0000000000..28f7f372be
--- /dev/null
+++ b/test/server-side-rendering/samples/textarea-value/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo = 42;
+</script>
+
+<textarea value='{foo}'/>
\ No newline at end of file
diff --git a/test/server-side-rendering/samples/triple/_expected.html b/test/server-side-rendering/samples/triple/_expected.html
new file mode 100644
index 0000000000..138c8a30cd
--- /dev/null
+++ b/test/server-side-rendering/samples/triple/_expected.html
@@ -0,0 +1 @@
+<div><p>html</p></div>
diff --git a/test/server-side-rendering/samples/triple/main.svelte b/test/server-side-rendering/samples/triple/main.svelte
new file mode 100644
index 0000000000..35d49f423b
--- /dev/null
+++ b/test/server-side-rendering/samples/triple/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let triple = '<p>html</p>';
+</script>
+
+<div>{@html triple}</div>
diff --git a/test/setup.js b/test/setup.js
new file mode 100644
index 0000000000..74250c10eb
--- /dev/null
+++ b/test/setup.js
@@ -0,0 +1,38 @@
+const fs = require('fs');
+
+require('source-map-support').install();
+
+process.env.TEST = true;
+
+require.extensions['.js'] = function(module, filename) {
+	const exports = [];
+
+	let code = fs.readFileSync(filename, 'utf-8')
+		.replace(/^import \* as (\w+) from ['"]([^'"]+)['"];?/gm, 'var $1 = require("$2");')
+		.replace(/^import (\w+) from ['"]([^'"]+)['"];?/gm, 'var {default: $1} = require("$2");')
+		.replace(/^import {([^}]+)} from ['"](.+)['"];?/gm, 'var {$1} = require("$2");')
+		.replace(/^export default /gm, 'exports.default = ')
+		.replace(/^export (const|let|var|class|function|async\s+function) (\w+)/gm, (match, type, name) => {
+			exports.push(name);
+			return `${type} ${name}`;
+		})
+		.replace(/^export \{([^}]+)\}(?: from ['"]([^'"]+)['"];?)?/gm, (match, names, source) => {
+			names.split(',').filter(Boolean).forEach(name => {
+				exports.push(name);
+			});
+
+			return source ? `const { ${names} } = require("${source}");` : '';
+		})
+		.replace(/^export function (\w+)/gm, 'exports.$1 = function $1');
+
+	exports.forEach(name => {
+		code += `\nexports.${name} = ${name};`;
+	});
+
+	try {
+		return module._compile(code, filename);
+	} catch (err) {
+		console.log(code); // eslint-disable-line no-console
+		throw err;
+	}
+};
diff --git a/test/sourcemaps/helpers.ts b/test/sourcemaps/helpers.ts
new file mode 100644
index 0000000000..f546566a95
--- /dev/null
+++ b/test/sourcemaps/helpers.ts
@@ -0,0 +1,127 @@
+import * as assert from 'assert';
+import { getLocator } from 'locate-character';
+import MagicString, { Bundle } from 'magic-string';
+
+type AssertMappedParameters = {
+	code: string;
+	filename?: string;
+	input: string | ReturnType<typeof getLocator>;
+	input_code?: string;
+	preprocessed: any;
+};
+
+export function assert_mapped(
+	{ code, filename, input, input_code, preprocessed }: AssertMappedParameters
+) {
+	const locate_input = typeof input === 'function' ? input : getLocator(input);
+	if (filename === undefined) filename = 'input.svelte';
+	if (input_code === undefined) input_code = code;	
+
+	const source_loc = locate_input(input_code);
+	assert.notEqual(
+		source_loc,
+		undefined,
+		`failed to locate "${input_code}" in "${filename}"`
+	);
+
+	const transformed_loc = preprocessed.locate_1(code);
+	assert.notEqual(
+		transformed_loc,
+		undefined,
+		`failed to locate "${code}" in transformed "${filename}"`
+	);
+
+	assert.deepEqual(
+		preprocessed.mapConsumer.originalPositionFor(transformed_loc),
+		{
+			source: filename,
+			name: null,
+			line: source_loc.line + 1,
+			column: source_loc.column
+		},
+		`incorrect mappings for "${input_code}" in "${filename}"`
+	);
+}
+
+type AssertNotMappedParameters = {
+	code: string;
+	filename?: string;
+	preprocessed: any;
+};
+
+export function assert_not_mapped(
+	{ code, filename, preprocessed }: AssertNotMappedParameters
+) {
+	if (filename === undefined) filename = 'input.svelte';
+
+	const transformed_loc = preprocessed.locate_1(code);
+	assert.notEqual(
+		transformed_loc,
+		undefined,
+		`failed to locate "${code}" in transformed "${filename}"`
+	);
+
+	assert.deepEqual(
+		preprocessed.mapConsumer.originalPositionFor(transformed_loc),
+		{
+			source: null,
+			name: null,
+			line: null,
+			column: null
+		},
+		`incorrect mappings for "${code}" in "${filename}"`
+	);
+}
+
+export function assert_not_located(
+	code: string,
+	locate: ReturnType<typeof getLocator>,
+	filename = 'input.svelte'
+) {
+	assert.equal(
+		locate(code),
+		undefined,
+		`located "${code}" that should be removed from ${filename}`
+	);
+}
+
+export function magic_string_bundle(
+	inputs: Array<{ code: string | MagicString, filename: string }>,
+	filename = 'bundle.js',
+	separator = '\n'
+) {
+	const bundle = new Bundle({ separator });
+	inputs.forEach(({ code, filename }) => {
+		bundle.addSource({
+			filename,
+			content: typeof code === 'string' ? new MagicString(code) : code
+		});
+	});
+	return {
+		code: bundle.toString(),
+		map: bundle.generateMap({
+			source: filename,
+			hires: true,
+			includeContent: false
+		})
+	};
+}
+
+export function magic_string_preprocessor_result(filename: string, src: MagicString) {
+	return {
+		code: src.toString(),
+		map: src.generateMap({
+			source: filename,
+			hires: true,
+			includeContent: false
+		})
+	};
+}
+
+export function magic_string_replace_all(src: MagicString, search: string, replace: string) {
+	let idx = src.original.indexOf(search);
+	if (idx == -1) throw new Error('search not found in src');
+	do {
+		src.overwrite(idx, idx + search.length, replace, { storeName: true });
+	} while ((idx = src.original.indexOf(search, idx + 1)) != -1);
+}
diff --git a/test/sourcemaps/index.ts b/test/sourcemaps/index.ts
new file mode 100644
index 0000000000..fc021cd6a7
--- /dev/null
+++ b/test/sourcemaps/index.ts
@@ -0,0 +1,120 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as assert from 'assert';
+import { loadConfig, svelte } from '../helpers';
+// keep source-map at version 0.7.x
+// https://github.com/mozilla/source-map/issues/400
+import { getLocator } from 'locate-character';
+import { SourceMapConsumer } from 'source-map';
+
+
+describe('sourcemaps', () => {
+	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
+		if (dir[0] === '.') return;
+
+		const config = loadConfig(`${__dirname}/samples/${dir}/_config.js`);
+
+		// add .solo to a sample directory name to only run that test
+		const solo = config.solo || /\.solo/.test(dir);
+		const skip = config.skip || /\.skip/.test(dir);
+
+		if (solo && process.env.CI) {
+			throw new Error('Forgot to remove `solo: true` from test');
+		}
+
+		(solo ? it.only : skip ? it.skip : it)(dir, async () => {
+			const { test } = require(`./samples/${dir}/test.js`);
+			const inputFile = path.resolve(`${__dirname}/samples/${dir}/input.svelte`);
+			const outputName = '_actual';
+			const outputBase = path.resolve(`${__dirname}/samples/${dir}/${outputName}`);
+
+			const inputCode = fs.readFileSync(inputFile, 'utf-8');
+			const input = {
+				code: inputCode,
+				locate: getLocator(inputCode),
+				locate_1: getLocator(inputCode, { offsetLine: 1 })
+			};
+
+			const preprocessed = await svelte.preprocess(
+				input.code,
+				config.preprocess || {},
+				config.options || {
+					filename: 'input.svelte'
+				}
+			);
+
+			const { js, css } = svelte.compile(
+				preprocessed.code, {
+				filename: 'input.svelte',
+				// filenames for sourcemaps
+				sourcemap: preprocessed.map,
+				outputFilename: `${outputName}.js`,
+				cssOutputFilename: `${outputName}.css`,
+				...(config.compile_options || {})
+			});
+
+			js.code = js.code.replace(
+				/generated by Svelte v\d+\.\d+\.\d+/,
+				match => match.replace(/\d/g, 'x')
+			);
+
+			fs.writeFileSync(`${outputBase}.svelte`, preprocessed.code);
+			if (preprocessed.map) {
+				fs.writeFileSync(
+					`${outputBase}.svelte.map`,
+					// TODO encode mappings for output - svelte.preprocess returns decoded mappings
+					JSON.stringify(preprocessed.map, null, 2)
+				);
+			}
+			fs.writeFileSync(
+				`${outputBase}.js`,
+				`${js.code}\n//# sourceMappingURL=${outputName}.js.map`
+			);
+			fs.writeFileSync(
+				`${outputBase}.js.map`,
+				JSON.stringify(js.map, null, 2)
+			);
+			if (css.code) {
+				fs.writeFileSync(
+					`${outputBase}.css`,
+					`${css.code}\n/*# sourceMappingURL=${outputName}.css.map */`
+				);
+				fs.writeFileSync(
+					`${outputBase}.css.map`,
+					JSON.stringify(css.map, null, '  ')
+				);
+			}
+
+			if (js.map) {
+				assert.deepEqual(
+					js.map.sources.slice().sort(),
+					(config.js_map_sources || ['input.svelte']).sort(),
+					'js.map.sources is wrong'
+				);
+			}
+			if (css.map) {
+				assert.deepEqual(
+					css.map.sources.slice().sort(),
+					(config.css_map_sources || ['input.svelte']).sort(),
+					'css.map.sources is wrong'
+				);
+			}
+
+			// use locate_1 with mapConsumer:
+			// lines are one-based, columns are zero-based
+
+			preprocessed.mapConsumer = preprocessed.map && await new SourceMapConsumer(preprocessed.map);
+			preprocessed.locate = getLocator(preprocessed.code);
+			preprocessed.locate_1 = getLocator(preprocessed.code, { offsetLine: 1 });
+
+			js.mapConsumer = js.map && await new SourceMapConsumer(js.map);
+			js.locate = getLocator(js.code);
+			js.locate_1 = getLocator(js.code, { offsetLine: 1 });
+
+			css.mapConsumer = css.map && await new SourceMapConsumer(css.map);
+			css.locate = getLocator(css.code || '');
+			css.locate_1 = getLocator(css.code || '', { offsetLine: 1 });
+			await test({ assert, input, preprocessed, js, css });
+		});
+	});
+});
diff --git a/test/sourcemaps/samples/attached-sourcemap/_config.js b/test/sourcemaps/samples/attached-sourcemap/_config.js
new file mode 100644
index 0000000000..86498caeba
--- /dev/null
+++ b/test/sourcemaps/samples/attached-sourcemap/_config.js
@@ -0,0 +1,44 @@
+import MagicString from 'magic-string';
+
+let indent_size = 4;
+let comment_multi = true;
+function get_processor(tag_name, search, replace) {
+	return {
+		[tag_name]: ({ content, filename }) => {
+			let code = content.slice();
+			const ms = new MagicString(code);
+
+			const idx = ms.original.indexOf(search);
+			if (idx == -1) throw new Error('search not found in src');
+			ms.overwrite(idx, idx + search.length, replace, { storeName: true });
+
+			// change line + column
+			const indent = Array.from({ length: indent_size }).join(' ');
+			ms.prependLeft(idx, '\n' + indent);
+
+			const map_opts = { source: filename, hires: true, includeContent: false };
+			const map = ms.generateMap(map_opts);
+			const attach_line = (tag_name == 'style' || comment_multi)
+				? `\n/*# sourceMappingURL=${map.toUrl()} */`
+				: `\n//# sourceMappingURL=${map.toUrl()}` // only in script
+			;
+			code = ms.toString() + attach_line;
+
+			indent_size += 2;
+			if (tag_name == 'script') comment_multi = !comment_multi;
+			return { code };
+		}
+	};
+}
+
+export default {
+	preprocess: [
+
+		get_processor('script', 'replace_me_script', 'done_replace_script_1'),
+		get_processor('script', 'done_replace_script_1', 'done_replace_script_2'),
+
+		get_processor('style', '.replace_me_style', '.done_replace_style_1'),
+		get_processor('style', '.done_replace_style_1', '.done_replace_style_2')
+
+	]
+};
diff --git a/test/sourcemaps/samples/attached-sourcemap/input.svelte b/test/sourcemaps/samples/attached-sourcemap/input.svelte
new file mode 100644
index 0000000000..21a47a72a9
--- /dev/null
+++ b/test/sourcemaps/samples/attached-sourcemap/input.svelte
@@ -0,0 +1,11 @@
+<style>
+	.replace_me_style {
+		color: red;
+	}
+</style>
+<script>
+	let
+		replace_me_script = 'hello'
+	;
+</script>
+<h1 class="done_replace_style_2">{done_replace_script_2}</h1>
diff --git a/test/sourcemaps/samples/attached-sourcemap/test.js b/test/sourcemaps/samples/attached-sourcemap/test.js
new file mode 100644
index 0000000000..ecb88ab11d
--- /dev/null
+++ b/test/sourcemaps/samples/attached-sourcemap/test.js
@@ -0,0 +1,45 @@
+import * as assert from 'assert';
+
+const get_line_column = obj => ({ line: obj.line, column: obj.column });
+
+export function test({ input, css, js }) {
+
+	let out_obj, loc_output, actual, loc_input, expected;
+
+	out_obj = js;
+	// we need the second occurrence of 'done_replace_script_2' in output.js
+	// the first occurrence is mapped back to markup '{done_replace_script_2}'
+	loc_output = out_obj.locate_1('done_replace_script_2');
+	loc_output = out_obj.locate_1('done_replace_script_2', loc_output.character + 1);
+	actual = out_obj.mapConsumer.originalPositionFor(loc_output);
+	loc_input = input.locate_1('replace_me_script');
+	expected = {
+		source: 'input.svelte',
+		name: 'replace_me_script',
+		...get_line_column(loc_input)
+	};
+	assert.deepEqual(actual, expected);
+
+	out_obj = css;
+	loc_output = out_obj.locate_1('.done_replace_style_2');
+	actual = out_obj.mapConsumer.originalPositionFor(loc_output);
+	loc_input = input.locate_1('.replace_me_style');
+	expected = {
+		source: 'input.svelte',
+		name: '.replace_me_style',
+		...get_line_column(loc_input)
+	};
+	assert.deepEqual(actual, expected);
+
+	assert.equal(
+		js.code.indexOf('\n/*# sourceMappingURL=data:application/json;base64,'),
+		-1,
+		'magic-comment attachments were NOT removed'
+	);
+
+	assert.equal(
+		css.code.indexOf('\n/*# sourceMappingURL=data:application/json;base64,'),
+		-1,
+		'magic-comment attachments were NOT removed'
+	);
+}
diff --git a/test/sourcemaps/samples/basic/input.svelte b/test/sourcemaps/samples/basic/input.svelte
new file mode 100644
index 0000000000..0ac40fc058
--- /dev/null
+++ b/test/sourcemaps/samples/basic/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+{foo.bar.baz}
diff --git a/test/sourcemaps/samples/basic/test.js b/test/sourcemaps/samples/basic/test.js
new file mode 100644
index 0000000000..34c619c128
--- /dev/null
+++ b/test/sourcemaps/samples/basic/test.js
@@ -0,0 +1,34 @@
+export function test({ assert, input, js }) {
+	const expected = input.locate('foo.bar.baz');
+
+	let start;
+	let actual;
+
+	start = js.locate('ctx[0].bar.baz');
+
+	actual = js.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual(actual, {
+		source: 'input.svelte',
+		name: null,
+		line: expected.line + 1,
+		column: expected.column
+	});
+
+	start = js.locate('ctx[0].bar.baz', start.character + 1);
+
+	actual = js.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual(actual, {
+		source: 'input.svelte',
+		name: null,
+		line: expected.line + 1,
+		column: expected.column
+	});
+}
diff --git a/test/sourcemaps/samples/binding-shorthand.skip/input.svelte b/test/sourcemaps/samples/binding-shorthand.skip/input.svelte
new file mode 100644
index 0000000000..7ba7c7c10d
--- /dev/null
+++ b/test/sourcemaps/samples/binding-shorthand.skip/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Widget from 'wherever';
+
+	export let potato;
+</script>
+
+<Widget bind:potato/>
diff --git a/test/sourcemaps/samples/binding-shorthand.skip/test.js b/test/sourcemaps/samples/binding-shorthand.skip/test.js
new file mode 100644
index 0000000000..13ecdbf889
--- /dev/null
+++ b/test/sourcemaps/samples/binding-shorthand.skip/test.js
@@ -0,0 +1,22 @@
+export function test({ assert, input, js }) {
+	const expected = input.locate('potato');
+
+	let start;
+
+	start = js.locate('potato');
+	start = js.locate('potato', start.character + 1);
+	start = js.locate('potato', start.character + 1);
+	// we need the third instance of 'potato'
+
+	const actual = js.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual(actual, {
+		source: 'input.svelte',
+		name: null,
+		line: expected.line + 1,
+		column: expected.column
+	});
+}
diff --git a/test/sourcemaps/samples/binding/input.svelte b/test/sourcemaps/samples/binding/input.svelte
new file mode 100644
index 0000000000..de3f7d5b93
--- /dev/null
+++ b/test/sourcemaps/samples/binding/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+<input bind:value={foo.bar.baz}>
diff --git a/test/sourcemaps/samples/binding/test.js b/test/sourcemaps/samples/binding/test.js
new file mode 100644
index 0000000000..3cb3246e50
--- /dev/null
+++ b/test/sourcemaps/samples/binding/test.js
@@ -0,0 +1,34 @@
+export function test({ assert, input, js }) {
+	const expected = input.locate('bar.baz');
+
+	let start;
+	let actual;
+
+	start = js.locate('bar.baz');
+
+	actual = js.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual(actual, {
+		source: 'input.svelte',
+		name: null,
+		line: expected.line + 1,
+		column: expected.column
+	});
+
+	start = js.locate('bar.baz', start.character + 1);
+
+	actual = js.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual(actual, {
+		source: 'input.svelte',
+		name: null,
+		line: expected.line + 1,
+		column: expected.column
+	});
+}
diff --git a/test/sourcemaps/samples/compile-option-dev/_config.js b/test/sourcemaps/samples/compile-option-dev/_config.js
new file mode 100644
index 0000000000..b6ea851b6d
--- /dev/null
+++ b/test/sourcemaps/samples/compile-option-dev/_config.js
@@ -0,0 +1,21 @@
+import MagicString from 'magic-string';
+import { magic_string_preprocessor_result, magic_string_replace_all } from '../../helpers';
+
+export default {
+	compile_options: {
+		dev: true
+	},
+	preprocess: [
+		{ style: ({ content, filename }) =>  {
+				const src = new MagicString(content);
+				magic_string_replace_all(src, '--replace-me-once', '\n --done-replace-once');
+				magic_string_replace_all(src, '--replace-me-twice', '\n--almost-done-replace-twice');
+				return magic_string_preprocessor_result(filename, src);
+		} },
+		{ style: ({ content, filename }) =>  {
+				const src = new MagicString(content);
+				magic_string_replace_all(src, '--almost-done-replace-twice', '\n  --done-replace-twice');
+				return magic_string_preprocessor_result(filename, src);
+		} }
+	]
+};
diff --git a/test/sourcemaps/samples/compile-option-dev/input.svelte b/test/sourcemaps/samples/compile-option-dev/input.svelte
new file mode 100644
index 0000000000..6d5f91158d
--- /dev/null
+++ b/test/sourcemaps/samples/compile-option-dev/input.svelte
@@ -0,0 +1,15 @@
+<h1>Testing Styles</h1>
+<h2>Testing Styles 2</h2>
+<div>Testing Styles 3</div>
+<script>export const b = 2;</script>
+<style>
+	h1 {
+		--replace-me-once: red;
+	}
+	h2 {
+		--replace-me-twice: green;
+	}
+	div {
+		--keep-me: blue;
+	}
+</style>
diff --git a/test/sourcemaps/samples/compile-option-dev/test.js b/test/sourcemaps/samples/compile-option-dev/test.js
new file mode 100644
index 0000000000..f169ab8832
--- /dev/null
+++ b/test/sourcemaps/samples/compile-option-dev/test.js
@@ -0,0 +1,40 @@
+import { SourceMapConsumer } from 'source-map';
+
+const b64dec = s => Buffer.from(s, 'base64').toString();
+
+export async function test({ assert, css,  js }) {
+
+	// We check that the css source map embedded in the js is accurate
+	const match = js.code.match(/\tappend_styles\(target, "svelte-.{6}", "(.*?)(?:\\n\/\*# sourceMappingURL=data:(.*?);charset=(.*?);base64,(.*?) \*\/)?"\);\n/);
+	assert.notEqual(match, null);
+
+	const [mimeType, encoding, cssMapBase64] = match.slice(2);
+	assert.equal(mimeType, 'application/json');
+	assert.equal(encoding, 'utf-8');
+
+	const cssMapJson = b64dec(cssMapBase64);
+	css.mapConsumer = await new SourceMapConsumer(cssMapJson);
+
+	// TODO make util fn + move to test index.js
+	const sourcefile = 'input.svelte';
+	[
+		// TODO how to get line + column numbers?
+		[css, '--keep-me', 13, 2],
+		[css, '--done-replace-once', 6, 5],
+		[css, '--done-replace-twice', 9, 5]
+	]
+	.forEach(([where, content, line, column]) => {
+		assert.deepEqual(
+			where.mapConsumer.originalPositionFor(
+				where.locate_1(content)
+			),
+			{
+				source: sourcefile,
+				name: null,
+				line,
+				column
+			},
+			`failed to locate "${content}" from "${sourcefile}"`
+		);
+	});
+}
diff --git a/test/sourcemaps/samples/css/input.svelte b/test/sourcemaps/samples/css/input.svelte
new file mode 100644
index 0000000000..ad0845d15b
--- /dev/null
+++ b/test/sourcemaps/samples/css/input.svelte
@@ -0,0 +1,7 @@
+<p class='foo'>red</p>
+
+<style>
+	.foo {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/sourcemaps/samples/css/test.js b/test/sourcemaps/samples/css/test.js
new file mode 100644
index 0000000000..1e0dda1dff
--- /dev/null
+++ b/test/sourcemaps/samples/css/test.js
@@ -0,0 +1,17 @@
+export function test({ assert, input, css }) {
+	const expected = input.locate('.foo');
+
+	const start = css.locate('.foo');
+
+	const actual = css.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual(actual, {
+		source: 'input.svelte',
+		name: null,
+		line: expected.line + 1,
+		column: expected.column
+	});
+}
diff --git a/test/sourcemaps/samples/decoded-sourcemap/_config.js b/test/sourcemaps/samples/decoded-sourcemap/_config.js
new file mode 100644
index 0000000000..a0b2c82692
--- /dev/null
+++ b/test/sourcemaps/samples/decoded-sourcemap/_config.js
@@ -0,0 +1,15 @@
+import MagicString from 'magic-string';
+import { magic_string_preprocessor_result, magic_string_replace_all } from '../../helpers';
+
+export default {
+
+	js_map_sources: ['input.svelte'],
+
+	preprocess: {
+		markup: ({ content, filename }) => {
+			const src = new MagicString(content);
+			magic_string_replace_all(src, 'replace me', 'success');
+			return magic_string_preprocessor_result(filename, src);
+		}
+	}
+};
diff --git a/test/sourcemaps/samples/decoded-sourcemap/input.svelte b/test/sourcemaps/samples/decoded-sourcemap/input.svelte
new file mode 100644
index 0000000000..b233d7f670
--- /dev/null
+++ b/test/sourcemaps/samples/decoded-sourcemap/input.svelte
@@ -0,0 +1,2 @@
+<h1>decoded-sourcemap</h1>
+<div>replace me</div>
diff --git a/test/sourcemaps/samples/decoded-sourcemap/test.js b/test/sourcemaps/samples/decoded-sourcemap/test.js
new file mode 100644
index 0000000000..5a44ee83cf
--- /dev/null
+++ b/test/sourcemaps/samples/decoded-sourcemap/test.js
@@ -0,0 +1,19 @@
+export function test({ assert, input, preprocessed }) {
+
+  const expected = input.locate('replace me');
+
+  const start = preprocessed.locate('success');
+
+  const actualbar = preprocessed.mapConsumer.originalPositionFor({
+    line: start.line + 1,
+    column: start.column
+  });
+
+  assert.deepEqual(actualbar, {
+    source: 'input.svelte',
+    name: 'replace me',
+    line: expected.line + 1,
+    column: expected.column
+  });
+
+}
diff --git a/test/sourcemaps/samples/each-block/input.svelte b/test/sourcemaps/samples/each-block/input.svelte
new file mode 100644
index 0000000000..bf2f0609bd
--- /dev/null
+++ b/test/sourcemaps/samples/each-block/input.svelte
@@ -0,0 +1,3 @@
+{#each foo as bar}
+	<span>{bar}</span>
+{/each}
\ No newline at end of file
diff --git a/test/sourcemaps/samples/each-block/test.js b/test/sourcemaps/samples/each-block/test.js
new file mode 100644
index 0000000000..08b37686a4
--- /dev/null
+++ b/test/sourcemaps/samples/each-block/test.js
@@ -0,0 +1,18 @@
+export function test({ assert, input, js }) {
+	const startIndex = js.code.indexOf('create_main_fragment');
+
+	const expected = input.locate('each');
+	const start = js.locate('length', startIndex);
+
+	const actual = js.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual(actual, {
+		source: 'input.svelte',
+		name: null,
+		line: expected.line + 1,
+		column: expected.column
+	});
+}
diff --git a/test/sourcemaps/samples/external/_config.js b/test/sourcemaps/samples/external/_config.js
new file mode 100644
index 0000000000..07a0903482
--- /dev/null
+++ b/test/sourcemaps/samples/external/_config.js
@@ -0,0 +1,24 @@
+import { magic_string_bundle } from '../../helpers';
+
+export const COMMON = ':global(html) { height: 100%; }\n';
+
+// TODO: removing '\n' breaks test
+// - _actual.svelte.map looks correct
+// - _actual.css.map adds reference to </style> on input.svelte
+// - Most probably caused by bug in current magic-string version (fixed in 0.25.7)
+export const STYLES = '.awesome { color: orange; }\n';
+
+export default {
+	css_map_sources: ['common.scss', 'styles.scss'],
+	js_map_sources: ['input.svelte'],
+	preprocess: [
+		{
+			style: () => {
+				return magic_string_bundle([
+					{ filename: 'common.scss', code: COMMON },
+					{ filename: 'styles.scss', code: STYLES }
+				]);
+			}
+		}
+	]
+};
diff --git a/test/sourcemaps/samples/external/input.svelte b/test/sourcemaps/samples/external/input.svelte
new file mode 100644
index 0000000000..94d895e4a7
--- /dev/null
+++ b/test/sourcemaps/samples/external/input.svelte
@@ -0,0 +1,3 @@
+<style lang="scss" src="./styles.scss"></style>
+
+<div class="awesome">Divs ftw!</div>
\ No newline at end of file
diff --git a/test/sourcemaps/samples/external/test.js b/test/sourcemaps/samples/external/test.js
new file mode 100644
index 0000000000..5193b62ba1
--- /dev/null
+++ b/test/sourcemaps/samples/external/test.js
@@ -0,0 +1,26 @@
+import { assert_mapped } from '../../helpers';
+import { COMMON, STYLES } from './_config';
+
+export function test({ input, preprocessed }) {
+	// Transformed script, main file
+	assert_mapped({
+		filename: 'input.svelte',
+		code: 'Divs ftw!',
+		input: input.locate,
+		preprocessed
+	});
+
+	// External files
+	assert_mapped({
+		filename: 'common.scss',
+		code: 'height: 100%;',
+		input: COMMON,
+		preprocessed
+	});
+	assert_mapped({
+		filename: 'styles.scss',
+		code: 'color: orange;',
+		input: STYLES,
+		preprocessed
+	});
+}
diff --git a/test/sourcemaps/samples/markup/input.svelte b/test/sourcemaps/samples/markup/input.svelte
new file mode 100644
index 0000000000..d5baaac693
--- /dev/null
+++ b/test/sourcemaps/samples/markup/input.svelte
@@ -0,0 +1,2 @@
+<h1>decoded-sourcemap</h1>
+<div>replace me</div>
\ No newline at end of file
diff --git a/test/sourcemaps/samples/markup/test.js b/test/sourcemaps/samples/markup/test.js
new file mode 100644
index 0000000000..2c6abfdf41
--- /dev/null
+++ b/test/sourcemaps/samples/markup/test.js
@@ -0,0 +1,34 @@
+export function test({ assert, input, js }) {
+	let expected;
+
+	let start;
+	let actual;
+
+	start = js.locate('insert(target, h1');
+	expected = input.locate('<h1');
+	actual = js.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual(actual, {
+		source: 'input.svelte',
+		name: null,
+		line: expected.line + 1,
+		column: expected.column
+	});
+
+	start = js.locate('insert(target, div');
+	expected = input.locate('<div');
+	actual = js.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual(actual, {
+		source: 'input.svelte',
+		name: null,
+		line: expected.line + 1,
+		column: expected.column
+	});
+}
diff --git a/test/sourcemaps/samples/no-sourcemap/_config.js b/test/sourcemaps/samples/no-sourcemap/_config.js
new file mode 100644
index 0000000000..5b84d40554
--- /dev/null
+++ b/test/sourcemaps/samples/no-sourcemap/_config.js
@@ -0,0 +1,5 @@
+export default {
+  compile_options: {
+    enableSourcemap: false
+  }
+};
diff --git a/test/sourcemaps/samples/no-sourcemap/input.svelte b/test/sourcemaps/samples/no-sourcemap/input.svelte
new file mode 100644
index 0000000000..6d39eaad0e
--- /dev/null
+++ b/test/sourcemaps/samples/no-sourcemap/input.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let foo;
+</script>
+
+<p>{foo}</p>
+
+<style>
+	p {
+		color: red;
+	}
+</style>
diff --git a/test/sourcemaps/samples/no-sourcemap/test.js b/test/sourcemaps/samples/no-sourcemap/test.js
new file mode 100644
index 0000000000..127459a54e
--- /dev/null
+++ b/test/sourcemaps/samples/no-sourcemap/test.js
@@ -0,0 +1,4 @@
+export function test({ assert, js, css }) {
+	assert.equal(js.map, null);
+	assert.equal(css.map, null);
+}
diff --git a/test/sourcemaps/samples/only-css-sourcemap/_config.js b/test/sourcemaps/samples/only-css-sourcemap/_config.js
new file mode 100644
index 0000000000..767e10a4b9
--- /dev/null
+++ b/test/sourcemaps/samples/only-css-sourcemap/_config.js
@@ -0,0 +1,5 @@
+export default {
+  compile_options: {
+    enableSourcemap: { css: true }
+  }
+};
diff --git a/test/sourcemaps/samples/only-css-sourcemap/input.svelte b/test/sourcemaps/samples/only-css-sourcemap/input.svelte
new file mode 100644
index 0000000000..6d39eaad0e
--- /dev/null
+++ b/test/sourcemaps/samples/only-css-sourcemap/input.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let foo;
+</script>
+
+<p>{foo}</p>
+
+<style>
+	p {
+		color: red;
+	}
+</style>
diff --git a/test/sourcemaps/samples/only-css-sourcemap/test.js b/test/sourcemaps/samples/only-css-sourcemap/test.js
new file mode 100644
index 0000000000..a7ac6a9b0b
--- /dev/null
+++ b/test/sourcemaps/samples/only-css-sourcemap/test.js
@@ -0,0 +1,4 @@
+export function test({ assert, js, css }) {
+	assert.equal(js.map, null);
+	assert.notEqual(css.map, null);
+}
diff --git a/test/sourcemaps/samples/only-js-sourcemap/_config.js b/test/sourcemaps/samples/only-js-sourcemap/_config.js
new file mode 100644
index 0000000000..0b3b7987f1
--- /dev/null
+++ b/test/sourcemaps/samples/only-js-sourcemap/_config.js
@@ -0,0 +1,5 @@
+export default {
+  compile_options: {
+    enableSourcemap: { js: true }
+  }
+};
diff --git a/test/sourcemaps/samples/only-js-sourcemap/input.svelte b/test/sourcemaps/samples/only-js-sourcemap/input.svelte
new file mode 100644
index 0000000000..6d39eaad0e
--- /dev/null
+++ b/test/sourcemaps/samples/only-js-sourcemap/input.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let foo;
+</script>
+
+<p>{foo}</p>
+
+<style>
+	p {
+		color: red;
+	}
+</style>
diff --git a/test/sourcemaps/samples/only-js-sourcemap/test.js b/test/sourcemaps/samples/only-js-sourcemap/test.js
new file mode 100644
index 0000000000..b150653c3d
--- /dev/null
+++ b/test/sourcemaps/samples/only-js-sourcemap/test.js
@@ -0,0 +1,4 @@
+export function test({ assert, js, css }) {
+	assert.notEqual(js.map, null);
+	assert.equal(css.map, null);
+}
diff --git a/test/sourcemaps/samples/preprocessed-markup/_config.js b/test/sourcemaps/samples/preprocessed-markup/_config.js
new file mode 100644
index 0000000000..0b2baeb49c
--- /dev/null
+++ b/test/sourcemaps/samples/preprocessed-markup/_config.js
@@ -0,0 +1,12 @@
+import MagicString from 'magic-string';
+import { magic_string_preprocessor_result, magic_string_replace_all } from '../../helpers';
+
+export default {
+	preprocess: {
+		markup: ({ content, filename }) =>  {
+			const src = new MagicString(content);
+			magic_string_replace_all(src, 'baritone', 'bar');
+			return magic_string_preprocessor_result(filename, src);
+		}
+	}
+};
diff --git a/test/sourcemaps/samples/preprocessed-markup/input.svelte b/test/sourcemaps/samples/preprocessed-markup/input.svelte
new file mode 100644
index 0000000000..ee4b90372a
--- /dev/null
+++ b/test/sourcemaps/samples/preprocessed-markup/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let foo;
+</script>
+
+{foo.baritone.baz}
diff --git a/test/sourcemaps/samples/preprocessed-markup/test.js b/test/sourcemaps/samples/preprocessed-markup/test.js
new file mode 100644
index 0000000000..b587103969
--- /dev/null
+++ b/test/sourcemaps/samples/preprocessed-markup/test.js
@@ -0,0 +1,32 @@
+export function test({ assert, input, js }) {
+	const expectedBar = input.locate('baritone.baz');
+	const expectedBaz = input.locate('.baz');
+
+	let start = js.locate('bar.baz');
+
+	const actualbar = js.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual(actualbar, {
+		source: 'input.svelte',
+		name: 'baritone',
+		line: expectedBar.line + 1,
+		column: expectedBar.column
+	});
+
+	start = js.locate('.baz');
+
+	const actualbaz = js.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual(actualbaz, {
+		source: 'input.svelte',
+		name: null,
+		line: expectedBaz.line + 1,
+		column: expectedBaz.column
+	});
+}
diff --git a/test/sourcemaps/samples/preprocessed-multiple/_config.js b/test/sourcemaps/samples/preprocessed-multiple/_config.js
new file mode 100644
index 0000000000..39259a02a8
--- /dev/null
+++ b/test/sourcemaps/samples/preprocessed-multiple/_config.js
@@ -0,0 +1,25 @@
+import MagicString from 'magic-string';
+import { magic_string_preprocessor_result, magic_string_replace_all } from '../../helpers';
+
+export default {
+	preprocess: {
+		markup: ({ content, filename }) => {
+			const src = new MagicString(content);
+			magic_string_replace_all(src, 'baritone', 'bar');
+			magic_string_replace_all(src, '--bazitone', '--baz');
+			return magic_string_preprocessor_result(filename, src);
+		},
+		script: ({ content, filename }) => {
+			const src = new MagicString(content);
+			const idx = content.indexOf('bar');
+			src.prependLeft(idx, '      ');
+			return magic_string_preprocessor_result(filename, src);
+		},
+		style: ({ content, filename }) => {
+			const src = new MagicString(content);
+			const idx = content.indexOf('--baz');
+			src.prependLeft(idx, '      ');
+			return magic_string_preprocessor_result(filename, src);
+		}
+	}
+};
diff --git a/test/sourcemaps/samples/preprocessed-multiple/input.svelte b/test/sourcemaps/samples/preprocessed-multiple/input.svelte
new file mode 100644
index 0000000000..e656d399ae
--- /dev/null
+++ b/test/sourcemaps/samples/preprocessed-multiple/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let foo = { baritone: 5 }
+</script>
+<style>
+	h1 {
+		background-color: var(--bazitone);
+	}
+</style>
+<h1>multiple {foo}</h1>
diff --git a/test/sourcemaps/samples/preprocessed-multiple/test.js b/test/sourcemaps/samples/preprocessed-multiple/test.js
new file mode 100644
index 0000000000..a0cfe1fa8a
--- /dev/null
+++ b/test/sourcemaps/samples/preprocessed-multiple/test.js
@@ -0,0 +1,32 @@
+export function test({ assert, input, js, css }) {
+	const expectedBar = input.locate('baritone');
+	const expectedBaz = input.locate('--bazitone');
+
+	let start = js.locate('bar');
+
+	const actualbar = js.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual(actualbar, {
+		source: 'input.svelte',
+		name: 'baritone',
+		line: expectedBar.line + 1,
+		column: expectedBar.column
+	});
+
+	start = css.locate('--baz');
+
+	const actualbaz = css.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual(actualbaz, {
+		source: 'input.svelte',
+		name: '--bazitone',
+		line: expectedBaz.line + 1,
+		column: expectedBaz.column
+	});
+}
diff --git a/test/sourcemaps/samples/preprocessed-no-map/_config.js b/test/sourcemaps/samples/preprocessed-no-map/_config.js
new file mode 100644
index 0000000000..78b0ee626f
--- /dev/null
+++ b/test/sourcemaps/samples/preprocessed-no-map/_config.js
@@ -0,0 +1,15 @@
+export default {
+	css_map_sources: ['input.svelte'],
+	preprocess: [
+		{
+			style: ({ content }) => {
+				// Modified without source map
+				return { code: content + ' ' };
+			},
+			script: ({ content }) => {
+				// Not modified
+				return { code: content };
+			}
+		}
+	]
+};
diff --git a/test/sourcemaps/samples/preprocessed-no-map/input.svelte b/test/sourcemaps/samples/preprocessed-no-map/input.svelte
new file mode 100644
index 0000000000..febfa5191b
--- /dev/null
+++ b/test/sourcemaps/samples/preprocessed-no-map/input.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let name;
+
+	console.log(name);
+</script>
+
+<main>
+	<div>{name}</div>
+</main>
+
+<style>
+	main { font-weight: bold; }
+</style>
diff --git a/test/sourcemaps/samples/preprocessed-no-map/test.js b/test/sourcemaps/samples/preprocessed-no-map/test.js
new file mode 100644
index 0000000000..22286ae282
--- /dev/null
+++ b/test/sourcemaps/samples/preprocessed-no-map/test.js
@@ -0,0 +1,37 @@
+import { assert_mapped, assert_not_mapped } from '../../helpers';
+
+export function test({ input, preprocessed }) {
+	// markup (start)
+	assert_mapped({
+		code: '<script>',
+		input: input.locate,
+		preprocessed
+	});
+
+	// script content (preprocessed without map, content not changed)
+	assert_mapped({
+		code: 'console.log(name);',
+		input: input.locate,
+		preprocessed
+	});
+	
+	// markup (middle)
+	assert_mapped({
+		code: '<div>{name}</div>',
+		input: input.locate,
+		preprocessed
+	});
+	
+	// style content (preprocessed without map, content changed)
+	assert_not_mapped({
+		code: 'font-weight: bold;',
+		preprocessed
+	});
+
+	// markup (end)
+	assert_mapped({
+		code: '</style>',
+		input: input.locate,
+		preprocessed
+	});
+}
diff --git a/test/sourcemaps/samples/preprocessed-script/_config.js b/test/sourcemaps/samples/preprocessed-script/_config.js
new file mode 100644
index 0000000000..94bd83c22f
--- /dev/null
+++ b/test/sourcemaps/samples/preprocessed-script/_config.js
@@ -0,0 +1,12 @@
+import MagicString from 'magic-string';
+import { magic_string_preprocessor_result, magic_string_replace_all } from '../../helpers';
+
+export default {
+	preprocess: {
+		script: ({ content, filename }) =>  {
+			const src = new MagicString(content);
+			magic_string_replace_all(src, 'baritone', 'bar');
+			return magic_string_preprocessor_result(filename, src);
+		}
+	}
+};
diff --git a/test/sourcemaps/samples/preprocessed-script/input.svelte b/test/sourcemaps/samples/preprocessed-script/input.svelte
new file mode 100644
index 0000000000..11586619e1
--- /dev/null
+++ b/test/sourcemaps/samples/preprocessed-script/input.svelte
@@ -0,0 +1,9 @@
+<style>
+	h1 {
+		color: red;
+	}
+</style>
+<script>
+	export let foo = { baritone: { baz: 5 } }
+</script>
+<h1>{foo.bar.baz}</h1>
diff --git a/test/sourcemaps/samples/preprocessed-script/test.js b/test/sourcemaps/samples/preprocessed-script/test.js
new file mode 100644
index 0000000000..20a366f6d2
--- /dev/null
+++ b/test/sourcemaps/samples/preprocessed-script/test.js
@@ -0,0 +1,32 @@
+export function test({ assert, input, js }) {
+	const expectedBar = input.locate('baritone:');
+	const expectedBaz = input.locate('baz:');
+
+	let start = js.locate('bar:');
+
+	const actualbar = js.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual(actualbar, {
+		source: 'input.svelte',
+		name: 'baritone',
+		line: expectedBar.line + 1,
+		column: expectedBar.column
+	}, "couldn't find bar: in source");
+
+	start = js.locate('baz:');
+
+	const actualbaz = js.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual(actualbaz, {
+		source: 'input.svelte',
+		name: null,
+		line: expectedBaz.line + 1,
+		column: expectedBaz.column
+	}, "couldn't find baz: in source");
+}
diff --git a/test/sourcemaps/samples/preprocessed-styles/_config.js b/test/sourcemaps/samples/preprocessed-styles/_config.js
new file mode 100644
index 0000000000..04c8bcda7a
--- /dev/null
+++ b/test/sourcemaps/samples/preprocessed-styles/_config.js
@@ -0,0 +1,12 @@
+import MagicString from 'magic-string';
+import { magic_string_preprocessor_result, magic_string_replace_all } from '../../helpers';
+
+export default {
+	preprocess: {
+		style: ({ content, filename }) =>  {
+			const src = new MagicString(content);
+			magic_string_replace_all(src, 'baritone', 'bar');
+			return magic_string_preprocessor_result(filename, src);
+		}
+	}
+};
diff --git a/test/sourcemaps/samples/preprocessed-styles/input.svelte b/test/sourcemaps/samples/preprocessed-styles/input.svelte
new file mode 100644
index 0000000000..0d942390f4
--- /dev/null
+++ b/test/sourcemaps/samples/preprocessed-styles/input.svelte
@@ -0,0 +1,12 @@
+<h1>Testing Styles</h1>
+<h2>Testing Styles 2</h2>
+<script>export const b = 2;</script>
+<style>
+	h1 {
+		--baritone: red;
+	}
+
+	h2 {
+		--baz: blue;
+	}
+</style>
diff --git a/test/sourcemaps/samples/preprocessed-styles/test.js b/test/sourcemaps/samples/preprocessed-styles/test.js
new file mode 100644
index 0000000000..5b28a12514
--- /dev/null
+++ b/test/sourcemaps/samples/preprocessed-styles/test.js
@@ -0,0 +1,32 @@
+export function test({ assert, input, css }) {
+	const expectedBar = input.locate('--baritone');
+	const expectedBaz = input.locate('--baz');
+
+	let start = css.locate('--bar');
+
+	const actualbar = css.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual(actualbar, {
+		source: 'input.svelte',
+		name: null,
+		line: expectedBar.line + 1,
+		column: expectedBar.column
+	}, "couldn't find bar in source");
+
+	start = css.locate('--baz');
+
+	const actualbaz = css.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual(actualbaz, {
+		source: 'input.svelte',
+		name: null,
+		line: expectedBaz.line + 1,
+		column: expectedBaz.column
+	}, "couldn't find baz in source");
+}
diff --git a/test/sourcemaps/samples/script-after-comment/input.svelte b/test/sourcemaps/samples/script-after-comment/input.svelte
new file mode 100644
index 0000000000..1f06455678
--- /dev/null
+++ b/test/sourcemaps/samples/script-after-comment/input.svelte
@@ -0,0 +1,9 @@
+<!--
+	Multiline
+	comment
+-->
+<script>
+	function assertThisLine() {}
+</script>
+
+{foo.bar.baz}
diff --git a/test/sourcemaps/samples/script-after-comment/test.js b/test/sourcemaps/samples/script-after-comment/test.js
new file mode 100644
index 0000000000..06ecc46929
--- /dev/null
+++ b/test/sourcemaps/samples/script-after-comment/test.js
@@ -0,0 +1,16 @@
+export function test({ assert, input, js }) {
+	const expected = input.locate('assertThisLine');
+	const start = js.locate('assertThisLine');
+
+	const actual = js.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual(actual, {
+		source: 'input.svelte',
+		name: null,
+		line: expected.line + 1,
+		column: expected.column
+	});
+}
diff --git a/test/sourcemaps/samples/script/input.svelte b/test/sourcemaps/samples/script/input.svelte
new file mode 100644
index 0000000000..afa4a0622f
--- /dev/null
+++ b/test/sourcemaps/samples/script/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		console.log(42);
+	});
+</script>
+
+<div></div>
diff --git a/test/sourcemaps/samples/script/test.js b/test/sourcemaps/samples/script/test.js
new file mode 100644
index 0000000000..e6a91f51e1
--- /dev/null
+++ b/test/sourcemaps/samples/script/test.js
@@ -0,0 +1,16 @@
+export function test({ assert, input, js }) {
+	const expected = input.locate('42');
+	const start = js.locate('42');
+
+	const actual = js.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual( actual, {
+		source: 'input.svelte',
+		name: null,
+		line: expected.line + 1,
+		column: expected.column
+	});
+}
diff --git a/test/sourcemaps/samples/source-map-generator/_config.js b/test/sourcemaps/samples/source-map-generator/_config.js
new file mode 100644
index 0000000000..3cd15d9dda
--- /dev/null
+++ b/test/sourcemaps/samples/source-map-generator/_config.js
@@ -0,0 +1,25 @@
+import MagicString from 'magic-string';
+import { SourceMapConsumer, SourceMapGenerator } from 'source-map';
+
+export default {
+	preprocess: {
+		style: async ({ content, filename }) =>  {
+			const src = new MagicString(content);
+			const idx = content.indexOf('baritone');
+			src.overwrite(idx, idx + 'baritone'.length, 'bar');
+
+			const map = SourceMapGenerator.fromSourceMap(
+				await new SourceMapConsumer(
+					// sourcemap must be encoded for SourceMapConsumer
+					src.generateMap({
+						source: filename,
+						hires: true,
+						includeContent: false
+					})
+				)
+			);
+
+			return { code: src.toString(), map };
+		}
+	}
+};
diff --git a/test/sourcemaps/samples/source-map-generator/input.svelte b/test/sourcemaps/samples/source-map-generator/input.svelte
new file mode 100644
index 0000000000..0d942390f4
--- /dev/null
+++ b/test/sourcemaps/samples/source-map-generator/input.svelte
@@ -0,0 +1,12 @@
+<h1>Testing Styles</h1>
+<h2>Testing Styles 2</h2>
+<script>export const b = 2;</script>
+<style>
+	h1 {
+		--baritone: red;
+	}
+
+	h2 {
+		--baz: blue;
+	}
+</style>
diff --git a/test/sourcemaps/samples/source-map-generator/test.js b/test/sourcemaps/samples/source-map-generator/test.js
new file mode 100644
index 0000000000..72ad1da1d8
--- /dev/null
+++ b/test/sourcemaps/samples/source-map-generator/test.js
@@ -0,0 +1 @@
+export { test } from '../preprocessed-styles/test';
diff --git a/test/sourcemaps/samples/sourcemap-basename-without-outputname/_config.js b/test/sourcemaps/samples/sourcemap-basename-without-outputname/_config.js
new file mode 100644
index 0000000000..15c346bfb9
--- /dev/null
+++ b/test/sourcemaps/samples/sourcemap-basename-without-outputname/_config.js
@@ -0,0 +1,33 @@
+
+import {magic_string_bundle} from '../../helpers';
+
+export const component_filepath = 'src/some/deep/path/input.svelte';
+export const component_file_basename = 'input.svelte';
+export const css_file_basename = 'input.css';
+
+const input_css = ' h1 {color: blue;}';
+
+export default {
+	preprocess: [
+		{
+			style: ({ content, filename }) => {
+				const style_to_add = `/* Filename from preprocess: ${filename} */` + input_css;
+				return  magic_string_bundle([
+					{ code: content, filename: component_file_basename },
+					{ code: style_to_add, filename: css_file_basename }
+				],component_filepath);
+			}
+		}
+	],
+	js_map_sources: [component_file_basename],
+	css_map_sources: [css_file_basename,component_file_basename],
+	options: {
+		filename: component_filepath
+	},
+	compile_options: {
+		filename: component_filepath,
+		// ../../index.ts initializes output filenames, reset to undefined for this test
+		outputFilename: undefined,
+		cssOutputFilename: undefined
+	}
+};
diff --git a/test/sourcemaps/samples/sourcemap-basename-without-outputname/input.svelte b/test/sourcemaps/samples/sourcemap-basename-without-outputname/input.svelte
new file mode 100644
index 0000000000..189f28c390
--- /dev/null
+++ b/test/sourcemaps/samples/sourcemap-basename-without-outputname/input.svelte
@@ -0,0 +1,2 @@
+<h1>sourcemap-basename-without-outputname</h1>
+<style src="input.css">h1 {color: red;}</style>
diff --git a/test/sourcemaps/samples/sourcemap-basename-without-outputname/test.js b/test/sourcemaps/samples/sourcemap-basename-without-outputname/test.js
new file mode 100644
index 0000000000..c5747713a7
--- /dev/null
+++ b/test/sourcemaps/samples/sourcemap-basename-without-outputname/test.js
@@ -0,0 +1,3 @@
+// no additional test needed, _config.js values and the js.map.sources assertion in ../../index.ts cover it
+export function test() {}
+
diff --git a/test/sourcemaps/samples/sourcemap-basename/_config.js b/test/sourcemaps/samples/sourcemap-basename/_config.js
new file mode 100644
index 0000000000..7692b7a6d9
--- /dev/null
+++ b/test/sourcemaps/samples/sourcemap-basename/_config.js
@@ -0,0 +1,33 @@
+import { magic_string_bundle } from '../../helpers';
+
+export const component_filepath = 'src/input.svelte';
+
+export const component_file_basename = 'input.svelte';
+
+// as output by external tool for src/external_code.css (relative to src/input.svelte)
+export const external_relative_filename = 'external_code.css';
+
+const external_code = `
+span {
+	--external_code-var: 1px;
+}
+`;
+
+export default {
+	css_map_sources: [external_relative_filename],
+	js_map_sources: ['input.svelte'],
+	preprocess: [
+		{
+			style: ({ content, filename }) => {
+				const external = `/* Filename from preprocess: ${filename} */` + external_code;
+				return magic_string_bundle([
+					{ code: external, filename: external_relative_filename },
+					{ code: content, filename }
+				]);
+			}
+		}
+	],
+	options: {
+		filename: component_filepath
+	}
+};
diff --git a/test/sourcemaps/samples/sourcemap-basename/input.svelte b/test/sourcemaps/samples/sourcemap-basename/input.svelte
new file mode 100644
index 0000000000..72e524a308
--- /dev/null
+++ b/test/sourcemaps/samples/sourcemap-basename/input.svelte
@@ -0,0 +1,3 @@
+<style src="external_code.css"></style>
+
+<span>Hello world</span>
diff --git a/test/sourcemaps/samples/sourcemap-basename/test.js b/test/sourcemaps/samples/sourcemap-basename/test.js
new file mode 100644
index 0000000000..34f6504722
--- /dev/null
+++ b/test/sourcemaps/samples/sourcemap-basename/test.js
@@ -0,0 +1,15 @@
+import { component_filepath, component_file_basename, external_relative_filename } from './_config';
+
+export function test({ assert, preprocessed }) {
+	assert.notEqual(
+		preprocessed.locate(`/* Filename from preprocess: ${component_filepath} */`),
+		undefined,
+		'Preprocessor should receive same value for filename as passed to preprocess function'
+	);
+	
+	assert.deepEqual(
+		preprocessed.map.sources.slice().sort(),
+		[external_relative_filename, component_file_basename].sort(),
+		'Preprocessed map should contain sources relative to filepath'
+	);
+}
diff --git a/test/sourcemaps/samples/sourcemap-concat/_config.js b/test/sourcemaps/samples/sourcemap-concat/_config.js
new file mode 100644
index 0000000000..835b3c9e48
--- /dev/null
+++ b/test/sourcemaps/samples/sourcemap-concat/_config.js
@@ -0,0 +1,15 @@
+import MagicString from 'magic-string';
+import { magic_string_preprocessor_result } from '../../helpers';
+
+export default {
+	js_map_sources: ['input.svelte'],
+	preprocess: [
+		{
+			script: ({ content }) => {
+				const src = new MagicString(content);
+				src.prepend('console.log("Injected first line");\n');
+				return magic_string_preprocessor_result('input.svelte', src);
+			}
+		}
+	]
+};
diff --git a/test/sourcemaps/samples/sourcemap-concat/input.svelte b/test/sourcemaps/samples/sourcemap-concat/input.svelte
new file mode 100644
index 0000000000..18a1ac775f
--- /dev/null
+++ b/test/sourcemaps/samples/sourcemap-concat/input.svelte
@@ -0,0 +1,3 @@
+<script>console.log('Target')</script>
+
+<h1>Hello</h1>
\ No newline at end of file
diff --git a/test/sourcemaps/samples/sourcemap-concat/test.js b/test/sourcemaps/samples/sourcemap-concat/test.js
new file mode 100644
index 0000000000..c68d7175dc
--- /dev/null
+++ b/test/sourcemaps/samples/sourcemap-concat/test.js
@@ -0,0 +1,9 @@
+import { assert_mapped } from '../../helpers';
+
+export function test({ input, preprocessed }) {
+	assert_mapped({
+		code: 'Target',
+		input: input.locate,
+		preprocessed
+	});
+}
diff --git a/test/sourcemaps/samples/sourcemap-names/_config.js b/test/sourcemaps/samples/sourcemap-names/_config.js
new file mode 100644
index 0000000000..c8557ba465
--- /dev/null
+++ b/test/sourcemaps/samples/sourcemap-names/_config.js
@@ -0,0 +1,33 @@
+import MagicString from 'magic-string';
+import { magic_string_preprocessor_result, magic_string_replace_all } from '../../helpers';
+
+export default {
+	preprocess: [
+		{
+			markup: ({ content, filename }) => {
+				const src = new MagicString(content);
+				magic_string_replace_all(src, 'baritone', 'bar');
+				magic_string_replace_all(src,'--bazitone', '--baz');
+				magic_string_replace_all(src,'old_name_1', 'temp_new_name_1');
+				magic_string_replace_all(src,'old_name_2', 'temp_new_name_2');
+				return magic_string_preprocessor_result(filename, src);
+			}
+		},
+		{
+			markup: ({ content, filename }) => {
+				const src = new MagicString(content);
+				magic_string_replace_all(src, 'temp_new_name_1', 'temp_temp_new_name_1');
+				magic_string_replace_all(src, 'temp_new_name_2', 'temp_temp_new_name_2');
+				return magic_string_preprocessor_result(filename, src);
+			}
+		},
+		{
+			markup: ({ content, filename }) => {
+				const src = new MagicString(content);
+				magic_string_replace_all(src, 'temp_temp_new_name_1', 'new_name_1');
+				magic_string_replace_all(src, 'temp_temp_new_name_2', 'new_name_2');
+				return magic_string_preprocessor_result(filename, src);
+			}
+		}
+	]
+};
diff --git a/test/sourcemaps/samples/sourcemap-names/input.svelte b/test/sourcemaps/samples/sourcemap-names/input.svelte
new file mode 100644
index 0000000000..b62715a857
--- /dev/null
+++ b/test/sourcemaps/samples/sourcemap-names/input.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let old_name_1 = { baritone: 5 };
+	let old_name_2 = 'value_2';
+</script>
+<style>
+	div {
+		background-color: var(--bazitone);
+	}
+</style>
+<h1>use-names</h1>
+<div>{old_name_1.baritone}</div>
+<pre style="color: var(--bazitone)">{old_name_2}</pre>
diff --git a/test/sourcemaps/samples/sourcemap-names/test.js b/test/sourcemaps/samples/sourcemap-names/test.js
new file mode 100644
index 0000000000..cd70bd25ce
--- /dev/null
+++ b/test/sourcemaps/samples/sourcemap-names/test.js
@@ -0,0 +1,42 @@
+// needed for workaround, TODO remove
+import { getLocator } from 'locate-character';
+
+export function test({ assert, preprocessed, js, css }) {
+
+	assert.deepEqual(
+		preprocessed.map.names.sort(),
+		['baritone', '--bazitone', 'old_name_1', 'old_name_2'].sort()
+	);
+
+	function test_name(old_name, new_name, where) {
+
+		let loc = { character: -1 };
+		while (loc = where.locate(new_name, loc.character + 1)) {
+			const actualMapping = where.mapConsumer.originalPositionFor({
+				line: loc.line + 1, column: loc.column
+			});
+			if (actualMapping.line === null) {
+				// location is not mapped - ignore
+				continue;
+			}
+			assert.equal(actualMapping.name, old_name);
+		}
+		if (loc === undefined) {
+			// workaround for bug in locate-character, TODO remove
+			// https://github.com/Rich-Harris/locate-character/pull/5
+			where.locate = getLocator(where.code);
+		}
+	}
+
+	test_name('baritone', 'bar', js);
+	test_name('baritone', 'bar', preprocessed);
+
+	test_name('--bazitone', '--baz', css);
+	test_name('--bazitone', '--baz', preprocessed);
+
+	test_name('old_name_1', 'new_name_1', js);
+	test_name('old_name_1', 'new_name_1', preprocessed);
+
+	test_name('old_name_2', 'new_name_2', js);
+	test_name('old_name_2', 'new_name_2', preprocessed);
+}
diff --git a/test/sourcemaps/samples/sourcemap-offsets/_config.js b/test/sourcemaps/samples/sourcemap-offsets/_config.js
new file mode 100644
index 0000000000..bbc24c3225
--- /dev/null
+++ b/test/sourcemaps/samples/sourcemap-offsets/_config.js
@@ -0,0 +1,18 @@
+import { magic_string_bundle } from '../../helpers';
+
+export const EXTERNAL = 'span { --external-var: 1px; }';
+
+export default {
+	js_map_sources: ['input.svelte'],
+	css_map_sources: ['input.svelte', 'external.css'],
+	preprocess: [
+		{
+			style: ({ content, filename }) => {
+				return magic_string_bundle([
+					{ code: EXTERNAL, filename: 'external.css' },
+					{ code: content, filename }
+				]);
+			}
+		}
+	]
+};
diff --git a/test/sourcemaps/samples/sourcemap-offsets/input.svelte b/test/sourcemaps/samples/sourcemap-offsets/input.svelte
new file mode 100644
index 0000000000..51f7762e2a
--- /dev/null
+++ b/test/sourcemaps/samples/sourcemap-offsets/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	// This block is here to offset style block
+</script>
+
+<style>
+	div { --component-var: 2px; }
+</style>
+
+<div><span>Text</span></div>
\ No newline at end of file
diff --git a/test/sourcemaps/samples/sourcemap-offsets/test.js b/test/sourcemaps/samples/sourcemap-offsets/test.js
new file mode 100644
index 0000000000..a6c328770c
--- /dev/null
+++ b/test/sourcemaps/samples/sourcemap-offsets/test.js
@@ -0,0 +1,19 @@
+import { assert_mapped } from '../../helpers';
+import { EXTERNAL } from './_config';
+
+export function test({ input, preprocessed }) {
+	// Part from component, should be with offset
+	assert_mapped({
+		code: '--component-var',
+		input: input.locate,
+		preprocessed
+	});
+	
+	// Part from external file, should be without offset
+	assert_mapped({
+		filename: 'external.css',
+		code: '--external-var',
+		input: EXTERNAL,
+		preprocessed
+	});
+}
diff --git a/test/sourcemaps/samples/sourcemap-sources/_config.js b/test/sourcemaps/samples/sourcemap-sources/_config.js
new file mode 100644
index 0000000000..97024cea5f
--- /dev/null
+++ b/test/sourcemaps/samples/sourcemap-sources/_config.js
@@ -0,0 +1,60 @@
+/* eslint-disable import/no-duplicates */
+/* the code that transforms these to commonjs, can't handle "MagicString, { Bundle } from.." */
+
+import MagicString from 'magic-string';
+import { Bundle } from 'magic-string';
+
+
+function add(bundle, filename, source) {
+	bundle.addSource({
+		filename,
+		content: new MagicString(source),
+		separator: '\n'
+		//separator: '' // ERROR. probably a bug in magic-string
+	});
+}
+
+function result(bundle, filename) {
+	return {
+		code: bundle.toString(),
+		map: bundle.generateMap({
+			file: filename,
+			includeContent: false,
+			hires: true // required for remapping
+		})
+	};
+}
+
+export default {
+	js_map_sources: [
+		'input.svelte',
+		'foo.js',
+		'bar.js',
+		'foo2.js',
+		'bar2.js'
+	],
+	preprocess: [
+		{
+			script: ({ content, filename }) => {
+				const bundle = new Bundle();
+
+				add(bundle, filename, content);
+				add(bundle, 'foo.js', 'var answer = 42; // foo.js\n');
+				add(bundle, 'bar.js', 'console.log(answer); // bar.js\n');
+
+				return result(bundle, filename);
+			}
+		},
+		{
+			script: ({ content, filename }) => {
+				const bundle = new Bundle();
+
+				add(bundle, filename, content);
+				add(bundle, 'foo2.js', 'var answer2 = 84; // foo2.js\n');
+				add(bundle, 'bar2.js', 'console.log(answer2); // bar2.js\n');
+
+				return result(bundle, filename);
+			}
+		}
+	]
+};
diff --git a/test/sourcemaps/samples/sourcemap-sources/input.svelte b/test/sourcemaps/samples/sourcemap-sources/input.svelte
new file mode 100644
index 0000000000..33c8a9d9a6
--- /dev/null
+++ b/test/sourcemaps/samples/sourcemap-sources/input.svelte
@@ -0,0 +1,4 @@
+<script>
+	export let name;
+</script>
+<h1>sourcemap-sources</h1>
diff --git a/test/sourcemaps/samples/sourcemap-sources/test.js b/test/sourcemaps/samples/sourcemap-sources/test.js
new file mode 100644
index 0000000000..78a4c80a17
--- /dev/null
+++ b/test/sourcemaps/samples/sourcemap-sources/test.js
@@ -0,0 +1,29 @@
+export function test({ assert, preprocessed, js }) {
+
+	assert.equal(preprocessed.error, undefined);
+
+	// sourcemap stores location only for 'answer = 42;'
+	// not for 'var answer = 42;'
+	[
+		[js, 'foo.js', 'answer = 42;', 4],
+		[js, 'bar.js', 'console.log(answer);', 0],
+		[js, 'foo2.js', 'answer2 = 84;', 4],
+		[js, 'bar2.js', 'console.log(answer2);', 0]
+	]
+	.forEach(([where, sourcefile, content, column]) => {
+
+		assert.deepEqual(
+			where.mapConsumer.originalPositionFor(
+				where.locate_1(content)
+			),
+			{
+				source: sourcefile,
+				name: null,
+				line: 1,
+				column
+			},
+			`failed to locate "${content}" from "${sourcefile}"`
+		);
+
+	});
+}
diff --git a/test/sourcemaps/samples/static-no-script/input.svelte b/test/sourcemaps/samples/static-no-script/input.svelte
new file mode 100644
index 0000000000..1e2d597971
--- /dev/null
+++ b/test/sourcemaps/samples/static-no-script/input.svelte
@@ -0,0 +1 @@
+<p>no moving parts</p>
\ No newline at end of file
diff --git a/test/sourcemaps/samples/static-no-script/test.js b/test/sourcemaps/samples/static-no-script/test.js
new file mode 100644
index 0000000000..c683c94d6b
--- /dev/null
+++ b/test/sourcemaps/samples/static-no-script/test.js
@@ -0,0 +1,9 @@
+const fs = require('fs');
+const path = require('path');
+
+export function test({ assert, js }) {
+	assert.deepEqual(js.map.sources, ['input.svelte']);
+	assert.deepEqual(js.map.sourcesContent, [
+		fs.readFileSync(path.join(__dirname, 'input.svelte'), 'utf-8')
+	]);
+}
diff --git a/test/sourcemaps/samples/two-scripts/input.svelte b/test/sourcemaps/samples/two-scripts/input.svelte
new file mode 100644
index 0000000000..4c869827c0
--- /dev/null
+++ b/test/sourcemaps/samples/two-scripts/input.svelte
@@ -0,0 +1,9 @@
+<script context="module">
+	export let first;
+</script>
+
+<script>
+	function assertThisLine() {}
+</script>
+
+{foo.bar.baz}
diff --git a/test/sourcemaps/samples/two-scripts/test.js b/test/sourcemaps/samples/two-scripts/test.js
new file mode 100644
index 0000000000..70901af8c9
--- /dev/null
+++ b/test/sourcemaps/samples/two-scripts/test.js
@@ -0,0 +1,16 @@
+export function test({ assert, input, js }) {
+	const expected = input.locate( 'assertThisLine' );
+	const start = js.locate( 'assertThisLine' );
+
+	const actual = js.mapConsumer.originalPositionFor({
+		line: start.line + 1,
+		column: start.column
+	});
+
+	assert.deepEqual( actual, {
+		source: 'input.svelte',
+		name: null,
+		line: expected.line + 1,
+		column: expected.column
+	});
+}
diff --git a/test/sourcemaps/samples/typescript/_config.js b/test/sourcemaps/samples/typescript/_config.js
new file mode 100644
index 0000000000..c8a955dfbd
--- /dev/null
+++ b/test/sourcemaps/samples/typescript/_config.js
@@ -0,0 +1,26 @@
+import * as ts from 'typescript';
+
+export default {
+	js_map_sources: [
+		'input.svelte'
+	],
+	preprocess: [
+		{
+			script: ({ content, filename }) => {
+				const { outputText, sourceMapText } = ts.transpileModule(content, {
+					fileName: filename,
+					compilerOptions: {
+						target: ts.ScriptTarget.ES2015,
+						module: ts.ModuleKind.ES2015,
+						sourceMap: true
+					}
+				});
+
+				return {
+					code: outputText,
+					map: sourceMapText
+				};
+			}
+		}
+	]
+};
diff --git a/test/sourcemaps/samples/typescript/input.svelte b/test/sourcemaps/samples/typescript/input.svelte
new file mode 100644
index 0000000000..93639544b6
--- /dev/null
+++ b/test/sourcemaps/samples/typescript/input.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	let count: number = 0;
+
+	interface ITimeoutDestroyer {
+		(): void; // send timeout to the void!
+	}
+
+	onMount(() => {
+		const id = setInterval(() => count++, 1000);
+		const clear: ITimeoutDestroyer = () => clearInterval(id);
+		return clear;
+	});
+</script>
+
+<h1>Hello world!</h1>
+<div>Counter value: {count}</div>
diff --git a/test/sourcemaps/samples/typescript/test.js b/test/sourcemaps/samples/typescript/test.js
new file mode 100644
index 0000000000..bec397e33c
--- /dev/null
+++ b/test/sourcemaps/samples/typescript/test.js
@@ -0,0 +1,21 @@
+import { assert_mapped, assert_not_located } from '../../helpers';
+
+export function test({ input, preprocessed }) {
+	// TS => JS code
+	assert_mapped({
+		code: 'let count = 0;',
+		input_code: 'let count: number = 0;',
+		input: input.locate,
+		preprocessed
+	});
+
+	// Markup, not touched
+	assert_mapped({
+		code: '<h1>Hello world!</h1>',
+		input: input.locate,
+		preprocessed
+	});
+	
+	// TS types, removed
+	assert_not_located('ITimeoutDestroyer', preprocessed.locate_1);
+}
diff --git a/test/stats/index.ts b/test/stats/index.ts
new file mode 100644
index 0000000000..a6efd93d22
--- /dev/null
+++ b/test/stats/index.ts
@@ -0,0 +1,60 @@
+import * as fs from 'fs';
+import * as assert from 'assert';
+import { svelte, loadConfig, tryToLoadJson } from '../helpers';
+
+describe('stats', () => {
+	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
+		if (dir[0] === '.') return;
+
+		// add .solo to a sample directory name to only run that test
+		const solo = /\.solo/.test(dir);
+		const skip = /\.skip/.test(dir);
+
+		if (solo && process.env.CI) {
+			throw new Error('Forgot to remove `solo: true` from test');
+		}
+
+		(solo ? it.only : skip ? it.skip : it)(dir, () => {
+			const config = loadConfig(`${__dirname}/samples/${dir}/_config.js`);
+			const filename = `${__dirname}/samples/${dir}/input.svelte`;
+			const input = fs.readFileSync(filename, 'utf-8').replace(/\s+$/, '');
+
+			const expectedError = tryToLoadJson(
+				`${__dirname}/samples/${dir}/error.json`
+			);
+
+			let result;
+			let error;
+
+			try {
+				result = svelte.compile(input, config.options);
+				config.test(assert, result.stats);
+			} catch (e) {
+				error = e;
+			}
+
+			if (error || expectedError) {
+				if (error && !expectedError) {
+					throw error;
+				}
+
+				if (expectedError && !error) {
+					throw new Error(`Expected an error: ${expectedError.message}`);
+				}
+
+				assert.equal(error.message, expectedError.message);
+				assert.deepEqual(error.start, expectedError.start);
+				assert.deepEqual(error.end, expectedError.end);
+				assert.equal(error.pos, expectedError.pos);
+			}
+		});
+	});
+
+	it('returns a stats object when options.generate is false', () => {
+		const { stats } = svelte.compile('', {
+			generate: false
+		});
+
+		assert.equal(typeof stats.timings.total, 'number');
+	});
+});
diff --git a/test/stats/samples/basic/_config.js b/test/stats/samples/basic/_config.js
new file mode 100644
index 0000000000..7f1d557d23
--- /dev/null
+++ b/test/stats/samples/basic/_config.js
@@ -0,0 +1,6 @@
+export default {
+	test(assert, stats) {
+		assert.equal(typeof stats.timings, 'object');
+		assert.equal(typeof stats.timings.total, 'number');
+	}
+};
diff --git a/test/stats/samples/basic/input.svelte b/test/stats/samples/basic/input.svelte
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/test/store/index.ts b/test/store/index.ts
new file mode 100644
index 0000000000..b6fc5940e1
--- /dev/null
+++ b/test/store/index.ts
@@ -0,0 +1,414 @@
+import * as assert from 'assert';
+import { readable, writable, derived, get } from '../../store';
+
+describe('store', () => {
+	describe('writable', () => {
+		it('creates a writable store', () => {
+			const count = writable(0);
+			const values = [];
+
+			const unsubscribe = count.subscribe(value => {
+				values.push(value);
+			});
+
+			count.set(1);
+			count.update(n => n + 1);
+
+			unsubscribe();
+
+			count.set(3);
+			count.update(n => n + 1);
+
+			assert.deepEqual(values, [0, 1, 2]);
+		});
+
+		it('creates an undefined writable store', () => {
+			const store = writable();
+			const values = [];
+
+			const unsubscribe = store.subscribe(value => {
+				values.push(value);
+			});
+
+			unsubscribe();
+
+			assert.deepEqual(values, [undefined]);
+		});
+
+		it('calls provided subscribe handler', () => {
+			let called = 0;
+
+			const store = writable(0, () => {
+				called += 1;
+				return () => called -= 1;
+			});
+
+			const unsubscribe1 = store.subscribe(() => { });
+			assert.equal(called, 1);
+
+			const unsubscribe2 = store.subscribe(() => { });
+			assert.equal(called, 1);
+
+			unsubscribe1();
+			assert.equal(called, 1);
+
+			unsubscribe2();
+			assert.equal(called, 0);
+		});
+
+		it('does not assume immutable data', () => {
+			const obj = {};
+			let called = 0;
+
+			const store = writable(obj);
+
+			store.subscribe(() => {
+				called += 1;
+			});
+
+			store.set(obj);
+			assert.equal(called, 2);
+
+			store.update(obj => obj);
+			assert.equal(called, 3);
+		});
+
+		it('only calls subscriber once initially, including on resubscriptions', () => {
+			let num = 0;
+			const store = writable(num, set => set(num += 1));
+
+			let count1 = 0;
+			let count2 = 0;
+
+			store.subscribe(() => count1 += 1)();
+			assert.equal(count1, 1);
+
+			const unsubscribe = store.subscribe(() => count2 += 1);
+			assert.equal(count2, 1);
+
+			unsubscribe();
+		});
+	});
+
+	describe('readable', () => {
+		it('creates a readable store', () => {
+			let running;
+			let tick;
+
+			const store = readable(undefined, set => {
+				tick = set;
+				running = true;
+
+				set(0);
+
+				return () => {
+					tick = () => { };
+					running = false;
+				};
+			});
+
+			assert.ok(!running);
+
+			const values = [];
+
+			const unsubscribe = store.subscribe(value => {
+				values.push(value);
+			});
+
+			assert.ok(running);
+			tick(1);
+			tick(2);
+
+			unsubscribe();
+
+			assert.ok(!running);
+			tick(3);
+			tick(4);
+
+			assert.deepEqual(values, [0, 1, 2]);
+		});
+
+		it('creates an undefined readable store', () => {
+			const store = readable();
+			const values = [];
+
+			const unsubscribe = store.subscribe(value => {
+				values.push(value);
+			});
+
+			unsubscribe();
+
+			assert.deepEqual(values, [undefined]);
+		});
+
+		it('creates a readable store without updater', () => {
+			const store = readable(100);
+			const values = [];
+
+			const unsubscribe = store.subscribe(value => {
+				values.push(value);
+			});
+
+			unsubscribe();
+
+			assert.deepEqual(values, [100]);
+		});
+	});
+
+	const fake_observable = {
+		subscribe(fn) {
+			fn(42);
+			return {
+				unsubscribe: () => {}
+			};
+		}
+	};
+
+	describe('derived', () => {
+		it('maps a single store', () => {
+			const a = writable(1);
+			const b = derived(a, n => n * 2);
+
+			const values = [];
+
+			const unsubscribe = b.subscribe(value => {
+				values.push(value);
+			});
+
+			a.set(2);
+			assert.deepEqual(values, [2, 4]);
+
+			unsubscribe();
+
+			a.set(3);
+			assert.deepEqual(values, [2, 4]);
+		});
+
+		it('maps multiple stores', () => {
+			const a = writable(2);
+			const b = writable(3);
+			const c = derived(([a, b]), ([a, b]) => a * b);
+
+			const values = [];
+
+			const unsubscribe = c.subscribe(value => {
+				values.push(value);
+			});
+
+			a.set(4);
+			b.set(5);
+			assert.deepEqual(values, [6, 12, 20]);
+
+			unsubscribe();
+
+			a.set(6);
+			assert.deepEqual(values, [6, 12, 20]);
+		});
+
+		it('passes optional set function', () => {
+			const number = writable(1);
+			const evens = derived(number, (n, set) => {
+				if (n % 2 === 0) set(n);
+			}, 0);
+
+			const values = [];
+
+			const unsubscribe = evens.subscribe(value => {
+				values.push(value);
+			});
+
+			number.set(2);
+			number.set(3);
+			number.set(4);
+			number.set(5);
+			assert.deepEqual(values, [0, 2, 4]);
+
+			unsubscribe();
+
+			number.set(6);
+			number.set(7);
+			number.set(8);
+			assert.deepEqual(values, [0, 2, 4]);
+		});
+
+		it('prevents glitches', () => {
+			const lastname = writable('Jekyll');
+			const firstname = derived(lastname, n => n === 'Jekyll' ? 'Henry' : 'Edward');
+
+			const fullname = derived([firstname, lastname], names => names.join(' '));
+
+			const values = [];
+
+			const unsubscribe = fullname.subscribe(value => {
+				values.push(value);
+			});
+
+			lastname.set('Hyde');
+
+			assert.deepEqual(values, [
+				'Henry Jekyll',
+				'Edward Hyde'
+			]);
+
+			unsubscribe();
+		});
+
+		it('prevents diamond dependency problem', () => {
+			const count = writable(0);
+			const values = [];
+
+			const a = derived(count, $count => {
+				return 'a' + $count;
+			});
+
+			const b = derived(count, $count => {
+				return 'b' + $count;
+			});
+
+			const combined = derived([a, b], ([a, b]) => {
+				return a + b;
+			});
+
+			const unsubscribe = combined.subscribe(v => {
+				values.push(v);
+			});
+
+			assert.deepEqual(values, ['a0b0']);
+
+			count.set(1);
+			assert.deepEqual(values, ['a0b0', 'a1b1']);
+
+			unsubscribe();
+		});
+
+		it('derived dependency does not update and shared ancestor updates', () => {
+			const root = writable({ a: 0, b:0 });
+			const values = [];
+
+			const a = derived(root, $root => {
+				return 'a' + $root.a;
+			});
+
+			const b = derived([a, root], ([$a, $root]) => {
+				return 'b' + $root.b + $a;
+			});
+
+			const unsubscribe = b.subscribe(v => {
+				values.push(v);
+			});
+
+			assert.deepEqual(values, ['b0a0']);
+
+			root.set({ a: 0, b: 1 });
+			assert.deepEqual(values, ['b0a0', 'b1a0']);
+
+			unsubscribe();
+		});
+
+		it('is updated with safe_not_equal logic', () => {
+			const arr = [0];
+
+			const number = writable(1);
+			const numbers = derived(number, $number => {
+				arr[0] = $number;
+				return arr;
+			});
+
+			const concatenated = [];
+
+			const unsubscribe = numbers.subscribe(value => {
+				concatenated.push(...value);
+			});
+
+			number.set(2);
+			number.set(3);
+
+			assert.deepEqual(concatenated, [1, 2, 3]);
+
+			unsubscribe();
+		});
+
+		it('calls a cleanup function', () => {
+			const num = writable(1);
+
+			const values = [];
+			const cleaned_up = [];
+
+			const d = derived(num, ($num, set) => {
+				set($num * 2);
+
+				return function cleanup() {
+					cleaned_up.push($num);
+				};
+			});
+
+			num.set(2);
+
+			const unsubscribe = d.subscribe(value => {
+				values.push(value);
+			});
+
+			num.set(3);
+			num.set(4);
+
+			assert.deepEqual(values, [4, 6, 8]);
+			assert.deepEqual(cleaned_up, [2, 3]);
+
+			unsubscribe();
+
+			assert.deepEqual(cleaned_up, [2, 3, 4]);
+		});
+
+		it('discards non-function return values', () => {
+			const num = writable(1);
+
+			const values = [];
+
+			const d = derived(num, ($num, set) => {
+				set($num * 2);
+				return {};
+			});
+
+			num.set(2);
+
+			const unsubscribe = d.subscribe(value => {
+				values.push(value);
+			});
+
+			num.set(3);
+			num.set(4);
+
+			assert.deepEqual(values, [4, 6, 8]);
+
+			unsubscribe();
+		});
+
+		it('allows derived with different types', () => {
+			const a = writable('one');
+			const b = writable(1);
+			const c = derived([a, b], ([a, b]) => `${a} ${b}`);
+
+			assert.deepEqual(get(c), 'one 1');
+
+			a.set('two');
+			b.set(2);
+			assert.deepEqual(get(c), 'two 2');
+		});
+
+		it('works with RxJS-style observables', () => {
+			const d = derived(fake_observable, _ => _);
+			assert.equal(get(d), 42);
+		});
+	});
+
+	describe('get', () => {
+		it('gets the current value of a store', () => {
+			const store = readable(42, () => { });
+			assert.equal(get(store), 42);
+		});
+
+		it('works with RxJS-style observables', () => {
+			assert.equal(get(fake_observable), 42);
+		});
+	});
+});
diff --git a/test/svelte-styles-csp/index.ts b/test/svelte-styles-csp/index.ts
new file mode 100644
index 0000000000..56414bad1c
--- /dev/null
+++ b/test/svelte-styles-csp/index.ts
@@ -0,0 +1,41 @@
+import * as assert from 'assert';
+import {StyleSheetTestObj, get_svelte_style_sheet_index} from '../../src/runtime/internal/style_manager';
+
+describe('svelte-styles-csp', () => {
+  describe('test get_svelte_style_sheet_index',  () => {
+	it('return correct value of styleSheetIndex for svelte-stylesheet for stylesheet collection', () => {
+		const styleSheetIndex: number = 2;
+		const myStyleSheetTestObjList = new Array<StyleSheetTestObj>();
+		myStyleSheetTestObjList[0] = new StyleSheetTestObj('my-stylesheet');
+		myStyleSheetTestObjList[1] = new StyleSheetTestObj('my-stylesheet2');
+		myStyleSheetTestObjList[styleSheetIndex] = new StyleSheetTestObj('svelte-stylesheet');
+		myStyleSheetTestObjList[3] = new StyleSheetTestObj('my-stylesheet3');
+		const result = get_svelte_style_sheet_index(myStyleSheetTestObjList);
+
+		assert.equal(result, styleSheetIndex);
+	});
+	it('returns undefined if no svelte-stylesheet is found', () => {
+		const myStyleSheetTestObjList = new Array<StyleSheetTestObj>();
+		myStyleSheetTestObjList[0] = new StyleSheetTestObj('my-stylesheet');
+		myStyleSheetTestObjList[1] = new StyleSheetTestObj('my-stylesheet2');
+		myStyleSheetTestObjList[2] = new StyleSheetTestObj('my-stylesheet3');
+		const result = get_svelte_style_sheet_index(myStyleSheetTestObjList);
+
+		assert.equal(result, undefined);
+	});
+	it('returns undefined if svelte-stylesheet has css rules', () => {
+		const myStyleSheetTestObjList = new Array<StyleSheetTestObj>();
+		myStyleSheetTestObjList[0] = new StyleSheetTestObj('svelte-stylesheet', 'text/css', ['body { width:100%; }']);
+		const result = get_svelte_style_sheet_index(myStyleSheetTestObjList);
+
+		assert.equal(result, undefined);
+	});
+	it('returns undefined if svelte-stylesheet is not of type text/css', () => {
+		const myStyleSheetTestObjList = new Array<StyleSheetTestObj>();
+		myStyleSheetTestObjList[0] = new StyleSheetTestObj('svelte-stylesheet', 'text/html');
+		const result = get_svelte_style_sheet_index(myStyleSheetTestObjList);
+
+		assert.equal(result, undefined);
+	});
+});
+});
diff --git a/test/test.ts b/test/test.ts
new file mode 100644
index 0000000000..181e9351c1
--- /dev/null
+++ b/test/test.ts
@@ -0,0 +1,21 @@
+const glob = require('tiny-glob/sync.js');
+
+require('./setup');
+
+// bind internal to jsdom
+require('./helpers.ts');
+require('../internal');
+
+console.clear();
+
+const test_folders = glob('*/index.ts', { cwd: 'test' });
+const solo_folders = test_folders.filter(folder => /\.solo/.test(folder));
+
+if (solo_folders.length) {
+	if (process.env.CI) {
+		throw new Error('Forgot to remove `.solo` from test');
+	}
+	solo_folders.forEach(name => require('./' + name));
+} else {
+	test_folders.forEach(name => require('./' + name));
+}
diff --git a/test/tsconfig.json b/test/tsconfig.json
new file mode 100644
index 0000000000..82eaf0245e
--- /dev/null
+++ b/test/tsconfig.json
@@ -0,0 +1,10 @@
+{
+	"extends": "../tsconfig.json",
+	"include": ["."],
+
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"noEmit": true
+	}
+}
diff --git a/test/utils/index.ts b/test/utils/index.ts
new file mode 100644
index 0000000000..a8aed9387a
--- /dev/null
+++ b/test/utils/index.ts
@@ -0,0 +1,16 @@
+import * as assert from 'assert';
+import { trim_start, trim_end } from '../../src/compiler/utils/trim';
+
+describe('utils', () => {
+	describe('trim', () => {
+		it('trim_start', () => {
+			const value = trim_start('	\r\n\t svelte content \r\n\t	');
+			assert.equal(value, 'svelte content \r\n\t	');
+		});
+
+		it('trim_end', () => {
+			const value = trim_end('	\r\n\t svelte content \r\n\t	');
+			assert.equal(value, '	\r\n\t svelte content');
+		});
+	});
+});
diff --git a/test/validator/index.ts b/test/validator/index.ts
new file mode 100644
index 0000000000..e58be87a3a
--- /dev/null
+++ b/test/validator/index.ts
@@ -0,0 +1,135 @@
+import * as fs from 'fs';
+import * as assert from 'assert';
+import { svelte, loadConfig, tryToLoadJson } from '../helpers';
+
+describe('validate', () => {
+	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
+		if (dir[0] === '.') return;
+
+		// add .solo to a sample directory name to only run that test
+		const solo = /\.solo/.test(dir);
+		const skip = /\.skip/.test(dir);
+
+		if (solo && process.env.CI) {
+			throw new Error('Forgot to remove `solo: true` from test');
+		}
+
+		(solo ? it.only : skip ? it.skip : it)(dir, () => {
+			const config = loadConfig(`${__dirname}/samples/${dir}/_config.js`);
+
+			const input = fs.readFileSync(`${__dirname}/samples/${dir}/input.svelte`, 'utf-8').replace(/\s+$/, '').replace(/\r/g, '');
+			const expected_warnings = tryToLoadJson(`${__dirname}/samples/${dir}/warnings.json`) || [];
+			const expected_errors = tryToLoadJson(`${__dirname}/samples/${dir}/errors.json`);
+			const options = tryToLoadJson(`${__dirname}/samples/${dir}/options.json`);
+
+			let error;
+
+			try {
+				const { warnings } = svelte.compile(input, {
+					dev: config.dev,
+					legacy: config.legacy,
+					generate: false,
+					customElement: config.customElement,
+					...options
+				});
+
+				assert.deepEqual(warnings.map(w => ({
+					code: w.code,
+					message: w.message,
+					pos: w.pos,
+					start: w.start,
+					end: w.end
+				})), expected_warnings);
+			} catch (e) {
+				error = e;
+			}
+
+			const expected = expected_errors && expected_errors[0];
+
+			if (error || expected) {
+				if (error && !expected) {
+					throw error;
+				}
+
+				if (expected && !error) {
+					throw new Error(`Expected an error: ${expected.message}`);
+				}
+
+				try {
+					assert.equal(error.code, expected.code);
+					assert.equal(error.message, expected.message);
+					assert.deepEqual(error.start, expected.start);
+					assert.deepEqual(error.end, expected.end);
+					assert.equal(error.pos, expected.pos);
+				} catch (e) {
+					console.error(error); // eslint-disable-line no-console
+					throw e;
+				}
+			}
+		});
+	});
+
+	it('errors if options.name is illegal', () => {
+		assert.throws(() => {
+			svelte.compile('<div></div>', {
+				name: 'not.valid',
+				generate: false
+			});
+		}, /options\.name must be a valid identifier/);
+	});
+
+	it('warns if options.name is not capitalised', () => {
+		const { warnings } = svelte.compile('<div></div>', {
+			name: 'lowercase',
+			generate: false
+		});
+
+		assert.deepEqual(warnings.map(w => ({
+			code: w.code,
+			message: w.message
+		})), [{
+			code: 'options-lowercase-name',
+			message: 'options.name should be capitalised'
+		}]);
+	});
+
+	it('does not warn if options.name begins with non-alphabetic character', () => {
+		const { warnings } = svelte.compile('<div></div>', {
+			name: '_',
+			generate: false
+		});
+
+		assert.deepEqual(warnings, []);
+	});
+
+	it('errors if namespace is provided but unrecognised', () => {
+		assert.throws(() => {
+			svelte.compile('<div></div>', {
+				name: 'test',
+				namespace: 'svefefe'
+			});
+		}, /Invalid namespace 'svefefe'/);
+	});
+
+	it('errors with a hint if namespace is provided but unrecognised but close', () => {
+		assert.throws(() => {
+			svelte.compile('<div></div>', {
+				name: 'test',
+				namespace: 'foriegn'
+			});
+		}, /Invalid namespace 'foriegn' \(did you mean 'foreign'\?\)/);
+	});
+
+	it('does not throw error if \'this\' is bound for foreign element', () => {
+		assert.doesNotThrow(() => {
+			svelte.compile(`
+			<script>
+				let whatever;
+			</script>
+			<div bind:this={whatever} />`, {
+				name: 'test',
+				namespace: 'foreign'
+			});
+		});
+	});
+});
diff --git a/test/validator/samples/a11y-alt-text/input.svelte b/test/validator/samples/a11y-alt-text/input.svelte
new file mode 100644
index 0000000000..1c3b5ac5ce
--- /dev/null
+++ b/test/validator/samples/a11y-alt-text/input.svelte
@@ -0,0 +1,11 @@
+<img src='foo.jpg'>
+
+<map>
+	<area>
+</map>
+
+<object></object>
+
+<input type='image'>
+
+<input type='image' alt='hey'>
diff --git a/test/validator/samples/a11y-alt-text/warnings.json b/test/validator/samples/a11y-alt-text/warnings.json
new file mode 100644
index 0000000000..7ce5fb2d8f
--- /dev/null
+++ b/test/validator/samples/a11y-alt-text/warnings.json
@@ -0,0 +1,65 @@
+[
+	{
+		"code": "a11y-missing-attribute",
+		"message": "A11y: <img> element should have an alt attribute",
+		"start": {
+			"line": 1,
+			"column": 0,
+			"character": 0
+		},
+		"end": {
+			"line": 1,
+			"column": 19,
+			"character": 19
+		},
+		"pos": 0
+	},
+
+	{
+		"code": "a11y-missing-attribute",
+		"message": "A11y: <area> element should have an alt, aria-label or aria-labelledby attribute",
+		"start": {
+			"line": 4,
+			"column": 1,
+			"character": 28
+		},
+		"end": {
+			"line": 4,
+			"column": 7,
+			"character": 34
+		},
+		"pos": 28
+	},
+
+	{
+		"code": "a11y-missing-attribute",
+		"message": "A11y: <object> element should have a title, aria-label or aria-labelledby attribute",
+		"start": {
+			"line": 7,
+			"column": 0,
+			"character": 43
+		},
+		"end": {
+			"line": 7,
+			"column": 17,
+			"character": 60
+		},
+		"pos": 43
+	},
+
+	{
+		"code": "a11y-missing-attribute",
+		"message": "A11y: <input type=\"image\"> element should have an alt, aria-label or aria-labelledby attribute",
+		"start": {
+			"line": 9,
+			"column": 0,
+			"character": 62
+		},
+		"end": {
+			"line": 9,
+			"column": 20,
+			"character": 82
+		},
+		"pos": 62
+	}
+]
diff --git a/test/validator/samples/a11y-anchor-has-content/input.svelte b/test/validator/samples/a11y-anchor-has-content/input.svelte
new file mode 100644
index 0000000000..e246a1e593
--- /dev/null
+++ b/test/validator/samples/a11y-anchor-has-content/input.svelte
@@ -0,0 +1,2 @@
+<a href='/foo'></a>
+<a href="#{'foo'}">bar</a>
diff --git a/test/validator/samples/a11y-anchor-has-content/warnings.json b/test/validator/samples/a11y-anchor-has-content/warnings.json
new file mode 100644
index 0000000000..8708311f3c
--- /dev/null
+++ b/test/validator/samples/a11y-anchor-has-content/warnings.json
@@ -0,0 +1,15 @@
+[{
+	"code": "a11y-missing-content",
+	"message": "A11y: <a> element should have child content",
+	"start": {
+		"line": 1,
+		"column": 0,
+		"character": 0
+	},
+	"end": {
+		"line": 1,
+		"column": 19,
+		"character": 19
+	},
+	"pos": 0
+}]
\ No newline at end of file
diff --git a/test/validator/samples/a11y-anchor-in-svg-is-valid/input.svelte b/test/validator/samples/a11y-anchor-in-svg-is-valid/input.svelte
new file mode 100644
index 0000000000..48a5599aa2
--- /dev/null
+++ b/test/validator/samples/a11y-anchor-in-svg-is-valid/input.svelte
@@ -0,0 +1,3 @@
+<svg><text><a>not actually a link</a></text></svg>
+<svg><text><a xlink:href=''>not actually a link</a></text></svg>
+<svg><text><a xlink:href='#'>not actually a link</a></text></svg>
diff --git a/test/validator/samples/a11y-anchor-in-svg-is-valid/warnings.json b/test/validator/samples/a11y-anchor-in-svg-is-valid/warnings.json
new file mode 100644
index 0000000000..eb62ce8db6
--- /dev/null
+++ b/test/validator/samples/a11y-anchor-in-svg-is-valid/warnings.json
@@ -0,0 +1,47 @@
+[
+	{
+		"code": "a11y-missing-attribute",
+		"message": "A11y: <a> element should have an href attribute",
+		"start": {
+			"line": 1,
+			"column": 11,
+			"character": 11
+		},
+		"end": {
+			"line": 1,
+			"column": 37,
+			"character": 37
+		},
+		"pos": 11
+	},
+	{
+		"code": "a11y-invalid-attribute",
+		"message": "A11y: '' is not a valid xlink:href attribute",
+		"start": {
+			"line": 2,
+			"column": 14,
+			"character": 65
+		},
+		"end": {
+			"line": 2,
+			"column": 27,
+			"character": 78
+		},
+		"pos": 65
+	},
+	{
+		"code": "a11y-invalid-attribute",
+		"message": "A11y: '#' is not a valid xlink:href attribute",
+		"start": {
+			"line": 3,
+			"column": 14,
+			"character": 130
+		},
+		"end": {
+			"line": 3,
+			"column": 28,
+			"character": 144
+		},
+		"pos": 130
+	}
+]
diff --git a/test/validator/samples/a11y-anchor-is-valid/input.svelte b/test/validator/samples/a11y-anchor-is-valid/input.svelte
new file mode 100644
index 0000000000..8933bd7560
--- /dev/null
+++ b/test/validator/samples/a11y-anchor-is-valid/input.svelte
@@ -0,0 +1,8 @@
+<a>not actually a link</a>
+<a href=''>invalid</a>
+<a href='#'>invalid</a>
+<a href='javascript:void(0)'>invalid</a>
+<a name=''>invalid</a>
+<a id=''>invalid</a>
+<a name='fragment'>valid</a>
+<a id='fragment'>valid</a>
\ No newline at end of file
diff --git a/test/validator/samples/a11y-anchor-is-valid/warnings.json b/test/validator/samples/a11y-anchor-is-valid/warnings.json
new file mode 100644
index 0000000000..f04c6f1593
--- /dev/null
+++ b/test/validator/samples/a11y-anchor-is-valid/warnings.json
@@ -0,0 +1,92 @@
+[
+	{
+		"code": "a11y-missing-attribute",
+		"message": "A11y: <a> element should have an href attribute",
+		"start": {
+			"line": 1,
+			"column": 0,
+			"character": 0
+		},
+		"end": {
+			"line": 1,
+			"column": 26,
+			"character": 26
+		},
+		"pos": 0
+	},
+	{
+		"code": "a11y-invalid-attribute",
+		"message": "A11y: '' is not a valid href attribute",
+		"start": {
+			"line": 2,
+			"column": 3,
+			"character": 30
+		},
+		"end": {
+			"line": 2,
+			"column": 10,
+			"character": 37
+		},
+		"pos": 30
+	},
+	{
+		"code": "a11y-invalid-attribute",
+		"message": "A11y: '#' is not a valid href attribute",
+		"start": {
+			"line": 3,
+			"column": 3,
+			"character": 53
+		},
+		"end": {
+			"line": 3,
+			"column": 11,
+			"character": 61
+		},
+		"pos": 53
+	},
+	{
+		"code": "a11y-invalid-attribute",
+		"message": "A11y: 'javascript:void(0)' is not a valid href attribute",
+		"start": {
+			"line": 4,
+			"column": 3,
+			"character": 77
+		},
+		"end": {
+			"line": 4,
+			"column": 28,
+			"character": 102
+		},
+		"pos": 77
+	},
+	{
+		"code": "a11y-missing-attribute",
+		"message": "A11y: <a> element should have an href attribute",
+		"start": {
+			"line": 5,
+			"column": 0,
+			"character": 115
+		},
+		"end": {
+			"line": 5,
+			"column": 22,
+			"character": 137
+		},
+		"pos": 115
+	},
+	{
+		"code": "a11y-missing-attribute",
+		"message": "A11y: <a> element should have an href attribute",
+		"start": {
+			"line": 6,
+			"column": 0,
+			"character": 138
+		},
+		"end": {
+			"line": 6,
+			"column": 20,
+			"character": 158
+		},
+		"pos": 138
+	}
+]
diff --git a/test/validator/samples/a11y-aria-props/input.svelte b/test/validator/samples/a11y-aria-props/input.svelte
new file mode 100644
index 0000000000..21c6327960
--- /dev/null
+++ b/test/validator/samples/a11y-aria-props/input.svelte
@@ -0,0 +1 @@
+<input type="image" aria-labeledby="foo">
\ No newline at end of file
diff --git a/test/validator/samples/a11y-aria-props/warnings.json b/test/validator/samples/a11y-aria-props/warnings.json
new file mode 100644
index 0000000000..73d34fc589
--- /dev/null
+++ b/test/validator/samples/a11y-aria-props/warnings.json
@@ -0,0 +1,33 @@
+[
+	{
+		"code": "a11y-unknown-aria-attribute",
+		"message": "A11y: Unknown aria attribute 'aria-labeledby' (did you mean 'labelledby'?)",
+		"start": {
+			"line": 1,
+			"column": 20,
+			"character": 20
+		},
+		"end": {
+			"line": 1,
+			"column": 40,
+			"character": 40
+		},
+		"pos": 20
+	},
+
+	{
+		"code": "a11y-missing-attribute",
+		"message": "A11y: <input type=\"image\"> element should have an alt, aria-label or aria-labelledby attribute",
+		"start": {
+			"column": 0,
+			"line": 1,
+			"character": 0
+		},
+		"end": {
+			"line": 1,
+			"column": 41,
+			"character": 41
+		},
+		"pos": 0
+	}
+]
diff --git a/test/validator/samples/a11y-aria-role/input.svelte b/test/validator/samples/a11y-aria-role/input.svelte
new file mode 100644
index 0000000000..3089d84e5b
--- /dev/null
+++ b/test/validator/samples/a11y-aria-role/input.svelte
@@ -0,0 +1 @@
+<div role="toooltip"></div>
\ No newline at end of file
diff --git a/test/validator/samples/a11y-aria-role/warnings.json b/test/validator/samples/a11y-aria-role/warnings.json
new file mode 100644
index 0000000000..22fb2d52b6
--- /dev/null
+++ b/test/validator/samples/a11y-aria-role/warnings.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "a11y-unknown-role",
+		"message": "A11y: Unknown role 'toooltip' (did you mean 'tooltip'?)",
+		"start": {
+			"line": 1,
+			"column": 5,
+			"character": 5
+		},
+		"end": {
+			"line": 1,
+			"column": 20,
+			"character": 20
+		},
+		"pos": 5
+	}
+]
diff --git a/test/validator/samples/a11y-aria-unsupported-element/input.svelte b/test/validator/samples/a11y-aria-unsupported-element/input.svelte
new file mode 100644
index 0000000000..0a674c4284
--- /dev/null
+++ b/test/validator/samples/a11y-aria-unsupported-element/input.svelte
@@ -0,0 +1,2 @@
+<meta aria-hidden="false">
+<meta role="tooltip">
\ No newline at end of file
diff --git a/test/validator/samples/a11y-aria-unsupported-element/warnings.json b/test/validator/samples/a11y-aria-unsupported-element/warnings.json
new file mode 100644
index 0000000000..4597e3e868
--- /dev/null
+++ b/test/validator/samples/a11y-aria-unsupported-element/warnings.json
@@ -0,0 +1,33 @@
+[
+	{
+		"code": "a11y-aria-attributes",
+		"message": "A11y: <meta> should not have aria-* attributes",
+		"start": {
+			"line": 1,
+			"column": 6,
+			"character": 6
+		},
+		"end": {
+			"line": 1,
+			"column": 25,
+			"character": 25
+		},
+		"pos": 6
+	},
+
+	{
+		"code": "a11y-misplaced-role",
+		"message": "A11y: <meta> should not have role attribute",
+		"start": {
+			"line": 2,
+			"column": 6,
+			"character": 33
+		},
+		"end": {
+			"line": 2,
+			"column": 20,
+			"character": 47
+		},
+		"pos": 33
+	}
+]
diff --git a/test/validator/samples/a11y-contenteditable-element-without-child/errors.json b/test/validator/samples/a11y-contenteditable-element-without-child/errors.json
new file mode 100644
index 0000000000..dd2a915b9d
--- /dev/null
+++ b/test/validator/samples/a11y-contenteditable-element-without-child/errors.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "missing-contenteditable-attribute",
+		"message": "'contenteditable' attribute is required for textContent and innerHTML two-way bindings",
+		"start": {
+			"line": 6,
+			"column": 3,
+			"character": 157
+		},
+		"end": {
+			"line": 6,
+			"column": 24,
+			"character": 178
+		},
+		"pos": 157
+	}
+]
diff --git a/test/validator/samples/a11y-contenteditable-element-without-child/input.svelte b/test/validator/samples/a11y-contenteditable-element-without-child/input.svelte
new file mode 100644
index 0000000000..0702c3cb45
--- /dev/null
+++ b/test/validator/samples/a11y-contenteditable-element-without-child/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	let text = 'Hello world';
+</script>
+<p bind:textContent={text} contenteditable="true"></p>
+<p bind:innerHTML={text} contenteditable="true"></p>
+<p bind:innerHTML={text}></p>
diff --git a/test/validator/samples/a11y-figcaption-in-non-element-block/input.svelte b/test/validator/samples/a11y-figcaption-in-non-element-block/input.svelte
new file mode 100644
index 0000000000..33e7a891f0
--- /dev/null
+++ b/test/validator/samples/a11y-figcaption-in-non-element-block/input.svelte
@@ -0,0 +1,10 @@
+<script>
+	let caption = 'a foo in its natural habitat';
+</script>
+
+<figure>
+	<img src='foo.jpg' alt='a foo'>
+	{#if caption}
+		<figcaption>{caption}</figcaption>
+	{/if}
+</figure>
diff --git a/test/validator/samples/a11y-figcaption-in-non-element-block/warnings.json b/test/validator/samples/a11y-figcaption-in-non-element-block/warnings.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/test/validator/samples/a11y-figcaption-in-non-element-block/warnings.json
@@ -0,0 +1 @@
+[]
diff --git a/test/validator/samples/a11y-figcaption-right-place/input.svelte b/test/validator/samples/a11y-figcaption-right-place/input.svelte
new file mode 100644
index 0000000000..783219c8f8
--- /dev/null
+++ b/test/validator/samples/a11y-figcaption-right-place/input.svelte
@@ -0,0 +1,7 @@
+<figure>
+	<img src='foo.jpg' alt='a foo'>
+
+	<figcaption>
+		a foo in its natural habitat
+	</figcaption>
+</figure>
\ No newline at end of file
diff --git a/test/validator/samples/a11y-figcaption-right-place/warnings.json b/test/validator/samples/a11y-figcaption-right-place/warnings.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/test/validator/samples/a11y-figcaption-right-place/warnings.json
@@ -0,0 +1 @@
+[]
diff --git a/test/validator/samples/a11y-figcaption-wrong-place/input.svelte b/test/validator/samples/a11y-figcaption-wrong-place/input.svelte
new file mode 100644
index 0000000000..e99d1cc86c
--- /dev/null
+++ b/test/validator/samples/a11y-figcaption-wrong-place/input.svelte
@@ -0,0 +1,19 @@
+<figure>
+	<img src='foo.jpg' alt='a foo'>
+
+	<figcaption>
+		a foo in its natural habitat
+	</figcaption>
+
+	<p>this should not be here</p>
+</figure>
+
+<figure>
+	<img src='foo.jpg' alt='a foo'>
+
+	<div class='markup-for-styling'>
+		<figcaption>
+			this element should be a child of the figure
+		</figcaption>
+	</div>
+</figure>
\ No newline at end of file
diff --git a/test/validator/samples/a11y-figcaption-wrong-place/warnings.json b/test/validator/samples/a11y-figcaption-wrong-place/warnings.json
new file mode 100644
index 0000000000..eba5b6f31e
--- /dev/null
+++ b/test/validator/samples/a11y-figcaption-wrong-place/warnings.json
@@ -0,0 +1,32 @@
+[
+	{
+		"code": "a11y-structure",
+		"message": "A11y: <figcaption> must be first or last child of <figure>",
+		"start": {
+			"line": 4,
+			"column": 1,
+			"character": 44
+		},
+		"end": {
+			"line": 6,
+			"column": 14,
+			"character": 102
+		},
+		"pos": 44
+	},
+	{
+		"code": "a11y-structure",
+		"message": "A11y: <figcaption> must be an immediate child of <figure>",
+		"start": {
+			"line": 15,
+			"column": 2,
+			"character": 226
+		},
+		"end": {
+			"line": 17,
+			"column": 15,
+			"character": 302
+		},
+		"pos": 226
+	}
+]
diff --git a/test/validator/samples/a11y-heading-has-content/input.svelte b/test/validator/samples/a11y-heading-has-content/input.svelte
new file mode 100644
index 0000000000..1414af825d
--- /dev/null
+++ b/test/validator/samples/a11y-heading-has-content/input.svelte
@@ -0,0 +1,2 @@
+<h1></h1>
+<h2 aria-hidden>invisible header</h2>
\ No newline at end of file
diff --git a/test/validator/samples/a11y-heading-has-content/warnings.json b/test/validator/samples/a11y-heading-has-content/warnings.json
new file mode 100644
index 0000000000..9cb77adc02
--- /dev/null
+++ b/test/validator/samples/a11y-heading-has-content/warnings.json
@@ -0,0 +1,33 @@
+[
+	{
+		"code": "a11y-missing-content",
+		"message": "A11y: <h1> element should have child content",
+		"start": {
+			"line": 1,
+			"column": 0,
+			"character": 0
+		},
+		"end": {
+			"line": 1,
+			"column": 9,
+			"character": 9
+		},
+		"pos": 0
+	},
+
+	{
+		"code": "a11y-hidden",
+		"message": "A11y: <h2> element should not be hidden",
+		"start": {
+			"line": 2,
+			"column": 4,
+			"character": 14
+		},
+		"end": {
+			"line": 2,
+			"column": 15,
+			"character": 25
+		},
+		"pos": 14
+	}
+]
diff --git a/test/validator/samples/a11y-html-has-lang/input.svelte b/test/validator/samples/a11y-html-has-lang/input.svelte
new file mode 100644
index 0000000000..ccc238e5d4
--- /dev/null
+++ b/test/validator/samples/a11y-html-has-lang/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let language;
+</script>
+
+<html lang="en"></html>
+<html lang="en-US"></html>
+<html lang={language}></html>
+
+<html></html>
diff --git a/test/validator/samples/a11y-html-has-lang/warnings.json b/test/validator/samples/a11y-html-has-lang/warnings.json
new file mode 100644
index 0000000000..2ac8a2e5e0
--- /dev/null
+++ b/test/validator/samples/a11y-html-has-lang/warnings.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "a11y-missing-attribute",
+		"message": "A11y: <html> element should have a lang attribute",
+		"start": {
+			"column": 0,
+			"line": 9,
+			"character": 124
+		},
+		"end": {
+			"line": 9,
+			"column": 13,
+			"character": 137
+		},
+		"pos": 124
+	}
+]
diff --git a/test/validator/samples/a11y-iframe-has-title/input.svelte b/test/validator/samples/a11y-iframe-has-title/input.svelte
new file mode 100644
index 0000000000..4689a2dcf7
--- /dev/null
+++ b/test/validator/samples/a11y-iframe-has-title/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let src;
+</script>
+
+<iframe src={src}></iframe>
\ No newline at end of file
diff --git a/test/validator/samples/a11y-iframe-has-title/warnings.json b/test/validator/samples/a11y-iframe-has-title/warnings.json
new file mode 100644
index 0000000000..cc80cceaa2
--- /dev/null
+++ b/test/validator/samples/a11y-iframe-has-title/warnings.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "a11y-missing-attribute",
+		"message": "A11y: <iframe> element should have a title attribute",
+		"start": {
+			"line": 5,
+			"column": 0,
+			"character": 37
+		},
+		"end": {
+			"line": 5,
+			"column": 27,
+			"character": 64
+		},
+		"pos": 37
+	}
+]
diff --git a/test/validator/samples/a11y-img-redundant-alt/input.svelte b/test/validator/samples/a11y-img-redundant-alt/input.svelte
new file mode 100644
index 0000000000..a3528a5c41
--- /dev/null
+++ b/test/validator/samples/a11y-img-redundant-alt/input.svelte
@@ -0,0 +1,9 @@
+<img src="foo" alt="Foo eating a sandwich." />
+<img src="bar" aria-hidden alt="Picture of me taking a photo of an image" />
+<img src="foo" alt="Photo of foo being weird." />
+<img src="bar" alt="Image of me at a bar!" />
+<img src="foo" alt="Picture of baz fixing a bug." />
+<img src="bar" alt="Plant doing photosynthesis in the afternoon" />
+<img src="foo" alt="Picturesque food" />
+<img src="baz" alt={'baz'} />
+<img src="baz" alt />
diff --git a/test/validator/samples/a11y-img-redundant-alt/warnings.json b/test/validator/samples/a11y-img-redundant-alt/warnings.json
new file mode 100644
index 0000000000..44106c23d0
--- /dev/null
+++ b/test/validator/samples/a11y-img-redundant-alt/warnings.json
@@ -0,0 +1,47 @@
+[
+	{
+		"code": "a11y-img-redundant-alt",
+		"message": "A11y: Screenreaders already announce <img> elements as an image.",
+		"end": {
+			"character": 173,
+			"column": 49,
+			"line": 3
+		},
+		"start": {
+			"character": 124,
+			"column": 0,
+			"line": 3
+		},
+		"pos": 124
+	},
+	{
+		"code": "a11y-img-redundant-alt",
+		"message": "A11y: Screenreaders already announce <img> elements as an image.",
+		"end": {
+			"character": 219,
+			"column": 45,
+			"line": 4
+		},
+		"start": {
+			"character": 174,
+			"column": 0,
+			"line": 4
+		},
+		"pos": 174
+	},
+	{
+		"code": "a11y-img-redundant-alt",
+		"message": "A11y: Screenreaders already announce <img> elements as an image.",
+		"end": {
+			"character": 272,
+			"column": 52,
+			"line": 5
+		},
+		"start": {
+			"character": 220,
+			"column": 0,
+			"line": 5
+		},
+		"pos": 220
+	}
+]
\ No newline at end of file
diff --git a/test/validator/samples/a11y-in-foreign-namespace/input.svelte b/test/validator/samples/a11y-in-foreign-namespace/input.svelte
new file mode 100644
index 0000000000..aeef580c73
--- /dev/null
+++ b/test/validator/samples/a11y-in-foreign-namespace/input.svelte
@@ -0,0 +1,7 @@
+<svelte:options namespace="foreign" />
+<page>
+    <a>not actually a link</a>
+    <label>This isn't a html label</label>
+    <figure>This is maybe a QT figure</figure>
+</page>
+
diff --git a/test/validator/samples/a11y-in-foreign-namespace/warnings.json b/test/validator/samples/a11y-in-foreign-namespace/warnings.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/test/validator/samples/a11y-in-foreign-namespace/warnings.json
@@ -0,0 +1 @@
+[]
diff --git a/test/validator/samples/a11y-label-has-associated-control/input.svelte b/test/validator/samples/a11y-label-has-associated-control/input.svelte
new file mode 100644
index 0000000000..43304689dc
--- /dev/null
+++ b/test/validator/samples/a11y-label-has-associated-control/input.svelte
@@ -0,0 +1,6 @@
+<label>A</label>
+<label for="id">B</label>
+
+<label>C <input type="text" /></label>
+<label>D <button>D</button></label>
+<label>E <span></span></label>
diff --git a/test/validator/samples/a11y-label-has-associated-control/warnings.json b/test/validator/samples/a11y-label-has-associated-control/warnings.json
new file mode 100644
index 0000000000..b70a1a47de
--- /dev/null
+++ b/test/validator/samples/a11y-label-has-associated-control/warnings.json
@@ -0,0 +1,32 @@
+[
+  {
+    "code": "a11y-label-has-associated-control",
+    "end": {
+      "character": 16,
+      "column": 16,
+      "line": 1
+    },
+    "message": "A11y: A form label must be associated with a control.",
+    "pos": 0,
+    "start": {
+      "character": 0,
+      "column": 0,
+      "line": 1
+    }
+  },
+  {
+    "code": "a11y-label-has-associated-control",
+    "end": {
+      "character": 149,
+      "column": 30,
+      "line": 6
+    },
+    "message": "A11y: A form label must be associated with a control.",
+    "pos": 119,
+    "start": {
+      "character": 119,
+      "column": 0,
+      "line": 6
+    }
+  }
+]
diff --git a/test/validator/samples/a11y-media-has-caption/input.svelte b/test/validator/samples/a11y-media-has-caption/input.svelte
new file mode 100644
index 0000000000..6d98fd3734
--- /dev/null
+++ b/test/validator/samples/a11y-media-has-caption/input.svelte
@@ -0,0 +1,4 @@
+<video><track kind="captions"/></video>
+<video></video>
+<video><track /></video>
+<audio></audio>
diff --git a/test/validator/samples/a11y-media-has-caption/warnings.json b/test/validator/samples/a11y-media-has-caption/warnings.json
new file mode 100644
index 0000000000..72c2caae53
--- /dev/null
+++ b/test/validator/samples/a11y-media-has-caption/warnings.json
@@ -0,0 +1,32 @@
+[
+  {
+    "code": "a11y-media-has-caption",
+    "end": {
+      "character": 55,
+      "column": 15,
+      "line": 2
+    },
+    "message": "A11y: <video> elements must have a <track kind=\"captions\">",
+    "pos": 40,
+    "start": {
+      "character": 40,
+      "column": 0,
+      "line": 2
+    }
+  },
+  {
+    "code": "a11y-media-has-caption",
+    "end": {
+      "character": 80,
+      "column": 24,
+      "line": 3
+    },
+    "message": "A11y: <video> elements must have a <track kind=\"captions\">",
+    "pos": 56,
+    "start": {
+      "character": 56,
+      "column": 0,
+      "line": 3
+    }
+  }
+]
diff --git a/test/validator/samples/a11y-mouse-events-have-key-events/input.svelte b/test/validator/samples/a11y-mouse-events-have-key-events/input.svelte
new file mode 100644
index 0000000000..22de04f38a
--- /dev/null
+++ b/test/validator/samples/a11y-mouse-events-have-key-events/input.svelte
@@ -0,0 +1,15 @@
+<script>
+	// Even if otherProps contains onBlur and/or onFocus, the rule will still fail.
+	// Props should be passed down explicitly for rule to pass.
+	const otherProps = {
+		onBlur: () => void 0,
+		onFocus: () => void 0,
+	};
+</script>
+
+<div on:mouseover={() => void 0} />
+<div on:mouseover={() => void 0} on:focus={() => void 0} />
+<div on:mouseover={() => void 0} {...otherProps} />
+<div on:mouseout={() => void 0} />
+<div on:mouseout={() => void 0} on:blur={() => void 0} />
+<div on:mouseout={() => void 0} {...otherProps} />
diff --git a/test/validator/samples/a11y-mouse-events-have-key-events/warnings.json b/test/validator/samples/a11y-mouse-events-have-key-events/warnings.json
new file mode 100644
index 0000000000..b3fe15feee
--- /dev/null
+++ b/test/validator/samples/a11y-mouse-events-have-key-events/warnings.json
@@ -0,0 +1,62 @@
+[
+    {
+        "code": "a11y-mouse-events-have-key-events",
+        "end": {
+            "character": 272,
+            "column": 35,
+            "line": 10
+        },
+        "message": "A11y: on:mouseover must be accompanied by on:focus",
+        "pos": 237,
+        "start": {
+            "character": 237,
+            "column": 0,
+            "line": 10
+        }
+    },
+    {
+        "code": "a11y-mouse-events-have-key-events",
+        "end": {
+            "character": 384,
+            "column": 51,
+            "line": 12
+        },
+        "message": "A11y: on:mouseover must be accompanied by on:focus",
+        "pos": 333,
+        "start": {
+            "character": 333,
+            "column": 0,
+            "line": 12
+        }
+    },
+    {
+        "code": "a11y-mouse-events-have-key-events",
+        "end": {
+            "character": 419,
+            "column": 34,
+            "line": 13
+        },
+        "message": "A11y: on:mouseout must be accompanied by on:blur",
+        "pos": 385,
+        "start": {
+            "character": 385,
+            "column": 0,
+            "line": 13
+        }
+    },
+    {
+        "code": "a11y-mouse-events-have-key-events",
+        "end": {
+            "character": 528,
+            "column": 50,
+            "line": 15
+        },
+        "message": "A11y: on:mouseout must be accompanied by on:blur",
+        "pos": 478,
+        "start": {
+            "character": 478,
+            "column": 0,
+            "line": 15
+        }
+    }
+]
\ No newline at end of file
diff --git a/test/validator/samples/a11y-no-access-key/input.svelte b/test/validator/samples/a11y-no-access-key/input.svelte
new file mode 100644
index 0000000000..3191d1479e
--- /dev/null
+++ b/test/validator/samples/a11y-no-access-key/input.svelte
@@ -0,0 +1 @@
+<div accessKey='z'></div>
\ No newline at end of file
diff --git a/test/validator/samples/a11y-no-access-key/warnings.json b/test/validator/samples/a11y-no-access-key/warnings.json
new file mode 100644
index 0000000000..e7593b00fd
--- /dev/null
+++ b/test/validator/samples/a11y-no-access-key/warnings.json
@@ -0,0 +1,15 @@
+[{
+	"code": "a11y-accesskey",
+	"message": "A11y: Avoid using accesskey",
+	"start": {
+		"line": 1,
+		"column": 5,
+		"character": 5
+	},
+	"end": {
+		"line": 1,
+		"column": 18,
+		"character": 18
+	},
+	"pos": 5
+}]
\ No newline at end of file
diff --git a/test/validator/samples/a11y-no-autofocus/input.svelte b/test/validator/samples/a11y-no-autofocus/input.svelte
new file mode 100644
index 0000000000..769dbe8c5b
--- /dev/null
+++ b/test/validator/samples/a11y-no-autofocus/input.svelte
@@ -0,0 +1 @@
+<div autofocus></div>
\ No newline at end of file
diff --git a/test/validator/samples/a11y-no-autofocus/warnings.json b/test/validator/samples/a11y-no-autofocus/warnings.json
new file mode 100644
index 0000000000..c4bf7d7a96
--- /dev/null
+++ b/test/validator/samples/a11y-no-autofocus/warnings.json
@@ -0,0 +1,15 @@
+[{
+	"code": "a11y-autofocus",
+	"message": "A11y: Avoid using autofocus",
+	"start": {
+		"line": 1,
+		"column": 5,
+		"character": 5
+	},
+	"end": {
+		"line": 1,
+		"column": 14,
+		"character": 14
+	},
+	"pos": 5
+}]
\ No newline at end of file
diff --git a/test/validator/samples/a11y-no-distracting-elements/input.svelte b/test/validator/samples/a11y-no-distracting-elements/input.svelte
new file mode 100644
index 0000000000..cffd2e6412
--- /dev/null
+++ b/test/validator/samples/a11y-no-distracting-elements/input.svelte
@@ -0,0 +1,2 @@
+<marquee/>
+<blink/>
\ No newline at end of file
diff --git a/test/validator/samples/a11y-no-distracting-elements/warnings.json b/test/validator/samples/a11y-no-distracting-elements/warnings.json
new file mode 100644
index 0000000000..eb78dc9140
--- /dev/null
+++ b/test/validator/samples/a11y-no-distracting-elements/warnings.json
@@ -0,0 +1,33 @@
+[
+	{
+		"code": "a11y-distracting-elements",
+		"message": "A11y: Avoid <marquee> elements",
+		"start": {
+			"line": 1,
+			"column": 0,
+			"character": 0
+		},
+		"end": {
+			"line": 1,
+			"column": 10,
+			"character": 10
+		},
+		"pos": 0
+	},
+
+	{
+		"code": "a11y-distracting-elements",
+		"message": "A11y: Avoid <blink> elements",
+		"start": {
+			"line": 2,
+			"column": 0,
+			"character": 11
+		},
+		"end": {
+			"line": 2,
+			"column": 8,
+			"character": 19
+		},
+		"pos": 11
+	}
+]
diff --git a/test/validator/samples/a11y-no-redundant-roles/input.svelte b/test/validator/samples/a11y-no-redundant-roles/input.svelte
new file mode 100644
index 0000000000..05525effb6
--- /dev/null
+++ b/test/validator/samples/a11y-no-redundant-roles/input.svelte
@@ -0,0 +1,44 @@
+<a href="/" role="link">a link</a>
+<article role="article" />
+<aside role="complementary" />
+<body role="document" />
+<button role="button" />
+<datalist role="listbox" />
+<dd role="definition" />
+<dfn role="term" />
+<details role="group" />
+<dialog role="dialog" />
+<dt role="term" />
+<fieldset role="group" />
+<figure role="figure" />
+<form role="form">foo</form>
+<h1 role="heading">heading</h1>
+<h2 role="heading">heading</h2>
+<h3 role="heading">heading</h3>
+<h4 role="heading">heading</h4>
+<h5 role="heading">heading</h5>
+<h6 role="heading">heading</h6>
+<hr role="separator" />
+<li role="listitem" />
+<link role="link" />
+<main role="main"></main>
+<menu role="list" />
+<nav role="navigation" />
+<ol role="list" />
+<optgroup role="group" />
+<option role="option" />
+<output role="status" />
+<progress role="progressbar" />
+<section role="region" />
+<summary role="button" />
+<table role="table" />
+<tbody role="rowgroup" />
+<textarea role="textbox" />
+<tfoot role="rowgroup" />
+<thead role="rowgroup" />
+<tr role="row" />
+<ul role="list" />
+
+<!-- Tested header/footer not nested in section/article -->
+<header role="banner"></header>
+<footer role="contentinfo"></footer>
\ No newline at end of file
diff --git a/test/validator/samples/a11y-no-redundant-roles/warnings.json b/test/validator/samples/a11y-no-redundant-roles/warnings.json
new file mode 100644
index 0000000000..8aa3520b32
--- /dev/null
+++ b/test/validator/samples/a11y-no-redundant-roles/warnings.json
@@ -0,0 +1,632 @@
+[
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 23,
+            "column": 23,
+            "line": 1
+        },
+        "message": "A11y: Redundant role 'link'",
+        "pos": 12,
+        "start": {
+            "character": 12,
+            "column": 12,
+            "line": 1
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 58,
+            "column": 23,
+            "line": 2
+        },
+        "message": "A11y: Redundant role 'article'",
+        "pos": 44,
+        "start": {
+            "character": 44,
+            "column": 9,
+            "line": 2
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 89,
+            "column": 27,
+            "line": 3
+        },
+        "message": "A11y: Redundant role 'complementary'",
+        "pos": 69,
+        "start": {
+            "character": 69,
+            "column": 7,
+            "line": 3
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 114,
+            "column": 21,
+            "line": 4
+        },
+        "message": "A11y: Redundant role 'document'",
+        "pos": 99,
+        "start": {
+            "character": 99,
+            "column": 6,
+            "line": 4
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 139,
+            "column": 21,
+            "line": 5
+        },
+        "message": "A11y: Redundant role 'button'",
+        "pos": 126,
+        "start": {
+            "character": 126,
+            "column": 8,
+            "line": 5
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 167,
+            "column": 24,
+            "line": 6
+        },
+        "message": "A11y: Redundant role 'listbox'",
+        "pos": 153,
+        "start": {
+            "character": 153,
+            "column": 10,
+            "line": 6
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 192,
+            "column": 21,
+            "line": 7
+        },
+        "message": "A11y: Redundant role 'definition'",
+        "pos": 175,
+        "start": {
+            "character": 175,
+            "column": 4,
+            "line": 7
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 212,
+            "column": 16,
+            "line": 8
+        },
+        "message": "A11y: Redundant role 'term'",
+        "pos": 201,
+        "start": {
+            "character": 201,
+            "column": 5,
+            "line": 8
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 237,
+            "column": 21,
+            "line": 9
+        },
+        "message": "A11y: Redundant role 'group'",
+        "pos": 225,
+        "start": {
+            "character": 225,
+            "column": 9,
+            "line": 9
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 262,
+            "column": 21,
+            "line": 10
+        },
+        "message": "A11y: Redundant role 'dialog'",
+        "pos": 249,
+        "start": {
+            "character": 249,
+            "column": 8,
+            "line": 10
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 281,
+            "column": 15,
+            "line": 11
+        },
+        "message": "A11y: Redundant role 'term'",
+        "pos": 270,
+        "start": {
+            "character": 270,
+            "column": 4,
+            "line": 11
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 307,
+            "column": 22,
+            "line": 12
+        },
+        "message": "A11y: Redundant role 'group'",
+        "pos": 295,
+        "start": {
+            "character": 295,
+            "column": 10,
+            "line": 12
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 332,
+            "column": 21,
+            "line": 13
+        },
+        "message": "A11y: Redundant role 'figure'",
+        "pos": 319,
+        "start": {
+            "character": 319,
+            "column": 8,
+            "line": 13
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 353,
+            "column": 17,
+            "line": 14
+        },
+        "message": "A11y: Redundant role 'form'",
+        "pos": 342,
+        "start": {
+            "character": 342,
+            "column": 6,
+            "line": 14
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 383,
+            "column": 18,
+            "line": 15
+        },
+        "message": "A11y: Redundant role 'heading'",
+        "pos": 369,
+        "start": {
+            "character": 369,
+            "column": 4,
+            "line": 15
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 415,
+            "column": 18,
+            "line": 16
+        },
+        "message": "A11y: Redundant role 'heading'",
+        "pos": 401,
+        "start": {
+            "character": 401,
+            "column": 4,
+            "line": 16
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 447,
+            "column": 18,
+            "line": 17
+        },
+        "message": "A11y: Redundant role 'heading'",
+        "pos": 433,
+        "start": {
+            "character": 433,
+            "column": 4,
+            "line": 17
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 479,
+            "column": 18,
+            "line": 18
+        },
+        "message": "A11y: Redundant role 'heading'",
+        "pos": 465,
+        "start": {
+            "character": 465,
+            "column": 4,
+            "line": 18
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 511,
+            "column": 18,
+            "line": 19
+        },
+        "message": "A11y: Redundant role 'heading'",
+        "pos": 497,
+        "start": {
+            "character": 497,
+            "column": 4,
+            "line": 19
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 543,
+            "column": 18,
+            "line": 20
+        },
+        "message": "A11y: Redundant role 'heading'",
+        "pos": 529,
+        "start": {
+            "character": 529,
+            "column": 4,
+            "line": 20
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 577,
+            "column": 20,
+            "line": 21
+        },
+        "message": "A11y: Redundant role 'separator'",
+        "pos": 561,
+        "start": {
+            "character": 561,
+            "column": 4,
+            "line": 21
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 600,
+            "column": 19,
+            "line": 22
+        },
+        "message": "A11y: Redundant role 'listitem'",
+        "pos": 585,
+        "start": {
+            "character": 585,
+            "column": 4,
+            "line": 22
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 621,
+            "column": 17,
+            "line": 23
+        },
+        "message": "A11y: Redundant role 'link'",
+        "pos": 610,
+        "start": {
+            "character": 610,
+            "column": 6,
+            "line": 23
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 642,
+            "column": 17,
+            "line": 24
+        },
+        "message": "A11y: Redundant role 'main'",
+        "pos": 631,
+        "start": {
+            "character": 631,
+            "column": 6,
+            "line": 24
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 668,
+            "column": 17,
+            "line": 25
+        },
+        "message": "A11y: Redundant role 'list'",
+        "pos": 657,
+        "start": {
+            "character": 657,
+            "column": 6,
+            "line": 25
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 694,
+            "column": 22,
+            "line": 26
+        },
+        "message": "A11y: Redundant role 'navigation'",
+        "pos": 677,
+        "start": {
+            "character": 677,
+            "column": 5,
+            "line": 26
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 713,
+            "column": 15,
+            "line": 27
+        },
+        "message": "A11y: Redundant role 'list'",
+        "pos": 702,
+        "start": {
+            "character": 702,
+            "column": 4,
+            "line": 27
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 739,
+            "column": 22,
+            "line": 28
+        },
+        "message": "A11y: Redundant role 'group'",
+        "pos": 727,
+        "start": {
+            "character": 727,
+            "column": 10,
+            "line": 28
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 764,
+            "column": 21,
+            "line": 29
+        },
+        "message": "A11y: Redundant role 'option'",
+        "pos": 751,
+        "start": {
+            "character": 751,
+            "column": 8,
+            "line": 29
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 789,
+            "column": 21,
+            "line": 30
+        },
+        "message": "A11y: Redundant role 'status'",
+        "pos": 776,
+        "start": {
+            "character": 776,
+            "column": 8,
+            "line": 30
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 821,
+            "column": 28,
+            "line": 31
+        },
+        "message": "A11y: Redundant role 'progressbar'",
+        "pos": 803,
+        "start": {
+            "character": 803,
+            "column": 10,
+            "line": 31
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 847,
+            "column": 22,
+            "line": 32
+        },
+        "message": "A11y: Redundant role 'region'",
+        "pos": 834,
+        "start": {
+            "character": 834,
+            "column": 9,
+            "line": 32
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 873,
+            "column": 22,
+            "line": 33
+        },
+        "message": "A11y: Redundant role 'button'",
+        "pos": 860,
+        "start": {
+            "character": 860,
+            "column": 9,
+            "line": 33
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 896,
+            "column": 19,
+            "line": 34
+        },
+        "message": "A11y: Redundant role 'table'",
+        "pos": 884,
+        "start": {
+            "character": 884,
+            "column": 7,
+            "line": 34
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 922,
+            "column": 22,
+            "line": 35
+        },
+        "message": "A11y: Redundant role 'rowgroup'",
+        "pos": 907,
+        "start": {
+            "character": 907,
+            "column": 7,
+            "line": 35
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 950,
+            "column": 24,
+            "line": 36
+        },
+        "message": "A11y: Redundant role 'textbox'",
+        "pos": 936,
+        "start": {
+            "character": 936,
+            "column": 10,
+            "line": 36
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 976,
+            "column": 22,
+            "line": 37
+        },
+        "message": "A11y: Redundant role 'rowgroup'",
+        "pos": 961,
+        "start": {
+            "character": 961,
+            "column": 7,
+            "line": 37
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 1002,
+            "column": 22,
+            "line": 38
+        },
+        "message": "A11y: Redundant role 'rowgroup'",
+        "pos": 987,
+        "start": {
+            "character": 987,
+            "column": 7,
+            "line": 38
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 1020,
+            "column": 14,
+            "line": 39
+        },
+        "message": "A11y: Redundant role 'row'",
+        "pos": 1010,
+        "start": {
+            "character": 1010,
+            "column": 4,
+            "line": 39
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 1039,
+            "column": 15,
+            "line": 40
+        },
+        "message": "A11y: Redundant role 'list'",
+        "pos": 1028,
+        "start": {
+            "character": 1028,
+            "column": 4,
+            "line": 40
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 1125,
+            "column": 21,
+            "line": 43
+        },
+        "message": "A11y: Redundant role 'banner'",
+        "pos": 1112,
+        "start": {
+            "character": 1112,
+            "column": 8,
+            "line": 43
+        }
+    },
+    {
+        "code": "a11y-no-redundant-roles",
+        "end": {
+            "character": 1162,
+            "column": 26,
+            "line": 44
+        },
+        "message": "A11y: Redundant role 'contentinfo'",
+        "pos": 1144,
+        "start": {
+            "character": 1144,
+            "column": 8,
+            "line": 44
+        }
+    }
+]
\ No newline at end of file
diff --git a/test/validator/samples/a11y-not-on-components/input.svelte b/test/validator/samples/a11y-not-on-components/input.svelte
new file mode 100644
index 0000000000..c7673a67ed
--- /dev/null
+++ b/test/validator/samples/a11y-not-on-components/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Widget from './Widget.svelte';
+</script>
+
+<Widget scope="foo">
+	<input autofocus>
+</Widget>
diff --git a/test/validator/samples/a11y-not-on-components/warnings.json b/test/validator/samples/a11y-not-on-components/warnings.json
new file mode 100644
index 0000000000..4d8fb62182
--- /dev/null
+++ b/test/validator/samples/a11y-not-on-components/warnings.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "a11y-autofocus",
+		"message": "A11y: Avoid using autofocus",
+		"start": {
+			"column": 8,
+			"line": 6,
+			"character": 88
+		},
+		"end": {
+			"line": 6,
+			"column": 17,
+			"character": 97
+		},
+		"pos": 88
+	}
+]
diff --git a/test/validator/samples/a11y-scope/input.svelte b/test/validator/samples/a11y-scope/input.svelte
new file mode 100644
index 0000000000..b7738ba7da
--- /dev/null
+++ b/test/validator/samples/a11y-scope/input.svelte
@@ -0,0 +1 @@
+<div scope/>
\ No newline at end of file
diff --git a/test/validator/samples/a11y-scope/warnings.json b/test/validator/samples/a11y-scope/warnings.json
new file mode 100644
index 0000000000..192e0b764e
--- /dev/null
+++ b/test/validator/samples/a11y-scope/warnings.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "a11y-misplaced-scope",
+		"message": "A11y: The scope attribute should only be used with <th> elements",
+		"start": {
+			"line": 1,
+			"column": 5,
+			"character": 5
+		},
+		"end": {
+			"line": 1,
+			"column": 10,
+			"character": 10
+		},
+		"pos": 5
+	}
+]
diff --git a/test/validator/samples/a11y-tabindex-no-positive/input.svelte b/test/validator/samples/a11y-tabindex-no-positive/input.svelte
new file mode 100644
index 0000000000..5a90e32f8d
--- /dev/null
+++ b/test/validator/samples/a11y-tabindex-no-positive/input.svelte
@@ -0,0 +1,8 @@
+<script>
+	let foo;
+</script>
+
+<div tabindex='-1'/>
+<div tabindex='0'/>
+<div tabindex='1'/>
+<div tabindex='{foo}'/>
\ No newline at end of file
diff --git a/test/validator/samples/a11y-tabindex-no-positive/warnings.json b/test/validator/samples/a11y-tabindex-no-positive/warnings.json
new file mode 100644
index 0000000000..ac3c6bd994
--- /dev/null
+++ b/test/validator/samples/a11y-tabindex-no-positive/warnings.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "a11y-positive-tabindex",
+		"message": "A11y: avoid tabindex values above zero",
+		"start": {
+			"line": 7,
+			"column": 5,
+			"character": 76
+		},
+		"end": {
+			"line": 7,
+			"column": 17,
+			"character": 88
+		},
+		"pos": 76
+	}
+]
diff --git a/test/validator/samples/action-invalid/input.svelte b/test/validator/samples/action-invalid/input.svelte
new file mode 100644
index 0000000000..11cc450aaa
--- /dev/null
+++ b/test/validator/samples/action-invalid/input.svelte
@@ -0,0 +1 @@
+<div use:whatever></div>
\ No newline at end of file
diff --git a/test/validator/samples/action-invalid/warnings.json b/test/validator/samples/action-invalid/warnings.json
new file mode 100644
index 0000000000..c1c1b2b492
--- /dev/null
+++ b/test/validator/samples/action-invalid/warnings.json
@@ -0,0 +1,15 @@
+[{
+	"code": "missing-declaration",
+	"message": "'whatever' is not defined. Consider adding a <script> block with 'export let whatever' to declare a prop",
+	"pos": 5,
+	"start": {
+		"line": 1,
+		"column": 5,
+		"character": 5
+	},
+	"end": {
+		"line": 1,
+		"column": 17,
+		"character": 17
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/action-object/input.svelte b/test/validator/samples/action-object/input.svelte
new file mode 100644
index 0000000000..e0962fa594
--- /dev/null
+++ b/test/validator/samples/action-object/input.svelte
@@ -0,0 +1,11 @@
+<script>
+	const obj = {
+		foo : "bar",
+		action(element, { leet }) {
+			element.foo = this.foo + leet;
+		},
+	}
+</script>
+
+<button use:obj.action={{ leet: 1337 }}>action</button>
+<button use:foo.action={{ leet: 1337 }}>action</button>
\ No newline at end of file
diff --git a/test/validator/samples/action-object/warnings.json b/test/validator/samples/action-object/warnings.json
new file mode 100644
index 0000000000..e1ccbb55a2
--- /dev/null
+++ b/test/validator/samples/action-object/warnings.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "missing-declaration",
+		"end": {
+			"character": 217,
+			"column": 39,
+			"line": 11
+		},
+		"message": "'foo' is not defined",
+		"pos": 186,
+		"start": {
+			"character": 186,
+			"column": 8,
+			"line": 11
+		}
+	}
+]
diff --git a/test/validator/samples/action-on-component/errors.json b/test/validator/samples/action-on-component/errors.json
new file mode 100644
index 0000000000..7ffaeb45fd
--- /dev/null
+++ b/test/validator/samples/action-on-component/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-action",
+	"message": "Actions can only be applied to DOM elements, not components",
+	"pos": 86,
+	"start": {
+		"line": 7,
+		"column": 8,
+		"character": 86
+	},
+	"end": {
+		"line": 7,
+		"column": 15,
+		"character": 93
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/action-on-component/input.svelte b/test/validator/samples/action-on-component/input.svelte
new file mode 100644
index 0000000000..a067c05dbd
--- /dev/null
+++ b/test/validator/samples/action-on-component/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	function foo(){}
+</script>
+
+<Widget use:foo/>
\ No newline at end of file
diff --git a/test/validator/samples/animation-comment-siblings/errors.json b/test/validator/samples/animation-comment-siblings/errors.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/test/validator/samples/animation-comment-siblings/errors.json
@@ -0,0 +1 @@
+[]
diff --git a/test/validator/samples/animation-comment-siblings/input.svelte b/test/validator/samples/animation-comment-siblings/input.svelte
new file mode 100644
index 0000000000..1c8170950b
--- /dev/null
+++ b/test/validator/samples/animation-comment-siblings/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let things;
+	function foo() {}
+</script>
+
+{#each things as thing (thing)}
+	<!-- some comment -->
+	<div animate:foo></div>
+{/each}
\ No newline at end of file
diff --git a/test/validator/samples/animation-duplicate/errors.json b/test/validator/samples/animation-duplicate/errors.json
new file mode 100644
index 0000000000..a09edd54c7
--- /dev/null
+++ b/test/validator/samples/animation-duplicate/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "duplicate-animation",
+	"message": "An element can only have one 'animate' directive",
+	"start": {
+		"line": 7,
+		"column": 18,
+		"character": 108
+	},
+	"end": {
+		"line": 7,
+		"column": 29,
+		"character": 119
+	},
+	"pos": 108
+}]
\ No newline at end of file
diff --git a/test/validator/samples/animation-duplicate/input.svelte b/test/validator/samples/animation-duplicate/input.svelte
new file mode 100644
index 0000000000..f58dc3e1cc
--- /dev/null
+++ b/test/validator/samples/animation-duplicate/input.svelte
@@ -0,0 +1,8 @@
+<script>
+	function foo() {}
+	function bar() {}
+</script>
+
+{#each things as thing (thing)}
+	<div animate:foo animate:bar></div>
+{/each}
\ No newline at end of file
diff --git a/test/validator/samples/animation-each-with-const/errors.json b/test/validator/samples/animation-each-with-const/errors.json
new file mode 100644
index 0000000000..0637a088a0
--- /dev/null
+++ b/test/validator/samples/animation-each-with-const/errors.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/test/validator/samples/animation-each-with-const/input.svelte b/test/validator/samples/animation-each-with-const/input.svelte
new file mode 100644
index 0000000000..1e236de76f
--- /dev/null
+++ b/test/validator/samples/animation-each-with-const/input.svelte
@@ -0,0 +1,10 @@
+<script>
+  function flip(){}
+</script>
+
+<div>
+  {#each [] as n (n)}
+    {@const a = n}
+    <div animate:flip={a} />
+  {/each}
+</div>
diff --git a/test/validator/samples/animation-each-with-whitespace/errors.json b/test/validator/samples/animation-each-with-whitespace/errors.json
new file mode 100644
index 0000000000..0637a088a0
--- /dev/null
+++ b/test/validator/samples/animation-each-with-whitespace/errors.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/test/validator/samples/animation-each-with-whitespace/input.svelte b/test/validator/samples/animation-each-with-whitespace/input.svelte
new file mode 100644
index 0000000000..3e063716ab
--- /dev/null
+++ b/test/validator/samples/animation-each-with-whitespace/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	function flip() {}
+</script>
+
+<div>
+	{#each [] as n (n)} <div animate:flip /> {/each}
+</div>
diff --git a/test/validator/samples/animation-missing/input.svelte b/test/validator/samples/animation-missing/input.svelte
new file mode 100644
index 0000000000..7f97618162
--- /dev/null
+++ b/test/validator/samples/animation-missing/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	let things;
+</script>
+
+{#each things as thing (thing)}
+	<div animate:foo></div>
+{/each}
\ No newline at end of file
diff --git a/test/validator/samples/animation-missing/warnings.json b/test/validator/samples/animation-missing/warnings.json
new file mode 100644
index 0000000000..78da5371a2
--- /dev/null
+++ b/test/validator/samples/animation-missing/warnings.json
@@ -0,0 +1,15 @@
+[{
+	"code": "missing-declaration",
+	"message": "'foo' is not defined",
+	"start": {
+		"line": 6,
+		"column": 6,
+		"character": 71
+	},
+	"end": {
+		"line": 6,
+		"column": 17,
+		"character": 82
+	},
+	"pos": 71
+}]
\ No newline at end of file
diff --git a/test/validator/samples/animation-not-in-each/errors.json b/test/validator/samples/animation-not-in-each/errors.json
new file mode 100644
index 0000000000..c737617f98
--- /dev/null
+++ b/test/validator/samples/animation-not-in-each/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-animation",
+	"message": "An element that uses the animate directive must be the immediate child of a keyed each block",
+	"start": {
+		"line": 5,
+		"column": 5,
+		"character": 44
+	},
+	"end": {
+		"line": 5,
+		"column": 16,
+		"character": 55
+	},
+	"pos": 44
+}]
diff --git a/test/validator/samples/animation-not-in-each/input.svelte b/test/validator/samples/animation-not-in-each/input.svelte
new file mode 100644
index 0000000000..33033302d5
--- /dev/null
+++ b/test/validator/samples/animation-not-in-each/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	function foo() {}
+</script>
+
+<div animate:foo></div>
\ No newline at end of file
diff --git a/test/validator/samples/animation-not-in-keyed-each/errors.json b/test/validator/samples/animation-not-in-keyed-each/errors.json
new file mode 100644
index 0000000000..a21579ce4f
--- /dev/null
+++ b/test/validator/samples/animation-not-in-keyed-each/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-animation",
+	"message": "An element that uses the animate directive must be used inside a keyed each block. Did you forget to add a key to your each block?",
+	"start": {
+		"line": 6,
+		"column": 6,
+		"character": 69
+	},
+	"end": {
+		"line": 6,
+		"column": 17,
+		"character": 80
+	},
+	"pos": 69
+}]
diff --git a/test/validator/samples/animation-not-in-keyed-each/input.svelte b/test/validator/samples/animation-not-in-keyed-each/input.svelte
new file mode 100644
index 0000000000..626838ab84
--- /dev/null
+++ b/test/validator/samples/animation-not-in-keyed-each/input.svelte
@@ -0,0 +1,8 @@
+<script>
+	function foo() {}
+</script>
+
+{#each things as thing}
+	<div animate:foo></div>
+	<div animate:foo></div>
+{/each}
\ No newline at end of file
diff --git a/test/validator/samples/animation-siblings/errors.json b/test/validator/samples/animation-siblings/errors.json
new file mode 100644
index 0000000000..3def56f0a5
--- /dev/null
+++ b/test/validator/samples/animation-siblings/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-animation",
+	"message": "An element that uses the animate directive must be the sole child of a keyed each block",
+	"start": {
+		"line": 6,
+		"column": 6,
+		"character": 77
+	},
+	"end": {
+		"line": 6,
+		"column": 17,
+		"character": 88
+	},
+	"pos": 77
+}]
diff --git a/test/validator/samples/animation-siblings/input.svelte b/test/validator/samples/animation-siblings/input.svelte
new file mode 100644
index 0000000000..6ec203bd74
--- /dev/null
+++ b/test/validator/samples/animation-siblings/input.svelte
@@ -0,0 +1,8 @@
+<script>
+	function foo() {}
+</script>
+
+{#each things as thing (thing)}
+	<div animate:foo></div>
+	<div animate:foo></div>
+{/each}
\ No newline at end of file
diff --git a/test/validator/samples/attribute-expected-equals/errors.json b/test/validator/samples/attribute-expected-equals/errors.json
new file mode 100644
index 0000000000..a3fa9d3cac
--- /dev/null
+++ b/test/validator/samples/attribute-expected-equals/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "unexpected-token",
+	"message": "Expected =",
+	"start": {
+		"line": 5,
+		"column": 9,
+		"character": 50
+	},
+	"end": {
+		"line": 5,
+		"column": 9,
+		"character": 50
+	},
+	"pos": 50
+}]
diff --git a/test/validator/samples/attribute-expected-equals/input.svelte b/test/validator/samples/attribute-expected-equals/input.svelte
new file mode 100644
index 0000000000..91f4b0ca7b
--- /dev/null
+++ b/test/validator/samples/attribute-expected-equals/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let name = 'world';
+</script>
+
+<h1 class"=foo">Hello {name}!</h1>
diff --git a/test/validator/samples/attribute-invalid-name-2/errors.json b/test/validator/samples/attribute-invalid-name-2/errors.json
new file mode 100644
index 0000000000..9e0c437339
--- /dev/null
+++ b/test/validator/samples/attribute-invalid-name-2/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "illegal-attribute",
+	"message": "'3aa' is not a valid attribute name",
+	"start": {
+		"line": 1,
+		"column": 3,
+		"character": 3
+	},
+	"end": {
+		"line": 1,
+		"column": 12,
+		"character": 12
+	},
+	"pos": 3
+}]
diff --git a/test/validator/samples/attribute-invalid-name-2/input.svelte b/test/validator/samples/attribute-invalid-name-2/input.svelte
new file mode 100644
index 0000000000..6958a1b5aa
--- /dev/null
+++ b/test/validator/samples/attribute-invalid-name-2/input.svelte
@@ -0,0 +1 @@
+<p 3aa="abc">Test</p>
diff --git a/test/validator/samples/attribute-invalid-name-3/errors.json b/test/validator/samples/attribute-invalid-name-3/errors.json
new file mode 100644
index 0000000000..f583226882
--- /dev/null
+++ b/test/validator/samples/attribute-invalid-name-3/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "illegal-attribute",
+	"message": "'a*a' is not a valid attribute name",
+	"start": {
+		"line": 1,
+		"column": 3,
+		"character": 3
+	},
+	"end": {
+		"line": 1,
+		"column": 6,
+		"character": 6
+	},
+	"pos": 3
+}]
diff --git a/test/validator/samples/attribute-invalid-name-3/input.svelte b/test/validator/samples/attribute-invalid-name-3/input.svelte
new file mode 100644
index 0000000000..87c2df979a
--- /dev/null
+++ b/test/validator/samples/attribute-invalid-name-3/input.svelte
@@ -0,0 +1 @@
+<p a*a>Test</p>
diff --git a/test/validator/samples/attribute-invalid-name-4/errors.json b/test/validator/samples/attribute-invalid-name-4/errors.json
new file mode 100644
index 0000000000..a8959cebf3
--- /dev/null
+++ b/test/validator/samples/attribute-invalid-name-4/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "illegal-attribute",
+	"message": "'-a' is not a valid attribute name",
+	"start": {
+		"line": 1,
+		"column": 3,
+		"character": 3
+	},
+	"end": {
+		"line": 1,
+		"column": 5,
+		"character": 5
+	},
+	"pos": 3
+}]
diff --git a/test/validator/samples/attribute-invalid-name-4/input.svelte b/test/validator/samples/attribute-invalid-name-4/input.svelte
new file mode 100644
index 0000000000..92f68449b9
--- /dev/null
+++ b/test/validator/samples/attribute-invalid-name-4/input.svelte
@@ -0,0 +1 @@
+<p -a>Test</p>
diff --git a/test/validator/samples/attribute-invalid-name-5/errors.json b/test/validator/samples/attribute-invalid-name-5/errors.json
new file mode 100644
index 0000000000..b1e3acc5ef
--- /dev/null
+++ b/test/validator/samples/attribute-invalid-name-5/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "illegal-attribute",
+	"message": "'a;' is not a valid attribute name",
+	"start": {
+		"line": 1,
+		"column": 3,
+		"character": 3
+	},
+	"end": {
+		"line": 1,
+		"column": 11,
+		"character": 11
+	},
+	"pos": 3
+}]
diff --git a/test/validator/samples/attribute-invalid-name-5/input.svelte b/test/validator/samples/attribute-invalid-name-5/input.svelte
new file mode 100644
index 0000000000..3a7dd05137
--- /dev/null
+++ b/test/validator/samples/attribute-invalid-name-5/input.svelte
@@ -0,0 +1 @@
+<p a;="abc">Test</p>
diff --git a/test/validator/samples/attribute-invalid-name/errors.json b/test/validator/samples/attribute-invalid-name/errors.json
new file mode 100644
index 0000000000..9bdde1ee46
--- /dev/null
+++ b/test/validator/samples/attribute-invalid-name/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "illegal-attribute",
+	"message": "'}' is not a valid attribute name",
+	"start": {
+		"line": 1,
+		"column": 3,
+		"character": 3
+	},
+	"end": {
+		"line": 1,
+		"column": 4,
+		"character": 4
+	},
+	"pos": 3
+}]
diff --git a/test/validator/samples/attribute-invalid-name/input.svelte b/test/validator/samples/attribute-invalid-name/input.svelte
new file mode 100644
index 0000000000..56d9cfe23f
--- /dev/null
+++ b/test/validator/samples/attribute-invalid-name/input.svelte
@@ -0,0 +1 @@
+<p }>Test</p>
diff --git a/test/validator/samples/await-component-is-used/input.svelte b/test/validator/samples/await-component-is-used/input.svelte
new file mode 100644
index 0000000000..5fe87e0c70
--- /dev/null
+++ b/test/validator/samples/await-component-is-used/input.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Component from './Component.svelte';
+
+	export let promise;
+</script>
+
+{#await promise}
+	<p>Loading</p>
+{:then data}
+	<Component {data} />
+{:catch err}
+	<p>Error: {err}</p>
+{/await}
diff --git a/test/validator/samples/await-component-is-used/warnings.json b/test/validator/samples/await-component-is-used/warnings.json
new file mode 100644
index 0000000000..0637a088a0
--- /dev/null
+++ b/test/validator/samples/await-component-is-used/warnings.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/test/validator/samples/await-no-catch/input.svelte b/test/validator/samples/await-no-catch/input.svelte
new file mode 100644
index 0000000000..1d332f0e32
--- /dev/null
+++ b/test/validator/samples/await-no-catch/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	let promise;
+</script>
+
+{#await promise}
+	<p>Loading</p>
+{:then data}
+	<p>Data: {data}</p>
+{/await}
diff --git a/test/validator/samples/await-no-catch/warnings.json b/test/validator/samples/await-no-catch/warnings.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/test/validator/samples/await-no-catch/warnings.json
@@ -0,0 +1 @@
+[]
diff --git a/test/validator/samples/await-shorthand-no-catch/input.svelte b/test/validator/samples/await-shorthand-no-catch/input.svelte
new file mode 100644
index 0000000000..e106f8d842
--- /dev/null
+++ b/test/validator/samples/await-shorthand-no-catch/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	let promise;
+</script>
+
+{#await promise then data}
+	<p>Data: {data}</p>
+{/await}
diff --git a/test/validator/samples/await-shorthand-no-catch/warnings.json b/test/validator/samples/await-shorthand-no-catch/warnings.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/test/validator/samples/await-shorthand-no-catch/warnings.json
@@ -0,0 +1 @@
+[]
diff --git a/test/validator/samples/await-shorthand-no-then/input.svelte b/test/validator/samples/await-shorthand-no-then/input.svelte
new file mode 100644
index 0000000000..6e8a99f131
--- /dev/null
+++ b/test/validator/samples/await-shorthand-no-then/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	let promise;
+</script>
+
+{#await promise catch error}
+	<p>Error: {error}</p>
+{/await}
diff --git a/test/validator/samples/await-shorthand-no-then/warnings.json b/test/validator/samples/await-shorthand-no-then/warnings.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/test/validator/samples/await-shorthand-no-then/warnings.json
@@ -0,0 +1 @@
+[]
diff --git a/test/validator/samples/binding-await-catch/errors.json b/test/validator/samples/binding-await-catch/errors.json
new file mode 100644
index 0000000000..00141686f3
--- /dev/null
+++ b/test/validator/samples/binding-await-catch/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-binding",
+		"message": "Cannot bind to a variable declared with {#await ... then} or {:catch} blocks",
+		"pos": 79,
+		"start": { "line": 6, "column": 9, "character": 79 },
+		"end": { "line": 6, "column": 27, "character": 97 }
+	}
+]
diff --git a/test/validator/samples/binding-await-catch/input.svelte b/test/validator/samples/binding-await-catch/input.svelte
new file mode 100644
index 0000000000..b640f6305b
--- /dev/null
+++ b/test/validator/samples/binding-await-catch/input.svelte
@@ -0,0 +1,7 @@
+<script>
+  let promise = 0;
+</script>
+{#await promise}
+{:catch error}
+  <input bind:value={error} />
+{/await}
diff --git a/test/validator/samples/binding-await-then-2/errors.json b/test/validator/samples/binding-await-then-2/errors.json
new file mode 100644
index 0000000000..e734ed4717
--- /dev/null
+++ b/test/validator/samples/binding-await-then-2/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-binding",
+		"message": "Cannot bind to a variable declared with {#await ... then} or {:catch} blocks",
+		"pos": 78,
+		"start": { "line": 6, "column": 9, "character": 78 },
+		"end": { "line": 6, "column": 19, "character": 88 }
+	}
+]
diff --git a/test/validator/samples/binding-await-then-2/input.svelte b/test/validator/samples/binding-await-then-2/input.svelte
new file mode 100644
index 0000000000..e8c56c8e0b
--- /dev/null
+++ b/test/validator/samples/binding-await-then-2/input.svelte
@@ -0,0 +1,7 @@
+<script>
+  let promise = 0;
+</script>
+{#await promise}
+{:then value}
+  <input bind:value />
+{/await}
diff --git a/test/validator/samples/binding-await-then/errors.json b/test/validator/samples/binding-await-then/errors.json
new file mode 100644
index 0000000000..a611e7731f
--- /dev/null
+++ b/test/validator/samples/binding-await-then/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-binding",
+		"message": "Cannot bind to a variable declared with {#await ... then} or {:catch} blocks",
+		"pos": 75,
+		"start": { "line": 5, "column": 9, "character": 75 },
+		"end": { "line": 5, "column": 19, "character": 85 }
+	}
+]
diff --git a/test/validator/samples/binding-await-then/input.svelte b/test/validator/samples/binding-await-then/input.svelte
new file mode 100644
index 0000000000..bc55ef97e4
--- /dev/null
+++ b/test/validator/samples/binding-await-then/input.svelte
@@ -0,0 +1,6 @@
+<script>
+  let promise = 0;
+</script>
+{#await promise then value}
+  <input bind:value />
+{/await}
diff --git a/test/validator/samples/binding-const-field/errors.json b/test/validator/samples/binding-const-field/errors.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/test/validator/samples/binding-const-field/errors.json
@@ -0,0 +1 @@
+[]
diff --git a/test/validator/samples/binding-const-field/input.svelte b/test/validator/samples/binding-const-field/input.svelte
new file mode 100644
index 0000000000..055a16438d
--- /dev/null
+++ b/test/validator/samples/binding-const-field/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	const dummy = {
+		foo: 'bar'
+	};
+</script>
+
+<input bind:value={dummy.foo}>
diff --git a/test/validator/samples/binding-const/errors.json b/test/validator/samples/binding-const/errors.json
new file mode 100644
index 0000000000..6d48af9c4e
--- /dev/null
+++ b/test/validator/samples/binding-const/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-binding",
+	"message": "Cannot bind to a variable which is not writable",
+	"pos": 61,
+	"start": {
+		"line": 5,
+		"column": 19,
+		"character": 61
+	},
+	"end": {
+		"line": 5,
+		"column": 24,
+		"character": 66
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/binding-const/input.svelte b/test/validator/samples/binding-const/input.svelte
new file mode 100644
index 0000000000..1857a1932c
--- /dev/null
+++ b/test/validator/samples/binding-const/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	const dummy = 'foo';
+</script>
+
+<input bind:value={dummy}>
diff --git a/test/validator/samples/binding-dimensions-svg-child/errors.json b/test/validator/samples/binding-dimensions-svg-child/errors.json
new file mode 100644
index 0000000000..bd617771bb
--- /dev/null
+++ b/test/validator/samples/binding-dimensions-svg-child/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-binding",
+	"message": "'offsetWidth' is not a valid binding on SVG elements",
+	"pos": 51,
+	"start": {
+		"line": 6,
+		"column": 7,
+		"character": 51
+	},
+	"end": {
+		"line": 6,
+		"column": 23,
+		"character": 67
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/binding-dimensions-svg-child/input.svelte b/test/validator/samples/binding-dimensions-svg-child/input.svelte
new file mode 100644
index 0000000000..c47dcc7237
--- /dev/null
+++ b/test/validator/samples/binding-dimensions-svg-child/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	let offsetWidth;
+</script>
+
+<svg>
+	<text bind:offsetWidth>some text</text>
+</svg>
\ No newline at end of file
diff --git a/test/validator/samples/binding-dimensions-svg/errors.json b/test/validator/samples/binding-dimensions-svg/errors.json
new file mode 100644
index 0000000000..157f2ee180
--- /dev/null
+++ b/test/validator/samples/binding-dimensions-svg/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-binding",
+	"message": "'offsetWidth' is not a valid binding on <svg>. Use 'clientWidth' instead",
+	"pos": 43,
+	"start": {
+		"line": 5,
+		"column": 5,
+		"character": 43
+	},
+	"end": {
+		"line": 5,
+		"column": 21,
+		"character": 59
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/binding-dimensions-svg/input.svelte b/test/validator/samples/binding-dimensions-svg/input.svelte
new file mode 100644
index 0000000000..ae1b42085f
--- /dev/null
+++ b/test/validator/samples/binding-dimensions-svg/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let offsetWidth;
+</script>
+
+<svg bind:offsetWidth></svg>
\ No newline at end of file
diff --git a/test/validator/samples/binding-dimensions-void/errors.json b/test/validator/samples/binding-dimensions-void/errors.json
new file mode 100644
index 0000000000..ddd4e359c4
--- /dev/null
+++ b/test/validator/samples/binding-dimensions-void/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-binding",
+	"message": "'offsetWidth' is not a valid binding on void elements like <img>. Use a wrapper element instead",
+	"pos": 60,
+	"start": {
+		"line": 5,
+		"column": 22,
+		"character": 60
+	},
+	"end": {
+		"line": 5,
+		"column": 38,
+		"character": 76
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/binding-dimensions-void/input.svelte b/test/validator/samples/binding-dimensions-void/input.svelte
new file mode 100644
index 0000000000..e8a3fc4174
--- /dev/null
+++ b/test/validator/samples/binding-dimensions-void/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let offsetWidth;
+</script>
+
+<img src='potato.jpg' bind:offsetWidth>
\ No newline at end of file
diff --git a/test/validator/samples/binding-input-checked/errors.json b/test/validator/samples/binding-input-checked/errors.json
new file mode 100644
index 0000000000..596bd1b4d7
--- /dev/null
+++ b/test/validator/samples/binding-input-checked/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-binding",
+	"message": "'checked' binding can only be used with <input type=\"checkbox\">",
+	"start": {
+		"line": 5,
+		"column": 7,
+		"character": 37
+	},
+	"end": {
+		"line": 5,
+		"column": 25,
+		"character": 55
+	},
+	"pos": 37
+}]
\ No newline at end of file
diff --git a/test/validator/samples/binding-input-checked/input.svelte b/test/validator/samples/binding-input-checked/input.svelte
new file mode 100644
index 0000000000..c01f924202
--- /dev/null
+++ b/test/validator/samples/binding-input-checked/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let foo;
+</script>
+
+<input bind:checked={foo}>
\ No newline at end of file
diff --git a/test/validator/samples/binding-input-type-boolean/errors.json b/test/validator/samples/binding-input-type-boolean/errors.json
new file mode 100644
index 0000000000..fcf92356ae
--- /dev/null
+++ b/test/validator/samples/binding-input-type-boolean/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "missing-type",
+	"message": "'type' attribute must be specified",
+	"start": {
+		"line": 5,
+		"column": 24,
+		"character": 54
+	},
+	"end": {
+		"line": 5,
+		"column": 28,
+		"character": 58
+	},
+	"pos": 54
+}]
\ No newline at end of file
diff --git a/test/validator/samples/binding-input-type-boolean/input.svelte b/test/validator/samples/binding-input-type-boolean/input.svelte
new file mode 100644
index 0000000000..7cabca8a10
--- /dev/null
+++ b/test/validator/samples/binding-input-type-boolean/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let foo;
+</script>
+
+<input bind:value={foo} type>
\ No newline at end of file
diff --git a/test/validator/samples/binding-input-type-dynamic/errors.json b/test/validator/samples/binding-input-type-dynamic/errors.json
new file mode 100644
index 0000000000..1e886a8e98
--- /dev/null
+++ b/test/validator/samples/binding-input-type-dynamic/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-type",
+	"message": "'type' attribute cannot be dynamic if input uses two-way binding",
+	"start": {
+		"line": 6,
+		"column": 24,
+		"character": 70
+	},
+	"end": {
+		"line": 6,
+		"column": 40,
+		"character": 86
+	},
+	"pos": 70
+}]
\ No newline at end of file
diff --git a/test/validator/samples/binding-input-type-dynamic/input.svelte b/test/validator/samples/binding-input-type-dynamic/input.svelte
new file mode 100644
index 0000000000..e1c69e97d6
--- /dev/null
+++ b/test/validator/samples/binding-input-type-dynamic/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	let foo;
+	let inputType;
+</script>
+
+<input bind:value={foo} type={inputType}>
\ No newline at end of file
diff --git a/test/validator/samples/binding-invalid-foreign-namespace/errors.json b/test/validator/samples/binding-invalid-foreign-namespace/errors.json
new file mode 100644
index 0000000000..c726270266
--- /dev/null
+++ b/test/validator/samples/binding-invalid-foreign-namespace/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-binding",
+	"message": "'value' is not a valid binding. Foreign elements only support bind:this",
+	"pos": 81,
+	"start": {
+		"line": 6,
+		"column": 7,
+		"character": 81
+	},
+	"end": {
+		"line": 6,
+		"column": 28,
+		"character": 102
+	}
+}]
diff --git a/test/validator/samples/binding-invalid-foreign-namespace/input.svelte b/test/validator/samples/binding-invalid-foreign-namespace/input.svelte
new file mode 100644
index 0000000000..e40f44e906
--- /dev/null
+++ b/test/validator/samples/binding-invalid-foreign-namespace/input.svelte
@@ -0,0 +1,6 @@
+<svelte:options namespace="foreign" />
+<script>
+	let whatever;
+</script>
+
+<input bind:value={whatever} />
diff --git a/test/validator/samples/binding-invalid-on-element/errors.json b/test/validator/samples/binding-invalid-on-element/errors.json
new file mode 100644
index 0000000000..0db88e3447
--- /dev/null
+++ b/test/validator/samples/binding-invalid-on-element/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-binding",
+	"message": "'value' is not a valid binding on <div> elements",
+	"pos": 37,
+	"start": {
+		"line": 5,
+		"column": 5,
+		"character": 37
+	},
+	"end": {
+		"line": 5,
+		"column": 15,
+		"character": 47
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/binding-invalid-on-element/input.svelte b/test/validator/samples/binding-invalid-on-element/input.svelte
new file mode 100644
index 0000000000..7971dc5393
--- /dev/null
+++ b/test/validator/samples/binding-invalid-on-element/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let value;
+</script>
+
+<div bind:value></div>
\ No newline at end of file
diff --git a/test/validator/samples/binding-invalid-value-global/errors.json b/test/validator/samples/binding-invalid-value-global/errors.json
new file mode 100644
index 0000000000..be23a21523
--- /dev/null
+++ b/test/validator/samples/binding-invalid-value-global/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "binding-undeclared",
+	"message": "foo is not declared",
+	"pos": 58,
+	"start": {
+		"line": 4,
+		"column": 19,
+		"character": 58
+	},
+	"end": {
+		"line": 4,
+		"column": 22,
+		"character": 61
+	}
+}]
diff --git a/test/validator/samples/binding-invalid-value-global/input.svelte b/test/validator/samples/binding-invalid-value-global/input.svelte
new file mode 100644
index 0000000000..81357cf5de
--- /dev/null
+++ b/test/validator/samples/binding-invalid-value-global/input.svelte
@@ -0,0 +1,4 @@
+<script>
+		console.log(foo);
+</script>
+<input bind:value={foo}>
diff --git a/test/validator/samples/binding-invalid-value/errors.json b/test/validator/samples/binding-invalid-value/errors.json
new file mode 100644
index 0000000000..07eb7b0f1c
--- /dev/null
+++ b/test/validator/samples/binding-invalid-value/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "binding-undeclared",
+	"message": "foo is not declared",
+	"pos": 37,
+	"start": {
+		"line": 2,
+		"column": 19,
+		"character": 37
+	},
+	"end": {
+		"line": 2,
+		"column": 22,
+		"character": 40
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/binding-invalid-value/input.svelte b/test/validator/samples/binding-invalid-value/input.svelte
new file mode 100644
index 0000000000..9eeeba5fed
--- /dev/null
+++ b/test/validator/samples/binding-invalid-value/input.svelte
@@ -0,0 +1,2 @@
+<script></script>
+<input bind:value={foo}>
\ No newline at end of file
diff --git a/test/validator/samples/binding-invalid/errors.json b/test/validator/samples/binding-invalid/errors.json
new file mode 100644
index 0000000000..5021da41b6
--- /dev/null
+++ b/test/validator/samples/binding-invalid/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-binding",
+	"message": "'whatever' is not a valid binding",
+	"pos": 40,
+	"start": {
+		"line": 5,
+		"column": 5,
+		"character": 40
+	},
+	"end": {
+		"line": 5,
+		"column": 18,
+		"character": 53
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/binding-invalid/input.svelte b/test/validator/samples/binding-invalid/input.svelte
new file mode 100644
index 0000000000..50df17c395
--- /dev/null
+++ b/test/validator/samples/binding-invalid/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let whatever;
+</script>
+
+<div bind:whatever></div>
\ No newline at end of file
diff --git a/test/validator/samples/binding-let/errors.json b/test/validator/samples/binding-let/errors.json
new file mode 100644
index 0000000000..6195a1c3ae
--- /dev/null
+++ b/test/validator/samples/binding-let/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-binding",
+	"message": "Cannot bind to a variable declared with the let: directive",
+	"pos": 52,
+	"start": {
+		"line": 6,
+		"column": 8,
+		"character": 52
+	},
+	"end": {
+		"line": 6,
+		"column": 24,
+		"character": 68
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/binding-let/input.svelte b/test/validator/samples/binding-let/input.svelte
new file mode 100644
index 0000000000..79162ddacd
--- /dev/null
+++ b/test/validator/samples/binding-let/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	let Foo;
+</script>
+
+<Foo let:bar>
+	<input bind:value={bar}>
+</Foo>
\ No newline at end of file
diff --git a/test/validator/samples/binding-select-multiple-dynamic/errors.json b/test/validator/samples/binding-select-multiple-dynamic/errors.json
new file mode 100644
index 0000000000..d7710a201a
--- /dev/null
+++ b/test/validator/samples/binding-select-multiple-dynamic/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "dynamic-multiple-attribute",
+	"message": "'multiple' attribute cannot be dynamic if select uses two-way binding",
+	"start": {
+		"line": 6,
+		"column": 19,
+		"character": 66
+	},
+	"end": {
+		"line": 6,
+		"column": 29,
+		"character": 76
+	},
+	"pos": 66
+}]
\ No newline at end of file
diff --git a/test/validator/samples/binding-select-multiple-dynamic/input.svelte b/test/validator/samples/binding-select-multiple-dynamic/input.svelte
new file mode 100644
index 0000000000..6fb0df4d47
--- /dev/null
+++ b/test/validator/samples/binding-select-multiple-dynamic/input.svelte
@@ -0,0 +1,10 @@
+<script>
+	let value;
+	let multiple;
+</script>
+
+<select bind:value {multiple}>
+	<option>1</option>
+	<option>2</option>
+	<option>3</option>
+</select>
\ No newline at end of file
diff --git a/test/validator/samples/catch-declares-error-variable/input.svelte b/test/validator/samples/catch-declares-error-variable/input.svelte
new file mode 100644
index 0000000000..b44e854cf5
--- /dev/null
+++ b/test/validator/samples/catch-declares-error-variable/input.svelte
@@ -0,0 +1,13 @@
+<script>
+	let value = null;
+</script>
+
+<button on:click={event => {
+	try {
+		throw new Error('foo');
+	} catch (error) {
+		value = error;
+	}
+}}>Click to create error</button>
+
+{String(value)}
diff --git a/test/validator/samples/catch-declares-error-variable/warnings.json b/test/validator/samples/catch-declares-error-variable/warnings.json
new file mode 100644
index 0000000000..0637a088a0
--- /dev/null
+++ b/test/validator/samples/catch-declares-error-variable/warnings.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/test/validator/samples/component-dynamic/input.svelte b/test/validator/samples/component-dynamic/input.svelte
new file mode 100644
index 0000000000..f591a84fe1
--- /dev/null
+++ b/test/validator/samples/component-dynamic/input.svelte
@@ -0,0 +1,18 @@
+<script>
+	import A from './A.svelte';
+	import B from './B.svelte';
+
+	let Let = A;
+	function update() {
+		Let = B;
+	}
+
+	export let ExportLet = B;
+
+	$: Reactive = random() ? A : B;
+</script>
+
+<Let />
+<ExportLet />
+<Reactive />
+<svelte:component this={Let} />
\ No newline at end of file
diff --git a/test/validator/samples/component-dynamic/options.json b/test/validator/samples/component-dynamic/options.json
new file mode 100644
index 0000000000..3a50892eba
--- /dev/null
+++ b/test/validator/samples/component-dynamic/options.json
@@ -0,0 +1,3 @@
+{
+  "generate": true
+}
\ No newline at end of file
diff --git a/test/validator/samples/component-dynamic/warnings.json b/test/validator/samples/component-dynamic/warnings.json
new file mode 100644
index 0000000000..457ef11a1e
--- /dev/null
+++ b/test/validator/samples/component-dynamic/warnings.json
@@ -0,0 +1,47 @@
+[
+	{
+		"code": "reactive-component",
+    "message": "<Let/> will not be reactive if Let changes. Use <svelte:component this={Let}/> if you want this reactivity.",
+    "pos": 190,
+		"end": {
+			"character": 197,
+			"column": 7,
+			"line": 15
+		},
+		"start": {
+			"character": 190,
+			"column": 0,
+			"line": 15
+		}
+	},
+	{
+    "message": "<ExportLet/> will not be reactive if ExportLet changes. Use <svelte:component this={ExportLet}/> if you want this reactivity.",
+		"code": "reactive-component",
+    "pos": 198,
+		"end": {
+			"character": 211,
+			"column": 13,
+			"line": 16
+		},
+		"start": {
+			"character": 198,
+			"column": 0,
+			"line": 16
+		}
+	},
+	{
+    "message": "<Reactive/> will not be reactive if Reactive changes. Use <svelte:component this={Reactive}/> if you want this reactivity.",
+		"code": "reactive-component",
+    "pos": 212,
+		"end": {
+			"character": 224,
+			"column": 12,
+			"line": 17
+		},
+		"start": {
+			"character": 212,
+			"column": 0,
+			"line": 17
+		}
+	}
+]
diff --git a/test/validator/samples/component-event-modifiers-invalid/errors.json b/test/validator/samples/component-event-modifiers-invalid/errors.json
new file mode 100644
index 0000000000..da608063fe
--- /dev/null
+++ b/test/validator/samples/component-event-modifiers-invalid/errors.json
@@ -0,0 +1,15 @@
+[{
+	"message": "Event modifiers other than 'once' can only be used on DOM elements",
+	"code": "invalid-event-modifier",
+	"start": {
+		"line": 6,
+		"column": 8,
+		"character": 93
+	},
+	"end": {
+		"line": 6,
+		"column": 40,
+		"character": 125
+	},
+	"pos": 93
+}]
diff --git a/test/validator/samples/component-event-modifiers-invalid/input.svelte b/test/validator/samples/component-event-modifiers-invalid/input.svelte
new file mode 100644
index 0000000000..8f7ce54d7a
--- /dev/null
+++ b/test/validator/samples/component-event-modifiers-invalid/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Button from './Button.svelte';
+	const doThat = () => {};
+</script>
+
+<Button on:click|preventDefault={doThat}></Button>
\ No newline at end of file
diff --git a/test/validator/samples/component-invalid-style-directive/errors.json b/test/validator/samples/component-invalid-style-directive/errors.json
new file mode 100644
index 0000000000..087f0db651
--- /dev/null
+++ b/test/validator/samples/component-invalid-style-directive/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-component-style-directive",
+		"message": "Style directives cannot be used on components",
+		"start": { "line": 7, "column": 19, "character": 97 },
+		"end": { "line": 7, "column": 36, "character": 114 },
+		"pos": 97
+	}
+]
diff --git a/test/validator/samples/component-invalid-style-directive/input.svelte b/test/validator/samples/component-invalid-style-directive/input.svelte
new file mode 100644
index 0000000000..975621088f
--- /dev/null
+++ b/test/validator/samples/component-invalid-style-directive/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	let name = 'world';
+	
+	import Child from 'Child.svelte';
+</script>
+
+<Child name={name} style:color="red" />
\ No newline at end of file
diff --git a/test/validator/samples/component-name-lowercase/input.svelte b/test/validator/samples/component-name-lowercase/input.svelte
new file mode 100644
index 0000000000..ebd7cf3481
--- /dev/null
+++ b/test/validator/samples/component-name-lowercase/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	import thisShouldWarnMe from './MyComponent.svelte';
+	let i;
+</script>
+
+<thisShouldWarnMe />
+<i />
\ No newline at end of file
diff --git a/test/validator/samples/component-name-lowercase/warnings.json b/test/validator/samples/component-name-lowercase/warnings.json
new file mode 100644
index 0000000000..37765b423d
--- /dev/null
+++ b/test/validator/samples/component-name-lowercase/warnings.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "component-name-lowercase",
+		"message": "<thisShouldWarnMe> will be treated as an HTML element unless it begins with a capital letter",
+		"pos": 82,
+		"start": {
+			"character": 82,
+			"column": 0,
+			"line": 6
+		},
+		"end": {
+			"character": 102,
+			"column": 20,
+			"line": 6
+		}
+	}
+]
diff --git a/test/validator/samples/component-namespaced/input.svelte b/test/validator/samples/component-namespaced/input.svelte
new file mode 100644
index 0000000000..996d2d8769
--- /dev/null
+++ b/test/validator/samples/component-namespaced/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	import * as NS from 'some-library';
+</script>
+
+<NS.Foo/>
\ No newline at end of file
diff --git a/test/validator/samples/component-namespaced/warnings.json b/test/validator/samples/component-namespaced/warnings.json
new file mode 100644
index 0000000000..0637a088a0
--- /dev/null
+++ b/test/validator/samples/component-namespaced/warnings.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/test/validator/samples/component-slot-default-duplicate.skip/errors.json b/test/validator/samples/component-slot-default-duplicate.skip/errors.json
new file mode 100644
index 0000000000..f60ddc8524
--- /dev/null
+++ b/test/validator/samples/component-slot-default-duplicate.skip/errors.json
@@ -0,0 +1,8 @@
+[{
+	"message": "duplicate default <slot> element",
+	"start": {
+		"line": 2,
+		"column": 0
+	},
+	"pos": 14
+}]
\ No newline at end of file
diff --git a/test/validator/samples/component-slot-default-duplicate.skip/input.svelte b/test/validator/samples/component-slot-default-duplicate.skip/input.svelte
new file mode 100644
index 0000000000..9dffac4144
--- /dev/null
+++ b/test/validator/samples/component-slot-default-duplicate.skip/input.svelte
@@ -0,0 +1,2 @@
+<slot></slot>
+<slot></slot>
\ No newline at end of file
diff --git a/test/validator/samples/component-slot-default-reserved/errors.json b/test/validator/samples/component-slot-default-reserved/errors.json
new file mode 100644
index 0000000000..cefb00da8d
--- /dev/null
+++ b/test/validator/samples/component-slot-default-reserved/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-slot-name",
+	"message": "default is a reserved word — it cannot be used as a slot name",
+	"start": {
+		"line": 1,
+		"column": 6,
+		"character": 6
+	},
+	"end": {
+		"line": 1,
+		"column": 20,
+		"character": 20
+	},
+	"pos": 6
+}]
\ No newline at end of file
diff --git a/test/validator/samples/component-slot-default-reserved/input.svelte b/test/validator/samples/component-slot-default-reserved/input.svelte
new file mode 100644
index 0000000000..397ae0aaf5
--- /dev/null
+++ b/test/validator/samples/component-slot-default-reserved/input.svelte
@@ -0,0 +1 @@
+<slot name='default'></slot>
\ No newline at end of file
diff --git a/test/validator/samples/component-slot-dynamic-attribute/errors.json b/test/validator/samples/component-slot-dynamic-attribute/errors.json
new file mode 100644
index 0000000000..8944f9cd3e
--- /dev/null
+++ b/test/validator/samples/component-slot-dynamic-attribute/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-slot-attribute",
+	"message": "slot attribute cannot have a dynamic value",
+	"start": {
+		"line": 6,
+		"column": 9,
+		"character": 77
+	},
+	"end": {
+		"line": 6,
+		"column": 19,
+		"character": 87
+	},
+	"pos": 77
+}]
\ No newline at end of file
diff --git a/test/validator/samples/component-slot-dynamic-attribute/input.svelte b/test/validator/samples/component-slot-dynamic-attribute/input.svelte
new file mode 100644
index 0000000000..1eb8b4f1f0
--- /dev/null
+++ b/test/validator/samples/component-slot-dynamic-attribute/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	<button slot={foo}>click me</button>
+</Nested>
\ No newline at end of file
diff --git a/test/validator/samples/component-slot-dynamic/errors.json b/test/validator/samples/component-slot-dynamic/errors.json
new file mode 100644
index 0000000000..959aa87fd2
--- /dev/null
+++ b/test/validator/samples/component-slot-dynamic/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "dynamic-slot-name",
+	"message": "<slot> name cannot be dynamic",
+	"start": {
+		"line": 1,
+		"column": 6,
+		"character": 6
+	},
+	"end": {
+		"line": 1,
+		"column": 18,
+		"character": 18
+	},
+	"pos": 6
+}]
\ No newline at end of file
diff --git a/test/validator/samples/component-slot-dynamic/input.svelte b/test/validator/samples/component-slot-dynamic/input.svelte
new file mode 100644
index 0000000000..74348a49db
--- /dev/null
+++ b/test/validator/samples/component-slot-dynamic/input.svelte
@@ -0,0 +1 @@
+<slot name='{foo}'></slot>
\ No newline at end of file
diff --git a/test/validator/samples/component-slot-named-duplicate.skip/errors.json b/test/validator/samples/component-slot-named-duplicate.skip/errors.json
new file mode 100644
index 0000000000..8e5d995da6
--- /dev/null
+++ b/test/validator/samples/component-slot-named-duplicate.skip/errors.json
@@ -0,0 +1,8 @@
+[{
+	"message": "duplicate 'foo' <slot> element",
+	"start": {
+		"line": 2,
+		"column": 6
+	},
+	"pos": 31
+}]
\ No newline at end of file
diff --git a/test/validator/samples/component-slot-named-duplicate.skip/input.svelte b/test/validator/samples/component-slot-named-duplicate.skip/input.svelte
new file mode 100644
index 0000000000..b0affc0608
--- /dev/null
+++ b/test/validator/samples/component-slot-named-duplicate.skip/input.svelte
@@ -0,0 +1,2 @@
+<slot name='foo'></slot>
+<slot name='foo'></slot>
\ No newline at end of file
diff --git a/test/validator/samples/component-slotted-custom-element-2/errors.json b/test/validator/samples/component-slotted-custom-element-2/errors.json
new file mode 100644
index 0000000000..06be51d72d
--- /dev/null
+++ b/test/validator/samples/component-slotted-custom-element-2/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-slotted-content",
+		"message": "Element with a slot='...' attribute must be a child of a component or a descendant of a custom element",
+		"start": { "line": 10, "column": 9, "character": 138 },
+		"end": { "line": 10, "column": 19, "character": 148 },
+		"pos": 138
+	}
+]
diff --git a/test/validator/samples/component-slotted-custom-element-2/input.svelte b/test/validator/samples/component-slotted-custom-element-2/input.svelte
new file mode 100644
index 0000000000..221659ca4d
--- /dev/null
+++ b/test/validator/samples/component-slotted-custom-element-2/input.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Nested from './Nested.svelte';
+	let thing = false;
+</script>
+
+<custom-element>
+	<Nested>
+		{#if thing}
+			<div>
+				<div slot='bar' />
+			</div>
+		{/if}
+	</Nested>
+</custom-element>
\ No newline at end of file
diff --git a/test/validator/samples/component-slotted-custom-element/errors.json b/test/validator/samples/component-slotted-custom-element/errors.json
new file mode 100644
index 0000000000..0637a088a0
--- /dev/null
+++ b/test/validator/samples/component-slotted-custom-element/errors.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/test/validator/samples/component-slotted-custom-element/input.svelte b/test/validator/samples/component-slotted-custom-element/input.svelte
new file mode 100644
index 0000000000..e0e27834c1
--- /dev/null
+++ b/test/validator/samples/component-slotted-custom-element/input.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Nested from './Nested.svelte';
+	let thing = false;
+</script>
+
+<Nested>
+	<custom-element>
+		<div>
+			<div slot='foo' />
+		</div>
+		{#if thing}
+			<div slot='bar' />
+		{/if}
+	</custom-element>
+</Nested>
\ No newline at end of file
diff --git a/test/validator/samples/component-slotted-each-block/errors.json b/test/validator/samples/component-slotted-each-block/errors.json
new file mode 100644
index 0000000000..2944acae17
--- /dev/null
+++ b/test/validator/samples/component-slotted-each-block/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-slotted-content",
+	"message": "Element with a slot='...' attribute must be a child of a component or a descendant of a custom element",
+	"start": {
+		"line": 7,
+		"column": 7,
+		"character": 100
+	},
+	"end": {
+		"line": 7,
+		"column": 17,
+		"character": 110
+	},
+	"pos": 100
+}]
\ No newline at end of file
diff --git a/test/validator/samples/component-slotted-each-block/input.svelte b/test/validator/samples/component-slotted-each-block/input.svelte
new file mode 100644
index 0000000000..f000278a99
--- /dev/null
+++ b/test/validator/samples/component-slotted-each-block/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	{#each things as thing}
+		<div slot='foo'>{thing}</div>
+	{/each}
+</Nested>
\ No newline at end of file
diff --git a/test/validator/samples/component-slotted-if-block/errors.json b/test/validator/samples/component-slotted-if-block/errors.json
new file mode 100644
index 0000000000..3ae07c1b3b
--- /dev/null
+++ b/test/validator/samples/component-slotted-if-block/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-slotted-content",
+	"message": "Element with a slot='...' attribute must be a child of a component or a descendant of a custom element",
+	"start": {
+		"line": 7,
+		"column": 7,
+		"character": 88
+	},
+	"end": {
+		"line": 7,
+		"column": 17,
+		"character": 98
+	},
+	"pos": 88
+}]
\ No newline at end of file
diff --git a/test/validator/samples/component-slotted-if-block/input.svelte b/test/validator/samples/component-slotted-if-block/input.svelte
new file mode 100644
index 0000000000..d9159dfd60
--- /dev/null
+++ b/test/validator/samples/component-slotted-if-block/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	{#if thing}
+		<div slot='foo'>{thing}</div>
+	{/if}
+</Nested>
\ No newline at end of file
diff --git a/test/validator/samples/const-tag-conflict-1/errors.json b/test/validator/samples/const-tag-conflict-1/errors.json
new file mode 100644
index 0000000000..59c72eccaf
--- /dev/null
+++ b/test/validator/samples/const-tag-conflict-1/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-const-declaration",
+		"message": "'a' has already been declared",
+		"start": { "line": 7, "column": 2, "character": 84 },
+		"end": { "line": 7, "column": 19, "character": 101 },
+		"pos": 84
+	}
+]
diff --git a/test/validator/samples/const-tag-conflict-1/input.svelte b/test/validator/samples/const-tag-conflict-1/input.svelte
new file mode 100644
index 0000000000..6633eeacdf
--- /dev/null
+++ b/test/validator/samples/const-tag-conflict-1/input.svelte
@@ -0,0 +1,8 @@
+<script>
+  export let array;
+</script>
+
+{#each array as item}
+  {@const a = item}
+  {@const a = item}
+{/each}
\ No newline at end of file
diff --git a/test/validator/samples/const-tag-conflict-2/errors.json b/test/validator/samples/const-tag-conflict-2/errors.json
new file mode 100644
index 0000000000..11e2535091
--- /dev/null
+++ b/test/validator/samples/const-tag-conflict-2/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-const-declaration",
+		"message": "'item' has already been declared",
+		"start": { "line": 6, "column": 2, "character": 64 },
+		"end": { "line": 6, "column": 21, "character": 83 },
+		"pos": 64
+	}
+]
diff --git a/test/validator/samples/const-tag-conflict-2/input.svelte b/test/validator/samples/const-tag-conflict-2/input.svelte
new file mode 100644
index 0000000000..2be7207691
--- /dev/null
+++ b/test/validator/samples/const-tag-conflict-2/input.svelte
@@ -0,0 +1,7 @@
+<script>
+  export let array;
+</script>
+
+{#each array as item}
+  {@const item = 123}
+{/each}
\ No newline at end of file
diff --git a/test/validator/samples/const-tag-cyclical/errors.json b/test/validator/samples/const-tag-cyclical/errors.json
new file mode 100644
index 0000000000..1436747798
--- /dev/null
+++ b/test/validator/samples/const-tag-cyclical/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "cyclical-const-tags",
+		"message": "Cyclical dependency detected: b → c → b",
+		"start": { "line": 6, "column": 2, "character": 61 },
+		"end": { "line": 6, "column": 20, "character": 79 },
+		"pos": 61
+	}
+]
diff --git a/test/validator/samples/const-tag-cyclical/input.svelte b/test/validator/samples/const-tag-cyclical/input.svelte
new file mode 100644
index 0000000000..2f694be808
--- /dev/null
+++ b/test/validator/samples/const-tag-cyclical/input.svelte
@@ -0,0 +1,8 @@
+<script>
+  export let array;
+</script>
+
+{#each array as a}
+  {@const b = a + c}
+  {@const c = b + a}
+{/each}
\ No newline at end of file
diff --git a/test/validator/samples/const-tag-out-of-scope/input.svelte b/test/validator/samples/const-tag-out-of-scope/input.svelte
new file mode 100644
index 0000000000..d1c2723e22
--- /dev/null
+++ b/test/validator/samples/const-tag-out-of-scope/input.svelte
@@ -0,0 +1,10 @@
+<script>
+  export let array;
+</script>
+
+{#each array as a}
+  {@const b = a + 1}
+  <div />
+{/each}
+
+{b}
\ No newline at end of file
diff --git a/test/validator/samples/const-tag-out-of-scope/warnings.json b/test/validator/samples/const-tag-out-of-scope/warnings.json
new file mode 100644
index 0000000000..c85b417fe4
--- /dev/null
+++ b/test/validator/samples/const-tag-out-of-scope/warnings.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "missing-declaration",
+		"message": "'b' is not defined",
+		"pos": 100,
+		"start": {
+			"character": 100,
+			"column": 1,
+			"line": 10
+		},
+		"end": {
+			"character": 101,
+			"column": 2,
+			"line": 10
+		}
+	}
+]
diff --git a/test/validator/samples/const-tag-placement-1/errors.json b/test/validator/samples/const-tag-placement-1/errors.json
new file mode 100644
index 0000000000..5291b3a351
--- /dev/null
+++ b/test/validator/samples/const-tag-placement-1/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-const-placement",
+		"message": "{@const} must be the immediate child of {#if}, {:else if}, {:else}, {#each}, {:then}, {:catch}, <svelte:fragment> or <Component>",
+		"start": { "line": 5, "column": 0, "character": 36 },
+		"end": { "line": 5, "column": 18, "character": 54 },
+		"pos": 36
+	}
+]
diff --git a/test/validator/samples/const-tag-placement-1/input.svelte b/test/validator/samples/const-tag-placement-1/input.svelte
new file mode 100644
index 0000000000..14ea3085e7
--- /dev/null
+++ b/test/validator/samples/const-tag-placement-1/input.svelte
@@ -0,0 +1,5 @@
+<script>
+  export let a;
+</script>
+
+{@const b = a + 1}
\ No newline at end of file
diff --git a/test/validator/samples/const-tag-placement-2/errors.json b/test/validator/samples/const-tag-placement-2/errors.json
new file mode 100644
index 0000000000..9922063a1d
--- /dev/null
+++ b/test/validator/samples/const-tag-placement-2/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-const-placement",
+		"message": "{@const} must be the immediate child of {#if}, {:else if}, {:else}, {#each}, {:then}, {:catch}, <svelte:fragment> or <Component>",
+		"start": { "line": 7, "column": 4, "character": 63 },
+		"end": { "line": 7, "column": 18, "character": 77 },
+		"pos": 63
+	}
+]
diff --git a/test/validator/samples/const-tag-placement-2/input.svelte b/test/validator/samples/const-tag-placement-2/input.svelte
new file mode 100644
index 0000000000..2519482a98
--- /dev/null
+++ b/test/validator/samples/const-tag-placement-2/input.svelte
@@ -0,0 +1,9 @@
+<script>
+  export let a;
+</script>
+
+{#each a as i}
+  <div>
+    {@const b = i}
+  </div>
+{/each}
\ No newline at end of file
diff --git a/test/validator/samples/const-tag-readonly-1/errors.json b/test/validator/samples/const-tag-readonly-1/errors.json
new file mode 100644
index 0000000000..ed60c529fd
--- /dev/null
+++ b/test/validator/samples/const-tag-readonly-1/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-const-update",
+		"message": "'b' is declared using {@const ...} and is read-only",
+		"start": { "line": 7, "column": 26, "character": 106 },
+		"end": { "line": 7, "column": 30, "character": 110 },
+		"pos": 106
+	}
+]
diff --git a/test/validator/samples/const-tag-readonly-1/input.svelte b/test/validator/samples/const-tag-readonly-1/input.svelte
new file mode 100644
index 0000000000..b5a37c8608
--- /dev/null
+++ b/test/validator/samples/const-tag-readonly-1/input.svelte
@@ -0,0 +1,8 @@
+<script>
+  export let array;
+</script>
+
+{#each array as a}
+  {@const b = a + 1}
+  <button on:click={() => b ++} />
+{/each}
\ No newline at end of file
diff --git a/test/validator/samples/const-tag-readonly-2/errors.json b/test/validator/samples/const-tag-readonly-2/errors.json
new file mode 100644
index 0000000000..746a21e86a
--- /dev/null
+++ b/test/validator/samples/const-tag-readonly-2/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-binding",
+		"message": "Cannot bind to a variable declared with {@const ...}",
+		"start": { "line": 7, "column": 9, "character": 89 },
+		"end": { "line": 7, "column": 23, "character": 103 },
+		"pos": 89
+	}
+]
diff --git a/test/validator/samples/const-tag-readonly-2/input.svelte b/test/validator/samples/const-tag-readonly-2/input.svelte
new file mode 100644
index 0000000000..466aac9804
--- /dev/null
+++ b/test/validator/samples/const-tag-readonly-2/input.svelte
@@ -0,0 +1,8 @@
+<script>
+  export let array;
+</script>
+
+{#each array as a}
+  {@const b = a + 1}
+  <input bind:value={b} />
+{/each}
\ No newline at end of file
diff --git a/test/validator/samples/contenteditable-dynamic/errors.json b/test/validator/samples/contenteditable-dynamic/errors.json
new file mode 100644
index 0000000000..0c4c5585a6
--- /dev/null
+++ b/test/validator/samples/contenteditable-dynamic/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "dynamic-contenteditable-attribute",
+	"message": "'contenteditable' attribute cannot be dynamic if element uses two-way binding",
+	"start": {
+		"line": 6,
+		"column": 8,
+		"character": 73
+	},
+	"end": {
+		"line": 6,
+		"column": 32,
+		"character": 97
+	},
+	"pos": 73
+}]
\ No newline at end of file
diff --git a/test/validator/samples/contenteditable-dynamic/input.svelte b/test/validator/samples/contenteditable-dynamic/input.svelte
new file mode 100644
index 0000000000..8dfa91a354
--- /dev/null
+++ b/test/validator/samples/contenteditable-dynamic/input.svelte
@@ -0,0 +1,6 @@
+<script>
+    export let name;
+
+    let toggle = false;
+</script>
+<editor contenteditable={toggle} bind:innerHTML={name}></editor>
diff --git a/test/validator/samples/contenteditable-missing/errors.json b/test/validator/samples/contenteditable-missing/errors.json
new file mode 100644
index 0000000000..53d5af4928
--- /dev/null
+++ b/test/validator/samples/contenteditable-missing/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "missing-contenteditable-attribute",
+	"message": "'contenteditable' attribute is required for textContent and innerHTML two-way bindings",
+	"start": {
+		"line": 4,
+		"column": 8,
+		"character": 48
+	},
+	"end": {
+		"line": 4,
+		"column": 31,
+		"character": 71
+	},
+	"pos": 48
+}]
\ No newline at end of file
diff --git a/test/validator/samples/contenteditable-missing/input.svelte b/test/validator/samples/contenteditable-missing/input.svelte
new file mode 100644
index 0000000000..dae1088994
--- /dev/null
+++ b/test/validator/samples/contenteditable-missing/input.svelte
@@ -0,0 +1,4 @@
+<script>
+    export let name;
+</script>
+<editor bind:textContent={name}></editor>
diff --git a/test/validator/samples/css-invalid-global-placement-2/errors.json b/test/validator/samples/css-invalid-global-placement-2/errors.json
new file mode 100644
index 0000000000..4594469cc2
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-placement-2/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "css-invalid-global",
+	"message": ":global(...) can be at the start or end of a selector sequence, but not in the middle",
+	"start": {
+		"line": 2,
+		"column": 6,
+		"character": 14
+	},
+	"end": {
+		"line": 2,
+		"column": 19,
+		"character": 27
+	},
+	"pos": 14
+}]
diff --git a/test/validator/samples/css-invalid-global-placement-2/input.svelte b/test/validator/samples/css-invalid-global-placement-2/input.svelte
new file mode 100644
index 0000000000..75bd7b66e1
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-placement-2/input.svelte
@@ -0,0 +1,5 @@
+<style>
+	.foo :global(.bar):first-child .baz {
+		color: red;
+	}
+</style>
diff --git a/test/validator/samples/css-invalid-global-placement-3/errors.json b/test/validator/samples/css-invalid-global-placement-3/errors.json
new file mode 100644
index 0000000000..dc9d605c2c
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-placement-3/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "css-invalid-global",
+	"message": ":global(...) can be at the start or end of a selector sequence, but not in the middle",
+	"start": {
+		"line": 5,
+		"column": 6,
+		"character": 60
+	},
+	"end": {
+		"line": 5,
+		"column": 19,
+		"character": 73
+	},
+	"pos": 60
+}]
diff --git a/test/validator/samples/css-invalid-global-placement-3/input.svelte b/test/validator/samples/css-invalid-global-placement-3/input.svelte
new file mode 100644
index 0000000000..2a15c1086a
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-placement-3/input.svelte
@@ -0,0 +1,8 @@
+<style>
+	.foo :global(.bar)::after {
+		color: red;
+	}
+	.foo :global(.bar)::after .baz {
+		color: red;
+	}
+</style>
diff --git a/test/validator/samples/css-invalid-global-placement/errors.json b/test/validator/samples/css-invalid-global-placement/errors.json
new file mode 100644
index 0000000000..6e7e9be0ce
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-placement/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "css-invalid-global",
+	"message": ":global(...) can be at the start or end of a selector sequence, but not in the middle",
+	"start": {
+		"line": 2,
+		"column": 6,
+		"character": 14
+	},
+	"end": {
+		"line": 2,
+		"column": 19,
+		"character": 27
+	},
+	"pos": 14
+}]
\ No newline at end of file
diff --git a/test/validator/samples/css-invalid-global-placement/input.svelte b/test/validator/samples/css-invalid-global-placement/input.svelte
new file mode 100644
index 0000000000..33da3499b2
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-placement/input.svelte
@@ -0,0 +1,5 @@
+<style>
+	.foo :global(.bar) .baz {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/validator/samples/css-invalid-global-selector-2/errors.json b/test/validator/samples/css-invalid-global-selector-2/errors.json
new file mode 100644
index 0000000000..3317925b00
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector-2/errors.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "css-invalid-global-selector",
+		"message": ":global(...) must contain a single selector",
+		"start": {
+			"line": 11,
+			"column": 5,
+			"character": 156
+		},
+		"end": {
+			"line": 11,
+			"column": 29,
+			"character": 180
+		},
+		"pos": 156
+	}
+]
diff --git a/test/validator/samples/css-invalid-global-selector-2/input.svelte b/test/validator/samples/css-invalid-global-selector-2/input.svelte
new file mode 100644
index 0000000000..6acbabd7da
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector-2/input.svelte
@@ -0,0 +1,18 @@
+<style>
+	div :global(:is(h1, h2)) {
+		color: red;
+	}
+	div :global(:where(h1, h2)) {
+		color: red;
+	}
+	div :global(h1 ~ :is(h2, h3)) {
+		color: red;
+	}
+	div :global(:is(h1, h2), h3) {
+		color: red;
+	}
+</style>
+
+<div>
+	<h1>hello world</h1>
+</div>
\ No newline at end of file
diff --git a/test/validator/samples/css-invalid-global-selector-3/errors.json b/test/validator/samples/css-invalid-global-selector-3/errors.json
new file mode 100644
index 0000000000..abc516a504
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector-3/errors.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "css-invalid-global-selector",
+		"message": ":global(...) must contain a single selector",
+		"start": {
+			"line": 5,
+			"column": 5,
+			"character": 77
+		},
+		"end": {
+			"line": 5,
+			"column": 44,
+			"character": 116
+		},
+		"pos": 77
+	}
+]
diff --git a/test/validator/samples/css-invalid-global-selector-3/input.svelte b/test/validator/samples/css-invalid-global-selector-3/input.svelte
new file mode 100644
index 0000000000..dca0094a06
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector-3/input.svelte
@@ -0,0 +1,12 @@
+<style>
+	div :global(h1[data-title="Hello, world!"]) {
+		color: red;
+	}
+	div :global(h1[attribute], video[autoplay]) {
+		color: red;
+	}
+</style>
+
+<div>
+	<h1>hello world</h1>
+</div>
diff --git a/test/validator/samples/css-invalid-global-selector-4/errors.json b/test/validator/samples/css-invalid-global-selector-4/errors.json
new file mode 100644
index 0000000000..8d76cb63c0
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector-4/errors.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "css-invalid-global-selector",
+		"message": ":global(...) must contain a single selector",
+		"start": {
+			"line": 2,
+			"column": 5,
+			"character": 13
+		},
+		"end": {
+			"line": 2,
+			"column": 24,
+			"character": 32
+		},
+		"pos": 13
+	}
+]
diff --git a/test/validator/samples/css-invalid-global-selector-4/input.svelte b/test/validator/samples/css-invalid-global-selector-4/input.svelte
new file mode 100644
index 0000000000..ed33b6b385
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector-4/input.svelte
@@ -0,0 +1,9 @@
+<style>
+	div :global(h1, .abc\)) {
+		color: red;
+	}
+</style>
+
+<div>
+	<h1>hello world</h1>
+</div>
diff --git a/test/validator/samples/css-invalid-global-selector-5/errors.json b/test/validator/samples/css-invalid-global-selector-5/errors.json
new file mode 100644
index 0000000000..8129b236e6
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector-5/errors.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "css-invalid-global-selector",
+		"message": ":global(...) must contain a single selector",
+		"start": {
+			"line": 5,
+			"column": 1,
+			"character": 54
+		},
+		"end": {
+			"line": 5,
+			"column": 20,
+			"character": 73
+		},
+		"pos": 54
+	}
+]
diff --git a/test/validator/samples/css-invalid-global-selector-5/input.svelte b/test/validator/samples/css-invalid-global-selector-5/input.svelte
new file mode 100644
index 0000000000..67d4b9928a
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector-5/input.svelte
@@ -0,0 +1,12 @@
+<style>
+	:global(h1, h2, h3), div {
+		color: red;
+	}
+	:global(h1, h2, h3) div {
+		color: red;
+	}
+</style>
+
+<div>
+	<h1>hello world</h1>
+</div>
\ No newline at end of file
diff --git a/test/validator/samples/css-invalid-global-selector-6/errors.json b/test/validator/samples/css-invalid-global-selector-6/errors.json
new file mode 100644
index 0000000000..8129b236e6
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector-6/errors.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "css-invalid-global-selector",
+		"message": ":global(...) must contain a single selector",
+		"start": {
+			"line": 5,
+			"column": 1,
+			"character": 54
+		},
+		"end": {
+			"line": 5,
+			"column": 20,
+			"character": 73
+		},
+		"pos": 54
+	}
+]
diff --git a/test/validator/samples/css-invalid-global-selector-6/input.svelte b/test/validator/samples/css-invalid-global-selector-6/input.svelte
new file mode 100644
index 0000000000..e0b2ffd597
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector-6/input.svelte
@@ -0,0 +1,12 @@
+<style>
+	:global(.h1\,h2\,h3).foo {
+		color: red;
+	}
+	:global(h1, h2, h3).foo {
+		color: red;
+	}
+</style>
+
+<div>
+	<h1>hello world</h1>
+</div>
\ No newline at end of file
diff --git a/test/validator/samples/css-invalid-global-selector/errors.json b/test/validator/samples/css-invalid-global-selector/errors.json
new file mode 100644
index 0000000000..7b2d5123b0
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector/errors.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "css-invalid-global-selector",
+		"message": ":global(...) must contain a single selector",
+		"start": {
+			"line": 11,
+			"column": 5,
+			"character": 143
+		},
+		"end": {
+			"line": 11,
+			"column": 24,
+			"character": 162
+		},
+		"pos": 143
+	}
+]
diff --git a/test/validator/samples/css-invalid-global-selector/input.svelte b/test/validator/samples/css-invalid-global-selector/input.svelte
new file mode 100644
index 0000000000..0ec337edfb
--- /dev/null
+++ b/test/validator/samples/css-invalid-global-selector/input.svelte
@@ -0,0 +1,18 @@
+<style>
+	div :global(.h1\,h2\,h3) {
+		color: red;
+	}
+	:global(h1, h2, h3) {
+		color: red;
+	}
+	div, :global(h1, h2, h3) {
+		color: red;
+	}
+	div :global(h1, h2, h3) {
+		color: red;
+	}
+</style>
+
+<div>
+	<h1>hello world</h1>
+</div>
\ No newline at end of file
diff --git a/test/validator/samples/debug-invalid-args/errors.json b/test/validator/samples/debug-invalid-args/errors.json
new file mode 100644
index 0000000000..a92fb017a1
--- /dev/null
+++ b/test/validator/samples/debug-invalid-args/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-debug-args",
+	"message": "{@debug ...} arguments must be identifiers, not arbitrary expressions",
+	"start": {
+		"line": 2,
+		"column": 9,
+		"character": 13
+	},
+	"end": {
+		"line": 2,
+		"column": 9,
+		"character": 13
+	},
+	"pos": 13
+}]
\ No newline at end of file
diff --git a/test/validator/samples/debug-invalid-args/input.svelte b/test/validator/samples/debug-invalid-args/input.svelte
new file mode 100644
index 0000000000..5c89e7049d
--- /dev/null
+++ b/test/validator/samples/debug-invalid-args/input.svelte
@@ -0,0 +1,4 @@
+<p>
+	{@debug a + b}
+	{a + b}
+</p>
\ No newline at end of file
diff --git a/test/validator/samples/default-export-anonymous-class/errors.json b/test/validator/samples/default-export-anonymous-class/errors.json
new file mode 100644
index 0000000000..0a410e5eda
--- /dev/null
+++ b/test/validator/samples/default-export-anonymous-class/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "default-export",
+	"message": "A component cannot have a default export",
+	"pos": 10,
+	"start": {
+		"line": 2,
+		"column": 1,
+		"character": 10
+	},
+	"end": {
+		"line": 2,
+		"column": 30,
+		"character": 39
+	}
+}]
diff --git a/test/validator/samples/default-export-anonymous-class/input.svelte b/test/validator/samples/default-export-anonymous-class/input.svelte
new file mode 100644
index 0000000000..d78759e113
--- /dev/null
+++ b/test/validator/samples/default-export-anonymous-class/input.svelte
@@ -0,0 +1,3 @@
+<script>
+	export default function () {};
+</script>
diff --git a/test/validator/samples/default-export-anonymous-function/errors.json b/test/validator/samples/default-export-anonymous-function/errors.json
new file mode 100644
index 0000000000..1f144e8392
--- /dev/null
+++ b/test/validator/samples/default-export-anonymous-function/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "default-export",
+	"message": "A component cannot have a default export",
+	"pos": 10,
+	"start": {
+		"line": 2,
+		"column": 1,
+		"character": 10
+	},
+	"end": {
+		"line": 2,
+		"column": 24,
+		"character": 33
+	}
+}]
diff --git a/test/validator/samples/default-export-anonymous-function/input.svelte b/test/validator/samples/default-export-anonymous-function/input.svelte
new file mode 100644
index 0000000000..5e98ca42ab
--- /dev/null
+++ b/test/validator/samples/default-export-anonymous-function/input.svelte
@@ -0,0 +1,3 @@
+<script>
+	export default class {};
+</script>
diff --git a/test/validator/samples/default-export/errors.json b/test/validator/samples/default-export/errors.json
new file mode 100644
index 0000000000..45544fe4a1
--- /dev/null
+++ b/test/validator/samples/default-export/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "default-export",
+	"message": "A component cannot have a default export",
+	"pos": 10,
+	"start": {
+		"line": 2,
+		"column": 1,
+		"character": 10
+	},
+	"end": {
+		"line": 2,
+		"column": 19,
+		"character": 28
+	}
+}]
diff --git a/test/validator/samples/default-export/input.svelte b/test/validator/samples/default-export/input.svelte
new file mode 100644
index 0000000000..6d7ea95370
--- /dev/null
+++ b/test/validator/samples/default-export/input.svelte
@@ -0,0 +1,3 @@
+<script>
+	export default 42;
+</script>
diff --git a/test/validator/samples/directive-non-expression/errors.json b/test/validator/samples/directive-non-expression/errors.json
new file mode 100644
index 0000000000..c606963b68
--- /dev/null
+++ b/test/validator/samples/directive-non-expression/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-directive-value",
+	"message": "Directive value must be a JavaScript expression enclosed in curly braces",
+	"pos": 15,
+	"start": {
+		"line": 1,
+		"column": 15,
+		"character": 15
+	},
+	"end": {
+		"line": 1,
+		"column": 15,
+		"character": 15
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/directive-non-expression/input.svelte b/test/validator/samples/directive-non-expression/input.svelte
new file mode 100644
index 0000000000..815add35e4
--- /dev/null
+++ b/test/validator/samples/directive-non-expression/input.svelte
@@ -0,0 +1 @@
+<div on:click="invalid"></div>
\ No newline at end of file
diff --git a/test/validator/samples/dollar-dollar-global-in-markup/errors.json b/test/validator/samples/dollar-dollar-global-in-markup/errors.json
new file mode 100644
index 0000000000..4730c5152e
--- /dev/null
+++ b/test/validator/samples/dollar-dollar-global-in-markup/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "illegal-global",
+	"message": "$$billsyall is an illegal variable name",
+	"pos": 1,
+	"start": {
+		"line": 1,
+		"column": 1,
+		"character": 1
+	},
+	"end": {
+		"line": 1,
+		"column": 12,
+		"character": 12
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/dollar-dollar-global-in-markup/input.svelte b/test/validator/samples/dollar-dollar-global-in-markup/input.svelte
new file mode 100644
index 0000000000..d197237056
--- /dev/null
+++ b/test/validator/samples/dollar-dollar-global-in-markup/input.svelte
@@ -0,0 +1 @@
+{$$billsyall}
\ No newline at end of file
diff --git a/test/validator/samples/dollar-dollar-global-in-script/errors.json b/test/validator/samples/dollar-dollar-global-in-script/errors.json
new file mode 100644
index 0000000000..5c923e35f7
--- /dev/null
+++ b/test/validator/samples/dollar-dollar-global-in-script/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "illegal-global",
+	"message": "$$billsyall is an illegal variable name",
+	"pos": 10,
+	"start": {
+		"line": 2,
+		"column": 1,
+		"character": 10
+	},
+	"end": {
+		"line": 2,
+		"column": 12,
+		"character": 21
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/dollar-dollar-global-in-script/input.svelte b/test/validator/samples/dollar-dollar-global-in-script/input.svelte
new file mode 100644
index 0000000000..9f7fc06a7d
--- /dev/null
+++ b/test/validator/samples/dollar-dollar-global-in-script/input.svelte
@@ -0,0 +1,3 @@
+<script>
+	$$billsyall;
+</script>
\ No newline at end of file
diff --git a/test/validator/samples/dollar-global-in-markup/errors.json b/test/validator/samples/dollar-global-in-markup/errors.json
new file mode 100644
index 0000000000..6cdf67e872
--- /dev/null
+++ b/test/validator/samples/dollar-global-in-markup/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "illegal-global",
+	"message": "$ is an illegal variable name",
+	"pos": 1,
+	"start": {
+		"line": 1,
+		"column": 1,
+		"character": 1
+	},
+	"end": {
+		"line": 1,
+		"column": 2,
+		"character": 2
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/dollar-global-in-markup/input.svelte b/test/validator/samples/dollar-global-in-markup/input.svelte
new file mode 100644
index 0000000000..f6b2dceee5
--- /dev/null
+++ b/test/validator/samples/dollar-global-in-markup/input.svelte
@@ -0,0 +1 @@
+{$}
\ No newline at end of file
diff --git a/test/validator/samples/dollar-global-in-script/errors.json b/test/validator/samples/dollar-global-in-script/errors.json
new file mode 100644
index 0000000000..2a6bd7ce7a
--- /dev/null
+++ b/test/validator/samples/dollar-global-in-script/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "illegal-global",
+	"message": "$ is an illegal variable name",
+	"pos": 10,
+	"start": {
+		"line": 2,
+		"column": 1,
+		"character": 10
+	},
+	"end": {
+		"line": 2,
+		"column": 2,
+		"character": 11
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/dollar-global-in-script/input.svelte b/test/validator/samples/dollar-global-in-script/input.svelte
new file mode 100644
index 0000000000..a06da03657
--- /dev/null
+++ b/test/validator/samples/dollar-global-in-script/input.svelte
@@ -0,0 +1,3 @@
+<script>
+	$;
+</script>
\ No newline at end of file
diff --git a/test/validator/samples/dynamic-element-invalid-tag/errors.json b/test/validator/samples/dynamic-element-invalid-tag/errors.json
new file mode 100644
index 0000000000..c8d3c52490
--- /dev/null
+++ b/test/validator/samples/dynamic-element-invalid-tag/errors.json
@@ -0,0 +1,17 @@
+[
+	{
+		"message": "Invalid element definition",
+		"code": "invalid-element-definition",
+		"start": {
+			"line": 2,
+			"column": 17,
+			"character": 23
+		},
+		"end": {
+			"line": 2,
+			"column": 17,
+			"character": 23
+		},
+		"pos": 23
+	}
+]
diff --git a/test/validator/samples/dynamic-element-invalid-tag/input.svelte b/test/validator/samples/dynamic-element-invalid-tag/input.svelte
new file mode 100644
index 0000000000..bc6b8be822
--- /dev/null
+++ b/test/validator/samples/dynamic-element-invalid-tag/input.svelte
@@ -0,0 +1,3 @@
+<div>
+	<svelte:element this>foo</svelte:element>
+</div>
diff --git a/test/validator/samples/dynamic-element-missing-tag/errors.json b/test/validator/samples/dynamic-element-missing-tag/errors.json
new file mode 100644
index 0000000000..8243deeb80
--- /dev/null
+++ b/test/validator/samples/dynamic-element-missing-tag/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "missing-element-definition",
+	"message": "<svelte:element> must have a 'this' attribute",
+	"start": {
+		"line": 2,
+		"column": 1,
+		"character": 7
+	},
+	"end": {
+		"line": 2,
+		"column": 1,
+		"character": 7
+	},
+	"pos": 7
+}]
diff --git a/test/validator/samples/dynamic-element-missing-tag/input.svelte b/test/validator/samples/dynamic-element-missing-tag/input.svelte
new file mode 100644
index 0000000000..4b645d25a1
--- /dev/null
+++ b/test/validator/samples/dynamic-element-missing-tag/input.svelte
@@ -0,0 +1,3 @@
+<div>
+	<svelte:element>foo</svelte:element>
+</div>
diff --git a/test/validator/samples/dynamic-element-this/errors.json b/test/validator/samples/dynamic-element-this/errors.json
new file mode 100644
index 0000000000..7d61c20ee2
--- /dev/null
+++ b/test/validator/samples/dynamic-element-this/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "unexpected-reserved-word",
+	"message": "'this' is a reserved word in JavaScript and cannot be used here",
+	"start": {
+		"line": 2,
+		"column": 18,
+		"character": 24
+	},
+	"end": {
+		"line": 2,
+		"column": 18,
+		"character": 24
+	},
+	"pos": 24
+	}]
diff --git a/test/validator/samples/dynamic-element-this/input.svelte b/test/validator/samples/dynamic-element-this/input.svelte
new file mode 100644
index 0000000000..1a5079b924
--- /dev/null
+++ b/test/validator/samples/dynamic-element-this/input.svelte
@@ -0,0 +1,3 @@
+<div>
+	<svelte:element {this}>foo</svelte:element>
+</div>
diff --git a/test/validator/samples/each-block-destructured-object-rest-comma-after/errors.json b/test/validator/samples/each-block-destructured-object-rest-comma-after/errors.json
new file mode 100644
index 0000000000..df899b7702
--- /dev/null
+++ b/test/validator/samples/each-block-destructured-object-rest-comma-after/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "parse-error",
+	"message": "Comma is not permitted after the rest element",
+	"pos": 100,
+	"start": {
+		"line": 5,
+		"column": 53,
+		"character": 100
+	},
+	"end": {
+		"line": 5,
+		"column": 53,
+		"character": 100
+	}
+}]
diff --git a/test/validator/samples/each-block-destructured-object-rest-comma-after/input.svelte b/test/validator/samples/each-block-destructured-object-rest-comma-after/input.svelte
new file mode 100644
index 0000000000..661b2dfea7
--- /dev/null
+++ b/test/validator/samples/each-block-destructured-object-rest-comma-after/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let animalEntries;
+</script>
+
+{#each animalEntries as { animal, features: { ...rest, eyes } } }
+	<p {...rest}>{animal} {eyes}</p>
+{/each}
diff --git a/test/validator/samples/each-block-invalid-context-destructured-object/errors.json b/test/validator/samples/each-block-invalid-context-destructured-object/errors.json
new file mode 100644
index 0000000000..c96e3d2c8c
--- /dev/null
+++ b/test/validator/samples/each-block-invalid-context-destructured-object/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "parse-error",
+	"message": "Unexpected keyword 'case'",
+	"start": {
+		"line": 1,
+		"column": 18,
+		"character": 18
+	},
+	"end": {
+		"line": 1,
+		"column": 18,
+		"character": 18
+	},
+	"pos": 18
+}]
diff --git a/test/validator/samples/each-block-invalid-context-destructured-object/input.svelte b/test/validator/samples/each-block-invalid-context-destructured-object/input.svelte
new file mode 100644
index 0000000000..a891f131a0
--- /dev/null
+++ b/test/validator/samples/each-block-invalid-context-destructured-object/input.svelte
@@ -0,0 +1,3 @@
+{#each cases as { case }}
+	{case.title}
+{/each}
diff --git a/test/validator/samples/each-block-invalid-context-destructured/errors.json b/test/validator/samples/each-block-invalid-context-destructured/errors.json
new file mode 100644
index 0000000000..62d6f62e87
--- /dev/null
+++ b/test/validator/samples/each-block-invalid-context-destructured/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "parse-error",
+	"message": "Unexpected token",
+	"start": {
+		"line": 1,
+		"column": 17,
+		"character": 17
+	},
+	"end": {
+		"line": 1,
+		"column": 17,
+		"character": 17
+	},
+	"pos": 17
+}]
\ No newline at end of file
diff --git a/test/validator/samples/each-block-invalid-context-destructured/input.svelte b/test/validator/samples/each-block-invalid-context-destructured/input.svelte
new file mode 100644
index 0000000000..9e76daab64
--- /dev/null
+++ b/test/validator/samples/each-block-invalid-context-destructured/input.svelte
@@ -0,0 +1,3 @@
+{#each cases as [case]}
+	{case.title}
+{/each}
\ No newline at end of file
diff --git a/test/validator/samples/each-block-invalid-context/errors.json b/test/validator/samples/each-block-invalid-context/errors.json
new file mode 100644
index 0000000000..f997aa269f
--- /dev/null
+++ b/test/validator/samples/each-block-invalid-context/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "unexpected-reserved-word",
+	"message": "'case' is a reserved word in JavaScript and cannot be used here",
+	"start": {
+		"line": 1,
+		"column": 16,
+		"character": 16
+	},
+	"end": {
+		"line": 1,
+		"column": 16,
+		"character": 16
+	},
+	"pos": 16
+}]
\ No newline at end of file
diff --git a/test/validator/samples/each-block-invalid-context/input.svelte b/test/validator/samples/each-block-invalid-context/input.svelte
new file mode 100644
index 0000000000..7e30416e2a
--- /dev/null
+++ b/test/validator/samples/each-block-invalid-context/input.svelte
@@ -0,0 +1,3 @@
+{#each cases as case}
+	{case.title}
+{/each}
\ No newline at end of file
diff --git a/test/validator/samples/each-block-multiple-children/_config.js b/test/validator/samples/each-block-multiple-children/_config.js
new file mode 100644
index 0000000000..083edcd210
--- /dev/null
+++ b/test/validator/samples/each-block-multiple-children/_config.js
@@ -0,0 +1,3 @@
+export default {
+	dev: true
+};
diff --git a/test/validator/samples/each-block-multiple-children/input.svelte b/test/validator/samples/each-block-multiple-children/input.svelte
new file mode 100644
index 0000000000..211ebed0c8
--- /dev/null
+++ b/test/validator/samples/each-block-multiple-children/input.svelte
@@ -0,0 +1,15 @@
+<script>
+	export let things;
+	export let soDoesThis;
+</script>
+
+{#each things as thing}
+	<span>this only exists...</span>
+	<span>...to increase test coverage</span>
+{/each}
+
+{#each things as thing}{soDoesThis}{/each}
+
+{#each things as thing}
+	andThis
+{/each}
\ No newline at end of file
diff --git a/test/validator/samples/each-block-multiple-children/warnings.json b/test/validator/samples/each-block-multiple-children/warnings.json
new file mode 100644
index 0000000000..0637a088a0
--- /dev/null
+++ b/test/validator/samples/each-block-multiple-children/warnings.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/test/validator/samples/empty-block/input.svelte b/test/validator/samples/empty-block/input.svelte
new file mode 100644
index 0000000000..4185f4f817
--- /dev/null
+++ b/test/validator/samples/empty-block/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	let things = [];
+</script>
+
+{#each things as thing}
+
+{/each}
+
+{#each things as thing}{/each}
\ No newline at end of file
diff --git a/test/validator/samples/empty-block/warnings.json b/test/validator/samples/empty-block/warnings.json
new file mode 100644
index 0000000000..d563970425
--- /dev/null
+++ b/test/validator/samples/empty-block/warnings.json
@@ -0,0 +1,32 @@
+[
+	{
+		"code": "empty-block",
+		"message": "Empty block",
+		"start": {
+			"line": 5,
+			"column": 0,
+			"character": 38
+		},
+		"end": {
+			"line": 7,
+			"column": 7,
+			"character": 70
+		},
+		"pos": 38
+	},
+	{
+		"code": "empty-block",
+		"message": "Empty block",
+		"start": {
+			"line": 9,
+			"column": 0,
+			"character": 72
+		},
+		"end": {
+			"line": 9,
+			"column": 30,
+			"character": 102
+		},
+		"pos": 72
+	}
+]
\ No newline at end of file
diff --git a/test/validator/samples/error-mode-warn/input.svelte b/test/validator/samples/error-mode-warn/input.svelte
new file mode 100644
index 0000000000..5304ef4c71
--- /dev/null
+++ b/test/validator/samples/error-mode-warn/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	const dummy = 'foo';
+</script>
+
+<input bind:value={dummy}>
+<input bind:value={undeclared}>
diff --git a/test/validator/samples/error-mode-warn/options.json b/test/validator/samples/error-mode-warn/options.json
new file mode 100644
index 0000000000..8d48d2f34e
--- /dev/null
+++ b/test/validator/samples/error-mode-warn/options.json
@@ -0,0 +1,3 @@
+{
+	"errorMode": "warn"
+}
\ No newline at end of file
diff --git a/test/validator/samples/error-mode-warn/warnings.json b/test/validator/samples/error-mode-warn/warnings.json
new file mode 100644
index 0000000000..cce6324df5
--- /dev/null
+++ b/test/validator/samples/error-mode-warn/warnings.json
@@ -0,0 +1,47 @@
+[
+	{
+		"code": "invalid-binding",
+		"message": "Cannot bind to a variable which is not writable",
+		"pos": 61,
+		"start": {
+			"line": 5,
+			"column": 19,
+			"character": 61
+		},
+		"end": {
+			"line": 5,
+			"column": 24,
+			"character": 66
+		}
+	},
+	{
+		"code": "missing-declaration",
+		"message": "'undeclared' is not defined",
+		"pos": 88,
+		"start": {
+			"character": 88,
+			"column": 19,
+			"line": 6
+		},
+		"end": {
+			"character": 98,
+			"column": 29,
+			"line": 6
+		}
+	},
+	{
+		"code": "binding-undeclared",
+		"message": "undeclared is not declared",
+		"pos": 88,
+		"end": {
+			"character": 98,
+			"column": 29,
+			"line": 6
+		},
+		"start": {
+			"character": 88,
+			"column": 19,
+			"line": 6
+		}
+	}
+]
\ No newline at end of file
diff --git a/test/validator/samples/event-modifiers-invalid-nonpassive/errors.json b/test/validator/samples/event-modifiers-invalid-nonpassive/errors.json
new file mode 100644
index 0000000000..a7e5a2a76c
--- /dev/null
+++ b/test/validator/samples/event-modifiers-invalid-nonpassive/errors.json
@@ -0,0 +1,15 @@
+[{
+	"message": "The 'passive' and 'nonpassive' modifiers cannot be used together",
+	"code": "invalid-event-modifier",
+	"start": {
+		"line": 1,
+		"column": 5,
+		"character": 5
+	},
+	"end": {
+		"line": 1,
+		"column": 51,
+		"character": 51
+	},
+	"pos": 5
+}]
diff --git a/test/validator/samples/event-modifiers-invalid-nonpassive/input.svelte b/test/validator/samples/event-modifiers-invalid-nonpassive/input.svelte
new file mode 100644
index 0000000000..3557aa4b1d
--- /dev/null
+++ b/test/validator/samples/event-modifiers-invalid-nonpassive/input.svelte
@@ -0,0 +1,3 @@
+<div on:touchstart|nonpassive|passive={handleWheel}>
+	oops
+</div>
\ No newline at end of file
diff --git a/test/validator/samples/event-modifiers-invalid-passive/errors.json b/test/validator/samples/event-modifiers-invalid-passive/errors.json
new file mode 100644
index 0000000000..93807d0a4e
--- /dev/null
+++ b/test/validator/samples/event-modifiers-invalid-passive/errors.json
@@ -0,0 +1,15 @@
+[{
+	"message": "The 'passive' and 'preventDefault' modifiers cannot be used together",
+	"code": "invalid-event-modifier",
+	"start": {
+		"line": 1,
+		"column": 5,
+		"character": 5
+	},
+	"end": {
+		"line": 1,
+		"column": 50,
+		"character": 50
+	},
+	"pos": 5
+}]
diff --git a/test/validator/samples/event-modifiers-invalid-passive/input.svelte b/test/validator/samples/event-modifiers-invalid-passive/input.svelte
new file mode 100644
index 0000000000..db9c9f8fb0
--- /dev/null
+++ b/test/validator/samples/event-modifiers-invalid-passive/input.svelte
@@ -0,0 +1,3 @@
+<div on:wheel|passive|preventDefault={handleWheel}>
+	oops
+</div>
\ No newline at end of file
diff --git a/test/validator/samples/event-modifiers-invalid/errors.json b/test/validator/samples/event-modifiers-invalid/errors.json
new file mode 100644
index 0000000000..ea6de4ce34
--- /dev/null
+++ b/test/validator/samples/event-modifiers-invalid/errors.json
@@ -0,0 +1,15 @@
+[{
+	"message": "Valid event modifiers are preventDefault, stopPropagation, capture, once, passive, nonpassive, self or trusted",
+	"code": "invalid-event-modifier",
+	"start": {
+		"line": 1,
+		"column": 8,
+		"character": 8
+	},
+	"end": {
+		"line": 1,
+		"column": 34,
+		"character": 34
+	},
+	"pos": 8
+}]
diff --git a/test/validator/samples/event-modifiers-invalid/input.svelte b/test/validator/samples/event-modifiers-invalid/input.svelte
new file mode 100644
index 0000000000..e217186266
--- /dev/null
+++ b/test/validator/samples/event-modifiers-invalid/input.svelte
@@ -0,0 +1 @@
+<button on:click|stop|bad={doThat}></button>
\ No newline at end of file
diff --git a/test/validator/samples/event-modifiers-legacy/_config.js b/test/validator/samples/event-modifiers-legacy/_config.js
new file mode 100644
index 0000000000..52f59c8767
--- /dev/null
+++ b/test/validator/samples/event-modifiers-legacy/_config.js
@@ -0,0 +1,3 @@
+export default {
+	legacy: true
+};
diff --git a/test/validator/samples/event-modifiers-legacy/errors.json b/test/validator/samples/event-modifiers-legacy/errors.json
new file mode 100644
index 0000000000..2e340b7b2f
--- /dev/null
+++ b/test/validator/samples/event-modifiers-legacy/errors.json
@@ -0,0 +1,15 @@
+[{
+	"message": "The 'once' modifier cannot be used in legacy mode",
+	"code": "invalid-event-modifier",
+	"start": {
+		"line": 1,
+		"column": 8,
+		"character": 8
+	},
+	"end": {
+		"line": 1,
+		"column": 37,
+		"character": 37
+	},
+	"pos": 8
+}]
diff --git a/test/validator/samples/event-modifiers-legacy/input.svelte b/test/validator/samples/event-modifiers-legacy/input.svelte
new file mode 100644
index 0000000000..c53a616fb5
--- /dev/null
+++ b/test/validator/samples/event-modifiers-legacy/input.svelte
@@ -0,0 +1 @@
+<button on:click|once="{handleClick}"></button>
\ No newline at end of file
diff --git a/test/validator/samples/event-modifiers-redundant/input.svelte b/test/validator/samples/event-modifiers-redundant/input.svelte
new file mode 100644
index 0000000000..3161674beb
--- /dev/null
+++ b/test/validator/samples/event-modifiers-redundant/input.svelte
@@ -0,0 +1,12 @@
+<script>
+	function handleTouchstart() {
+		// ...
+	}
+
+	function handleClick() {
+		// ...
+	}
+</script>
+
+<button on:click|passive="{handleClick}"></button>
+<div on:touchstart|passive="{handleTouchstart}"></div>
\ No newline at end of file
diff --git a/test/validator/samples/event-modifiers-redundant/warnings.json b/test/validator/samples/event-modifiers-redundant/warnings.json
new file mode 100644
index 0000000000..e3b9110427
--- /dev/null
+++ b/test/validator/samples/event-modifiers-redundant/warnings.json
@@ -0,0 +1,32 @@
+[
+	{
+		"message": "The passive modifier only works with wheel and touch events",
+		"code": "redundant-event-modifier",
+		"start": {
+			"line": 11,
+			"column": 8,
+			"character": 110
+		},
+		"end": {
+			"line": 11,
+			"column": 40,
+			"character": 142
+		},
+		"pos": 110
+	},
+	{
+		"message": "Touch event handlers that don't use the 'event' object are passive by default",
+		"code": "redundant-event-modifier",
+		"start": {
+			"line": 12,
+			"column": 5,
+			"character": 158
+		},
+		"end": {
+			"line": 12,
+			"column": 47,
+			"character": 200
+		},
+		"pos": 158
+	}
+]
diff --git a/test/validator/samples/ignore-warning/input.svelte b/test/validator/samples/ignore-warning/input.svelte
new file mode 100644
index 0000000000..c4e7556d74
--- /dev/null
+++ b/test/validator/samples/ignore-warning/input.svelte
@@ -0,0 +1,7 @@
+<!-- svelte-ignore a11y-missing-attribute -->
+<div>
+	<img src="this-is-fine.jpg">
+	<marquee>but this is still discouraged</marquee>
+</div>
+
+<img src="potato.jpg">
\ No newline at end of file
diff --git a/test/validator/samples/ignore-warning/warnings.json b/test/validator/samples/ignore-warning/warnings.json
new file mode 100644
index 0000000000..6123fafae8
--- /dev/null
+++ b/test/validator/samples/ignore-warning/warnings.json
@@ -0,0 +1,32 @@
+[
+	{
+		"code": "a11y-distracting-elements",
+		"end": {
+			"character": 131,
+			"column": 49,
+			"line": 4
+		},
+		"message": "A11y: Avoid <marquee> elements",
+		"pos": 83,
+		"start": {
+			"character": 83,
+			"column": 1,
+			"line": 4
+		}
+	},
+	{
+		"code": "a11y-missing-attribute",
+		"end": {
+			"character": 162,
+			"column": 22,
+			"line": 7
+		},
+		"message": "A11y: <img> element should have an alt attribute",
+		"pos": 140,
+		"start": {
+			"character": 140,
+			"column": 0,
+			"line": 7
+		}
+	}
+]
\ No newline at end of file
diff --git a/test/validator/samples/ignore-warnings-cumulative/input.svelte b/test/validator/samples/ignore-warnings-cumulative/input.svelte
new file mode 100644
index 0000000000..2843a890ce
--- /dev/null
+++ b/test/validator/samples/ignore-warnings-cumulative/input.svelte
@@ -0,0 +1,17 @@
+<!-- svelte-ignore a11y-structure a11y-missing-attribute -->
+<div>
+	<figure>
+		<img src="potato.jpg">
+		<marquee>
+			<figcaption>potato</figcaption>
+		</marquee>
+	</figure>
+
+	<!-- svelte-ignore a11y-distracting-elements -->
+	<figure>
+		<img src="potato.jpg">
+		<marquee>
+			<figcaption>potato</figcaption>
+		</marquee>
+	</figure>
+</div>
\ No newline at end of file
diff --git a/test/validator/samples/ignore-warnings-cumulative/warnings.json b/test/validator/samples/ignore-warnings-cumulative/warnings.json
new file mode 100644
index 0000000000..3ab413824d
--- /dev/null
+++ b/test/validator/samples/ignore-warnings-cumulative/warnings.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "a11y-distracting-elements",
+		"end": {
+			"character": 161,
+			"column": 12,
+			"line": 7
+		},
+		"message": "A11y: Avoid <marquee> elements",
+		"pos": 104,
+		"start": {
+			"character": 104,
+			"column": 2,
+			"line": 5
+		}
+	}
+]
\ No newline at end of file
diff --git a/test/validator/samples/ignore-warnings-newline/input.svelte b/test/validator/samples/ignore-warnings-newline/input.svelte
new file mode 100644
index 0000000000..c75a91c630
--- /dev/null
+++ b/test/validator/samples/ignore-warnings-newline/input.svelte
@@ -0,0 +1,8 @@
+<!-- svelte-ignore a11y-missing-attribute
+                   a11y-distracting-elements -->
+<div>
+	<img src="this-is-fine.jpg">
+	<marquee>but this is still discouraged</marquee>
+</div>
+
+<img src="potato.jpg">
\ No newline at end of file
diff --git a/test/validator/samples/ignore-warnings-newline/warnings.json b/test/validator/samples/ignore-warnings-newline/warnings.json
new file mode 100644
index 0000000000..8247468444
--- /dev/null
+++ b/test/validator/samples/ignore-warnings-newline/warnings.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "a11y-missing-attribute",
+		"end": {
+			"character": 207,
+			"column": 22,
+			"line": 8
+		},
+		"message": "A11y: <img> element should have an alt attribute",
+		"pos": 185,
+		"start": {
+			"character": 185,
+			"column": 0,
+			"line": 8
+		}
+	}
+]
\ No newline at end of file
diff --git a/test/validator/samples/ignore-warnings-stacked/input.svelte b/test/validator/samples/ignore-warnings-stacked/input.svelte
new file mode 100644
index 0000000000..c6edb7240a
--- /dev/null
+++ b/test/validator/samples/ignore-warnings-stacked/input.svelte
@@ -0,0 +1,8 @@
+<!-- svelte-ignore a11y-missing-attribute -->
+<!-- svelte-ignore a11y-distracting-elements -->
+<div>
+	<img src="this-is-fine.jpg">
+	<marquee>but this is still discouraged</marquee>
+</div>
+
+<img src="potato.jpg">
\ No newline at end of file
diff --git a/test/validator/samples/ignore-warnings-stacked/warnings.json b/test/validator/samples/ignore-warnings-stacked/warnings.json
new file mode 100644
index 0000000000..dd647d7cb2
--- /dev/null
+++ b/test/validator/samples/ignore-warnings-stacked/warnings.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "a11y-missing-attribute",
+		"end": {
+			"character": 211,
+			"column": 22,
+			"line": 8
+		},
+		"message": "A11y: <img> element should have an alt attribute",
+		"pos": 189,
+		"start": {
+			"character": 189,
+			"column": 0,
+			"line": 8
+		}
+	}
+]
\ No newline at end of file
diff --git a/test/validator/samples/ignore-warnings/input.svelte b/test/validator/samples/ignore-warnings/input.svelte
new file mode 100644
index 0000000000..5fd7229f9a
--- /dev/null
+++ b/test/validator/samples/ignore-warnings/input.svelte
@@ -0,0 +1,7 @@
+<!-- svelte-ignore a11y-missing-attribute a11y-distracting-elements -->
+<div>
+	<img src="this-is-fine.jpg">
+	<marquee>but this is still discouraged</marquee>
+</div>
+
+<img src="potato.jpg">
\ No newline at end of file
diff --git a/test/validator/samples/ignore-warnings/warnings.json b/test/validator/samples/ignore-warnings/warnings.json
new file mode 100644
index 0000000000..576dfe76f4
--- /dev/null
+++ b/test/validator/samples/ignore-warnings/warnings.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "a11y-missing-attribute",
+		"end": {
+			"character": 188,
+			"column": 22,
+			"line": 7
+		},
+		"message": "A11y: <img> element should have an alt attribute",
+		"pos": 166,
+		"start": {
+			"character": 166,
+			"column": 0,
+			"line": 7
+		}
+	}
+]
\ No newline at end of file
diff --git a/test/validator/samples/illegal-variable-declaration/errors.json b/test/validator/samples/illegal-variable-declaration/errors.json
new file mode 100644
index 0000000000..e3d273138e
--- /dev/null
+++ b/test/validator/samples/illegal-variable-declaration/errors.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "illegal-variable-declaration",
+		"message": "Cannot declare same variable name which is imported inside <script context=\"module\">",
+		"start": {
+			"line": 6,
+			"column": 1,
+			"character": 86
+		},
+		"end": {
+			"line": 6,
+			"column": 9,
+			"character": 94
+		},
+		"pos": 86
+	}
+]
diff --git a/test/validator/samples/illegal-variable-declaration/input.svelte b/test/validator/samples/illegal-variable-declaration/input.svelte
new file mode 100644
index 0000000000..4542380f49
--- /dev/null
+++ b/test/validator/samples/illegal-variable-declaration/input.svelte
@@ -0,0 +1,9 @@
+<script context="module">
+	import { FOO } from './dummy.svelte';
+</script>
+
+<script>
+	let FOO;
+</script>
+
+{FOO}
diff --git a/test/validator/samples/import-meta/errors.json b/test/validator/samples/import-meta/errors.json
new file mode 100644
index 0000000000..0637a088a0
--- /dev/null
+++ b/test/validator/samples/import-meta/errors.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/test/validator/samples/import-meta/input.svelte b/test/validator/samples/import-meta/input.svelte
new file mode 100644
index 0000000000..a5ce32dd77
--- /dev/null
+++ b/test/validator/samples/import-meta/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	const url = import.meta.url;
+</script>
+
+{url}
+{import.meta.url}
diff --git a/test/validator/samples/invalid-empty-css-declaration/errors.json b/test/validator/samples/invalid-empty-css-declaration/errors.json
new file mode 100644
index 0000000000..f141168077
--- /dev/null
+++ b/test/validator/samples/invalid-empty-css-declaration/errors.json
@@ -0,0 +1,12 @@
+[{
+	"code": "invalid-declaration",
+	"message": "Declaration cannot be empty",
+	"start": {
+		"line": 11, "column": 0, "character": 93
+	},
+  	"end": {
+		"line": 11, "column": 0, "character": 93
+	},
+	"pos": 93,
+	"frame": " 9:     color: blue;\n10:   }\n11: </style>\n    ^"
+}]
\ No newline at end of file
diff --git a/test/validator/samples/invalid-empty-css-declaration/input.svelte b/test/validator/samples/invalid-empty-css-declaration/input.svelte
new file mode 100644
index 0000000000..1262b8e08a
--- /dev/null
+++ b/test/validator/samples/invalid-empty-css-declaration/input.svelte
@@ -0,0 +1,11 @@
+<div class='foo bar'></div>
+
+<style>
+	.foo {
+		color:;
+	}
+	.bar {
+		font:;
+		color: blue;
+	}
+</style>
\ No newline at end of file
diff --git a/test/validator/samples/missing-component-global/input.svelte b/test/validator/samples/missing-component-global/input.svelte
new file mode 100644
index 0000000000..5d17448bd4
--- /dev/null
+++ b/test/validator/samples/missing-component-global/input.svelte
@@ -0,0 +1,3 @@
+<div>
+	<String/>
+</div>
\ No newline at end of file
diff --git a/test/validator/samples/missing-component-global/warnings.json b/test/validator/samples/missing-component-global/warnings.json
new file mode 100644
index 0000000000..c9de56619a
--- /dev/null
+++ b/test/validator/samples/missing-component-global/warnings.json
@@ -0,0 +1,15 @@
+[{
+	"code": "missing-declaration",
+	"message": "'String' is not defined. Consider adding a <script> block with 'export let String' to declare a prop",
+	"start": {
+		"line": 2,
+		"column": 1,
+		"character": 7
+	},
+	"end": {
+		"line": 2,
+		"column": 10,
+		"character": 16
+	},
+	"pos": 7
+}]
\ No newline at end of file
diff --git a/test/validator/samples/missing-component/input.svelte b/test/validator/samples/missing-component/input.svelte
new file mode 100644
index 0000000000..2b689d711c
--- /dev/null
+++ b/test/validator/samples/missing-component/input.svelte
@@ -0,0 +1,3 @@
+<div>
+	<Widget/>
+</div>
\ No newline at end of file
diff --git a/test/validator/samples/missing-component/warnings.json b/test/validator/samples/missing-component/warnings.json
new file mode 100644
index 0000000000..9c95cd81f1
--- /dev/null
+++ b/test/validator/samples/missing-component/warnings.json
@@ -0,0 +1,15 @@
+[{
+	"code": "missing-declaration",
+	"message": "'Widget' is not defined. Consider adding a <script> block with 'export let Widget' to declare a prop",
+	"start": {
+		"line": 2,
+		"column": 1,
+		"character": 7
+	},
+	"end": {
+		"line": 2,
+		"column": 10,
+		"character": 16
+	},
+	"pos": 7
+}]
\ No newline at end of file
diff --git a/test/validator/samples/missing-custom-element-compile-options/input.svelte b/test/validator/samples/missing-custom-element-compile-options/input.svelte
new file mode 100644
index 0000000000..94ecce3ef6
--- /dev/null
+++ b/test/validator/samples/missing-custom-element-compile-options/input.svelte
@@ -0,0 +1 @@
+<svelte:options tag="custom-element" />
\ No newline at end of file
diff --git a/test/validator/samples/missing-custom-element-compile-options/warnings.json b/test/validator/samples/missing-custom-element-compile-options/warnings.json
new file mode 100644
index 0000000000..8d6d574fb2
--- /dev/null
+++ b/test/validator/samples/missing-custom-element-compile-options/warnings.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "missing-custom-element-compile-options",
+		"end": {
+			"character": 36,
+			"column": 36,
+			"line": 1
+		},
+		"message": "The 'tag' option is used when generating a custom element. Did you forget the 'customElement: true' compile option?",
+		"pos": 16,
+		"start": {
+			"character": 16,
+			"column": 16,
+			"line": 1
+		}
+	}
+]
diff --git a/test/validator/samples/module-script-reactive-declaration/input.svelte b/test/validator/samples/module-script-reactive-declaration/input.svelte
new file mode 100644
index 0000000000..9df1cd54dd
--- /dev/null
+++ b/test/validator/samples/module-script-reactive-declaration/input.svelte
@@ -0,0 +1,5 @@
+<script context="module">
+	let num = 2;
+	let square;
+	$: square = num * num;
+</script>
diff --git a/test/validator/samples/module-script-reactive-declaration/warnings.json b/test/validator/samples/module-script-reactive-declaration/warnings.json
new file mode 100644
index 0000000000..b1aa74dbcc
--- /dev/null
+++ b/test/validator/samples/module-script-reactive-declaration/warnings.json
@@ -0,0 +1,7 @@
+[{
+	"message": "$: has no effect in a module script",
+	"code": "module-script-reactive-declaration",
+	"start": { "line": 4, "column": 1, "character": 54 },
+	"end": { "line": 4, "column": 23, "character": 76 },
+	"pos": 54
+}]
diff --git a/test/validator/samples/multiple-script-default-context/errors.json b/test/validator/samples/multiple-script-default-context/errors.json
new file mode 100644
index 0000000000..6f0637b51b
--- /dev/null
+++ b/test/validator/samples/multiple-script-default-context/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-script",
+	"message": "A component can only have one instance-level <script> element",
+	"pos": 30,
+	"start": {
+		"line": 5,
+		"column": 0,
+		"character": 30
+	},
+	"end": {
+		"line": 5,
+		"column": 0,
+		"character": 30
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/multiple-script-default-context/input.svelte b/test/validator/samples/multiple-script-default-context/input.svelte
new file mode 100644
index 0000000000..9fdca4ccfc
--- /dev/null
+++ b/test/validator/samples/multiple-script-default-context/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	let foo;
+</script>
+
+<script>
+	let bar;
+</script>
\ No newline at end of file
diff --git a/test/validator/samples/multiple-script-module-context/errors.json b/test/validator/samples/multiple-script-module-context/errors.json
new file mode 100644
index 0000000000..7b86c61926
--- /dev/null
+++ b/test/validator/samples/multiple-script-module-context/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-script",
+	"message": "A component can only have one <script context=\"module\"> element",
+	"pos": 47,
+	"start": {
+		"line": 5,
+		"column": 0,
+		"character": 47
+	},
+	"end": {
+		"line": 5,
+		"column": 0,
+		"character": 47
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/multiple-script-module-context/input.svelte b/test/validator/samples/multiple-script-module-context/input.svelte
new file mode 100644
index 0000000000..b43f3cb8c8
--- /dev/null
+++ b/test/validator/samples/multiple-script-module-context/input.svelte
@@ -0,0 +1,7 @@
+<script context="module">
+	let foo;
+</script>
+
+<script context="module">
+	let bar;
+</script>
\ No newline at end of file
diff --git a/test/validator/samples/namespace-invalid-unguessable/errors.json b/test/validator/samples/namespace-invalid-unguessable/errors.json
new file mode 100644
index 0000000000..50288aa2c6
--- /dev/null
+++ b/test/validator/samples/namespace-invalid-unguessable/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-namespace-property",
+	"message": "Invalid namespace 'lol'",
+	"pos": 16,
+	"start": {
+		"line": 1,
+		"column": 16,
+		"character": 16
+	},
+	"end": {
+		"line": 1,
+		"column": 31,
+		"character": 31
+	}
+}]
diff --git a/test/validator/samples/namespace-invalid-unguessable/input.svelte b/test/validator/samples/namespace-invalid-unguessable/input.svelte
new file mode 100644
index 0000000000..fdbd779b5c
--- /dev/null
+++ b/test/validator/samples/namespace-invalid-unguessable/input.svelte
@@ -0,0 +1 @@
+<svelte:options namespace="lol"/>
diff --git a/test/validator/samples/namespace-invalid/errors.json b/test/validator/samples/namespace-invalid/errors.json
new file mode 100644
index 0000000000..ddb49a33e0
--- /dev/null
+++ b/test/validator/samples/namespace-invalid/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-namespace-property",
+	"message": "Invalid namespace 'http://www.w3.org/1999/svg' (did you mean 'http://www.w3.org/2000/svg'?)",
+	"pos": 16,
+	"start": {
+		"line": 1,
+		"column": 16,
+		"character": 16
+	},
+	"end": {
+		"line": 1,
+		"column": 54,
+		"character": 54
+	}
+}]
diff --git a/test/validator/samples/namespace-invalid/input.svelte b/test/validator/samples/namespace-invalid/input.svelte
new file mode 100644
index 0000000000..7d0189bbb4
--- /dev/null
+++ b/test/validator/samples/namespace-invalid/input.svelte
@@ -0,0 +1 @@
+<svelte:options namespace="http://www.w3.org/1999/svg"/>
diff --git a/test/validator/samples/namespace-non-literal/errors.json b/test/validator/samples/namespace-non-literal/errors.json
new file mode 100644
index 0000000000..c365065e48
--- /dev/null
+++ b/test/validator/samples/namespace-non-literal/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-namespace-attribute",
+	"message": "The 'namespace' attribute must be a string literal representing a valid namespace",
+	"pos": 16,
+	"start": {
+		"line": 1,
+		"column": 16,
+		"character": 16
+	},
+	"end": {
+		"line": 1,
+		"column": 30,
+		"character": 30
+	}
+}]
diff --git a/test/validator/samples/namespace-non-literal/input.svelte b/test/validator/samples/namespace-non-literal/input.svelte
new file mode 100644
index 0000000000..e7d600810f
--- /dev/null
+++ b/test/validator/samples/namespace-non-literal/input.svelte
@@ -0,0 +1 @@
+<svelte:options namespace={ns}/>
diff --git a/test/validator/samples/non-empty-block-dev/_config.js b/test/validator/samples/non-empty-block-dev/_config.js
new file mode 100644
index 0000000000..083edcd210
--- /dev/null
+++ b/test/validator/samples/non-empty-block-dev/_config.js
@@ -0,0 +1,3 @@
+export default {
+	dev: true
+};
diff --git a/test/validator/samples/non-empty-block-dev/input.svelte b/test/validator/samples/non-empty-block-dev/input.svelte
new file mode 100644
index 0000000000..689f3fa2fe
--- /dev/null
+++ b/test/validator/samples/non-empty-block-dev/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	let x;
+</script>
+
+{#if x}
+	&nbsp;
+{/if}
\ No newline at end of file
diff --git a/test/validator/samples/non-empty-block-dev/warnings.json b/test/validator/samples/non-empty-block-dev/warnings.json
new file mode 100644
index 0000000000..0637a088a0
--- /dev/null
+++ b/test/validator/samples/non-empty-block-dev/warnings.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/test/validator/samples/reactive-declaration-cyclical/errors.json b/test/validator/samples/reactive-declaration-cyclical/errors.json
new file mode 100644
index 0000000000..9a80d9fb29
--- /dev/null
+++ b/test/validator/samples/reactive-declaration-cyclical/errors.json
@@ -0,0 +1,7 @@
+[{
+	"message": "Cyclical dependency detected: a → b → a",
+	"code": "cyclical-reactive-declaration",
+	"start": { "line": 5, "column": 1, "character": 35 },
+	"end": { "line": 5, "column": 14, "character": 48 },
+	"pos": 35
+}]
diff --git a/test/validator/samples/reactive-declaration-cyclical/input.svelte b/test/validator/samples/reactive-declaration-cyclical/input.svelte
new file mode 100644
index 0000000000..c8221b9aa8
--- /dev/null
+++ b/test/validator/samples/reactive-declaration-cyclical/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	let a = 1;
+	let b = 2;
+
+	$: a = b + 1;
+	$: b = a + 1;
+</script>
\ No newline at end of file
diff --git a/test/validator/samples/reactive-declaration-non-top-level/input.svelte b/test/validator/samples/reactive-declaration-non-top-level/input.svelte
new file mode 100644
index 0000000000..ddba4819e0
--- /dev/null
+++ b/test/validator/samples/reactive-declaration-non-top-level/input.svelte
@@ -0,0 +1,8 @@
+<script>
+	let num = 2;
+	$: square = num * num;
+
+	function myFunc() {
+		$: double = num * 2;
+	}
+</script>
diff --git a/test/validator/samples/reactive-declaration-non-top-level/warnings.json b/test/validator/samples/reactive-declaration-non-top-level/warnings.json
new file mode 100644
index 0000000000..87944642cd
--- /dev/null
+++ b/test/validator/samples/reactive-declaration-non-top-level/warnings.json
@@ -0,0 +1,7 @@
+[{
+	"message": "$: has no effect outside of the top-level",
+	"code": "non-top-level-reactive-declaration",
+	"start": { "line": 6, "column": 2, "character": 71 },
+	"end": { "line": 6, "column": 22, "character": 91 },
+	"pos": 71
+}]
diff --git a/test/validator/samples/reactive-module-const-variable/input.svelte b/test/validator/samples/reactive-module-const-variable/input.svelte
new file mode 100644
index 0000000000..c89cc1c1d0
--- /dev/null
+++ b/test/validator/samples/reactive-module-const-variable/input.svelte
@@ -0,0 +1,9 @@
+<script context="module">
+	export const foo = 123;
+	export const doFoo = (foo) => foo;
+</script>
+
+<script>
+	$: bar = foo;
+	$: doFoo(bar);
+</script>
diff --git a/test/validator/samples/reactive-module-const-variable/warnings.json b/test/validator/samples/reactive-module-const-variable/warnings.json
new file mode 100644
index 0000000000..0d4f101c7a
--- /dev/null
+++ b/test/validator/samples/reactive-module-const-variable/warnings.json
@@ -0,0 +1,2 @@
+[
+]
diff --git a/test/validator/samples/reactive-module-variable-2/input.svelte b/test/validator/samples/reactive-module-variable-2/input.svelte
new file mode 100644
index 0000000000..d36d9cf210
--- /dev/null
+++ b/test/validator/samples/reactive-module-variable-2/input.svelte
@@ -0,0 +1,7 @@
+<script context="module">
+	let PI = 3.14;
+</script>
+<script>
+	let r;
+	$: area = PI * r * r;
+</script>
diff --git a/test/validator/samples/reactive-module-variable-2/warnings.json b/test/validator/samples/reactive-module-variable-2/warnings.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/test/validator/samples/reactive-module-variable-2/warnings.json
@@ -0,0 +1 @@
+[]
diff --git a/test/validator/samples/reactive-module-variable/input.svelte b/test/validator/samples/reactive-module-variable/input.svelte
new file mode 100644
index 0000000000..5a540de4f0
--- /dev/null
+++ b/test/validator/samples/reactive-module-variable/input.svelte
@@ -0,0 +1,6 @@
+<script context="module">
+	let foo;
+</script>
+<script>
+	$: bar = foo;
+</script>
diff --git a/test/validator/samples/reactive-module-variable/warnings.json b/test/validator/samples/reactive-module-variable/warnings.json
new file mode 100644
index 0000000000..d08fc1309f
--- /dev/null
+++ b/test/validator/samples/reactive-module-variable/warnings.json
@@ -0,0 +1,17 @@
+[
+	{
+		"code": "module-script-reactive-declaration",
+		"message": "\"foo\" is declared in a module script and will not be reactive",
+		"pos": 59,
+		"start": {
+			"character": 59,
+			"column": 4,
+			"line": 5
+		},
+		"end": {
+			"character": 69,
+			"column": 14,
+			"line": 5
+		}
+	}
+]
diff --git a/test/validator/samples/ref-not-supported-in-css/errors.json b/test/validator/samples/ref-not-supported-in-css/errors.json
new file mode 100644
index 0000000000..3227c14cf7
--- /dev/null
+++ b/test/validator/samples/ref-not-supported-in-css/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-ref-selector",
+	"message": "ref selectors are no longer supported",
+	"pos": 68,
+	"start": {
+		"line": 8,
+		"column": 1,
+		"character": 68
+	},
+	"end": {
+		"line": 8,
+		"column": 1,
+		"character": 68
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/ref-not-supported-in-css/input.svelte b/test/validator/samples/ref-not-supported-in-css/input.svelte
new file mode 100644
index 0000000000..dcd6974ef1
--- /dev/null
+++ b/test/validator/samples/ref-not-supported-in-css/input.svelte
@@ -0,0 +1,11 @@
+<script>
+	let foo;
+</script>
+
+<div bind:this={foo}></div>
+
+<style>
+	ref:foo {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/test/validator/samples/ref-not-supported/errors.json b/test/validator/samples/ref-not-supported/errors.json
new file mode 100644
index 0000000000..43c8c07615
--- /dev/null
+++ b/test/validator/samples/ref-not-supported/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-ref-directive",
+	"message": "The ref directive is no longer supported — use `bind:this={foo}` instead",
+	"pos": 5,
+	"start": {
+		"line": 1,
+		"column": 5,
+		"character": 5
+	},
+	"end": {
+		"line": 1,
+		"column": 5,
+		"character": 5
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/ref-not-supported/input.svelte b/test/validator/samples/ref-not-supported/input.svelte
new file mode 100644
index 0000000000..97e43ab90a
--- /dev/null
+++ b/test/validator/samples/ref-not-supported/input.svelte
@@ -0,0 +1 @@
+<div ref:foo></div>
\ No newline at end of file
diff --git a/test/validator/samples/script-invalid-context/errors.json b/test/validator/samples/script-invalid-context/errors.json
new file mode 100644
index 0000000000..07ad0f1270
--- /dev/null
+++ b/test/validator/samples/script-invalid-context/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-script",
+	"message": "If the context attribute is supplied, its value must be \"module\"",
+	"pos": 8,
+	"start": {
+		"line": 1,
+		"column": 8,
+		"character": 8
+	},
+	"end": {
+		"line": 1,
+		"column": 8,
+		"character": 8
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/script-invalid-context/input.svelte b/test/validator/samples/script-invalid-context/input.svelte
new file mode 100644
index 0000000000..d25935d25b
--- /dev/null
+++ b/test/validator/samples/script-invalid-context/input.svelte
@@ -0,0 +1,3 @@
+<script context="nope">
+	let foo;
+</script>
\ No newline at end of file
diff --git a/test/validator/samples/select-multiple/input.svelte b/test/validator/samples/select-multiple/input.svelte
new file mode 100644
index 0000000000..14cba6b882
--- /dev/null
+++ b/test/validator/samples/select-multiple/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	let value;
+</script>
+
+<select bind:value multiple>
+	<option>1</option>
+</select>
\ No newline at end of file
diff --git a/test/validator/samples/silence-warnings-2/input.svelte b/test/validator/samples/silence-warnings-2/input.svelte
new file mode 100644
index 0000000000..81cb90b7be
--- /dev/null
+++ b/test/validator/samples/silence-warnings-2/input.svelte
@@ -0,0 +1,9 @@
+<script context="module">
+	let foo;
+</script>
+
+<!-- svelte-ignore unused-export-let module-script-reactive-declaration -->
+<script>
+	export let unused;
+	$: reactive = foo;
+</script>
diff --git a/test/validator/samples/silence-warnings-2/warnings.json b/test/validator/samples/silence-warnings-2/warnings.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/test/validator/samples/silence-warnings-2/warnings.json
@@ -0,0 +1 @@
+[]
diff --git a/test/validator/samples/silence-warnings/input.svelte b/test/validator/samples/silence-warnings/input.svelte
new file mode 100644
index 0000000000..0e473f51db
--- /dev/null
+++ b/test/validator/samples/silence-warnings/input.svelte
@@ -0,0 +1,15 @@
+<script context="module">
+	let foo;
+</script>
+
+<script>
+	// svelte-ignore unused-export-let
+	export let unused;
+	// svelte-ignore module-script-reactive-declaration
+	$: reactive = foo;
+</script>
+
+<!-- svelte-ignore css-unused-selector -->
+<style>
+	.unused {}
+</style>
diff --git a/test/validator/samples/silence-warnings/warnings.json b/test/validator/samples/silence-warnings/warnings.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/test/validator/samples/silence-warnings/warnings.json
@@ -0,0 +1 @@
+[]
diff --git a/test/validator/samples/slot-attribute-invalid/errors.json b/test/validator/samples/slot-attribute-invalid/errors.json
new file mode 100644
index 0000000000..a75fdc065c
--- /dev/null
+++ b/test/validator/samples/slot-attribute-invalid/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-slotted-content",
+	"message": "Element with a slot='...' attribute must be a child of a component or a descendant of a custom element",
+	"start": {
+		"line": 1,
+		"column": 5,
+		"character": 5
+	},
+	"end": {
+		"line": 1,
+		"column": 15,
+		"character": 15
+	},
+	"pos": 5
+}]
diff --git a/test/validator/samples/slot-attribute-invalid/input.svelte b/test/validator/samples/slot-attribute-invalid/input.svelte
new file mode 100644
index 0000000000..ed407bb894
--- /dev/null
+++ b/test/validator/samples/slot-attribute-invalid/input.svelte
@@ -0,0 +1 @@
+<div slot='foo'>invalid</div>
\ No newline at end of file
diff --git a/test/validator/samples/svelte-slot-placement-2/errors.json b/test/validator/samples/svelte-slot-placement-2/errors.json
new file mode 100644
index 0000000000..5659b35e7d
--- /dev/null
+++ b/test/validator/samples/svelte-slot-placement-2/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-slotted-content",
+		"message": "<svelte:fragment> must be a child of a component",
+		"start": { "line": 5, "column": 0, "character": 59 },
+		"end": { "line": 7, "column": 18, "character": 112 },
+		"pos": 59
+	}
+]
diff --git a/test/validator/samples/svelte-slot-placement-2/input.svelte b/test/validator/samples/svelte-slot-placement-2/input.svelte
new file mode 100644
index 0000000000..4fad457bd8
--- /dev/null
+++ b/test/validator/samples/svelte-slot-placement-2/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<svelte:fragment>
+	<div>test</div>
+</svelte:fragment>
\ No newline at end of file
diff --git a/test/validator/samples/svelte-slot-placement/errors.json b/test/validator/samples/svelte-slot-placement/errors.json
new file mode 100644
index 0000000000..ce825243f0
--- /dev/null
+++ b/test/validator/samples/svelte-slot-placement/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-slotted-content",
+		"message": "<svelte:fragment> must be a child of a component",
+		"start": { "line": 7, "column": 2, "character": 77 },
+		"end": { "line": 9, "column": 20, "character": 134 },
+		"pos": 77
+	}
+]
diff --git a/test/validator/samples/svelte-slot-placement/input.svelte b/test/validator/samples/svelte-slot-placement/input.svelte
new file mode 100644
index 0000000000..a09639dd71
--- /dev/null
+++ b/test/validator/samples/svelte-slot-placement/input.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested>
+	<div>
+		<svelte:fragment>
+			<div>test</div>
+		</svelte:fragment>
+	</div>
+</Nested>
\ No newline at end of file
diff --git a/test/validator/samples/svg-child-component-declared-namespace/input.svelte b/test/validator/samples/svg-child-component-declared-namespace/input.svelte
new file mode 100644
index 0000000000..124265adb3
--- /dev/null
+++ b/test/validator/samples/svg-child-component-declared-namespace/input.svelte
@@ -0,0 +1,10 @@
+<svelte:options namespace="svg"/>
+
+<script>
+	export let x;
+	export let y;
+	export let width;
+	export let height;
+</script>
+
+<rect x={x} y={y} width={width} height={height}/>
diff --git a/test/validator/samples/svg-child-component-declared-namespace/warnings.json b/test/validator/samples/svg-child-component-declared-namespace/warnings.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/test/validator/samples/svg-child-component-declared-namespace/warnings.json
@@ -0,0 +1 @@
+[]
diff --git a/test/validator/samples/tag-custom-element-options-missing/input.svelte b/test/validator/samples/tag-custom-element-options-missing/input.svelte
new file mode 100644
index 0000000000..f5f5d74270
--- /dev/null
+++ b/test/validator/samples/tag-custom-element-options-missing/input.svelte
@@ -0,0 +1 @@
+<svelte:options tag="custom-element"/>
diff --git a/test/validator/samples/tag-custom-element-options-missing/warnings.json b/test/validator/samples/tag-custom-element-options-missing/warnings.json
new file mode 100644
index 0000000000..185c6c3179
--- /dev/null
+++ b/test/validator/samples/tag-custom-element-options-missing/warnings.json
@@ -0,0 +1,15 @@
+[{
+		"code": "missing-custom-element-compile-options",
+		"message": "The 'tag' option is used when generating a custom element. Did you forget the 'customElement: true' compile option?",
+		"start": {
+				"line": 1,
+				"column": 16,
+				"character": 16
+		},
+		"end": {
+				"line": 1,
+				"column": 36,
+				"character": 36
+		},
+		"pos": 16
+}]
diff --git a/test/validator/samples/tag-custom-element-options-true/_config.js b/test/validator/samples/tag-custom-element-options-true/_config.js
new file mode 100644
index 0000000000..ec3c350d46
--- /dev/null
+++ b/test/validator/samples/tag-custom-element-options-true/_config.js
@@ -0,0 +1,3 @@
+export default {
+	customElement: true
+};
diff --git a/test/validator/samples/tag-custom-element-options-true/input.svelte b/test/validator/samples/tag-custom-element-options-true/input.svelte
new file mode 100644
index 0000000000..f5f5d74270
--- /dev/null
+++ b/test/validator/samples/tag-custom-element-options-true/input.svelte
@@ -0,0 +1 @@
+<svelte:options tag="custom-element"/>
diff --git a/test/validator/samples/tag-invalid/errors.json b/test/validator/samples/tag-invalid/errors.json
new file mode 100644
index 0000000000..e6daa8433e
--- /dev/null
+++ b/test/validator/samples/tag-invalid/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-tag-property",
+	"message": "tag name must be two or more words joined by the '-' character",
+	"start": {
+		"line": 1,
+		"column": 16,
+		"character": 16
+	},
+	"end": {
+		"line": 1,
+		"column": 29,
+		"character": 29
+	},
+	"pos": 16
+}]
diff --git a/test/validator/samples/tag-invalid/input.svelte b/test/validator/samples/tag-invalid/input.svelte
new file mode 100644
index 0000000000..330552f726
--- /dev/null
+++ b/test/validator/samples/tag-invalid/input.svelte
@@ -0,0 +1 @@
+<svelte:options tag="invalid"/>
diff --git a/test/validator/samples/tag-non-string/errors.json b/test/validator/samples/tag-non-string/errors.json
new file mode 100644
index 0000000000..5736daaac6
--- /dev/null
+++ b/test/validator/samples/tag-non-string/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-tag-attribute",
+	"message": "'tag' must be a string literal",
+	"start": {
+		"line": 1,
+		"column": 16,
+		"character": 16
+	},
+	"end": {
+		"line": 1,
+		"column": 24,
+		"character": 24
+	},
+	"pos": 16
+}]
diff --git a/test/validator/samples/tag-non-string/input.svelte b/test/validator/samples/tag-non-string/input.svelte
new file mode 100644
index 0000000000..168b3ca031
--- /dev/null
+++ b/test/validator/samples/tag-non-string/input.svelte
@@ -0,0 +1 @@
+<svelte:options tag={42}/>
diff --git a/test/validator/samples/textarea-value-children/errors.json b/test/validator/samples/textarea-value-children/errors.json
new file mode 100644
index 0000000000..551071e6d1
--- /dev/null
+++ b/test/validator/samples/textarea-value-children/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "textarea-duplicate-value",
+	"message": "A <textarea> can have either a value attribute or (equivalently) child content, but not both",
+	"start": {
+		"line": 1,
+		"column": 10,
+		"character": 10
+	},
+	"end": {
+		"line": 1,
+		"column": 23,
+		"character": 23
+	},
+	"pos": 10
+}]
\ No newline at end of file
diff --git a/test/validator/samples/textarea-value-children/input.svelte b/test/validator/samples/textarea-value-children/input.svelte
new file mode 100644
index 0000000000..d94066aa48
--- /dev/null
+++ b/test/validator/samples/textarea-value-children/input.svelte
@@ -0,0 +1,3 @@
+<textarea value='{foo}'>
+	some illegal text
+</textarea>
\ No newline at end of file
diff --git a/test/validator/samples/title-no-attributes/errors.json b/test/validator/samples/title-no-attributes/errors.json
new file mode 100644
index 0000000000..4e9f133bd4
--- /dev/null
+++ b/test/validator/samples/title-no-attributes/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "illegal-attribute",
+	"message": "<title> cannot have attributes",
+	"start": {
+		"line": 2,
+		"column": 8,
+		"character": 22
+	},
+	"end": {
+		"line": 2,
+		"column": 25,
+		"character": 39
+	},
+	"pos": 22
+}]
\ No newline at end of file
diff --git a/test/validator/samples/title-no-attributes/input.svelte b/test/validator/samples/title-no-attributes/input.svelte
new file mode 100644
index 0000000000..0e2dbefa73
--- /dev/null
+++ b/test/validator/samples/title-no-attributes/input.svelte
@@ -0,0 +1,3 @@
+<svelte:head>
+	<title data-invalid=true>a static title</title>
+</svelte:head>
\ No newline at end of file
diff --git a/test/validator/samples/title-no-children/errors.json b/test/validator/samples/title-no-children/errors.json
new file mode 100644
index 0000000000..37179189d2
--- /dev/null
+++ b/test/validator/samples/title-no-children/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "illegal-structure",
+	"message": "<title> can only contain text and {tags}",
+	"start": {
+		"line": 2,
+		"column": 11,
+		"character": 25
+	},
+	"end": {
+		"line": 2,
+		"column": 35,
+		"character": 49
+	},
+	"pos": 25
+}]
\ No newline at end of file
diff --git a/test/validator/samples/title-no-children/input.svelte b/test/validator/samples/title-no-children/input.svelte
new file mode 100644
index 0000000000..dcefadf2b0
--- /dev/null
+++ b/test/validator/samples/title-no-children/input.svelte
@@ -0,0 +1,3 @@
+<svelte:head>
+	<title>an <strong>invalid</strong> title</title>
+</svelte:head>
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-in-transition/errors.json b/test/validator/samples/transition-duplicate-in-transition/errors.json
new file mode 100644
index 0000000000..955411d2ad
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-in-transition/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "duplicate-transition",
+	"message": "An element cannot have both an 'in' directive and a 'transition' directive",
+	"start": {
+		"line": 6,
+		"column": 12,
+		"character": 70
+	},
+	"end": {
+		"line": 6,
+		"column": 26,
+		"character": 84
+	},
+	"pos": 70
+}]
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-in-transition/input.svelte b/test/validator/samples/transition-duplicate-in-transition/input.svelte
new file mode 100644
index 0000000000..aa7f72847b
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-in-transition/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	function foo() {}
+	function bar() {}
+</script>
+
+<div in:foo transition:bar>...</div>
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-in/errors.json b/test/validator/samples/transition-duplicate-in/errors.json
new file mode 100644
index 0000000000..9a030a9ca2
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-in/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "duplicate-transition",
+	"message": "An element can only have one 'in' directive",
+	"start": {
+		"line": 6,
+		"column": 12,
+		"character": 70
+	},
+	"end": {
+		"line": 6,
+		"column": 18,
+		"character": 76
+	},
+	"pos": 70
+}]
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-in/input.svelte b/test/validator/samples/transition-duplicate-in/input.svelte
new file mode 100644
index 0000000000..d1bc020347
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-in/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	function foo() {}
+	function bar() {}
+</script>
+
+<div in:foo in:bar>...</div>
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-out-transition/errors.json b/test/validator/samples/transition-duplicate-out-transition/errors.json
new file mode 100644
index 0000000000..ec96e2804c
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-out-transition/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "duplicate-transition",
+	"message": "An element cannot have both an 'out' directive and a 'transition' directive",
+	"start": {
+		"line": 6,
+		"column": 13,
+		"character": 71
+	},
+	"end": {
+		"line": 6,
+		"column": 27,
+		"character": 85
+	},
+	"pos": 71
+}]
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-out-transition/input.svelte b/test/validator/samples/transition-duplicate-out-transition/input.svelte
new file mode 100644
index 0000000000..80efc85607
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-out-transition/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	function foo() {}
+	function bar() {}
+</script>
+
+<div out:foo transition:bar>...</div>
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-out/errors.json b/test/validator/samples/transition-duplicate-out/errors.json
new file mode 100644
index 0000000000..8465cca2b3
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-out/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "duplicate-transition",
+	"message": "An element can only have one 'out' directive",
+	"start": {
+		"line": 6,
+		"column": 13,
+		"character": 71
+	},
+	"end": {
+		"line": 6,
+		"column": 20,
+		"character": 78
+	},
+	"pos": 71
+}]
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-out/input.svelte b/test/validator/samples/transition-duplicate-out/input.svelte
new file mode 100644
index 0000000000..70442f85e5
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-out/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	function foo() {}
+	function bar() {}
+</script>
+
+<div out:foo out:bar>...</div>
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-transition-in/errors.json b/test/validator/samples/transition-duplicate-transition-in/errors.json
new file mode 100644
index 0000000000..eb441184bd
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-transition-in/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "duplicate-transition",
+	"message": "An element cannot have both a 'transition' directive and an 'in' directive",
+	"start": {
+		"line": 6,
+		"column": 20,
+		"character": 78
+	},
+	"end": {
+		"line": 6,
+		"column": 26,
+		"character": 84
+	},
+	"pos": 78
+}]
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-transition-in/input.svelte b/test/validator/samples/transition-duplicate-transition-in/input.svelte
new file mode 100644
index 0000000000..dd3ad9a2be
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-transition-in/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	function foo() {}
+	function bar() {}
+</script>
+
+<div transition:foo in:bar>...</div>
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-transition-out/errors.json b/test/validator/samples/transition-duplicate-transition-out/errors.json
new file mode 100644
index 0000000000..e8886067c6
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-transition-out/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "duplicate-transition",
+	"message": "An element cannot have both a 'transition' directive and an 'out' directive",
+	"start": {
+		"line": 6,
+		"column": 20,
+		"character": 78
+	},
+	"end": {
+		"line": 6,
+		"column": 27,
+		"character": 85
+	},
+	"pos": 78
+}]
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-transition-out/input.svelte b/test/validator/samples/transition-duplicate-transition-out/input.svelte
new file mode 100644
index 0000000000..aafd0c548a
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-transition-out/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	function foo() {}
+	function bar() {}
+</script>
+
+<div transition:foo out:bar>...</div>
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-transition/errors.json b/test/validator/samples/transition-duplicate-transition/errors.json
new file mode 100644
index 0000000000..2b265d3a72
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-transition/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "duplicate-transition",
+	"message": "An element can only have one 'transition' directive",
+	"start": {
+		"line": 6,
+		"column": 20,
+		"character": 78
+	},
+	"end": {
+		"line": 6,
+		"column": 34,
+		"character": 92
+	},
+	"pos": 78
+}]
\ No newline at end of file
diff --git a/test/validator/samples/transition-duplicate-transition/input.svelte b/test/validator/samples/transition-duplicate-transition/input.svelte
new file mode 100644
index 0000000000..6af44914e0
--- /dev/null
+++ b/test/validator/samples/transition-duplicate-transition/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	function foo() {}
+	function bar() {}
+</script>
+
+<div transition:foo transition:bar>...</div>
\ No newline at end of file
diff --git a/test/validator/samples/transition-missing/input.svelte b/test/validator/samples/transition-missing/input.svelte
new file mode 100644
index 0000000000..5d0e1b7067
--- /dev/null
+++ b/test/validator/samples/transition-missing/input.svelte
@@ -0,0 +1 @@
+<div in:foo>...</div>
\ No newline at end of file
diff --git a/test/validator/samples/transition-missing/warnings.json b/test/validator/samples/transition-missing/warnings.json
new file mode 100644
index 0000000000..19520a6729
--- /dev/null
+++ b/test/validator/samples/transition-missing/warnings.json
@@ -0,0 +1,15 @@
+[{
+	"code": "missing-declaration",
+	"message": "'foo' is not defined. Consider adding a <script> block with 'export let foo' to declare a prop",
+	"start": {
+		"line": 1,
+		"column": 5,
+		"character": 5
+	},
+	"end": {
+		"line": 1,
+		"column": 11,
+		"character": 11
+	},
+	"pos": 5
+}]
\ No newline at end of file
diff --git a/test/validator/samples/transition-on-component/errors.json b/test/validator/samples/transition-on-component/errors.json
new file mode 100644
index 0000000000..400539f8e6
--- /dev/null
+++ b/test/validator/samples/transition-on-component/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-transition",
+	"message": "Transitions can only be applied to DOM elements, not components",
+	"start": {
+		"line": 7,
+		"column": 8,
+		"character": 87
+	},
+	"end": {
+		"line": 7,
+		"column": 14,
+		"character": 93
+	},
+	"pos": 87
+}]
\ No newline at end of file
diff --git a/test/validator/samples/transition-on-component/input.svelte b/test/validator/samples/transition-on-component/input.svelte
new file mode 100644
index 0000000000..12c3cd9bf8
--- /dev/null
+++ b/test/validator/samples/transition-on-component/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	function foo() {}
+</script>
+
+<Widget in:foo/>
\ No newline at end of file
diff --git a/test/validator/samples/undefined-value-global/input.svelte b/test/validator/samples/undefined-value-global/input.svelte
new file mode 100644
index 0000000000..44e7332bf5
--- /dev/null
+++ b/test/validator/samples/undefined-value-global/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	console.log(potato);
+</script>
+
+<p>{potato}</p>
diff --git a/test/validator/samples/undefined-value-global/warnings.json b/test/validator/samples/undefined-value-global/warnings.json
new file mode 100644
index 0000000000..ee9e3d6c90
--- /dev/null
+++ b/test/validator/samples/undefined-value-global/warnings.json
@@ -0,0 +1,15 @@
+[{
+	"code": "missing-declaration",
+	"message": "'potato' is not defined",
+	"pos": 46,
+	"start": {
+		"line": 5,
+		"column": 4,
+		"character": 46
+	},
+	"end": {
+		"line": 5,
+		"column": 10,
+		"character": 52
+	}
+}]
diff --git a/test/validator/samples/undefined-value/input.svelte b/test/validator/samples/undefined-value/input.svelte
new file mode 100644
index 0000000000..0dec9632a7
--- /dev/null
+++ b/test/validator/samples/undefined-value/input.svelte
@@ -0,0 +1,6 @@
+<p>{potato}</p>
+<p>{Math.max(1, 2)}</p>
+
+{#each window.something as foo, i (foo.x + i)}
+	hello
+{/each}
diff --git a/test/validator/samples/undefined-value/warnings.json b/test/validator/samples/undefined-value/warnings.json
new file mode 100644
index 0000000000..790f83acfd
--- /dev/null
+++ b/test/validator/samples/undefined-value/warnings.json
@@ -0,0 +1,15 @@
+[{
+	"code": "missing-declaration",
+	"message": "'potato' is not defined. Consider adding a <script> block with 'export let potato' to declare a prop",
+	"pos": 4,
+	"start": {
+		"line": 1,
+		"column": 4,
+		"character": 4
+	},
+	"end": {
+		"line": 1,
+		"column": 10,
+		"character": 10
+	}
+}]
\ No newline at end of file
diff --git a/test/validator/samples/unreferenced-variables-each/input.svelte b/test/validator/samples/unreferenced-variables-each/input.svelte
new file mode 100644
index 0000000000..a96f9189a2
--- /dev/null
+++ b/test/validator/samples/unreferenced-variables-each/input.svelte
@@ -0,0 +1,20 @@
+<script>
+	let Component;
+	export let array;
+	export let default_value_1;
+	export let default_value_2;
+	export let default_value_3;
+	export let default_value_4;
+	export let default_value_5;
+	export let default_value_6;
+</script>
+
+<Component>
+	<svelte:fragment let:a={default_value_6}>
+		{#each array as default_value_5}
+			{#each array as { a = default_value_1, b: { b = [default_value_2, default_value_3], c: [c = default_value_4] }, d = default_value_5, e = default_value_6 }}
+				{a}{b}{c}{d}{e}
+			{/each}
+		{/each}
+	</svelte:fragment>
+</Component>
diff --git a/test/validator/samples/unreferenced-variables-each/warnings.json b/test/validator/samples/unreferenced-variables-each/warnings.json
new file mode 100644
index 0000000000..fa89da0e68
--- /dev/null
+++ b/test/validator/samples/unreferenced-variables-each/warnings.json
@@ -0,0 +1,32 @@
+[
+	{
+		"code": "unused-export-let",
+		"message": "Component_1 has unused export property 'default_value_5'. If it is for external reference only, please consider using `export const default_value_5`",
+		"pos": 172,
+		"start": {
+			"character": 172,
+			"column": 12,
+			"line": 8
+		},
+		"end": {
+			"character": 187,
+			"column": 27,
+			"line": 8
+		}
+	},
+	{
+		"code": "unused-export-let",
+		"message": "Component_1 has unused export property 'default_value_6'. If it is for external reference only, please consider using `export const default_value_6`",
+		"pos": 201,
+		"start": {
+			"character": 201,
+			"column": 12,
+			"line": 9
+		},
+		"end": {
+			"character": 216,
+			"column": 27,
+			"line": 9
+		}
+	}
+]
diff --git a/test/validator/samples/unreferenced-variables/input.svelte b/test/validator/samples/unreferenced-variables/input.svelte
new file mode 100644
index 0000000000..cebd861985
--- /dev/null
+++ b/test/validator/samples/unreferenced-variables/input.svelte
@@ -0,0 +1,48 @@
+<script context="module">
+  var a1 = 1;
+  let b1 = 1;
+  const c1 = 1;
+  var d1 = 1;
+  let e1 = 1;
+  const f1 = 1;
+  export { d1, e1, f1};
+  export var g1 = 1;
+  export let h1 = 1;
+  export const i1 = 1;
+  export let j1 = () => {};
+  export const k1 = () => {};
+  export function l1() {};
+  var m1 = 1;
+  let n1 = 1;
+  const o1 = 1;
+  function foo1() {
+    return m1 + n1 + o1;
+  }
+  export let p1;
+</script>
+
+<script>
+  var a2 = 1;
+  let b2 = 1;
+  const c2 = 1;
+  var d2 = 1;
+  let e2 = 1;
+  const f2 = 1;
+  export { d2, e2, f2};
+  export var g2 = 1;
+  export let h2 = 1;
+  export const i2 = 1;
+  export let j2 = () => {};
+  export const k2 = () => {};
+  export function l2() {};
+  var m2 = 1;
+  let n2 = 1;
+  const o2 = 1;
+  function foo2() {
+    return m2 + n2 + o2;
+  }
+  export let p2;
+  export let q2;
+  $p2;
+</script>
+{$q2}
diff --git a/test/validator/samples/unreferenced-variables/warnings.json b/test/validator/samples/unreferenced-variables/warnings.json
new file mode 100644
index 0000000000..4097ba023b
--- /dev/null
+++ b/test/validator/samples/unreferenced-variables/warnings.json
@@ -0,0 +1,77 @@
+[
+	{
+		"code": "unused-export-let",
+		"end": {
+			"character": 519,
+			"column": 13,
+			"line": 31
+		},
+		"message": "Component has unused export property 'd2'. If it is for external reference only, please consider using `export const d2`",
+		"pos": 517,
+		"start": {
+			"character": 517,
+			"column": 11,
+			"line": 31
+		}
+	},
+	{
+		"code": "unused-export-let",
+		"end": {
+			"character": 523,
+			"column": 17,
+			"line": 31
+		},
+		"message": "Component has unused export property 'e2'. If it is for external reference only, please consider using `export const e2`",
+		"pos": 521,
+		"start": {
+			"character": 521,
+			"column": 15,
+			"line": 31
+		}
+	},
+	{
+		"code": "unused-export-let",
+		"end": {
+			"character": 549,
+			"column": 19,
+			"line": 32
+		},
+		"message": "Component has unused export property 'g2'. If it is for external reference only, please consider using `export const g2`",
+		"pos": 543,
+		"start": {
+			"character": 543,
+			"column": 13,
+			"line": 32
+		}
+	},
+	{
+		"code": "unused-export-let",
+		"end": {
+			"character": 570,
+			"column": 19,
+			"line": 33
+		},
+		"message": "Component has unused export property 'h2'. If it is for external reference only, please consider using `export const h2`",
+		"pos": 564,
+		"start": {
+			"character": 564,
+			"column": 13,
+			"line": 33
+		}
+	},
+	{
+		"code": "unused-export-let",
+		"end": {
+			"character": 621,
+			"column": 26,
+			"line": 35
+		},
+		"message": "Component has unused export property 'j2'. If it is for external reference only, please consider using `export const j2`",
+		"pos": 608,
+		"start": {
+			"character": 608,
+			"column": 13,
+			"line": 35
+		}
+	}
+]
diff --git a/test/validator/samples/use-the-platform/input.svelte b/test/validator/samples/use-the-platform/input.svelte
new file mode 100644
index 0000000000..bff03d2ed5
--- /dev/null
+++ b/test/validator/samples/use-the-platform/input.svelte
@@ -0,0 +1,2 @@
+<div className="abc"></div>
+<label htmlFor="i"><input /></label>
\ No newline at end of file
diff --git a/test/validator/samples/use-the-platform/warnings.json b/test/validator/samples/use-the-platform/warnings.json
new file mode 100644
index 0000000000..bbc37c5e91
--- /dev/null
+++ b/test/validator/samples/use-the-platform/warnings.json
@@ -0,0 +1,32 @@
+[
+	{
+		"code": "invalid-html-attribute",
+		"message": "'className' is not a valid HTML attribute. Did you mean 'class'?",
+		"pos": 5,
+		"start": {
+			"character": 5,
+			"column": 5,
+			"line": 1
+		},
+		"end": {
+			"character": 20,
+			"column": 20,
+			"line": 1
+		}
+	},
+	{
+		"code": "invalid-html-attribute",
+		"message": "'htmlFor' is not a valid HTML attribute. Did you mean 'for'?",
+		"pos": 35,
+		"start": {
+			"character": 35,
+			"column": 7,
+			"line": 2
+		},
+		"end": {
+			"character": 46,
+			"column": 18,
+			"line": 2
+		}
+	}
+]
diff --git a/test/validator/samples/window-binding-invalid-innerwidth/errors.json b/test/validator/samples/window-binding-invalid-innerwidth/errors.json
new file mode 100644
index 0000000000..c348a48811
--- /dev/null
+++ b/test/validator/samples/window-binding-invalid-innerwidth/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-binding",
+	"message": "'innerwidth' is not a valid binding on <svelte:window> (did you mean 'innerWidth'?)",
+	"start": {
+		"line": 1,
+		"column": 15,
+		"character": 15
+	},
+	"end": {
+		"line": 1,
+		"column": 34,
+		"character": 34
+	},
+	"pos": 15
+}]
\ No newline at end of file
diff --git a/test/validator/samples/window-binding-invalid-innerwidth/input.svelte b/test/validator/samples/window-binding-invalid-innerwidth/input.svelte
new file mode 100644
index 0000000000..72b5e36cf1
--- /dev/null
+++ b/test/validator/samples/window-binding-invalid-innerwidth/input.svelte
@@ -0,0 +1 @@
+<svelte:window bind:innerwidth={w}/>
\ No newline at end of file
diff --git a/test/validator/samples/window-binding-invalid-value/errors.json b/test/validator/samples/window-binding-invalid-value/errors.json
new file mode 100644
index 0000000000..7a42e62b9a
--- /dev/null
+++ b/test/validator/samples/window-binding-invalid-value/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-binding",
+	"message": "Bindings on <svelte:window> must be to top-level properties, e.g. 'baz' rather than 'foo.bar.baz'",
+	"start": {
+		"line": 1,
+		"column": 32,
+		"character": 32
+	},
+	"end": {
+		"line": 1,
+		"column": 43,
+		"character": 43
+	},
+	"pos": 32
+}]
\ No newline at end of file
diff --git a/test/validator/samples/window-binding-invalid-value/input.svelte b/test/validator/samples/window-binding-invalid-value/input.svelte
new file mode 100644
index 0000000000..7bfc3d58f1
--- /dev/null
+++ b/test/validator/samples/window-binding-invalid-value/input.svelte
@@ -0,0 +1 @@
+<svelte:window bind:innerWidth={foo.bar.baz}/>
\ No newline at end of file
diff --git a/test/validator/samples/window-binding-invalid-width/errors.json b/test/validator/samples/window-binding-invalid-width/errors.json
new file mode 100644
index 0000000000..3274188662
--- /dev/null
+++ b/test/validator/samples/window-binding-invalid-width/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-binding",
+	"message": "'width' is not a valid binding on <svelte:window> (did you mean 'innerWidth'?)",
+	"start": {
+		"line": 1,
+		"column": 15,
+		"character": 15
+	},
+	"end": {
+		"line": 1,
+		"column": 29,
+		"character": 29
+	},
+	"pos": 15
+}]
\ No newline at end of file
diff --git a/test/validator/samples/window-binding-invalid-width/input.svelte b/test/validator/samples/window-binding-invalid-width/input.svelte
new file mode 100644
index 0000000000..88dcd5aa02
--- /dev/null
+++ b/test/validator/samples/window-binding-invalid-width/input.svelte
@@ -0,0 +1 @@
+<svelte:window bind:width={w}/>
\ No newline at end of file
diff --git a/test/validator/samples/window-binding-invalid/errors.json b/test/validator/samples/window-binding-invalid/errors.json
new file mode 100644
index 0000000000..b8cae81bf3
--- /dev/null
+++ b/test/validator/samples/window-binding-invalid/errors.json
@@ -0,0 +1,15 @@
+[{
+	"code": "invalid-binding",
+	"message": "'potato' is not a valid binding on <svelte:window> — valid bindings are innerWidth, innerHeight, outerWidth, outerHeight, scrollX, scrollY or online",
+	"start": {
+		"line": 1,
+		"column": 15,
+		"character": 15
+	},
+	"end": {
+		"line": 1,
+		"column": 32,
+		"character": 32
+	},
+	"pos": 15
+}]
\ No newline at end of file
diff --git a/test/validator/samples/window-binding-invalid/input.svelte b/test/validator/samples/window-binding-invalid/input.svelte
new file mode 100644
index 0000000000..6ee989b7f3
--- /dev/null
+++ b/test/validator/samples/window-binding-invalid/input.svelte
@@ -0,0 +1 @@
+<svelte:window bind:potato={foo}/>
\ No newline at end of file
diff --git a/test/validator/samples/window-binding-online/errors.json b/test/validator/samples/window-binding-online/errors.json
new file mode 100644
index 0000000000..0637a088a0
--- /dev/null
+++ b/test/validator/samples/window-binding-online/errors.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/test/validator/samples/window-binding-online/input.svelte b/test/validator/samples/window-binding-online/input.svelte
new file mode 100644
index 0000000000..99aa93b12d
--- /dev/null
+++ b/test/validator/samples/window-binding-online/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let online;
+</script>
+
+<svelte:window bind:online/>
\ No newline at end of file
diff --git a/test/vars/index.ts b/test/vars/index.ts
new file mode 100644
index 0000000000..4cebf7fbb4
--- /dev/null
+++ b/test/vars/index.ts
@@ -0,0 +1,54 @@
+import * as fs from 'fs';
+import * as assert from 'assert';
+import { svelte, loadConfig, tryToLoadJson } from '../helpers';
+
+describe('vars', () => {
+	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
+		if (dir[0] === '.') return;
+
+		// add .solo to a sample directory name to only run that test
+		const solo = /\.solo/.test(dir);
+		const skip = /\.skip/.test(dir);
+
+		if (solo && process.env.CI) {
+			throw new Error('Forgot to remove `solo: true` from test');
+		}
+
+		for (const generate of ['dom', 'ssr', false]) {
+			(solo ? it.only : skip ? it.skip : it)(`${dir}, generate: ${generate}`, () => {
+				const config = loadConfig(`${__dirname}/samples/${dir}/_config.js`);
+				const filename = `${__dirname}/samples/${dir}/input.svelte`;
+				const input = fs.readFileSync(filename, 'utf-8').replace(/\s+$/, '');
+
+				const expectedError = tryToLoadJson(
+					`${__dirname}/samples/${dir}/error.json`
+				);
+
+				let result;
+				let error;
+
+				try {
+					result = svelte.compile(input, { ...config.options, generate });
+					config.test(assert, result.vars);
+				} catch (e) {
+					error = e;
+				}
+
+				if (error || expectedError) {
+					if (error && !expectedError) {
+						throw error;
+					}
+
+					if (expectedError && !error) {
+						throw new Error(`Expected an error: ${expectedError.message}`);
+					}
+
+					assert.equal(error.message, expectedError.message);
+					assert.deepEqual(error.start, expectedError.start);
+					assert.deepEqual(error.end, expectedError.end);
+					assert.equal(error.pos, expectedError.pos);
+				}
+			});
+		}
+	});
+});
diff --git a/test/vars/samples/$$props-logicless/_config.js b/test/vars/samples/$$props-logicless/_config.js
new file mode 100644
index 0000000000..05bbe7e0b2
--- /dev/null
+++ b/test/vars/samples/$$props-logicless/_config.js
@@ -0,0 +1,17 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				name: '$$props',
+				export_name: null,
+				injected: true,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: false
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/$$props-logicless/input.svelte b/test/vars/samples/$$props-logicless/input.svelte
new file mode 100644
index 0000000000..3615fcde44
--- /dev/null
+++ b/test/vars/samples/$$props-logicless/input.svelte
@@ -0,0 +1 @@
+<h1>Hello {$$props.name}!</h1>
\ No newline at end of file
diff --git a/test/vars/samples/$$props/_config.js b/test/vars/samples/$$props/_config.js
new file mode 100644
index 0000000000..05bbe7e0b2
--- /dev/null
+++ b/test/vars/samples/$$props/_config.js
@@ -0,0 +1,17 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				name: '$$props',
+				export_name: null,
+				injected: true,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: false
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/$$props/input.svelte b/test/vars/samples/$$props/input.svelte
new file mode 100644
index 0000000000..780514e037
--- /dev/null
+++ b/test/vars/samples/$$props/input.svelte
@@ -0,0 +1,3 @@
+<script></script>
+
+<h1>Hello {$$props.name}!</h1>
\ No newline at end of file
diff --git a/test/vars/samples/actions/_config.js b/test/vars/samples/actions/_config.js
new file mode 100644
index 0000000000..4cc2b9d18c
--- /dev/null
+++ b/test/vars/samples/actions/_config.js
@@ -0,0 +1,28 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				name: 'hoistable_foo',
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: false
+			},
+			{
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				name: 'foo',
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: true
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/actions/input.svelte b/test/vars/samples/actions/input.svelte
new file mode 100644
index 0000000000..8ba8f0f21f
--- /dev/null
+++ b/test/vars/samples/actions/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	import hoistable_foo from '';
+	let foo;
+</script>
+
+<div use:hoistable_foo/>
+<div use:foo/>
diff --git a/test/vars/samples/animations/_config.js b/test/vars/samples/animations/_config.js
new file mode 100644
index 0000000000..4cc2b9d18c
--- /dev/null
+++ b/test/vars/samples/animations/_config.js
@@ -0,0 +1,28 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				name: 'hoistable_foo',
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: false
+			},
+			{
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				name: 'foo',
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: true
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/animations/input.svelte b/test/vars/samples/animations/input.svelte
new file mode 100644
index 0000000000..02967d0fa8
--- /dev/null
+++ b/test/vars/samples/animations/input.svelte
@@ -0,0 +1,11 @@
+<script>
+	import hoistable_foo from '';
+	let foo;
+</script>
+
+{#each [] as x (x)}
+	<div animate:hoistable_foo/>
+{/each}
+{#each [] as x (x)}
+	<div animate:foo/>
+{/each}
diff --git a/test/vars/samples/assumed-global/_config.js b/test/vars/samples/assumed-global/_config.js
new file mode 100644
index 0000000000..782760bb8b
--- /dev/null
+++ b/test/vars/samples/assumed-global/_config.js
@@ -0,0 +1,5 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, []);
+	}
+};
diff --git a/test/vars/samples/assumed-global/input.svelte b/test/vars/samples/assumed-global/input.svelte
new file mode 100644
index 0000000000..e076ac55f8
--- /dev/null
+++ b/test/vars/samples/assumed-global/input.svelte
@@ -0,0 +1 @@
+{foo}
\ No newline at end of file
diff --git a/test/vars/samples/component-namespaced/_config.js b/test/vars/samples/component-namespaced/_config.js
new file mode 100644
index 0000000000..8ed4872355
--- /dev/null
+++ b/test/vars/samples/component-namespaced/_config.js
@@ -0,0 +1,17 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				name: 'NS',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: false
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/component-namespaced/input.svelte b/test/vars/samples/component-namespaced/input.svelte
new file mode 100644
index 0000000000..996d2d8769
--- /dev/null
+++ b/test/vars/samples/component-namespaced/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	import * as NS from 'some-library';
+</script>
+
+<NS.Foo/>
\ No newline at end of file
diff --git a/test/vars/samples/duplicate-globals/_config.js b/test/vars/samples/duplicate-globals/_config.js
new file mode 100644
index 0000000000..782760bb8b
--- /dev/null
+++ b/test/vars/samples/duplicate-globals/_config.js
@@ -0,0 +1,5 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, []);
+	}
+};
diff --git a/test/vars/samples/duplicate-globals/input.svelte b/test/vars/samples/duplicate-globals/input.svelte
new file mode 100644
index 0000000000..e7c004f54a
--- /dev/null
+++ b/test/vars/samples/duplicate-globals/input.svelte
@@ -0,0 +1,7 @@
+<script context="module">
+	console.log(1);
+</script>
+
+<script>
+	console.log(2);
+</script>
\ No newline at end of file
diff --git a/test/vars/samples/duplicate-non-hoistable/_config.js b/test/vars/samples/duplicate-non-hoistable/_config.js
new file mode 100644
index 0000000000..bd70e29800
--- /dev/null
+++ b/test/vars/samples/duplicate-non-hoistable/_config.js
@@ -0,0 +1,17 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				name: 'console',
+				injected: false,
+				export_name: null,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: true
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/duplicate-non-hoistable/input.svelte b/test/vars/samples/duplicate-non-hoistable/input.svelte
new file mode 100644
index 0000000000..90f7734008
--- /dev/null
+++ b/test/vars/samples/duplicate-non-hoistable/input.svelte
@@ -0,0 +1,9 @@
+<script context="module">
+	console.log(1);
+</script>
+
+<script>
+	var console = 42;
+</script>
+
+<p>{console}</p>
\ No newline at end of file
diff --git a/test/vars/samples/duplicate-vars/_config.js b/test/vars/samples/duplicate-vars/_config.js
new file mode 100644
index 0000000000..749a0c59af
--- /dev/null
+++ b/test/vars/samples/duplicate-vars/_config.js
@@ -0,0 +1,28 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				name: 'foo',
+				injected: false,
+				export_name: null,
+				module: true,
+				mutated: false,
+				reassigned: false,
+				referenced: false,
+				referenced_from_script: false,
+				writable: true
+			},
+			{
+				name: 'foo',
+				injected: false,
+				export_name: null,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: true
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/duplicate-vars/input.svelte b/test/vars/samples/duplicate-vars/input.svelte
new file mode 100644
index 0000000000..20c48738db
--- /dev/null
+++ b/test/vars/samples/duplicate-vars/input.svelte
@@ -0,0 +1,9 @@
+<script context="module">
+	var foo = 1;
+</script>
+
+<script>
+	var foo = 2;
+</script>
+
+<p>{foo}</p>
\ No newline at end of file
diff --git a/test/vars/samples/implicit-reactive/_config.js b/test/vars/samples/implicit-reactive/_config.js
new file mode 100644
index 0000000000..a8bf261d4f
--- /dev/null
+++ b/test/vars/samples/implicit-reactive/_config.js
@@ -0,0 +1,28 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				name: 'a',
+				injected: false,
+				export_name: null,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: true,
+				writable: true
+			},
+			{
+				name: 'b',
+				injected: true,
+				export_name: null,
+				module: false,
+				mutated: false,
+				reassigned: true,
+				referenced: true,
+				referenced_from_script: false,
+				writable: true
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/implicit-reactive/input.svelte b/test/vars/samples/implicit-reactive/input.svelte
new file mode 100644
index 0000000000..5958474d1b
--- /dev/null
+++ b/test/vars/samples/implicit-reactive/input.svelte
@@ -0,0 +1,6 @@
+<script>
+	let a = 1;
+	$: b = a + 1;
+</script>
+
+<p>{a} + 1 = {b}</p>
\ No newline at end of file
diff --git a/test/vars/samples/imports/_config.js b/test/vars/samples/imports/_config.js
new file mode 100644
index 0000000000..47e8c0c5d9
--- /dev/null
+++ b/test/vars/samples/imports/_config.js
@@ -0,0 +1,39 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				name: 'x',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: false,
+				referenced_from_script: false,
+				writable: false
+			},
+			{
+				name: 'y',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: false,
+				referenced_from_script: false,
+				writable: false
+			},
+			{
+				name: 'z',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: false,
+				referenced_from_script: false,
+				writable: false
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/imports/input.svelte b/test/vars/samples/imports/input.svelte
new file mode 100644
index 0000000000..a7b59691ac
--- /dev/null
+++ b/test/vars/samples/imports/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	import x from 'x';
+	import { y } from 'y';
+	import * as z from 'z';
+</script>
\ No newline at end of file
diff --git a/test/vars/samples/modules-vars/_config.js b/test/vars/samples/modules-vars/_config.js
new file mode 100644
index 0000000000..52b8940148
--- /dev/null
+++ b/test/vars/samples/modules-vars/_config.js
@@ -0,0 +1,72 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				name: 'a',
+				export_name: null,
+				injected: false,
+				module: true,
+				mutated: false,
+				reassigned: true,
+				referenced: false,
+				referenced_from_script: false,
+				writable: true
+			},
+			{
+				name: 'b',
+				export_name: null,
+				injected: false,
+				module: true,
+				mutated: true,
+				reassigned: false,
+				referenced: false,
+				referenced_from_script: false,
+				writable: true
+			},
+			{
+				name: 'c',
+				export_name: null,
+				injected: false,
+				module: true,
+				mutated: false,
+				reassigned: false,
+				referenced: false,
+				referenced_from_script: false,
+				writable: true
+			},
+			{
+				name: 'd',
+				export_name: null,
+				injected: false,
+				module: true,
+				mutated: false,
+				reassigned: false,
+				referenced: false,
+				referenced_from_script: false,
+				writable: true
+			},
+			{
+				name: 'c',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: true,
+				referenced: false,
+				referenced_from_script: true,
+				writable: true
+			},
+			{
+				name: 'foo',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: false,
+				referenced_from_script: false,
+				writable: false
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/modules-vars/input.svelte b/test/vars/samples/modules-vars/input.svelte
new file mode 100644
index 0000000000..8bbd5bdc5e
--- /dev/null
+++ b/test/vars/samples/modules-vars/input.svelte
@@ -0,0 +1,18 @@
+<script context='module'>
+	let a = {};
+	let b = {};
+	let c = {};
+	let d = {};
+</script>
+<script>
+	let c = {};
+
+	a = 1;
+	b.x = 1;
+
+	function foo() {
+		let d = {};
+		c = 1;
+		d.x = 1;
+	}
+</script>
\ No newline at end of file
diff --git a/test/vars/samples/mutated-vs-reassigned-bindings/_config.js b/test/vars/samples/mutated-vs-reassigned-bindings/_config.js
new file mode 100644
index 0000000000..65c7d5cc90
--- /dev/null
+++ b/test/vars/samples/mutated-vs-reassigned-bindings/_config.js
@@ -0,0 +1,28 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				name: 'count',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: true,
+				referenced: true,
+				referenced_from_script: false,
+				writable: true
+			},
+			{
+				name: 'user',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: true,
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: false
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/mutated-vs-reassigned-bindings/input.svelte b/test/vars/samples/mutated-vs-reassigned-bindings/input.svelte
new file mode 100644
index 0000000000..c1186ad3a7
--- /dev/null
+++ b/test/vars/samples/mutated-vs-reassigned-bindings/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	let count;
+	const user = { name: 'world' };
+</script>
+
+<input bind:value={user.name}>
+<input type=number bind:value={count}>
\ No newline at end of file
diff --git a/test/vars/samples/mutated-vs-reassigned/_config.js b/test/vars/samples/mutated-vs-reassigned/_config.js
new file mode 100644
index 0000000000..65c7d5cc90
--- /dev/null
+++ b/test/vars/samples/mutated-vs-reassigned/_config.js
@@ -0,0 +1,28 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				name: 'count',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: true,
+				referenced: true,
+				referenced_from_script: false,
+				writable: true
+			},
+			{
+				name: 'user',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: true,
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: false
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/mutated-vs-reassigned/input.svelte b/test/vars/samples/mutated-vs-reassigned/input.svelte
new file mode 100644
index 0000000000..6a5e604c26
--- /dev/null
+++ b/test/vars/samples/mutated-vs-reassigned/input.svelte
@@ -0,0 +1,7 @@
+<script>
+	let count;
+	const user = { name: 'world' };
+</script>
+
+<input on:input="{e => user.name = e.value}">
+<input type=number on:input="{e => count = +e.value}">
\ No newline at end of file
diff --git a/test/vars/samples/props/_config.js b/test/vars/samples/props/_config.js
new file mode 100644
index 0000000000..d5f5d1cc2b
--- /dev/null
+++ b/test/vars/samples/props/_config.js
@@ -0,0 +1,50 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				name: 'name',
+				export_name: 'name',
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: true
+			},
+			{
+				name: 'cats',
+				export_name: 'cats',
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: true
+			},
+			{
+				name: 'foo',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: false,
+				referenced_from_script: true,
+				writable: true
+			},
+			{
+				name: 'bar',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: true,
+				referenced: true,
+				referenced_from_script: true,
+				writable: true
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/props/input.svelte b/test/vars/samples/props/input.svelte
new file mode 100644
index 0000000000..7f0c1ea4e6
--- /dev/null
+++ b/test/vars/samples/props/input.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let name = 'world';
+	export let cats;
+
+	let foo = 1;
+	let bar;
+
+	$: bar = foo * 2;
+</script>
+
+<h1>Hello {name}!</h1>
+
+<ul>
+	{#each cats as cat}
+		<li><a target="_blank" href={cat.video}>{cat.name}</a></li>
+	{/each}
+</ul>
+
+<p>bar: {bar}</p>
\ No newline at end of file
diff --git a/test/vars/samples/referenced-from-script/_config.js b/test/vars/samples/referenced-from-script/_config.js
new file mode 100644
index 0000000000..ec068cb1d7
--- /dev/null
+++ b/test/vars/samples/referenced-from-script/_config.js
@@ -0,0 +1,160 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				name: 'i',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: false,
+				writable: false,
+				referenced_from_script: false
+			},
+			{
+				name: 'j',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: false,
+				writable: false,
+				referenced_from_script: false
+			},
+			{
+				name: 'k',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: false,
+				writable: false,
+				referenced_from_script: false
+			},
+			{
+				name: 'a',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: true,
+				referenced: false,
+				writable: true,
+				referenced_from_script: true
+			},
+			{
+				name: 'b',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: false,
+				writable: true,
+				referenced_from_script: true
+			},
+			{
+				name: 'c',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: false,
+				writable: true,
+				referenced_from_script: true
+			},
+			{
+				name: 'd',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: false,
+				writable: true,
+				referenced_from_script: true
+			},
+			{
+				name: 'e',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: false,
+				writable: true,
+				referenced_from_script: false
+			},
+			{
+				name: 'f',
+				export_name: 'f',
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: false,
+				writable: true,
+				referenced_from_script: false
+			},
+			{
+				name: 'g',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: false,
+				writable: true,
+				referenced_from_script: true
+			},
+			{
+				name: 'h',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: true,
+				referenced: false,
+				writable: true,
+				referenced_from_script: true
+			},
+			{
+				name: 'foo',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: false,
+				writable: false,
+				referenced_from_script: false
+			},
+			{
+				name: 'l',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: false,
+				referenced_from_script: true,
+				writable: false
+			},
+			{
+				name: 'bar',
+				export_name: 'bar',
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: false,
+				writable: false,
+				referenced_from_script: false
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/referenced-from-script/input.svelte b/test/vars/samples/referenced-from-script/input.svelte
new file mode 100644
index 0000000000..fbec4e6cf7
--- /dev/null
+++ b/test/vars/samples/referenced-from-script/input.svelte
@@ -0,0 +1,16 @@
+<script>
+  import i from 'foo';
+  import * as j from 'foo';
+  import { k } from 'foo';
+  let a, b, c, d, e, f, g, h;
+  
+  function foo() {
+    a = 1;
+    console.log(b);
+    return c + d.e + h++ + l();
+  }
+  function l() {}
+
+  export { f }
+  export const bar = g;
+</script>
diff --git a/test/vars/samples/store-referenced/_config.js b/test/vars/samples/store-referenced/_config.js
new file mode 100644
index 0000000000..bac35d1dba
--- /dev/null
+++ b/test/vars/samples/store-referenced/_config.js
@@ -0,0 +1,28 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				name: 'foo',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: true
+			},
+			{
+				name: '$foo',
+				export_name: null,
+				injected: true,
+				module: false,
+				mutated: true,
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: true
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/store-referenced/input.svelte b/test/vars/samples/store-referenced/input.svelte
new file mode 100644
index 0000000000..0222372f4d
--- /dev/null
+++ b/test/vars/samples/store-referenced/input.svelte
@@ -0,0 +1,5 @@
+<script>
+	let foo;
+</script>
+
+{$foo}
\ No newline at end of file
diff --git a/test/vars/samples/store-unreferenced/_config.js b/test/vars/samples/store-unreferenced/_config.js
new file mode 100644
index 0000000000..4965e52fec
--- /dev/null
+++ b/test/vars/samples/store-unreferenced/_config.js
@@ -0,0 +1,28 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				name: 'foo',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: true,
+				writable: true
+			},
+			{
+				name: '$foo',
+				export_name: null,
+				injected: true,
+				module: false,
+				mutated: true,
+				reassigned: false,
+				referenced: false,
+				referenced_from_script: false,
+				writable: true
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/store-unreferenced/input.svelte b/test/vars/samples/store-unreferenced/input.svelte
new file mode 100644
index 0000000000..3ad525047d
--- /dev/null
+++ b/test/vars/samples/store-unreferenced/input.svelte
@@ -0,0 +1,4 @@
+<script>
+	let foo;
+	console.log($foo);
+</script>
\ No newline at end of file
diff --git a/test/vars/samples/template-references/_config.js b/test/vars/samples/template-references/_config.js
new file mode 100644
index 0000000000..34c07e19e0
--- /dev/null
+++ b/test/vars/samples/template-references/_config.js
@@ -0,0 +1,39 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				name: 'Bar',
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: false
+			},
+			{
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				name: 'foo',
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: true
+			},
+			{
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				name: 'baz',
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: true
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/template-references/input.svelte b/test/vars/samples/template-references/input.svelte
new file mode 100644
index 0000000000..4e2edad7e6
--- /dev/null
+++ b/test/vars/samples/template-references/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Bar from './Bar.svelte';
+
+	let foo = 1;
+	let baz = 2;
+</script>
+
+{foo}
+<Bar {baz}/>
diff --git a/test/vars/samples/transitions/_config.js b/test/vars/samples/transitions/_config.js
new file mode 100644
index 0000000000..29a99b16cc
--- /dev/null
+++ b/test/vars/samples/transitions/_config.js
@@ -0,0 +1,72 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				name: 'hoistable_foo',
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: false
+			},
+			{
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				name: 'hoistable_bar',
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: false
+			},
+			{
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				name: 'hoistable_baz',
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: false
+			},
+			{
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				name: 'foo',
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: true
+			},
+			{
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				name: 'bar',
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: true
+			},
+			{
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				name: 'baz',
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: true
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/transitions/input.svelte b/test/vars/samples/transitions/input.svelte
new file mode 100644
index 0000000000..0db2b5289e
--- /dev/null
+++ b/test/vars/samples/transitions/input.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { hoistable_foo, hoistable_bar, hoistable_baz } from '';
+	let foo;
+	let bar;
+	let baz;
+</script>
+
+<div in:hoistable_foo/>
+<div out:hoistable_bar/>
+<div transition:hoistable_baz/>
+<div in:foo/>
+<div out:bar/>
+<div transition:baz/>
diff --git a/test/vars/samples/undeclared/_config.js b/test/vars/samples/undeclared/_config.js
new file mode 100644
index 0000000000..782760bb8b
--- /dev/null
+++ b/test/vars/samples/undeclared/_config.js
@@ -0,0 +1,5 @@
+export default {
+	test(assert, vars) {
+		assert.deepEqual(vars, []);
+	}
+};
diff --git a/test/vars/samples/undeclared/input.svelte b/test/vars/samples/undeclared/input.svelte
new file mode 100644
index 0000000000..0178466fe3
--- /dev/null
+++ b/test/vars/samples/undeclared/input.svelte
@@ -0,0 +1,3 @@
+<script></script>
+
+{foo}
\ No newline at end of file
diff --git a/test/vars/samples/vars-report-false/_config.js b/test/vars/samples/vars-report-false/_config.js
new file mode 100644
index 0000000000..f4709f09c8
--- /dev/null
+++ b/test/vars/samples/vars-report-false/_config.js
@@ -0,0 +1,9 @@
+export default {
+	options: {
+		varsReport: false
+	},
+
+	test(assert, vars) {
+		assert.deepEqual(vars, []);
+	}
+};
diff --git a/test/vars/samples/vars-report-false/input.svelte b/test/vars/samples/vars-report-false/input.svelte
new file mode 100644
index 0000000000..7583c99845
--- /dev/null
+++ b/test/vars/samples/vars-report-false/input.svelte
@@ -0,0 +1,5 @@
+<script>
+    export let foo = "bar";
+</script>
+
+{foo}
\ No newline at end of file
diff --git a/test/vars/samples/vars-report-full-noscript/_config.js b/test/vars/samples/vars-report-full-noscript/_config.js
new file mode 100644
index 0000000000..9c39324518
--- /dev/null
+++ b/test/vars/samples/vars-report-full-noscript/_config.js
@@ -0,0 +1,19 @@
+export default {
+	options: {
+		varsReport: 'full'
+	},
+
+	test(assert, vars) {
+		assert.deepEqual(vars, [{
+			name: 'foo',
+			export_name: null,
+			injected: false,
+			module: false,
+			mutated: false,
+			reassigned: false,
+			referenced: true,
+			referenced_from_script: false,
+			writable: false
+		}]);
+	}
+};
diff --git a/test/vars/samples/vars-report-full-noscript/input.svelte b/test/vars/samples/vars-report-full-noscript/input.svelte
new file mode 100644
index 0000000000..e076ac55f8
--- /dev/null
+++ b/test/vars/samples/vars-report-full-noscript/input.svelte
@@ -0,0 +1 @@
+{foo}
\ No newline at end of file
diff --git a/test/vars/samples/vars-report-full-script/_config.js b/test/vars/samples/vars-report-full-script/_config.js
new file mode 100644
index 0000000000..2519dc5508
--- /dev/null
+++ b/test/vars/samples/vars-report-full-script/_config.js
@@ -0,0 +1,31 @@
+export default {
+	options: {
+		varsReport: 'full'
+	},
+
+	test(assert, vars) {
+		assert.deepEqual(vars, [
+			{
+				name: 'foo',
+				export_name: 'foo',
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: true
+			}, {
+				name: 'bar',
+				export_name: null,
+				injected: false,
+				module: false,
+				mutated: false,
+				reassigned: false,
+				referenced: true,
+				referenced_from_script: false,
+				writable: false
+			}
+		]);
+	}
+};
diff --git a/test/vars/samples/vars-report-full-script/input.svelte b/test/vars/samples/vars-report-full-script/input.svelte
new file mode 100644
index 0000000000..11870584a6
--- /dev/null
+++ b/test/vars/samples/vars-report-full-script/input.svelte
@@ -0,0 +1,5 @@
+<script>
+    export let foo = "bar";
+</script>
+
+{foo} {bar}
\ No newline at end of file
diff --git a/test/vars/samples/vars-report-full/_config.js b/test/vars/samples/vars-report-full/_config.js
new file mode 100644
index 0000000000..9c39324518
--- /dev/null
+++ b/test/vars/samples/vars-report-full/_config.js
@@ -0,0 +1,19 @@
+export default {
+	options: {
+		varsReport: 'full'
+	},
+
+	test(assert, vars) {
+		assert.deepEqual(vars, [{
+			name: 'foo',
+			export_name: null,
+			injected: false,
+			module: false,
+			mutated: false,
+			reassigned: false,
+			referenced: true,
+			referenced_from_script: false,
+			writable: false
+		}]);
+	}
+};
diff --git a/test/vars/samples/vars-report-full/input.svelte b/test/vars/samples/vars-report-full/input.svelte
new file mode 100644
index 0000000000..0178466fe3
--- /dev/null
+++ b/test/vars/samples/vars-report-full/input.svelte
@@ -0,0 +1,3 @@
+<script></script>
+
+{foo}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000000..f2e055a2a9
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,34 @@
+{
+	"include": [],
+
+	"compilerOptions": {
+		"rootDir": "src",
+
+		// target node v8+ (https://node.green/)
+		// the only missing feature is Array.prototype.values
+		"lib": ["es2017"],
+		"target": "es2017",
+
+		"declaration": true,
+		"declarationDir": "types",
+
+		"noEmitOnError": true,
+		"noErrorTruncation": true,
+
+		// rollup takes care of these
+		"module": "esnext",
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"allowSyntheticDefaultImports": true,
+
+		// Hides exports flagged with @internal from the d.ts output
+		"stripInternal": true,
+
+		// TODO: error all the things
+		//"strict": true,
+		"noImplicitThis": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"typeRoots": ["./node_modules/@types"]
+	}
+}